Logan Cusano
c6bc712b54
Replace hardcoded dark-palette Tailwind classes with semantic CSS custom properties (page/surface/raised/line/ink/accent/sev-moderate/sev-major/ map-*) defined on :root (light) and .dark (dark), wired through tailwind.config.ts theme.extend.colors. Add IBM Plex Sans/Mono via next/font/google: sans for everything a person reads, mono reserved for machine identifiers only. Drop font-mono from body and Button's base classes. Existing !important light-mode overrides kept temporarily so nothing goes unreadable mid-migration (removed in chunk 4). Per UI_REDESIGN.md chunk 1.
64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
content: [
|
|
"./app/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
],
|
|
darkMode: ["class"],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
mono: ["var(--font-mono)", "ui-monospace", "Cascadia Code", "Source Code Pro", "monospace"],
|
|
sans: ["var(--font-sans)", "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
|
|
},
|
|
// Semantic tokens — defined as CSS custom properties in app/globals.css on
|
|
// :root (light) and .dark (dark). Components must use these names, never a
|
|
// raw gray-9xx, so a theme is one variable block rather than an override sheet.
|
|
colors: {
|
|
page: "var(--page)",
|
|
surface: "var(--surface)",
|
|
raised: "var(--raised)",
|
|
line: "var(--line)",
|
|
"line-strong": "var(--line-strong)",
|
|
ink: {
|
|
DEFAULT: "var(--ink)",
|
|
2: "var(--ink-2)",
|
|
muted: "var(--ink-muted)",
|
|
},
|
|
accent: "var(--accent)",
|
|
"sev-moderate": "var(--sev-moderate)",
|
|
"sev-major": "var(--sev-major)",
|
|
"map-bg": "var(--map-bg)",
|
|
"map-block": "var(--map-block)",
|
|
"map-road": "var(--map-road)",
|
|
"map-water": "var(--map-water)",
|
|
},
|
|
// Marketing/product type scale — used by the (marketing) surface and
|
|
// settings shell so headings read as a deliberate hierarchy rather than
|
|
// ad-hoc text-xl/text-2xl bumps.
|
|
fontSize: {
|
|
"display-lg": ["3.5rem", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "700" }],
|
|
"display": ["2.75rem", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
|
|
"display-sm": ["2.125rem", { lineHeight: "1.15", letterSpacing: "-0.01em", fontWeight: "700" }],
|
|
},
|
|
boxShadow: {
|
|
card: "0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 0 rgb(0 0 0 / 0.3)",
|
|
"card-hover": "0 4px 12px 0 rgb(0 0 0 / 0.45), 0 2px 4px 0 rgb(0 0 0 / 0.3)",
|
|
glow: "0 0 0 1px rgb(99 102 241 / 0.4), 0 0 24px 0 rgb(99 102 241 / 0.25)",
|
|
},
|
|
animation: {
|
|
"fade-in": "fade-in 0.4s ease-out",
|
|
"slide-up": "slide-up 0.4s ease-out",
|
|
},
|
|
keyframes: {
|
|
"fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
|
|
"slide-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config;
|