Skip to content

fix: use token-based color for provisioning/warming-up replica tags#7879

Open
yomybaby wants to merge 1 commit into
mainfrom
claude/provisioning-tag-dark-mode-pci3wj
Open

fix: use token-based color for provisioning/warming-up replica tags#7879
yomybaby wants to merge 1 commit into
mainfrom
claude/provisioning-tag-dark-mode-pci3wj

Conversation

@yomybaby

Copy link
Copy Markdown
Member

Summary

The Provisioning (프로비저닝 중) replica status tag was too glaring/bright in dark mode, as reported. The root cause was a hardcoded fallback color rather than a theme token.

Root cause

ReplicaStatusTag mapped PROVISIONING and WARMING_UP to the info semantic color and passed that string straight to antd's Tag via BAITag:

PROVISIONING: 'info',
WARMING_UP: 'info',

But antd 6 only recognizes success | processing | error | warning | default as preset status colors'info' is not one of them (components/_util/colors.ts). When an unrecognized value is passed, antd takes its custom-color path: isPreset/isStatus are both false, the colorInfoBg: 'transparent' override in BAITag never applies, and the tag text falls back to antd's hardcoded white (#fff) (colorTextLightSolid). Against a dark background that white text glares.

The sibling states (success/warning/error) are valid antd statuses, so they correctly resolve to theme tokens with a transparent background — which is why only the provisioning/warming-up tags stood out.

Fix

Map the info-colored states to antd's processing status, which resolves to the colorInfo theme token (dark-mode aware). BAITag already sets colorInfoBg: 'transparent', so these tags now render a transparent background with token-colored text — visually consistent with the success/warning/error tags.

State Before (color) After (color) Result
PROVISIONING 'info' (invalid → #fff text) 'processing' (→ colorInfo token) dark-mode aware
WARMING_UP 'info' (invalid → #fff text) 'processing' (→ colorInfo token) dark-mode aware

The WARMING_UP spinner (LoadingOutlined) is unchanged, so the two info states stay visually distinct.

Verification

  • tsc --noEmit — clean
  • ESLint / Prettier — clean (pre-commit hooks passed)
  • No GraphQL/schema changes; no generated files affected.

Test plan

  • Switch to dark mode → open a deployment's Replicas (복제본) tab.
  • Confirm the Provisioning / Warming up tags use the muted info/blue token text on a transparent background, no longer glaring white.
  • Confirm Running / Healthy (success), Degraded (warning), Failed (error), and Not checked (default) tags are unchanged.

https://claude.ai/code/session_017XHiquBAgyiBUgk2BHcRCt


Generated by Claude Code

ReplicaStatusTag mapped PROVISIONING and WARMING_UP to the `info`
semantic color and passed that string straight to antd's Tag. antd 6
only recognizes `success | processing | error | warning | default` as
preset status colors — `info` is not one of them, so the tag fell back
to antd's custom-color path with hardcoded white (#fff) text instead of
a theme token. In dark mode that white text glared against the dark
background.

Map the info-colored states to antd's `processing` status, which resolves
to the `colorInfo` theme token (dark-mode aware). BAITag already sets
`colorInfoBg: 'transparent'`, so these tags now render a transparent
background with token-colored text, consistent with the success/warning/
error tags.

https://claude.ai/code/session_017XHiquBAgyiBUgk2BHcRCt
Copilot AI review requested due to automatic review settings June 12, 2026 10:05
@github-actions github-actions Bot added the size:M 30~100 LoC label Jun 12, 2026
@cla-assistant

cla-assistant Bot commented Jun 12, 2026

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes dark-mode rendering of replica status tags by ensuring “Provisioning” and “Warming up” use an Ant Design preset status color (token-based) rather than an unrecognized string that triggers the custom-color fallback path.

Changes:

  • Remap PROVISIONING / WARMING_UP tag colors from 'info' to Ant Design’s preset status 'processing' so the text color resolves via theme tokens (dark-mode aware).
  • Tighten the local color map typing to only allow Ant Design preset status colors.
  • Update inline comments to document why 'processing' is used and keep the spinner behavior for WARMING_UP.

@github-actions

Copy link
Copy Markdown
Contributor

Coverage Report for react-coverage (./react)

Status Category Percentage Covered / Total
🔵 Lines 6.58% 1881 / 28557
🔵 Statements 5.31% 2078 / 39108
🔵 Functions 5.3% 303 / 5711
🔵 Branches 3.57% 1311 / 36623
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
react/src/components/ReplicaStatusTag.tsx 0% 0% 0% 0% 56-113
Generated in workflow #1893 for commit fca95ca by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30~100 LoC

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants