mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-10-31 11:55:13 +08:00
283 lines
12 KiB
CSS
283 lines
12 KiB
CSS
@layer tokens {
|
|
/* five colourways, one block per (palette x mode). docs/design-system.md "Palettes";
|
|
* adding one: "Adding a palette". */
|
|
|
|
/* --fs-bg washed by hue tint; --fs-bg-base dodges a self-reference cycle (invalid at
|
|
* computed-value time). docs/design-system.md "Tint and Accent". */
|
|
:root {
|
|
--fs-bg: var(--fs-bg-base);
|
|
/* derived from -base so the accent-hue axis has one copy to rotate */
|
|
--fs-accent: var(--fs-accent-base);
|
|
/* tint OF --fs-accent, mixed FROM it so it never goes stale. LIGHT only; each dark block
|
|
* below overrides its own. */
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
|
|
/* surfaces + status: raw per palette, derived form is read everywhere else */
|
|
--fs-panel: var(--fs-panel-base);
|
|
--fs-panel2: var(--fs-panel2-base);
|
|
--fs-border: var(--fs-border-base);
|
|
--fs-good: var(--fs-good-base);
|
|
--fs-warn: var(--fs-warn-base);
|
|
--fs-danger: var(--fs-danger-base);
|
|
/* deliberately under AA — the "nothing here" ink, held by `npm run placeholder`.
|
|
* docs/design-system.md "The fourth ink is the one". */
|
|
--fs-placeholder-mix: 55%;
|
|
--fs-placeholder: color-mix(in oklch, var(--fs-text) var(--fs-placeholder-mix), var(--fs-panel2));
|
|
/* declared here too, so the sheet stands alone — an undefined var() invalidates the rule */
|
|
--fs-accent-h: 0;
|
|
--fs-tint-h: 0;
|
|
--fs-good-h: 0;
|
|
--fs-warn-h: 0;
|
|
--fs-danger-h: 0;
|
|
/* multiplier on the tint chroma below (Tint strength, not Density). docs/design-system.md
|
|
* "Tint and Accent". */
|
|
--fs-tint-strength: 1;
|
|
/* inert default; head.ut/fs-prefs.js stamp the real url() inline */
|
|
--fs-login-bg-url: none;
|
|
/* scrim over a File photo, mixed from --fs-bg-base so tint never leaks onto it */
|
|
--fs-photo-dim: 74%;
|
|
--fs-photo-scrim: color-mix(in srgb, var(--fs-bg-base) var(--fs-photo-dim), transparent);
|
|
/* tiled pattern axes; .2 is where a hairline reads as a drawing, not texture (.15 is swallowed) */
|
|
--fs-pattern-url: none;
|
|
--fs-pattern-size: 440px;
|
|
--fs-pattern-strength: .2;
|
|
/* floor + two cos() terms, not flat chroma. docs/design-system.md "Tint and Accent". */
|
|
--fs-tint-c: calc((.016 + .012 * max(0, cos((var(--fs-tint-h) - 258) * 1deg))) * var(--fs-tint-strength));
|
|
}
|
|
:root[data-darkmode="true"] {
|
|
--fs-tint-c: calc((.011 + .016 * max(0, cos((var(--fs-tint-h) - 258) * 1deg))
|
|
- .004 * max(0, cos((var(--fs-tint-h) - 55) * 1deg))) * var(--fs-tint-strength));
|
|
/* per-mode, not per-palette — see the placeholder-mix note above */
|
|
--fs-placeholder-mix: 64%;
|
|
}
|
|
:root[data-tint="hue"] { --fs-bg: oklch(from var(--fs-bg-base) l var(--fs-tint-c) var(--fs-tint-h)); }
|
|
|
|
/* hue mode rotates via oklch(from…); hex mode is stamped inline and re-derives the ink below */
|
|
:root[data-accent="hue"] { --fs-accent: oklch(from var(--fs-accent-base) l c var(--fs-accent-h)); }
|
|
:root[data-good="hue"] { --fs-good: oklch(from var(--fs-good-base) l c var(--fs-good-h)); }
|
|
:root[data-warn="hue"] { --fs-warn: oklch(from var(--fs-warn-base) l c var(--fs-warn-h)); }
|
|
:root[data-danger="hue"] { --fs-danger: oklch(from var(--fs-danger-base) l c var(--fs-danger-h)); }
|
|
|
|
/* hex ink must outrank a NAMED palette's dark block ([data-palette=…][data-darkmode="true"],
|
|
* (0,3,0)); triple attribute makes it (0,4,0) */
|
|
:root[data-accent="hex"][data-accent][data-accent] { --fs-on-accent: oklch(from var(--fs-accent) clamp(0, (l - .62) * -100, 1) 0 0); }
|
|
:root[data-good="hex"][data-good][data-good] { --fs-on-good: oklch(from var(--fs-good) clamp(0, (l - .62) * -100, 1) 0 0); }
|
|
:root[data-warn="hex"][data-warn][data-warn] { --fs-on-warn: oklch(from var(--fs-warn) clamp(0, (l - .62) * -100, 1) 0 0); }
|
|
:root[data-danger="hex"][data-danger][data-danger] { --fs-on-danger: oklch(from var(--fs-danger) clamp(0, (l - .62) * -100, 1) 0 0); }
|
|
|
|
/* ---- footstrap — GitHub Primer (DEFAULT, also fills bare :root) ---- */
|
|
/* never matches (both appliers REMOVE it for the default) — kept so :root need not duplicate
|
|
* the derive rule above */
|
|
:root,
|
|
:root[data-palette="footstrap"] {
|
|
/* LIGHT */
|
|
--fs-bg-base: #f6f8fa;
|
|
--fs-panel-base: #fff;
|
|
--fs-panel2-base: #f6f8fa;
|
|
--fs-border-base: #d0d7de;
|
|
--fs-text: #1f2328;
|
|
/* raised past AA — GitHub-light greys read as 5.2/4.9:1 on the card (page descriptions,
|
|
* field titles), now 11.8/10.0:1 */
|
|
--fs-dim: #33383d;
|
|
--fs-faint: #3d4348;
|
|
--fs-accent-base: #0969da;
|
|
--fs-track: #eaeef2;
|
|
--fs-good-base: #197c36;
|
|
--fs-warn-base: #946300;
|
|
--fs-danger-base: #cf222e;
|
|
/* ink ON the fills above — white clears AA on all four: 5.19/5.28/5.19/5.36. --fs-panel-base
|
|
* and these four inks are the same #fff in every light palette below, so THIS is their
|
|
* only definition — hicontrast/bootstrap/2020/forum's light blocks inherit them, unset.
|
|
* docs/design-system.md "Adding a palette". */
|
|
--fs-on-accent: #fff;
|
|
--fs-on-good: #fff;
|
|
--fs-on-warn: #fff;
|
|
--fs-on-danger: #fff;
|
|
}
|
|
:root[data-darkmode="true"],
|
|
:root[data-palette="footstrap"][data-darkmode="true"] {
|
|
/* DARK (dimmed) */
|
|
--fs-bg-base: #1c2128;
|
|
--fs-panel-base: #22272e;
|
|
--fs-panel2-base: #2d333b;
|
|
--fs-border-base: #444c56;
|
|
--fs-text: #adbac7;
|
|
--fs-dim: #8f9cab;
|
|
--fs-faint: #959ca5;
|
|
--fs-accent-base: #569df5;
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent);
|
|
--fs-track: #373e47;
|
|
--fs-good-base: #5aad5d;
|
|
--fs-warn-base: #c79128;
|
|
--fs-danger-base: #ea7a74;
|
|
/* dark ink: fills are light; white fails all four (2.79 worst), #10151c (a shade of
|
|
* --fs-bg) clears them (6.55 worst) */
|
|
--fs-on-accent: #10151c;
|
|
--fs-on-good: #10151c;
|
|
--fs-on-warn: #10151c;
|
|
--fs-on-danger: #10151c;
|
|
}
|
|
|
|
/* ---- hicontrast — deeper, more saturated (opt-in); docs/design-system.md "Palettes" ---- */
|
|
:root[data-palette="hicontrast"] {
|
|
/* LIGHT — accents DARKER than the default's on purpose: 5.22/5.35/5.93/5.80 vs its 5.08. */
|
|
--fs-bg-base: #eef1f6;
|
|
--fs-panel2-base: #f6f8fb;
|
|
--fs-border-base: #e4e9f1;
|
|
--fs-text: #101725;
|
|
--fs-dim: #272f3d;
|
|
--fs-faint: #2e3745;
|
|
--fs-accent-base: #0b6fbd;
|
|
--fs-track: #eaeef4;
|
|
--fs-good-base: #0f7a52;
|
|
--fs-warn-base: #8a5a00;
|
|
--fs-danger-base: #c02b2b;
|
|
}
|
|
:root[data-palette="hicontrast"][data-darkmode="true"] {
|
|
/* DARK */
|
|
--fs-bg-base: #0a0d13;
|
|
--fs-panel-base: #111620;
|
|
--fs-panel2-base: #161c28;
|
|
--fs-border-base: #232b3a;
|
|
--fs-text: #e8edf5;
|
|
--fs-dim: #9ba6b8;
|
|
--fs-faint: #8f9aad;
|
|
--fs-accent-base: #3ba7ff;
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 14%, transparent);
|
|
--fs-track: #1b2230;
|
|
--fs-good-base: #43e0a0;
|
|
--fs-warn-base: #ffb454;
|
|
--fs-danger-base: #ff6b6b;
|
|
/* dark ink: white on these neons fails (2.57 worst), #0a0d13 (=--fs-bg-base) clears
|
|
* (7.01 worst) */
|
|
--fs-on-accent: #0a0d13;
|
|
--fs-on-good: #0a0d13;
|
|
--fs-on-warn: #0a0d13;
|
|
--fs-on-danger: #0a0d13;
|
|
}
|
|
|
|
/* ---- bootstrap — luci-theme-bootstrap's own colours (opt-in). docs/design-system.md
|
|
* "Palettes" ("bootstrap"). ---- */
|
|
:root[data-palette="bootstrap"] {
|
|
/* LIGHT — white ink on the fills below clears AA on all four: 5.81/5.54/5.40/5.70. */
|
|
--fs-bg-base: #fff;
|
|
--fs-panel2-base: #f5f5f5;
|
|
--fs-border-base: #ccc;
|
|
--fs-text: #232323;
|
|
--fs-dim: #383838;
|
|
--fs-faint: #424242;
|
|
/* --primary-color-medium; -high (#1976d2) measured 4.22:1 on --fs-panel2 */
|
|
--fs-accent-base: #1564c0;
|
|
--fs-track: #eee;
|
|
--fs-good-base: #007936; /* --success-color-low */
|
|
--fs-warn-base: #826706; /* #efbd0b darkened; 1.61:1 as text is not a rounding error */
|
|
--fs-danger-base: #d00000; /* --error-color-low */
|
|
}
|
|
:root[data-palette="bootstrap"][data-darkmode="true"] {
|
|
/* DARK */
|
|
--fs-bg-base: #222;
|
|
--fs-panel-base: #282828;
|
|
/* raised past bootstrap's own value: docs/design-system.md "Palettes" ("bootstrap") */
|
|
--fs-panel2-base: #303030;
|
|
--fs-border-base: #444;
|
|
--fs-text: #bfbfbf;
|
|
/* --fs-dim/--fs-faint construction, not bootstrap's own — see the panel2 note above */
|
|
--fs-dim: #a6a6a6;
|
|
--fs-faint: #9a9a9a;
|
|
--fs-accent-base: #53a4c2;
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent);
|
|
--fs-track: #333;
|
|
--fs-good-base: #1aaf7b;
|
|
--fs-warn-base: #aa9968;
|
|
--fs-danger-base: #dd807e;
|
|
/* dark ink: light fills, dark ink — matches bootstrap's own --on-*-color; #222 gives
|
|
* 5.65 on all four */
|
|
--fs-on-accent: #222;
|
|
--fs-on-good: #222;
|
|
--fs-on-warn: #222;
|
|
--fs-on-danger: #222;
|
|
}
|
|
/* ---- 2020 — the OpenWrt 2020 theme's colourway (opt-in), split into a pair.
|
|
* docs/design-system.md "Palettes" ("2020"). ---- */
|
|
:root[data-palette="2020"] {
|
|
/* LIGHT — white content, the CI cyan darkened until it can be read on it. */
|
|
--fs-bg-base: #fff;
|
|
--fs-panel2-base: #eef4f8;
|
|
--fs-border-base: #c3d2dd;
|
|
/* navy-tinted neutrals rather than grey: the ink belongs to the same scheme as the accent */
|
|
--fs-text: #10202b;
|
|
--fs-dim: #2c4150;
|
|
--fs-faint: #3d5566;
|
|
/* #00B5E2 held at hue, taken down until it reads: 5.89:1 on white against its own 2.09:1 */
|
|
--fs-accent-base: #036c92;
|
|
--fs-track: #e3ebf1;
|
|
--fs-good-base: #276e2a; /* #5CB85C darkened; 2.28:1 as text is not a rounding error */
|
|
--fs-warn-base: #8a5a00; /* #C80, same move */
|
|
--fs-danger-base: #c1121f; /* #C11 is 5.25:1 already — the one that stays where it was */
|
|
}
|
|
:root[data-palette="2020"][data-darkmode="true"] {
|
|
/* DARK — 2020's own scheme: the navy is the canvas and the cyan is nearly untouched */
|
|
--fs-bg-base: #002b49;
|
|
--fs-panel-base: #0a3a58;
|
|
--fs-panel2-base: #0e4362;
|
|
--fs-border-base: #1d5a7d;
|
|
--fs-text: #e6f1f7;
|
|
--fs-dim: #b8cfdd;
|
|
--fs-faint: #9dbccd;
|
|
/* the CI cyan, one step up so it clears AA on the lightest of the three surfaces too */
|
|
--fs-accent-base: #35c6ea;
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent);
|
|
--fs-track: #123c56;
|
|
--fs-good-base: #74cc74; /* #5CB85C lifted for the same reason */
|
|
--fs-warn-base: #eab346;
|
|
--fs-danger-base: #ff9d9d;
|
|
/* these fills are LIGHT, so the ink is the canvas navy itself */
|
|
--fs-on-accent: #002b49;
|
|
--fs-on-good: #002b49;
|
|
--fs-on-warn: #002b49;
|
|
--fs-on-danger: #002b49;
|
|
}
|
|
/* ---- forum — sampled from forum.openwrt.org's own getComputedStyle (opt-in).
|
|
* docs/design-system.md "Palettes" ("forum"). ---- */
|
|
:root[data-palette="forum"] {
|
|
/* LIGHT — the forum's own page, exactly: white canvas, near-black ink. white on the
|
|
* fills below: 5.19/5.14/5.17/5.17. */
|
|
--fs-bg-base: #fff;
|
|
--fs-panel2-base: #f0f0f0;
|
|
--fs-border-base: #ddd;
|
|
--fs-text: #222;
|
|
--fs-dim: #3d3d3d;
|
|
--fs-faint: #4a4a4a;
|
|
/* sampled #08c 3.89:1/4.49:1 (panel2 fails the 4.5:1 floor); held hue to 5.19:1/4.55:1 */
|
|
--fs-accent-base: #0073ac;
|
|
--fs-track: #eee;
|
|
/* sampled #090 3.78:1; #ffff4d (highlight, fills warn) 1.07:1 as text */
|
|
--fs-good-base: #008000;
|
|
--fs-warn-base: #717100;
|
|
--fs-danger-base: #c63c1b;
|
|
}
|
|
:root[data-palette="forum"][data-darkmode="true"] {
|
|
/* DARK — the forum's own dark scheme: #222 canvas, #ddd ink, both exactly as sampled */
|
|
--fs-bg-base: #222;
|
|
--fs-panel-base: #262626;
|
|
--fs-panel2-base: #2e2e2e;
|
|
--fs-border-base: #3a3a3a;
|
|
--fs-text: #ddd;
|
|
--fs-dim: #a3a3a3;
|
|
--fs-faint: #969696;
|
|
/* sampled #0f82af 3.66:1/3.12:1 on bg/panel2, under 4.5:1; held the hue to 5.86:1/5.00:1 */
|
|
--fs-accent-base: #13a8e3;
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent);
|
|
--fs-track: #333;
|
|
--fs-good-base: #1fb65a;
|
|
--fs-warn-base: #c99259;
|
|
--fs-danger-base: #eb8066;
|
|
/* dark ink: these fills are light, and #222 (= --fs-bg-base) gives 5.86/5.98/5.86/5.92 */
|
|
--fs-on-accent: #222;
|
|
--fs-on-good: #222;
|
|
--fs-on-warn: #222;
|
|
--fs-on-danger: #222;
|
|
/* overrides --fs-bar-bg: forum's own masthead navy, measured live */
|
|
--fs-bar-bg: #002b49;
|
|
}
|
|
}
|