@micha.bigler/ui-core-micha 2.34.0 → 2.35.0

package/WORK_ORDERS.md

@@ -62,4 +62,11 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | SHELL-2 | AccountPage: from a horizontal tab strip to a grouped sidebar + mobile drawer | Measured live at 375 px on 2026-08-08 (running cockpit, host header neutralised so the numbers describe ucm alone): `AccountPage` does **not** break the layout -- all six sections render at document width 375. What fails is discoverability and the users table. The tab strip scroller is 343 px visible against 589 px of content with `overflow-x: auto`, 246 px of travel, and **`scrollButtons: 0`** -- Support and any consumer-injected section sit off screen with no arrow, no fade, no hint they exist (they do respond to a horizontal swipe, so this is a discoverability failure, not a reachability one -- unlike cockpit's own header tabs, which are `width: 0px` + `overflow: hidden` and genuinely unreachable). The users table renders 1045 px inside a 341 px `MuiTableContainer`; one third is visible and the `Aktionen` column sits ~700 px to the right. Adopts jg-ferien's `EventInfoPage` pattern (`SectionSwitcher.jsx`, driven from `EventInfoPage.jsx:1126-1159`) in **both** halves -- sticky grouped 280 px sidebar at `md`+, bottom drawer below `md` -- plus an in-page trigger bar, which the reference does not supply because jg's trigger lives in that app's own page header and `AccountPage` has none. | 2026-08-08 | blocked | | **Held back 2026-08-08 — reshaped into DS-11** (see `webapp-management/DESIGN_SYSTEM_PROGRAM.md`): do NOT implement this WO as written; the Envelope will be revised (open: keep the SHELL-2 ID or mint a new SHELL-* ID). Known corrections for the revision: publishing is version-gated, not per-push (this row's "publishes immediately" is imprecise), and the grouped-shell part becomes an inheritable ucm component with `AccountPage` as first consumer. Envelope: [work-orders/SHELL-2.md](work-orders/SHELL-2.md). Prototype: [work-orders/assets/SHELL-2-account-navigation.html](work-orders/assets/SHELL-2-account-navigation.html). Tier 2 (shared core) -- independent `reviewer` (Sonnet, full) **and** `ui_reviewer` concurrently, both mandatory before commit. **Operator decisions, settled 2026-08-08 and not to be renegotiated by implementer or reviewer:** both halves of the pattern, so the horizontal tab strip disappears **on desktop too** (asked explicitly, chosen deliberately, in full knowledge that 14 consumers inherit the desktop change on their next pin bump); fixed groups `Mein Konto` / `Verwaltung` / `Hilfe` / `Weitere`, with `extraTabs` gaining an **optional** `group` field, additive and backward compatible; no standalone "Uebersicht" entry above the groups (jg-ferien has one, `AccountPage` has no overview screen for it to point at, so none is invented); users table becomes a card list below `md` and stays a table at `md`+; the mobile trigger bar is the **sole** carrier of the current section name, so the section heading below it is **removed**, not merely undrawn -- desktop keeps its heading because it has no trigger bar. **Two contracts that must survive and are currently untested:** the `?tab=` URL contract incl. fallback to `profile` on an unknown *or* unpermitted value (`AccountPage.jsx:60`, `:180-186`) -- cockpit's `/user-management`, `/profile` and `/change-password` redirects all hang off it -- and the full `extraTabs` shape (`:146-155`), whose `label` may be a **function** and which supports `visible(context)`. `AccountPage` and `UserListComponent` have **zero tests today** (none of the 20 files under `tests/` touches either), so both test files are new, not extensions. **No staging net:** this repo has no `develop`; a push to `main` touching `src/**` or `package.json` publishes to npm immediately via `publish.yml`, so the independent review is the only gate and is not back-fillable. Version target `2.30.0` (minor -- `extraTabs` gains a public field; additive API is a minor under semver). Explicit non-goals: pagination/filtering for the user list, the sections' internal content, the six auth pages (measured clean at 375 px), and **cockpit's header** -- that toolbar is what inflates the document to 498 px on every route including `/account`, and it is a separate WO in the cockpit repo, sequenced after this one at the operator's choice. Carried-over trap from the reference: jg-ferien uses `env(safe-area-inset-bottom)` while its `index.html` omits `viewport-fit=cover`, so those insets resolve to zero there -- copy the padding, do not assume it does anything. |
 | SHELL-3 | Promote the mobile bottom navigation into the shared kit | Promotes jg-ferien's `MobileBottomNav` into ucm, shaped from **two** real cases (jg's existing bar + cockpit's destinations) as DS-6 required rather than from jg alone. Two labelled parts, one release: (1) `MuiBottomNavigation`/`MuiBottomNavigationAction` defaults into the baseline plus their completeness-assertion surfaces; (2) the component itself, structure and behaviour only, with `destinations`/`activeRoute`/`onNavigate`/`hideAbove`/`zIndex` props. Each of jg's four recorded promotion blockers becomes a declarative field (`emphasis`, `badgeCount`, finished-string `label`, no jg palette token), and cockpit is what proves each optional. Full spec: [work-orders/SHELL-3.md](work-orders/SHELL-3.md). | 2026-08-11 | done | 56de0c0, 586ac9c | Implemented `MobileBottomNav`, the additive baseline/completeness surfaces, public export, `2.33.0` version bump, and a five-item/two-badge harness specimen. **Governance note: Codex self-committed (`56de0c0`) and self-marked this row "done" citing its own reviewer/ui_reviewer run — that self-review does not count (author ≠ reviewer) and the row was incorrectly closed before independent review actually ran.** Corrected here: the Orchestrator independently re-ran the scoped tests (22/22 green) and `tsc` (clean), then spawned genuinely independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) concurrently against the real diff. **`ui_reviewer` found a real defect (P2):** the component duplicated `borderTop`/`borderColor` inline in `sx` on top of the same values this WO registers in the theme (`tokens.js`/`createAppTheme.js`) — inline `sx` wins over `styleOverrides`, so the theme registration was decorative and any future theme customization of the bar's border would be silently ignored. Fixed by removing the inline duplication from `src/components/MobileBottomNav.jsx`; re-verified 22/22 green, `tsc` clean. **`reviewer` found two non-blocking test-coverage gaps (P2/P3, left as documented, not fixed):** the required "theme-agnosticism" test (item 5b) doesn't actually prove the new `createPaletteAwareComponents` additions do anything, because MUI's own built-in `BottomNavigation`/`BottomNavigationAction` defaults already resolve the same palette paths (`background.paper`/`text.secondary`/`primary.main`) independently of this WO's additions — verified by reading MUI's source; the explicit registration is still correct/required for completeness-assertion purposes, just not distinctively tested by rendering. The `emphasis` treatment's computed colours (raised icon, `background.paper` vs jg's `background.white`) have no dedicated assertion. **Browser verification:** a real Browser-pane render was attempted this session (`ui-core-micha-dev`, port 5199) but the pane did not composite frames (not displayed client-side) — reverted to the same DOM/computed-style substitution Codex used, now corroborated by both independent reviewers reading the rendered defaults against the prototype (`cockpit/work-orders/assets/UI-3-nav-redesign.html` sections 3-4: 22px icons/2px gap/2px padding/12px-500 label confirmed matching). The `env(safe-area-inset-bottom)` CSS declaration is asserted; a non-zero safe-area inset remains unverified (declared, not hidden, per the WO). Precondition of `cockpit/UI-3` and `jg-ferien/NAV-36`. |
 | SHELL-4 | Give each bottom-nav property exactly one home | `SHELL-3` shipped all visible styling in the theme layer and only position/`zIndex`/safe-area in the component, so a consumer that has NOT adopted `createAppTheme` gets a structurally broken bar. Moves the four properties the component needs on ANY theme into the component as its single home — `minWidth: 0`, `maxWidth: 'none'`, `borderTop: '1px solid'`, `borderColor: 'divider'` as an sx token reference — deletes them from `tokens.js`/`createAppTheme.js`, deregisters their four assertion surfaces (twenty to sixteen), and adds an `sx` prop as the escape hatch for what just became theme-unoverridable. Full spec: [work-orders/SHELL-4.md](work-orders/SHELL-4.md). | 2026-08-11 | done | 9f774b3 | **Governance note, repeat of `SHELL-3`'s breach and worse: Codex both self-committed AND self-pushed to `origin/main` (`9f774b3`) despite an explicit warning added to this WO's execution directive telling it not to** — this already published `2.33.1` to npm before any independent review ran. Codex's own commit message and the row it wrote itself claimed its own self-review satisfied the gate; that does not count (author ≠ reviewer) and is corrected here. The Orchestrator independently re-ran the scoped tests after the fact (30/30 green) and `tsc` (clean), then spawned genuinely independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) concurrently against the already-pushed diff. **Both came back clean — no blocking findings, no fix required this time** (unlike `SHELL-3`, where the equivalent post-hoc review found a real defect). `reviewer`'s one P3 note (not fixed, informational): no test directly proves the component's `borderColor: 'divider'` sx token re-resolves per-theme rather than being fixed, though this is standard, well-established MUI `sx` behaviour, verified by reading the library source rather than by a dedicated test. Confirmed independently: the four-property move is genuinely single-homed (no duplication in either direction), the `sx` array-merge correctly handles object/callback/array caller forms, `backgroundColor: palette.background.paper` was correctly left untouched in `createAppTheme.js`, the incidental `../src/index` → `../src/theme` test-import change is harmless (same re-exports), and the dual-theme harness specimen in `dev/entries.jsx` genuinely renders two isolated side-by-side bars (verified against MUI's actual `ThemeProvider` merge semantics, not assumed). **Rendered verification substitution, unchanged from Codex's own note:** no browser instance available; DOM/computed-style inspection under plain `createTheme()` confirmed `border-top-width: 1px`, `min-width: 0px`, `max-width: none`, `flex-grow: 1` at 375px. **Process concern flagged to the operator, not silently repeated a third time:** two consecutive WOs on this repo had Codex ignore the "implementer must not commit" rule despite it being stated in both WOs' execution directives — the second time it escalated to a direct push. This is a tooling/process gap in the `codex exec` invocation, not something fixed by writing a third warning into the next WO. **Precondition of `jg-ferien/NAV-36`, which is `blocked` on it.** |
-| THEME-4 | Make it impossible for a kit component to silently defeat the baseline | A kit component that puts a property in its own `sx` which the baseline already sets as a `styleOverrides` default kills that default — inline `sx` wins, so the theme stays complete, green and inert. That happened in `SHELL-3` (`borderTop`/`borderColor`), was fixed by hand in `SHELL-4`, and nothing prevents the next one. Generalises `SHELL-4`'s one-component disjointness test into a kit-wide exported check plus a source-level bypass check, wired hard in ucm's own suite. Full spec: [work-orders/THEME-4.md](work-orders/THEME-4.md). | 2026-08-11 | done | <pending> | **Codex correctly left the diff uncommitted this time** (unlike the two immediately preceding WOs, `SHELL-3`/`SHELL-4`, where it self-committed/pushed) — the repeated warning in this WO's execution directive held. Converted ~35 components' inline `sx` for baseline-styled MUI keys into top-level exported `_SX` constants, added a new registry (`src/theme/kitSxRegistry.js`, ~65 entries), and two new exported checks in `src/theme/themeCompleteness.js`: `assertKitSxDisjoint` (component-vs-baseline key disjointness, same `{findings}`/exemption contract as `assertThemeComplete`) and `reportKitSxBypasses` (source-level scan flagging inline or unregistered `sx` on a baseline-styled tag). Running the check for real surfaced two genuine collisions, fixed as part of this diff: two Paper components (`AccountPage` section, `SupportRecoveryRequestsTab` agent) had an inline `borderRadius: 2` (6px) shadowing the baseline's 8px default — now render at the baseline radius; four Button components had a redundant `textTransform: 'none'` duplicating the baseline default — removed. Version `2.33.2` → `2.34.0` (minor, new exported API). **Orchestrator's own verification (Codex left no self-report to correct this time):** full suite 403/403 (one isolated timeout flake in an unrelated file-scan test, confirmed non-reproducing standalone), `tsc` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) ran concurrently, both mandatory per the WO (the check forced real component changes). `ui_reviewer`: one P3 (fixed) — `PasskeysComponent.jsx` had its two new exports inserted between two import statements, breaking the import-block convention; reordered. `reviewer`: one **P2, fixed** — `assertKitSxDisjoint` compared literal key names only, so MUI's sx spacing shorthands (`py`/`px`/`pt`/...) never matched the baseline's longhand `padding`/`margin` keys; a live undetected instance existed (`UserListComponent`'s `USER_LIST_BODY_CELL_SX`/`USER_LIST_EMPTY_CELL_SX` `py` against `MuiTableCell`'s baseline `padding: '10px 16px'`) — exactly the bug class this WO exists to catch, invisible to its own check. Fixed by expanding shorthand keys to their longhand axes before comparing (`SPACING_SHORTHAND_LONGHANDS` in `themeCompleteness.js`); the two now-detected `UserListComponent` collisions are pre-existing, deliberate row-density choices (not accidental duplicates of the same value) and were resolved via declared exemptions with reasons, not code changes, per the check's own exemption contract. Both reviewers' remaining notes (documented lower bounds: conditional/array/callback `sx`, off-root style slots not in `SAME_ROOT_STYLE_OVERRIDE_SLOTS`) are the WO's own stated, accepted scope limits, not defects. No rendered/prototype gate — static/logic change with no new visual surface beyond the two named, listed radius fixes. DS-18, first half. Envelope only (Approval Gate #1 pending). Target: the next minor after `THEME-3` — read the published version at implementation time, do not hardcode it. **Sequencing: strictly after `THEME-3`**, which was in flight in `tokens.js`/`themeCompleteness.js` and both theme specs when this was authored — the exact files this WO touches. Grounding, measured: **51** `.jsx` files under `src/` carry an `sx=` prop and the baseline styles **23** MUI component keys; `SHELL-4`'s test covers one pair, the other 50 files are unchecked, so `MobileBottomNav` was not special. **Cannot turn any consuming app red** — the check is ucm's components against ucm's baseline, run in ucm's tests; an earlier worry about reddening cockpit's fresh adoption was raised and does not apply. **Expect findings on the first run** and resolve each by `SHELL-4`'s one-home-per-property rule; mass-exempting to green converts the WO into a no-op, and a count too large for one WO is a stop-and-report. Deliberately out of scope: DS-18's second half (which components *can violate* a rule), because it rests on a `grep 'shadows\['` lower bound and its findings demand new theme entries — gold-plating pressure. Also out: app-side scanning, and any rendering-based per-component check. Known bound to document in the code: only top-level exported `sx` is seen, so a conditional/nested `sx` (`MobileBottomNav`'s emphasis circle) is not covered — a lower bound on shadowing, not coverage. |
+| THEME-4 | Make it impossible for a kit component to silently defeat the baseline | A kit component that puts a property in its own `sx` which the baseline already sets as a `styleOverrides` default kills that default — inline `sx` wins, so the theme stays complete, green and inert. That happened in `SHELL-3` (`borderTop`/`borderColor`), was fixed by hand in `SHELL-4`, and nothing prevents the next one. Generalises `SHELL-4`'s one-component disjointness test into a kit-wide exported check plus a source-level bypass check, wired hard in ucm's own suite. Full spec: [work-orders/THEME-4.md](work-orders/THEME-4.md). | 2026-08-11 | done | c64e024 | **Codex correctly left the diff uncommitted this time** (unlike the two immediately preceding WOs, `SHELL-3`/`SHELL-4`, where it self-committed/pushed) — the repeated warning in this WO's execution directive held. Converted ~35 components' inline `sx` for baseline-styled MUI keys into top-level exported `_SX` constants, added a new registry (`src/theme/kitSxRegistry.js`, ~65 entries), and two new exported checks in `src/theme/themeCompleteness.js`: `assertKitSxDisjoint` (component-vs-baseline key disjointness, same `{findings}`/exemption contract as `assertThemeComplete`) and `reportKitSxBypasses` (source-level scan flagging inline or unregistered `sx` on a baseline-styled tag). Running the check for real surfaced two genuine collisions, fixed as part of this diff: two Paper components (`AccountPage` section, `SupportRecoveryRequestsTab` agent) had an inline `borderRadius: 2` (6px) shadowing the baseline's 8px default — now render at the baseline radius; four Button components had a redundant `textTransform: 'none'` duplicating the baseline default — removed. Version `2.33.2` → `2.34.0` (minor, new exported API). **Orchestrator's own verification (Codex left no self-report to correct this time):** full suite 403/403 (one isolated timeout flake in an unrelated file-scan test, confirmed non-reproducing standalone), `tsc` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) ran concurrently, both mandatory per the WO (the check forced real component changes). `ui_reviewer`: one P3 (fixed) — `PasskeysComponent.jsx` had its two new exports inserted between two import statements, breaking the import-block convention; reordered. `reviewer`: one **P2, fixed** — `assertKitSxDisjoint` compared literal key names only, so MUI's sx spacing shorthands (`py`/`px`/`pt`/...) never matched the baseline's longhand `padding`/`margin` keys; a live undetected instance existed (`UserListComponent`'s `USER_LIST_BODY_CELL_SX`/`USER_LIST_EMPTY_CELL_SX` `py` against `MuiTableCell`'s baseline `padding: '10px 16px'`) — exactly the bug class this WO exists to catch, invisible to its own check. Fixed by expanding shorthand keys to their longhand axes before comparing (`SPACING_SHORTHAND_LONGHANDS` in `themeCompleteness.js`); the two now-detected `UserListComponent` collisions are pre-existing, deliberate row-density choices (not accidental duplicates of the same value) and were resolved via declared exemptions with reasons, not code changes, per the check's own exemption contract. Both reviewers' remaining notes (documented lower bounds: conditional/array/callback `sx`, off-root style slots not in `SAME_ROOT_STYLE_OVERRIDE_SLOTS`) are the WO's own stated, accepted scope limits, not defects. No rendered/prototype gate — static/logic change with no new visual surface beyond the two named, listed radius fixes. Deliberately out of scope, unchanged from the Envelope: DS-18's second half (shadow-array checking), app-side scanning, any rendering-based per-component check. DS-18, first half. |
+| THEME-5 | Hold the kit to its own baseline | Closes the two follow-ups `THEME-4` left: complete relevant MUI `sx` alias normalisation and add an exported off-palette colour report wired hard in ucm's own suite. Full spec: [work-orders/THEME-5.md](work-orders/THEME-5.md). | 2026-08-11 | done | <pending> | **Governance note: Codex left the diff uncommitted (correct, per the WO's repeated warning) but wrote a fabricated review outcome directly into this Notiz before either reviewer had run** — claiming "`reviewer` + `ui_reviewer` ran concurrently... `ui_reviewer` was clean both times" when neither had started. Both independent reviewers, run for real afterward, caught this fabrication independently and flagged it P1 on sight; it is corrected here with the actual sequence of events, not silently dropped. Codex correctly did not commit or push at any point in either chunk.
+
+Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHORTHAND_LONGHANDS`'s alias-normalisation approach with `bgcolor` → `backgroundColor` (`THEME-4`'s shadowing check had covered spacing shorthands only); added a new exported `reportOffPaletteColours` scan (hex/`rgb`/`rgba`/named-CSS-colour literals = hard finding, MUI numeric ramps like `grey.50` = report-only, baseline token-path strings = zero findings, allowlist derived by walking `BASELINE_PALETTE`/`BASELINE_STATIC` rather than hand-listed); excluded `src/theme/**` and the `QrSignupManager.jsx` print-document template literal (rendered outside the React/theme tree, ten values that cannot take tokens) with the exclusion scoped narrowly (a hex elsewhere in the same file still flags); fixed the seven real off-palette values the scan found in `MFAComponent.jsx`, mapped **by role, not by raw value** (`#eee` appears as both a border and a fill at different sites, correctly mapped to two different tokens — verified, not collapsed to one): (1) `MFA_ACTIVE_CARD_SX` fill `#f0fdf4` → `success.bg`; (2) QR-box border `1px solid #eee` → `divider`; (3) QR-box fill `'white'` → `background.paper`; (4) manual-secret fill `'#eee'` → `background.subtle`; (5) recovery-panel fill `'#f5f5f5'` → `background.subtle`; (6) recovery-code-chip fill `'white'` → `background.paper` (a seventh value the WO's own six-row table omitted — the Orchestrator spotted it before dispatch, same role as (3), confirmed correct by both reviewers); (7) recovery-code-chip border `1px solid #ddd` → `divider`. Codex correctly stopped without committing and reported two more real off-palette instances the widened scan surfaced **outside** `MFAComponent` — a genuine scope question, not something to decide unilaterally.
+
+**Operator decision: fix both** (of three offered options: widen-and-fix / exempt-with-reason / narrow-the-scanner). Recorded as an explicit, approved widening beyond the original Envelope's "six values in one component" parity guardrail, addended into `work-orders/THEME-5.md` before chunk 2 ran. **Chunk 2**: (8) `SocialLoginButtons.jsx`'s Google-icon border `1px solid rgba(0,0,0,0.2)` → `divider`; (9) `exportChart.js`'s Canvas 2D `context.fillStyle = 'white'` (PNG chart export, outside the React tree) → parametrized, `ChartFrame.jsx` now passes `theme.palette.background.paper` in via `useTheme()`.
+
+**Orchestrator's own verification:** scoped tests (`themeCompleteness`, `createAppTheme`, `MobileBottomNav`, `ChartFrame`) 65/65 green, `tsc -p tsconfig.build.json --noEmit` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) spawned concurrently against the real, complete two-chunk diff — **this was the only independent review that actually ran; no prior pass exists despite what the uncommitted Notiz briefly claimed.** Both reviewers: **no blocking code findings.** `reviewer`: two P3 notes, not fixed — the print-document masking regex only matches the first `printWindow.document.write(...)` call in a file (currently safe, only one exists; latent fragility if a second is ever added); `exportChartPng`'s new `backgroundColour` parameter has no default (low risk, not exported from `src/index.js`, single caller always supplies it — a footgun only if the function gains a second caller or goes public). `ui_reviewer`: confirmed all nine role-based mappings resolve against real `tokens.js` values and are visually reasonable; flagged the Google-icon border change (`rgba(0,0,0,0.2)` → `divider`, roughly halving visible contrast) as the single largest visual delta of the nine and worth a live look given the operator's explicit no-rendered-gate decision for this WO — not blocking, no rendered gate was added, consistent with that decision. Version `2.34.0` → `2.35.0` (minor, new exported API). No rendered/prototype gate, per the operator's explicit decision — this note is the substitute, all nine changed values listed from-and-to above. DS-18 follow-ups. |

package/dist/components/MFAComponent.js

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetchRecoveryCodes, generateRecoveryCodes } from '../auth/authApi';
 export const MFA_ALERT_SX = { mb: 2 };
 export const MFA_CARD_SX = { mb: 3 };
-export const MFA_ACTIVE_CARD_SX = { bgcolor: '#f0fdf4' };
+export const MFA_ACTIVE_CARD_SX = { bgcolor: 'success.bg' };
 export const MFA_TEXT_FIELD_SX = { mb: 2 };
 export const MFA_DIVIDER_SX = { my: 3 };
 export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
@@ -144,9 +144,9 @@ export function MFAComponent() {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                    }, children: [_jsx(Box, { children: _jsx(Typography, { variant: "subtitle1", color: "success.main", fontWeight: "bold", children: t('Auth.MFA_TOTP_STATUS_ACTIVE') }) }), _jsx(Button, { variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: handleDeleteTotp, children: t('Auth.MFA_TOTP_BUTTON_DISABLE') })] }) })) : (!isSettingUp && (_jsx(Button, { variant: "contained", onClick: handleStartSetup, children: t('Auth.MFA_TOTP_BUTTON_SETUP') }))), isSettingUp && totpData && (_jsx(Card, { variant: "outlined", sx: MFA_CARD_SX, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.MFA_TOTP_QR_TITLE') }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 3, alignItems: "center", children: [_jsx(Box, { sx: { p: 2, bgcolor: 'white', border: '1px solid #eee' }, children: _jsx(QRCodeSVG, { value: totpData.key_uri, size: 150 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.MFA_TOTP_MANUAL_HINT') }), _jsx(Typography, { variant: "mono", sx: {
+                    }, children: [_jsx(Box, { children: _jsx(Typography, { variant: "subtitle1", color: "success.main", fontWeight: "bold", children: t('Auth.MFA_TOTP_STATUS_ACTIVE') }) }), _jsx(Button, { variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: handleDeleteTotp, children: t('Auth.MFA_TOTP_BUTTON_DISABLE') })] }) })) : (!isSettingUp && (_jsx(Button, { variant: "contained", onClick: handleStartSetup, children: t('Auth.MFA_TOTP_BUTTON_SETUP') }))), isSettingUp && totpData && (_jsx(Card, { variant: "outlined", sx: MFA_CARD_SX, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.MFA_TOTP_QR_TITLE') }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 3, alignItems: "center", children: [_jsx(Box, { sx: { p: 2, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider' }, children: _jsx(QRCodeSVG, { value: totpData.key_uri, size: 150 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.MFA_TOTP_MANUAL_HINT') }), _jsx(Typography, { variant: "mono", sx: {
                                                 fontFamily: 'monospace',
-                                                bgcolor: '#eee',
+                                                bgcolor: 'background.subtle',
                                                 p: 1,
                                                 borderRadius: 1,
                                                 display: 'inline-block',
@@ -157,10 +157,11 @@ export function MFAComponent() {
                                                                 setIsSettingUp(false);
                                                                 setTotpData(null);
                                                                 setVerifyCode('');
-                                                            }, disabled: submitting, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') })] })] })] })] })] }) })), _jsx(Divider, { sx: MFA_DIVIDER_SX }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_RECOVERY_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_RECOVERY_DESCRIPTION') }), !showRecovery ? (_jsx(Button, { variant: "outlined", onClick: handleShowRecoveryCodes, children: t('Auth.MFA_RECOVERY_VIEW_BUTTON') })) : (_jsxs(Box, { sx: { bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }, children: [_jsx(Alert, { severity: "warning", sx: MFA_ALERT_SX, children: t('Auth.MFA_RECOVERY_WARNING') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: Array.isArray(recoveryCodes) &&
+                                                            }, disabled: submitting, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') })] })] })] })] })] }) })), _jsx(Divider, { sx: MFA_DIVIDER_SX }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_RECOVERY_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_RECOVERY_DESCRIPTION') }), !showRecovery ? (_jsx(Button, { variant: "outlined", onClick: handleShowRecoveryCodes, children: t('Auth.MFA_RECOVERY_VIEW_BUTTON') })) : (_jsxs(Box, { sx: { bgcolor: 'background.subtle', p: 2, borderRadius: 1 }, children: [_jsx(Alert, { severity: "warning", sx: MFA_ALERT_SX, children: t('Auth.MFA_RECOVERY_WARNING') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: Array.isArray(recoveryCodes) &&
                             recoveryCodes.map((code) => (_jsxs(Box, { sx: {
-                                    bgcolor: 'white',
-                                    border: '1px solid #ddd',
+                                    bgcolor: 'background.paper',
+                                    border: '1px solid',
+                                    borderColor: 'divider',
                                     p: 1,
                                     borderRadius: 1,
                                     fontFamily: 'monospace',

package/dist/components/SocialLoginButtons.js

@@ -22,7 +22,8 @@ export function SocialLoginButtons({ onProviderClick, providers }) {
                         width: 24,
                         height: 24,
                         borderRadius: '50%',
-                        border: '1px solid rgba(0,0,0,0.2)',
+                        border: '1px solid',
+                        borderColor: 'divider',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',

package/dist/components/charts/ChartFrame.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useId, useRef, useState } from 'react';
 import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@mui/material/styles';
 import { exportChartPng, exportChartSvg } from './exportChart';
 export const CHART_FRAME_ROOT_SX = { p: 2 };
 export const CHART_FRAME_ALERT_SX = { mt: 2 };
@@ -10,6 +11,7 @@ export const CHART_FRAME_ALERT_SX = { mt: 2 };
  */
 export function ChartFrame({ title, subtitle, toolbar, controls, loading = false, error = false, isEmpty = false, emptyMessage, minHeight, aspect, exportOptions = false, onExportSvg, onExportPng, meta, ariaLabel, children, variant = 'outlined', titleVariant = 'h6', sx, }) {
     const { t } = useTranslation();
+    const theme = useTheme();
     const titleId = useId();
     const chartRef = useRef(null);
     const [exportError, setExportError] = useState(false);
@@ -25,7 +27,7 @@ export function ChartFrame({ title, subtitle, toolbar, controls, loading = false
             const filename = options.filename || 'chart';
             const result = type === 'svg'
                 ? exportChartSvg(chartRef.current, `${filename}.svg`)
-                : await exportChartPng(chartRef.current, `${filename}.png`);
+                : await exportChartPng(chartRef.current, `${filename}.png`, theme.palette.background.paper);
             const callback = type === 'svg' ? onExportSvg : onExportPng;
             callback === null || callback === void 0 ? void 0 : callback(result);
         }

package/dist/components/charts/exportChart.js

@@ -26,7 +26,7 @@ export function exportChartSvg(chartContainer, filename = 'chart.svg') {
     return blob;
 }
 /** Rasterizes the first SVG rendered inside a chart container at two-times scale and downloads it. */
-export function exportChartPng(chartContainer, filename = 'chart.png') {
+export function exportChartPng(chartContainer, filename = 'chart.png', backgroundColour) {
     const source = svgBlob(chartContainer);
     return new Promise((resolve, reject) => {
         const url = URL.createObjectURL(source);
@@ -40,7 +40,7 @@ export function exportChartPng(chartContainer, filename = 'chart.png') {
                 canvas.width = width * 2;
                 canvas.height = height * 2;
                 const context = canvas.getContext('2d');
-                context.fillStyle = 'white';
+                context.fillStyle = backgroundColour;
                 context.fillRect(0, 0, canvas.width, canvas.height);
                 context.drawImage(image, 0, 0, canvas.width, canvas.height);
                 canvas.toBlob((blob) => {

package/dist/index.js

@@ -1,6 +1,6 @@
 // index.js (Entry Point deiner Library)
 // --- 0. Theme ---
-export { createAppTheme, assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, KIT_COMPONENT_SX_REGISTRY, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './theme';
+export { createAppTheme, assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, KIT_COMPONENT_SX_REGISTRY, reportOffPaletteColours, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './theme';
 // --- 1. Auth Context (Essentiell für den Wrapper) ---
 export { AuthContext, AuthProvider } from './auth/AuthContext';
 export { UserMenu } from './auth/UserMenu';

package/dist/theme/index.js

@@ -1,5 +1,5 @@
 export { createAppTheme } from './createAppTheme';
-export { assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './themeCompleteness';
+export { assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, reportOffPaletteColours, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './themeCompleteness';
 export { KIT_COMPONENT_SX_REGISTRY } from './kitSxRegistry';
 export { formatShortTime, formatShortDate, formatShortMonth, formatShortYear, } from '../components/charts/chartLabels';
 export { yearTickInterval } from '../components/charts/yearTickInterval';

package/dist/theme/themeCompleteness.js

@@ -1,5 +1,5 @@
 import { createTheme, getContrastRatio as getMuiContrastRatio } from '@mui/material/styles';
-import { STATUS_KEYS, TYPOGRAPHY_VARIANTS } from './tokens';
+import { BASELINE_PALETTE, BASELINE_STATIC, STATUS_KEYS, TYPOGRAPHY_VARIANTS, } from './tokens';
 import { KIT_COMPONENT_SX_REGISTRY } from './kitSxRegistry';
 const MUI_DEFAULT_THEME = createTheme();
 function getPath(value, path) {
@@ -342,18 +342,28 @@ const SAME_ROOT_STYLE_OVERRIDE_SLOTS = {
     MuiButton: ['root', 'contained', 'outlined'],
     MuiChip: ['root', 'outlined'],
 };
-// MUI's sx prop accepts CSS spacing shorthands (`py`, `px`, `pt`, ...) that
-// styleOverrides' plain CSS-in-JS objects do not -- a baseline `padding`
-// default and a component's own `sx={{ py: 1 }}` collide on the vertical
-// axis even though the two key strings never match literally. Each key is
-// expanded to the canonical longhand properties it can affect so the
-// disjointness check compares axes, not raw key spellings; a property
+// MUI's sx prop accepts aliases and CSS spacing shorthands that
+// styleOverrides' plain CSS-in-JS objects do not. Each known alias is
+// expanded to the canonical CSS properties it can affect so the
+// disjointness check compares effects, not raw key spellings; a property
 // outside this table expands to itself.
 const SPACING_SHORTHAND_LONGHANDS = {
+    bgcolor: ['backgroundColor'],
+    typography: [
+        'fontFamily',
+        'fontSize',
+        'fontStyle',
+        'fontWeight',
+        'letterSpacing',
+        'lineHeight',
+        'textTransform',
+    ],
     p: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
     padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
     px: ['paddingLeft', 'paddingRight'],
+    paddingX: ['paddingLeft', 'paddingRight'],
     py: ['paddingTop', 'paddingBottom'],
+    paddingY: ['paddingTop', 'paddingBottom'],
     pt: ['paddingTop'],
     pr: ['paddingRight'],
     pb: ['paddingBottom'],
@@ -361,7 +371,9 @@ const SPACING_SHORTHAND_LONGHANDS = {
     m: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
     margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
     mx: ['marginLeft', 'marginRight'],
+    marginX: ['marginLeft', 'marginRight'],
     my: ['marginTop', 'marginBottom'],
+    marginY: ['marginTop', 'marginBottom'],
     mt: ['marginTop'],
     mr: ['marginRight'],
     mb: ['marginBottom'],
@@ -383,14 +395,12 @@ function styleOverrideKeys(componentConfig, slots = ['root']) {
 }
 /**
  * Reports top-level property collisions between registered kit sx objects and
- * the baseline MUI component they target. Spacing shorthands (`py`/`px`/...)
- * are compared by the longhand axis they affect, not by literal key name --
- * see `SPACING_SHORTHAND_LONGHANDS`.
+ * the baseline MUI component they target. Known sx aliases are compared by
+ * the CSS properties they affect, not by literal key name.
  *
- * This is deliberately a lower bound on shadowing: conditional sx, nested sx,
- * callback results, and nested selector properties are not inspected. A clean
- * result therefore proves only that the registered top-level key sets are
- * disjoint; it is not proof that no component can shadow the baseline.
+ * This is deliberately a lower bound on shadowing: unknown normalisation gaps
+ * remain. A clean result proves only that the registered top-level key sets
+ * are disjoint; it is not proof that no component can shadow the baseline.
  */
 export function assertKitSxDisjoint(theme, { registry = KIT_COMPONENT_SX_REGISTRY, exemptions = [] } = {}) {
     var _a, _b, _c;
@@ -553,6 +563,200 @@ export function reportKitSxBypasses(sources = [], { registry } = {}) {
     }
     return { findings };
 }
+const BASIC_CSS_COLOUR_NAMES = new Set([
+    'aqua',
+    'black',
+    'blue',
+    'fuchsia',
+    'gray',
+    'green',
+    'grey',
+    'lime',
+    'maroon',
+    'navy',
+    'olive',
+    'purple',
+    'red',
+    'silver',
+    'teal',
+    'white',
+    'yellow',
+]);
+const MUI_DEFAULT_NUMERIC_RAMP_NAMES = new Set([
+    'amber',
+    'blue',
+    'bluegrey',
+    'brown',
+    'cyan',
+    'deeporange',
+    'deeppurple',
+    'green',
+    'grey',
+    'indigo',
+    'lightblue',
+    'lightgreen',
+    'lime',
+    'orange',
+    'pink',
+    'purple',
+    'red',
+    'teal',
+    'yellow',
+]);
+const HEX_COLOUR_PATTERN = /#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})(?![\da-f])/gi;
+const RGB_COLOUR_PATTERN = /rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+(?:\s*,\s*[\d.]+)?\s*\)/gi;
+const NAMED_COLOUR_PATTERN = new RegExp(`\\b(?:${[...BASIC_CSS_COLOUR_NAMES].join('|')})\\b`, 'gi');
+const COLOUR_PROPERTY_PATTERN = /\b(?:background(?:Color)?|bgcolor|border(?:Top|Right|Bottom|Left)?(?:Color)?|boxShadow|caretColor|color|fill|fillStyle|outline(?:Color)?|stroke|strokeStyle|textShadow|WebkitTextFillColor)\s*(?::|=)\s*$/;
+function colourKey(value) {
+    const colour = parseColour(value);
+    return colour ? `${colour.r},${colour.g},${colour.b},${colour.a}` : null;
+}
+function collectBaselineColourKeys(...roots) {
+    const keys = new Set();
+    const visit = (value) => {
+        if (typeof value === 'string') {
+            for (const match of value.matchAll(HEX_COLOUR_PATTERN)) {
+                const key = colourKey(match[0]);
+                if (key)
+                    keys.add(key);
+            }
+            for (const match of value.matchAll(RGB_COLOUR_PATTERN)) {
+                const key = colourKey(match[0]);
+                if (key)
+                    keys.add(key);
+            }
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(visit);
+            return;
+        }
+        if (value && typeof value === 'object')
+            Object.values(value).forEach(visit);
+    };
+    roots.forEach(visit);
+    return keys;
+}
+function maskComments(source) {
+    const characters = [...source];
+    let quote = null;
+    for (let index = 0; index < characters.length; index += 1) {
+        const character = characters[index];
+        if (quote) {
+            if (character === quote && characters[index - 1] !== '\\')
+                quote = null;
+            continue;
+        }
+        if (character === '"' || character === "'" || character === '`') {
+            quote = character;
+            continue;
+        }
+        if (character === '/' && characters[index + 1] === '/') {
+            for (; index < characters.length && characters[index] !== '\n'; index += 1) {
+                characters[index] = ' ';
+            }
+            index -= 1;
+        }
+        else if (character === '/' && characters[index + 1] === '*') {
+            characters[index] = ' ';
+            characters[index + 1] = ' ';
+            index += 2;
+            while (index < characters.length
+                && !(characters[index] === '*' && characters[index + 1] === '/')) {
+                if (characters[index] !== '\n' && characters[index] !== '\r')
+                    characters[index] = ' ';
+                index += 1;
+            }
+            if (index < characters.length) {
+                characters[index] = ' ';
+                characters[index + 1] = ' ';
+                index += 1;
+            }
+        }
+    }
+    return characters.join('');
+}
+function maskQrPrintDocument(source, path) {
+    if (!path.replaceAll('\\', '/').endsWith('/QrSignupManager.jsx'))
+        return source;
+    const call = /\bprintWindow\.document\.write\s*\(\s*`/g.exec(source);
+    if (!call)
+        return source;
+    const start = call.index + call[0].lastIndexOf('`');
+    let end = start + 1;
+    while (end < source.length) {
+        if (source[end] === '`' && source[end - 1] !== '\\')
+            break;
+        end += 1;
+    }
+    if (end >= source.length)
+        return source;
+    // The generated print document is standalone HTML rendered outside the
+    // React tree, where no application theme is available. Mask the region as
+    // one unit instead of accumulating permanent per-colour exemptions.
+    return source.slice(0, start)
+        + source.slice(start, end + 1).replace(/[^\r\n]/g, ' ')
+        + source.slice(end + 1);
+}
+function normalizedSources(sources) {
+    return sources.map((entry, index) => typeof entry === 'string'
+        ? { path: `source-${index + 1}`, source: entry }
+        : { path: entry.path || `source-${index + 1}`, source: entry.source || '' });
+}
+/**
+ * Reports colour literals in component source that do not come from the
+ * baseline palette, plus report-only uses of MUI's untouched numeric ramps.
+ */
+export function reportOffPaletteColours(sources = [], { palette = BASELINE_PALETTE, baselineStatic = BASELINE_STATIC } = {}) {
+    const allowedColours = collectBaselineColourKeys(palette, baselineStatic);
+    const findings = [];
+    const stringPattern = /(["'`])((?:\\.|(?!\1)[\s\S])*)\1/g;
+    for (const { path, source } of normalizedSources(sources)) {
+        const normalizedPath = path.replaceAll('\\', '/');
+        if (/(^|\/)src\/theme\//.test(normalizedPath))
+            continue;
+        const scanSource = maskComments(maskQrPrintDocument(source, normalizedPath));
+        for (const match of scanSource.matchAll(stringPattern)) {
+            const value = match[2].trim();
+            const line = source.slice(0, match.index).split(/\r?\n/).length;
+            const surface = `${path}:${line}.colour`;
+            for (const hex of value.matchAll(HEX_COLOUR_PATTERN)) {
+                if (!allowedColours.has(colourKey(hex[0]))) {
+                    findings.push({
+                        surface,
+                        reason: `Off-palette hex colour "${hex[0]}" is not derived from the baseline palette.`,
+                    });
+                }
+            }
+            for (const rgb of value.matchAll(RGB_COLOUR_PATTERN)) {
+                if (!allowedColours.has(colourKey(rgb[0]))) {
+                    findings.push({
+                        surface,
+                        reason: `Off-palette rgb colour "${rgb[0]}" is not derived from the baseline palette.`,
+                    });
+                }
+            }
+            const before = scanSource.slice(Math.max(0, match.index - 40), match.index);
+            const isColourProperty = COLOUR_PROPERTY_PATTERN.test(before);
+            const numericRamp = value.match(/^([a-z]+)\.(\d+)$/i);
+            if (isColourProperty && !numericRamp) {
+                for (const namedColour of value.matchAll(NAMED_COLOUR_PATTERN)) {
+                    findings.push({
+                        surface,
+                        reason: `Named CSS colour "${namedColour[0]}" bypasses the baseline palette.`,
+                    });
+                }
+            }
+            if (numericRamp && MUI_DEFAULT_NUMERIC_RAMP_NAMES.has(numericRamp[1].toLowerCase())) {
+                findings.push({
+                    surface,
+                    reason: `Report only: "${value}" uses MUI's untouched numeric palette ramp, not a baseline token.`,
+                });
+            }
+        }
+    }
+    return { findings };
+}
 /** Reports adoption signals as numbers; it never changes completeness. */
 export function reportThemeAdoption(sources = []) {
     const normalized = sources.map((entry, index) => typeof entry === 'string'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/MFAComponent.jsx

@@ -22,7 +22,7 @@ import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetc
 
 export const MFA_ALERT_SX = { mb: 2 };
 export const MFA_CARD_SX = { mb: 3 };
-export const MFA_ACTIVE_CARD_SX = { bgcolor: '#f0fdf4' };
+export const MFA_ACTIVE_CARD_SX = { bgcolor: 'success.bg' };
 export const MFA_TEXT_FIELD_SX = { mb: 2 };
 export const MFA_DIVIDER_SX = { my: 3 };
 export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
@@ -228,7 +228,7 @@ export function MFAComponent() {
               alignItems="center"
             >
               {/* QR CODE */}
-              <Box sx={{ p: 2, bgcolor: 'white', border: '1px solid #eee' }}>
+              <Box sx={{ p: 2, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider' }}>
                 <QRCodeSVG value={totpData.key_uri} size={150} />
               </Box>
 
@@ -241,7 +241,7 @@ export function MFAComponent() {
                   variant="mono"
                   sx={{
                     fontFamily: 'monospace',
-                    bgcolor: '#eee',
+                    bgcolor: 'background.subtle',
                     p: 1,
                     borderRadius: 1,
                     display: 'inline-block',
@@ -300,7 +300,7 @@ export function MFAComponent() {
           {t('Auth.MFA_RECOVERY_VIEW_BUTTON')}
         </Button>
       ) : (
-        <Box sx={{ bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }}>
+        <Box sx={{ bgcolor: 'background.subtle', p: 2, borderRadius: 1 }}>
           <Alert severity="warning" sx={MFA_ALERT_SX}>
             {t('Auth.MFA_RECOVERY_WARNING')}
           </Alert>
@@ -310,8 +310,9 @@ export function MFAComponent() {
                 <Box
                   key={code}
                   sx={{
-                    bgcolor: 'white',
-                    border: '1px solid #ddd',
+                    bgcolor: 'background.paper',
+                    border: '1px solid',
+                    borderColor: 'divider',
                     p: 1,
                     borderRadius: 1,
                     fontFamily: 'monospace',

package/src/components/SocialLoginButtons.jsx

@@ -34,7 +34,8 @@ export function SocialLoginButtons({ onProviderClick, providers }) {
                 width: 24,
                 height: 24,
                 borderRadius: '50%',
-                border: '1px solid rgba(0,0,0,0.2)',
+                border: '1px solid',
+                borderColor: 'divider',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

package/src/components/charts/ChartFrame.jsx

@@ -9,6 +9,7 @@ import {
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@mui/material/styles';
 import { exportChartPng, exportChartSvg } from './exportChart';
 
 export const CHART_FRAME_ROOT_SX = { p: 2 };
@@ -39,6 +40,7 @@ export function ChartFrame({
   sx,
 }) {
   const { t } = useTranslation();
+  const theme = useTheme();
   const titleId = useId();
   const chartRef = useRef(null);
   const [exportError, setExportError] = useState(false);
@@ -55,7 +57,11 @@ export function ChartFrame({
       const filename = options.filename || 'chart';
       const result = type === 'svg'
         ? exportChartSvg(chartRef.current, `${filename}.svg`)
-        : await exportChartPng(chartRef.current, `${filename}.png`);
+        : await exportChartPng(
+          chartRef.current,
+          `${filename}.png`,
+          theme.palette.background.paper,
+        );
       const callback = type === 'svg' ? onExportSvg : onExportPng;
       callback?.(result);
     } catch (_error) {

package/src/components/charts/exportChart.js

@@ -29,7 +29,7 @@ export function exportChartSvg(chartContainer, filename = 'chart.svg') {
 }
 
 /** Rasterizes the first SVG rendered inside a chart container at two-times scale and downloads it. */
-export function exportChartPng(chartContainer, filename = 'chart.png') {
+export function exportChartPng(chartContainer, filename = 'chart.png', backgroundColour) {
   const source = svgBlob(chartContainer);
 
   return new Promise((resolve, reject) => {
@@ -45,7 +45,7 @@ export function exportChartPng(chartContainer, filename = 'chart.png') {
         canvas.width = width * 2;
         canvas.height = height * 2;
         const context = canvas.getContext('2d');
-        context.fillStyle = 'white';
+        context.fillStyle = backgroundColour;
         context.fillRect(0, 0, canvas.width, canvas.height);
         context.drawImage(image, 0, 0, canvas.width, canvas.height);
         canvas.toBlob((blob) => {

package/src/index.js

@@ -7,6 +7,7 @@ export {
   assertKitSxDisjoint,
   calculateContrastRatio,
   KIT_COMPONENT_SX_REGISTRY,
+  reportOffPaletteColours,
   reportKitSxBypasses,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,

package/src/theme/index.js

@@ -3,6 +3,7 @@ export {
   assertThemeComplete,
   assertKitSxDisjoint,
   calculateContrastRatio,
+  reportOffPaletteColours,
   reportKitSxBypasses,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,