Skip to content

OUT-3261 | profile manager tags are not readable if colored#56

Merged
arpandhakal merged 2 commits intomainfrom
OUT-3261
Mar 27, 2026
Merged

OUT-3261 | profile manager tags are not readable if colored#56
arpandhakal merged 2 commits intomainfrom
OUT-3261

Conversation

@arpandhakal
Copy link
Copy Markdown
Collaborator

@arpandhakal arpandhakal commented Mar 27, 2026

Summary

  • Added a named color map (22 colors) with RGB values and dark text-safe variants to updateColor.ts
  • Introduced getChipColors() utility that returns proper background, border, text, and icon colors for chip styling
  • Updated MultiSelect component to use dark color variants for text/icons, ensuring readability against light chip backgrounds
  • updateColor() now also supports named colors (fixes HistoryCellRenderer too)

Test plan

  • Select multiselect options with bright colors (cyan, teal, amber, blue, lime) and verify text is readable
  • Verify chip background remains a light tint of the color
  • Verify chip border and delete/avatar icons use the dark variant
  • Check that HistoryCellRenderer still renders colored tags correctly (uses updateColor which now handles named colors)

Testing criteria

image

Ref

Colors picked from design system: https://www.figma.com/design/HH25FbLn13q9qx5uDCFxYI/%F0%9F%A7%A9-Design-System?node-id=115-7571&p=f&m=dev

🤖 Generated with Claude Code

Named colors (amber, cyan, teal, etc.) were used directly as chip text
color, making them unreadable against the light chip background. Added a
color map with dark text-safe variants and a getChipColors utility that
returns proper background, border, text, and icon colors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@linear
Copy link
Copy Markdown

linear bot commented Mar 27, 2026

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 27, 2026

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

Project Deployment Actions Updated (UTC)
client-profile-manager Ready Ready Preview, Comment Mar 27, 2026 9:37am

Request Review

Replace arbitrary RGB values with exact hex values from the design
system color palette. Each named color now maps to its -100 (background),
-200 (border), and darkest available shade (text/icon).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@priosshrsth priosshrsth left a comment

Choose a reason for hiding this comment

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

lgtm.

@arpandhakal arpandhakal merged commit 5e8b5d8 into main Mar 27, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants