feat(Radio): add new colors

shuriken-ui · Feb 20, 2024 · 965cf31 · 965cf31
1 parent 253c190
commit 965cf31
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 9 deletions.
diff --git a/src/plugins/components/radio/index.ts b/src/plugins/components/radio/index.ts
@@ -85,14 +85,24 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply text-${config.color.default.light} dark:text-${config.color.default.dark}`]:
           {},
       },
+      //Color:muted
+      '&.nui-radio-muted': {
+        [`@apply text-${config.color.muted.light} dark:text-${config.color.muted.dark}`]:
+          {},
+      },
       //Color:light
       '&.nui-radio-light': {
         [`@apply text-${config.color.light.light} dark:text-${config.color.light.dark}`]:
           {},
       },
-      //Color:muted
-      '&.nui-radio-muted': {
-        [`@apply text-${config.color.muted.light} dark:text-${config.color.muted.dark}`]:
+      //Color:dark
+      '&.nui-radio-dark': {
+        [`@apply text-${config.color.dark.light} dark:text-${config.color.dark.dark}`]:
+          {},
+      },
+      //Color:black
+      '&.nui-radio-black': {
+        [`@apply text-${config.color.black.light} dark:text-${config.color.black.dark}`]:
           {},
       },
       //Color:primary

diff --git a/src/plugins/components/radio/radio.config.ts b/src/plugins/components/radio/radio.config.ts
@@ -56,13 +56,21 @@ export const defaultConfig = {
       light: 'muted-600',
       dark: 'muted-200',
     },
+    muted: {
+      light: 'muted-400',
+      dark: 'muted-400',
+    },
     light: {
       light: 'muted-100',
       dark: 'muted-100',
     },
-    muted: {
-      light: 'muted-400',
-      dark: 'muted-400',
+    dark: {
+      light: 'muted-900',
+      dark: 'muted-100',
+    },
+    black: {
+      light: 'black',
+      dark: 'white',
     },
     primary: {
       light: 'primary-500',

diff --git a/src/plugins/components/radio/radio.doc.mdx b/src/plugins/components/radio/radio.doc.mdx
@@ -107,6 +107,32 @@ Radio buttons can have different colors. Below are examples of the danger color.
   <Story of={RadioStories.ColorDangerFour} />
 </div>
 
+<br />
+
+### Color: dark
+
+Radio buttons can have different colors. Below are examples of the dark color.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={RadioStories.ColorDarkOne} />
+  <Story of={RadioStories.ColorDarkTwo} />
+  <Story of={RadioStories.ColorDarkThree} />
+  <Story of={RadioStories.ColorDarkFour} />
+</div>
+
+<br />
+
+### Color: black
+
+Radio buttons can have different colors. Below are examples of the black color.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={RadioStories.ColorBlackOne} />
+  <Story of={RadioStories.ColorBlackTwo} />
+  <Story of={RadioStories.ColorBlackThree} />
+  <Story of={RadioStories.ColorBlackFour} />
+</div>
+
 <br />
 <br />
 

diff --git a/src/plugins/components/radio/radio.stories.ts b/src/plugins/components/radio/radio.stories.ts
@@ -24,8 +24,10 @@ const meta = {
       control: { type: 'select' },
       options: [
         'default',
-        'light',
         'muted',
+        'light',
+        'dark',
+        'black',
         'primary',
         'info',
         'success',
@@ -364,6 +366,92 @@ export const ColorDangerFour: Story = {
 }
 // #endregion
 
+// #region Color: dark
+export const ColorDarkOne: Story = {
+  name: 'Color: dark',
+  args: {
+    label: 'Radio',
+    color: 'dark',
+    id: 'radio-dark-one',
+    name: 'radio-dark',
+    checked: 'true',
+  },
+}
+
+export const ColorDarkTwo: Story = {
+  name: 'Color: dark',
+  args: {
+    label: 'Radio',
+    color: 'dark',
+    id: 'radio-dark-two',
+    name: 'radio-dark',
+  },
+}
+
+export const ColorDarkThree: Story = {
+  name: 'Color: dark',
+  args: {
+    label: 'Radio',
+    color: 'dark',
+    id: 'radio-dark-three',
+    name: 'radio-dark',
+  },
+}
+
+export const ColorDarkFour: Story = {
+  name: 'Color: dark',
+  args: {
+    label: 'Radio',
+    color: 'dark',
+    id: 'radio-dark-four',
+    name: 'radio-dark',
+  },
+}
+// #endregion
+
+// #region Color: black
+export const ColorBlackOne: Story = {
+  name: 'Color: black',
+  args: {
+    label: 'Radio',
+    color: 'black',
+    id: 'radio-black-one',
+    name: 'radio-black',
+    checked: 'true',
+  },
+}
+
+export const ColorBlackTwo: Story = {
+  name: 'Color: black',
+  args: {
+    label: 'Radio',
+    color: 'black',
+    id: 'radio-black-two',
+    name: 'radio-black',
+  },
+}
+
+export const ColorBlackThree: Story = {
+  name: 'Color: black',
+  args: {
+    label: 'Radio',
+    color: 'black',
+    id: 'radio-black-three',
+    name: 'radio-black',
+  },
+}
+
+export const ColorBlackFour: Story = {
+  name: 'Color: black',
+  args: {
+    label: 'Radio',
+    color: 'black',
+    id: 'radio-black-four',
+    name: 'radio-black',
+  },
+}
+// #endregion
+
 // #region State: disabled
 export const DisabledOne: Story = {
   name: 'Disabled: default',

diff --git a/src/plugins/components/radio/radio.types.ts b/src/plugins/components/radio/radio.types.ts
@@ -6,8 +6,10 @@ export interface RadioProps extends Record<string, unknown> {
   error?: string | boolean
   color?:
     | 'default'
-    | 'light'
     | 'muted'
+    | 'light'
+    | 'dark'
+    | 'black'
     | 'primary'
     | 'info'
     | 'success'

diff --git a/src/plugins/components/radio/radio.variants.ts b/src/plugins/components/radio/radio.variants.ts
@@ -2,8 +2,10 @@ import type { RadioVariant } from './radio.types'
 
 export const color = {
   default: 'nui-radio-default',
-  light: 'nui-radio-light',
   muted: 'nui-radio-muted',
+  light: 'nui-radio-light',
+  dark: 'nui-radio-dark',
+  black: 'nui-radio-black',
   primary: 'nui-radio-primary',
   info: 'nui-radio-info',
   success: 'nui-radio-success',