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 all 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
2 changes: 1 addition & 1 deletion .changeset/moody-clouds-lead.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
'@leafygreen-ui/tokens': minor
---

Updated existing success and error border color variants, added tertiary border color variant, added text Success and SuccessLink color variants
Added `Tertiary`, `OnSuccess`, and `OnError` border color variants. Added `OnSuccess`, `OnError`, and `OnSuccessLink` text color variants
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
Copy link

Copilot AI Nov 20, 2025

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
Copy link

Copilot AI Nov 20, 2025

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]: {
[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,
Copy link

Copilot AI Nov 20, 2025

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,
Copy link

Copilot AI Nov 20, 2025

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