Skip to content

refactor(theme): unify frontend color token governance #5701

refactor(theme): unify frontend color token governance

refactor(theme): unify frontend color token governance #5701

Triggered via pull request August 31, 2026 05:33
Status Cancelled
Total duration 12m 22s
Artifacts

ci.yml

on: pull_request
Build Impact
20s
Build Impact
Shell Deploy Scripts
12s
Shell Deploy Scripts
Matrix: cli-test
Matrix: Impact-selected Linux / Relay Contract / build
Matrix: rust-build-check
DSH Profile Packaging (windows-latest)
55s
DSH Profile Packaging (windows-latest)
Frontend Build
6m 11s
Frontend Build
Rust / CLI Validation
4s
Rust / CLI Validation
Fit to window
Zoom out
Zoom in

Annotations

19 errors and 9 warnings
Frontend Build
Process completed with exit code 1.
src/app/scenes/agents/AgentsScene.test.tsx > AgentsScene > uses one compact responsive catalog without overview category navigation: src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx#L330
AssertionError: expected '@use \'../../../../component-library/…' to contain 'mask-image: linear-gradient(to bottom…' - Expected + Received - mask-image: linear-gradient(to bottom, black 0%, transparent 100%); + @use '../../../../component-library/styles/tokens' as *; + @use '../../../styles/surface-stagger'; + + @mixin agent-surface-card() { + width: 100%; + min-width: 0; + height: 148px; + border: 1px solid var(--bf-color-border-default); + border-radius: $size-radius-lg; + background: var(--bf-color-surface-raised); + box-shadow: $shadow-xs; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + cursor: pointer; + animation: agent-surface-card-in 0.28s $easing-decelerate both; + @include surface-stagger.animation-delay(60ms); + transition: + transform $motion-fast $easing-decelerate, + border-color $motion-fast $easing-standard, + background-color $motion-fast $easing-standard, + box-shadow $motion-fast $easing-standard; + + &:hover { + transform: translateY(-1px); + border-color: var(--bf-color-field-border-hover); + background: var(--bf-color-surface-subtle); + box-shadow: $shadow-sm; + } + + &:focus-visible { + outline: 2px solid var(--bf-color-content-primary); + outline-offset: 2px; + } + } + + @mixin agent-surface-footer() { + box-sizing: border-box; + min-height: 34px; + border-radius: $size-radius-base; + background: var(--bf-color-surface-subtle); + overflow: hidden; + position: relative; + z-index: 1; + } + + @mixin agent-icon-dot-field() { + position: absolute; + inset-block-start: 58px; + inset-inline-start: 50%; + width: 38px; + height: 68px; + background-image: radial-gradient( + circle, + var(--bf-color-border-default) 0 1px, + transparent 1.25px + ); + background-position: center top; + background-size: 7px 7px; + opacity: 0.72; + pointer-events: none; + transform: translateX(-50%); + mask-image: linear-gradient(to bottom, currentColor 0%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, currentColor 0%, transparent 100%); + } + + @Keyframes agent-surface-card-in { + from { + opacity: 0; + transform: translateY(10px) scale(0.98); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } + } + ❯ src/app/scenes/agents/AgentsScene.test.tsx:330:35
src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts > composer context track layout > lifts the permission risk ramp onto the trigger, not just the menu rows: src/web-ui/src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts#L456
AssertionError: expected '/**\n * Compact, borderless execution…' to match /&__permission-trigger \{[\s\S]*?&--fu…/ - Expected: /&__permission-trigger \{[\s\S]*?&--full_access \{[\s\S]*?color-error\) 10%/ + Received: "/** * Compact, borderless execution-status track above the composer surface. * * Two fixed rails, never a conditional column template: the left rail holds the * situation and the right rail holds the next turn's contract. A control that * appears or disappears grows or shrinks its own rail and cannot reflow the * other one. * * The track has exactly two species and shape tells them apart. A *fact* is * bare text with a muted 12px glyph and no hover body; an available workspace * or branch switcher takes the same pill control as the rest of the track. * Both species speak at one size — the ladder's meta step, a quiet footnote * under the capsule above — and in one muted ink, so the row reads as a single * hushed line of text and only shape and fill say what can be clicked. State * is carried by color, never by an outline, because one bordered item in a * borderless row reads as an error rather than a mode. * * Segments part on a hairline divider — a 10px vertical rule that groups * without claiming anything about what sits either side of it. A slash stays * banned: it claimed a path that a host, a workspace and a branch do not * form. Inside one segment, grouping is spacing alone, at a fixed 2.5:1 — * $track-item-gap between segments, $track-part-gap inside one. */ @use '../../component-library/styles/tokens' as *; @use '../../component-library/styles/overlay-surfaces' as surfaces; // The only two spacings on the track. Their ratio is what replaces the // separators: parts of one segment sit close, segments sit apart. $track-part-gap: 4px; $track-item-gap: 10px; // The single control shape. Full radius rather than a corner value: the // composer capsule directly above is a pill, and the track reads as its // footnote when the two agree. @mixin strip-control { box-sizing: border-box; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: $track-part-gap; height: 18px; min-width: 0; padding: 0 7px; border: 0; border-radius: 999px; background: transparent; color: var(--bf-color-content-muted); font: inherit; // The whole track speaks at one size: facts inherit it from the rail and // controls restate it here. Shape — the pill and its hover fill — is what // says a control is a control, so a label never needs a size of its own. font-size: var(--bf-type-flow-meta-font-size); line-height: var(--bf-line-height-none); letter-spacing: inherit; white-space: nowrap; cursor: pointer; transition: background-color $motion-fast $easing-standard, color $motion-fast $easing-standard; &:hover:not(:disabled), &[aria-expanded='true']:not(:disabled) { background: var(--bf-color-action-quiet-hover); color: var(--bf-color-content-secondary); } &:focus-visible { outline: 2px solid var(--bf-color-accent-default); outline-offset: 1px; } &:disabled { cursor: default; opacity: 0.55; } // One glyph size for the whole track, enforced here so component-owned // icons land on the same rhythm without the strip reaching into them. > svg { flex: none; width: 12px; height: 12px; } } .bitfun-chat-input-workspace-strip { position: relative; z-index: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; column-gap: 12px; min-height: 20px; padding: 0; border: 0; border-radius: 0; background: transparent; font-family:var(--bf-font-family-sans); font-size: var(--bf-type-flow-meta-font-size); line-height: var(--bf-type-flow-support-line-height); font-weight: var(--bf-font-weight-regular); letter-spacing: var(--bf-letter-spacing-subtle); color: var(--bf-color-content-muted); user-select: text; pointer-events: auto; width: 100%; max-width: none; // Left rail: where this session
src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts > composer context track layout > gives the add icon a background without adding a border: src/web-ui/src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts#L377
AssertionError: expected ' .bitfun-chat-input__agent-boost-a…' to match /&:hover,[\s\S]*?&:focus-visible,[\s\S…/ - Expected: /&:hover,[\s\S]*?&:focus-visible,[\s\S]*?&\[aria-expanded='true'\] \{[\s\S]*?element-bg-soft/ + Received: " .bitfun-chat-input__agent-boost-add { width: var(--bf-control-chat-composer-control-height) !important; height: var(--bf-control-chat-composer-control-height) !important; min-width: var(--bf-control-chat-composer-control-height) !important; min-height: var(--bf-control-chat-composer-control-height) !important; padding: 0 !important; border: 0 !important; border-radius: var(--bf-radius-pill) !important; background: var(--bf-color-surface-subtle) !important; color: var(--bf-color-content-primary); &:hover, &:focus-visible, &[aria-expanded='true'] { background: var(--bf-color-action-quiet-hover) !important; } svg { width: 14px; height: 14px; } } " ❯ src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts:377:24
Rust Build Check (windows-latest)
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
Rust Build Check (windows-latest)
The operation was canceled.
Rust Build Check (ubuntu-latest)
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
Rust Build Check (ubuntu-latest)
The operation was canceled.
Impact-selected Linux / Relay Contract / Linux Binaries (linux-arm64)
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
Impact-selected Linux / Relay Contract / Linux Binaries (linux-arm64)
The operation was canceled.
Impact-selected Linux / Relay Contract / Linux Binaries (linux-x64)
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
Impact-selected Linux / Relay Contract / Linux Binaries (linux-x64)
The operation was canceled.
CLI Tests (macos-15)
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
CLI Tests (macos-15)
The operation was canceled.
Rust Build Check (macos-15)
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
Rust Build Check (macos-15)
The operation was canceled.
Rust / CLI Validation
Process completed with exit code 1.
CI
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
CI
Canceling since a higher priority waiting request for ci-refs/pull/2702/merge exists
Frontend Build: src/web-ui/src/flow_chat/tool-cards/AgentWaitToolCard.tsx#L17
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Frontend Build: src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallContext.tsx#L32
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Frontend Build: src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallContext.tsx#L23
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Frontend Build: src/web-ui/src/flow_chat/components/ReasoningPresetSelector.tsx#L113
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Frontend Build: src/web-ui/src/flow_chat/components/ReasoningPresetSelector.tsx#L36
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Frontend Build: src/web-ui/src/app/stores/sceneStore.ts#L147
'navCursor' is never reassigned. Use 'const' instead
Frontend Build: src/web-ui/src/app/stores/sceneStore.ts#L146
'navHistory' is never reassigned. Use 'const' instead
Frontend Build: src/web-ui/src/app/components/SceneTopBar/SceneChrome.tsx#L121
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Frontend Build: src/web-ui/src/app/components/NavPanel/components/DeviceArtwork.tsx#L6
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components