vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

fix(redesign): load design tokens directly in style.css (whole panel rendered unstyled)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Details

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-06-11 03:02:29 -04:00
parent 29615cb4f3
commit f440fd7751
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/style.css
View File

@@ -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,