feat(Breadcrumb): add new colors

shuriken-ui · Feb 20, 2024 · c3bb575 · c3bb575
1 parent 73e28a2
commit c3bb575
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 9 deletions.
diff --git a/src/plugins/components/breadcrumb/breadcrumb.component.ts b/src/plugins/components/breadcrumb/breadcrumb.component.ts
@@ -13,11 +13,18 @@ export const Breadcrumb = ({
   items,
   classes,
   separator = 'dot',
+  color = 'primary',
   ...attrs
 }: BreadcrumbAttrs) => {
   return html`
     <nav
-      class=${['nui-breadcrumb', classes?.wrapper].filter(Boolean).join(' ')}
+      class=${[
+        'nui-breadcrumb',
+        color && variants.color[color],
+        classes?.wrapper,
+      ]
+        .filter(Boolean)
+        .join(' ')}
       ${spread(attrs)}
     >
       <ul class="nui-breadcrumb-list">

diff --git a/src/plugins/components/breadcrumb/breadcrumb.config.ts b/src/plugins/components/breadcrumb/breadcrumb.config.ts
@@ -26,8 +26,36 @@ export const defaultConfig = {
     link: {
       font: {
         color: {
-          hover: 'primary-500',
-          focus: 'primary-500',
+          primary: {
+            light: {
+              hover: 'primary-500',
+              focus: 'primary-500',
+            },
+            dark: {
+              hover: 'primary-500',
+              focus: 'primary-500',
+            },
+          },
+          dark: {
+            light: {
+              hover: 'muted-900',
+              focus: 'muted-900',
+            },
+            dark: {
+              hover: 'muted-100',
+              focus: 'muted-100',
+            },
+          },
+          black: {
+            light: {
+              hover: 'black',
+              focus: 'black',
+            },
+            dark: {
+              hover: 'white',
+              focus: 'white',
+            },
+          },
         },
       },
     },

diff --git a/src/plugins/components/breadcrumb/breadcrumb.stories.ts b/src/plugins/components/breadcrumb/breadcrumb.stories.ts
@@ -10,6 +10,11 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => Breadcrumb(args),
   argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'dark', 'black'],
+      defaultValue: 'default',
+    },
     separator: {
       control: { type: 'select' },
       options: ['dot', 'slash', 'arrow', 'chevron'],

diff --git a/src/plugins/components/breadcrumb/breadcrumb.types.ts b/src/plugins/components/breadcrumb/breadcrumb.types.ts
@@ -2,6 +2,7 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface BreadcrumbProps extends Record<string, unknown> {
   separator?: 'slash' | 'chevron' | 'dot' | 'arrow'
+  color?: 'primary' | 'dark' | 'black'
   items?: {
     label?: string
     hideLabel?: boolean

diff --git a/src/plugins/components/breadcrumb/breadcrumb.variants.ts b/src/plugins/components/breadcrumb/breadcrumb.variants.ts
@@ -1 +1,7 @@
-export {}
+import type { BreadcrumbVariant } from './breadcrumb.types'
+
+export const color = {
+  primary: 'nui-breadcrumb-primary',
+  dark: 'nui-breadcrumb-dark',
+  black: 'nui-breadcrumb-black',
+} as const satisfies BreadcrumbVariant<'color'>
diff --git a/src/plugins/components/breadcrumb/index.ts b/src/plugins/components/breadcrumb/index.ts
@@ -47,18 +47,46 @@ export default plugin(({ addComponents, theme }) => {
               [`@apply text-${config.item.dot.font.size}`]: {},
             },
           },
-          //Item:link
-          '&.nui-has-link': {
-            [`@apply hover:text-${config.item.link.font.color.hover} focus:text-${config.item.link.font.color.focus}`]:
-              {},
-          },
           //Item:text
           '.nui-item-text': {
             [`@apply text-${config.item.text.font.color.light} dark:text-${config.item.text.font.color.dark} px-${config.item.text.padding.x}`]:
               {},
           },
         },
       },
+      //Color:primary
+      '&.nui-breadcrumb-primary': {
+        '.nui-item-inner': {
+          '&.nui-has-link': {
+            [`@apply hover:text-${config.item.link.font.color.primary.light.hover} focus:text-${config.item.link.font.color.primary.light.focus}`]:
+              {},
+            [`@apply dark:hover:text-${config.item.link.font.color.primary.dark.hover} dark:focus:text-${config.item.link.font.color.primary.dark.focus}`]:
+              {},
+          },
+        },
+      },
+      //Color:dark
+      '&.nui-breadcrumb-dark': {
+        '.nui-item-inner': {
+          '&.nui-has-link': {
+            [`@apply hover:text-${config.item.link.font.color.dark.light.hover} focus:text-${config.item.link.font.color.dark.light.focus}`]:
+              {},
+            [`@apply dark:hover:text-${config.item.link.font.color.dark.dark.hover} dark:focus:text-${config.item.link.font.color.dark.dark.focus}`]:
+              {},
+          },
+        },
+      },
+      //Color:black
+      '&.nui-breadcrumb-black': {
+        '.nui-item-inner': {
+          '&.nui-has-link': {
+            [`@apply hover:text-${config.item.link.font.color.black.light.hover} focus:text-${config.item.link.font.color.black.light.focus}`]:
+              {},
+            [`@apply dark:hover:text-${config.item.link.font.color.black.dark.hover} dark:focus:text-${config.item.link.font.color.black.dark.focus}`]:
+              {},
+          },
+        },
+      },
     },
   })
 }, config)