feat(ui): establish semantic colors and focus foundation

2026-09-11 09:04:55 +02:00
parent f696f23fc5
commit 115441a409
26 changed files with 1689 additions and 34 deletions
@@ -0,0 +1,24 @@
+import { getContrastRatio } from "@mui/material/styles";
+import { getTheme } from "./theme";
+
+// Contract tests for text/button pairs, not snapshots of particular brand hex values.
+describe.each(["light", "dark"] as const)("%s semantic contrast", mode => {
+  const palette = getTheme(mode).colorSchemes[mode].palette;
+  test.each(["primary", "secondary", "success", "warning", "error", "info"])("%s supports text and filled actions", role => {
+    const color = palette[role];
+    for (const surface of [palette.background.default, palette.background.paper, palette.background.elevated ?? palette.background.paper]) {
+      expect(getContrastRatio(color.main, surface)).toBeGreaterThanOrEqual(4.5);
+    }
+    for (const fill of [color.main, color.dark]) {
+      expect(getContrastRatio(color.contrastText, fill)).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+  test("focus and essential control boundaries contrast with all application surfaces", () => {
+    for (const surface of [palette.background.default, palette.background.paper, palette.background.elevated]) {
+      expect(getContrastRatio(palette.focus.main, surface)).toBeGreaterThanOrEqual(3);
+      expect(getContrastRatio(palette.border.default, surface)).toBeGreaterThanOrEqual(3);
+    }
+    expect(getContrastRatio(palette.focus.inverse, palette.navigation.background)).toBeGreaterThanOrEqual(3);
+    expect(palette.action.selected).not.toBe(palette.action.hover);
+  });
+});