feat(Tooltip): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 6dc6f53 · 6dc6f53
1 parent 7382d0f
commit 6dc6f53
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/src/plugins/components/tooltip/index.ts b/src/plugins/components/tooltip/index.ts
@@ -39,20 +39,20 @@ export default plugin.withOptions(
         [`[${tooltip}]::after`]: {
           content: `attr(${tooltip})`,
           textAlign: 'center',
-          minWidth: config.minWidth,
-          maxWidth: config.maxWidth,
+          minWidth: config.size.width.min,
+          maxWidth: config.size.width.max,
           whiteSpace: 'pre',
           overflow: 'hidden',
           padding: '1ch 1.5ch',
           borderRadius: '0.5ch',
           zIndex: '1000',
-          [`@apply font-${config.font} text-xs shadow-lg`]: {},
-          [`@apply text-${config.text}`]: {},
-          [`@apply bg-${config.bg}`]: {},
+          [`@apply font-${config.font.family} text-xs shadow-lg`]: {},
+          [`@apply text-${config.font.color.light}`]: {},
+          [`@apply bg-${config.background.light}`]: {},
         },
         [`.dark [${tooltip}]::after`]: {
-          [`@apply text-${config.textDark}`]: {},
-          [`@apply bg-${config.bgDark}`]: {},
+          [`@apply text-${config.font.color.dark}`]: {},
+          [`@apply bg-${config.background.dark}`]: {},
         },
         [`[${tooltip}]:hover::before, [${tooltip}]:hover::after, [${tooltip}]:focus-visible::before, [${tooltip}]:focus-visible::after`]:
           {
@@ -68,11 +68,11 @@ export default plugin.withOptions(
             bottom: 'calc(100% + 8px)',
             borderBottomWidth: '0',
             borderTopColor: 'currentColor',
-            [`@apply text-${config.bg}`]: {},
+            [`@apply text-${config.background.light}`]: {},
           },
         [`.dark [${tooltip}]:not([${position}])::before, .dark [${tooltip}][${position}^='up']::before`]:
           {
-            [`@apply text-${config.bgDark}`]: {},
+            [`@apply text-${config.background.dark}`]: {},
           },
         [`[${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]:
           {
@@ -89,10 +89,10 @@ export default plugin.withOptions(
           top: '100%',
           borderTopWidth: '0',
           borderBottomColor: 'currentColor',
-          [`@apply text-${config.bg}`]: {},
+          [`@apply text-${config.background.light}`]: {},
         },
         [`.dark [${tooltip}][${position}^='down']::before`]: {
-          [`@apply text-${config.bgDark}`]: {},
+          [`@apply text-${config.background.dark}`]: {},
         },
         [`[${tooltip}][${position}^='down']::after`]: {
           top: 'calc(100% + 5px)',
@@ -111,11 +111,11 @@ export default plugin.withOptions(
             borderStartColor: 'currentColor',
             insetInlineStart: 'calc(0em - 5px)',
             transform: 'translate(-0.5em, -50%)',
-            [`@apply text-${config.bg}`]: {},
+            [`@apply text-${config.background.light}`]: {},
           },
         [`[${tooltip}][${position}^='start']::before, [${tooltip}][${position}^='left']::before`]:
           {
-            [`@apply text-${config.bgDark}`]: {},
+            [`@apply text-${config.background.dark}`]: {},
           },
         [`[${tooltip}][${position}^='start']::after, [${tooltip}][${position}^='left']::after`]:
           {
@@ -132,11 +132,11 @@ export default plugin.withOptions(
             borderEndColor: 'currentColor',
             insetInlineEnd: 'calc(0em - 5px)',
             transform: 'translate(0.5em, -50%)',
-            [`@apply text-${config.bg}`]: {},
+            [`@apply text-${config.background.light}`]: {},
           },
         [`[${tooltip}][${position}^='end']::before, [${tooltip}][${position}^='right']::before`]:
           {
-            [`@apply text-${config.bgDark}`]: {},
+            [`@apply text-${config.background.dark}`]: {},
           },
         [`[${tooltip}][${position}^='end']::after, [${tooltip}][${position}^='right']::after`]:
           {

diff --git a/src/plugins/components/tooltip/tooltip.config.ts b/src/plugins/components/tooltip/tooltip.config.ts
@@ -1,13 +1,23 @@
 export const key = 'tooltip' as const
 
 export const defaultConfig = {
-  font: 'sans',
-  bg: '[#1e293b]',
-  bgDark: '[#ec4899]',
-  text: '[#fff]',
-  textDark: '[#fff]',
-  minWidth: '3rem',
-  maxWidth: '21rem',
+  font: {
+    family: 'sans',
+    color: {
+      light: '[#fff]',
+      dark: '[#fff]',
+    },
+  },
+  background: {
+    light: '[#1e293b]',
+    dark: '[#ec4899]',
+  },
+  size: {
+    width: {
+      min: '3rem',
+      max: '21rem',
+    },
+  },
 }
 
 export type TooltipConfig = typeof defaultConfig