[@svelteui/core]: fix and simplify Button disabled style and fontWeight

svelteuidev · Apr 12, 2023 · 8cbac62 · 8cbac62
1 parent bfdf829
commit 8cbac62
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 51 deletions.
diff --git a/packages/svelteui-core/src/components/Button/Button.stories.svelte b/packages/svelteui-core/src/components/Button/Button.stories.svelte
@@ -30,9 +30,11 @@
 	</div>
 </Story>
 
-<Story name="Button with icon" id="buttonIcon">
+<Story name="With icon" id="buttonIcon">
 	<Button>
 		<LockClosed slot="leftIcon" />
     	Sign Up
 	</Button>
-</Story>
+</Story>
+
+<Story name="Disabled" id="buttonDisabled" args={{ disabled: true }} />
diff --git 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
@@ -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
@@ -4,45 +4,32 @@ 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) }
 			},
 			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: {}
 	};