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
This commit is contained in:
fullsizemalt
parent
5b3d9903b4
commit
897693d89b
2 changed files with 197 additions and 195 deletions
|
|
@ -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: [],
|
||||
}
|
||||
197
frontend/tailwind.config.ts
Normal file
197
frontend/tailwind.config.ts
Normal file
|
|
@ -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: [],
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue