From d238133a47f5b6331962ee6b2fb3e3fb9f40e025 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Wed, 28 Sep 2022 13:51:39 +0800 Subject: feat: Introduce some nicer colors --- apps/kit/src/lib/components/button.svelte | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'apps/kit/src/lib/components') 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; } -- cgit v1.3