diff --git a/.changeset/moody-clouds-lead.md b/.changeset/moody-clouds-lead.md index 9d0ef1a527..291d413ba7 100644 --- a/.changeset/moody-clouds-lead.md +++ b/.changeset/moody-clouds-lead.md @@ -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 diff --git a/packages/tokens/src/color/color.types.ts b/packages/tokens/src/color/color.types.ts index fc913beb50..6eb9ac51ec 100644 --- a/packages/tokens/src/color/color.types.ts +++ b/packages/tokens/src/color/color.types.ts @@ -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]; diff --git a/packages/tokens/src/color/darkModeColors.ts b/packages/tokens/src/color/darkModeColors.ts index 3905c95f4e..6934c3cdfb 100644 --- a/packages/tokens/src/color/darkModeColors.ts +++ b/packages/tokens/src/color/darkModeColors.ts @@ -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, }, - [Variant.Error]: { + [Variant.OnError]: { [InteractionState.Default]: red.dark2, [InteractionState.Hover]: red.dark2, [InteractionState.Focus]: blue.light1, @@ -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, diff --git a/packages/tokens/src/color/lightModeColors.ts b/packages/tokens/src/color/lightModeColors.ts index 7c27fa2349..3167f4d2ff 100644 --- a/packages/tokens/src/color/lightModeColors.ts +++ b/packages/tokens/src/color/lightModeColors.ts @@ -69,13 +69,13 @@ 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]: { @@ -83,6 +83,16 @@ const lightModeBorderColors = { [InteractionState.Hover]: gray.light1, [InteractionState.Focus]: gray.light1, }, + [Variant.OnSuccess]: { + [InteractionState.Default]: green.light2, + [InteractionState.Hover]: green.light2, + [InteractionState.Focus]: green.light2, + }, + [Variant.OnError]: { + [InteractionState.Default]: red.light2, + [InteractionState.Hover]: red.light2, + [InteractionState.Focus]: red.light2, + }, } as const satisfies VariantColorRecord; const lightModeIconColors = { @@ -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,