@scalio-cloud/ui 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.22.0
+Login, Navigation und Banner vereinheitlichen (scalio-docs UISPEC section 3, ADR 0042 Nachtrag 2026-11-01).
+- **Notice in the look of the test mode banner:** thin frame in the tone, 3px bar on the left, tinted background,
+  icon in the tone, text in the normal text colour (also for errors). Colours: red = `error` (Fehler), orange = `warn`
+  (wichtig), green = `ok` (gute Meldung), blue = `info` (Aktion). New aliases `important`, `success`, `action`
+  (`noticeKind`). Banners keep the full frame; stacked banners share one line. Dark mode has its own tones.
+- `SelfTestBanner` is now a `Notice` banner (kind warn) and takes an optional `action` (e.g. link to «Tests»).
+- **Behaviour change:** `normalizeTheme()` returns `system` when nothing (or something unknown) is stored, so every
+  app starts like the device on the first visit and on the login page (before: `light`).
+- New `initialLang(stored, navLang)` / `browserLang()`: stored choice wins, otherwise German for a German browser and
+  English for everything else, the same in every app.
+- **Visible change:** every `Notice` gets the new frame and colours (info notices turn from Klein blue to a lighter
+  blue, error text is no longer red, only bar and icon). No token changes.
+
 ## 0.21.0
 Testmodus (scalio-docs ADR 0053, package scalio-selftest).
 - `SelfTestPanel` for the page «Tests»: last runs with verdict, scope, source, version and counts; details per

package/README.md

@@ -127,7 +127,8 @@ scalio-connect 0.8.0 `peers.web.admin_router`.
 `link` is the router's `NavLink` (it gets `to`, `end`, a `className` function and `onClick`); without it the
 sidebar renders plain links and marks the item for `activePath`. Item test ids default to `nav-<path>`
 (`nav-overview` for `/`), or set `testId`. Page blocks: `KpiTile` (tone `error` = red number),
-`EmptyState` (children = next step), `Loading`, `Notice` (`info`, `ok`, `warn`, `error`), `StatusBadge`
+`EmptyState` (children = next step), `Loading`, `Notice` (`error` red = Fehler, `warn`/`important` orange =
+wichtig, `ok`/`success` green = gute Meldung, `info`/`action` blue = Aktion; `banner` = full width), `StatusBadge`
 (tones `neutral`, `running`, `ok`, `warn`, `error`) and `PageHeader` with `back` for detail pages.
 
 Pages that belong together under one menu item keep their own addresses: the item lists them in `match`

package/nav.css

@@ -260,8 +260,14 @@
 .scalio-spinner { width: 0.875rem; height: 0.875rem; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); border-radius: 999px; animation: scalio-spin 0.8s linear infinite; }
 @keyframes scalio-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .scalio-spinner { animation: none; } }
-.scalio-notice { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; border: 1px solid; border-left-width: 3px; border-radius: 2px; font-size: 0.875rem; }
-.scalio-notice-icon { flex-shrink: 0; margin-top: 0.125rem; }
+/* Notice: thin frame in the tone, 3px bar on the left, tinted background, icon in the tone (2026-11-01, look of the
+   test mode banner). Red = Fehler, orange = wichtig, green = gute Meldung, blue = Aktion. */
+.scalio-notice {
+  --notice-tone: 37 99 235; display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem;
+  border: 1px solid rgb(var(--notice-tone) / 0.45); border-left: 3px solid rgb(var(--notice-tone)); border-radius: 2px;
+  background: rgb(var(--notice-tone) / 0.08); color: hsl(var(--foreground)); font-size: 0.875rem;
+}
+.scalio-notice-icon, .scalio-notice > .scalio-icon:first-child { flex-shrink: 0; margin-top: 0.125rem; color: rgb(var(--notice-tone)); }
 .scalio-notice-body { flex: 1; min-width: 0; }
 .scalio-notice-title { font-weight: 600; margin-bottom: 0.125rem; }
 .scalio-notice-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
