librelad 57c17647e3 feat(webui): phase 1a — shared base token layer (tokens.css)
First slice of the per-module CSS strategy: introduce
shared/css/tokens.css as the always-present, theme-agnostic base token
layer, loaded before all other stylesheets.

- Defines --font-mono (ui-monospace stack). Several feature sheets used
  var(--font-mono, monospace) with no definition, falling back to bare
  monospace; this unifies them with the richer stack used elsewhere.
- Hoists the --page-* identity hues out of css/admin.css so they belong
  to the base layer rather than the admin stylesheet. Values unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
2026-05-29 22:49:39 +01:00

28 lines
1.6 KiB
CSS

/* shared/css/tokens.css — the always-present base token layer.
*
* First piece of the per-module CSS strategy (docs/frontend-modularization.md
* §5). Palette tokens that are NOT theme-specific live here under :root so they
* are defined exactly once and globally, instead of being stranded inside a
* feature stylesheet. Theme files (/themes/<name>/theme.css) still own the
* theme-specific palette under [data-theme]; this layer is theme-agnostic.
*
* Loaded early (before feature stylesheets) so every feature can rely on these.
*/
:root {
/* Monospace stack. Several feature sheets reference var(--font-mono,
monospace) — until now it was undefined, so those fields fell back to
bare `monospace`. Defining it here unifies them with the richer stack
the rest of the UI already uses (services.css, backup snapshot rows). */
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Per-area identity hues. Each admin/feature area owns one colour, reused
for action buttons and page accents. The *-rgb companions feed rgba()
tints (e.g. .admin-action-btn). Hoisted out of css/admin.css so they are
part of the base layer rather than tied to the admin stylesheet loading. */
--page-updates: #4f8cff; --page-updates-rgb: 79, 140, 255; /* Update now */
--page-verify: #1fb88a; --page-verify-rgb: 31, 184, 138; /* Verify — green by convention */
--page-backups: #4f8cff; --page-backups-rgb: 79, 140, 255; /* Backups — blue */
--page-ssh: #9b7bf0; --page-ssh-rgb: 155, 123, 240;
--page-system: #f0883e; --page-system-rgb: 240, 136, 62;
}