Hugh KaznowskiandClaude Sonnet 5
d59b3aec38
Extends ticket 048's light_green pattern (light-inverted surface/border/text scale + light's neutral danger colours, same base and accent hues as the dark-surfaced counterpart) to the remaining five colour schemes across all six files that must stay in sync: index.css, themes.ts, api.ts, settings.rs, useSettingsPanel.ts, and NavMenu.tsx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
499 lines
16 KiB
CSS
499 lines
16 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Author-origin display utilities (flex, grid, ...) beat the UA [hidden]
|
|
* rule regardless of specificity, so collapsible sections that pair
|
|
* `hidden` with a display utility never actually hide. Force it back. */
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
* Theme system: every visual role the app uses (surfaces, borders, text,
|
|
* danger banners, accent highlights) is a plain CSS custom property here,
|
|
* bridged into real Tailwind utilities (bg-surface-0, text-text-muted,
|
|
* border-accent, ...) via `@theme inline`. Components use those utilities
|
|
* instead of hardcoded palette classes (bg-neutral-950, text-sky-400, ...),
|
|
* so re-declaring the `--c-*` variables under a `html.<theme>` selector
|
|
* re-skins the whole app with no per-component changes.
|
|
*
|
|
* Derivation: `dark` uses one true black-based neutral (S=0) scale, `light`
|
|
* is its exact lightness mirror — these two stay grey throughout. (There
|
|
* used to be a separate `grey` theme sharing `dark`'s neutral scale with
|
|
* only its accent trio differing; it was a near-duplicate of `dark` and was
|
|
* removed in favour of a single `dark` theme — ticket 004. Settings saved
|
|
* with `color_scheme: "grey"` still load fine: the backend aliases it to
|
|
* `dark`, see `ColorScheme` in `src/settings.rs`.)
|
|
* Each named theme (red/green/blue/yellow/pink/orange) instead tints its
|
|
* whole surface/border/text scale in its own hue at low saturation (so the
|
|
* chrome itself reads as "a shade of red", not grey-with-a-red-light), and
|
|
* pulls its accent trio from two *other* hues on the wheel: --c-accent and
|
|
* --c-accent-text share the base hue's complement (base+180°), while
|
|
* --c-accent-soft sits at a split-complement (~base+150°/-150°) — a
|
|
* "composite" accent distinct from the straight complement. To add a new
|
|
* themed variant: pick a base hue H, a complement C = H+180, and a
|
|
* composite K = H+150 (mod 360), then fill --c-surface-, --c-border-,
|
|
* --c-text- as hsl(H, ...) at the saturation/lightness steps below, accent
|
|
* + accent-text as hsl(C, ...), and accent-soft as hsl(K, ...).
|
|
*
|
|
* --c-accent (base look, unchanged above) is joined by two more accent
|
|
* colours (ticket 048) so charts/highlights can draw from a 3-colour set
|
|
* instead of one hue: --c-accent-2 sits at H+90 and --c-accent-3 at H+270 —
|
|
* a quadrature pair straddling the base hue, distinct from both the
|
|
* complement (accent) and the split-complement (accent-soft). These are
|
|
* purely additive: nothing that already reads --c-accent/-soft/-text
|
|
* changes look.
|
|
*/
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
--c-surface-0: #0a0a0a;
|
|
--c-surface-1: #171717;
|
|
--c-surface-2: #262626;
|
|
|
|
--c-border: #262626;
|
|
--c-border-soft: #404040;
|
|
--c-border-faint: #171717;
|
|
--c-border-strong: #a3a3a3;
|
|
|
|
--c-text: #f5f5f5;
|
|
--c-text-secondary: #d4d4d4;
|
|
--c-text-muted: #a3a3a3;
|
|
--c-text-subtle: #737373;
|
|
--c-text-faint: #525252;
|
|
--c-text-faintest: #404040;
|
|
|
|
--c-danger-bg: #450a0a;
|
|
--c-danger-border: #7f1d1d;
|
|
--c-danger-text: #f87171;
|
|
--c-danger-text-strong: #fca5a5;
|
|
|
|
--c-accent: #0ea5e9;
|
|
--c-accent-soft: #0369a1;
|
|
--c-accent-text: #7dd3fc;
|
|
--c-accent-2: #a78bfa;
|
|
--c-accent-3: #4ade80;
|
|
}
|
|
|
|
/* Exact lightness mirror of :root's neutral-950..50 scale (Tailwind neutral,
|
|
steps flipped: 950<->50, 900<->100, 800<->200, 700<->300, 600<->400). */
|
|
html.light {
|
|
--c-surface-0: #fafafa;
|
|
--c-surface-1: #f5f5f5;
|
|
--c-surface-2: #e5e5e5;
|
|
|
|
--c-border: #e5e5e5;
|
|
--c-border-soft: #d4d4d4;
|
|
--c-border-faint: #f5f5f5;
|
|
--c-border-strong: #525252;
|
|
|
|
--c-text: #171717;
|
|
--c-text-secondary: #404040;
|
|
--c-text-muted: #525252;
|
|
--c-text-subtle: #737373;
|
|
--c-text-faint: #a3a3a3;
|
|
--c-text-faintest: #d4d4d4;
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: #0284c7;
|
|
--c-accent-soft: #7dd3fc;
|
|
--c-accent-text: #0369a1;
|
|
--c-accent-2: #7c3aed;
|
|
--c-accent-3: #16a34a;
|
|
}
|
|
|
|
/* base hue 0 (red): surfaces/borders/text tinted red; accent complement 180
|
|
(cyan), accent-soft composite 150 (spring green) */
|
|
html.red {
|
|
--c-surface-0: hsl(0 32% 10%);
|
|
--c-surface-1: hsl(0 28% 16%);
|
|
--c-surface-2: hsl(0 26% 22%);
|
|
|
|
--c-border: hsl(0 24% 24%);
|
|
--c-border-soft: hsl(0 22% 33%);
|
|
--c-border-faint: hsl(0 28% 16%);
|
|
--c-border-strong: hsl(0 15% 62%);
|
|
|
|
--c-text: hsl(0 15% 94%);
|
|
--c-text-secondary: hsl(0 12% 82%);
|
|
--c-text-muted: hsl(0 10% 65%);
|
|
--c-text-subtle: hsl(0 8% 50%);
|
|
--c-text-faint: hsl(0 8% 38%);
|
|
--c-text-faintest: hsl(0 10% 28%);
|
|
|
|
--c-accent: hsl(180 70% 62%);
|
|
--c-accent-soft: hsl(150 55% 34%);
|
|
--c-accent-text: hsl(180 75% 80%);
|
|
--c-accent-2: hsl(90 65% 58%);
|
|
--c-accent-3: hsl(270 65% 68%);
|
|
}
|
|
|
|
/* base hue 140 (green): surfaces/borders/text tinted green; accent complement
|
|
320 (magenta), accent-soft composite 290 (purple) */
|
|
html.green {
|
|
--c-surface-0: hsl(140 32% 10%);
|
|
--c-surface-1: hsl(140 28% 16%);
|
|
--c-surface-2: hsl(140 26% 22%);
|
|
|
|
--c-border: hsl(140 24% 24%);
|
|
--c-border-soft: hsl(140 22% 33%);
|
|
--c-border-faint: hsl(140 28% 16%);
|
|
--c-border-strong: hsl(140 15% 62%);
|
|
|
|
--c-text: hsl(140 15% 94%);
|
|
--c-text-secondary: hsl(140 12% 82%);
|
|
--c-text-muted: hsl(140 10% 65%);
|
|
--c-text-subtle: hsl(140 8% 50%);
|
|
--c-text-faint: hsl(140 8% 38%);
|
|
--c-text-faintest: hsl(140 10% 28%);
|
|
|
|
--c-accent: hsl(320 70% 62%);
|
|
--c-accent-soft: hsl(290 55% 34%);
|
|
--c-accent-text: hsl(320 75% 80%);
|
|
--c-accent-2: hsl(230 65% 62%);
|
|
--c-accent-3: hsl(50 65% 58%);
|
|
}
|
|
|
|
/* base hue 210 (blue): surfaces/borders/text tinted blue; accent complement
|
|
30 (orange), accent-soft composite 0 (red) */
|
|
html.blue {
|
|
--c-surface-0: hsl(210 32% 10%);
|
|
--c-surface-1: hsl(210 28% 16%);
|
|
--c-surface-2: hsl(210 26% 22%);
|
|
|
|
--c-border: hsl(210 24% 24%);
|
|
--c-border-soft: hsl(210 22% 33%);
|
|
--c-border-faint: hsl(210 28% 16%);
|
|
--c-border-strong: hsl(210 15% 62%);
|
|
|
|
--c-text: hsl(210 15% 94%);
|
|
--c-text-secondary: hsl(210 12% 82%);
|
|
--c-text-muted: hsl(210 10% 65%);
|
|
--c-text-subtle: hsl(210 8% 50%);
|
|
--c-text-faint: hsl(210 8% 38%);
|
|
--c-text-faintest: hsl(210 10% 28%);
|
|
|
|
--c-accent: hsl(30 70% 62%);
|
|
--c-accent-soft: hsl(0 55% 34%);
|
|
--c-accent-text: hsl(30 75% 80%);
|
|
--c-accent-2: hsl(300 65% 68%);
|
|
--c-accent-3: hsl(120 65% 55%);
|
|
}
|
|
|
|
/* base hue 50 (yellow): surfaces/borders/text tinted yellow; accent
|
|
complement 230 (blue), accent-soft composite 200 (azure) */
|
|
html.yellow {
|
|
--c-surface-0: hsl(50 32% 10%);
|
|
--c-surface-1: hsl(50 28% 16%);
|
|
--c-surface-2: hsl(50 26% 22%);
|
|
|
|
--c-border: hsl(50 24% 24%);
|
|
--c-border-soft: hsl(50 22% 33%);
|
|
--c-border-faint: hsl(50 28% 16%);
|
|
--c-border-strong: hsl(50 15% 62%);
|
|
|
|
--c-text: hsl(50 15% 94%);
|
|
--c-text-secondary: hsl(50 12% 82%);
|
|
--c-text-muted: hsl(50 10% 65%);
|
|
--c-text-subtle: hsl(50 8% 50%);
|
|
--c-text-faint: hsl(50 8% 38%);
|
|
--c-text-faintest: hsl(50 10% 28%);
|
|
|
|
--c-accent: hsl(230 70% 62%);
|
|
--c-accent-soft: hsl(200 55% 34%);
|
|
--c-accent-text: hsl(230 75% 80%);
|
|
--c-accent-2: hsl(140 65% 55%);
|
|
--c-accent-3: hsl(320 65% 68%);
|
|
}
|
|
|
|
/* base hue 330 (pink): surfaces/borders/text tinted pink; accent complement
|
|
150 (spring green), accent-soft composite 120 (green) */
|
|
html.pink {
|
|
--c-surface-0: hsl(330 32% 10%);
|
|
--c-surface-1: hsl(330 28% 16%);
|
|
--c-surface-2: hsl(330 26% 22%);
|
|
|
|
--c-border: hsl(330 24% 24%);
|
|
--c-border-soft: hsl(330 22% 33%);
|
|
--c-border-faint: hsl(330 28% 16%);
|
|
--c-border-strong: hsl(330 15% 62%);
|
|
|
|
--c-text: hsl(330 15% 94%);
|
|
--c-text-secondary: hsl(330 12% 82%);
|
|
--c-text-muted: hsl(330 10% 65%);
|
|
--c-text-subtle: hsl(330 8% 50%);
|
|
--c-text-faint: hsl(330 8% 38%);
|
|
--c-text-faintest: hsl(330 10% 28%);
|
|
|
|
--c-accent: hsl(150 70% 62%);
|
|
--c-accent-soft: hsl(120 55% 34%);
|
|
--c-accent-text: hsl(150 75% 80%);
|
|
--c-accent-2: hsl(60 65% 58%);
|
|
--c-accent-3: hsl(240 65% 68%);
|
|
}
|
|
|
|
/* base hue 30 (orange): surfaces/borders/text tinted orange; accent
|
|
complement 210 (blue), accent-soft composite 180 (cyan) */
|
|
html.orange {
|
|
--c-surface-0: hsl(30 32% 10%);
|
|
--c-surface-1: hsl(30 28% 16%);
|
|
--c-surface-2: hsl(30 26% 22%);
|
|
|
|
--c-border: hsl(30 24% 24%);
|
|
--c-border-soft: hsl(30 22% 33%);
|
|
--c-border-faint: hsl(30 28% 16%);
|
|
--c-border-strong: hsl(30 15% 62%);
|
|
|
|
--c-text: hsl(30 15% 94%);
|
|
--c-text-secondary: hsl(30 12% 82%);
|
|
--c-text-muted: hsl(30 10% 65%);
|
|
--c-text-subtle: hsl(30 8% 50%);
|
|
--c-text-faint: hsl(30 8% 38%);
|
|
--c-text-faintest: hsl(30 10% 28%);
|
|
|
|
--c-accent: hsl(210 70% 62%);
|
|
--c-accent-soft: hsl(180 55% 34%);
|
|
--c-accent-text: hsl(210 75% 80%);
|
|
--c-accent-2: hsl(120 65% 55%);
|
|
--c-accent-3: hsl(300 65% 68%);
|
|
}
|
|
|
|
/* Brighter, light-surfaced counterpart to `green` (ticket 048): same base
|
|
hue (140) and accent hues as `green`, but with a `light`-style inverted
|
|
surface/border/text scale (high lightness instead of low) so it reads as
|
|
a distinctly brighter theme, not a re-tint of the dark `green`. Danger
|
|
colours are `light`'s (hue-neutral), matching how `light` itself doesn't
|
|
tint danger either. */
|
|
html.light_green {
|
|
--c-surface-0: hsl(140 40% 96%);
|
|
--c-surface-1: hsl(140 35% 92%);
|
|
--c-surface-2: hsl(140 30% 85%);
|
|
|
|
--c-border: hsl(140 25% 80%);
|
|
--c-border-soft: hsl(140 22% 70%);
|
|
--c-border-faint: hsl(140 35% 92%);
|
|
--c-border-strong: hsl(140 20% 40%);
|
|
|
|
--c-text: hsl(140 30% 12%);
|
|
--c-text-secondary: hsl(140 20% 25%);
|
|
--c-text-muted: hsl(140 15% 40%);
|
|
--c-text-subtle: hsl(140 10% 50%);
|
|
--c-text-faint: hsl(140 10% 65%);
|
|
--c-text-faintest: hsl(140 12% 80%);
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: hsl(320 70% 40%);
|
|
--c-accent-soft: hsl(290 60% 85%);
|
|
--c-accent-text: hsl(320 75% 28%);
|
|
--c-accent-2: hsl(230 70% 45%);
|
|
--c-accent-3: hsl(50 70% 38%);
|
|
}
|
|
|
|
/* Brighter, light-surfaced counterpart to `red` (ticket 056): same base hue
|
|
(0) and accent hues as `red`, with `light`'s inverted surface/border/text
|
|
scale and `light`'s hue-neutral danger colours. */
|
|
html.light_red {
|
|
--c-surface-0: hsl(0 40% 96%);
|
|
--c-surface-1: hsl(0 35% 92%);
|
|
--c-surface-2: hsl(0 30% 85%);
|
|
|
|
--c-border: hsl(0 25% 80%);
|
|
--c-border-soft: hsl(0 22% 70%);
|
|
--c-border-faint: hsl(0 35% 92%);
|
|
--c-border-strong: hsl(0 20% 40%);
|
|
|
|
--c-text: hsl(0 30% 12%);
|
|
--c-text-secondary: hsl(0 20% 25%);
|
|
--c-text-muted: hsl(0 15% 40%);
|
|
--c-text-subtle: hsl(0 10% 50%);
|
|
--c-text-faint: hsl(0 10% 65%);
|
|
--c-text-faintest: hsl(0 12% 80%);
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: hsl(180 70% 40%);
|
|
--c-accent-soft: hsl(150 60% 85%);
|
|
--c-accent-text: hsl(180 75% 28%);
|
|
--c-accent-2: hsl(90 70% 45%);
|
|
--c-accent-3: hsl(270 70% 38%);
|
|
}
|
|
|
|
/* Brighter, light-surfaced counterpart to `blue` (ticket 056): same base hue
|
|
(210) and accent hues as `blue`, with `light`'s inverted surface/border/text
|
|
scale and `light`'s hue-neutral danger colours. */
|
|
html.light_blue {
|
|
--c-surface-0: hsl(210 40% 96%);
|
|
--c-surface-1: hsl(210 35% 92%);
|
|
--c-surface-2: hsl(210 30% 85%);
|
|
|
|
--c-border: hsl(210 25% 80%);
|
|
--c-border-soft: hsl(210 22% 70%);
|
|
--c-border-faint: hsl(210 35% 92%);
|
|
--c-border-strong: hsl(210 20% 40%);
|
|
|
|
--c-text: hsl(210 30% 12%);
|
|
--c-text-secondary: hsl(210 20% 25%);
|
|
--c-text-muted: hsl(210 15% 40%);
|
|
--c-text-subtle: hsl(210 10% 50%);
|
|
--c-text-faint: hsl(210 10% 65%);
|
|
--c-text-faintest: hsl(210 12% 80%);
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: hsl(30 70% 40%);
|
|
--c-accent-soft: hsl(0 60% 85%);
|
|
--c-accent-text: hsl(30 75% 28%);
|
|
--c-accent-2: hsl(300 70% 45%);
|
|
--c-accent-3: hsl(120 70% 38%);
|
|
}
|
|
|
|
/* Brighter, light-surfaced counterpart to `yellow` (ticket 056): same base
|
|
hue (50) and accent hues as `yellow`, with `light`'s inverted
|
|
surface/border/text scale and `light`'s hue-neutral danger colours. */
|
|
html.light_yellow {
|
|
--c-surface-0: hsl(50 40% 96%);
|
|
--c-surface-1: hsl(50 35% 92%);
|
|
--c-surface-2: hsl(50 30% 85%);
|
|
|
|
--c-border: hsl(50 25% 80%);
|
|
--c-border-soft: hsl(50 22% 70%);
|
|
--c-border-faint: hsl(50 35% 92%);
|
|
--c-border-strong: hsl(50 20% 40%);
|
|
|
|
--c-text: hsl(50 30% 12%);
|
|
--c-text-secondary: hsl(50 20% 25%);
|
|
--c-text-muted: hsl(50 15% 40%);
|
|
--c-text-subtle: hsl(50 10% 50%);
|
|
--c-text-faint: hsl(50 10% 65%);
|
|
--c-text-faintest: hsl(50 12% 80%);
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: hsl(230 70% 40%);
|
|
--c-accent-soft: hsl(200 60% 85%);
|
|
--c-accent-text: hsl(230 75% 28%);
|
|
--c-accent-2: hsl(140 70% 45%);
|
|
--c-accent-3: hsl(320 70% 38%);
|
|
}
|
|
|
|
/* Brighter, light-surfaced counterpart to `pink` (ticket 056): same base hue
|
|
(330) and accent hues as `pink`, with `light`'s inverted surface/border/text
|
|
scale and `light`'s hue-neutral danger colours. */
|
|
html.light_pink {
|
|
--c-surface-0: hsl(330 40% 96%);
|
|
--c-surface-1: hsl(330 35% 92%);
|
|
--c-surface-2: hsl(330 30% 85%);
|
|
|
|
--c-border: hsl(330 25% 80%);
|
|
--c-border-soft: hsl(330 22% 70%);
|
|
--c-border-faint: hsl(330 35% 92%);
|
|
--c-border-strong: hsl(330 20% 40%);
|
|
|
|
--c-text: hsl(330 30% 12%);
|
|
--c-text-secondary: hsl(330 20% 25%);
|
|
--c-text-muted: hsl(330 15% 40%);
|
|
--c-text-subtle: hsl(330 10% 50%);
|
|
--c-text-faint: hsl(330 10% 65%);
|
|
--c-text-faintest: hsl(330 12% 80%);
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: hsl(150 70% 40%);
|
|
--c-accent-soft: hsl(120 60% 85%);
|
|
--c-accent-text: hsl(150 75% 28%);
|
|
--c-accent-2: hsl(60 70% 45%);
|
|
--c-accent-3: hsl(240 70% 38%);
|
|
}
|
|
|
|
/* Brighter, light-surfaced counterpart to `orange` (ticket 056): same base
|
|
hue (30) and accent hues as `orange`, with `light`'s inverted
|
|
surface/border/text scale and `light`'s hue-neutral danger colours. */
|
|
html.light_orange {
|
|
--c-surface-0: hsl(30 40% 96%);
|
|
--c-surface-1: hsl(30 35% 92%);
|
|
--c-surface-2: hsl(30 30% 85%);
|
|
|
|
--c-border: hsl(30 25% 80%);
|
|
--c-border-soft: hsl(30 22% 70%);
|
|
--c-border-faint: hsl(30 35% 92%);
|
|
--c-border-strong: hsl(30 20% 40%);
|
|
|
|
--c-text: hsl(30 30% 12%);
|
|
--c-text-secondary: hsl(30 20% 25%);
|
|
--c-text-muted: hsl(30 15% 40%);
|
|
--c-text-subtle: hsl(30 10% 50%);
|
|
--c-text-faint: hsl(30 10% 65%);
|
|
--c-text-faintest: hsl(30 12% 80%);
|
|
|
|
--c-danger-bg: #fee2e2;
|
|
--c-danger-border: #fca5a5;
|
|
--c-danger-text: #b91c1c;
|
|
--c-danger-text-strong: #991b1b;
|
|
|
|
--c-accent: hsl(210 70% 40%);
|
|
--c-accent-soft: hsl(180 60% 85%);
|
|
--c-accent-text: hsl(210 75% 28%);
|
|
--c-accent-2: hsl(120 70% 45%);
|
|
--c-accent-3: hsl(300 70% 38%);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-surface-0: var(--c-surface-0);
|
|
--color-surface-1: var(--c-surface-1);
|
|
--color-surface-2: var(--c-surface-2);
|
|
|
|
--color-border: var(--c-border);
|
|
--color-border-soft: var(--c-border-soft);
|
|
--color-border-faint: var(--c-border-faint);
|
|
--color-border-strong: var(--c-border-strong);
|
|
|
|
--color-text: var(--c-text);
|
|
--color-text-secondary: var(--c-text-secondary);
|
|
--color-text-muted: var(--c-text-muted);
|
|
--color-text-subtle: var(--c-text-subtle);
|
|
--color-text-faint: var(--c-text-faint);
|
|
--color-text-faintest: var(--c-text-faintest);
|
|
|
|
--color-danger-bg: var(--c-danger-bg);
|
|
--color-danger-border: var(--c-danger-border);
|
|
--color-danger-text: var(--c-danger-text);
|
|
--color-danger-text-strong: var(--c-danger-text-strong);
|
|
|
|
--color-accent: var(--c-accent);
|
|
--color-accent-soft: var(--c-accent-soft);
|
|
--color-accent-text: var(--c-accent-text);
|
|
--color-accent-2: var(--c-accent-2);
|
|
--color-accent-3: var(--c-accent-3);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface-0 text-text;
|
|
font: 14px/1.5 ui-monospace, Consolas, monospace;
|
|
}
|