Merge pull request #110 from techniq/tooltip-theme-variant

[Tooltip] Change variant `light`/`dark` (default: `dark`) to `default` / `invert` and base on theme colors

Author: techniq

.changeset/soft-points-deliver.md

@@ -0,0 +1,5 @@
+---
+"layerchart": patch
+---
+
+[Tooltip] Change variant `light`/`dark` (default: `dark`) to `default` / `invert` and base on theme colors

packages/layerchart/src/lib/components/Tooltip.svelte

@@ -32,7 +32,7 @@
 
   export let contained: 'container' | false = 'container'; // TODO: Support 'window' using getBoundingClientRect()
   export let animate = true;
-  export let variant: 'dark' | 'light' | 'none' = 'dark';
+  export let variant: 'default' | 'invert' | 'none' = 'default';
 
   export let header: ((data: any) => any) | undefined = undefined;
 
@@ -159,13 +159,13 @@
           ['[&_.value]:text-sm [&_.value]:tabular-nums'],
         ],
         {
-          dark: [
-            'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white',
-            '[&_.label]:text-white/75',
+          default: [
+            'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
+            '[&_.label]:text-surface-content/75',
           ],
-          light: [
-            'bg-white text-gray-800 border border-gray-500',
-            '[&_.label]:text-surface-content/50',
+          invert: [
+            'bg-surface-content/90 backdrop-filter backdrop-blur-[2px] text-surface-100 border border-surface-content',
+            '[&_.label]:text-surface-100/50',
           ],
           none: '',
         }[variant],

packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte

@@ -178,7 +178,7 @@
   </div>
 </Preview>
 
-<h2>Light variant</h2>
+<h2>invert variant</h2>
 
 <Preview data={dateSeries}>
   <div class="h-[300px] p-4 border rounded">
@@ -202,7 +202,7 @@
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
-      <Tooltip variant="light" let:data>
+      <Tooltip variant="invert" let:data>
         <div slot="header" class="font-semibold text-center" let:data>
           {format(data.date, 'eee, MMMM do')}
         </div>