fix(ui): semantic turquoise tokens, badge styling, saved fade animation
- Add turquoise/turquoise-fg semantic color tokens to layout.css (light + dark mode), replacing all hardcoded #00C7B1 in components - Bump Details toggle from text-xs to text-sm for visual hierarchy - Block badge: navy → turquoise, overlapping top-left card border with absolute positioning to visually link PDF annotation badges - Saved indicator: smooth 300ms opacity fade before removal (new 'fading' state in SaveState type) - Transcribe buttons: use border-turquoise/bg-turquoise/text-turquoise-fg Fixes @Leonie concerns: toggle visual weight, semantic tokens, badge styling, saved fade animation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -59,6 +59,10 @@
|
||||
/* Header surface — independent from canvas/surface for per-mode control */
|
||||
--color-header: var(--c-header);
|
||||
|
||||
/* Turquoise — transcription mode accent */
|
||||
--color-turquoise: var(--c-turquoise);
|
||||
--color-turquoise-fg: var(--c-turquoise-fg);
|
||||
|
||||
/* Focus ring — keyboard focus indicator, mode-aware (navy in light, mint in dark) */
|
||||
--color-focus-ring: var(--c-focus-ring);
|
||||
|
||||
@@ -93,6 +97,9 @@
|
||||
/* Header is brand-navy in light mode; same in dark mode for contrast compliance */
|
||||
--c-header: #012851;
|
||||
|
||||
--c-turquoise: #00c7b1;
|
||||
--c-turquoise-fg: #ffffff;
|
||||
|
||||
/* Focus ring: brand-navy in light mode — 14:1 on white, ~11:1 on sand */
|
||||
--c-focus-ring: #012851;
|
||||
|
||||
@@ -132,6 +139,9 @@
|
||||
/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
|
||||
--c-header: #012851;
|
||||
|
||||
--c-turquoise: #00c7b1;
|
||||
--c-turquoise-fg: #012851;
|
||||
|
||||
/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
|
||||
--c-focus-ring: #a1dcd8;
|
||||
|
||||
@@ -167,6 +177,9 @@
|
||||
/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
|
||||
--c-header: #012851;
|
||||
|
||||
--c-turquoise: #00c7b1;
|
||||
--c-turquoise-fg: #012851;
|
||||
|
||||
/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
|
||||
--c-focus-ring: #a1dcd8;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user