From ee3bfec8b0202ce078ca5d09f9d585b0fe718599 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 21 Feb 2026 01:43:11 +0100
Subject: [PATCH] Add Tremor design tokens for Tailwind v4 compatibility

Tremor v3 expects its TW3 plugin to register tremor-* design tokens
(tremor-content, tremor-background, tremor-border, etc.). Since TW4
has no v3 plugin support, define these tokens manually in @theme and
safelist the utility classes via @source inline().

This fixes chart axis labels, grid lines, and tooltips rendering
without proper colors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/globals.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/app/globals.css b/src/app/globals.css
index 381a2be..4259730 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -53,6 +53,34 @@
 @source inline("hover:{bg,text,border}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
 @source inline("{border,ring}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
 
+/* Safelist Tremor design token utility classes */
+@source inline("{fill,stroke,bg,text,border}-tremor-{brand,background,border,content,content-emphasis,default,label,card,dropdown}");
+
+/* Tremor design tokens — normally registered by Tremor's TW3 plugin.
+   We define them manually for Tailwind v4 compatibility. */
+@theme {
+  --color-tremor-brand: var(--color-blue-500);
+  --color-tremor-brand-emphasis: var(--color-blue-700);
+  --color-tremor-brand-inverted: #fff;
+  --color-tremor-brand-muted: var(--color-blue-200);
+  --color-tremor-brand-faint: var(--color-blue-50);
+  --color-tremor-background: #fff;
+  --color-tremor-background-emphasis: var(--color-gray-700);
+  --color-tremor-background-muted: var(--color-gray-50);
+  --color-tremor-background-subtle: var(--color-gray-100);
+  --color-tremor-border: var(--color-gray-200);
+  --color-tremor-content: var(--color-gray-500);
+  --color-tremor-content-emphasis: var(--color-gray-700);
+  --color-tremor-content-strong: var(--color-gray-900);
+  --color-tremor-content-subtle: var(--color-gray-400);
+  --color-tremor-content-inverted: #fff;
+  --color-tremor-ring: var(--color-gray-200);
+  --color-tremor-default: var(--color-gray-500);
+  --color-tremor-label: var(--color-gray-400);
+  --color-tremor-card: #fff;
+  --color-tremor-dropdown: #fff;
+}
+
 /* Theme variables - using CSS custom properties with Tailwind v4 @theme */
 @theme {
   /* Container */