fix(Tooltip): fix background styles

shuriken-ui · Feb 22, 2024 · dbd3a62 · dbd3a62
1 parent e30a65a
commit dbd3a62
Showing 1 changed file with 12 additions and 19 deletions.
diff --git a/src/plugins/components/tooltip/index.ts b/src/plugins/components/tooltip/index.ts
@@ -65,12 +65,10 @@ export default plugin(({ addComponents, theme }) => {
       borderRadius: '0.5ch',
       zIndex: '1000',
       [`@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.font.color.dark}`]: {},
-      [`@apply bg-${config.background.dark}`]: {},
+      [`@apply text-${config.font.color.light} dark:text-${config.font.color.light}`]:
+        {},
+      [`@apply bg-${config.background.light} dark:bg-${config.background.dark}`]:
+        {},
     },
     [`[${tooltip}]:hover::before, [${tooltip}]:hover::after, [${tooltip}]:focus-visible::before, [${tooltip}]:focus-visible::after`]:
       {
@@ -86,11 +84,8 @@ export default plugin(({ addComponents, theme }) => {
         bottom: 'calc(100% + 8px)',
         borderBottomWidth: '0',
         borderTopColor: 'currentColor',
-        [`@apply text-${config.background.light}`]: {},
-      },
-    [`.dark [${tooltip}]:not([${position}])::before, .dark [${tooltip}][${position}^='up']::before`]:
-      {
-        [`@apply text-${config.background.dark}`]: {},
+        [`@apply text-${config.background.light} dark:text-${config.background.light}`]:
+          {},
       },
     [`[${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]:
       {
@@ -107,10 +102,8 @@ export default plugin(({ addComponents, theme }) => {
       top: '100%',
       borderTopWidth: '0',
       borderBottomColor: 'currentColor',
-      [`@apply text-${config.background.light}`]: {},
-    },
-    [`.dark [${tooltip}][${position}^='down']::before`]: {
-      [`@apply text-${config.background.dark}`]: {},
+      [`@apply text-${config.background.light} dark:text-${config.background.dark}`]:
+        {},
     },
     [`[${tooltip}][${position}^='down']::after`]: {
       top: 'calc(100% + 5px)',
@@ -129,8 +122,8 @@ export default plugin(({ addComponents, theme }) => {
         borderLeftColor: 'currentColor',
         insetInlineStart: 'calc(0em - 5px)',
         transform: 'translate(-0.5em, -50%)',
-        [`@apply text-${config.background.light}`]: {},
-        [`@apply text-${config.background.dark}`]: {},
+        [`@apply text-${config.background.light} dark:text-${config.background.dark}`]:
+          {},
       },
     [`[${tooltip}][${position}^='start']::after, [${tooltip}][${position}^='left']::after`]:
       {
@@ -147,8 +140,8 @@ export default plugin(({ addComponents, theme }) => {
         borderRightColor: 'currentColor',
         insetInlineEnd: 'calc(0em - 5px)',
         transform: 'translate(0.5em, -50%)',
-        [`@apply text-${config.background.light}`]: {},
-        [`@apply text-${config.background.dark}`]: {},
+        [`@apply text-${config.background.light} dark:text-${config.background.dark}`]:
+          {},
       },
     [`[${tooltip}][${position}^='end']::after, [${tooltip}][${position}^='right']::after`]:
       {