Files
Inboxintel/frontend/tailwind.config.js
T
cesnimda e482d60b69
CI / backend (push) Successful in 53s
CI / frontend (push) Successful in 15s
Deploy Staging / deploy (push) Successful in 24s
Security / secrets (push) Successful in 4s
Security / dependencies (push) Successful in 1m22s
CI / backend (pull_request) Successful in 1m1s
CI / frontend (pull_request) Successful in 18s
Security / secrets (pull_request) Successful in 4s
Security / dependencies (pull_request) Successful in 1m6s
feat(ui): design-system v2 tokens (#9)
2026-07-01 20:01:43 +02:00

90 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',
'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: [],
};