Resolve ui stuff
This commit is contained in:
Hugh Kaznowski
+128
-112
@@ -1,5 +1,12 @@
|
||||
@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,
|
||||
@@ -9,16 +16,19 @@
|
||||
* so re-declaring the `--c-*` variables under a `html.<theme>` selector
|
||||
* re-skins the whole app with no per-component changes.
|
||||
*
|
||||
* Derivation: surfaces/borders/text are always neutral (S=0) greys, never
|
||||
* hue-tinted. `dark`/`grey` share one true black-based grey scale, `light`
|
||||
* is its exact lightness mirror. Each named theme (red/green/blue/yellow/
|
||||
* pink/orange) takes its hue's real Tailwind swatch at each scale step,
|
||||
* converts it to HSL, zeroes the saturation, and keeps that lightness as
|
||||
* its grey — so e.g. red's surface-0 is grey at red-950's lightness, not
|
||||
* neutral-950. Colour survives only on --c-accent*. To add a new themed
|
||||
* variant: pick its hue's Tailwind swatches at 950/900/800/700/600/500/
|
||||
* 400/300/100, desaturate each (HSL S->0), and slot the greys into the
|
||||
* same --c-surface-*/--c-border-*/--c-text-* roles used below.
|
||||
* Derivation: `dark`/`grey` share one true black-based neutral (S=0) scale,
|
||||
* `light` is its exact lightness mirror — these three stay grey throughout.
|
||||
* 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, ...).
|
||||
*/
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
@@ -102,142 +112,148 @@ html.grey {
|
||||
--c-accent-text: #7dd3fc;
|
||||
}
|
||||
|
||||
/* red-950..300/100 desaturated (S->0), lightness kept */
|
||||
/* base hue 0 (red): surfaces/borders/text tinted red; accent complement 180
|
||||
(cyan), accent-soft composite 150 (spring green) */
|
||||
html.red {
|
||||
--c-surface-0: #282828;
|
||||
--c-surface-1: #4e4e4e;
|
||||
--c-surface-2: #5a5a5a;
|
||||
--c-surface-0: hsl(0 32% 10%);
|
||||
--c-surface-1: hsl(0 28% 16%);
|
||||
--c-surface-2: hsl(0 26% 22%);
|
||||
|
||||
--c-border: #5a5a5a;
|
||||
--c-border-soft: #6a6a6a;
|
||||
--c-border-faint: #4e4e4e;
|
||||
--c-border-strong: #b4b4b4;
|
||||
--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: #f0f0f0;
|
||||
--c-text-secondary: #d0d0d0;
|
||||
--c-text-muted: #b4b4b4;
|
||||
--c-text-subtle: #9a9a9a;
|
||||
--c-text-faint: #818181;
|
||||
--c-text-faintest: #6a6a6a;
|
||||
--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: #f87171;
|
||||
--c-accent-soft: #b91c1c;
|
||||
--c-accent-text: #fca5a5;
|
||||
--c-accent: hsl(180 70% 62%);
|
||||
--c-accent-soft: hsl(150 55% 34%);
|
||||
--c-accent-text: hsl(180 75% 80%);
|
||||
}
|
||||
|
||||
/* green-950..300/100 desaturated (S->0), lightness kept */
|
||||
/* base hue 140 (green): surfaces/borders/text tinted green; accent complement
|
||||
320 (magenta), accent-soft composite 290 (purple) */
|
||||
html.green {
|
||||
--c-surface-0: #1a1a1a;
|
||||
--c-surface-1: #343434;
|
||||
--c-surface-2: #3d3d3d;
|
||||
--c-surface-0: hsl(140 32% 10%);
|
||||
--c-surface-1: hsl(140 28% 16%);
|
||||
--c-surface-2: hsl(140 26% 22%);
|
||||
|
||||
--c-border: #3d3d3d;
|
||||
--c-border-soft: #4a4a4a;
|
||||
--c-border-faint: #343434;
|
||||
--c-border-strong: #949494;
|
||||
--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: #ececec;
|
||||
--c-text-secondary: #bbbbbb;
|
||||
--c-text-muted: #949494;
|
||||
--c-text-subtle: #747474;
|
||||
--c-text-faint: #5c5c5c;
|
||||
--c-text-faintest: #4a4a4a;
|
||||
--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: #4ade80;
|
||||
--c-accent-soft: #15803d;
|
||||
--c-accent-text: #86efac;
|
||||
--c-accent: hsl(320 70% 62%);
|
||||
--c-accent-soft: hsl(290 55% 34%);
|
||||
--c-accent-text: hsl(320 75% 80%);
|
||||
}
|
||||
|
||||
/* blue-950..300/100 desaturated (S->0), lightness kept */
|
||||
/* base hue 210 (blue): surfaces/borders/text tinted blue; accent complement
|
||||
30 (orange), accent-soft composite 0 (red) */
|
||||
html.blue {
|
||||
--c-surface-0: #363636;
|
||||
--c-surface-1: #545454;
|
||||
--c-surface-2: #666666;
|
||||
--c-surface-0: hsl(210 32% 10%);
|
||||
--c-surface-1: hsl(210 28% 16%);
|
||||
--c-surface-2: hsl(210 26% 22%);
|
||||
|
||||
--c-border: #666666;
|
||||
--c-border-soft: #7a7a7a;
|
||||
--c-border-faint: #545454;
|
||||
--c-border-strong: #adadad;
|
||||
--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: #ececec;
|
||||
--c-text-secondary: #c8c8c8;
|
||||
--c-text-muted: #adadad;
|
||||
--c-text-subtle: #989898;
|
||||
--c-text-faint: #888888;
|
||||
--c-text-faintest: #7a7a7a;
|
||||
--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: #60a5fa;
|
||||
--c-accent-soft: #1d4ed8;
|
||||
--c-accent-text: #93c5fd;
|
||||
--c-accent: hsl(30 70% 62%);
|
||||
--c-accent-soft: hsl(0 55% 34%);
|
||||
--c-accent-text: hsl(30 75% 80%);
|
||||
}
|
||||
|
||||
/* yellow-950..300/100 desaturated (S->0), lightness kept */
|
||||
/* base hue 50 (yellow): surfaces/borders/text tinted yellow; accent
|
||||
complement 230 (blue), accent-soft composite 200 (azure) */
|
||||
html.yellow {
|
||||
--c-surface-0: #242424;
|
||||
--c-surface-1: #424242;
|
||||
--c-surface-2: #4a4a4a;
|
||||
--c-surface-0: hsl(50 32% 10%);
|
||||
--c-surface-1: hsl(50 28% 16%);
|
||||
--c-surface-2: hsl(50 26% 22%);
|
||||
|
||||
--c-border: #4a4a4a;
|
||||
--c-border-soft: #545454;
|
||||
--c-border-faint: #424242;
|
||||
--c-border-strong: #888888;
|
||||
--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: #e0e0e0;
|
||||
--c-text-secondary: #a2a2a2;
|
||||
--c-text-muted: #888888;
|
||||
--c-text-subtle: #797979;
|
||||
--c-text-faint: #676767;
|
||||
--c-text-faintest: #545454;
|
||||
--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: #facc15;
|
||||
--c-accent-soft: #a16207;
|
||||
--c-accent-text: #fde047;
|
||||
--c-accent: hsl(230 70% 62%);
|
||||
--c-accent-soft: hsl(200 55% 34%);
|
||||
--c-accent-text: hsl(230 75% 80%);
|
||||
}
|
||||
|
||||
/* pink-950..300/100 desaturated (S->0), lightness kept */
|
||||
/* base hue 330 (pink): surfaces/borders/text tinted pink; accent complement
|
||||
150 (spring green), accent-soft composite 120 (green) */
|
||||
html.pink {
|
||||
--c-surface-0: #2c2c2c;
|
||||
--c-surface-1: #4e4e4e;
|
||||
--c-surface-2: #5a5a5a;
|
||||
--c-surface-0: hsl(330 32% 10%);
|
||||
--c-surface-1: hsl(330 28% 16%);
|
||||
--c-surface-2: hsl(330 26% 22%);
|
||||
|
||||
--c-border: #5a5a5a;
|
||||
--c-border-soft: #6b6b6b;
|
||||
--c-border-faint: #4e4e4e;
|
||||
--c-border-strong: #b3b3b3;
|
||||
--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: #f2f2f2;
|
||||
--c-text-secondary: #d0d0d0;
|
||||
--c-text-muted: #b3b3b3;
|
||||
--c-text-subtle: #9a9a9a;
|
||||
--c-text-faint: #818181;
|
||||
--c-text-faintest: #6b6b6b;
|
||||
--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: #f472b6;
|
||||
--c-accent-soft: #be185d;
|
||||
--c-accent-text: #f9a8d4;
|
||||
--c-accent: hsl(150 70% 62%);
|
||||
--c-accent-soft: hsl(120 55% 34%);
|
||||
--c-accent-text: hsl(150 75% 80%);
|
||||
}
|
||||
|
||||
/* orange-950..300/100 desaturated (S->0), lightness kept */
|
||||
/* base hue 30 (orange): surfaces/borders/text tinted orange; accent
|
||||
complement 210 (blue), accent-soft composite 180 (cyan) */
|
||||
html.orange {
|
||||
--c-surface-0: #252525;
|
||||
--c-surface-1: #474747;
|
||||
--c-surface-2: #565656;
|
||||
--c-surface-0: hsl(30 32% 10%);
|
||||
--c-surface-1: hsl(30 28% 16%);
|
||||
--c-surface-2: hsl(30 26% 22%);
|
||||
|
||||
--c-border: #565656;
|
||||
--c-border-soft: #676767;
|
||||
--c-border-faint: #474747;
|
||||
--c-border-strong: #9b9b9b;
|
||||
--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: #eaeaea;
|
||||
--c-text-secondary: #b8b8b8;
|
||||
--c-text-muted: #9b9b9b;
|
||||
--c-text-subtle: #888888;
|
||||
--c-text-faint: #7b7b7b;
|
||||
--c-text-faintest: #676767;
|
||||
--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: #fb923c;
|
||||
--c-accent-soft: #c2410c;
|
||||
--c-accent-text: #fdba74;
|
||||
--c-accent: hsl(210 70% 62%);
|
||||
--c-accent-soft: hsl(180 55% 34%);
|
||||
--c-accent-text: hsl(210 75% 80%);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
|
||||
Reference in New Issue
Block a user