feat(Snack): add contrast colors

shuriken-ui · Feb 19, 2024 · 3a1f4f6 · 3a1f4f6
1 parent 715c431
commit 3a1f4f6
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 18 deletions.
diff --git a/src/plugins/components/snack/index.ts b/src/plugins/components/snack/index.ts
@@ -146,11 +146,27 @@ export default plugin(({ addComponents, theme }) => {
         [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
           {},
       },
+      //Color:default-contrast
+      '&.nui-snack-default-contrast': {
+        //Background
+        [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:
+          {},
+      },
+      //Color:muted
       '&.nui-snack-muted': {
         //Background
         [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark}`]:
           {},
       },
+      //Color:muted-contrast
+      '&.nui-snack-muted-contrast': {
+        //Background
+        [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark}`]:
+          {},
+      },
     },
   })
 }, config)
diff --git a/src/plugins/components/snack/snack.config.ts b/src/plugins/components/snack/snack.config.ts
@@ -108,12 +108,28 @@ export const defaultConfig = {
         dark: 'muted-600',
       },
     },
+    defaultContrast: {
+      background: {
+        light: 'white',
+        dark: 'muted-950',
+      },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-800',
+      },
+    },
     muted: {
       background: {
         light: 'muted-200',
         dark: 'muted-700',
       },
     },
+    mutedContrast: {
+      background: {
+        light: 'muted-200',
+        dark: 'muted-950',
+      },
+    },
   },
 }
 

diff --git a/src/plugins/components/snack/snack.doc.mdx b/src/plugins/components/snack/snack.doc.mdx
@@ -30,6 +30,32 @@ Snacks can have two different color. Below are examples of the muted color.
 
 <br />
 
+### Color: default
+
+Snacks can have two different color. Below are examples of the default color.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={SnackStories.DefaultOne} />
+  <Story of={SnackStories.DefaultTwo} />
+  <Story of={SnackStories.DefaultThree} />
+  <Story of={SnackStories.DefaultFour} />
+</div>
+
+<br />
+
+### Color: default-contrast
+
+Snacks can have two different color. Below are examples of the default-contrast color.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={SnackStories.DefaultContrastOne} />
+  <Story of={SnackStories.DefaultContrastTwo} />
+  <Story of={SnackStories.DefaultContrastThree} />
+  <Story of={SnackStories.DefaultContrastFour} />
+</div>
+
+<br />
+
 ### Color: muted
 
 Snacks can have two different color. Below are examples of the muted color.
@@ -43,15 +69,15 @@ Snacks can have two different color. Below are examples of the muted color.
 
 <br />
 
-### Color: light
+### Color: muted-contrast
 
-Snacks can have two different color. Below are examples of the light color.
+Snacks can have two different color. Below are examples of the muted-contrast color.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={SnackStories.LightOne} />
-  <Story of={SnackStories.LightTwo} />
-  <Story of={SnackStories.LightThree} />
-  <Story of={SnackStories.LightFour} />
+<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={SnackStories.MutedContrastOne} />
+  <Story of={SnackStories.MutedContrastTwo} />
+  <Story of={SnackStories.MutedContrastThree} />
+  <Story of={SnackStories.MutedContrastFour} />
 </div>
 
 <br />

diff --git a/src/plugins/components/snack/snack.stories.ts b/src/plugins/components/snack/snack.stories.ts
@@ -16,7 +16,7 @@ const meta = {
     },
     color: {
       control: { type: 'select' },
-      options: ['default', 'muted'],
+      options: ['default', 'default-contrast', 'muted', 'muted-contrast'],
       defaultValue: 'muted',
     },
     size: {
@@ -98,40 +98,108 @@ export const MutedFour: Story = {
 }
 // #endregion
 
-// #region Color: light
-export const LightOne: Story = {
-  name: 'Light: Ex. 1',
+// #region Color: muted-contrast
+export const MutedContrastOne: Story = {
+  name: 'Muted contrast: Ex. 1',
+  args: {
+    label: 'React',
+    color: 'muted-contrast',
+  },
+}
+
+export const MutedContrastTwo: Story = {
+  name: 'Muted contrast: Ex. 2',
+  args: {
+    label: 'Angular',
+    color: 'muted-contrast',
+  },
+}
+
+export const MutedContrastThree: Story = {
+  name: 'Muted contrast: Ex. 3',
+  args: {
+    label: 'Vue',
+    color: 'muted-contrast',
+  },
+}
+
+export const MutedContrastFour: Story = {
+  name: 'Muted contrast: Ex. 4',
+  args: {
+    label: 'Html5',
+    color: 'muted-contrast',
+  },
+}
+// #endregion
+
+// #region Color: default
+export const DefaultOne: Story = {
+  name: 'Default: Ex. 1',
   args: {
     label: 'React',
     color: 'default',
   },
 }
 
-export const LightTwo: Story = {
-  name: 'Light: Ex. 2',
+export const DefaultTwo: Story = {
+  name: 'Default: Ex. 2',
   args: {
     label: 'Angular',
     color: 'default',
   },
 }
 
-export const LightThree: Story = {
-  name: 'Light: Ex. 3',
+export const DefaultThree: Story = {
+  name: 'Default: Ex. 3',
   args: {
     label: 'Vue',
     color: 'default',
   },
 }
 
-export const LightFour: Story = {
-  name: 'Light: Ex. 4',
+export const DefaultFour: Story = {
+  name: 'Default: Ex. 4',
   args: {
     label: 'Html5',
     color: 'default',
   },
 }
 // #endregion
 
+// #region Color: default-contrast
+export const DefaultContrastOne: Story = {
+  name: 'Default contrast: Ex. 1',
+  args: {
+    label: 'React',
+    color: 'default-contrast',
+  },
+}
+
+export const DefaultContrastTwo: Story = {
+  name: 'Default contrast: Ex. 2',
+  args: {
+    label: 'Angular',
+    color: 'default-contrast',
+  },
+}
+
+export const DefaultContrastThree: Story = {
+  name: 'Default contrast: Ex. 3',
+  args: {
+    label: 'Vue',
+    color: 'default-contrast',
+  },
+}
+
+export const DefaultContrastFour: Story = {
+  name: 'Default contrast: Ex. 4',
+  args: {
+    label: 'Html5',
+    color: 'default-contrast',
+  },
+}
+// #endregion
+
 // #region Slot: icon
 export const IconOne: Story = {
   name: 'Icon: Ex. 1',

diff --git a/src/plugins/components/snack/snack.types.ts b/src/plugins/components/snack/snack.types.ts
@@ -4,7 +4,7 @@ export interface SnackProps extends Record<string, unknown> {
   label?: string
   image?: string
   size?: 'xs' | 'sm' | 'md'
-  color?: 'default' | 'muted'
+  color?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
   classes?: {
     wrapper?: string | string[]
     icon?: string | string[]

diff --git a/src/plugins/components/snack/snack.variants.ts b/src/plugins/components/snack/snack.variants.ts
@@ -8,5 +8,7 @@ export const size = {
 
 export const color = {
   default: 'nui-snack-default',
+  'default-contrast': 'nui-snack-default-contrast',
   muted: 'nui-snack-muted',
+  'muted-contrast': 'nui-snack-muted-contrast',
 } as const satisfies SnackVariant<'color'>