Daniel Bedeleanu
e715afd814
- Create frontend/colors.mjs as SSOT for all design colors - Create scripts/generate-css-vars.mjs to auto-generate CSS variables - Update tailwind.config.ts to import colors from colors.mjs - Update frontend/package.json: add 'generate-css-vars' script to build pipeline - Update start_servers.py: include CSS variable generation before npm build - All color changes now require only one edit in colors.mjs - Build process auto-syncs CSS variables and Tailwind colors Eliminates DRY violation where colors were duplicated in: - tailwind.config.ts (Tailwind utility classes) - globals.css (CSS custom properties) Single source of truth approach ensures: ✓ No inconsistency between Tailwind and CSS variables ✓ One place to update colors for all contexts ✓ Automated CSS variable generation on every build Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
// @ts-ignore - colors.mjs uses ESM exports, TypeScript may warn but it works at runtime
|
|
import { colors as colorsDefinition } from "./colors.mjs";
|
|
|
|
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: colorsDefinition,
|
|
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;
|