/* * Lexxy theme overrides. * * Lexxy is themed entirely through CSS custom properties (see the gem's * lexxy-variables.css). This file: * 1. Re-points Lexxy's accent to the app's emerald brand (links / focus / selection). * 2. Supplies a dark theme, keyed off the `.dark` class the app toggles on * (see app/views/shared/_head.html.erb). Without this the toolbar/canvas render * white-on-dark. Dark values mirror Lexxy's own sandbox reference theme. * * MUST be loaded AFTER "lexxy" in the stylesheet_link_tag so the light-mode :root * overrides win on source order (equal specificity to Lexxy's own :root). The * html.dark block wins on specificity regardless of order. Only the base variables * need overriding — Lexxy's derived semantic vars (canvas, text, link, selection, * code-bg, table…) re-resolve from these. */ :root { /* Emerald accent to match the app (Tailwind emerald-600/500/200/100). */ --lexxy-color-accent-dark: #059669; --lexxy-color-accent-medium: #10b981; --lexxy-color-accent-light: #a7f3d0; --lexxy-color-accent-lightest: #d1fae5; } html.dark { /* Grayscale ramp inverted for dark backgrounds. */ --lexxy-color-ink: oklch(96% 0 0); --lexxy-color-ink-medium: oklch(75% 0 0); --lexxy-color-ink-light: oklch(55% 0 0); --lexxy-color-ink-lighter: oklch(40% 0 0); --lexxy-color-ink-lightest: oklch(25% 0 0); --lexxy-color-ink-inverted: oklch(15% 0 0); /* Emerald accent, brightened for dark (emerald-400/500/800/900). */ --lexxy-color-accent-dark: #34d399; --lexxy-color-accent-medium: #10b981; --lexxy-color-accent-light: #065f46; --lexxy-color-accent-lightest: #064e3b; --lexxy-color-red: oklch(70% 0.15 27); --lexxy-color-green: oklch(70% 0.15 145); --lexxy-color-blue: oklch(75% 0.196 258); --lexxy-color-purple: oklch(70% 0.15 305); /* Syntax highlighting tokens tuned for dark (GitHub dark palette). */ --lexxy-color-code-token-att: #ff7b72; --lexxy-color-code-token-comment: #8b949e; --lexxy-color-code-token-function: #d2a8ff; --lexxy-color-code-token-operator: #ff7b72; --lexxy-color-code-token-property: #79c0ff; --lexxy-color-code-token-punctuation: #f0f6fc; --lexxy-color-code-token-selector: #7ee787; --lexxy-color-code-token-variable: #ffa657; --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3); --highlight-1: rgb(240, 200, 22); --highlight-2: rgb(230, 118, 14); --highlight-3: rgb(244, 5, 5); --highlight-4: rgb(248, 21, 192); --highlight-5: rgb(214, 80, 255); --highlight-6: rgb(53, 157, 255); --highlight-7: rgb(26, 231, 23); --highlight-8: rgb(201, 135, 72); --highlight-9: rgb(161, 161, 161); }