feat(borderColors): adding semantic and colormode compatible colors for borderColor

packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap

@@ -89,6 +89,10 @@ exports[`themes admin - theme shape 1`] = `
         "background-hover": "rgba(255,255,255,0.09)",
         "background-primary": "#0A0D1C",
         "background-selected": "rgba(255,255,255,0.04)",
+        "border-disabled": "rgba(255,255,255,0.5)",
+        "border-primary": "#ffffff",
+        "border-secondary": "rgba(255,255,255,0.65)",
+        "border-tertiary": "rgba(255,255,255,0.2)",
         "danger": "#E85D7F",
         "danger-hover": "#DC5879",
         "feedback-error": "#E85D7F",
@@ -116,6 +120,10 @@ exports[`themes admin - theme shape 1`] = `
         "background-hover": "rgba(16,22,47,0.12)",
         "background-primary": "#FFF0E5",
         "background-selected": "rgba(16,22,47,0.04)",
+        "border-disabled": "rgba(16,22,47,0.63)",
+        "border-primary": "#10162F",
+        "border-secondary": "rgba(16,22,47,0.75)",
+        "border-tertiary": "rgba(16,22,47,0.28)",
         "danger": "#E91C11",
         "danger-hover": "#BE1809",
         "feedback-error": "#BE1809",
@@ -146,6 +154,10 @@ exports[`themes admin - theme shape 1`] = `
       "--color-background-hover": "var(--color-navy-200)",
       "--color-background-primary": "var(--color-beige)",
       "--color-background-selected": "var(--color-navy-100)",
+      "--color-border-disabled": "var(--color-navy-500)",
+      "--color-border-primary": "var(--color-navy-800)",
+      "--color-border-secondary": "var(--color-navy-600)",
+      "--color-border-tertiary": "var(--color-navy-300)",
       "--color-danger": "var(--color-red-500)",
       "--color-danger-hover": "var(--color-red-600)",
       "--color-feedback-error": "var(--color-red-600)",
@@ -261,8 +273,8 @@ exports[`themes admin - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--color-secondary)",
-    "2": "2px solid var(--color-secondary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "lg": "@media only screen and (min-width: 1200px)",
@@ -289,6 +301,10 @@ exports[`themes admin - theme shape 1`] = `
     "blue-400": "var(--color-blue-400)",
     "blue-500": "var(--color-blue-500)",
     "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
     "danger": "var(--color-danger)",
     "danger-hover": "var(--color-danger-hover)",
     "feedback-error": "var(--color-feedback-error)",
@@ -413,6 +429,10 @@ monospace",
       "background-hover": "white-200",
       "background-primary": "navy-900",
       "background-selected": "white-100",
+      "border-disabled": "white-500",
+      "border-primary": "white",
+      "border-secondary": "white-600",
+      "border-tertiary": "white-300",
       "danger": "red-0",
       "danger-hover": "red-100",
       "feedback-error": "red-0",
@@ -440,6 +460,10 @@ monospace",
       "background-hover": "navy-200",
       "background-primary": "beige",
       "background-selected": "navy-100",
+      "border-disabled": "navy-500",
+      "border-primary": "navy-800",
+      "border-secondary": "navy-600",
+      "border-tertiary": "navy-300",
       "danger": "red-500",
       "danger-hover": "red-600",
       "feedback-error": "red-600",
@@ -565,6 +589,10 @@ exports[`themes core - theme shape 1`] = `
         "background-hover": "rgba(255,255,255,0.09)",
         "background-primary": "#0A0D1C",
         "background-selected": "rgba(255,255,255,0.04)",
+        "border-disabled": "rgba(255,255,255,0.5)",
+        "border-primary": "#ffffff",
+        "border-secondary": "rgba(255,255,255,0.65)",
+        "border-tertiary": "rgba(255,255,255,0.2)",
         "danger": "#E85D7F",
         "danger-hover": "#DC5879",
         "feedback-error": "#E85D7F",
