[LG-5748] fix: Fix Text and Border Color Variants#3328
Merged
adamrasheed merged 4 commits intomainfrom Nov 20, 2025
Merged
Conversation
|
| Name | Type |
|---|---|
| @leafygreen-ui/tokens | Minor |
| @lg-charts/chart-card | Patch |
| @lg-charts/core | Patch |
| @lg-charts/legend | Patch |
| @lg-chat/chat-layout | Patch |
| @lg-chat/chat-window | Patch |
| @lg-chat/input-bar | Patch |
| @lg-chat/lg-markdown | Patch |
| @lg-chat/message-feed | Patch |
| @lg-chat/message-feedback | Patch |
| @lg-chat/message-prompts | Patch |
| @lg-chat/message-rating | Patch |
| @lg-chat/message | Patch |
| @lg-chat/rich-links | Patch |
| @lg-chat/suggestions | Patch |
| @lg-chat/title-bar | Patch |
| @lg-mcp-ui/list-databases | Patch |
| @leafygreen-ui/avatar | Patch |
| @leafygreen-ui/badge | Patch |
| @leafygreen-ui/banner | Patch |
| @leafygreen-ui/button | Patch |
| @leafygreen-ui/callout | Patch |
| @leafygreen-ui/card | Patch |
| @leafygreen-ui/checkbox | Patch |
| @leafygreen-ui/chip | Patch |
| @leafygreen-ui/code-editor | Patch |
| @leafygreen-ui/code | Patch |
| @leafygreen-ui/combobox | Patch |
| @leafygreen-ui/confirmation-modal | Patch |
| @leafygreen-ui/context-drawer | Patch |
| @leafygreen-ui/copyable | Patch |
| @leafygreen-ui/date-picker | Patch |
| @leafygreen-ui/drawer | Patch |
| @leafygreen-ui/empty-state | Patch |
| @leafygreen-ui/expandable-card | Patch |
| @leafygreen-ui/feature-walls | Patch |
| @leafygreen-ui/form-field | Patch |
| @leafygreen-ui/form-footer | Patch |
| @leafygreen-ui/gallery-indicator | Patch |
| @leafygreen-ui/hooks | Patch |
| @leafygreen-ui/icon-button | Patch |
| @leafygreen-ui/info-sprinkle | Patch |
| @leafygreen-ui/inline-definition | Patch |
| @leafygreen-ui/input-option | Patch |
| @leafygreen-ui/loading-indicator | Patch |
| @leafygreen-ui/marketing-modal | Patch |
| @leafygreen-ui/menu | Patch |
| @leafygreen-ui/modal | Patch |
| @leafygreen-ui/number-input | Patch |
| @leafygreen-ui/ordered-list | Patch |
| @leafygreen-ui/pagination | Patch |
| @leafygreen-ui/password-input | Patch |
| @leafygreen-ui/pipeline | Patch |
| @leafygreen-ui/popover | Patch |
| @leafygreen-ui/preview-card | Patch |
| @leafygreen-ui/progress-bar | Patch |
| @leafygreen-ui/radio-box-group | Patch |
| @leafygreen-ui/radio-group | Patch |
| @leafygreen-ui/ripple | Patch |
| @leafygreen-ui/search-input | Patch |
| @leafygreen-ui/section-nav | Patch |
| @leafygreen-ui/segmented-control | Patch |
| @leafygreen-ui/select | Patch |
| @leafygreen-ui/side-nav | Patch |
| @leafygreen-ui/skeleton-loader | Patch |
| @leafygreen-ui/split-button | Patch |
| @leafygreen-ui/stepper | Patch |
| @leafygreen-ui/table | Patch |
| @leafygreen-ui/tabs | Patch |
| @leafygreen-ui/text-area | Patch |
| @leafygreen-ui/text-input | Patch |
| @leafygreen-ui/toast | Patch |
| @leafygreen-ui/toggle | Patch |
| @leafygreen-ui/toolbar | Patch |
| @leafygreen-ui/tooltip | Patch |
| @leafygreen-ui/typography | Patch |
| @leafygreen-ui/vertical-stepper | Patch |
| @lg-tools/storybook-addon | Patch |
| @lg-tools/storybook-decorators | Patch |
| @lg-charts/drag-provider | Patch |
| @lg-apps/mcp-ui-app | Patch |
| @leafygreen-ui/descendants | Patch |
| @leafygreen-ui/guide-cue | Patch |
| @leafygreen-ui/a11y | Patch |
| @leafygreen-ui/icon | Patch |
| @leafygreen-ui/leafygreen-provider | Patch |
| @leafygreen-ui/portal | Patch |
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
younlee-creator
suggested changes
Nov 20, 2025
Collaborator
younlee-creator
left a comment
younlee-creator
left a comment
There was a problem hiding this comment.
Please review my inline comments.Attached color token lists from Figma for reference.
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR addresses color token inconsistencies by introducing new semantic variants (OnSuccess, OnError, OnSuccessLink) and updating existing Success and Error color values across light and dark modes. The changes improve the design system's ability to represent colors that should be used on success/error backgrounds.
- Introduces new
OnSuccess,OnError, andOnSuccessLinkvariants to the Variant enum - Updates Success and Error border and text color values in both light and dark modes
- Renames the existing
SuccessLinkvariant toOnSuccessLink
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| packages/tokens/src/color/color.types.ts | Adds new variant types: OnError, OnSuccess, OnSuccessLink and removes SuccessLink |
| packages/tokens/src/color/lightModeColors.ts | Updates Success/Error border colors to use green.dark1/red.base, adds OnSuccess/OnError/OnSuccessLink text and border variants, reorders Disabled variant |
| packages/tokens/src/color/darkModeColors.ts | Updates Success text color to green.light2, adds OnSuccess/OnError/OnSuccessLink text and border variants, reorders Disabled variant |
| .changeset/chatty-parks-film.md | Documents the changes as a patch release |
.changeset/chatty-parks-film.md
Outdated
| '@leafygreen-ui/tokens': patch | ||
| --- | ||
|
|
||
| Fixed the text success and error text color variants. Added OnSuccess, OnError, and OnSuccess border color variants, and removed the Success border color variant. |
There was a problem hiding this comment.
The changeset description is inaccurate. It states "removed the Success border color variant" but the Variant.Success border color variant still exists in the code - it was updated with new color values, not removed. The description should clarify that:
- The
SuccessandErrorborder variants were updated with new color values - New
OnSuccessandOnErrorborder variants were added - The
SuccessLinkvariant was renamed toOnSuccessLink
Suggested change
| Fixed the text success and error text color variants. Added OnSuccess, OnError, and OnSuccess border color variants, and removed the Success border color variant. | |
| Updated the Success and Error border color variants with new color values. Added new OnSuccess and OnError border color variants. Renamed the SuccessLink variant to OnSuccessLink. |
.changeset/chatty-parks-film.md
Outdated
| @@ -0,0 +1,5 @@ | |||
| --- | |||
| '@leafygreen-ui/tokens': patch | |||
There was a problem hiding this comment.
This changeset is marked as a patch release, but it includes a breaking change. The Variant.SuccessLink enum value was removed and replaced with Variant.OnSuccessLink. This is a breaking change to the public API that will cause compilation errors for any consumers using Variant.SuccessLink. According to semantic versioning, this should be a major version bump, not a patch. Change the first line to: '@leafygreen-ui/tokens': major
Suggested change
| '@leafygreen-ui/tokens': patch | |
| '@leafygreen-ui/tokens': major |
.changeset/chatty-parks-film.md
Outdated
| '@leafygreen-ui/tokens': patch | ||
| --- | ||
|
|
||
| Fixed the text success and error text color variants. Added OnSuccess, OnError, and OnSuccess border color variants, and removed the Success border color variant. |
There was a problem hiding this comment.
The word "text" is duplicated in this sentence: "Fixed the text success and error text color variants." Should be "Fixed the success and error text color variants."
Suggested change
| Fixed the text success and error text color variants. Added OnSuccess, OnError, and OnSuccess border color variants, and removed the Success border color variant. | |
| Fixed the success and error text color variants. Added OnSuccess, OnError, and OnSuccess border color variants, and removed the Success border color variant. |
| [Variant.OnSuccess]: { | ||
| [InteractionState.Default]: green.light2, | ||
| [InteractionState.Hover]: green.light2, | ||
| [InteractionState.Focus]: green.light2, |
There was a problem hiding this comment.
The focus state for OnSuccess border color uses green.light2 instead of blue.light1, which is inconsistent with other border color variants (Primary, Secondary, Tertiary, Success, Error) that all use blue.light1 for focus states. Consider changing line 89 to use blue.light1 for consistency.
Suggested change
| [InteractionState.Focus]: green.light2, | |
| [InteractionState.Focus]: blue.light1, |
| [Variant.OnError]: { | ||
| [InteractionState.Default]: red.light2, | ||
| [InteractionState.Hover]: red.light2, | ||
| [InteractionState.Focus]: red.light2, |
There was a problem hiding this comment.
The focus state for OnError border color uses red.light2 instead of blue.light1, which is inconsistent with other border color variants (Primary, Secondary, Tertiary, Success, Error) that all use blue.light1 for focus states. Consider changing line 94 to use blue.light1 for consistency.
Suggested change
| [InteractionState.Focus]: red.light2, | |
| [InteractionState.Focus]: blue.light1, |
Comment on lines
+81
to
84
| [Variant.OnSuccess]: { | ||
| [InteractionState.Default]: green.dark2, | ||
| [InteractionState.Hover]: green.dark2, | ||
| [InteractionState.Focus]: blue.light1, |
There was a problem hiding this comment.
The focus state for OnSuccess border color uses blue.light1, which is correct and consistent. However, this is inconsistent with the light mode implementation where OnSuccess uses green.light2 for focus. Both should use blue.light1 for consistency across light and dark modes.
Comment on lines
+86
to
89
| [Variant.OnError]: { | ||
| [InteractionState.Default]: red.dark2, | ||
| [InteractionState.Hover]: red.dark2, | ||
| [InteractionState.Focus]: blue.light1, |
There was a problem hiding this comment.
The focus state for OnError border color uses blue.light1, which is correct and consistent. However, this is inconsistent with the light mode implementation where OnError uses red.light2 for focus. Both should use blue.light1 for consistency across light and dark modes.
Contributor
|
Size Change: +190 B (+0.01%) Total Size: 1.79 MB
ℹ️ View Unchanged
|
tsck
approved these changes
Nov 20, 2025
Contributor
|
Coverage after merging ar/LG-5748-color-tokens-v2 into main will be
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
stephl3
reviewed
Nov 20, 2025
stephl3
approved these changes
Nov 20, 2025
adamrasheed
added a commit
that referenced
this pull request
Dec 4, 2025
* [LG-5748] fix: Fix Text and Border Color Variants * fixed colors * consoldiated changeset files
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
4 participants
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.
✍️ Proposed changes
This PR fixes inconsistencies in the success and error color variants within the tokens package. The changes improve the semantic naming of color variants by introducing
OnSuccess,OnError, andOnSuccessLinkvariants to better represent colors that should be used on success/error backgrounds. Additionally, the border color values for Success and Error variants have been updated in light mode for better visual consistency.🎟️ Jira ticket: LG-5748
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
OnSuccessandOnErrorvariants when displayed on success/error backgroundsOnSuccessLinkvariant is properly applied to links on success backgroundsgreen.light1in light mode (updated fromgreen.light2)red.basein light mode (updated fromred.light2)