feat(SwitchBall): add new colors

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

Hide file tree

Showing 6 changed files with 67 additions and 2 deletions.
diff --git a/src/plugins/components/switch-ball/index.ts b/src/plugins/components/switch-ball/index.ts
@@ -141,6 +141,24 @@ export default plugin(({ addComponents, theme }) => {
           [`@apply bg-${config.color.danger.light} dark:bg-${config.color.danger.dark}`]:
             {},
         },
+      //color:dark
+      '&.nui-switch-ball-dark .nui-switch-ball-input:checked ~ .nui-switch-ball-track':
+        {
+          [`@apply bg-${config.color.dark.light} dark:bg-${config.color.dark.dark}`]:
+            {},
+        },
+      '&.nui-switch-ball-dark .nui-switch-ball-icon': {
+        [`@apply text-muted-100 dark:text-muted-900`]: {},
+      },
+      //color:black
+      '&.nui-switch-ball-black .nui-switch-ball-input:checked ~ .nui-switch-ball-track':
+        {
+          [`@apply bg-${config.color.black.light} dark:bg-${config.color.black.dark}`]:
+            {},
+        },
+      '&.nui-switch-ball-black .nui-switch-ball-icon': {
+        [`@apply text-white dark:text-black`]: {},
+      },
     },
   })
 }, config)
diff --git a/src/plugins/components/switch-ball/switch-ball.config.ts b/src/plugins/components/switch-ball/switch-ball.config.ts
@@ -98,6 +98,14 @@ export const defaulConfig = {
       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-ball/switch-ball.doc.mdx b/src/plugins/components/switch-ball/switch-ball.doc.mdx
@@ -28,6 +28,8 @@ Switches can have different active colors.
   <Story of={SwitchBallStories.ColorSuccess} />
   <Story of={SwitchBallStories.ColorWarning} />
   <Story of={SwitchBallStories.ColorDanger} />
+  <Story of={SwitchBallStories.ColorDark} />
+  <Story of={SwitchBallStories.ColorBlack} />
 </div>
 
 <br />

diff --git a/src/plugins/components/switch-ball/switch-ball.stories.ts b/src/plugins/components/switch-ball/switch-ball.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: 'Ball switch',
+    color: 'dark',
+    id: 'switch-ball-dark',
+    checked: 'true',
+  },
+}
+
+export const ColorBlack: Story = {
+  name: 'Color: black',
+  args: {
+    label: 'Ball switch',
+    color: 'black',
+    id: 'switch-ball-black',
+    checked: 'true',
+  },
+}
 // #endregion
 
 // #region Colors

diff --git a/src/plugins/components/switch-ball/switch-ball.types.ts b/src/plugins/components/switch-ball/switch-ball.types.ts
@@ -4,7 +4,14 @@ export interface SwitchBallProps 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-ball/switch-ball.variants.ts b/src/plugins/components/switch-ball/switch-ball.variants.ts
@@ -6,4 +6,6 @@ export const color = {
   success: 'nui-switch-ball-success',
   warning: 'nui-switch-ball-warning',
   danger: 'nui-switch-ball-danger',
+  dark: 'nui-switch-ball-dark',
+  black: 'nui-switch-ball-black',
 } as const satisfies SwitchBallVariant<'color'>