feat(Snack): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 0e23f6e · 0e23f6e
1 parent 1106e12
commit 0e23f6e
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 57 deletions.
diff --git a/src/plugins/components/snack/index.ts b/src/plugins/components/snack/index.ts
@@ -15,67 +15,98 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies SnackConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}snack`]: {
-          [`@apply inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent`]:
+          [`@apply inline-flex items-center gap-1 ${config.rounded} outline-transparent`]:
             {},
 
           [`.${prefix}snack-icon`]: {
-            [`@apply border-${config.icon.border} -ms-0.5 flex items-center justify-center rounded-${config.icon.rounded} border bg-${config.icon.bg}`]:
+            //Base
+            [`@apply -ms-0.5 flex items-center justify-center ${config.icon.rounded}`]:
+              {},
+            //Background
+            [`@apply bg-${config.icon.background.light} dark:bg-${config.icon.background.dark}`]:
+              {},
+            //Border
+            [`@apply border border-${config.icon.border.light} dark:border-${config.icon.border.dark}`]:
               {},
           },
+          //Snack:image
           [`.${prefix}snack-image`]: {
-            [`@apply -ms-0.5 flex items-center justify-center rounded-${config.image.rounded} shrink-0`]:
+            [`@apply -ms-0.5 flex items-center justify-center ${config.image.rounded} shrink-0`]:
               {},
           },
+          //Image:inner
           [`.${prefix}snack-image-inner`]: {
-            [`@apply rounded-${config.imageInner.rounded}`]: {},
+            [`@apply ${config.image.rounded}`]: {},
           },
+          //Snack:text
           [`.${prefix}snack-text`]: {
-            [`@apply text-${config.text.text} dark:text-${config.text.textDark} font-${config.text.font} text-${config.text.textSize}`]:
+            //Font
+            [`@apply font-${config.font.family} text-${config.font.size}`]: {},
+            //Color
+            [`@apply text-${config.font.color.light} dark:text-${config.font.color.dark}`]:
               {},
           },
+          //Snack:button
           [`.${prefix}snack-button`]: {
             [`@apply hover:!bg-transparent`]: {},
           },
+          //Size:sm
           [`&.${prefix}snack-sm`]: {
-            [`@apply h-${config.snackSM.size}`]: {},
-
+            //Size
+            [`@apply h-${config.size.sm.size}`]: {},
+            //Snack:icon
             [`.${prefix}snack-icon`]: {
-              [`@apply w-${config.snackSM.icon.size} h-${config.snackSM.icon.size}`]:
+              [`@apply w-${config.size.sm.icon.outer.size} h-${config.size.sm.icon.outer.size}`]:
                 {},
             },
+            //Icon:inner
             [`.${prefix}snack-icon-inner`]: {
-              [`@apply h-${config.snackSM.iconsInner.size} w-${config.snackSM.iconsInner.size}`]:
+              [`@apply h-${config.size.sm.icon.inner.size} w-${config.size.sm.icon.inner.size}`]:
                 {},
             },
+            //Snack:image
             [`.${prefix}snack-image, .${prefix}snack-image-inner`]: {
-              [`@apply w-${config.snackSM.imageAndImageInner.size} h-${config.snackSM.imageAndImageInner.size}`]:
+              [`@apply w-${config.size.sm.image.outer.size} h-${config.size.sm.image.outer.size}`]:
                 {},
             },
           },
+          //Size:md
           [`&.${prefix}snack-md`]: {
-            [`@apply h-${config.snackMD.size}`]: {},
-
+            //Size
+            [`@apply h-${config.size.md.size}`]: {},
+            //Snack:icon
             [`.${prefix}snack-icon`]: {
-              [`@apply w-${config.snackMD.icon.size} h-${config.snackMD.icon.size}`]:
+              [`@apply w-${config.size.md.icon.outer.size} h-${config.size.md.icon.outer.size}`]:
                 {},
             },
+            //Icon:inner
             [`.${prefix}snack-icon-inner`]: {
-              [`@apply h-${config.snackMD.iconsInner.size} w-${config.snackMD.iconsInner.size}`]:
+              [`@apply h-${config.size.md.icon.inner.size} w-${config.size.md.icon.inner.size}`]:
                 {},
             },
+            //Snack:image
             [`.${prefix}snack-image, .${prefix}snack-image-inner`]: {
-              [`@apply w-${config.snackMD.imageAndImageInner.size} h-${config.snackMD.imageAndImageInner.size}`]:
+              [`@apply w-${config.size.md.image.outer.size} h-${config.size.md.image.outer.size}`]:
                 {},
             },
           },
+          //Color:default
           [`&.${prefix}snack-default`]: {
-            [`@apply dark:bg-${config.default.bgDark} border-${config.default.border} dark:border-${config.default.borderDark} border bg-${config.default.bg}`]:
+            //Background
+            [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:
+              {},
+            //Border
+            [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
               {},
           },
           [`&.${prefix}snack-muted`]: {
-            [`@apply bg-${config.muted.bg} dark:bg-${config.muted.bgDark}`]: {},
+            //Background
+            [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark}`]:
+              {},
           },
