Logan CusanoandClaude Opus 5.5
d18bb612df
- Token colors wrapped in color-mix so opacity modifiers (bg-surface/90 etc.) generate rules; map overlay panels were rendering see-through. - Light mode: keep white text on saturated fills (primary/danger buttons were remapped to navy); map text-gray-200, bg-gray-800/60, border-gray-600. - Dark mode: lift text-gray-600/700 to gray-500 for contrast. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const tok = (name: string) =>
|
|
`color-mix(in srgb, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
|
|
|
|
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.
|
|
// Wrapped in color-mix so opacity modifiers (bg-surface/90, bg-accent/15)
|
|
// work — a bare var() hex gives Tailwind nothing to apply alpha to, and the
|
|
// class silently generates no rule (map overlays rendered see-through).
|
|
colors: {
|
|
page: tok("page"),
|
|
surface: tok("surface"),
|
|
raised: tok("raised"),
|
|
line: tok("line"),
|
|
"line-strong": tok("line-strong"),
|
|
ink: {
|
|
DEFAULT: tok("ink"),
|
|
2: tok("ink-2"),
|
|
muted: tok("ink-muted"),
|
|
},
|
|
accent: tok("accent"),
|
|
"sev-moderate": tok("sev-moderate"),
|
|
"sev-major": tok("sev-major"),
|
|
"map-bg": tok("map-bg"),
|
|
"map-block": tok("map-block"),
|
|
"map-road": tok("map-road"),
|
|
"map-water": tok("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;
|