From f440fd77511d75991bd43b8d0ca573c777a551e5 Mon Sep 17 00:00:00 2001 From: Vantz Stockwell Date: Thu, 11 Jun 2026 03:02:29 -0400 Subject: [PATCH] fix(redesign): load design tokens directly in style.css (whole panel rendered unstyled) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The nested ./styles/corrosion.css barrel (8 @import token files) was placed after `@import "tailwindcss"`. Once Tailwind v4 expands in place, those nested @imports no longer precede all statements, so PostCSS DROPPED them (the 8 'should be written before any other statement' warnings). Result: every design token (--surface-*, --accent, --text-*, --font-brand, --space-*) was empty and the entire re-skin rendered unstyled (white bg, no surfaces/accent) despite a green build. Fix: import the 8 token files directly + contiguous in style.css. Verified live via Playwright — tokens resolve (--accent #f26622, canvas #0a0b0e) and the login renders correctly. Co-Authored-By: Claude Opus 4.8 --- frontend/src/style.css | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/src/style.css b/frontend/src/style.css index 88d6d34..05bf4c5 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1,5 +1,19 @@ @import "tailwindcss"; -@import "./styles/corrosion.css"; + +/* Corrosion design tokens — load order matters: fonts → primitives → colors → + game themes → elevation → base (base references color/accent tokens). + Imported DIRECTLY here (not via a nested ./styles/corrosion.css barrel): a + nested @import barrel placed after `@import "tailwindcss"` gets its inner + @imports dropped, because once Tailwind v4 expands in place they no longer + precede all other statements. Keeping them flat + contiguous fixes that. */ +@import "./styles/tokens/fonts.css"; +@import "./styles/tokens/spacing.css"; +@import "./styles/tokens/typography.css"; +@import "./styles/tokens/motion.css"; +@import "./styles/tokens/colors.css"; +@import "./styles/tokens/game-themes.css"; +@import "./styles/tokens/elevation.css"; +@import "./styles/tokens/base.css"; /* Tailwind utility colors — Oxide ramp (existing views use bg-oxide-*). The full design-token system (neutral ramp, surfaces, per-game accents,