7b36551c32
- Main app swapped from warm cream/sage to cool slate light theme with blue accent; dark-* tokens and text-white/gray overrides remapped in tailwind.config.js and index.css - Calendar events now render in Google's 11-color palette (Tomato through Graphite), deterministically hashed from the event summary so the same event always gets the same color - PhotoFrame uses object-contain (whole photo shown, letterboxed) instead of object-cover; clock + date moved to lower-right, same white color, text-shadow for readability over any photo - EMAIL_UPLOAD.md / PHOTO_FRAME.md / iCloud sync script and systemd timer remain unchanged
102 lines
3.2 KiB
JavaScript
Executable File
102 lines
3.2 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',
|
|
},
|
|
// Blue accent
|
|
accent: {
|
|
DEFAULT: '#3b82f6', // blue-500
|
|
light: '#60a5fa',
|
|
dark: '#2563eb',
|
|
},
|
|
// 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: [],
|
|
};
|