/** * Design tokens — verbatim from the React app. * * Source files (all read-only refs): * reference-nextj-src/the_directory/frontend/tailwind.config.ts * reference-nextj-src/the_directory/frontend/src/theme/theme.ts * reference-nextj-src/the_directory/frontend/src/app/globals.css * reference-nextj-src/the_directory/frontend/src/app/layout.tsx (where --font-serif is set inline on ) * * These values supersede any earlier --tdn-* / --feed-* tokens. Every other * stylesheet should resolve through this file. If a value here is wrong, * everything downstream is wrong — fix it here, not in the consumer. */ :root { /* ---------- MUI palette (theme.ts) ---------- */ --mui-primary: #002855; /* palette.primary.main — used by buttons, links, headings */ --mui-facts: #a42a38; /* palette.facts.main — "The Record" red */ --mui-facts-contrast: #ffffff; /* palette.facts.contrastText */ --mui-opinions: #002855; /* palette.opinions.main — "Analysis" navy (same as primary) */ --mui-opinions-contrast: #ffffff; --mui-bg-default: #ffffff; /* palette.background.default */ --mui-bg-paper: #f5f5f5; /* palette.background.paper */ --mui-text-primary: #000000; /* palette.text.primary */ --mui-text-secondary: #6c757d; /* palette.text.secondary */ /* ---------- Tailwind extras (tailwind.config.ts) ---------- */ --tw-text-primary: #000000; --tw-text-secondary: #6c757d; --tw-facts: #a42a38; --tw-opinions: #002855; --tw-bg-default: #ffffff; --tw-bg-paper: #f5f5f5; /* ---------- Convenience aliases used throughout our WP code ---------- * Keep these stable; if a card/page references one of these, it'll * auto-pick up any future React-side change. */ --color-navy: #002855; --color-red: #a42a38; --color-text-primary: #000000; --color-text-secondary: #6c757d; --color-bg: #ffffff; --color-paper: #f5f5f5; --color-divider: rgba(0, 0, 0, 0.12); /* MUI default divider */ --color-grey-50: #fafafa; --color-grey-100: #f5f5f5; --color-grey-300: #e0e0e0; --color-grey-500: #9e9e9e; --color-grey-700: #616161; /* ---------- Section/tab colors (from Header.tsx — to be verified by reading it next) ---------- */ --section-frontpage: #4b5563; --section-politics: #a42a38; --section-crime: #002855; --section-sports: #0f766e; --section-culture: #e65100; --section-financial: #16a34a; --section-weather: #0284c7; /* ---------- Typography (layout.tsx + globals.css) ---------- */ --font-sans: 'Open Sans', sans-serif; --font-serif: "Times New Roman", Times, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* MUI typography weights */ --font-weight-h1: 700; --font-weight-h2: 700; --font-weight-h3: 600; --font-weight-h4: 600; --font-weight-h5: 600; --font-weight-h6: 600; /* ---------- MUI spacing scale (theme.spacing default = 8px) ---------- * MUI's `sx={{ mb: 2 }}` resolves to 16px. We expose the scale so * porters can translate `mb: 2` → `margin-bottom: var(--mui-2)`. */ --mui-0_5: 4px; --mui-1: 8px; --mui-1_5: 12px; --mui-2: 16px; --mui-2_5: 20px; --mui-3: 24px; --mui-4: 32px; --mui-5: 40px; --mui-6: 48px; --mui-8: 64px; /* ---------- MUI elevation shadows ---------- * Defaults from MUI v5 createTheme shadows[]. We bake the common ones * we'll need; if a component uses `boxShadow: 4` etc., resolve via these. */ --shadow-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12); --shadow-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12); --shadow-3: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12); --shadow-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12); --shadow-5: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); --shadow-6: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12); --shadow-8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12); /* ---------- Card defaults (BaseCard.tsx — to be verified after reading) ---------- */ --radius-card: 4px; /* MUI default outlined-card radius */ --card-padding: 16px; /* CardContent default p:2 */ --card-gap-vertical: 16px; /* margin-bottom: 2 between stacked cards */ --transition-card: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; --card-hover-lift: translateY(-4px); /* ---------- Marquee animation (tailwind.config.ts) ---------- */ --marquee-duration: 25s; --marquee-easing: linear; /* ---------- Legacy compatibility (so existing CSS keeps working until ported) ---------- * These aliases let our pre-Phase-3 stylesheets keep resolving variables * during the port. Remove them once every consumer uses --color-* / --mui-*. */ --tdn-navy: var(--color-navy); --tdn-red: var(--color-red); --tdn-facts: var(--color-red); --tdn-opinions:var(--color-navy); --tdn-ink: var(--color-text-primary); --tdn-muted: var(--color-text-secondary); --tdn-paper: var(--color-paper); --tdn-line: var(--color-grey-300); --tdn-sans: var(--font-sans); --tdn-serif: var(--font-serif); --tdn-mono: var(--font-mono); --feed-navy: var(--color-navy); --feed-red: var(--color-red); --feed-line: var(--color-grey-300); --feed-bg: var(--color-paper); }