@@ -592,6 +620,10 @@ exports[`themes core - theme shape 1`] = `
         "background-hover": "rgba(16,22,47,0.12)",
         "background-primary": "#FFF0E5",
         "background-selected": "rgba(16,22,47,0.04)",
+        "border-disabled": "rgba(16,22,47,0.63)",
+        "border-primary": "#10162F",
+        "border-secondary": "rgba(16,22,47,0.75)",
+        "border-tertiary": "rgba(16,22,47,0.28)",
         "danger": "#E91C11",
         "danger-hover": "#BE1809",
         "feedback-error": "#BE1809",
@@ -622,6 +654,10 @@ exports[`themes core - theme shape 1`] = `
       "--color-background-hover": "var(--color-navy-200)",
       "--color-background-primary": "var(--color-beige)",
       "--color-background-selected": "var(--color-navy-100)",
+      "--color-border-disabled": "var(--color-navy-500)",
+      "--color-border-primary": "var(--color-navy-800)",
+      "--color-border-secondary": "var(--color-navy-600)",
+      "--color-border-tertiary": "var(--color-navy-300)",
       "--color-danger": "var(--color-red-500)",
       "--color-danger-hover": "var(--color-red-600)",
       "--color-feedback-error": "var(--color-red-600)",
@@ -737,8 +773,8 @@ exports[`themes core - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--color-secondary)",
-    "2": "2px solid var(--color-secondary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "lg": "@media only screen and (min-width: 1200px)",
@@ -765,6 +801,10 @@ exports[`themes core - theme shape 1`] = `
     "blue-400": "var(--color-blue-400)",
     "blue-500": "var(--color-blue-500)",
     "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
     "danger": "var(--color-danger)",
     "danger-hover": "var(--color-danger-hover)",
     "feedback-error": "var(--color-feedback-error)",
@@ -889,6 +929,10 @@ monospace",
       "background-hover": "white-200",
       "background-primary": "navy-900",
       "background-selected": "white-100",
+      "border-disabled": "white-500",
+      "border-primary": "white",
+      "border-secondary": "white-600",
+      "border-tertiary": "white-300",
       "danger": "red-0",
       "danger-hover": "red-100",
       "feedback-error": "red-0",
@@ -916,6 +960,10 @@ monospace",
       "background-hover": "navy-200",
       "background-primary": "beige",
       "background-selected": "navy-100",
+      "border-disabled": "navy-500",
+      "border-primary": "navy-800",
+      "border-secondary": "navy-600",
+      "border-tertiary": "navy-300",
       "danger": "red-500",
       "danger-hover": "red-600",
       "feedback-error": "red-600",
@@ -1051,6 +1099,10 @@ exports[`themes platform - theme shape 1`] = `
         "background-hover": "rgba(255,255,255,0.09)",
         "background-primary": "#0A0D1C",
         "background-selected": "rgba(255,255,255,0.04)",
+        "border-disabled": "rgba(255,255,255,0.5)",
+        "border-primary": "#ffffff",
+        "border-secondary": "rgba(255,255,255,0.65)",
+        "border-tertiary": "rgba(255,255,255,0.2)",
         "danger": "#E85D7F",
         "danger-hover": "#DC5879",
         "editor-annotation": "#E85D7F",
@@ -1103,6 +1155,10 @@ exports[`themes platform - theme shape 1`] = `
         "background-hover": "rgba(16,22,47,0.12)",
         "background-primary": "#FFF0E5",
         "background-selected": "rgba(16,22,47,0.04)",
+        "border-disabled": "rgba(16,22,47,0.63)",
+        "border-primary": "#10162F",
+        "border-secondary": "rgba(16,22,47,0.75)",
+        "border-tertiary": "rgba(16,22,47,0.28)",
         "danger": "#E91C11",
         "danger-hover": "#BE1809",
         "editor-annotation": "#E91C11",
@@ -1158,6 +1214,10 @@ exports[`themes platform - theme shape 1`] = `
       "--color-background-hover": "var(--color-white-200)",
       "--color-background-primary": "var(--color-navy-900)",
       "--color-background-selected": "var(--color-white-100)",
+      "--color-border-disabled": "var(--color-white-500)",
+      "--color-border-primary": "var(--color-white)",
+      "--color-border-secondary": "var(--color-white-600)",
+      "--color-border-tertiary": "var(--color-white-300)",
       "--color-danger": "var(--color-red-0)",
       "--color-danger-hover": "var(--color-red-100)",
       "--color-editor-annotation": "var(--color-red-0)",
@@ -1308,8 +1368,8 @@ exports[`themes platform - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--color-secondary)",
-    "2": "2px solid var(--color-secondary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "lg": "@media only screen and (min-width: 1200px)",
@@ -1337,6 +1397,10 @@ exports[`themes platform - theme shape 1`] = `
     "blue-400": "var(--color-blue-400)",
     "blue-500": "var(--color-blue-500)",
     "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
     "danger": "var(--color-danger)",
     "danger-hover": "var(--color-danger-hover)",
     "editor-annotation": "var(--color-editor-annotation)",
@@ -1495,6 +1559,10 @@ monospace",
       "background-hover": "white-200",
       "background-primary": "navy-900",
       "background-selected": "white-100",
+      "border-disabled": "white-500",
+      "border-primary": "white",
+      "border-secondary": "white-600",
+      "border-tertiary": "white-300",
       "danger": "red-0",
       "danger-hover": "red-100",
       "editor-annotation": "red-0",
@@ -1547,6 +1615,10 @@ monospace",
       "background-hover": "navy-200",
       "background-primary": "beige",
       "background-selected": "navy-100",
+      "border-disabled": "navy-500",
+      "border-primary": "navy-800",
+      "border-secondary": "navy-600",
+      "border-tertiary": "navy-300",
       "danger": "red-500",
       "danger-hover": "red-600",
       "editor-annotation": "red-500",

packages/gamut-styles/src/themes/core.ts

@@ -72,6 +72,12 @@ export const coreTheme = createTheme({
         _: 'hyper-500',
         hover: 'hyper-400',
       },
+      border: {
+        primary: 'navy-800',
+        secondary: 'navy-600',
+        tertiary: 'navy-300',
+        disabled: 'navy-500',
+      }
     },
     dark: {
       text: {
@@ -115,11 +121,17 @@ export const coreTheme = createTheme({
         _: 'yellow-500',
         hover: 'yellow-400',
       },
+      border: {
+        primary: 'white',
+        secondary: 'white-600',
+        tertiary: 'white-300',
+        disabled: 'white-500',
+      }
     },
   })
   .addScale('borders', ({ colors }) => ({
-    1: `1px solid ${colors.secondary}`,
-    2: `2px solid ${colors.secondary}`,
+    1: `1px solid ${colors['border-primary']}`,
+    2: `2px solid ${colors['border-primary']}`,
   }))
   .createScaleVariables('elements')
   .build();

packages/gamut/src/Badge/index.tsx

@@ -34,13 +34,13 @@ const colorVariants = variant({
     },
     tertiary: {
       border: 1,
-      borderColor: 'text-secondary',
+      borderColor: 'border-secondary',
       color: 'text-secondary',
       bg: 'transparent',
     },
     tertiaryFill: {
       border: 1,
-      borderColor: 'text-secondary',
+      borderColor: 'border-secondary',
       color: 'text-secondary',
       bg: 'background',
     },

packages/gamut/src/Button/shared/variants.ts

@@ -21,7 +21,7 @@ export const fillButtonVariants = templateVariants(
       transition: hoverBackgroundTransition,
     },
     [ButtonSelectors.ACTIVE]: {
-      borderColor: 'text',
+      borderColor: 'border-primary',
       bg: variant,
       color: 'background',
     },

packages/gamut/src/Card/index.tsx

@@ -123,7 +123,7 @@ export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
     <CardWrapper
       bg={variant}
       border={1}
-      borderColor="navy"
+      borderColor="border-primary"
       borderRadius="md"
       p={16}
       outline={variant === 'navy'}

packages/gamut/src/Form/__tests__/SelectDropdown.test.tsx

@@ -4,7 +4,7 @@ import {
   EarthIcon,
 } from '@codecademy/gamut-icons';
 import { setupRtl } from '@codecademy/gamut-tests';
-import { fireEvent, queryByAttribute } from '@testing-library/dom';
+import { fireEvent } from '@testing-library/dom';
 import { act } from 'react';
 
 import { SelectDropdown } from '../SelectDropdown';

packages/gamut/src/Form/styles/shared-system-props.ts

@@ -73,13 +73,13 @@ export const formBaseFieldStylesObject = {
     'ease-in-out'
   ),
   border: 1,
-  borderColor: 'text-disabled',
+  borderColor: 'border-disabled',
   borderRadius: 'md',
   [InputSelectors.HOVER]: {
     borderColor: 'primary',
   },
   [InputSelectors.PLACEHOLDER]: {
-    borderColor: 'text-disabled',
+    borderColor: 'border-disabled',
     fontStyle: 'italic',
   },
   [InputSelectors.DISABLED]: {

packages/gamut/src/GridForm/GridFormSections/GridFormSectionBreak.tsx

@@ -18,7 +18,7 @@ export const GridFormSectionBreak: React.FC = () => {
         borderTop="none"
         borderX="none"
         border={1}
-        borderColorBottom="text"
+        borderColorBottom="border-primary"
         data-testid="form-section-break"
         width="100%"
       />

packages/gamut/src/Pagination/styles.tsx

@@ -17,7 +17,7 @@ const paginationBaseStyles = {
     color: 'text-disabled',
     bg: 'transparent',
   },
-  [ButtonSelectors.OUTLINE]: { borderColor: 'text' },
+  [ButtonSelectors.OUTLINE]: { borderColor: 'border-primary' },
   [ButtonSelectors.SHADOW_ACTIVE]: { opacity: 0 },
   [ButtonSelectors.SHADOW_HOVER]: { opacity: 0 },
 } as const;

packages/gamut/src/ProgressBar/index.tsx

@@ -90,11 +90,11 @@ const progressBarBackgroundVariants = variant({
   variants: {
     blue: {
       bg: 'navy',
-      borderColor: 'navy',
+      borderColor: 'border-primary',
     },
     yellow: {
       bg: 'gray-100',
-      borderColor: 'navy',
+      borderColor: 'border-primary',
     },
     default: {},
   },

packages/gamut/src/Tabs/TabButton.tsx

@@ -58,7 +58,7 @@ const tabVariants = variant({
   variants: {
     standard: {
       background: 'none',
-      borderColor: 'text',
+      borderColor: 'border-primary',
       borderLeft: 'none',
       borderRight: 'none',
       borderTop: 'none',

packages/styleguide/.storybook/components/Headers/AboutHeader.tsx

@@ -18,7 +18,7 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
     <FlexBox
       bg="navy-100"
       border={1}
-      borderColor="navy-300"
+      borderColor="border-tertiary"
       borderRadius="md"
       column
       mb={24}

packages/styleguide/.storybook/components/Headers/ComponentHeader.tsx

@@ -73,7 +73,7 @@ export const ComponentHeader: React.FC<ComponentHeaderProps> = ({
     <Box
       bg="navy-100"
       border={1}
-      borderColor="navy-300"
+      borderColor="border-tertiary"
       borderRadius="md"
       pb={design?.url ? 0 : 24}
       pt={32}