[fix](@svelteui/core): fix dark mode checkbox colors not being applied

ISSUES CLOSED: #377
svelteuidev · May 14, 2023 · a30ebd1 · a30ebd1
1 parent da1773f
commit a30ebd1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/packages/svelteui-core/src/components/Checkbox/Checkbox.stories.svelte b/packages/svelteui-core/src/components/Checkbox/Checkbox.stories.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { useSvelteUITheme } from '$lib/styles';
+	import { Checkbox } from './index';
+
+	const theme = useSvelteUITheme();
+	const colors = Object.keys(theme.colorNames);
+</script>
+
+<Meta title="Components/Checkbox" component={Checkbox} />
+
+<Template let:args>
+	<Checkbox {...args} />
+</Template>
+
+<Story name="Checkbox" id="checkboxStory" />
+
+<Story name="Colors" id="checkboxColorsStory">
+	<div style="display: flex; gap: 10px;">
+		{#each colors as color}
+			<Checkbox {color} />
+		{/each}
+	</div>
+</Story>
+
+<Story name="Disabled" id="checkboxDisabledStory" args={{ disabled: true }} />
diff --git a/packages/svelteui-core/src/components/Checkbox/Checkbox.styles.ts b/packages/svelteui-core/src/components/Checkbox/Checkbox.styles.ts
@@ -45,7 +45,7 @@ export default createStyles(
 				fontSize: `$${size}`,
 				lineHeight: `$${size}`,
 				color: '#000000',
-				[`${theme.dark} &`]: {
+				darkMode: {
 					color: '$dark000'
 				}
 			},
@@ -65,9 +65,12 @@ export default createStyles(
 				transition: `border-color ${transitionDuration}ms ease, background-color ${transitionDuration}ms ease`,
 
 				darkMode: {
-					backgroundColor: '$dark400',
-					borderColor: '$dark400'
+					'&:not(:checked)': {
+						backgroundColor: '$dark400',
+						borderColor: '$dark400'
+					}
 				},
+
 				'&:checked': {
 					border: 'transparent',
 					backgroundColor: theme.fn.themeColor(color, 6),
@@ -80,7 +83,7 @@ export default createStyles(
 					}
 				},
 
-				'&.disabled': {
+				'&:disabled': {
 					backgroundColor: '$gray200',
 					borderColor: '$gray300',
 					cursor: 'not-allowed',
@@ -91,7 +94,7 @@ export default createStyles(
 						borderColor: '$gray300'
 					},
 
-					[`${theme.dark} &`]: {
+					darkMode: {
 						backgroundColor: '$dark400',
 						borderColor: '$dark600',
 						[`& + .${getRef('icon')}`]: {