feat(SwitchThin): add new colors

shuriken-ui · Feb 19, 2024 · c1291fd · c1291fd
1 parent df0c3ea
commit c1291fd
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 2 deletions.
diff --git a/src/plugins/components/switch-thin/index.ts b/src/plugins/components/switch-thin/index.ts
@@ -123,6 +123,18 @@ export default plugin(({ addComponents, theme }) => {
           [`@apply bg-${config.color.danger.light} dark:bg-${config.color.danger.dark}`]:
             {},
         },
+      //color:dark
+      '&.nui-switch-thin-dark .nui-switch-thin-input:checked ~ .nui-switch-thin-track':
+        {
+          [`@apply bg-${config.color.dark.light} dark:bg-${config.color.dark.dark}`]:
+            {},
+        },
+      //color:black
+      '&.nui-switch-thin-black .nui-switch-thin-input:checked ~ .nui-switch-thin-track':
+        {
+          [`@apply bg-${config.color.black.light} dark:bg-${config.color.black.dark}`]:
+            {},
+        },
     },
   })
 }, config)
diff --git a/src/plugins/components/switch-thin/switch-thin.config.ts b/src/plugins/components/switch-thin/switch-thin.config.ts
@@ -87,6 +87,14 @@ export const defaultConfig = {
       light: 'danger-400',
       dark: 'danger-400',
     },
+    dark: {
+      light: 'muted-900',
+      dark: 'muted-100',
+    },
+    black: {
+      light: 'black',
+      dark: 'white',
+    },
   },
 }
 

diff --git a/src/plugins/components/switch-thin/switch-thin.doc.mdx b/src/plugins/components/switch-thin/switch-thin.doc.mdx
@@ -28,6 +28,8 @@ Switches can have different active colors.
   <Story of={SwitchThinStories.ColorSuccess} />
   <Story of={SwitchThinStories.ColorWarning} />
   <Story of={SwitchThinStories.ColorDanger} />
+  <Story of={SwitchThinStories.ColorDark} />
+  <Story of={SwitchThinStories.ColorBlack} />
 </div>
 
 <br />

diff --git a/src/plugins/components/switch-thin/switch-thin.stories.ts b/src/plugins/components/switch-thin/switch-thin.stories.ts
@@ -27,7 +27,15 @@ const meta = {
     },
     color: {
       control: { type: 'select' },
-      options: ['primary', 'info', 'success', 'warning', 'danger'],
+      options: [
+        'primary',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'dark',
+        'black',
+      ],
       defaultValue: 'primary',
     },
     '?disabled': {
@@ -105,6 +113,26 @@ export const ColorDanger: Story = {
     checked: 'true',
   },
 }
+
+export const ColorDark: Story = {
+  name: 'Color: dark',
+  args: {
+    label: 'Thin switch',
+    color: 'dark',
+    id: 'switch-thin-dark',
+    checked: 'true',
+  },
+}
+
+export const ColorBlack: Story = {
+  name: 'Color: black',
+  args: {
+    label: 'Thin switch',
+    color: 'black',
+    id: 'switch-thin-black',
+    checked: 'true',
+  },
+}
 // #endregion
 
 // #region Colors

diff --git a/src/plugins/components/switch-thin/switch-thin.types.ts b/src/plugins/components/switch-thin/switch-thin.types.ts
@@ -4,7 +4,14 @@ export interface SwitchThinProps extends Record<string, unknown> {
   id?: string
   label?: string
   sublabel?: string
-  color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  color?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'dark'
+    | 'black'
   classes?: {
     wrapper?: string | string[]
     outer?: string | string[]

diff --git a/src/plugins/components/switch-thin/switch-thin.variants.ts b/src/plugins/components/switch-thin/switch-thin.variants.ts
@@ -6,4 +6,6 @@ export const color = {
   success: 'nui-switch-thin-success',
   warning: 'nui-switch-thin-warning',
   danger: 'nui-switch-thin-danger',
+  dark: 'nui-switch-thin-dark',
+  black: 'nui-switch-thin-black',
 } as const satisfies SwitchThinVariant<'color'>