fix(tooltip): bg color in dark theme

jd-solanki · jd-solanki · commit 257925c19e00 · 2023-03-06T21:10:40.000+05:30
diff --git a/docs/components/demos/tooltip/DemoTooltipBasic.vue b/docs/components/demos/tooltip/DemoTooltipBasic.vue
@@ -5,6 +5,7 @@
       Hover Over Me
     </ABtn>
     <ABtn>
+      <!-- ℹ️ You can also customize `--a-tooltip-bg-c` CSS var for changing tooltip background -->
       <ATooltip class="[&_.a-tooltip]-bg-danger">
         <span class="a-tooltip-text">
           <i class="i-bx-shield-x me-1" />
diff --git a/docs/guide/components/tooltip.md b/docs/guide/components/tooltip.md
@@ -12,7 +12,7 @@ Use `ATooltip` component's `text` prop to show passed text in tooltip.
 You can also use `default` slot to render custom content.
 
 :::code DemoTooltipBasic
-<<< @/components/demos/tooltip/DemoTooltipBasic.vue{3,8-13}
+<<< @/components/demos/tooltip/DemoTooltipBasic.vue{3,9-14}
 :::
 
 ::::
diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -61,6 +61,8 @@ $body-color: hsla(var(--a-base-c), 0.68);
       As this will be always on light background we will keep it static and choose color from light scheme
     */
     --a-switch-icon-color: hsla(0, 10%, 20%, 0.68);
+
+    --a-tooltip-bg-c: 0,0%,8%;
     // #endregion all-css-vars
 
     // !SECTION
@@ -77,6 +79,9 @@ $body-color: hsla(var(--a-base-c), 0.68);
 
   // 👉 Switch
     --a-switch-default-color: 0, 0%, 16%;
+
+    // 👉 Tooltip
+    --a-tooltip-bg-c: 0,0%,25%;
     
   // !SECTION
 }
diff --git a/packages/preset-theme-default/src/shortcuts.ts b/packages/preset-theme-default/src/shortcuts.ts
@@ -164,7 +164,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
 
     // 👉 Tooltip
     'a-tooltip-wrapper': 'z-[54]',
-    'a-tooltip': 'bg-[hsl(0,0%,8%)] em:px-2 em:py-1 em:rounded-lg',
+    'a-tooltip': 'bg-[hsl(var(--a-tooltip-bg-c))] em:px-2 em:py-1 em:rounded-lg',
     'a-tooltip-text': 'em:text-sm text-white text-center',
 
     // !SECTION Components
