feat(List): config redesign and implementation

shuriken-ui · Dec 7, 2023 · 9b9ebda · 9b9ebda
1 parent 49e8de1
commit 9b9ebda
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/plugins/components/list/index.ts b/src/plugins/components/list/index.ts
@@ -23,11 +23,17 @@ export default plugin.withOptions(
             [`@apply list-${config.ol}`]: {},
           },
           [`&.${prefix}list-base`]: {
-            [`@apply space-y-1 marker:text-${config.base.textMarker} dark:marker:text-${config.base.textMarkerDark} font-${config.base.font} text-${config.base.text} dark:text-${config.base.textDark}`]:
+            //Base
+            [`@apply space-y-1 font-${config.base.font.family}`]: {},
+            //Text
+            [`@apply text-${config.base.font.color.text.light} dark:text-${config.base.font.color.text.dark}`]:
+              {},
+            //Marker
+            [`@apply marker:text-${config.base.font.color.marker.light} dark:marker:text-${config.base.font.color.marker.dark}`]:
               {},
           },
           [`&.${prefix}list-media`]: {
-            [`@apply space-y-4 marker:text-${config.media.textMarker} dark:marker:text-${config.media.textMarkerDark}`]:
+            [`@apply space-y-4 marker:text-${config.media.marker.color.light} dark:marker:text-${config.media.marker.color.dark}`]:
               {},
             [`.${prefix}list-item`]: {
               [`@apply flex gap-2`]: {},

diff --git a/src/plugins/components/list/list.config.ts b/src/plugins/components/list/list.config.ts
@@ -4,15 +4,27 @@ export const defaultConfig = {
   ul: 'disc',
   ol: 'decimal',
   base: {
-    textMarker: 'muted-500',
-    textMarkerDark: 'muted-400',
-    text: 'slate-700',
-    textDark: 'slate-300',
-    font: 'sans',
+    font: {
+      family: 'sans',
+      color: {
+        marker: {
+          light: 'muted-500',
+          dark: 'muted-400',
+        },
+        text: {
+          light: 'muted-700',
+          dark: 'muted-300',
+        },
+      },
+    },
   },
   media: {
-    textMarker: 'slate-500',
-    textMarkerDark: 'slate-400',
+    marker: {
+      color: {
+        light: 'muted-500',
+        dark: 'muted-400',
+      },
+    },
   },
 }