fix(TooltipItem): Use Tailwind 3 and 4 compatibility CSS variable cus…

…tom value
techniq · Feb 10, 2025 · 8ed4684 · 8ed4684
1 parent 956372a
commit 8ed4684
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/warm-seahorses-trade.md b/.changeset/warm-seahorses-trade.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(TooltipItem): Use Tailwind 3 and 4 compatibility CSS variable custom value
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipHeader.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipHeader.svelte
@@ -22,7 +22,7 @@
 >
   {#if color}
     <div
-      class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+      class={cls('color', 'inline-block size-2 rounded-full bg-[var(--color)]', classes.color)}
       style:--color={color}
     ></div>
   {/if}

diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipItem.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipItem.svelte
@@ -21,7 +21,7 @@
   <div class={cls('label', 'flex items-center gap-2 whitespace-nowrap', classes.label)}>
     {#if color}
       <div
-        class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+        class={cls('color', 'inline-block size-2 rounded-full bg-[var(--color)]', classes.color)}
         style:--color={color}
       ></div>
     {/if}

diff --git a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
@@ -54,7 +54,7 @@
             {curve}
             style="--group-color:{groupColor(group)}"
             classes={{
-              path: 'pointer-events-none stroke-[--group-color] fill-[--group-color] [fill-opacity:0.1]',
+              path: 'pointer-events-none stroke-[var(--group-color)] fill-[var(--group-color)] [fill-opacity:0.1]',
             }}
           />
         {/each}