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]>

surfaces/shell/tests/displays-settings.test.tsx

@@ -259,7 +259,7 @@ describe("Settings → Displays", () => {
     expect(required("device-device-1-showing").textContent).toBe("Showing: Nothing yet");
     expect(card.textContent).toContain("Last seen within the last hour");
     expect(query("device-change-device-1")?.textContent).toBe("Change");
-    expect(query("device-revoke-device-1")?.textContent).toBe("Revoke");
+    expect(query("device-revoke-device-1")?.textContent).toBe("Remove");
     expect(container.querySelector("h1")?.textContent).toBe("Displays");
     // Setting up a new screen comes first, in one place, at the platform's own setup address.
     const setup = required("display-setup");
@@ -271,7 +271,7 @@ describe("Settings → Displays", () => {
     expect(document.activeElement).toBe(before);
   });
 
-  it("shows only active displays: revoked ones are history, not the normal list", async () => {
+  it("shows only active displays: removed ones are history, not the normal list", async () => {
     await renderPage({
       devices: [
         {
@@ -300,7 +300,8 @@ describe("Settings → Displays", () => {
     expect(query("device-a")).not.toBeNull();
     expect(query("device-b")).toBeNull();
     expect(query("device-c")).toBeNull();
-    expect(container.textContent).not.toContain("Revoked");
+    // Removed displays are never described as "revoked" in the normal interface.
+    expect(container.textContent).not.toMatch(/revok/iu);
     expect(required("device-a").textContent).toContain("Not connected yet");
   });
 
@@ -503,18 +504,22 @@ describe("changing what a display shows (ADR 0065)", () => {
 });
 
 /**
- * Revoking a display strands that screen until someone re-pairs it in person, so the page explains
- * the consequence in its own dialog first — never with a browser-native confirm (DESIGN §21).
+ * Removing a display (revoking its credential) strands that screen until someone re-pairs it in
+ * person, so the page explains the consequence in its own dialog first — never with a
+ * browser-native confirm (DESIGN §21). The interface says "remove"; only the platform says "revoke".
  */
-describe("display revocation", () => {
-  it("asks in a product dialog before revoking, and does nothing on cancel", async () => {
+describe("removing a display", () => {
+  it("asks in a product dialog before removing, and does nothing on cancel", async () => {
     const confirm = vi.fn(() => true);
     Object.assign(window, { confirm });
     const platform = await renderPage();
 
     await click("device-revoke-device-1");
     const dialog = container.querySelector('[role="dialog"]');
-    expect(dialog?.textContent).toContain("Revoke Foyer TV?");
+    // Administrators remove a display; revoking its credential is the platform's word, not theirs.
+    expect(dialog?.textContent).toContain("Remove display?");
+    expect(dialog?.textContent).toContain("Foyer TV stops showing content");
+    expect(dialog?.textContent).not.toMatch(/revok/iu);
     expect(dialog?.textContent).toContain("pairing code");
 
     await click("device-revoke-cancel");
@@ -523,7 +528,7 @@ describe("display revocation", () => {
     expect(confirm).not.toHaveBeenCalled();
   });
 
-  it("removes a revoked display from the list at once, and says what happened", async () => {
+  it("takes a removed display off the list at once, and says what happened", async () => {
     const platform = await renderPage();
 
     await click("device-revoke-device-1");
@@ -536,7 +541,9 @@ describe("display revocation", () => {
     expect(query("device-device-1")).toBeNull();
     expect(platform.devices[0]?.revoked).toBe(true);
     expect(required("device-list-empty")).not.toBeNull();
-    expect(required("device-revoke-success").textContent).toContain("Foyer TV is revoked");
+    expect(required("device-outcome").textContent).toContain("Display removed");
+    expect(required("device-revoke-success").textContent).toContain("Foyer TV was removed");
+    expect(container.textContent).not.toMatch(/revok/iu);
     // Its card is gone, so focus lands on what happened rather than on the page.
     expect(document.activeElement).toBe(required("device-outcome"));
   });