150 lines
4.5 KiB
TypeScript
150 lines
4.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
darkMode: ["class"],
|
|
content: [
|
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
display: ["var(--font-display)", "Georgia", "serif"],
|
|
sans: ["var(--font-inter)", "system-ui", "sans-serif"],
|
|
mono: ["'JetBrains Mono'", "'Fira Code'", "monospace"],
|
|
},
|
|
colors: {
|
|
// Design System: Warm Neutral palette + single accent green
|
|
warm: {
|
|
50: "#faf8f5",
|
|
100: "#f4f0e8",
|
|
200: "#e8e0d0",
|
|
300: "#d4c8b0",
|
|
400: "#b8a88a",
|
|
500: "#9a8870",
|
|
600: "#7c6a54",
|
|
700: "#5e4e3c",
|
|
800: "#3e3228",
|
|
900: "#1e1810",
|
|
950: "#0e0c08",
|
|
},
|
|
// Single accent: editorial green
|
|
accent: {
|
|
DEFAULT: "oklch(52% 0.11 155)",
|
|
light: "oklch(72% 0.10 155)",
|
|
dark: "oklch(38% 0.10 155)",
|
|
muted: "oklch(92% 0.04 155)",
|
|
"muted-dark": "oklch(22% 0.06 155)",
|
|
},
|
|
// Semantic aliases → CSS vars
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
primary: {
|
|
DEFAULT: "hsl(var(--primary))",
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(var(--secondary))",
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
chart: {
|
|
"1": "hsl(var(--chart-1))",
|
|
"2": "hsl(var(--chart-2))",
|
|
"3": "hsl(var(--chart-3))",
|
|
"4": "hsl(var(--chart-4))",
|
|
"5": "hsl(var(--chart-5))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
spacing: {
|
|
"18": "4.5rem",
|
|
"22": "5.5rem",
|
|
"30": "7.5rem",
|
|
"section": "7rem",
|
|
},
|
|
maxWidth: {
|
|
"prose-wide": "75ch",
|
|
"editorial": "1120px",
|
|
},
|
|
fontSize: {
|
|
// Fluid editorial scale
|
|
"display-xl": ["clamp(3rem, 8vw, 7rem)", { lineHeight: "0.88", letterSpacing: "-0.03em" }],
|
|
"display-lg": ["clamp(2.25rem, 5vw, 4.5rem)", { lineHeight: "0.92", letterSpacing: "-0.025em" }],
|
|
"display-md": ["clamp(1.75rem, 3.5vw, 3rem)", { lineHeight: "1", letterSpacing: "-0.02em" }],
|
|
"display-sm": ["clamp(1.375rem, 2.5vw, 2rem)", { lineHeight: "1.1", letterSpacing: "-0.015em" }],
|
|
"label": ["0.6875rem", { lineHeight: "1", letterSpacing: "0.12em" }],
|
|
"label-lg": ["0.75rem", { lineHeight: "1", letterSpacing: "0.1em" }],
|
|
},
|
|
keyframes: {
|
|
"accordion-down": {
|
|
from: { height: "0" },
|
|
to: { height: "var(--radix-accordion-content-height)" },
|
|
},
|
|
"accordion-up": {
|
|
from: { height: "var(--radix-accordion-content-height)" },
|
|
to: { height: "0" },
|
|
},
|
|
"fade-up": {
|
|
from: { opacity: "0", transform: "translateY(1.5rem)" },
|
|
to: { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"fade-in": {
|
|
from: { opacity: "0" },
|
|
to: { opacity: "1" },
|
|
},
|
|
"stagger-in": {
|
|
from: { opacity: "0", transform: "translateY(0.75rem)" },
|
|
to: { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"line-grow": {
|
|
from: { transform: "scaleX(0)", transformOrigin: "left" },
|
|
to: { transform: "scaleX(1)", transformOrigin: "left" },
|
|
},
|
|
"score-reveal": {
|
|
from: { transform: "scale(0.6)", opacity: "0" },
|
|
to: { transform: "scale(1)", opacity: "1" },
|
|
},
|
|
},
|
|
animation: {
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
"fade-up": "fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards",
|
|
"fade-in": "fade-in 0.5s ease forwards",
|
|
"stagger-in": "stagger-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards",
|
|
"line-grow": "line-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards",
|
|
"score-reveal": "score-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards",
|
|
},
|
|
transitionTimingFunction: {
|
|
"editorial": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
};
|
|
|
|
export default config;
|