fix: feature pipeline status dark mode

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Closes #7018

The feature-pipeline status visualisation (circles + connector lines, rendered inside the Edit Feature modal when a feature is in a release pipeline) was broken in dark mode: white circles with grey #AAA borders and lines sat on the dark surface as stark, off-token shapes. Blocker #6904 (semantic colour tokens) landed via #6883 on 2026-04-07, which unblocked this.

Dark mode fix (_feature-pipeline-status.scss)

Hardcoded colours swapped for semantic tokens. No .dark { ... } block needed — _tokens.scss publishes dark-mode overrides for every semantic token, so var(--color-*) adapts automatically.

Old	New	Notes
white (circle bg)	var(--color-surface-default)	--slate-0 light, --slate-950 dark
#AAA (border / line)	var(--color-border-default)	Neutral border, opacity-based for dark
#6837fc (in-stage)	var(--color-border-action)	Identical in light (--purple-600); lighter in dark (--purple-400) for contrast
#53af41 (completed)	var(--color-border-success)	Aligns to --green-500 (#27ab95) — visual shift, intentional under #6606

.in-stage / .completed modifiers also set color: so the stage icons inside can inherit via currentColor (see component cleanup below).

Component cleanup (StageStatus.tsx, FeaturePipelineStatus.tsx)

While we were here:

• Decoupled from ProjectStore (legacy Flux). StageStatus used ProjectStore.getEnvironmentById() to render the env name. Lifted the lookup into FeaturePipelineStatus via useGetEnvironmentsQuery, passes envName down as a prop. StageStatus is now pure / store-free / trivially testable.
• Dropped hardcoded icon fills. <Icon fill='#6837FC' /> and <Icon fill='#53af41' /> removed; icons default to currentColor and inherit from the .circle-container modifier classes set in SCSS. Same colour-by-state mapping, no duplicated hex.
• Removed inline style. style={{ marginRight: lastStage ? '0px' : '24px' }} → Bootstrap me-0 / me-4 classNames.
• <span> instead of <p> for the env-name label so it sits inline with the stage name instead of forcing a block break.
• De-duplicated lastStage / isLastStage (same expression, twice).
• ?? NaN → ?? 0 sentinel on pipelineId. The skip guard means the value is never used, but NaN reads like leftover scaffolding.

Deliberately not in scope

• renderToString(<StageSummaryData />) workaround in StageStatus. Tooltip.tsx types children: string and injects via data-tooltip-html, so JSX has to be serialised. Fixing it means changing the Tooltip API to accept ReactNode — wider change with cross-component impact. Worth a separate ticket.
• Storybook stories. Agreed they're worthwhile (Chromatic would have caught the original dark-mode bug), but writing them belongs in its own focused PR so the visual-regression baseline gets a clean commit.
• flex className. Verified it's a real project utility (web/styles/flexbox/_index.scss:3) that sets flex-direction: column. Layout depends on it.

How did you test this code?

• Open the Edit Feature modal on a feature currently in a release pipeline (e.g. sdk_usage_charts in the "Internal testing" stage of the Quick rollout pipeline).
• Toggle light / dark theme and confirm the stage circles, in-stage purple ring, completed green ring, timer / checkmark icon colours, and the connector lines all read correctly against the surrounding modal surface.
• Verify the env name (e.g. "Production") still renders next to each stage name — confirms the new useGetEnvironmentsQuery lookup in FeaturePipelineStatus works end-to-end.
• npx tsc --noEmit — no new type errors in the touched files.
• npx eslint on the touched files — clean.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	May 18, 2026 8:01pm
flagsmith-frontend-staging	Ready	Preview, Comment	May 18, 2026 8:01pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	May 18, 2026 8:01pm