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>
28 lines
1.6 KiB
CSS
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;
|
|
}
|