From 57c17647e3ad77ff07bc6f034d86b09c384000ec Mon Sep 17 00:00:00 2001 From: librelad Date: Fri, 29 May 2026 22:49:39 +0100 Subject: [PATCH] =?UTF-8?q?feat(webui):=20phase=201a=20=E2=80=94=20shared?= =?UTF-8?q?=20base=20token=20layer=20(tokens.css)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Signed-off-by: librelad --- containers/libreportal/frontend/css/admin.css | 12 ++------- containers/libreportal/frontend/index.html | 2 ++ .../frontend/shared/css/tokens.css | 27 +++++++++++++++++++ 3 files changed, 31 insertions(+), 10 deletions(-) create mode 100644 containers/libreportal/frontend/shared/css/tokens.css diff --git a/containers/libreportal/frontend/css/admin.css b/containers/libreportal/frontend/css/admin.css index a28a7f1..2a3eba2 100644 --- a/containers/libreportal/frontend/css/admin.css +++ b/containers/libreportal/frontend/css/admin.css @@ -1,16 +1,8 @@ /* Admin area — Overview board + shared admin-page chrome. Visually aligned with the backup dashboard (tile/card style) and the config page header. */ -:root { - /* Per-area identity hues. Each admin area owns one colour, reused going - forward (Overview action buttons today; page headers/accents next). - The *-rgb companions feed rgba() tints. */ - --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; -} +/* Per-area identity hues (--page-*) now live in shared/css/tokens.css so they + are part of the always-present base token layer. */ .admin-page { padding: 4px 2px 40px; diff --git a/containers/libreportal/frontend/index.html b/containers/libreportal/frontend/index.html index d40c5ee..4980170 100755 --- a/containers/libreportal/frontend/index.html +++ b/containers/libreportal/frontend/index.html @@ -10,6 +10,8 @@ + + diff --git a/containers/libreportal/frontend/shared/css/tokens.css b/containers/libreportal/frontend/shared/css/tokens.css new file mode 100644 index 0000000..adbc6b2 --- /dev/null +++ b/containers/libreportal/frontend/shared/css/tokens.css @@ -0,0 +1,27 @@ +/* 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//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; +}