feat(Radio): config redesign and implementation

shuriken-ui · Dec 8, 2023 · df4e2f7 · df4e2f7
1 parent 6d27976
commit df4e2f7
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 40 deletions.
diff --git a/src/plugins/components/radio/index.ts b/src/plugins/components/radio/index.ts
@@ -19,64 +19,108 @@ export default plugin.withOptions(
           [`@apply relative inline-flex items-start gap-1`]: {},
 
           [`.${prefix}radio-outer`]: {
-            [`@apply ${prefix}focus relative flex h-${config.outer.size} w-${config.outer.size} shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full`]:
+            [`@apply ${prefix}focus relative flex items-center justify-center shrink-0 cursor-pointer overflow-hidden rounded-full`]:
               {},
+            //Size
+            [`@apply h-${config.outer.size} w-${config.outer.size}`]: {},
           },
+          //Radio:inner
           [`.${prefix}radio-inner`]: {
-            [`@apply border-${config.inner.border} dark:border-${config.inner.borderDark} dark:bg-${config.inner.bgDark} absolute start-0 top-0 z-0 h-${config.inner.size} w-${config.inner.size} rounded-${config.inner.rounded} border-2 bg-${config.inner.bg}`]:
+            //Base
+            [`@apply absolute start-0 top-0 z-0 ${config.inner.rounded}`]: {},
+            //Size
+            [`@apply h-${config.inner.size} w-${config.inner.size}`]: {},
+            //Background
+            [`@apply bg-${config.inner.background.light} dark:bg-${config.inner.background.dark}`]:
+              {},
+            //Border
+            [`@apply border-2 border-${config.inner.border.light} dark:border-${config.inner.border.dark}`]:
               {},
           },
+          //Radio:dot
           [`.${prefix}radio-dot`]: {
-            [`@apply pointer-events-none z-10 block h-${config.dot.size} w-${config.dot.size} scale-0 rounded-${config.dot.rounded} bg-${config.dot.bg} transition duration-${config.dot.duration}`]:
+            //Base
+            [`@apply pointer-events-none z-10 block scale-0 ${config.dot.rounded}`]:
+              {},
+            //Size
+            [`@apply h-${config.dot.size} w-${config.dot.size}`]: {},
+            //Background
+            [`@apply bg-${config.dot.background.light} dark:bg-${config.dot.background.dark}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.dot.transition.property} duration-${config.dot.transition.duration}`]:
               {},
           },
+          //Radio:input
           [`.${prefix}radio-input`]: {
             [`@apply absolute z-20 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]:
               {},
-
+            //Input:checked:inner
             [`&:checked ~ .${prefix}radio-inner`]: {
               [`@apply border-current`]: {},
             },
-
+            //Input:checked:dot
             [`&:checked ~ .${prefix}radio-dot`]: {
               [`@apply scale-100`]: {},
             },
           },
+          //Radio:label
           [`.${prefix}radio-label-wrapper`]: {
             [`@apply inline-flex flex-col`]: {},
           },
+          //Label:text
           [`.${prefix}radio-label-text`]: {
-            [`@apply text-${config.labelText.text} ms-1 cursor-pointer select-none font-${config.labelText.font} text-${config.labelText.textSize}`]:
+            [`@apply ms-1 cursor-pointer select-none`]: {},
+            //Font
+            [`@apply font-${config.label.font.family} text-${config.label.font.size} text-${config.label.font.color.light} dark:text-${config.label.font.color.dark}`]:
               {},
           },
+          //Radio:error
           [`.${prefix}radio-error`]: {
-            [`@apply text-${config.error.text} ms-1 inline-block font-${config.error.font} text-${config.error.textSize}`]:
+            [`@apply ms-1 inline-block`]: {},
+            //Font
+            [`@apply font-${config.error.font.family} text-${config.error.font.size} text-${config.error.font.color.light} dark:text-${config.error.font.color.dark}`]:
               {},
           },
+          //Color:default
           [`&.${prefix}radio-default`]: {
-            [`@apply text-${config.default.text} dark:text-${config.default.textDark}`]:
+            [`@apply text-${config.color.default.light} dark:text-${config.color.default.dark}`]:
               {},
           },
+          //Color:light
           [`&.${prefix}radio-light`]: {
-            [`@apply text-${config.light}`]: {},
+            [`@apply text-${config.color.light.light} dark:text-${config.color.light.dark}`]:
+              {},
           },
+          //Color:muted
           [`&.${prefix}radio-muted`]: {
-            [`@apply text-${config.muted}`]: {},
+            [`@apply text-${config.color.muted.light} dark:text-${config.color.muted.dark}`]:
+              {},
           },
+          //Color:primary
           [`&.${prefix}radio-primary`]: {
-            [`@apply text-${config.primary}`]: {},
+            [`@apply text-${config.color.primary.light} dark:text-${config.color.primary.dark}`]:
+              {},
           },
+          //Color:info
           [`&.${prefix}radio-info`]: {
-            [`@apply text-${config.info}`]: {},
+            [`@apply text-${config.color.info.light} dark:text-${config.color.info.dark}`]:
+              {},
           },
+          //Color:success
           [`&.${prefix}radio-success`]: {
-            [`@apply text-${config.success}`]: {},
+            [`@apply text-${config.color.success.light} dark:text-${config.color.default.dark}`]:
+              {},
           },
+          //Color:warning
           [`&.${prefix}radio-warning`]: {
-            [`@apply text-${config.warning}`]: {},
+            [`@apply text-${config.color.warning.light} dark:text-${config.color.warning.dark}`]:
+              {},
           },
+          //Color:danger
           [`&.${prefix}radio-danger`]: {
-            [`@apply text-${config.danger}`]: {},
+            [`@apply text-${config.color.danger.light} dark:text-${config.color.danger.dark}`]:
+              {},
           },
         },
       })

diff --git a/src/plugins/components/radio/radio.config.ts b/src/plugins/components/radio/radio.config.ts
@@ -5,43 +5,86 @@ export const defaultConfig = {
     size: '5',
   },
   inner: {
-    border: 'muted-400',
-    borderDark: 'muted-600',
-    bg: 'white',
-    bgDark: 'muted-700',
     size: 'full',
-    rounded: 'full',
+    rounded: 'rounded-full',
+    border: {
+      light: 'muted-400',
+      dark: 'muted-600',
+    },
+    background: {
+      light: 'white',
+      dark: 'muted-700',
+    },
   },
   dot: {
     size: '1',
-    rounded: 'full',
-    bg: 'current',
-    duration: '300',
+    rounded: 'rounded-full',
+    background: {
+      light: 'current',
+      dark: 'current',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
   input: {
     size: '5',
   },
-  labelText: {
-    text: 'muted-400',
-    textSize: 'sm',
-    font: 'sans',
+  label: {
+    font: {
+      family: 'sans',
+      size: 'sm',
+      color: {
+        light: 'muted-400',
+        dark: 'muted-400',
+      },
+    },
   },
   error: {
-    text: 'danger-600',
-    textSize: 'sm',
-    font: 'sans',
+    font: {
+      family: 'sans',
+      size: 'sm',
+      color: {
+        light: 'danger-600',
+        dark: 'danger-500',
+      },
+    },
   },
-  default: {
-    text: 'muted-600',
-    textDark: 'muted-200',
+  color: {
+    default: {
+      light: 'muted-600',
+      dark: 'muted-200',
+    },
+    light: {
+      light: 'muted-100',
+      dark: 'muted-100',
+    },
+    muted: {
+      light: 'muted-400',
+      dark: 'muted-400',
+    },
+    primary: {
+      light: 'primary-500',
+      dark: 'primary-500',
+    },
+    info: {
+      light: 'info-500',
+      dark: 'info-500',
+    },
+    success: {
+      light: 'success-500',
+      dark: 'success-500',
+    },
+    warning: {
+      light: 'warning-500',
+      dark: 'warning-500',
+    },
+    danger: {
+      light: 'danger-500',
+      dark: 'danger-500',
+    },
   },
-  light: 'white',
-  muted: 'muted-400',
-  primary: 'primary-500',
-  info: 'info-500',
-  success: 'success-500',
-  warning: 'warning-500',
-  danger: 'danger-500',
 }
 
 export type RadioConfig = typeof defaultConfig