+          //Snack:media
           [`&:not(.${prefix}has-media)`]: {
             [`@apply ps-4`]: {},
           },

diff --git a/src/plugins/components/snack/snack.config.ts b/src/plugins/components/snack/snack.config.ts
@@ -1,57 +1,92 @@
 export const key = 'snack' as const
 
 export const defaultConfig = {
-  rounded: 'full',
+  rounded: 'rounded-full',
   icon: {
-    border: 'muted-200',
-    rounded: 'full',
-    bg: 'white',
+    rounded: 'rounded-full',
+    border: {
+      light: 'muted-200',
+      dark: 'muted-700',
+    },
+    background: {
+      light: 'white',
+      dark: 'white',
+    },
   },
   image: {
-    rounded: 'full',
-  },
-  imageInner: {
-    rounded: 'full',
-  },
-  text: {
-    text: 'muted-600',
-    textDark: 'muted-300',
-    font: 'sans',
-    textSize: 'sm',
-  },
-  snackSM: {
-    size: '8',
-    icon: {
-      size: '8',
-    },
-    iconsInner: {
-      size: '4',
+    rounded: 'rounded-full',
+    outer: {
+      rounded: 'rounded-full',
     },
-    imageAndImageInner: {
-      size: '8',
+    inner: {
+      rounded: 'rounded-full',
     },
   },
-  snackMD: {
-    size: '10',
-    icon: {
-      size: '10',
+  font: {
+    family: 'sans',
+    size: 'sm',
+    color: {
+      light: 'muted-600',
+      dark: 'muted-300',
     },
-    iconsInner: {
-      size: '5',
+  },
+  size: {
+    sm: {
+      size: '8',
+      icon: {
+        outer: {
+          size: '8',
+        },
+        inner: {
+          size: '4',
+        },
+      },
+      image: {
+        outer: {
+          size: '8',
+        },
+        inner: {
+          size: '8',
+        },
+      },
     },
-    imageAndImageInner: {
+    md: {
       size: '10',
+      icon: {
+        outer: {
+          size: '10',
+        },
+        inner: {
+          size: '5',
+        },
+      },
+      image: {
+        outer: {
+          size: '10',
+        },
+        inner: {
+          size: '10',
+        },
+      },
     },
   },
-  default: {
-    bg: 'white',
-    bgDark: 'muted-700',
-    border: 'muted-300',
-    borderDark: 'muted-600',
-  },
-  muted: {
-    bg: 'muted-200',
-    bgDark: 'muted-700',
+  color: {
+    default: {
+      background: {
+        light: 'white',
+        dark: 'muted-700',
+      },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-600',
+      },
+    },
+    muted: {
+      background: {
+        light: 'muted-200',
+        dark: 'muted-700',
+      },
+    },
   },
 }