From 8cbac62509dd526c5a7cc932c21d75c1c5b2de8d Mon Sep 17 00:00:00 2001 From: Margarida Silva Date: Wed, 12 Apr 2023 22:45:14 +0100 Subject: [PATCH] [@svelteui/core]: fix and simplify Button disabled style and fontWeight --- .../components/Button/Button.stories.svelte | 6 ++- .../src/components/Button/Button.styles.ts | 41 ++++++++++--------- .../src/components/Button/Button.svelte | 8 +++- .../get-variant-theme/get-variant-theme.ts | 39 +++++------------- 4 files changed, 43 insertions(+), 51 deletions(-) diff --git a/packages/svelteui-core/src/components/Button/Button.stories.svelte b/packages/svelteui-core/src/components/Button/Button.stories.svelte index d148a9283..3a20ee1c8 100644 --- a/packages/svelteui-core/src/components/Button/Button.stories.svelte +++ b/packages/svelteui-core/src/components/Button/Button.stories.svelte @@ -30,9 +30,11 @@ - + - \ No newline at end of file + + + \ No newline at end of file diff --git a/packages/svelteui-core/src/components/Button/Button.styles.ts b/packages/svelteui-core/src/components/Button/Button.styles.ts index 55c7c2513..524a938db 100644 --- a/packages/svelteui-core/src/components/Button/Button.styles.ts +++ b/packages/svelteui-core/src/components/Button/Button.styles.ts @@ -90,7 +90,7 @@ export default createStyles( ? `0px ${size}px` : sizes[compact ? `compact-${size}` : size].padding, fontFamily: '$standard', - fontWeight: '$SemiBold', + fontWeight: '$semibold', fontSize: `$${size}`, lineHeight: 1, flexGrow: 0, @@ -101,29 +101,32 @@ export default createStyles( }, '&:active': { transform: 'translateY(1px)' - }, - '&.disabled': { - pointerEvents: 'none', - borderColor: 'transparent', - backgroundColor: 'rgb(233, 236, 239)', - background: 'rgb(233, 236, 239)', - color: 'rgb(173, 181, 189)', + } + }, + loading: { + pointerEvents: 'none', + '&::before': { + content: '""', + position: 'absolute', + inset: -1, + backgroundColor: 'rgba(255, 255, 255, .5)', + borderRadius: `$${radius}`, cursor: 'not-allowed' - }, - '&.loading': { - pointerEvents: 'none', - '&::before': { - content: '""', - position: 'absolute', - inset: -1, - backgroundColor: 'rgba(255, 255, 255, .5)', - borderRadius: `$${radius}`, - cursor: 'not-allowed' - } } }, variants: { variation: vFunc(color, gradient) + }, + disabled: { + pointerEvents: 'none', + borderColor: 'transparent', + backgroundColor: theme.fn.themeColor('gray', 2), + color: theme.fn.themeColor('gray', 5), + cursor: 'not-allowed', + darkMode: { + backgroundColor: theme.fn.themeColor('dark', 4), + color: theme.fn.themeColor('dark', 6) + } } }; } diff --git a/packages/svelteui-core/src/components/Button/Button.svelte b/packages/svelteui-core/src/components/Button/Button.svelte index a3f3a26d4..6e8059437 100644 --- a/packages/svelteui-core/src/components/Button/Button.svelte +++ b/packages/svelteui-core/src/components/Button/Button.svelte @@ -51,7 +51,7 @@ } $: if (observable) override = { display: 'none' }; // --------------Error Handling------------------- - $: ({ getStyles, cx } = useStyles( + $: ({ cx, classes, getStyles } = useStyles( { color, compact, @@ -122,7 +122,11 @@ A user can perform an immediate action by pressing a button. It's frequently use bind:this={element} use:useActions={use} use:forwardEvents - class={cx(className, getStyles({ css: override, variation: variant }), { disabled, loading })} + class={cx( + className, + getStyles({ css: override, variation: variant }), + { [classes.disabled]: disabled, [classes.loading]: loading } + )} class:compact class:uppercase {disabled} diff --git a/packages/svelteui-core/src/styles/theme/utils/get-variant-theme/get-variant-theme.ts b/packages/svelteui-core/src/styles/theme/utils/get-variant-theme/get-variant-theme.ts index a05ae8814..07b5d92a4 100644 --- a/packages/svelteui-core/src/styles/theme/utils/get-variant-theme/get-variant-theme.ts +++ b/packages/svelteui-core/src/styles/theme/utils/get-variant-theme/get-variant-theme.ts @@ -4,32 +4,20 @@ import type { SvelteUIColor, SvelteUIGradient, VariantThemeFunction } from '$lib export const vFunc = (color: SvelteUIColor, gradient?: SvelteUIGradient): VariantThemeFunction => { const { themeColor, rgba } = fns; - const disabled = { - '&.disabled': { - pointerEvents: 'none', - borderColor: 'transparent', - backgroundColor: 'rgb(233, 236, 239)', - background: 'rgb(233, 236, 239)', - color: 'rgb(173, 181, 189)', - cursor: 'not-allowed' - } - }; - const variants = { /** Filled variant */ filled: { - [`${dark.selector} &`]: { + darkMode: { backgroundColor: themeColor(color, 8) }, border: 'transparent', backgroundColor: themeColor(color, 6), color: 'White', - '&:hover': { backgroundColor: themeColor(color, 7) }, - ...disabled + '&:hover': { backgroundColor: themeColor(color, 7) } }, /** Light variant */ light: { - [`${dark.selector} &`]: { + darkMode: { backgroundColor: rgba(themeColor(color, 8), 0.35), color: color === 'dark' ? themeColor('dark', 0) : themeColor(color, 2), '&:hover': { backgroundColor: rgba(themeColor(color, 7), 0.45) } @@ -37,12 +25,11 @@ export const vFunc = (color: SvelteUIColor, gradient?: SvelteUIGradient): Varian border: 'transparent', backgroundColor: themeColor(color, 0), color: color === 'dark' ? themeColor('dark', 9) : themeColor(color, 6), - '&:hover': { backgroundColor: themeColor(color, 1) }, - ...disabled + '&:hover': { backgroundColor: themeColor(color, 1) } }, /** Outline variant */ outline: { - [`${dark.selector} &`]: { + darkMode: { border: `1px solid ${themeColor(color, 4)}`, color: `${themeColor(color, 4)}`, '&:hover': { backgroundColor: rgba(themeColor(color, 4), 0.05) } @@ -52,12 +39,11 @@ export const vFunc = (color: SvelteUIColor, gradient?: SvelteUIGradient): Varian color: themeColor(color, 7), '&:hover': { backgroundColor: rgba(themeColor(color, 0), 0.35) - }, - ...disabled + } }, /** Subtle variant */ subtle: { - [`${dark.selector} &`]: { + darkMode: { color: color === 'dark' ? themeColor('dark', 0) : themeColor(color, 2), '&:hover': { backgroundColor: rgba(themeColor(color, 8), 0.35) } }, @@ -66,12 +52,11 @@ export const vFunc = (color: SvelteUIColor, gradient?: SvelteUIGradient): Varian color: color === 'dark' ? themeColor('dark', 9) : themeColor(color, 6), '&:hover': { backgroundColor: themeColor(color, 0) - }, - ...disabled + } }, /** Default variant */ default: { - [`${dark.selector} &`]: { + darkMode: { border: `1px solid ${themeColor('dark', 5)}`, backgroundColor: themeColor('dark', 5), color: 'White', @@ -80,16 +65,14 @@ export const vFunc = (color: SvelteUIColor, gradient?: SvelteUIGradient): Varian border: `1px solid ${themeColor('gray', 4)}`, backgroundColor: 'White', color: 'Black', - '&:hover': { backgroundColor: themeColor('gray', 0) }, - ...disabled + '&:hover': { backgroundColor: themeColor('gray', 0) } }, /** White variant */ white: { border: 'transparent', backgroundColor: 'White', color: themeColor(color, 7), - '&:hover': { backgroundColor: 'White' }, - ...disabled + '&:hover': { backgroundColor: 'White' } }, gradient: {} };