fix: boost text-tertiary contrast for WCAG AAA (7:1)
This commit is contained in:
Your Name
@@ -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 <html>) */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user