From f49d7846e41bf6aa83a19046a360624397869b1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Wed, 17 Jun 2026 11:42:50 +0200 Subject: [PATCH] Make v2 theme a standalone colors config MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Turn the v2 theme into a build-level standalone color system instead of a runtime-scoped add-on. Reset Tailwind's default palette and keep only transparent, black, white, and the Radix scales, so an app opts into v2 by importing it in place of the v1 theme. Drop the redundant [data-theme="v2"] block: isolation now comes from the separate import, and the inline utilities never read those tokens. Update the v2 color guide to describe build-level isolation. Signed-off-by: Émile Ré --- .../trackers/TrackerPatternDetailPage.tsx | 2 +- .../TrackerPatternPropertiesSection.tsx | 2 +- contrib/claude/v2-colors.md | 14 ++- packages/ui/src/v2/theme.css | 109 +++--------------- 4 files changed, 26 insertions(+), 101 deletions(-) diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/TrackerPatternDetailPage.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/TrackerPatternDetailPage.tsx index f72f16b69..17e6111f3 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/TrackerPatternDetailPage.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/TrackerPatternDetailPage.tsx @@ -68,7 +68,7 @@ export default function TrackerPatternDetailPage({ const pattern = data.node; return ( -
+
+ {pattern.pattern} diff --git a/contrib/claude/v2-colors.md b/contrib/claude/v2-colors.md index fcdbce28f..b5d624a71 100644 --- a/contrib/claude/v2-colors.md +++ b/contrib/claude/v2-colors.md @@ -95,16 +95,18 @@ The same Tailwind classes (`bg-sand-1`, `text-red-11`, etc.) resolve to the corr This is independent of v1's dark mode which uses `@variant dark` / `prefers-color-scheme`. -## `data-theme="v2"` boundary +## Isolation from v1 -All v2 components must render inside a `[data-theme="v2"]` ancestor. This boundary scopes v2 token values (colors now, fonts/spacing/shadows later) so they don't collide with the v1 theme during progressive migration. +v2 is a standalone theme isolated at the build level, not via a runtime DOM scope. An app opts into v2 by importing the v2 theme instead of the v1 `theme.css`: -```html -
- -
+```css +/* app index.css — v2 build */ +@import "tailwindcss"; +@import "@probo/ui/src/v2/theme.css"; ``` +The v2 theme wipes Tailwind's default palette (`--color-*: initial`), keeping only `transparent`, `black`, `white`, and the Radix scales below. Within a v2 build these color utilities are global — there is no `[data-theme="v2"]` ancestor requirement. A given build is either v1 or v2; the two do not coexist on the same page. + ## Do / don't ### Use the numbered scale diff --git a/packages/ui/src/v2/theme.css b/packages/ui/src/v2/theme.css index 7cfdd3578..b1d75d431 100644 --- a/packages/ui/src/v2/theme.css +++ b/packages/ui/src/v2/theme.css @@ -66,6 +66,22 @@ @import "@radix-ui/colors/sky.css"; @import "@radix-ui/colors/sky-dark.css"; +/* --------------------------------------------------------------------------- + * Reset the default Tailwind palette + * + * v2 is a standalone theme: an app opts in by importing this file instead of + * the v1 theme.css. Wiping --color-* removes Tailwind's default palette so the + * only colors available are the v2 Radix scales below, plus the three base + * colors kept here. This must precede the @theme inline block so it does not + * wipe the scales registered after it. + * ------------------------------------------------------------------------- */ +@theme { + --color-*: initial; + --color-transparent: transparent; + --color-black: #000000; + --color-white: #ffffff; +} + /* --------------------------------------------------------------------------- * Register v2 color names with Tailwind (generates utility classes) * @@ -159,96 +175,3 @@ --color-sky-11: var(--sky-11); --color-sky-12: var(--sky-12); } - -/* --------------------------------------------------------------------------- - * v2 boundary scope - * - * All v2 tokens resolve from this scope at runtime. Colors reference the Radix - * variables so light/dark switching is automatic. Future non-color tokens - * (fonts, spacing, shadows, radii) will go here too. - * ------------------------------------------------------------------------- */ -[data-theme="v2"] { - /* sand */ - --color-sand-1: var(--sand-1); - --color-sand-2: var(--sand-2); - --color-sand-3: var(--sand-3); - --color-sand-4: var(--sand-4); - --color-sand-5: var(--sand-5); - --color-sand-6: var(--sand-6); - --color-sand-7: var(--sand-7); - --color-sand-8: var(--sand-8); - --color-sand-9: var(--sand-9); - --color-sand-10: var(--sand-10); - --color-sand-11: var(--sand-11); - --color-sand-12: var(--sand-12); - - /* gold */ - --color-gold-1: var(--gold-1); - --color-gold-2: var(--gold-2); - --color-gold-3: var(--gold-3); - --color-gold-4: var(--gold-4); - --color-gold-5: var(--gold-5); - --color-gold-6: var(--gold-6); - --color-gold-7: var(--gold-7); - --color-gold-8: var(--gold-8); - --color-gold-9: var(--gold-9); - --color-gold-10: var(--gold-10); - --color-gold-11: var(--gold-11); - --color-gold-12: var(--gold-12); - - /* red */ - --color-red-1: var(--red-1); - --color-red-2: var(--red-2); - --color-red-3: var(--red-3); - --color-red-4: var(--red-4); - --color-red-5: var(--red-5); - --color-red-6: var(--red-6); - --color-red-7: var(--red-7); - --color-red-8: var(--red-8); - --color-red-9: var(--red-9); - --color-red-10: var(--red-10); - --color-red-11: var(--red-11); - --color-red-12: var(--red-12); - - /* green */ - --color-green-1: var(--green-1); - --color-green-2: var(--green-2); - --color-green-3: var(--green-3); - --color-green-4: var(--green-4); - --color-green-5: var(--green-5); - --color-green-6: var(--green-6); - --color-green-7: var(--green-7); - --color-green-8: var(--green-8); - --color-green-9: var(--green-9); - --color-green-10: var(--green-10); - --color-green-11: var(--green-11); - --color-green-12: var(--green-12); - - /* amber */ - --color-amber-1: var(--amber-1); - --color-amber-2: var(--amber-2); - --color-amber-3: var(--amber-3); - --color-amber-4: var(--amber-4); - --color-amber-5: var(--amber-5); - --color-amber-6: var(--amber-6); - --color-amber-7: var(--amber-7); - --color-amber-8: var(--amber-8); - --color-amber-9: var(--amber-9); - --color-amber-10: var(--amber-10); - --color-amber-11: var(--amber-11); - --color-amber-12: var(--amber-12); - - /* sky */ - --color-sky-1: var(--sky-1); - --color-sky-2: var(--sky-2); - --color-sky-3: var(--sky-3); - --color-sky-4: var(--sky-4); - --color-sky-5: var(--sky-5); - --color-sky-6: var(--sky-6); - --color-sky-7: var(--sky-7); - --color-sky-8: var(--sky-8); - --color-sky-9: var(--sky-9); - --color-sky-10: var(--sky-10); - --color-sky-11: var(--sky-11); - --color-sky-12: var(--sky-12); -}