From 897693d89b2cd2e26c98f6b7fa8773c18f5f4f9a Mon Sep 17 00:00:00 2001 From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com> Date: Fri, 19 Dec 2025 15:37:48 -0800 Subject: [PATCH] fix(design): Convert tailwind.config to TS and fix theme extension - Renamed tailwind.config.js to tailwind.config.ts to resolve ESM import issues - Correctly wrapped Design OS palette in 'theme.extend' to preserve default utilities - Fixed syntax errors preventing build --- frontend/tailwind.config.js | 195 ----------------------------------- frontend/tailwind.config.ts | 197 ++++++++++++++++++++++++++++++++++++ 2 files changed, 197 insertions(+), 195 deletions(-) delete mode 100644 frontend/tailwind.config.js create mode 100644 frontend/tailwind.config.ts diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js deleted file mode 100644 index e3dd25c..0000000 --- a/frontend/tailwind.config.js +++ /dev/null @@ -1,195 +0,0 @@ -import colors from 'tailwindcss/colors'; - -/** @type {import('tailwindcss').Config} */ -export default { - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - ], - darkMode: 'class', - theme: { - // Mobile-first breakpoints - screens: { - 'xs': '375px', - 'sm': '640px', - 'md': '768px', - 'lg': '1024px', - 'xl': '1280px', - '2xl': '1536px', - }, - container: { - center: true, - padding: { - DEFAULT: '1rem', - sm: '1.5rem', - md: '2rem', - lg: '3rem', - }, - screens: { - "2xl": "1400px", - }, - }, - // Design OS Palette (Stone & Lime) - colors: { - // Neutral scale (Stone = warmth + utility) - neutral: { - ...colors.stone, - // Map legacy specifics if needed, but prefer stone-950 for blacks - 850: '#1c1917', // stone-900ish - 950: '#0c0a09', // stone-950 - }, - // Primary Accent (Lime = fresh + technical) - accent: { - ...colors.lime, - DEFAULT: colors.lime[500], // Was Linear Purple - hover: colors.lime[400], - muted: 'rgba(132, 204, 22, 0.15)', // Lime-500 alpha - foreground: colors.stone[950], // Dark text on lime - }, - // Semantic colors - success: { - DEFAULT: colors.emerald[500], - muted: 'rgba(16, 185, 129, 0.15)', - foreground: '#FFFFFF', - }, - warning: { - DEFAULT: colors.amber[500], - muted: 'rgba(245, 158, 11, 0.15)', - foreground: '#171717', - }, - destructive: { - DEFAULT: colors.red[500], - muted: 'rgba(239, 68, 68, 0.15)', - foreground: '#FFFFFF', - }, - // Mappings - border: colors.stone[200], - input: colors.stone[200], - ring: colors.lime[500], - background: colors.stone[50], // Slightly warm background - foreground: colors.stone[950], - primary: { - DEFAULT: colors.lime[500], - foreground: colors.stone[950], - }, - secondary: { - DEFAULT: colors.stone[100], - foreground: colors.stone[900], - }, - muted: { - DEFAULT: colors.stone[100], - foreground: colors.stone[500], - }, - popover: { - DEFAULT: "#FFFFFF", - foreground: colors.stone[950], - }, - card: { - DEFAULT: "#FFFFFF", - foreground: colors.stone[950], - }, - }, - borderRadius: { - 'xs': '4px', - 'sm': '6px', - 'md': '8px', - 'lg': '12px', - 'xl': '16px', - }, - // Touch-friendly spacing - spacing: { - 'touch': '44px', - 'touch-lg': '56px', - }, - // Linear-inspired typography - fontFamily: { - sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'], - display: ['Space Grotesk', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'], - mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'], - }, - fontSize: { - 'xs': ['11px', { lineHeight: '1.4', letterSpacing: '0.01em' }], - 'sm': ['13px', { lineHeight: '1.5', letterSpacing: '-0.01em' }], - 'base': ['14px', { lineHeight: '1.6', letterSpacing: '-0.01em' }], - 'lg': ['16px', { lineHeight: '1.5', letterSpacing: '-0.02em', fontWeight: '500' }], - 'xl': ['18px', { lineHeight: '1.4', letterSpacing: '-0.02em', fontWeight: '600' }], - '2xl': ['24px', { lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '600' }], - '3xl': ['30px', { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '700' }], - '4xl': ['36px', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }], - }, - // Animation timing (Linear-style) - transitionTimingFunction: { - 'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)', - 'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)', - 'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)', - }, - transitionDuration: { - 'instant': '50ms', - 'fast': '100ms', - 'normal': '150ms', - 'slow': '250ms', - 'slower': '400ms', - }, - // Keyframe animations - keyframes: { - 'fade-in': { - '0%': { opacity: '0' }, - '100%': { opacity: '1' }, - }, - 'fade-out': { - '0%': { opacity: '1' }, - '100%': { opacity: '0' }, - }, - 'slide-up': { - '0%': { opacity: '0', transform: 'translateY(8px)' }, - '100%': { opacity: '1', transform: 'translateY(0)' }, - }, - 'slide-down': { - '0%': { opacity: '0', transform: 'translateY(-8px)' }, - '100%': { opacity: '1', transform: 'translateY(0)' }, - }, - 'scale-in': { - '0%': { opacity: '0', transform: 'scale(0.95)' }, - '100%': { opacity: '1', transform: 'scale(1)' }, - }, - 'scale-out': { - '0%': { opacity: '1', transform: 'scale(1)' }, - '100%': { opacity: '0', transform: 'scale(0.95)' }, - }, - 'shimmer': { - '0%': { backgroundPosition: '-200% 0' }, - '100%': { backgroundPosition: '200% 0' }, - }, - 'pulse-subtle': { - '0%, 100%': { opacity: '1' }, - '50%': { opacity: '0.7' }, - }, - 'spin-slow': { - '0%': { transform: 'rotate(0deg)' }, - '100%': { transform: 'rotate(360deg)' }, - }, - }, - animation: { - 'fade-in': 'fade-in 150ms ease-out', - 'fade-out': 'fade-out 150ms ease-out', - 'slide-up': 'slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1)', - 'slide-down': 'slide-down 200ms cubic-bezier(0.16, 1, 0.3, 1)', - 'scale-in': 'scale-in 150ms cubic-bezier(0.16, 1, 0.3, 1)', - 'scale-out': 'scale-out 150ms cubic-bezier(0.16, 1, 0.3, 1)', - 'shimmer': 'shimmer 2s linear infinite', - 'pulse-subtle': 'pulse-subtle 2s ease-in-out infinite', - 'spin-slow': 'spin-slow 3s linear infinite', - }, - // Box shadows (subtle, Linear-style) - boxShadow: { - 'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)', - 'sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', - 'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', - 'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', - 'focus': '0 0 0 3px rgba(94, 106, 210, 0.25)', - 'focus-destructive': '0 0 0 3px rgba(239, 68, 68, 0.25)', - }, - }, -}, -plugins: [], -} diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts new file mode 100644 index 0000000..4d38ac4 --- /dev/null +++ b/frontend/tailwind.config.ts @@ -0,0 +1,197 @@ +import colors from 'tailwindcss/colors'; + +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + darkMode: 'class', + theme: { + // Mobile-first breakpoints + screens: { + 'xs': '375px', + 'sm': '640px', + 'md': '768px', + 'lg': '1024px', + 'xl': '1280px', + '2xl': '1536px', + }, + container: { + center: true, + padding: { + DEFAULT: '1rem', + sm: '1.5rem', + md: '2rem', + lg: '3rem', + }, + screens: { + "2xl": "1400px", + }, + }, + extend: { + // Design OS Palette (Stone & Lime) + colors: { + // Neutral scale (Stone = warmth + utility) + neutral: { + ...colors.stone, + // Map legacy specifics if needed, but prefer stone-950 for blacks + 850: '#1c1917', // stone-900ish + 950: '#0c0a09', // stone-950 + }, + // Primary Accent (Lime = fresh + technical) + accent: { + ...colors.lime, + DEFAULT: colors.lime[500], // Was Linear Purple + hover: colors.lime[400], + muted: 'rgba(132, 204, 22, 0.15)', // Lime-500 alpha + foreground: colors.stone[950], // Dark text on lime + }, + // Semantic colors + success: { + DEFAULT: colors.emerald[500], + muted: 'rgba(16, 185, 129, 0.15)', + foreground: '#FFFFFF', + }, + warning: { + DEFAULT: colors.amber[500], + muted: 'rgba(245, 158, 11, 0.15)', + foreground: '#171717', + }, + destructive: { + DEFAULT: colors.red[500], + muted: 'rgba(239, 68, 68, 0.15)', + foreground: '#FFFFFF', + }, + // Mappings + border: colors.stone[200], + input: colors.stone[200], + ring: colors.lime[500], + background: colors.stone[50], // Slightly warm background + foreground: colors.stone[950], + primary: { + DEFAULT: colors.lime[500], + foreground: colors.stone[950], + }, + secondary: { + DEFAULT: colors.stone[100], + foreground: colors.stone[900], + }, + muted: { + DEFAULT: colors.stone[100], + foreground: colors.stone[500], + }, + popover: { + DEFAULT: "#FFFFFF", + foreground: colors.stone[950], + }, + card: { + DEFAULT: "#FFFFFF", + foreground: colors.stone[950], + }, + }, + borderRadius: { + 'xs': '4px', + 'sm': '6px', + 'md': '8px', + 'lg': '12px', + 'xl': '16px', + }, + // Touch-friendly spacing + spacing: { + 'touch': '44px', + 'touch-lg': '56px', + }, + // Linear-inspired typography + fontFamily: { + sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'], + display: ['Space Grotesk', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'], + mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'], + }, + fontSize: { + 'xs': ['11px', { lineHeight: '1.4', letterSpacing: '0.01em' }], + 'sm': ['13px', { lineHeight: '1.5', letterSpacing: '-0.01em' }], + 'base': ['14px', { lineHeight: '1.6', letterSpacing: '-0.01em' }], + 'lg': ['16px', { lineHeight: '1.5', letterSpacing: '-0.02em', fontWeight: '500' }], + 'xl': ['18px', { lineHeight: '1.4', letterSpacing: '-0.02em', fontWeight: '600' }], + '2xl': ['24px', { lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '600' }], + '3xl': ['30px', { lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '700' }], + '4xl': ['36px', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }], + }, + // Animation timing (Linear-style) + transitionTimingFunction: { + 'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)', + 'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)', + 'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)', + }, + transitionDuration: { + 'instant': '50ms', + 'fast': '100ms', + 'normal': '150ms', + 'slow': '250ms', + 'slower': '400ms', + }, + // Keyframe animations + keyframes: { + 'fade-in': { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + 'fade-out': { + '0%': { opacity: '1' }, + '100%': { opacity: '0' }, + }, + 'slide-up': { + '0%': { opacity: '0', transform: 'translateY(8px)' }, + '100%': { opacity: '1', transform: 'translateY(0)' }, + }, + 'slide-down': { + '0%': { opacity: '0', transform: 'translateY(-8px)' }, + '100%': { opacity: '1', transform: 'translateY(0)' }, + }, + 'scale-in': { + '0%': { opacity: '0', transform: 'scale(0.95)' }, + '100%': { opacity: '1', transform: 'scale(1)' }, + }, + 'scale-out': { + '0%': { opacity: '1', transform: 'scale(1)' }, + '100%': { opacity: '0', transform: 'scale(0.95)' }, + }, + 'shimmer': { + '0%': { backgroundPosition: '-200% 0' }, + '100%': { backgroundPosition: '200% 0' }, + }, + 'pulse-subtle': { + '0%, 100%': { opacity: '1' }, + '50%': { opacity: '0.7' }, + }, + 'spin-slow': { + '0%': { transform: 'rotate(0deg)' }, + '100%': { transform: 'rotate(360deg)' }, + }, + }, + animation: { + 'fade-in': 'fade-in 150ms ease-out', + 'fade-out': 'fade-out 150ms ease-out', + 'slide-up': 'slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1)', + 'slide-down': 'slide-down 200ms cubic-bezier(0.16, 1, 0.3, 1)', + 'scale-in': 'scale-in 150ms cubic-bezier(0.16, 1, 0.3, 1)', + 'scale-out': 'scale-out 150ms cubic-bezier(0.16, 1, 0.3, 1)', + 'shimmer': 'shimmer 2s linear infinite', + 'pulse-subtle': 'pulse-subtle 2s ease-in-out infinite', + 'spin-slow': 'spin-slow 3s linear infinite', + }, + // Box shadows (subtle, Linear-style) + boxShadow: { + 'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)', + 'sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', + 'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', + 'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', + 'focus': '0 0 0 3px rgba(94, 106, 210, 0.25)', + 'focus-destructive': '0 0 0 3px rgba(239, 68, 68, 0.25)', + }, + }, + }, +}, +plugins: [], +}