From 2608f447dec156aa781fc1e888c6042615457a5e Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 20 Feb 2026 18:40:19 +0200 Subject: [PATCH] fix: boost text-tertiary contrast for WCAG AAA (7:1) --- src/styles/main.css | 174 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 157 insertions(+), 17 deletions(-) diff --git a/src/styles/main.css b/src/styles/main.css index 06fa537..f283dc7 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -9,17 +9,17 @@ /* Text hierarchy (warm whites) */ --color-text-primary: #F5F5F0; - --color-text-secondary: #8A8A82; - --color-text-tertiary: #5A5A54; + --color-text-secondary: #B0B0A8; + --color-text-tertiary: #AEAEA6; /* Borders */ - --color-border-subtle: #2E2E2A; + --color-border-subtle: #3E3E3A; --color-border-visible: #3D3D38; /* Accent (amber) */ --color-accent: #D97706; --color-accent-hover: #B45309; - --color-accent-muted: rgba(217, 119, 6, 0.12); + --color-accent-muted: rgba(217, 119, 6, 0.25); --color-accent-text: #FBBF24; /* Status colors (semantic only) */ @@ -32,49 +32,51 @@ --font-sans: 'Inter', system-ui, sans-serif; --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; + --font-timer: var(--font-mono); + --font-ui: var(--font-sans); } /* Accent color overrides */ [data-accent="amber"] { --color-accent: #D97706; --color-accent-hover: #B45309; - --color-accent-muted: rgba(217, 119, 6, 0.12); + --color-accent-muted: rgba(217, 119, 6, 0.25); --color-accent-text: #FBBF24; } [data-accent="blue"] { --color-accent: #3B82F6; --color-accent-hover: #2563EB; - --color-accent-muted: rgba(59, 130, 246, 0.12); + --color-accent-muted: rgba(59, 130, 246, 0.25); --color-accent-text: #60A5FA; } [data-accent="purple"] { --color-accent: #8B5CF6; --color-accent-hover: #7C3AED; - --color-accent-muted: rgba(139, 92, 246, 0.12); + --color-accent-muted: rgba(139, 92, 246, 0.25); --color-accent-text: #A78BFA; } [data-accent="green"] { --color-accent: #10B981; --color-accent-hover: #059669; - --color-accent-muted: rgba(16, 185, 129, 0.12); + --color-accent-muted: rgba(16, 185, 129, 0.25); --color-accent-text: #34D399; } [data-accent="red"] { --color-accent: #EF4444; --color-accent-hover: #DC2626; - --color-accent-muted: rgba(239, 68, 68, 0.12); + --color-accent-muted: rgba(239, 68, 68, 0.25); --color-accent-text: #F87171; } [data-accent="pink"] { --color-accent: #EC4899; --color-accent-hover: #DB2777; - --color-accent-muted: rgba(236, 72, 153, 0.12); + --color-accent-muted: rgba(236, 72, 153, 0.25); --color-accent-text: #F472B6; } [data-accent="cyan"] { --color-accent: #06B6D4; --color-accent-hover: #0891B2; - --color-accent-muted: rgba(6, 182, 212, 0.12); + --color-accent-muted: rgba(6, 182, 212, 0.25); --color-accent-text: #22D3EE; } @@ -85,8 +87,8 @@ --color-bg-elevated: #F5F5F4; --color-bg-inset: #E7E5E4; --color-text-primary: #1C1917; - --color-text-secondary: #57534E; - --color-text-tertiary: #A8A29E; + --color-text-secondary: #44403C; + --color-text-tertiary: #57524D; --color-border-subtle: #E7E5E4; --color-border-visible: #D6D3D1; } @@ -98,11 +100,16 @@ box-sizing: border-box; } - html, body, #app { + html, body { height: 100%; width: 100%; overflow: hidden; } + #app { + height: 100%; + width: 100%; + overflow: auto; + } body { font-family: var(--font-sans); @@ -114,10 +121,43 @@ -moz-osx-font-smoothing: grayscale; } - input:focus, select:focus, textarea:focus { + :focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; + box-shadow: 0 0 0 4px var(--color-bg-base); + } + + input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-accent) !important; - outline: none; - box-shadow: 0 0 0 2px var(--color-accent-muted); + } + + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + #main-content p { + max-width: 80ch; + } + p + p { + margin-top: 1.5em; + } + + .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + padding: 0.5rem 1rem; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; } } @@ -324,6 +364,61 @@ opacity: 0; } +/* Slide up (bulk action bar) */ +.slide-up-enter-active { + transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), + opacity 200ms cubic-bezier(0.22, 1, 0.36, 1); +} +.slide-up-leave-active { + transition: transform 150ms ease-in, + opacity 150ms ease-in; +} +.slide-up-enter-from, +.slide-up-leave-to { + transform: translateY(100%); + opacity: 0; +} + +/* Expand/collapse (checklist, panels) */ +.expand-enter-active { + transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1), + opacity 300ms cubic-bezier(0.22, 1, 0.36, 1); + overflow: hidden; +} +.expand-leave-active { + transition: max-height 200ms ease-out, + opacity 200ms ease-out; + overflow: hidden; +} +.expand-enter-from { + max-height: 0; + opacity: 0; +} +.expand-enter-to { + max-height: 500px; + opacity: 1; +} +.expand-leave-from { + max-height: 500px; + opacity: 1; +} +.expand-leave-to { + max-height: 0; + opacity: 0; +} + +/* Tour overlay fade */ +.tour-fade-enter-active { + transition: opacity 200ms ease-out; +} +.tour-fade-leave-active { + transition: opacity 150ms ease-in; +} +.tour-fade-enter-from, +.tour-fade-leave-to { + opacity: 0; +} + /* Skeleton shimmer */ @keyframes shimmer { 0% { background-position: -200% 0; } @@ -418,3 +513,48 @@ scroll-behavior: auto !important; } } + +/* Manual reduced-motion override (applied via JS class on ) */ +.reduce-motion *, +.reduce-motion *::before, +.reduce-motion *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; +} + +.reduce-motion .animate-pulse-colon, +.reduce-motion .animate-pulse-dot, +.reduce-motion .animate-pulse-seconds { + animation: none !important; + opacity: 0.7; +} + +.reduce-motion .animate-float, +.reduce-motion .animate-timer-pulse, +.reduce-motion .animate-timer-glow, +.reduce-motion .skeleton { + animation: none !important; +} + +@media (prefers-contrast: more) { + :root { + --color-text-secondary: #D0D0C8; + --color-text-tertiary: #C8C8C0; + --color-border-subtle: #5A5A54; + --color-border-visible: #7A7A72; + } + [data-theme="light"] { + --color-text-secondary: #2C2926; + --color-text-tertiary: #3A3632; + --color-border-subtle: #A8A29E; + --color-border-visible: #78716C; + } +} + +@media (forced-colors: active) { + :focus-visible { + outline: 2px solid Highlight; + } +}