Miguel Palhas
46bae13212
Wires tailwind.config.ts to every custom-property token in styles.css (spacing, OKLCH colours, radii, z-index, sizing, durations) so Tailwind utilities resolve to the same variables the vanilla CSS uses. Adds ThemeContext/useTheme as a React port of theme.ts, keeping the same localStorage keys and data-theme/data-palette attributes so it can run alongside the vanilla shell.
106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
// Bridges Tailwind utilities to the OKLCH custom-property tokens defined in
|
|
// src/styles.css. Every value here is `var(--token)`, never a literal, so
|
|
// theme/palette switching (data-theme, data-palette on <html>) keeps working
|
|
// through Tailwind classes exactly as it does through the vanilla CSS.
|
|
export default {
|
|
content: ["src/**/*.{ts,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: "var(--bg)",
|
|
"bg-grid": "var(--bg-grid)",
|
|
surface: "var(--surface)",
|
|
"surface-2": "var(--surface-2)",
|
|
"surface-3": "var(--surface-3)",
|
|
border: "var(--border)",
|
|
"border-strong": "var(--border-strong)",
|
|
|
|
ink: "var(--ink)",
|
|
muted: "var(--muted)",
|
|
faint: "var(--faint)",
|
|
|
|
accent: "var(--accent)",
|
|
"accent-strong": "var(--accent-strong)",
|
|
"accent-ink": "var(--accent-ink)",
|
|
"accent-tint": "var(--accent-tint)",
|
|
"accent-ring": "var(--accent-ring)",
|
|
"accent-fill": "var(--accent-fill)",
|
|
|
|
preview: "var(--preview)",
|
|
"preview-ink": "var(--preview-ink)",
|
|
"preview-tint": "var(--preview-tint)",
|
|
"preview-ring": "var(--preview-ring)",
|
|
|
|
live: "var(--live)",
|
|
"live-glow": "var(--live-glow)",
|
|
danger: "var(--danger)",
|
|
"danger-tint": "var(--danger-tint)",
|
|
warn: "var(--warn)",
|
|
|
|
"term-bg": "var(--term-bg)",
|
|
},
|
|
spacing: {
|
|
"sp-1": "var(--sp-1)",
|
|
"sp-2": "var(--sp-2)",
|
|
"sp-3": "var(--sp-3)",
|
|
"sp-4": "var(--sp-4)",
|
|
"sp-5": "var(--sp-5)",
|
|
"sp-6": "var(--sp-6)",
|
|
"sp-8": "var(--sp-8)",
|
|
},
|
|
borderRadius: {
|
|
"r-1": "var(--r-1)",
|
|
"r-2": "var(--r-2)",
|
|
"r-3": "var(--r-3)",
|
|
"r-pill": "var(--r-pill)",
|
|
},
|
|
fontSize: {
|
|
"fs-11": "var(--fs-11)",
|
|
"fs-12": "var(--fs-12)",
|
|
"fs-13": "var(--fs-13)",
|
|
"fs-14": "var(--fs-14)",
|
|
"fs-15": "var(--fs-15)",
|
|
"fs-17": "var(--fs-17)",
|
|
"fs-20": "var(--fs-20)",
|
|
},
|
|
fontFamily: {
|
|
mono: "var(--font-mono)",
|
|
sans: "var(--font-sans)",
|
|
},
|
|
height: {
|
|
"row-h": "var(--row-h)",
|
|
"control-h": "var(--control-h)",
|
|
tap: "var(--tap)",
|
|
"bar-h": "var(--bar-h)",
|
|
},
|
|
width: {
|
|
tap: "var(--tap)",
|
|
},
|
|
minHeight: {
|
|
"control-h": "var(--control-h)",
|
|
tap: "var(--tap)",
|
|
},
|
|
zIndex: {
|
|
sticky: "var(--z-sticky)",
|
|
backdrop: "var(--z-backdrop)",
|
|
modal: "var(--z-modal)",
|
|
toast: "var(--z-toast)",
|
|
},
|
|
transitionDuration: {
|
|
fast: "var(--dur-fast)",
|
|
DEFAULT: "var(--dur)",
|
|
slow: "var(--dur-slow)",
|
|
},
|
|
transitionTimingFunction: {
|
|
out: "var(--ease-out)",
|
|
},
|
|
boxShadow: {
|
|
1: "var(--shadow-1)",
|
|
2: "var(--shadow-2)",
|
|
},
|
|
},
|
|
},
|
|
} satisfies Config;
|