feat(Checkbox): add new colors

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

Hide file tree

Showing 6 changed files with 153 additions and 9 deletions.
diff --git a/src/plugins/components/checkbox/checkbox.config.ts b/src/plugins/components/checkbox/checkbox.config.ts
@@ -63,13 +63,21 @@ export const defaultConfig = {
       light: 'muted-600',
       dark: 'muted-200',
     },
+    muted: {
+      light: 'muted-400',
+      dark: 'muted-400',
+    },
     light: {
       light: 'white',
       dark: 'white',
     },
-    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/checkbox/checkbox.doc.mdx b/src/plugins/components/checkbox/checkbox.doc.mdx
@@ -30,6 +30,8 @@ Checkboxes can have different shapes and colors. Below are examples of the strai
   <Story of={CheckboxStories.StraightSuccess} />
   <Story of={CheckboxStories.StraightWarning} />
   <Story of={CheckboxStories.StraightDanger} />
+  <Story of={CheckboxStories.StraightDark} />
+  <Story of={CheckboxStories.StraightBlack} />
 </div>
 
 <br />
@@ -46,6 +48,8 @@ Checkboxes can have different shapes and colors. Below are examples of the round
   <Story of={CheckboxStories.RoundedSuccess} />
   <Story of={CheckboxStories.RoundedWarning} />
   <Story of={CheckboxStories.RoundedDanger} />
+  <Story of={CheckboxStories.RoundedDark} />
+  <Story of={CheckboxStories.RoundedBlack} />
 </div>
 
 <br />
@@ -62,6 +66,8 @@ Checkboxes can have different shapes and colors. Below are examples of the smoot
   <Story of={CheckboxStories.SmoothSuccess} />
   <Story of={CheckboxStories.SmoothWarning} />
   <Story of={CheckboxStories.SmoothDanger} />
+  <Story of={CheckboxStories.SmoothDark} />
+  <Story of={CheckboxStories.SmoothBlack} />
 </div>
 
 <br />
@@ -78,6 +84,8 @@ Checkboxes can have different shapes and colors. Below are examples of the curve
   <Story of={CheckboxStories.CurvedSuccess} />
   <Story of={CheckboxStories.CurvedWarning} />
   <Story of={CheckboxStories.CurvedDanger} />
+  <Story of={CheckboxStories.CurvedDark} />
+  <Story of={CheckboxStories.CurvedBlack} />
 </div>
 
 <br />
@@ -94,6 +102,8 @@ Checkboxes can have different shapes and colors. Below are examples of the full
   <Story of={CheckboxStories.FullSuccess} />
   <Story of={CheckboxStories.FullWarning} />
   <Story of={CheckboxStories.FullDanger} />
+  <Story of={CheckboxStories.FullDark} />
+  <Story of={CheckboxStories.FullBlack} />
 </div>
 
 <br />

diff --git a/src/plugins/components/checkbox/checkbox.stories.ts b/src/plugins/components/checkbox/checkbox.stories.ts
@@ -29,8 +29,10 @@ const meta = {
       control: { type: 'select' },
       options: [
         'default',
-        'light',
         'muted',
+        'light',
+        'dark',
+        'black',
         'primary',
         'info',
         'success',
@@ -146,6 +148,28 @@ export const StraightDanger: Story = {
     checked: true,
   },
 }
+
+export const StraightDark: Story = {
+  name: 'Straight: dark',
+  args: {
+    label: 'Checkbox',
+    rounded: 'none',
+    color: 'dark',
+    id: 'checkbox-straight-dark',
+    checked: true,
+  },
+}
+
+export const StraightBlack: Story = {
+  name: 'Straight: black',
+  args: {
+    label: 'Checkbox',
+    rounded: 'none',
+    color: 'black',
+    id: 'checkbox-straight-black',
+    checked: true,
+  },
+}
 // #endregion
 
 // #region Rounded:sm
@@ -225,6 +249,28 @@ export const RoundedDanger: Story = {
     checked: true,
   },
 }
+
+export const RoundedDark: Story = {
+  name: 'Rounded: dark',
+  args: {
+    label: 'Checkbox',
+    rounded: 'sm',
+    color: 'dark',
+    id: 'checkbox-rounded-dark',
+    checked: true,
+  },
+}
+
+export const RoundedBlack: Story = {
+  name: 'Rounded: black',
+  args: {
+    label: 'Checkbox',
+    rounded: 'sm',
+    color: 'black',
+    id: 'checkbox-rounded-black',
+    checked: true,
+  },
+}
 // #endregion
 
 // #region Rounded:md
