mirror of
https://github.com/Dvorinka/Bookra.git
synced 2026-06-03 20:13:00 +00:00
Tomas Dvorak
104 lines
3.7 KiB
JavaScript
104 lines
3.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Semantic color tokens
|
|
canvas: {
|
|
DEFAULT: "hsl(var(--canvas))",
|
|
subtle: "hsl(var(--canvas-subtle))",
|
|
muted: "hsl(var(--canvas-muted))",
|
|
},
|
|
ink: {
|
|
DEFAULT: "hsl(var(--ink))",
|
|
muted: "hsl(var(--ink-muted))",
|
|
subtle: "hsl(var(--ink-subtle))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
hover: "hsl(var(--accent-hover))",
|
|
subtle: "hsl(var(--accent-subtle))",
|
|
},
|
|
border: {
|
|
DEFAULT: "hsl(var(--border))",
|
|
subtle: "hsl(var(--border-subtle))",
|
|
},
|
|
// Legacy compatibility
|
|
mist: "hsl(var(--canvas-muted))",
|
|
ember: "hsl(var(--accent))",
|
|
pine: "hsl(var(--accent-hover))",
|
|
slate: "hsl(var(--ink-muted))",
|
|
},
|
|
boxShadow: {
|
|
card: "0 1px 3px 0 rgb(0 0 0 / 0.05), 0 10px 40px -10px rgb(0 0 0 / 0.1)",
|
|
"card-hover": "0 1px 3px 0 rgb(0 0 0 / 0.05), 0 20px 60px -15px rgb(0 0 0 / 0.15)",
|
|
subtle: "0 1px 2px 0 rgb(0 0 0 / 0.03)",
|
|
},
|
|
borderRadius: {
|
|
panel: "1.25rem",
|
|
card: "1rem",
|
|
button: "0.75rem",
|
|
},
|
|
fontFamily: {
|
|
sans: ["'Newsreader'", "Georgia", "ui-serif", "serif"],
|
|
display: ["'Space Grotesk'", "ui-sans-serif", "system-ui", "sans-serif"],
|
|
dashboard: ["'DM Sans'", "ui-sans-serif", "system-ui", "sans-serif"],
|
|
mono: ["'JetBrains Mono'", "ui-monospace", "monospace"],
|
|
},
|
|
fontSize: {
|
|
"display-xl": ["clamp(2.75rem, 6vw + 1rem, 5rem)", { lineHeight: "1.05", letterSpacing: "-0.04em", fontFamily: "'Space Grotesk', sans-serif" }],
|
|
"display-lg": ["clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem)", { lineHeight: "1.1", letterSpacing: "-0.03em", fontFamily: "'Space Grotesk', sans-serif" }],
|
|
"display-md": ["clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem)", { lineHeight: "1.15", letterSpacing: "-0.02em", fontFamily: "'Space Grotesk', sans-serif" }],
|
|
"display-sm": ["clamp(1.5rem, 2.5vw + 0.5rem, 2rem)", { lineHeight: "1.2", letterSpacing: "-0.01em", fontFamily: "'Space Grotesk', sans-serif" }],
|
|
},
|
|
spacing: {
|
|
"18": "4.5rem",
|
|
"22": "5.5rem",
|
|
"26": "6.5rem",
|
|
"30": "7.5rem",
|
|
"34": "8.5rem",
|
|
"38": "9.5rem",
|
|
"128": "32rem",
|
|
},
|
|
animation: {
|
|
"fade-in": "fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
"slide-up": "slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"slide-down": "slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"scale-in": "scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"float": "float 6s ease-in-out infinite",
|
|
"pulse-soft": "pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
},
|
|
keyframes: {
|
|
"fade-in": {
|
|
"0%": { opacity: "0" },
|
|
"100%": { opacity: "1" },
|
|
},
|
|
"slide-up": {
|
|
"0%": { opacity: "0", transform: "translateY(24px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"slide-down": {
|
|
"0%": { opacity: "0", transform: "translateY(-12px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"scale-in": {
|
|
"0%": { opacity: "0", transform: "scale(0.95)" },
|
|
"100%": { opacity: "1", transform: "scale(1)" },
|
|
},
|
|
float: {
|
|
"0%, 100%": { transform: "translateY(0)" },
|
|
"50%": { transform: "translateY(-8px)" },
|
|
},
|
|
"pulse-soft": {
|
|
"0%, 100%": { opacity: "1" },
|
|
"50%": { opacity: "0.7" },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|