fix: use token-based color for provisioning/warming-up replica tags#7879
Open
yomybaby wants to merge 1 commit into
Open
fix: use token-based color for provisioning/warming-up replica tags#7879yomybaby wants to merge 1 commit into
yomybaby wants to merge 1 commit into
Conversation
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
|
|
Contributor
There was a problem hiding this comment.
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_UPtag 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 forWARMING_UP.
Contributor
Coverage Report for react-coverage (./react)
File Coverage
|
||||||||||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
ReplicaStatusTagmappedPROVISIONINGandWARMING_UPto theinfosemantic color and passed that string straight to antd'sTagviaBAITag:But antd 6 only recognizes
success | processing | error | warning | defaultas 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/isStatusare bothfalse, thecolorInfoBg: 'transparent'override inBAITagnever 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
processingstatus, which resolves to thecolorInfotheme token (dark-mode aware).BAITagalready setscolorInfoBg: 'transparent', so these tags now render a transparent background with token-colored text — visually consistent with the success/warning/error tags.color)color)PROVISIONING'info'(invalid →#ffftext)'processing'(→colorInfotoken)WARMING_UP'info'(invalid →#ffftext)'processing'(→colorInfotoken)The
WARMING_UPspinner (LoadingOutlined) is unchanged, so the two info states stay visually distinct.Verification
tsc --noEmit— cleanTest plan
https://claude.ai/code/session_017XHiquBAgyiBUgk2BHcRCt
Generated by Claude Code