36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
 
|
/** @type {import('tailwindcss').Config} */
|
||
|
|
export default {
|
||
|
|
darkMode: "class",
|
||
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
// 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: [],
|
||
|
|
};
|