Daniel Bedeleanu
dab40c0653
Resolved critical design system inconsistencies by: 1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors) - Primary: #ffb781 (from #F58618) - Secondary: #c8c6c5 (from #888888) - Tertiary: #00e639 (newly added) - All surface variants, on-color pairs, error colors - Added spacing tokens (unit, gutter, margin, stack-sm/md) 2. **globals.css**: Implemented full CSS variable system - 50+ CSS variables for complete design palette - Updated typography layer with proper letter-spacing per spec - Semantic color classes (headline-lg, body-md, label-md, mono-data) - Fixed scrollbar colors to use design tokens - Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.) 3. **All component files**: Eliminated hardcoded Tailwind colors - Replaced bg-slate-* with design system equivalents - Replaced bg-gray-* with semantic colors - Replaced focus:ring-blue-500 with focus:ring-primary - Replaced text-gray-* with text-secondary/text-muted - Replaced all inline hex colors with Tailwind classes Files updated: 32 components + core config files Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
140 lines
3.5 KiB
TypeScript
140 lines
3.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
content: [
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./lib/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
theme: {
|
|
fontSize: {
|
|
'xs': '12px',
|
|
'sm': '14px', // Design: label-md, mono-data
|
|
'base': '16px', // Design: body-md
|
|
'lg': '18px', // Design: body-lg
|
|
'xl': '20px',
|
|
'2xl': '24px', // Design: headline-sm
|
|
'3xl': '30px',
|
|
'4xl': '32px', // Design: headline-md
|
|
'5xl': '48px', // Design: headline-lg
|
|
'6xl': '64px',
|
|
},
|
|
spacing: {
|
|
px: "1px",
|
|
0: "0",
|
|
1: "4px", // unit
|
|
2: "8px", // stack-sm
|
|
3: "12px",
|
|
4: "16px", // stack-md, gutter
|
|
6: "24px", // container-gap
|
|
8: "32px", // margin
|
|
12: "48px",
|
|
16: "64px",
|
|
20: "80px",
|
|
24: "96px",
|
|
32: "128px",
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["'Space Grotesk'", "sans-serif"],
|
|
},
|
|
colors: {
|
|
// Base colors from DESIGN.md
|
|
background: "#131313",
|
|
"on-background": "#e5e2e1",
|
|
foreground: "#e5e2e1",
|
|
|
|
// Surface tones from DESIGN.md
|
|
surface: {
|
|
DEFAULT: "#131313",
|
|
dim: "#131313",
|
|
bright: "#3a3939",
|
|
"container-lowest": "#0e0e0e",
|
|
"container-low": "#1c1b1b",
|
|
container: "#201f1f",
|
|
"container-high": "#2a2a2a",
|
|
"container-highest": "#353534",
|
|
variant: "#353534",
|
|
},
|
|
|
|
// Primary colors from DESIGN.md
|
|
primary: {
|
|
DEFAULT: "#ffb781",
|
|
foreground: "#4e2600",
|
|
container: "#f58618",
|
|
"on-container": "#5b2d00",
|
|
fixed: "#ffdcc4",
|
|
"fixed-dim": "#ffb781",
|
|
"on-fixed": "#2f1400",
|
|
"on-fixed-variant": "#6f3800",
|
|
inverse: "#924c00",
|
|
},
|
|
|
|
// Secondary colors from DESIGN.md
|
|
secondary: {
|
|
DEFAULT: "#c8c6c5",
|
|
foreground: "#303030",
|
|
container: "#474746",
|
|
"on-container": "#b7b5b4",
|
|
fixed: "#e5e2e1",
|
|
"fixed-dim": "#c8c6c5",
|
|
"on-fixed": "#1b1c1c",
|
|
"on-fixed-variant": "#474746",
|
|
},
|
|
|
|
// Tertiary colors from DESIGN.md
|
|
tertiary: {
|
|
DEFAULT: "#00e639",
|
|
foreground: "#003907",
|
|
container: "#00bd2d",
|
|
"on-container": "#00440a",
|
|
fixed: "#72ff70",
|
|
"fixed-dim": "#00e639",
|
|
"on-fixed": "#002203",
|
|
"on-fixed-variant": "#00530e",
|
|
},
|
|
|
|
// Error colors from DESIGN.md
|
|
error: {
|
|
DEFAULT: "#ffb4ab",
|
|
foreground: "#690005",
|
|
container: "#93000a",
|
|
"on-container": "#ffdad6",
|
|
},
|
|
|
|
// Outline colors from DESIGN.md
|
|
outline: "#a48c7c",
|
|
"outline-variant": "#564335",
|
|
|
|
// Semantic surface colors (for compatibility)
|
|
muted: {
|
|
DEFAULT: "#474746",
|
|
foreground: "#a48c7c",
|
|
},
|
|
border: {
|
|
DEFAULT: "#353534",
|
|
strong: "#ffb781",
|
|
},
|
|
success: {
|
|
DEFAULT: "#00e639",
|
|
foreground: "#003907",
|
|
},
|
|
warning: "#ffb781",
|
|
info: "#c8c6c5",
|
|
},
|
|
keyframes: {
|
|
scan: {
|
|
'0%, 100%': { top: '0%' },
|
|
'50%': { top: '100%' },
|
|
}
|
|
},
|
|
animation: {
|
|
'scan-fast': 'scan 2.5s ease-in-out infinite',
|
|
'spin-slow': 'spin 3s linear infinite',
|
|
}
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
export default config;
|