188 lines
6.4 KiB
JavaScript
188 lines
6.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "1rem",
|
|
screens: { "2xl": "1440px" },
|
|
},
|
|
extend: {
|
|
colors: {
|
|
border: "hsl(var(--border))",
|
|
"border-strong": "hsl(var(--border-strong))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
"background-subtle": "hsl(var(--background-subtle))",
|
|
surface: "hsl(var(--surface))",
|
|
"surface-raised": "hsl(var(--surface-raised))",
|
|
foreground: "hsl(var(--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))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
// Brand scale (indigo-cyan blend tuned for analytics products)
|
|
brand: {
|
|
50: "hsl(var(--brand-50))",
|
|
100: "hsl(var(--brand-100))",
|
|
200: "hsl(var(--brand-200))",
|
|
300: "hsl(var(--brand-300))",
|
|
400: "hsl(var(--brand-400))",
|
|
500: "hsl(var(--brand-500))",
|
|
600: "hsl(var(--brand-600))",
|
|
700: "hsl(var(--brand-700))",
|
|
800: "hsl(var(--brand-800))",
|
|
900: "hsl(var(--brand-900))",
|
|
950: "hsl(var(--brand-950))",
|
|
},
|
|
// Semantic states (each has bg/border/foreground)
|
|
success: {
|
|
DEFAULT: "hsl(var(--success))",
|
|
foreground: "hsl(var(--success-foreground))",
|
|
subtle: "hsl(var(--success-subtle))",
|
|
border: "hsl(var(--success-border))",
|
|
},
|
|
warning: {
|
|
DEFAULT: "hsl(var(--warning))",
|
|
foreground: "hsl(var(--warning-foreground))",
|
|
subtle: "hsl(var(--warning-subtle))",
|
|
border: "hsl(var(--warning-border))",
|
|
},
|
|
danger: {
|
|
DEFAULT: "hsl(var(--danger))",
|
|
foreground: "hsl(var(--danger-foreground))",
|
|
subtle: "hsl(var(--danger-subtle))",
|
|
border: "hsl(var(--danger-border))",
|
|
},
|
|
info: {
|
|
DEFAULT: "hsl(var(--info))",
|
|
foreground: "hsl(var(--info-foreground))",
|
|
subtle: "hsl(var(--info-subtle))",
|
|
border: "hsl(var(--info-border))",
|
|
},
|
|
// alias for legacy code paths
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--danger))",
|
|
foreground: "hsl(var(--danger-foreground))",
|
|
},
|
|
// Chart palette — qualitative, 12 hues
|
|
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))",
|
|
6: "hsl(var(--chart-6))",
|
|
7: "hsl(var(--chart-7))",
|
|
8: "hsl(var(--chart-8))",
|
|
9: "hsl(var(--chart-9))",
|
|
10: "hsl(var(--chart-10))",
|
|
11: "hsl(var(--chart-11))",
|
|
12: "hsl(var(--chart-12))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
xs: "calc(var(--radius) - 6px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
lg: "var(--radius)",
|
|
xl: "calc(var(--radius) + 4px)",
|
|
"2xl": "calc(var(--radius) + 8px)",
|
|
},
|
|
fontFamily: {
|
|
sans: ["var(--font-sans)"],
|
|
mono: ["var(--font-mono)"],
|
|
heading: ["var(--font-display)"],
|
|
},
|
|
fontSize: {
|
|
// Type ramp tuned for dense enterprise UI (line-height as second value)
|
|
"2xs": ["0.6875rem", { lineHeight: "1rem", letterSpacing: "0.01em" }],
|
|
xs: ["0.75rem", { lineHeight: "1.125rem" }],
|
|
sm: ["0.8125rem", { lineHeight: "1.25rem" }],
|
|
base: ["0.875rem", { lineHeight: "1.375rem" }],
|
|
md: ["0.9375rem", { lineHeight: "1.5rem" }],
|
|
lg: ["1rem", { lineHeight: "1.5rem" }],
|
|
xl: ["1.125rem", { lineHeight: "1.75rem" }],
|
|
"2xl": ["1.375rem", { lineHeight: "1.875rem", letterSpacing: "-0.01em" }],
|
|
"3xl": ["1.75rem", { lineHeight: "2.125rem", letterSpacing: "-0.015em" }],
|
|
"4xl": ["2.25rem", { lineHeight: "2.625rem", letterSpacing: "-0.02em" }],
|
|
display: ["3rem", { lineHeight: "3.25rem", letterSpacing: "-0.025em", fontWeight: "600" }],
|
|
},
|
|
spacing: {
|
|
// density-aware row heights
|
|
"row-compact": "32px",
|
|
"row-cozy": "40px",
|
|
"row-comfortable": "48px",
|
|
header: "56px",
|
|
"header-sm": "48px",
|
|
},
|
|
boxShadow: {
|
|
xs: "var(--shadow-xs)",
|
|
sm: "var(--shadow-sm)",
|
|
md: "var(--shadow-md)",
|
|
lg: "var(--shadow-lg)",
|
|
xl: "var(--shadow-xl)",
|
|
"2xl": "var(--shadow-2xl)",
|
|
"focus-ring": "0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring))",
|
|
"inner-border": "inset 0 0 0 1px hsl(var(--border))",
|
|
},
|
|
transitionTimingFunction: {
|
|
"out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"in-out-expo": "cubic-bezier(0.87, 0, 0.13, 1)",
|
|
},
|
|
transitionDuration: {
|
|
instant: "80ms",
|
|
fast: "120ms",
|
|
DEFAULT: "200ms",
|
|
slow: "320ms",
|
|
},
|
|
keyframes: {
|
|
"fade-in": {
|
|
from: { opacity: "0" },
|
|
to: { opacity: "1" },
|
|
},
|
|
"fade-in-up": {
|
|
from: { opacity: "0", transform: "translateY(4px)" },
|
|
to: { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"slide-in-right": {
|
|
from: { transform: "translateX(8px)", opacity: "0" },
|
|
to: { transform: "translateX(0)", opacity: "1" },
|
|
},
|
|
shimmer: {
|
|
"100%": { transform: "translateX(100%)" },
|
|
},
|
|
},
|
|
animation: {
|
|
"fade-in": "fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"fade-in-up": "fade-in-up 240ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"slide-in-right": "slide-in-right 200ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
shimmer: "shimmer 1.6s linear infinite",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|