cesnimda
666b5ada4a
Slice 2: self-host Inter (variable) via @fontsource-variable/inter and add a living design-system reference at /app/design showing tokens, the green ramp, typography, and all primitives in both themes. Verified: frontend builds clean; prod npm audit clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
91 lines
3.0 KiB
JavaScript
91 lines
3.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: 'class',
|
|
content: ['./index.html', './src/**/*.{js,jsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// All colors reference CSS variables (defined in src/index.css) so the
|
|
// whole palette — including the accent — is swappable in one place and
|
|
// flips automatically between light and `.dark`.
|
|
background: 'hsl(var(--background) / <alpha-value>)',
|
|
foreground: 'hsl(var(--foreground) / <alpha-value>)',
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
|
|
foreground: 'hsl(var(--foreground) / <alpha-value>)',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
|
|
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
|
|
},
|
|
border: 'hsl(var(--border) / <alpha-value>)',
|
|
input: 'hsl(var(--input) / <alpha-value>)',
|
|
ring: 'hsl(var(--ring) / <alpha-value>)',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
|
|
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
|
|
},
|
|
success: 'hsl(var(--success) / <alpha-value>)',
|
|
warning: 'hsl(var(--warning) / <alpha-value>)',
|
|
danger: {
|
|
DEFAULT: 'hsl(var(--danger) / <alpha-value>)',
|
|
foreground: 'hsl(var(--danger-foreground) / <alpha-value>)',
|
|
},
|
|
// Static brand ramp (from #3ba31f) for utility use (bg-green-500, etc.).
|
|
// The theme-aware accent above (`primary`) is what most UI should use.
|
|
green: {
|
|
50: '#f1f9ec',
|
|
100: '#dcf0d0',
|
|
200: '#bde3ab',
|
|
300: '#93d07d',
|
|
400: '#63b84a',
|
|
500: '#3ba31f',
|
|
600: '#2f8419',
|
|
700: '#266a15',
|
|
800: '#1e5312',
|
|
900: '#163a0e',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter Variable',
|
|
'Inter',
|
|
'ui-sans-serif',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'sans-serif',
|
|
],
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
boxShadow: {
|
|
sm: '0 1px 2px 0 hsl(var(--foreground) / 0.05)',
|
|
DEFAULT: '0 1px 3px 0 hsl(var(--foreground) / 0.08), 0 1px 2px -1px hsl(var(--foreground) / 0.06)',
|
|
md: '0 4px 12px -2px hsl(var(--foreground) / 0.10)',
|
|
},
|
|
keyframes: {
|
|
'fade-in': { from: { opacity: 0 }, to: { opacity: 1 } },
|
|
'slide-up': {
|
|
from: { opacity: 0, transform: 'translateY(6px)' },
|
|
to: { opacity: 1, transform: 'translateY(0)' },
|
|
},
|
|
'slide-in-right': {
|
|
from: { transform: 'translateX(100%)' },
|
|
to: { transform: 'translateX(0)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-in': 'fade-in 150ms ease-out',
|
|
'slide-up': 'slide-up 180ms ease-out',
|
|
'slide-in-right': 'slide-in-right 220ms ease-out',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|