feat(ProgressCircle): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 10cd073 · 10cd073
1 parent 371794a
commit 10cd073
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/src/plugins/components/progress-circle/index.ts b/src/plugins/components/progress-circle/index.ts
@@ -21,17 +21,19 @@ export default plugin.withOptions(
       addComponents({
         [`.${prefix}progress-circle`]: {
           [`@apply relative inline-flex items-center justify-center`]: {},
-
+          //Circle:progress
           [`circle:nth-child(2)`]: {
-            [`@apply stroke-current transition-all duration-${config.circleDuration}`]:
+            [`@apply stroke-current transition-${config.transition.property} duration-${config.transition.duration}`]:
               {},
           },
+          //Color:default
           [`&.${prefix}progress-default circle:first-child`]: {
-            [`@apply text-${config.default.text} dark:text-${config.default.textDark} stroke-${config.default.stroke}`]:
+            [`@apply text-${config.color.default.color.light} dark:text-${config.color.default.color.dark} stroke-${config.color.default.color.stroke}`]:
               {},
           },
+          //Color:contrast
           [`&.${prefix}progress-contrast circle:first-child`]: {
-            [`@apply text-${config.contrast.text} dark:text-${config.contrast.textDark} stroke-${config.contrast.stroke}`]:
+            [`@apply text-${config.color.contrast.color.light} dark:text-${config.color.contrast.color.light} stroke-${config.color.contrast.color.stroke}`]:
               {},
           },
         },

diff --git a/src/plugins/components/progress-circle/progress-circle.config.ts b/src/plugins/components/progress-circle/progress-circle.config.ts
@@ -1,16 +1,25 @@
 export const key = 'progressCircle' as const
 
 export const defaultConfig = {
-  circleDuration: '500',
-  default: {
-    text: 'muted-200',
-    textDark: 'muted-700',
-    stroke: 'current',
+  transition: {
+    property: 'all',
+    duration: '500',
   },
-  contrast: {
-    text: 'muted-200',
-    textDark: 'muted-900',
-    stroke: 'current',
+  color: {
+    default: {
+      color: {
+        light: 'muted-200',
+        dark: 'muted-700',
+        stroke: 'current',
+      },
+    },
+    contrast: {
+      color: {
+        light: 'muted-200',
+        dark: 'muted-900',
+        stroke: 'current',
+      },
+    },
   },
 }