dtoro
9317730885
- Bump primary from #3b6ed8 to #3b82f6 (Tailwind blue-500). Higher saturation reads better against both the dark surface and varied photo content. Contrast against bg-bg goes from ~5.7:1 to ~6.6:1. - Selection ring: add ring-offset-2 ring-offset-bg so the bright blue has a dark gap separating it from the photo edge — pops on light and dark photos alike. Hover ring gets the same treatment. - Selection check badge: white ring + shadow + thicker stroke so the badge is legible against any photo (was disappearing on bright scenes). - Rating stars: wrap in a translucent dark pill with backdrop-blur so yellow stars don't vanish on yellow / sandy photos. - Heap / duplicate / discarded badges: matching white ring + thicker icon stroke so they all read consistently and don't blend in. - Timeline date headers: text-text instead of text-text-muted so the group labels actually pop above the grid. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Dark-first color scheme for photo apps
|
|
bg: '#111110',
|
|
surface: '#161615',
|
|
'surface-2': '#1c1c1a',
|
|
'surface-offset': '#222220',
|
|
border: 'rgba(255,255,255,0.08)',
|
|
text: '#e8e6e0',
|
|
'text-muted': '#878580',
|
|
'text-faint': '#4a4845',
|
|
primary: '#3b82f6', // saturated blue (Tailwind blue-500) — high contrast on dark bg AND on photo content
|
|
pick: '#4f9e5c', // green for picked
|
|
reject: '#c25a5a', // red for rejected
|
|
star: '#d4a340', // amber for stars
|
|
},
|
|
fontFamily: {
|
|
sans: ['Geist', 'system-ui', 'sans-serif'],
|
|
mono: ['Geist Mono', 'monospace'],
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.2s ease-in-out',
|
|
'slide-up': 'slideUp 0.3s ease-out',
|
|
'shimmer': 'shimmer 2s infinite linear',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '-200% 0' },
|
|
'100%': { backgroundPosition: '200% 0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} |