9315374944
- Events now color by name match in the summary: Becca=teal, Chris=green, Arabella=pink. Anything without a match gets a neutral slate. Replaces the hash-to-Google-palette logic. - Main accent swapped from blue to pastel teal (#14b8a6) so the UI feels cohesive with the event palette.
102 lines
3.3 KiB
JavaScript
Executable File
102 lines
3.3 KiB
JavaScript
Executable File
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Cool light theme (slate-based neutrals + blue accent).
|
|
// Token names kept as "dark.*" so existing components don't need class changes.
|
|
dark: {
|
|
primary: '#f1f5f9', // page bg - slate-100
|
|
secondary: '#ffffff', // card bg - white
|
|
tertiary: '#e2e8f0', // subtle panels - slate-200
|
|
elevated: '#ffffff', // elevated cards
|
|
hover: '#e2e8f0',
|
|
border: '#e2e8f0', // cool soft border
|
|
'border-light': '#cbd5e1',
|
|
},
|
|
// Cool pastel teal accent (picks up Becca's event color)
|
|
accent: {
|
|
DEFAULT: '#14b8a6', // teal-500
|
|
light: '#5eead4', // teal-300
|
|
dark: '#0d9488', // teal-600
|
|
},
|
|
// Cool slate ink text scale
|
|
ink: {
|
|
DEFAULT: '#0f172a', // slate-900
|
|
muted: '#475569', // slate-600
|
|
subtle: '#64748b', // slate-500
|
|
faint: '#94a3b8', // slate-400
|
|
},
|
|
status: {
|
|
success: '#16a34a', // green-600
|
|
warning: '#d97706', // amber-600
|
|
error: '#dc2626', // red-600
|
|
},
|
|
// Legacy imperial tokens retained so old references don't break
|
|
imperial: {
|
|
black: '#f1f5f9',
|
|
dark: '#e2e8f0',
|
|
medium: '#cbd5e1',
|
|
light: '#94a3b8',
|
|
red: '#dc2626',
|
|
'red-dark': '#b91c1c',
|
|
'red-light': '#ef4444',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Nunito', 'Quicksand', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
|
|
display: ['Nunito', 'Quicksand', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
'touch': '1.125rem',
|
|
},
|
|
spacing: {
|
|
'touch': '44px',
|
|
'touch-lg': '56px',
|
|
},
|
|
borderRadius: {
|
|
'xl': '1rem',
|
|
'2xl': '1.5rem',
|
|
'3xl': '2rem',
|
|
},
|
|
boxShadow: {
|
|
'card': '0 2px 8px rgba(58, 50, 42, 0.06), 0 1px 2px rgba(58, 50, 42, 0.04)',
|
|
'card-lg': '0 8px 24px rgba(58, 50, 42, 0.08), 0 2px 6px rgba(58, 50, 42, 0.05)',
|
|
'glow-green': '0 0 12px rgba(127, 168, 148, 0.35)',
|
|
'glow-blue': '0 0 12px rgba(127, 168, 148, 0.35)',
|
|
'glow-orange': '0 0 12px rgba(217, 154, 74, 0.35)',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fade-in 0.2s ease-out',
|
|
'fade-slow': 'fade-in 1.2s ease-out',
|
|
'slide-up': 'slide-up 0.3s ease-out',
|
|
'pulse': 'pulse 2s ease-in-out infinite',
|
|
'ken-burns': 'ken-burns 20s ease-in-out infinite alternate',
|
|
},
|
|
keyframes: {
|
|
'fade-in': {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
'pulse': {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.5' },
|
|
},
|
|
'ken-burns': {
|
|
'0%': { transform: 'scale(1.0) translate(0, 0)' },
|
|
'100%': { transform: 'scale(1.08) translate(-1%, -1%)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|