Hartmut
98a6dbee87
CSS-layer-only changes for zero-regression visual modernization: - Typography: Inter font with OpenType features (cv02-cv04, cv11), tighter letter-spacing - Dark theme: neutral zinc tones (#09090b/#18181b) replacing blue-slate (#0f172a/#1e293b) - Borders: rgba-based for subtlety instead of solid hex colors - Cards: rounded-xl, refined shadows with dark mode variant - Buttons: rounded-lg, subtle lift on hover, smoother transitions (150ms ease-out) - Badges: rounded-md (softer than full-round), tracking-wide - Inputs: rounded-lg, ring-offset-0 for tighter focus rings - Scrollbars: thin 6px custom scrollbars matching theme - Selection: accent-colored text selection - Table headers: uppercase tracking-wider for modern data table look - Utility: fadeIn animation, subtle-pulse for loading states No component files changed — all styling propagates via CSS variables and Tailwind config. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
// Semantic surface tokens
|
|
surface: {
|
|
DEFAULT: 'var(--color-bg-surface)',
|
|
alt: 'var(--color-bg-app)',
|
|
hover: 'var(--color-bg-surface-hover)',
|
|
muted: 'var(--color-bg-muted)',
|
|
},
|
|
// Semantic text tokens
|
|
content: {
|
|
DEFAULT: 'var(--color-text)',
|
|
secondary: 'var(--color-text-secondary)',
|
|
muted: 'var(--color-text-muted)',
|
|
inverse: 'var(--color-text-inverse)',
|
|
},
|
|
// Border tokens
|
|
'border-default': 'var(--color-border)',
|
|
'border-light': 'var(--color-border-light)',
|
|
// Accent tokens
|
|
accent: {
|
|
DEFAULT: 'var(--color-accent)',
|
|
hover: 'var(--color-accent-hover)',
|
|
light: 'var(--color-accent-light)',
|
|
text: 'var(--color-accent-text)',
|
|
},
|
|
// Status tokens
|
|
'status-success': {
|
|
bg: 'var(--color-status-success-bg)',
|
|
text: 'var(--color-status-success-text)',
|
|
},
|
|
'status-warning': {
|
|
bg: 'var(--color-status-warning-bg)',
|
|
text: 'var(--color-status-warning-text)',
|
|
},
|
|
'status-error': {
|
|
bg: 'var(--color-status-error-bg)',
|
|
text: 'var(--color-status-error-text)',
|
|
},
|
|
'status-info': {
|
|
bg: 'var(--color-status-info-bg)',
|
|
text: 'var(--color-status-info-text)',
|
|
},
|
|
},
|
|
borderColor: {
|
|
DEFAULT: 'var(--color-border)',
|
|
},
|
|
ringColor: {
|
|
accent: 'var(--color-accent)',
|
|
},
|
|
boxShadow: {
|
|
'card': '0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03)',
|
|
'card-hover': '0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)',
|
|
'elevated': '0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06)',
|
|
},
|
|
borderRadius: {
|
|
'xl': '0.875rem',
|
|
'2xl': '1rem',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|