[LG-5748] chore: Add Text and Border Color Variants (#3321)

* [LG-5748] chore: Add Text and Border Color Variants

* updated changset

Author: adamrasheed

.changeset/moody-clouds-lead.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/tokens': minor
+---
+
+Updated existing success and error border color variants, added tertiary border color variant, added text Success and SuccessLink color variants

packages/tokens/src/Tokens.stories.tsx

@@ -325,7 +325,7 @@ const generateTable = (theme: Theme) => {
                       width: 100px;
                     `}
                   >
-                    <code>{type}</code>
+                    <code style={{ textTransform: 'capitalize' }}>{type}</code>
                   </th>
                   <th
                     className={css`

packages/tokens/src/color/color.types.ts

@@ -17,12 +17,14 @@ const Variant = {
   Placeholder: 'placeholder',
   Primary: 'primary',
   Secondary: 'secondary',
+  Tertiary: 'tertiary',
   InversePrimary: 'inversePrimary',
   InverseSecondary: 'inverseSecondary',
   Info: 'info',
   Warning: 'warning',
   Error: 'error',
   Success: 'success',
+  SuccessLink: 'successLink',
   Link: 'link',
 } as const;
 type Variant = (typeof Variant)[keyof typeof Variant];

packages/tokens/src/color/darkModeColors.ts

@@ -63,14 +63,19 @@ const darkModeBorderColors = {
     [InteractionState.Hover]: gray.dark2,
     [InteractionState.Focus]: blue.light1,
   },
+  [Variant.Tertiary]: {
+    [InteractionState.Default]: gray.dark1,
+    [InteractionState.Hover]: gray.dark1,
+    [InteractionState.Focus]: blue.light1,
+  },
   [Variant.Success]: {
-    [InteractionState.Default]: green.dark1,
-    [InteractionState.Hover]: green.dark1,
+    [InteractionState.Default]: green.dark2,
+    [InteractionState.Hover]: green.dark2,
     [InteractionState.Focus]: blue.light1,
   },
   [Variant.Error]: {
-    [InteractionState.Default]: red.light1,
-    [InteractionState.Hover]: red.light1,
+    [InteractionState.Default]: red.dark2,
+    [InteractionState.Hover]: red.dark2,
     [InteractionState.Focus]: blue.light1,
   },
   [Variant.Disabled]: {
@@ -149,6 +154,11 @@ const darkModeTextColors = {
     [InteractionState.Hover]: black,
     [InteractionState.Focus]: blue.dark2,
   },
+  [Variant.Success]: {
+    [InteractionState.Default]: green.light1,
+    [InteractionState.Hover]: green.light1,
+    [InteractionState.Focus]: green.light1,
+  },
   [Variant.Error]: {
     [InteractionState.Default]: red.light1,
     [InteractionState.Hover]: red.light1,
@@ -159,6 +169,11 @@ const darkModeTextColors = {
     [InteractionState.Hover]: gray.dark1,
     [InteractionState.Focus]: gray.dark1,
   },
+  [Variant.SuccessLink]: {
+    [InteractionState.Default]: green.light3,
+    [InteractionState.Hover]: green.light3,
+    [InteractionState.Focus]: green.light3,
+  },
   [Variant.Link]: {
     [InteractionState.Default]: blue.light1,
     [InteractionState.Hover]: blue.light1,

packages/tokens/src/color/lightModeColors.ts

@@ -63,14 +63,19 @@ const lightModeBorderColors = {
     [InteractionState.Hover]: gray.light2,
     [InteractionState.Focus]: blue.light1,
   },
+  [Variant.Tertiary]: {
+    [InteractionState.Default]: gray.light1,
+    [InteractionState.Hover]: gray.light1,
+    [InteractionState.Focus]: blue.light1,
+  },
   [Variant.Success]: {
-    [InteractionState.Default]: green.dark1,
-    [InteractionState.Hover]: green.dark1,
+    [InteractionState.Default]: green.light2,
+    [InteractionState.Hover]: green.light2,
     [InteractionState.Focus]: blue.light1,
   },
   [Variant.Error]: {
-    [InteractionState.Default]: red.base,
-    [InteractionState.Hover]: red.base,
+    [InteractionState.Default]: red.light2,
+    [InteractionState.Hover]: red.light2,
     [InteractionState.Focus]: blue.light1,
   },
   [Variant.Disabled]: {
@@ -144,10 +149,15 @@ const lightModeTextColors = {
     [InteractionState.Hover]: white,
     [InteractionState.Focus]: blue.light2,
   },
+  [Variant.Success]: {
+    [InteractionState.Default]: green.dark2,
+    [InteractionState.Hover]: green.dark2,
+    [InteractionState.Focus]: green.dark2,
+  },
   [Variant.Error]: {
-    [InteractionState.Default]: red.base,
-    [InteractionState.Hover]: red.base,
-    [InteractionState.Focus]: red.base,
+    [InteractionState.Default]: red.dark2,
+    [InteractionState.Hover]: red.dark2,
+    [InteractionState.Focus]: red.dark2,
   },
   [Variant.Disabled]: {
     [InteractionState.Default]: gray.base,
@@ -159,6 +169,11 @@ const lightModeTextColors = {
     [InteractionState.Hover]: gray.base,
     [InteractionState.Focus]: gray.base,
   },
+  [Variant.SuccessLink]: {
+    [InteractionState.Default]: green.dark3,
+    [InteractionState.Hover]: green.dark3,
+    [InteractionState.Focus]: green.dark3,
+  },
   [Variant.Link]: {
     [InteractionState.Default]: blue.base,
     [InteractionState.Hover]: blue.base,