2026-07-17 23:20:34 +02:00
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
|
|
|
export default {
|
|
|
|
|
darkMode: "class",
|
|
|
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
|
|
|
theme: {
|
|
|
|
|
extend: {
|
2026-07-22 21:49:48 +02:00
|
|
|
fontFamily: {
|
|
|
|
|
sans: ['"Lato"', "system-ui", "-apple-system", '"Segoe UI"', "Roboto", "sans-serif"],
|
|
|
|
|
},
|
|
|
|
|
// Every named text size bumped +2px over Tailwind's defaults (line-heights too).
|
|
|
|
|
fontSize: {
|
|
|
|
|
xs: ["14px", "18px"],
|
|
|
|
|
sm: ["16px", "22px"],
|
|
|
|
|
base: ["18px", "26px"],
|
|
|
|
|
lg: ["20px", "30px"],
|
|
|
|
|
xl: ["22px", "30px"],
|
|
|
|
|
"2xl": ["26px", "34px"],
|
|
|
|
|
"3xl": ["32px", "38px"],
|
|
|
|
|
"4xl": ["38px", "42px"],
|
|
|
|
|
},
|
2026-07-17 23:20:34 +02:00
|
|
|
// Semantic tokens backed by CSS variables (see index.css). Using these
|
|
|
|
|
// instead of raw grays lets every surface switch with the theme.
|
|
|
|
|
// Make every `border`/`divide` utility theme-aware by default, so a bare
|
|
|
|
|
// `border` never falls back to Tailwind's light gray-200 in dark mode.
|
|
|
|
|
borderColor: {
|
|
|
|
|
DEFAULT: "rgb(var(--app-border) / <alpha-value>)",
|
|
|
|
|
},
|
|
|
|
|
divideColor: {
|
|
|
|
|
DEFAULT: "rgb(var(--app-border) / <alpha-value>)",
|
|
|
|
|
},
|
|
|
|
|
colors: {
|
|
|
|
|
app: {
|
|
|
|
|
bg: "rgb(var(--app-bg) / <alpha-value>)",
|
|
|
|
|
surface: "rgb(var(--app-surface) / <alpha-value>)",
|
|
|
|
|
elevated: "rgb(var(--app-elevated) / <alpha-value>)",
|
|
|
|
|
border: "rgb(var(--app-border) / <alpha-value>)",
|
|
|
|
|
fg: "rgb(var(--app-fg) / <alpha-value>)",
|
|
|
|
|
muted: "rgb(var(--app-muted) / <alpha-value>)",
|
|
|
|
|
faint: "rgb(var(--app-faint) / <alpha-value>)",
|
|
|
|
|
accent: "rgb(var(--app-accent) / <alpha-value>)",
|
|
|
|
|
"accent-fg": "rgb(var(--app-accent-fg) / <alpha-value>)",
|
|
|
|
|
hover: "rgb(var(--app-hover) / <alpha-value>)",
|
|
|
|
|
active: "rgb(var(--app-active) / <alpha-value>)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
plugins: [],
|
|
|
|
|
};
|
