Say Remove for displays, and make the default accent purple (#210050)

Administrators now remove a display: the card's Remove, "Remove display?", and "Display removed". The platform still revokes the device's credential; the endpoint, fields, and security history keep revoke/revoked (ADR 0065). The default accent is a deep purple anchored on #210050, set in the shared design tokens only (ADR 0066, superseding ADR 0060's teal in part). The anchor is the light primary action with white on it; the light accent text, focus ring, and selection, and the dark theme's lavender accent, are variants on its hue chosen for contrast. The teal-tinted neutrals move to a faint violet-grey at the same lightness, so every contrast pairing holds. The contrast test gains six pairings the accent depends on, and pins the anchor. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-16 19:14:46 -05:00
parent d9dafcb0f7
commit 0009f62fbd
10 changed files with 261 additions and 97 deletions
@@ -87,6 +87,12 @@ const PAIRINGS: readonly Pairing[] = [
  ["accent.focus", "background.canvas", NON_TEXT, "focus ring in the sidebar"],
  ["accent.focus", "background.surface", NON_TEXT, "focus ring in a panel"],
  ["accent.focus", "background.raised", NON_TEXT, "focus ring in a dialog"],
+  ["accent.base", "background.page", NON_TEXT, "the brand mark and a spinner on the page"],
+  ["accent.base", "background.canvas", NON_TEXT, "the brand mark in the sidebar"],
+  ["accent.base", "background.surface", NON_TEXT, "a selected tab's underline in a panel"],
+  ["state.selected-foreground", "accent.subtle", TEXT, "a selected tab's label"],
+  ["accent.strong", "background.raised", TEXT, "accent text in a dialog"],
+  ["background.surface", "accent.strong", NON_TEXT, "the mark inside a checked box or radio"],
 ];

 describe.each([
@@ -102,6 +108,19 @@ describe.each([
  });
 });

+describe("the default accent (ADR 0066)", () => {
+  it("is anchored on #210050: the light primary action, with white on it", () => {
+    expect(ekklesiaDesignTokens.valueFor("accent.base", "light")).toBe("#210050");
+    expect(ekklesiaDesignTokens.valueFor("accent.foreground", "light")).toBe("#ffffff");
+  });
+
+  it("is lifted in dark rather than forced, and draws the anchor on it", () => {
+    // #210050 on a dark surface would all but vanish; the dark accent is a lavender of its hue.
+    expect(ekklesiaDesignTokens.valueFor("accent.base", "dark")).not.toBe("#210050");
+    expect(ekklesiaDesignTokens.valueFor("accent.foreground", "dark")).toBe("#210050");
+  });
+});
+
 describe("the contrast calculator", () => {
  it("agrees with WCAG's reference values", () => {
    expect(contrastRatio("#000000", "#ffffff")).toBeCloseTo(21, 5);