f440fd7751
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
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>
51 lines
1.9 KiB
CSS
51 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* 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,
|
|
typography, spacing, elevation, motion) lives in ./styles/ and is the
|
|
source of truth for the redesign. */
|
|
@theme {
|
|
--color-oxide-50: #FEF3EB;
|
|
--color-oxide-100: #FDE3D0;
|
|
--color-oxide-200: #FBC4A1;
|
|
--color-oxide-300: #F9A472;
|
|
--color-oxide-400: #F58543;
|
|
--color-oxide-500: #F26622;
|
|
--color-oxide-600: #D9541A;
|
|
--color-oxide-700: #B84315;
|
|
--color-oxide-800: #933510;
|
|
--color-oxide-900: #6E280C;
|
|
--color-oxide-950: #3D1506;
|
|
}
|
|
|
|
/* Legacy brand vars — retained during the redesign port so any view still
|
|
referencing them keeps working; superseded by the ./styles tokens. */
|
|
:root {
|
|
--corrosion-accent: #F26622;
|
|
--corrosion-dark: #000000;
|
|
--corrosion-charcoal: #1E2024;
|
|
--corrosion-surface: #1a1a1a;
|
|
--corrosion-border: #2a2a2a;
|
|
}
|
|
|
|
/* Body background / text / font now come from the design system
|
|
(./styles/tokens/base.css → var(--surface-canvas), var(--text-primary)). */
|
|
#app {
|
|
min-height: 100vh;
|
|
}
|