feat(TabSlider): add new color prop

shuriken-ui · Feb 19, 2024 · e09a081 · e09a081
1 parent ec19d3c
commit e09a081
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 26 deletions.
diff --git a/src/plugins/components/tab-slider/index.ts b/src/plugins/components/tab-slider/index.ts
@@ -37,24 +37,11 @@ export default plugin(({ addComponents, theme }) => {
         //Font
         [`@apply text-${config.item.font.size} font-${config.item.font.family}`]:
           {},
-        //Item:inactive
-        '&:not(.nui-active)': {
-          [`@apply text-${config.item.font.color.inactive.light} dark:text-${config.item.font.color.inactive.dark}`]:
-            {},
-        },
-        //Item:active
-        '&.nui-active': {
-          [`@apply text-${config.item.font.color.active.light} dark:text-${config.item.font.color.active.dark}`]:
-            {},
-        },
       },
       //Tabs:naver
       '.nui-tab-slider-naver': {
         //Base
         '@apply absolute start-0 top-0 z-10 h-full': {},
-        //Background
-        [`@apply bg-${config.naver.background.light} dark:bg-${config.naver.background.dark}`]:
-          {},
         //Transition
         [`@apply transition-${config.naver.transition.property} duration-${config.naver.transition.duration}`]:
           {},
@@ -75,6 +62,100 @@ export default plugin(({ addComponents, theme }) => {
           '@apply justify-end': {},
         },
       },
+      //Color:default
+      '&.nui-tabs-default': {
+        '.nui-tab-slider-item:not(.nui-active)': {
+          [`@apply text-${config.color.default.tabs.color.inactive.light} dark:text-${config.color.default.tabs.color.inactive.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-item.nui-active': {
+          [`@apply text-${config.color.default.tabs.color.active.light} dark:text-${config.color.default.tabs.color.active.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-naver': {
+          [`@apply bg-${config.color.default.naver.background.light} dark:bg-${config.color.default.naver.background.dark}`]:
+            {},
+          [`@apply border border-${config.color.default.naver.border.light} dark:border-${config.color.default.naver.border.dark}`]:
+            {},
+        },
+      },
+      //Color:default-contrast
+      '&.nui-tabs-default-contrast': {
+        '.nui-tab-slider-item:not(.nui-active)': {
+          [`@apply text-${config.color.defaultContrast.tabs.color.inactive.light} dark:text-${config.color.defaultContrast.tabs.color.inactive.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-item.nui-active': {
+          [`@apply text-${config.color.defaultContrast.tabs.color.active.light} dark:text-${config.color.defaultContrast.tabs.color.active.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-naver': {
+          [`@apply bg-${config.color.defaultContrast.naver.background.light} dark:bg-${config.color.defaultContrast.naver.background.dark}`]:
+            {},
+          [`@apply border border-${config.color.defaultContrast.naver.border.light} dark:border-${config.color.defaultContrast.naver.border.dark}`]:
+            {},
+        },
+      },
+      //Color:primary
+      '&.nui-tabs-primary': {
+        '.nui-tab-slider-item:not(.nui-active)': {
+          [`@apply text-${config.color.primary.tabs.color.inactive.light} dark:text-${config.color.primary.tabs.color.inactive.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-item.nui-active': {
+          [`@apply text-${config.color.primary.tabs.color.active.light} dark:text-${config.color.primary.tabs.color.active.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-naver': {
+          [`@apply bg-${config.color.primary.naver.background.light} dark:bg-${config.color.primary.naver.background.dark}`]:
+            {},
+        },
+      },
+      //Color:light
+      '&.nui-tabs-light': {
+        '.nui-tab-slider-item:not(.nui-active)': {
+          [`@apply text-${config.color.light.tabs.color.inactive.light} dark:text-${config.color.light.tabs.color.inactive.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-item.nui-active': {
+          [`@apply text-${config.color.light.tabs.color.active.light} dark:text-${config.color.light.tabs.color.active.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-naver': {
+          [`@apply bg-${config.color.light.naver.background.light} dark:bg-${config.color.light.naver.background.dark}`]:
+            {},
+        },
+      },
+      //Color:dark
+      '&.nui-tabs-dark': {
+        '.nui-tab-slider-item:not(.nui-active)': {
+          [`@apply text-${config.color.dark.tabs.color.inactive.light} dark:text-${config.color.dark.tabs.color.inactive.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-item.nui-active': {
+          [`@apply text-${config.color.dark.tabs.color.active.light} dark:text-${config.color.dark.tabs.color.active.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-naver': {
+          [`@apply bg-${config.color.dark.naver.background.light} dark:bg-${config.color.dark.naver.background.dark}`]:
+            {},
+        },
+      },
+      //Color:black
+      '&.nui-tabs-black': {
+        '.nui-tab-slider-item:not(.nui-active)': {
+          [`@apply text-${config.color.black.tabs.color.inactive.light} dark:text-${config.color.black.tabs.color.inactive.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-item.nui-active': {
+          [`@apply text-${config.color.black.tabs.color.active.light} dark:text-${config.color.black.tabs.color.active.dark}`]:
+            {},
+        },
+        '.nui-tab-slider-naver': {
+          [`@apply bg-${config.color.black.naver.background.light} dark:bg-${config.color.black.naver.background.dark}`]:
+            {},
+        },
+      },
       //Rounded:sm
       '&.nui-tabs-rounded': {
         '.nui-tab-slider-track, .nui-tab-slider-naver': {

diff --git a/src/plugins/components/tab-slider/tab-slider.component.ts b/src/plugins/components/tab-slider/tab-slider.component.ts
@@ -9,6 +9,7 @@ import * as variants from './tab-slider.variants'
  */
 export const TabSlider = ({
   tabs,
+  color = 'primary',
   justify = 'start',
   rounded = 'md',
   size = 'md',
@@ -23,6 +24,7 @@ export const TabSlider = ({
     <div
       class=${[
         'nui-tab-slider',
+        color && variants.color[color],
         justify && variants.justify[justify],
         rounded && variants.rounded[rounded],
         size && variants.size[size],

diff --git a/src/plugins/components/tab-slider/tab-slider.config.ts b/src/plugins/components/tab-slider/tab-slider.config.ts
@@ -21,26 +21,142 @@ export const defaultConfig = {
     font: {
       family: 'sans',
       size: 'sm',
-      color: {
-        active: {
+    },
+  },
+  naver: {
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
+  },
+  color: {
+    primary: {
+      tabs: {
+        color: {
+          active: {
+            light: 'white',
+            dark: 'white',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      naver: {
+        background: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
+    },
+    default: {
+      tabs: {
+        color: {
+          active: {
+            light: 'muted-800',
+            dark: 'white',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      naver: {
+        background: {
           light: 'white',
-          dark: 'white',
+          dark: 'muted-700',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-600',
         },
-        inactive: {
-          light: 'muted-400',
+      },
+    },
+    defaultContrast: {
+      tabs: {
+        color: {
+          active: {
+            light: 'muted-900',
+            dark: 'white',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      naver: {
+        background: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-800',
+        },
+      },
+    },
+    light: {
+      tabs: {
+        color: {
+          active: {
+            light: 'white',
+            dark: 'white',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      naver: {
+        background: {
+          light: 'muted-500',
           dark: 'muted-400',
         },
       },
     },
-  },
-  naver: {
-    background: {
-      light: 'primary-500',
-      dark: 'primary-500',
+    dark: {
+      tabs: {
+        color: {
+          active: {
+            light: 'white',
+            dark: 'muted-900',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      naver: {
+        background: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+      },
     },
-    transition: {
-      property: 'all',
-      duration: '300',
+    black: {
+      tabs: {
+        color: {
+          active: {
+            light: 'white',
+            dark: 'black',
+          },
+          inactive: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      naver: {
+        background: {
+          light: 'black',
+          dark: 'white',
+        },
+      },
     },
   },
   size: {

diff --git a/src/plugins/components/tab-slider/tab-slider.stories.ts b/src/plugins/components/tab-slider/tab-slider.stories.ts
@@ -10,6 +10,11 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => TabSlider(args),
   argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'light', 'dark', 'black'],
+      defaultValue: 'primary',
+    },
     rounded: {
       control: { type: 'select' },
       options: ['none', 'sm', 'md', 'lg', 'full'],

diff --git a/src/plugins/components/tab-slider/tab-slider.types.ts b/src/plugins/components/tab-slider/tab-slider.types.ts
@@ -5,6 +5,13 @@ export interface TabSliderProps extends Record<string, unknown> {
     label: string
     value: string
   }[]
+  color?:
+    | 'default'
+    | 'default-contrast'
+    | 'primary'
+    | 'light'
+    | 'dark'
+    | 'black'
   justify?: 'start' | 'center' | 'end'
   size?: 'sm' | 'md'
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'

diff --git a/src/plugins/components/tab-slider/tab-slider.variants.ts b/src/plugins/components/tab-slider/tab-slider.variants.ts
@@ -18,3 +18,12 @@ export const rounded = {
   lg: 'nui-tabs-curved',
   full: 'nui-tabs-full',
 } as const satisfies TabSliderVariant<'rounded'>
+
+export const color = {
+  default: 'nui-tabs-default',
+  'default-contrast': 'nui-tabs-default-contrast',
+  primary: 'nui-tabs-primary',
+  light: 'nui-tabs-light',
+  dark: 'nui-tabs-dark',
+  black: 'nui-tabs-black',
+} as const satisfies TabSliderVariant<'color'>