@@ -304,6 +350,28 @@ export const SmoothDanger: Story = {
     checked: true,
   },
 }
+
+export const SmoothDark: Story = {
+  name: 'Smooth: dark',
+  args: {
+    label: 'Checkbox',
+    rounded: 'md',
+    color: 'dark',
+    id: 'checkbox-smooth-dark',
+    checked: true,
+  },
+}
+
+export const SmoothBlack: Story = {
+  name: 'Smooth: black',
+  args: {
+    label: 'Checkbox',
+    rounded: 'md',
+    color: 'black',
+    id: 'checkbox-smooth-black',
+    checked: true,
+  },
+}
 // #endregion
 
 // #region Rounded:lg
@@ -383,6 +451,28 @@ export const CurvedDanger: Story = {
     checked: true,
   },
 }
+
+export const CurvedDark: Story = {
+  name: 'Curved: dark',
+  args: {
+    label: 'Checkbox',
+    rounded: 'lg',
+    color: 'dark',
+    id: 'checkbox-curved-dark',
+    checked: true,
+  },
+}
+
+export const CurvedBlack: Story = {
+  name: 'Curved: black',
+  args: {
+    label: 'Checkbox',
+    rounded: 'lg',
+    color: 'black',
+    id: 'checkbox-curved-black',
+    checked: true,
+  },
+}
 // #endregion
 
 // #region Rounded:full
@@ -462,6 +552,28 @@ export const FullDanger: Story = {
     checked: true,
   },
 }
+
+export const FullDark: Story = {
+  name: 'Full: dark',
+  args: {
+    label: 'Checkbox',
+    rounded: 'full',
+    color: 'dark',
+    id: 'checkbox-full-dark',
+    checked: true,
+  },
+}
+
+export const FullBlack: Story = {
+  name: 'Full: black',
+  args: {
+    label: 'Checkbox',
+    rounded: 'full',
+    color: 'black',
+    id: 'checkbox-full-black',
+    checked: true,
+  },
+}
 // #endregion
 
 // #region State: disabled

diff --git a/src/plugins/components/checkbox/checkbox.types.ts b/src/plugins/components/checkbox/checkbox.types.ts
@@ -8,8 +8,10 @@ export interface CheckboxProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   color?:
     | 'default'
-    | 'light'
     | 'muted'
+    | 'light'
+    | 'dark'
+    | 'black'
     | 'primary'
     | 'info'
     | 'success'

diff --git a/src/plugins/components/checkbox/checkbox.variants.ts b/src/plugins/components/checkbox/checkbox.variants.ts
@@ -10,8 +10,10 @@ export const rounded = {
 
 export const color = {
   default: 'nui-checkbox-default',
-  light: 'nui-checkbox-light',
   muted: 'nui-checkbox-muted',
+  light: 'nui-checkbox-light',
+  dark: 'nui-checkbox-dark',
+  black: 'nui-checkbox-black',
   primary: 'nui-checkbox-primary',
   info: 'nui-checkbox-info',
   success: 'nui-checkbox-success',

diff --git a/src/plugins/components/checkbox/index.ts b/src/plugins/components/checkbox/index.ts
@@ -119,14 +119,24 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply text-${config.color.default.light} dark:text-${config.color.default.dark}`]:
           {},
       },
+      //Color:muted
+      '&.nui-checkbox-muted': {
+        [`@apply text-${config.color.muted.light} dark:text-${config.color.muted.dark}`]:
+          {},
+      },
       //Color:light
       '&.nui-checkbox-light': {
         [`@apply text-${config.color.light.light} dark:text-${config.color.light.dark}`]:
           {},
       },
-      //Color:muted
-      '&.nui-checkbox-muted': {
-        [`@apply text-${config.color.muted.light} dark:text-${config.color.muted.dark}`]:
+      //Color:dark
+      '&.nui-checkbox-dark': {
+        [`@apply text-${config.color.dark.light} dark:text-${config.color.dark.dark}`]:
+          {},
+      },
+      //Color:black
+      '&.nui-checkbox-black': {
+        [`@apply text-${config.color.black.light} dark:text-${config.color.black.dark}`]:
           {},
       },
       //Color:primary