[diegosouzapw]

What was red

tests/integration/integration-wiring.test.ts › "keeps request log surfaces on opaque theme colors" fails on the feat/new-uikit tip (1051165):

AssertionError: The input did not match the regular expression /--color-card:\s+#ffffff/
  at tests/integration/integration-wiring.test.ts:263

Track A (#17279) replaced every hex value in the :root/.dark blocks of src/app/globals.css with the CI UI Kit token bridge. The card colour is now --color-card: var(--ci-color-surface), and the kit switches the --ci-* values itself on data-theme="dark". The two pinned hex literals (#ffffff light, #161b22 dark) no longer appear anywhere in globals.css.

Realigned intent

The intent stays the same: request-log surfaces sit on an opaque colour in both themes. The test now checks it through the bridge:

• every --color-card / --color-surface declaration in globals.css is either var(--ci-…) or the @theme self-reference. The --color-card: var(--color-card) assertion is kept unchanged.
• it takes the --ci-* token each one bridges to and follows the var() chain in packages/ui-kit/src/ci-tokens.css: the light block (:root, .ci-theme), then the dark block (:root[data-theme="dark"], …), which falls back to the light primitives.
• the resolved literal must be opaque: #rgb, #rrggbb or rgb(r, g, b). rgba, 8-digit hex and color-mix are rejected.

Today both tokens resolve to --ci-color-surface, which is --ci-neutral-0 = #ffffff in light and --ci-neutral-900 = #0d191c in dark. --color-surface is included because RequestLoggerV2 paints with bg-surface. That is the surface the existing #4233 comment in the test refers to.

The PR only changes the test. Nothing in src/ or packages/ changes.

Validation

• node --import tsx/esm --import ./open-sse/utils/setupPolyfill.ts --import ./tests/_setup/isolateDataDir.ts --test --test-force-exit tests/integration/integration-wiring.test.ts
  • before: pass 62 / fail 1 / skipped 4
  • after: pass 63 / fail 0 / skipped 4
• Mutation check (temporary local edits to ci-tokens.css, reverted afterwards). Both mutants fail the test as expected:
  • dark --ci-color-surface: rgba(13, 25, 28, 0.6) → --color-card → --ci-color-surface must be opaque in dark
  • light --ci-neutral-0: #ffffff80 → --color-card → --ci-color-surface must be opaque in light
• npx eslint tests/integration/integration-wiring.test.ts: exit 0
• npx prettier --check tests/integration/integration-wiring.test.ts: clean
• Sibling sweep: I grepped for #ffffff / #161b22 / #0d1117 / globals.css under tests/integration and tests/unit, excluding design-kit-bridge. These are already green on the tip, so they are untouched:
  • provider-connection-row-mobile-layout, sidebar-nav-contrast-aa, connection-row-rtl-margin, dev-bundler-boundaries-12074, run-next-node-env, dashboard-sidebar-desktop-visible, dashboard/material-icons-self-hosted (node:test)
  • ui/flowCanvas.test.tsx, ui/rtl-logical-classes.test.tsx (vitest, 23/23)

⚠️ base-red inherited: #17219