@micha.bigler/ui-core-micha 3.10.0 → 3.11.1

package/docs/DARK-TOKENS.md

@@ -0,0 +1,140 @@
+# Dark-mode baseline tokens
+
+Reference sheet for `UCM-THEME-13`. **This file is the value source** for the dark baseline: `UCM-THEME-14`
+(dark mode in `createAppTheme`) takes every dark value from here by token name, and if code and this
+sheet ever disagree, this sheet is the one to fix first.
+
+Instrument: [`work-orders/assets/UCM-THEME-13-dark-prototype.html`](../work-orders/assets/UCM-THEME-13-dark-prototype.html)
+(the screen the values were judged on, at 375 px and 1280 px, with contrasts computed in the page).
+
+## Frozen
+
+**Frozen 2026-10-02 by the operator** ("Passt so, bitte einfrieren"), after two value rounds.
+
+## Structural decisions (operator, 2026-10-01)
+
+1. **Complete baseline.** Every mode-dependent token class of the light baseline has a dark value, so an app
+   that turns dark on is complete and `assertThemeComplete` can judge dark as it judges light.
+2. **Outlined first, as in light.** Resting surfaces carry no shadow. Structure comes from borders and a
+   small surface step. Only overlays (dialog, menu, popover, drawer) stand out, through a lighter surface;
+   their shadow is an edge, not the means of separation.
+3. **Primary is derived unless the app sets it.** The factory lightens the app's light primary until it
+   clears 4.5:1 on the dark page. An app that supplies its own dark primary (webshop-guenter: `#D49040`)
+   keeps it.
+4. **Fixed dark status set, derivation as a safety net.** The status colours below are decided values. On
+   an app page that is not the baseline page, the factory lightens a status colour that would fail there,
+   the dark counterpart of the darkening `UCM-THEME-15` does on light pages.
+
+## Token table
+
+Every value below is either **distilled** (found in the estate, source named), **derived** (computed by a
+stated rule from a decided value) or **invented** (no precedent anywhere; labelled, unvalidated).
+
+### Surfaces and ink
+
+| Token | Light (today) | Dark | Origin |
+|---|---|---|---|
+| `background.default` (page) | `#FAFAFA` | `#14181B` | distilled: cockpit OBS-10, cockpit KB-23 (`#14181b`), ucm SHELL-2 (`#14171c`) |
+| `background.paper` (card) | `#FFFFFF` | `#1B2126` | distilled: cockpit OBS-10, KB-23 |
+| `background.subtle` | `#F4F5F6` | `#20262C` | distilled: cockpit OBS-10, KB-23 (`surface2`) |
+| overlay surface (dialog, menu, popover, drawer) | = paper, plus shadow | `#232A31` | derived: one step above paper on the same hue, ratio 1.12:1 to paper; new in dark |
+| `divider` | `rgba(33,37,41,.10)` | `#2B333A` | distilled: cockpit OBS-10, KB-23 (`border`) |
+| `ink.primary` / `text.primary` | `#212529` | `#E6EBEF` | distilled: cockpit KB-23 (`ink`); OBS-10 `#e7ebee` |
+| `ink.secondary` / `text.secondary` | `#5B6670` | `#AAB5BF` | distilled: cockpit KB-23 (`ink2`) |
+| `ink.muted` / `text.disabled` | `#6A7178` | `#87919A` | distilled: cockpit OBS-10 (`text3`) |
+
+### Controls
+
+| Token | Light (today) | Dark | Origin |
+|---|---|---|---|
+| `controlBorder.main` | `rgba(33,37,41,.50)` | `rgba(230,235,239,.38)` | derived: `ink.primary` at the smallest alpha that clears 3:1 on page and paper |
+| `controlBorder.hover` | `rgba(33,37,41,.65)` | `rgba(230,235,239,.53)` | derived: the light step (+0.15) carried over |
+| `controlBorder.error` | `#BF3227` | `#E58B80` | = `error.main` (dark) |
+| `controlBorder.focus` | derived from primary | derived from primary | rule: lighten the primary until it clears 3:1 on page and paper |
+| autofill field | paper inset, `ink.primary` text and caret | paper inset, `ink.primary` text and caret | derived: the palette-aware block in `createAppTheme.js:97-108` already resolves from the palette and wins over the static light block in `tokens.js`; dark follows once the dark palette is in place |
+
+### Status
+
+`main` = `text` in dark. `light`/`dark`/`contrastText` follow from `main` through `withMainShades`, with
+`contrastText` = `#14181B`. A solid fill takes the status colour with the page colour as its text (dark
+text on a light fill, the same rule as the primary button).
+
+| Status | `text` = `main` | `bg` | `fill` | `fillText` | Origin |
+|---|---|---|---|---|---|
+| success | `#7BC496` | `#1C2A22` | `#7BC496` | `#14181B` | distilled: cockpit KB-23 (`ok`, `ok-bg`) |
+| warning | `#D8BD7E` | `#2A2418` | `#D8BD7E` | `#14181B` | distilled: cockpit KB-23 (`warn`, `warn-bg`) |
+| error | `#E58B80` | `#3A2320` | `#E58B80` | `#14181B` | distilled: cockpit KB-23 (`err`), OBS-10 (`danger-bg`) |
+| info | `#8FB8E0` | `#1A2633` | `#8FB8E0` | `#14181B` | **invented**: no dark info hue anywhere in the estate |
+| stale | `#AAB5BF` | `#20262C` | `#AAB5BF` | `#14181B` | **invented**, like the light `stale` it mirrors: `ink.secondary` on `subtle` |
+
+### Data series and shadows
+
+| Token | Light (today) | Dark | Origin |
+|---|---|---|---|
+| `dataSeries.categorical` | `#3D5A99 #3E80B8 #2E8F8A #7A5FA8 #9C4F86 #8A7355` | `#506BA3 #3E80B8 #2E8F8A #7A5FA8 #A1588C #8A7355` | derived: each light colour lightened in 0.05 steps until it clears 3:1 on paper; only slots 1 and 5 move |
+| `shadow.rest` | `none` | `none` | structural decision 2 |
+| `shadow.overlay` | `0 8px 24px rgba(20,26,31,.16), 0 2px 8px rgba(20,26,31,.08)` | `0 8px 28px rgba(0,0,0,.45)` | invented: on near-black the light shadow is invisible; the surface step carries the separation |
+| scrim (behind a modal) | MUI default | `rgba(0,0,0,.55)` | invented |
+
+### App identity in dark (rules, not values)
+
+| What | Rule | Worked examples (computed) |
+|---|---|---|
+| primary, app sets none | lighten the light primary in 0.05 steps until it clears 4.5:1 on `#14181B` | `#468AB2` stays `#468AB2` (4.71:1); hram `#2F4F96` -> `#6D84B6` (4.78:1); survey_app `#432CA1` -> `#8576C2` (4.56:1) |
+| primary button text | whichever of `#FFFFFF` and `#14181B` contrasts more with the derived primary | `#14181B` in all three examples |
+| primary, app sets its own | the app's value | webshop-guenter `#D49040` with `#0E0B08` text (7.35:1) |
+| status on an app page that is not `#14181B` | lighten the status colour until it clears 4.5:1 on its `bg` and on the page | webshop-guenter `#0E0B08`: no status colour needs to move |
+
+## Contrast table (computed 2026-10-02 with the instrument's own functions)
+
+| Pair | Foreground | Background | Ratio | Threshold |
+|---|---|---|---|---|
+| ink.primary on page / paper / overlay | `#E6EBEF` | `#14181B` / `#1B2126` / `#232A31` | 14.87 / 13.54 / 12.09 | 4.5 |
+| ink.secondary on page / paper / overlay | `#AAB5BF` | same | 8.56 / 7.79 / 6.96 | 4.5 |
+| ink.muted on page / paper | `#87919A` | `#14181B` / `#1B2126` | 5.57 / 5.07 | 3 |
+| success text on bg; main on page / paper; fillText on fill | `#7BC496` | | 7.25; 8.65 / 7.88; 8.65 | 4.5 |
+| warning, same pairs | `#D8BD7E` | | 8.43; 9.78 / 8.90; 9.78 | 4.5 |
+| error, same pairs | `#E58B80` | | 5.78; 7.09 / 6.45; 7.09 | 4.5 |
+| info, same pairs | `#8FB8E0` | | 7.38; 8.59 / 7.82; 8.59 | 4.5 |
+| stale text on bg; fillText on fill | `#AAB5BF` | `#20262C` | 7.32; 8.56 | 4.5 |
+| controlBorder.main on page / paper | `rgba(230,235,239,.38)` | | 3.18 / 3.14 | 3 |
+| controlBorder.hover on page / paper | `rgba(230,235,239,.53)` | | 4.98 / 4.79 | 3 |
+| controlBorder.error on paper | `#E58B80` | `#1B2126` | 6.45 | 3 |
+| dataSeries 1-6 on paper | as above | `#1B2126` | 3.07 / 3.86 / 4.19 / 3.12 / 3.32 / 3.61 | 3 |
+| surface steps: paper/page, overlay/paper, divider/paper, subtle/paper | | | 1.10 / 1.12 / 1.27 / 1.06 | none (structure, not text) |
+
+Every pair passes. Two pairs sit close to their threshold: `controlBorder.main` (3.14:1 on paper) and
+`dataSeries` slot 1 (3.07:1). A paper colour that moves lighter breaks them first.
+
+## Rejected, and why
+
+- **Neutral base B** (`#121212` / `#1C1C1C`, no cast, near MUI) and **C** (`#16181B` / `#1D2024`, the light
+  baseline's own cool ink carried into dark). Round 1: at this lightness none of the three could be told
+  apart, so the cast was decided on principle: A is the one the estate already uses in three places.
+- **Surface step 2** (paper `#1F262C`, overlay `#29313A`) and **step 3** (paper `#232B32`, overlay
+  `#2F3942`). Round 2: step 1, the estate's own, reads as card and dialog already; the larger steps lower
+  text and border contrast on cards for no gain the operator could see.
+
+## Identity versus baseline
+
+The baseline owns everything above. An app owns, in dark as in light, only its primary (optional in dark,
+derived otherwise) and its font. An app with a decided brand (webshop-guenter) may own its dark surfaces and
+ink too; that is the app's identity bucket, not a baseline change.
+
+## Unverified
+
+Declared, not demonstrated, because a static instrument cannot show them: hover and pressed states, focus
+rings in a running app, native date and select pickers, scrollbars, transitions, and how browsers paint
+autofill in dark. `UCM-THEME-14`'s rendered check is where they are first seen.
+
+## Known code that assumes light (input for `UCM-THEME-14`)
+
+- `src/theme/createAppTheme.js:221` and `src/theme/themeCompleteness.js:298`: contrast surfaces include a
+  fixed `#FFFFFF`; the derivations only darken.
+- `src/theme/tokens.js` `autofill`: fixed `#FFFFFF` inset and `#212529` text. **Shadowed** by the
+  palette-aware block in `src/theme/createAppTheme.js:97-108` (corrected 2026-10-02: the first version of
+  this sheet listed it as live). Harmless in both modes, but a duplicate that can mislead.
+- `BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS`: the `background.paper` reason ("deliberately MUI white") is
+  false in dark.
+- `src/components/QrSignupManager.jsx:361`: `#ffffff` behind a QR code. **Stays white on purpose**: a QR code
+  needs a light quiet zone to scan.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.10.0",
+  "version": "3.11.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "sideEffects": [

package/src/components/UserListComponent.jsx

@@ -34,6 +34,17 @@ export const USER_LIST_HEADER_CELL_SX = { fontWeight: 600, whiteSpace: 'nowrap'
 export const USER_LIST_EMPTY_CELL_SX = { py: 4, color: 'text.secondary' };
 export const USER_LIST_BODY_CELL_SX = { verticalAlign: 'top', py: 1 };
 
+// Extracted so the count === -1 ("more than") branch is directly unit-testable -- the live
+// TablePagination call site always passes a real count from sortedUsers.length, so that branch
+// can never actually be exercised through a render of this component itself (UCM-I18N-5 review).
+export function formatDisplayedRowsLabel(t) {
+  return ({ from, to, count }) => (
+    count === -1
+      ? t('UserList.DISPLAYED_ROWS_MORE_THAN', '{{from}}–{{to}} of more than {{to}}', { from, to })
+      : t('UserList.DISPLAYED_ROWS', '{{from}}–{{to}} of {{count}}', { from, to, count })
+  );
+}
+
 export function UserListComponent({
     roles = DEFAULT_ROLES,
     currentUser,
@@ -597,6 +608,7 @@ export function UserListComponent({
               setPage(0);
             }}
             labelRowsPerPage={t('UserList.ROWS_PER_PAGE', 'Rows per page:')}
+            labelDisplayedRows={formatDisplayedRowsLabel(t)}
             rowsPerPageOptions={[10, 25, 50, 100]}
           />
         </Box>

package/src/i18n/authTranslations.ts

@@ -2053,6 +2053,18 @@ export const authTranslations = {
     "en": "Rows per page:",
     "sw": "Safu kwa ukurasa:"
   },
+  "UserList.DISPLAYED_ROWS": {
+    "de": "{{from}}–{{to}} von {{count}}",
+    "fr": "{{from}}–{{to}} sur {{count}}",
+    "en": "{{from}}–{{to}} of {{count}}",
+    "sw": "{{from}}–{{to}} ya {{count}}"
+  },
+  "UserList.DISPLAYED_ROWS_MORE_THAN": {
+    "de": "{{from}}–{{to}} von mehr als {{to}}",
+    "fr": "{{from}}–{{to}} sur plus de {{to}}",
+    "en": "{{from}}–{{to}} of more than {{to}}",
+    "sw": "{{from}}–{{to}} ya zaidi ya {{to}}"
+  },
   "Auth.INVITE_SENT_SUCCESS": {
     "de": "Einladung gesendet.",
     "fr": "Invitation envoyée.",

package/src/theme/createAppTheme.js

@@ -1,11 +1,16 @@
 import './fonts';
 
-import { createTheme, darken, getContrastRatio } from '@mui/material/styles';
+import { createTheme, darken, decomposeColor, getContrastRatio, lighten } from '@mui/material/styles';
 
 import {
   BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS,
+  BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS_DARK,
   BASELINE_PALETTE,
+  BASELINE_PALETTE_DARK,
   BASELINE_STATIC,
+  DARK_OVERLAY_SHADOW,
+  DARK_OVERLAY_SURFACE,
+  DARK_SCRIM,
   MOTION,
   withMainShades,
 } from './tokens';
@@ -42,6 +47,21 @@ function clearsContrast(colour, surfaces) {
   return surfaces.every((surface) => getContrastRatio(colour, surface) >= 3);
 }
 
+function normalizeColour(colour) {
+  const match = colour.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+  if (!match) return colour;
+  return `#${match.slice(1).map((channel) => Number(channel).toString(16).padStart(2, '0')).join('').toUpperCase()}`;
+}
+
+function lightenColour(colour, coefficient) {
+  const normalized = normalizeColour(colour);
+  const match = normalized.match(/^#([\da-f]{6})$/i);
+  if (!match) return normalizeColour(lighten(colour, coefficient));
+  const channels = [0, 2, 4].map((offset) => parseInt(match[1].slice(offset, offset + 2), 16));
+  return `#${channels.map((channel) => Math.round(channel + (255 - channel) * coefficient)
+    .toString(16).padStart(2, '0')).join('').toUpperCase()}`;
+}
+
 // Darkened until it clears 3:1 against BOTH '#FFFFFF' and background.default
 // -- the exact two surfaces assertThemeComplete's contrastFindings checks --
 // so deriving against background.paper alone (which need not be white for an
@@ -55,6 +75,16 @@ function deriveFocusColour(primary, surfaces) {
   return focus;
 }
 
+function deriveLightenedColour(original, surfaces) {
+  if (clearsContrast(original, surfaces)) return original;
+  let colour = original;
+  for (let coefficient = 0.05; !clearsContrast(colour, surfaces); coefficient += 0.05) {
+    colour = lightenColour(original, Math.min(coefficient, 0.9));
+    if (coefficient >= 0.9) break;
+  }
+  return colour;
+}
+
 function clearsPageContrast(colour, surfaces, threshold) {
   return surfaces.every((surface) => {
     const ratio = calculateContrastRatio(colour, surface);
@@ -73,6 +103,35 @@ function deriveDarkenedPageColour(original, surfaces, threshold) {
   return colour;
 }
 
+function deriveLightenedPageColour(original, surfaces, threshold) {
+  if (clearsPageContrast(original, surfaces, threshold)) return original;
+
+  let colour = original;
+  for (let coefficient = 0.05; !clearsPageContrast(colour, surfaces, threshold); coefficient += 0.05) {
+    colour = lightenColour(original, Math.min(coefficient, 0.9));
+    if (coefficient >= 0.9) break;
+  }
+  return colour;
+}
+
+// ink.primary may be supplied as hex or rgb(); decomposeColor normalises both.
+function inkChannels(ink) {
+  return decomposeColor(ink).values.slice(0, 3).map((value) => Math.round(value));
+}
+
+// 0.02 steps: the frozen sheet value (0.38) is the first even step that clears
+// 3:1; a 0.01 search would land on 0.37 and drift from the frozen baseline.
+function deriveDarkAlphaColour(ink, surfaces) {
+  const [red, green, blue] = inkChannels(ink);
+  let alpha = 0;
+  while (alpha <= 1) {
+    const colour = `rgba(${red},${green},${blue},${alpha.toFixed(2)})`;
+    if (clearsPageContrast(colour, surfaces, 3)) return colour;
+    alpha = Number((alpha + 0.02).toFixed(2));
+  }
+  return `rgba(${red},${green},${blue},1)`;
+}
+
 const RGBA_PATTERN = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d*\.?\d+)\s*\)$/;
 
 function deriveAlphaPageColour(original, surfaces, threshold) {
@@ -92,7 +151,7 @@ function deriveAlphaPageColour(original, surfaces, threshold) {
   return colour;
 }
 
-function createPaletteAwareComponents(palette) {
+function createPaletteAwareComponents(palette, isDark) {
   const stateTransition = `border-color ${MOTION.duration.fast}ms ${MOTION.easing.state}, color ${MOTION.duration.fast}ms ${MOTION.easing.state}, background-color ${MOTION.duration.fast}ms ${MOTION.easing.state}`;
   const autofill = {
     '&:-webkit-autofill': {
@@ -117,7 +176,7 @@ function createPaletteAwareComponents(palette) {
     ]),
   );
 
-  return {
+  const components = {
     MuiButton: {
       styleOverrides: {
         root: { transition: stateTransition },
@@ -199,6 +258,22 @@ function createPaletteAwareComponents(palette) {
       styleOverrides: alertStyles,
     },
   };
+
+  if (isDark) {
+    for (const component of ['MuiDialog', 'MuiMenu', 'MuiPopover', 'MuiDrawer']) {
+      components[component] = {
+        styleOverrides: {
+          paper: {
+            backgroundColor: DARK_OVERLAY_SURFACE,
+            boxShadow: DARK_OVERLAY_SHADOW,
+          },
+        },
+      };
+    }
+    components.MuiBackdrop = { styleOverrides: { root: { backgroundColor: DARK_SCRIM } } };
+  }
+
+  return components;
 }
 
 /**
@@ -212,19 +287,29 @@ export function createAppTheme(appConfig = {}) {
   }
   validateStyleOverrides(appConfig.components);
 
+  const isDark = appConfig.palette.mode === 'dark';
+  const baselinePalette = isDark ? BASELINE_PALETTE_DARK : BASELINE_PALETTE;
+
   const paletteTheme = createTheme(
     { palette: appConfig.palette },
-    { palette: BASELINE_PALETTE },
+    { palette: baselinePalette },
     { palette: appConfig.palette },
   );
   const finalPalette = paletteTheme.palette;
-  const contrastSurfaces = ['#FFFFFF', finalPalette.background.default];
+  const contrastSurfaces = isDark
+    ? [finalPalette.background.default, finalPalette.background.paper]
+    : ['#FFFFFF', finalPalette.background.default];
   const derivedStatusEntries = {};
   for (const status of ['success', 'warning', 'error', 'info']) {
     if (appConfig.palette?.[status]?.main !== undefined) continue;
 
     const current = finalPalette[status];
-    const main = deriveDarkenedPageColour(current.main, contrastSurfaces, 4.5);
+    const statusSurfaces = isDark
+      ? [finalPalette.background.default, current.bg]
+      : contrastSurfaces;
+    const main = isDark
+      ? deriveLightenedPageColour(current.main, statusSurfaces, 4.5)
+      : deriveDarkenedPageColour(current.main, statusSurfaces, 4.5);
     if (main !== current.main) {
       derivedStatusEntries[status] = {
         ...current,
@@ -238,19 +323,57 @@ export function createAppTheme(appConfig = {}) {
     if (appConfig.palette?.controlBorder?.[state] !== undefined) continue;
 
     const current = finalPalette.controlBorder[state];
-    const derived = state === 'error'
-      ? deriveDarkenedPageColour(current, contrastSurfaces, 3)
-      : deriveAlphaPageColour(current, contrastSurfaces, 3);
+    const derived = isDark
+      ? state === 'error'
+        ? deriveLightenedPageColour(current, [finalPalette.background.default, finalPalette.error.bg], 3)
+        : deriveDarkAlphaColour(finalPalette.ink.primary, contrastSurfaces)
+      : state === 'error'
+        ? deriveDarkenedPageColour(current, contrastSurfaces, 3)
+        : deriveAlphaPageColour(current, contrastSurfaces, 3);
     if (derived !== current) derivedControlBorderEntries[state] = derived;
   }
+  if (isDark && appConfig.palette?.controlBorder?.hover === undefined) {
+    const main = derivedControlBorderEntries.main || finalPalette.controlBorder.main;
+    const alpha = Number(main.match(/,([\d.]+)\)$/)?.[1] || 0);
+    const hoverAlpha = Math.min(1, Number((alpha + 0.15).toFixed(2)));
+    const [red, green, blue] = inkChannels(finalPalette.ink.primary);
+    derivedControlBorderEntries.hover = `rgba(${red},${green},${blue},${hoverAlpha.toFixed(2)})`;
+  }
+
+  const primaryMain = isDark
+    ? deriveLightenedPageColour(finalPalette.primary.main, [finalPalette.background.default], 4.5)
+    : finalPalette.primary.main;
+  const primaryContrastText = isDark
+    ? (getContrastRatio('#FFFFFF', primaryMain) >= getContrastRatio(finalPalette.background.default, primaryMain)
+      ? '#FFFFFF'
+      : finalPalette.background.default)
+    : finalPalette.primary.contrastText;
+  const derivedSeries = isDark && appConfig.palette?.dataSeries?.categorical === undefined
+    ? finalPalette.dataSeries.categorical.map((colour) => (
+      deriveLightenedPageColour(colour, [finalPalette.background.paper], 3)
+    ))
+    : finalPalette.dataSeries.categorical;
 
   const computedPalette = {
     ...derivedStatusEntries,
     controlBorder: {
       ...finalPalette.controlBorder,
       ...derivedControlBorderEntries,
-      focus: deriveFocusColour(finalPalette.primary.main, contrastSurfaces),
+      focus: isDark
+        ? (appConfig.palette?.controlBorder?.focus
+          ?? deriveLightenedColour(primaryMain, contrastSurfaces))
+        : deriveFocusColour(finalPalette.primary.main, contrastSurfaces),
+    },
+    primary: {
+      ...finalPalette.primary,
+      // A lightened main needs its own light/dark shades, or hover states keep
+      // the shades of the colour that was replaced.
+      ...(isDark && primaryMain !== finalPalette.primary.main
+        ? withMainShades(primaryMain, primaryContrastText)
+        : { main: primaryMain }),
+      contrastText: primaryContrastText,
     },
+    dataSeries: { categorical: derivedSeries },
   };
   const resolvedPalette = { ...finalPalette, ...computedPalette };
   const fontFamily = appConfig.typography?.fontFamily || BASELINE_STATIC.typography.fontFamily;
@@ -266,20 +389,24 @@ export function createAppTheme(appConfig = {}) {
         ...BASELINE_STATIC.fontLoading,
         weights: [...BASELINE_STATIC.fontLoading.weights],
       },
+      shadow: isDark ? { ...BASELINE_STATIC.shadow, overlay: DARK_OVERLAY_SHADOW } : BASELINE_STATIC.shadow,
       palette: resolvedPalette,
       themeCompleteness: {
         baseline: true,
-        exemptions: BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS.map((exemption) => ({
+        exemptions: (isDark
+          ? BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS_DARK
+          : BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS).map((exemption) => ({
           ...exemption,
         })),
       },
     },
     {
-      components: createPaletteAwareComponents(resolvedPalette),
+      components: createPaletteAwareComponents(resolvedPalette, isDark),
     },
     appConfig,
     {
       palette: {
+        ...(isDark ? computedPalette : {}),
         dataSeries: {
           categorical: [...resolvedPalette.dataSeries.categorical],
         },

package/src/theme/themeCompleteness.js

@@ -294,10 +294,16 @@ function contrastFindings(theme) {
     }
   }
 
-  const backgrounds = {
-    white: '#FFFFFF',
-    page: theme.palette?.background?.default,
-  };
+  const dark = theme.palette?.mode === 'dark';
+  const backgrounds = dark
+    ? {
+      paper: theme.palette?.background?.paper,
+      page: theme.palette?.background?.default,
+    }
+    : {
+      white: '#FFFFFF',
+      page: theme.palette?.background?.default,
+    };
   for (const status of STATUS_KEYS) {
     const main = theme.palette?.[status]?.main;
     if (!main) continue;

package/src/theme/tokens.js

@@ -113,6 +113,73 @@ export const BASELINE_PALETTE = {
   },
 };
 
+export const DARK_OVERLAY_SURFACE = '#232A31';
+export const DARK_OVERLAY_SHADOW = '0 8px 28px rgba(0,0,0,.45)';
+export const DARK_SCRIM = 'rgba(0,0,0,.55)';
+
+export const BASELINE_PALETTE_DARK = {
+  mode: 'dark',
+  ink: {
+    primary: '#E6EBEF',
+    secondary: '#AAB5BF',
+    muted: '#87919A',
+  },
+  text: {
+    primary: '#E6EBEF',
+    secondary: '#AAB5BF',
+    disabled: '#87919A',
+  },
+  background: {
+    default: '#14181B',
+    paper: '#1B2126',
+    subtle: '#20262C',
+  },
+  divider: '#2B333A',
+  controlBorder: {
+    // These are replaced by the dark alpha derivation in createAppTheme.
+    main: 'rgba(230,235,239,0)',
+    hover: 'rgba(230,235,239,0)',
+    error: '#E58B80',
+  },
+  success: {
+    ...withMainShades('#7BC496', '#14181B'),
+    text: '#7BC496',
+    fill: '#7BC496',
+    fillText: '#14181B',
+    bg: '#1C2A22',
+  },
+  warning: {
+    ...withMainShades('#D8BD7E', '#14181B'),
+    text: '#D8BD7E',
+    fill: '#D8BD7E',
+    fillText: '#14181B',
+    bg: '#2A2418',
+  },
+  error: {
+    ...withMainShades('#E58B80', '#14181B'),
+    text: '#E58B80',
+    fill: '#E58B80',
+    fillText: '#14181B',
+    bg: '#3A2320',
+  },
+  info: {
+    ...withMainShades('#8FB8E0', '#14181B'),
+    text: '#8FB8E0',
+    fill: '#8FB8E0',
+    fillText: '#14181B',
+    bg: '#1A2633',
+  },
+  stale: {
+    text: '#AAB5BF',
+    fill: '#AAB5BF',
+    fillText: '#14181B',
+    bg: '#20262C',
+  },
+  dataSeries: {
+    categorical: SERIES_COLOURS,
+  },
+};
+
 export const OVERLAY_SHADOW =
   '0 8px 24px rgba(20,26,31,.16), 0 2px 8px rgba(20,26,31,.08)';
 
@@ -399,3 +466,8 @@ export const BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS = [
     reason: `The canonical ${variant} weight deliberately equals MUI's numeric default.`,
   })),
 ];
+
+export const BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS_DARK =
+  BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS.filter(
+    ({ surface }) => surface !== 'palette.background.paper',
+  );

package/tests/UserListComponent.test.jsx

@@ -33,7 +33,7 @@ vi.mock('react-i18next', () => {
   };
 });
 
-import { UserListComponent } from '../src/components/UserListComponent';
+import { UserListComponent, formatDisplayedRowsLabel } from '../src/components/UserListComponent';
 
 const currentUser = { id: 99, is_superuser: true, role: 'admin' };
 const user = { id: 1, email: 'person@example.com', role: 'student' };
@@ -167,3 +167,26 @@ describe('UserListComponent delete actions', () => {
     expect(within(getRowByEmail(user.email)).getByRole('button', { name: 'Delete' }).disabled).toBe(false);
   });
 });
+
+describe('formatDisplayedRowsLabel (UCM-I18N-5)', () => {
+  // A real i18next instance's t() supports {{var}} interpolation; this fake mirrors just that,
+  // so these assertions pin the KEY and VARS formatDisplayedRowsLabel passes through -- the
+  // count === -1 ("more than") branch can never be reached by rendering UserListComponent itself
+  // (its own TablePagination always receives a real, non-negative count), so this is the only way
+  // to exercise it at all (UCM-I18N-5 review, tests lens).
+  function fakeT(key, fallback, vars = {}) {
+    const template = { [key]: fallback }[key] ?? fallback;
+    return template.replace(/\{\{(\w+)\}\}/g, (_, name) => String(vars[name] ?? `{{${name}}}`));
+  }
+
+  it('uses the exact-count key when count is a real number', () => {
+    const label = formatDisplayedRowsLabel(fakeT)({ from: 1, to: 10, count: 42 });
+    expect(label).toBe('1–10 of 42');
+  });
+
+  it('uses the "more than" key, without a literal count, when count is -1', () => {
+    const label = formatDisplayedRowsLabel(fakeT)({ from: 1, to: 10, count: -1 });
+    expect(label).toBe('1–10 of more than 10');
+    expect(label).not.toContain('-1');
+  });
+});

package/tests/authTranslations.test.js

@@ -50,3 +50,25 @@ describe('authTranslations — AUTH-2 raw backend error codes', () => {
     expect(authTranslations['Auth.MFA_AUTHENTICATE_FAILED']).toBeDefined();
   });
 });
+
+describe('authTranslations — UserList pagination labels', () => {
+  it.each(['UserList.DISPLAYED_ROWS', 'UserList.DISPLAYED_ROWS_MORE_THAN'])('%s has all supported locale entries', (key) => {
+    expect(authTranslations[key]).toBeDefined();
+    for (const locale of ['de', 'fr', 'en', 'sw']) {
+      expect(authTranslations[key][locale]).toEqual(expect.any(String));
+      expect(authTranslations[key][locale].trim()).not.toBe('');
+    }
+  });
+
+  // A nonempty string isn't enough -- a locale missing an interpolation placeholder the
+  // others carry would silently render the literal "{{count}}" to a real user (UCM-I18N-5 review).
+  it.each(['de', 'fr', 'en', 'sw'])('%s has {{from}} and {{to}} in both pagination keys, and {{count}} only in the exact-count one', (locale) => {
+    expect(authTranslations['UserList.DISPLAYED_ROWS'][locale]).toContain('{{from}}');
+    expect(authTranslations['UserList.DISPLAYED_ROWS'][locale]).toContain('{{to}}');
+    expect(authTranslations['UserList.DISPLAYED_ROWS'][locale]).toContain('{{count}}');
+
+    expect(authTranslations['UserList.DISPLAYED_ROWS_MORE_THAN'][locale]).toContain('{{from}}');
+    expect(authTranslations['UserList.DISPLAYED_ROWS_MORE_THAN'][locale]).toContain('{{to}}');
+    expect(authTranslations['UserList.DISPLAYED_ROWS_MORE_THAN'][locale]).not.toContain('{{count}}');
+  });
+});