feat(Tabs): config redesign and implementation

shuriken-ui · Dec 8, 2023 · be61382 · be61382
1 parent 9ae744c
commit be61382
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 31 deletions.
diff --git a/src/plugins/components/tabs/index.ts b/src/plugins/components/tabs/index.ts
@@ -15,53 +15,92 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies TabsConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}tabs`]: {
           [`@apply relative`]: {},
-
+          //Tabs:inner
           [`.${prefix}tabs-inner`]: {
-            [`@apply font-${config.inner.font} mb-${config.inner.space} flex`]:
+            [`@apply font-${config.inner.font.family} mb-${config.inner.margin.bottom} flex`]:
               {},
           },
+          //Tabs:item
           [`.${prefix}tab-item`]: {
-            [`@apply cursor-pointer text-${config.item.text} border-b-2 px-4 py-3 transition-all duration-${config.item.duration}`]:
+            //Base
+            [`@apply cursor-pointer border-b-2 px-4 py-3`]: {},
+            //Color
+            [`@apply text-${config.item.font.size}`]: {},
+            //Transition
+            [`@apply transition-${config.item.transition.property} duration-${config.item.transition.duration}`]:
               {},
+            //Item:inactive
             [`&:not(.${prefix}active)`]: {
-              [`@apply text-${config.item.notActive.text} border-transparent`]:
+              //Base
+              [`@apply border-transparent`]: {},
+              //Color
+              [`@apply text-${config.item.font.color.inactive.light} dark:text-${config.item.font.color.inactive.dark}`]:
                 {},
             },
+            //Item:active
             [`&.${prefix}active`]: {
-              [`@apply border-${config.item.active.border} text-${config.item.active.text} dark:text-${config.item.active.textDark}`]:
+              //Border
+              [`@apply border-${config.item.border.active.light} dark:border-${config.item.border.active.dark}`]:
+                {},
+              //Color
+              [`@apply text-${config.item.font.color.active.light} dark:text-${config.item.font.color.active.dark}`]:
                 {},
             },
+            //Item:icon
             [`&.${prefix}has-icon`]: {
               [`@apply flex items-center gap-1`]: {},
             },
           },
+          //Item:pill
           [`.${prefix}pill-item`]: {
-            [`@apply flex flex-col rounded-${config.pillItem.rounded} px-5 text-${config.pillItem.textPosition} cursor-pointer text-${config.pillItem.text} transition-all duration-${config.pillItem.duration}`]:
+            [`@apply flex flex-col ${config.pill.rounded} px-5 cursor-pointer`]:
+              {},
+            //font
+            [`@apply text-${config.pill.font.align}`]: {},
+            //Transition
+            [`@apply transition-${config.pill.transition.property} duration-${config.pill.transition.duration}`]:
               {},
+            //Item:inactive
             [`&:not(.${prefix}active)`]: {
-              [`@apply text-${config.pillItem.notActive.text}`]: {},
+              //color
+              [`@apply text-${config.pill.font.color.inactive.light} dark:text-${config.pill.font.color.inactive.dark}`]:
+                {},
             },
+            //Item:active
             [`&.${prefix}active`]: {
-              [`@apply bg-${config.pillItem.active.bg} shadow-${config.pillItem.active.shadow} !text-${config.pillItem.active.text} shadow-${config.pillItem.active.shadowSize}`]:
+              //Color
+              [`@apply !text-${config.pill.font.color.active.light} dark:!text-${config.pill.font.color.active.dark}`]:
+                {},
+              //Background
+              [`@apply !bg-${config.pill.background.active.light} dark:!bg-${config.pill.background.active.dark}`]:
+                {},
+              //Shadow
+              [`@apply shadow-${config.pill.shadow.active.size} bg-${config.pill.shadow.active.light} dark:bg-${config.pill.shadow.active.dark}`]:
                 {},
             },
+            //Item:no-icon
             [`&:not(.${prefix}has-icon)`]: {
               [`@apply flex items-center gap-1 py-2`]: {},
             },
+            //Item:icon
             [`&.${prefix}has-icon`]: {
               [`@apply flex items-center gap-1 py-3`]: {},
             },
           },
+          //Tabs:content
           [`.${prefix}tab-content`]: {
             [`@apply relative block`]: {},
           },
+          //Align:center
           [`&.${prefix}tabs-centered`]: {
             [`.${prefix}tabs-inner`]: {
               [`@apply justify-center`]: {},
             },
           },
+          //Align:end
           [`&.${prefix}tabs-end`]: {
             [`.${prefix}tabs-inner`]: {
               [`@apply justify-end`]: {},

diff --git a/src/plugins/components/tabs/tabs.config.ts b/src/plugins/components/tabs/tabs.config.ts
@@ -2,34 +2,74 @@ export const key = 'tabs' as const
 
 export const defaultConfig = {
   inner: {
-    font: 'sans',
-    space: '6',
+    font: {
+      family: 'sans',
+    },
+    margin: {
+      bottom: '6',
+    },
   },
   item: {
-    text: 'sm',
-    duration: '300',
-    notActive: {
-      text: 'muted-400',
+    font: {
+      size: 'sm',
+      color: {
+        active: {
+          light: 'muted-800',
+          dark: 'muted-100',
+        },
+        inactive: {
+          light: 'muted-400',
+          dark: 'muted-400',
+        },
+      },
+    },
+    border: {
+      active: {
+        light: 'primary-500',
+        dark: 'primary-500',
+      },
+      inactive: {
+        light: 'transparent',
+        dark: 'transparent',
+      },
     },
-    active: {
-      border: 'primary-500',
-      text: 'muted-800',
-      textDark: 'muted-100',
+    transition: {
+      property: 'all',
+      duration: '300',
     },
   },
-  pillItem: {
-    rounded: 'xl',
-    textPosition: 'center',
-    text: 'xs',
-    duration: '300',
-    notActive: {
-      text: 'muted-400',
-    },
-    active: {
-      bg: 'primary-500',
-      text: 'white',
-      shadow: 'primary-500/50',
-      shadowSize: 'lg',
+  pill: {
+    rounded: 'rounded-xl',
+    font: {
+      align: 'center',
+      size: 'xs',
+      color: {
+        active: {
+          light: 'primary-invert',
+          dark: 'primary-invert',
+        },
+        inactive: {
+          light: 'muted-400',
+          dark: 'muted-400',
+        },
+      },
+    },
+    background: {
+      active: {
+        light: 'primary-600',
+        dark: 'primary-600',
+      },
+    },
+    shadow: {
+      active: {
+        size: 'lg',
+        light: 'primary-500/50',
+        dark: 'primary-500/50',
+      },
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
     },
   },
 }