fix(ui): give status pills an opaque background so selection tints keep contrast

app/src/__tests__/forms-panels.test.ts

@@ -285,6 +285,64 @@ describe('FormsInspector fields', () => {
   });
 });
 
+describe('FormsInspector status pills', () => {
+  // Backgrounds of the stylesheet rules that apply to an element, in source order.
+  function backgrounds(element: Element): string[] {
+    const found: string[] = [];
+    for (const sheet of Array.from(document.styleSheets)) {
+      for (const rule of Array.from(sheet.cssRules)) {
+        if (!(rule instanceof CSSStyleRule) || !element.matches(rule.selectorText)) continue;
+        const match = /background:\s*([^;]+);/.exec(rule.cssText);
+        if (match) found.push(match[1].trim());
+      }
+    }
+    return found;
+  }
+
+  it('gives the status badge on a selected row an opaque background', async () => {
+    const invalid: CollectedForm = {
+      ...form,
+      root: {
+        ...form.root,
+        status: 'INVALID',
+        children: [
+          field('email', {
+            status: 'INVALID',
+            errors: [{ kind: 'required', message: 'Required' }],
+          }),
+          field('name', { status: 'PENDING' }),
+          field('phone'),
+        ],
+      },
+    };
+    const fixture = TestBed.createComponent(FormsInspector);
+    fixture.componentRef.setInput(
+      'rpc',
+      fakeClient(() => Promise.resolve(''), [invalid]),
+    );
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+    const host = fixture.nativeElement as HTMLElement;
+    button(fixture, 'Show details for email').click();
+    await settle(fixture);
+
+    const row = host.querySelector('.fields tbody tr:has(.field[aria-pressed="true"])');
+    const pills = [
+      row?.querySelector('.badge[data-status="INVALID"]'),
+      host.querySelector('.badge[data-status="PENDING"]'),
+      host.querySelector('.badge[data-status="VALID"]'),
+      host.querySelector('.form-item.active .count'),
+    ];
+    for (const pill of pills) {
+      expect(pill).not.toBeNull();
+      const applied = backgrounds(pill!);
+      expect(applied.length).toBeGreaterThan(0);
+      // A tint mixed with transparent lets the selected-row tint show through it.
+      expect(applied.at(-1)).not.toContain('transparent');
+    }
+  });
+});
+
 describe('FormsInspector pick', () => {
   it('turns into Cancel picking and cancels from the button and Escape', async () => {
     const calls: Record<string, unknown>[] = [];

app/src/pages/forms-inspector.ts

@@ -690,7 +690,7 @@ function countFields(node: FormFieldNode): number {
       padding: 0 7px;
       border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
       border-radius: 99px;
-      background: color-mix(in srgb, var(--danger) 12%, transparent);
+      background: color-mix(in srgb, var(--danger) 12%, var(--surface));
       color: var(--danger);
       font-size: 11px;
       font-weight: 600;
@@ -842,12 +842,13 @@ function countFields(node: FormFieldNode): number {
     .totals b.has-errors {
       color: var(--danger);
     }
+    /* Opaque tints so a selected or hovered row behind the badge cannot lower its contrast. */
     .badge {
       display: inline-block;
       padding: 0 8px;
       border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
       border-radius: 99px;
-      background: color-mix(in srgb, var(--ok) 12%, transparent);
+      background: color-mix(in srgb, var(--ok) 12%, var(--surface));
       color: var(--ok);
       font-size: 11px;
       font-weight: 600;
@@ -860,12 +861,12 @@ function countFields(node: FormFieldNode): number {
     }
     .badge[data-status='INVALID'] {
       border-color: color-mix(in srgb, var(--danger) 30%, transparent);
-      background: color-mix(in srgb, var(--danger) 12%, transparent);
+      background: color-mix(in srgb, var(--danger) 12%, var(--surface));
       color: var(--danger);
     }
     .badge[data-status='PENDING'] {
       border-color: color-mix(in srgb, var(--warn) 30%, transparent);
-      background: color-mix(in srgb, var(--warn) 12%, transparent);
+      background: color-mix(in srgb, var(--warn) 12%, var(--surface));
       color: var(--warn);
     }
     .badge[data-status='DISABLED'] {
@@ -1178,7 +1179,7 @@ function countFields(node: FormFieldNode): number {
     }
     .flags span.warn {
       border-color: color-mix(in srgb, var(--warn) 30%, transparent);
-      background: color-mix(in srgb, var(--warn) 12%, transparent);
+      background: color-mix(in srgb, var(--warn) 12%, var(--surface));
       color: var(--warn);
     }
     .errors {

app/src/pages/live-route.ts

@@ -254,7 +254,7 @@ type TabId = (typeof TABS)[number]['id'];
       padding: 0 6px;
       border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
       border-radius: 99px;
-      background: color-mix(in srgb, var(--danger) 12%, transparent);
+      background: color-mix(in srgb, var(--danger) 12%, var(--surface));
       color: var(--danger);
       font-size: 11px;
       font-weight: 600;