Skip to content

[LG-5748] fix: Fix Text and Border Color Variants #3328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamrasheed merged 4 commits into from
Nov 20, 2025
Merged

[LG-5748] fix: Fix Text and Border Color Variants #3328

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae96872
[LG-5748] fix: Fix Text and Border Color Variants
adamrasheed Nov 19, 2025
4811131
Merge branch 'main' into ar/LG-5748-color-tokens-v2
adamrasheed Nov 20, 2025
692f7af
fixed colors
adamrasheed Nov 20, 2025
8162886
consoldiated changeset files
adamrasheed Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/chatty-parks-film.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/tokens': patch

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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

Copilot uses AI. Check for mistakes.
---

Fixed the text success and error text color variants. Added OnSuccess, OnError, and OnSuccess border color variants, and removed the Success border color variant.

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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:

  1. The Success and Error border variants were updated with new color values
  2. New OnSuccess and OnError border variants were added
  3. The SuccessLink variant was renamed to OnSuccessLink
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.

Copilot uses AI. Check for mistakes.

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
4 changes: 3 additions & 1 deletion packages/tokens/src/color/color.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ const Variant = {
Warning: 'warning',
Error: 'error',
Success: 'success',
SuccessLink: 'successLink',
Link: 'link',
OnError: 'onError',
OnSuccess: 'onSuccess',
OnSuccessLink: 'onSuccessLink',
} as const;
type Variant = (typeof Variant)[keyof typeof Variant];

Expand Down
38 changes: 29 additions & 9 deletions packages/tokens/src/color/darkModeColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,21 @@ const darkModeBorderColors = {
[InteractionState.Focus]: blue.light1,
},
[Variant.Success]: {
[InteractionState.Default]: green.dark1,
[InteractionState.Hover]: green.dark1,
[InteractionState.Focus]: blue.light1,
},
[Variant.Error]: {
[InteractionState.Default]: red.light1,
[InteractionState.Hover]: red.light1,
[InteractionState.Focus]: blue.light1,
},
[Variant.OnSuccess]: {
[InteractionState.Default]: green.dark2,
[InteractionState.Hover]: green.dark2,
[InteractionState.Focus]: blue.light1,
Comment on lines +81 to 84

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
},
[Variant.Error]: {
[Variant.OnError]: {
[InteractionState.Default]: red.dark2,
[InteractionState.Hover]: red.dark2,
[InteractionState.Focus]: blue.light1,
Comment on lines +86 to 89

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
Expand Down Expand Up @@ -154,26 +164,36 @@ const darkModeTextColors = {
[InteractionState.Hover]: black,
[InteractionState.Focus]: blue.dark2,
},
[Variant.Disabled]: {
[InteractionState.Default]: gray.dark1,
[InteractionState.Hover]: gray.dark1,
[InteractionState.Focus]: gray.dark1,
},
[Variant.Success]: {
Comment thread
adamrasheed marked this conversation as resolved.
[InteractionState.Default]: green.light1,
[InteractionState.Hover]: green.light1,
[InteractionState.Focus]: green.light1,
[InteractionState.Default]: green.light2,
[InteractionState.Hover]: green.light2,
[InteractionState.Focus]: green.light2,
},
[Variant.Error]: {
[InteractionState.Default]: red.light1,
[InteractionState.Hover]: red.light1,
[InteractionState.Focus]: red.light1,
},
[Variant.Disabled]: {
[InteractionState.Default]: gray.dark1,
[InteractionState.Hover]: gray.dark1,
[InteractionState.Focus]: gray.dark1,
[Variant.OnSuccess]: {
[InteractionState.Default]: green.light1,
[InteractionState.Hover]: green.light1,
[InteractionState.Focus]: green.light1,
},
[Variant.SuccessLink]: {
[Variant.OnSuccessLink]: {
[InteractionState.Default]: green.light3,
[InteractionState.Hover]: green.light3,
[InteractionState.Focus]: green.light3,
},
[Variant.OnError]: {
[InteractionState.Default]: red.light2,
[InteractionState.Hover]: red.light2,
[InteractionState.Focus]: red.light2,
},
[Variant.Link]: {
[InteractionState.Default]: blue.light1,
[InteractionState.Hover]: blue.light1,
Expand Down
46 changes: 33 additions & 13 deletions packages/tokens/src/color/lightModeColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,30 @@ const lightModeBorderColors = {
[InteractionState.Focus]: blue.light1,
},
[Variant.Success]: {
[InteractionState.Default]: green.light2,
[InteractionState.Hover]: green.light2,
[InteractionState.Default]: green.dark1,
[InteractionState.Hover]: green.dark1,
[InteractionState.Focus]: blue.light1,
},
[Variant.Error]: {
[InteractionState.Default]: red.light2,
[InteractionState.Hover]: red.light2,
[InteractionState.Default]: red.base,
[InteractionState.Hover]: red.base,
[InteractionState.Focus]: blue.light1,
},
[Variant.Disabled]: {
[InteractionState.Default]: gray.light1,
[InteractionState.Hover]: gray.light1,
[InteractionState.Focus]: gray.light1,
},
[Variant.OnSuccess]: {
[InteractionState.Default]: green.light2,
[InteractionState.Hover]: green.light2,
[InteractionState.Focus]: green.light2,

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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,

Copilot uses AI. Check for mistakes.
},
[Variant.OnError]: {
[InteractionState.Default]: red.light2,
[InteractionState.Hover]: red.light2,
[InteractionState.Focus]: red.light2,

Copilot AI Nov 20, 2025

Copy link

Choose a reason for hiding this comment

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

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,

Copilot uses AI. Check for mistakes.
},
} as const satisfies VariantColorRecord;

const lightModeIconColors = {
Expand Down Expand Up @@ -149,31 +159,41 @@ const lightModeTextColors = {
[InteractionState.Hover]: white,
[InteractionState.Focus]: blue.light2,
},
[Variant.Disabled]: {
[InteractionState.Default]: gray.base,
[InteractionState.Hover]: gray.base,
[InteractionState.Focus]: gray.base,
},
[Variant.Success]: {
[InteractionState.Default]: green.dark2,
[InteractionState.Hover]: green.dark2,
[InteractionState.Focus]: green.dark2,
},
[Variant.Error]: {
[InteractionState.Default]: red.dark2,
[InteractionState.Hover]: red.dark2,
[InteractionState.Focus]: red.dark2,
},
[Variant.Disabled]: {
[InteractionState.Default]: gray.base,
[InteractionState.Hover]: gray.base,
[InteractionState.Focus]: gray.base,
[InteractionState.Default]: red.base,
[InteractionState.Hover]: red.base,
[InteractionState.Focus]: red.base,
},
[Variant.Placeholder]: {
[InteractionState.Default]: gray.base,
[InteractionState.Hover]: gray.base,
[InteractionState.Focus]: gray.base,
},
[Variant.SuccessLink]: {
[Variant.OnSuccess]: {
[InteractionState.Default]: green.dark2,
[InteractionState.Hover]: green.dark2,
[InteractionState.Focus]: green.dark2,
},
[Variant.OnSuccessLink]: {
[InteractionState.Default]: green.dark3,
[InteractionState.Hover]: green.dark3,
[InteractionState.Focus]: green.dark3,
},
[Variant.OnError]: {
[InteractionState.Default]: red.dark2,
[InteractionState.Hover]: red.dark2,
[InteractionState.Focus]: red.dark2,
},
[Variant.Link]: {
[InteractionState.Default]: blue.base,
[InteractionState.Hover]: blue.base,
Expand Down
Loading