diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-09-28 07:51:39 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-09-28 07:51:39 +0200 |
| commit | d238133a47f5b6331962ee6b2fb3e3fb9f40e025 (patch) | |
| tree | d0b1cf54cfb5a9f8da05224bfd8cd4be641c636c /apps/kit/src/lib/components/button.svelte | |
| parent | 2b58ff029107b23617d8c4b246de77876b3bf053 (diff) | |
| download | greatoffice-d238133a47f5b6331962ee6b2fb3e3fb9f40e025.tar.xz greatoffice-d238133a47f5b6331962ee6b2fb3e3fb9f40e025.zip | |
feat: Introduce some nicer colors
Diffstat (limited to 'apps/kit/src/lib/components/button.svelte')
| -rw-r--r-- | apps/kit/src/lib/components/button.svelte | 17 |
1 files changed, 8 insertions, 9 deletions
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte index 6566cec..929d728 100644 --- a/apps/kit/src/lib/components/button.svelte +++ b/apps/kit/src/lib/components/button.svelte @@ -15,9 +15,8 @@ export let href: string | undefined = undefined; export let text: string; - let sizeClasses = "px-3 py-2 text-xs"; - let kindClasses = - "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; + let sizeClasses = ""; + let kindClasses = ""; $: shared_props = { type: type, @@ -36,28 +35,28 @@ sizeClasses = "px-3 py-2 text-sm"; break; case "md": - sizeClasses = "px-4 py-2 text-sm"; + sizeClasses = "px-3 py-2 text-base"; break; case "lg": - sizeClasses = "px-4 py-2 text-base"; + sizeClasses = "px-3 py-2 text-lg"; break; case "xl": - sizeClasses = "px-6 py-3 text-base"; + sizeClasses = "px-6 py-3 text-xl"; break; } $: switch (kind) { case "secondary": kindClasses = - "border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500"; + "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500"; break; case "primary": kindClasses = - "border-transparent text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500"; + "border-transparent text-teal-900 bg-teal-300 hover:bg-teal-400 focus:ring-teal-500"; break; case "white": kindClasses = - "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500"; + "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400"; break; } </script> |