feat(Kbd): add contrast colors

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

Hide file tree

Showing 6 changed files with 166 additions and 4 deletions.
diff --git a/src/plugins/components/kbd/index.ts b/src/plugins/components/kbd/index.ts
@@ -133,12 +133,38 @@ export default plugin(({ addComponents, theme }) => {
       },
       //Color:default
       '&.nui-kbd-default': {
-        '@apply bg-white dark:bg-muted-800 border border-b-2 border-muted-500/20 dark:border-muted-300/20':
+        //Background
+        [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark} border border-b-2`]:
+          {},
+        //Border
+        [`@apply border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
+          {},
+      },
+      //Color:default-contrast
+      '&.nui-kbd-default-contrast': {
+        //Background
+        [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark} border border-b-2`]:
+          {},
+        //Border
+        [`@apply border-${config.color.defaultContrast.border.light} dark:border-${config.color.defaultContrast.border.dark}`]:
           {},
       },
       //Color:muted
       '&.nui-kbd-muted': {
-        '@apply bg-muted-50 dark:bg-muted-800 border border-b-2 border-muted-600/20 dark:border-muted-300/20':
+        //Background
+        [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark} border border-b-2`]:
+          {},
+        //Border
+        [`@apply border-${config.color.muted.border.light} dark:border-${config.color.muted.border.dark}`]:
+          {},
+      },
+      //Color:muted-contrast
+      '&.nui-kbd-muted-contrast': {
+        //Background
+        [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark} border border-b-2`]:
+          {},
+        //Border
+        [`@apply border-${config.color.mutedContrast.border.light} dark:border-${config.color.mutedContrast.border.dark}`]:
           {},
       },
     },

diff --git a/src/plugins/components/kbd/kbd.config.ts b/src/plugins/components/kbd/kbd.config.ts
@@ -103,6 +103,16 @@ export const defaultConfig = {
         dark: 'muted-300/20',
       },
     },
+    defaultContrast: {
+      background: {
+        light: 'white',
+        dark: 'muted-950',
+      },
+      border: {
+        light: 'muted-500/20',
+        dark: 'muted-400/20',
+      },
+    },
     muted: {
       background: {
         light: 'muted-50',
@@ -113,6 +123,16 @@ export const defaultConfig = {
         dark: 'muted-300/20',
       },
     },
+    mutedContrast: {
+      background: {
+        light: 'muted-50',
+        dark: 'muted-950',
+      },
+      border: {
+        light: 'muted-600/20',
+        dark: 'muted-400/20',
+      },
+    },
   },
 }
 

diff --git a/src/plugins/components/kbd/kbd.doc.mdx b/src/plugins/components/kbd/kbd.doc.mdx
@@ -30,6 +30,19 @@ Kbd elements can have different sizes and colors. Below is an eample of availabl
 
 <br />
 
+### Color: default-contrast
+
+Kbd elements can have different sizes and colors. Below is an eample of available sizes and with the default contrast color.
+
+<div className="flex items-end gap-4 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={KbdStories.DefaultContrastXs} />
+  <Story of={KbdStories.DefaultContrastSm} />
+  <Story of={KbdStories.DefaultContrastMd} />
+  <Story of={KbdStories.DefaultContrastLg} />
+</div>
+
+<br />
+
 ### Color: muted
 
 Kbd elements can have different sizes and colors. Below is an eample of available sizes and with the muted color.
@@ -43,6 +56,19 @@ Kbd elements can have different sizes and colors. Below is an eample of availabl
 
 <br />
 
+### Color: muted-contrast
+
+Kbd elements can have different sizes and colors. Below is an eample of available sizes and with the muted contrast color.
+
+<div className="flex items-end gap-4 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={KbdStories.MutedContrastXs} />
+  <Story of={KbdStories.MutedContrastSm} />
+  <Story of={KbdStories.MutedContrastMd} />
+  <Story of={KbdStories.MutedContrastLg} />
+</div>
+
+<br />
+
 ### Slot: icon
 
 Kbd elements can have an icon inside instead of text. Below is an eample of available icon sizes.

diff --git a/src/plugins/components/kbd/kbd.stories.ts b/src/plugins/components/kbd/kbd.stories.ts
@@ -17,7 +17,7 @@ const meta = {
     },
     color: {
       control: { type: 'select' },
-      options: ['default', 'muted'],
+      options: ['default', 'default-contrast', 'muted', 'muted-contrast'],
       defaultValue: 'default',
     },
     rounded: {
@@ -87,6 +87,48 @@ export const DefaultLg: Story = {
 }
 // #endregion
 
+// #region Default Contrast
+export const DefaultContrastXs: Story = {
+  name: 'Default contrast: xs',
+  args: {
+    size: 'xs',
+    children: html`
+      Esc
+    `,
+  },
+}
+
+export const DefaultContrastSm: Story = {
+  name: 'Default contrast: sm',
+  args: {
+    size: 'sm',
+    children: html`
+      Esc
+    `,
+  },
+}
+
+export const DefaultContrastMd: Story = {
+  name: 'Default contrast: md',
+  args: {
+    size: 'md',
+    children: html`
+      Esc
+    `,
+  },
+}
+
+export const DefaultContrastLg: Story = {
+  name: 'Default contrast: lg',
+  args: {
+    size: 'lg',
+    children: html`
+      Esc
+    `,
+  },
+}
+// #endregion
+
 // #region Muted
 export const MutedXs: Story = {
   name: 'Muted: xs',
@@ -133,6 +175,52 @@ export const MutedLg: Story = {
 }
 // #endregion
 
+// #region Muted Contrast
+export const MutedContrastXs: Story = {
+  name: 'Muted contrast: xs',
+  args: {
+    size: 'xs',
+    color: 'muted',
+    children: html`
+      Esc
+    `,
+  },
+}
+
+export const MutedContrastSm: Story = {
+  name: 'Muted contrast: sm',
+  args: {
+    size: 'sm',
+    color: 'muted',
+    children: html`
+      Esc
+    `,
+  },
+}
+
+export const MutedContrastMd: Story = {
+  name: 'Muted contrast: md',
+  args: {
+    size: 'md',
+    color: 'muted',
+    children: html`
+      Esc
+    `,
+  },
+}
+
+export const MutedContrastLg: Story = {
+  name: 'Muted contrast: lg',
+  args: {
+    size: 'lg',
+    color: 'muted',
+    children: html`
+      Esc
+    `,
+  },
+}
+// #endregion
+
 // #region Icon
 export const IconXs: Story = {
   name: 'Icon: xs',

diff --git a/src/plugins/components/kbd/kbd.types.ts b/src/plugins/components/kbd/kbd.types.ts
@@ -3,7 +3,7 @@ import type { PropertyVariant } from '~/types/utils'
 export interface KbdProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   size?: 'xs' | 'sm' | 'md' | 'lg'
-  color?: 'default' | 'muted'
+  color?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
   classes?: {
     wrapper?: string | string[]
   }

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