retoorandClaude Sonnet 5
82d6628af1
Two independent contrast bugs, both from a token being used somewhere it was never validated as a text color: - Links/inline code used --accent as their text color against dark card surfaces, measuring 2.8-3.6:1 (below the 4.5:1 AA threshold for normal text) depending on the surface. Worst case: the sender's own DM chat bubble uses --accent as its *background*, so a link inside your own message was the exact same color as the bubble - 1.0:1, functionally invisible. Added --link/--link-hover (same hue/ saturation as --accent, lightened until they clear 4.5:1 against the darkest realistic surface) and repointed the sitewide `a`/`a:hover` default, `.rendered-content a`/`code`, `.docs-chat-bubble a`, and `.ds-chat-citations a`. The DM chat bubble additionally needed bubble-scoped overrides (link, AI-adjusted note, attachment-pending placeholder, failed-send outline/retry-hint) since its background *is* --accent, which --link alone doesn't fix. - `background: var(--warning); color: var(--white)` (chat's connection banner, a container badge, a service-status badge, and docs' PUT/4xx badges) measured ~1.7:1 - yellow needs dark text. Added --on-warning mirroring the existing --on-accent pattern and repointed just the warning-backed variants, leaving sibling info/success/danger badges untouched (they have the same underlying issue but are out of scope for this pass). --accent itself is untouched, so every button/badge/nav element using it as a solid fill is unchanged. Verified with computed WCAG contrast ratios and Playwright screenshots against a live render of the real CSS, plus the production homepage to confirm no regression to brand colors. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vnp7vzE4hvsytMo5YjszJm
85 lines
2.2 KiB
CSS
85 lines
2.2 KiB
CSS
/* retoor <retoor@molodetz.nl> */
|
|
|
|
:root {
|
|
--bg-primary: #080413;
|
|
--bg-secondary: #120821;
|
|
--bg-card: #1a1030;
|
|
--bg-card-hover: #241640;
|
|
--bg-input: #140b26;
|
|
--bg-modal: #1a1030;
|
|
|
|
--accent: #b73f1e;
|
|
--accent-rgb: 183, 63, 30;
|
|
--accent-hover: #af3050;
|
|
--accent-light: rgba(183, 63, 30, 0.14);
|
|
--accent-2: #af3050;
|
|
--accent-gradient: linear-gradient(135deg, #b73f1e, #af3050, #8f3b71);
|
|
--on-accent: #fff;
|
|
|
|
--link: #df5f3b;
|
|
--link-hover: #d4627e;
|
|
|
|
--text-primary: #e9e4ff;
|
|
--text-secondary: #c8c3e5;
|
|
--text-muted: #9b93c9;
|
|
|
|
--border: #11101f;
|
|
--border-light: #2f2a55;
|
|
|
|
--success: #34d399;
|
|
--warning: #fbbf24;
|
|
--danger: #f87171;
|
|
--info: #60a5fa;
|
|
--on-warning: #1c1200;
|
|
|
|
--radius: 8px;
|
|
--radius-input: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
--shadow-sm: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
|
|
--shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05);
|
|
|
|
--white: #fff;
|
|
--overlay-dark: rgba(0, 0, 0, 0.7);
|
|
--overlay-light: rgba(255, 255, 255, 0.05);
|
|
|
|
--space-xs: 0.25rem;
|
|
--space-sm: 0.5rem;
|
|
--space-md: 0.75rem;
|
|
--space-lg: 1rem;
|
|
--space-xl: 1.5rem;
|
|
--space-2xl: 2rem;
|
|
|
|
--font-sans: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
|
|
--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
|
|
|
|
--nav-height: 56px;
|
|
--sidebar-width: 240px;
|
|
--max-content: 1200px;
|
|
|
|
--z-fab: 900;
|
|
--z-nav-overlay: 998;
|
|
--z-nav-panel: 999;
|
|
--z-nav: 1000;
|
|
--z-nav-drop: 1001;
|
|
--z-modal: 2000;
|
|
--z-popover: 2100;
|
|
--z-lightbox: 10000;
|
|
--z-chrome-fw: 2147480000;
|
|
--z-chrome-devii: 2147483000;
|
|
--z-chrome-toast: 2147483400;
|
|
--z-chrome-menu: 2147483500;
|
|
--z-chrome-dialog: 2147483647;
|
|
|
|
--topic-devlog: #7c4dff;
|
|
--topic-showcase: #00bfa5;
|
|
--topic-question: #448aff;
|
|
--topic-rant: #ff5252;
|
|
--topic-fun: #ffab00;
|
|
--topic-politics: #00bcd4;
|
|
|
|
--bg-gradient: linear-gradient(135deg, #080413 0%, #160a28 50%, #080413 100%);
|
|
}
|