@@ -277,7 +283,11 @@
 }
 .scalio-notice-dismiss:hover { opacity: 1; }
 .scalio-notice-action:focus-visible, .scalio-notice-dismiss:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
-.scalio-notice.is-banner { align-items: center; border-width: 0 0 1px 3px; padding: 0.5rem 1rem; }
+.scalio-notice.is-banner { align-items: center; border-radius: 0; padding: 0.625rem 1rem; }
+.scalio-notice.is-banner .scalio-notice-icon { margin-top: 0; }
+.scalio-notice.is-banner .scalio-notice-title { margin-bottom: 0; }
+.scalio-notice.is-banner .scalio-notice-body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; }
+.scalio-notice.is-banner + .scalio-notice.is-banner { border-top-width: 0; }
 @media (max-width: 639px) { .scalio-notice.is-banner { flex-wrap: wrap; } }
 /* Password sign-in choice (Konten und Rollen -> Anmeldung). */
 .scalio-policy { display: flex; flex-direction: column; gap: 0.5rem; }
@@ -286,10 +296,15 @@
 .scalio-policy-help { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
 .scalio-policy-help.is-warn { color: #b45309; }
 .dark .scalio-policy-help.is-warn { color: #fbbf24; }
-.scalio-notice.is-info { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.06); }
-.scalio-notice.is-ok { border-color: rgb(22 163 74 / 0.4); background: rgb(22 163 74 / 0.08); }
-.scalio-notice.is-warn { border-color: rgb(217 119 6 / 0.45); background: rgb(217 119 6 / 0.1); }
-.scalio-notice.is-error { border-color: hsl(var(--destructive) / 0.5); background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); }
+.scalio-notice.is-info { --notice-tone: 37 99 235; }
+.scalio-notice.is-ok { --notice-tone: 22 163 74; }
+.scalio-notice.is-warn { --notice-tone: 217 119 6; }
+.scalio-notice.is-error { --notice-tone: 220 38 38; }
+.dark .scalio-notice.is-info { --notice-tone: 96 165 250; }
+.dark .scalio-notice.is-ok { --notice-tone: 74 222 128; }
+.dark .scalio-notice.is-warn { --notice-tone: 245 158 11; }
+.dark .scalio-notice.is-error { --notice-tone: 248 113 113; }
+.dark .scalio-notice { background: rgb(var(--notice-tone) / 0.12); }
 .scalio-badge {
   display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; border: 1px solid; border-radius: 2px;
   font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
@@ -516,6 +531,4 @@
 .scalio-selftest .is-neutral { color: hsl(var(--muted-foreground)); }
 .dark .scalio-selftest .is-ok, .dark .scalio-selftest li.is-ok .scalio-selftest-status { color: #4ade80; }
 .dark .scalio-selftest .is-warn, .dark .scalio-selftest li.is-warn .scalio-selftest-status { color: #fbbf24; }
-.scalio-selftest .scalio-notice.is-ok, .scalio-selftest .scalio-notice.is-error { color: inherit; }
-.scalio-selftest-banner { display: flex; align-items: center; gap: 0.5rem; }
 @media (max-width: 640px) { .scalio-selftest-run-head .scalio-btn { margin-left: 0; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/blocks.js

@@ -50,13 +50,20 @@ function Loading({ label, lang, labels, testId }) {
   );
 }
 
-// kind: info, ok, warn, error. One notice style for every hint in every app (ADR 0041 A6): eckig, icon, bold
-// title, one sentence, at most one main action plus "Später". banner: full width above the page (AppShell
-// prop banner), several stack, the most important first. action: { label, onClick | href, testId }.
+// One notice style for every hint in every app (ADR 0042 A6): thin frame, coloured bar on the left, icon, bold
+// title, one sentence, at most one main action plus "Später". Colours (2026-11-01): red = error (Fehler),
+// orange = warn (wichtig, e.g. test mode, licence), green = ok (gute Meldung), blue = info (Aktion, e.g. grant
+// consent). The aliases important, success and action name the same kinds. banner: full width above the page
+// (AppShell prop banner), several stack, the most important first. action: { label, onClick | href, testId }.
 const NOTICE_ICONS = { info: "Info", ok: "Check", warn: "Alert", error: "Alert" };
+const NOTICE_KINDS = { info: "info", action: "info", ok: "ok", success: "ok", warn: "warn", important: "warn", error: "error" };
+
+function noticeKind(kind) {
+  return Object.prototype.hasOwnProperty.call(NOTICE_KINDS, kind) ? NOTICE_KINDS[kind] : "info";
+}
 
 function Notice({ kind, title, children, action, onDismiss, dismissLabel, banner, icon, lang, labels, testId }) {
-  const k = ["info", "ok", "warn", "error"].indexOf(kind) >= 0 ? kind : "info";
+  const k = noticeKind(kind);
   const L = labelsFor(lang, labels);
   const Icons = require("./icons");
   const Icon = icon === false ? null : icon || Icons[NOTICE_ICONS[k]];
@@ -93,4 +100,4 @@ function StatusBadge({ tone: t, children, testId }) {
   return h("span", { className: cx("scalio-badge", `is-${tone(t, "neutral")}`), "data-testid": testId }, children);
 }
 
-module.exports = { KpiTile, EmptyState, Loading, Notice, StatusBadge, TONES };
+module.exports = { KpiTile, EmptyState, Loading, Notice, noticeKind, StatusBadge, TONES };

package/react/profile.js

@@ -86,8 +86,19 @@ function applyTheme(mode) {
     else if (mq.removeListener) mq.removeListener(set);
   };
 }
+// Nothing stored yet (first visit, login page) means "system": every app starts like the device.
 function normalizeTheme(value) {
-  return value === "dark" || value === "system" ? value : "light";
+  return value === "dark" || value === "light" ? value : "system";
+}
+
+// --- language ----------------------------------------------------------------------------------------
+// The same rule in every app: a stored choice wins; otherwise German for a German browser, English for the rest.
+function browserLang(navLang) {
+  const v = navLang !== undefined ? navLang : (typeof navigator !== "undefined" && navigator.language) || "";
+  return String(v || "").toLowerCase().startsWith("de") ? "de" : "en";
+}
+function initialLang(stored, navLang) {
+  return stored === "de" || stored === "en" ? stored : browserLang(navLang);
 }
 
 // --- blocks ------------------------------------------------------------------------------------------
@@ -324,4 +335,6 @@ module.exports = {
   resolveTheme,
   applyTheme,
   normalizeTheme,
+  browserLang,
+  initialLang,
 };

package/react/selftest.js

@@ -265,13 +265,16 @@ function SelfTestPanel(props) {
         : h("p", { className: "scalio-selftest-hint", "data-testid": "selftest-empty" }, L.never)));
 }
 
-// Hint above the page content while the test mode is on. Props: health ({enabled, suite}) or suite, lang, labels.
+// Hint above the page content while the test mode is on: a Notice banner, kind warn (orange = wichtig), the same
+// in every app. Props: health ({enabled, suite}) or suite, lang, labels, optional action ({ label, href | onClick })
+// e.g. to the page «Tests».
 function SelfTestBanner(props) {
   const suite = props.suite || (props.health && props.health.enabled && props.health.suite);
   if (!suite) return null;
   const L = selftestLabels(props.lang, props.labels);
-  return h("div", { className: "scalio-notice is-warn scalio-selftest-banner", "data-testid": "selftest-banner", role: "status" },
-    h(Icons.Activity, { className: "scalio-icon" }), h("span", null, fill(L.banner, { suite })));
+  const { Notice } = require("./blocks");
+  return h(Notice, { kind: "warn", banner: true, icon: Icons.Activity, title: fill(L.banner, { suite }), action: props.action,
+    lang: props.lang, testId: "selftest-banner" });
 }
 
 module.exports = { SelfTestPanel, SelfTestBanner, selftestApi, selftestLabels, SELFTEST_LABELS: LABELS };