From 83268182048bb8ff229f0bc9427bb465b4766caa Mon Sep 17 00:00:00 2001
From: Bartosz Leper <bartosz.leper@goteleport.com>
Date: Fri, 21 Jun 2024 17:30:04 +0200
Subject: [PATCH 1/2] Reorganize the color palette (#43304)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Reorganize the color palette

* Update web/packages/design/src/theme/themeColors.story.tsx

Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>

* review

---------

Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>
---
 web/packages/design/src/Checkbox/Checkbox.tsx |   8 +-
 .../design/src/MultiRowBox/MultiRowBox.tsx    |   4 +-
 web/packages/design/src/Toggle/Toggle.tsx     |   3 +-
 ...eColors.story.js => themeColors.story.tsx} | 143 +++++++++---------
 .../design/src/theme/themes/bblpTheme.ts      |  64 ++++++--
 .../design/src/theme/themes/darkTheme.ts      |  64 ++++++--
 .../design/src/theme/themes/lightTheme.ts     |  64 ++++++--
 web/packages/design/src/theme/themes/types.ts |  42 ++++-
 .../shared/getBackgroundColor.ts              |   6 +-
 web/packages/teleport/src/Account/Account.tsx |   2 +-
 web/packages/teleport/src/Account/Header.tsx  |   2 +-
 .../wizards/AddAuthDeviceWizard.tsx           |   2 +-
 .../teleport/src/Account/StatePill.tsx        |   4 +-
 .../src/Notifications/Notification.tsx        |  20 +--
 .../src/Notifications/Notifications.tsx       |  14 +-
 web/packages/teleport/src/TopBar/TopBar.tsx   |   5 +-
 .../src/components/FormLogin/FormLogin.tsx    |   2 +-
 .../NewMfaDeviceForm/NewMfaDeviceForm.tsx     |   4 +-
 .../src/components/Passkeys/PasskeyBlurb.tsx  |   2 +-
 .../src/components/Passkeys/PasskeyIcons.tsx  |   3 +-
 20 files changed, 295 insertions(+), 163 deletions(-)
 rename web/packages/design/src/theme/{themeColors.story.js => themeColors.story.tsx} (78%)

diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
index fb6b5f458a3f..ff525844ea16 100644
--- a/web/packages/design/src/Checkbox/Checkbox.tsx
+++ b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -166,7 +166,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
     &:hover,
     .teleport-checkbox__force-hover & {
       background-color: ${props =>
-        props.theme.colors.interactive.tonal.neutral[0]};
+        props.theme.colors.interactive.tonal.neutral[0].background};
       border-color: ${props => props.theme.colors.text.slightlyMuted};
 
       &:checked {
@@ -182,7 +182,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
     &:focus-visible,
     .teleport-checkbox__force-focus-visible & {
       background-color: ${props =>
-        props.theme.colors.interactive.tonal.neutral[0]};
+        props.theme.colors.interactive.tonal.neutral[0].background};
       border-color: ${props => props.theme.colors.buttons.primary.default};
       outline: none;
       border-width: 2px;
@@ -200,7 +200,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
     &:active,
     .teleport-checkbox__force-active & {
       background-color: ${props =>
-        props.theme.colors.interactive.tonal.neutral[1]};
+        props.theme.colors.interactive.tonal.neutral[1].background};
       border-color: ${props => props.theme.colors.text.slightlyMuted};
 
       &:checked {
@@ -212,7 +212,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
 
   &:disabled {
     background-color: ${props =>
-      props.theme.colors.interactive.tonal.neutral[0]};
+      props.theme.colors.interactive.tonal.neutral[0].background};
     border-color: transparent;
   }
 
diff --git a/web/packages/design/src/MultiRowBox/MultiRowBox.tsx b/web/packages/design/src/MultiRowBox/MultiRowBox.tsx
index 2ab551cdfde7..f6783ab23e94 100644
--- a/web/packages/design/src/MultiRowBox/MultiRowBox.tsx
+++ b/web/packages/design/src/MultiRowBox/MultiRowBox.tsx
@@ -39,7 +39,7 @@ type MultiRowBoxProps = {
  */
 export const MultiRowBox = styled(Box)`
   border: ${props =>
-    `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2]}`};
+    `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2].background}`};
   border-radius: ${props => props.theme.radii[2]}px;
 `;
 
@@ -48,7 +48,7 @@ export const Row = styled(Box)`
   padding: ${props => props.theme.space[4]}px;
   &:not(:last-child) {
     border-bottom: ${props =>
-      `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2]}`};
+      `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2].background}`};
   }
 `;
 
diff --git a/web/packages/design/src/Toggle/Toggle.tsx b/web/packages/design/src/Toggle/Toggle.tsx
index 807322044aae..125d6e86dc03 100644
--- a/web/packages/design/src/Toggle/Toggle.tsx
+++ b/web/packages/design/src/Toggle/Toggle.tsx
@@ -160,6 +160,7 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })<SizeProps>`
   }
 
   &:disabled:checked + ${StyledSlider} {
-    background: ${props => props.theme.colors.interactive.tonal.success[2]};
+    background: ${props =>
+      props.theme.colors.interactive.tonal.success[2].background};
   }
 `;
diff --git a/web/packages/design/src/theme/themeColors.story.js b/web/packages/design/src/theme/themeColors.story.tsx
similarity index 78%
rename from web/packages/design/src/theme/themeColors.story.js
rename to web/packages/design/src/theme/themeColors.story.tsx
index f6863671d1d0..71208d8386ac 100644
--- a/web/packages/design/src/theme/themeColors.story.js
+++ b/web/packages/design/src/theme/themeColors.story.tsx
@@ -33,7 +33,7 @@ const ColorsComponent = () => {
   return (
     <Flex flexDirection="column" p="4">
       <Flex flexDirection="column">
-        <Text mb="2" typography="h4">
+        <Text mb="2" typography="h3">
           Levels
         </Text>
         <Text mb="2">
@@ -54,50 +54,73 @@ const ColorsComponent = () => {
           </Link>
         </Text>
         <ColorsBox mb="4" colors={theme.colors.levels} themeType="levels" />
+        <Text mb="2" typography="h3">
+          Interactive Colors
+        </Text>
+        <Text mb="2">
+          <p>
+            Interactive colors are used for hover states, indicators, etc. An
+            example of this in use currently would be unified resource cards in
+            the Pinned and Pinned (Hovered) states.
+          </p>
+          <p>
+            All interactive colors have separate fields for background and text.
+          </p>
+        </Text>
+        <Flex flexDirection="column" gap={4}>
+          {Object.entries(theme.colors.interactive.solid).map(
+            ([intent, colorGroup]) => (
+              <Flex gap={4}>
+                {Object.entries(colorGroup).map(
+                  ([state, { background, text }]) => (
+                    <SingleColorBox
+                      mb="2"
+                      path={`theme.colors.interactive.solid.${intent}.${state}`}
+                      bg={background}
+                      color={text}
+                    />
+                  )
+                )}
+              </Flex>
+            )
+          )}
+        </Flex>
         <Text mb="1" typography="h4">
-          Spot Backgrounds
+          Tonal color variants
         </Text>
         <Text mb="2">
-          Spot backgrounds are used as highlights or accents. They are not solid
-          colours, instead, they are a slightly transparent mask that highlights
-          the colour behind it. This makes them quite versatile and they can be
-          used to accentuate or highlight components on any background.
-          <br />
-          They may be used for things such as indicating a hover or active state
-          for an item in a menu, or for minor accents such as dividers. <br />
+          Tonal color variants are used as highlights or accents. They are not
+          solid colours, instead, they are a slightly transparent mask that
+          highlights the colour behind it. This makes them quite versatile and
+          they can be used to accentuate or highlight components on any
+          background.
         </Text>
-        <Flex>
-          <SingleColorBox
-            mb="4"
-            mr={0}
-            color={theme.colors.spotBackground[0]}
-            themeType="levels"
-            path="theme.colors.spotBackground[0]"
-          />
-          <SingleColorBox
-            mb="4"
-            mr={0}
-            color={theme.colors.spotBackground[1]}
-            themeType="levels"
-            path="theme.colors.spotBackground[1]"
-          />
-          <SingleColorBox
-            mb="4"
-            mr={0}
-            color={theme.colors.spotBackground[2]}
-            themeType="levels"
-            path="theme.colors.spotBackground[2]"
-          />
+        <Flex flexDirection="column" gap={4}>
+          {Object.entries(theme.colors.interactive.tonal).map(
+            ([intent, colorGroup]) => (
+              <Flex gap={4}>
+                {colorGroup.map(({ background, text }, i) => (
+                  <SingleColorBox
+                    mb="2"
+                    path={`theme.colors.interactive.tonal.${intent}[${i}]`}
+                    bg={background}
+                    color={text}
+                  />
+                ))}
+              </Flex>
+            )
+          )}
         </Flex>
-        <Text mb="2" typography="h4">
+        <Text mb="2" typography="h3">
           Brand
         </Text>
         <SingleColorBox
           mb="4"
           path="theme.colors.brand"
-          color={theme.colors.brand}
+          bg={theme.colors.brand}
+          color={theme.colors.text.primaryInverse}
         />
-        <Text mb="2" typography="h4">
+        <Text mb="2" typography="h3">
           Shadows
         </Text>
         <Flex>
@@ -153,7 +176,7 @@ const ColorsComponent = () => {
             <Text>theme.boxShadow[2]</Text>
           </Box>
         </Flex>
-        <Text mb="2" typography="h4">
+        <Text mb="2" typography="h3">
           Text Colors
         </Text>
         <Flex width="fit-content" flexDirection="row" mb={4}>
@@ -291,31 +314,6 @@ const ColorsComponent = () => {
             </Text>
           </Flex>
         </Flex>
-        <Text mb="2" typography="h3">
-          Interactive Colors
-        </Text>
-        <Text mb="2">
-          Interactive colors are used for hover states, indicators, etc. An
-          example of this in use currently would be unified resource cards in
-          the Pinned and Pinned(Hovered) states.
-        </Text>
-        <Flex gap={4}>
-          <SingleColorBox
-            mb="2"
-            path="theme.colors.interactive.tonal.primary[0]"
-            color={theme.colors.interactive.tonal.primary[0]}
-          />
-          <SingleColorBox
-            mb="2"
-            path="theme.colors.interactive.tonal.primary[1]"
-            color={theme.colors.interactive.tonal.primary[1]}
-          />
-          <SingleColorBox
-            mb="2"
-            path="theme.colors.interactive.tonal.primary[2]"
-            color={theme.colors.interactive.tonal.primary[2]}
-          />
-        </Flex>
       </Flex>
     </Flex>
   );
@@ -357,17 +355,20 @@ function ColorsBox({ colors, themeType = null, ...styles }) {
   );
 }
 
-function SingleColorBox({ color, path, ...styles }) {
+function SingleColorBox({ bg, color, path, ...styles }) {
   return (
-    <Flex flexWrap="wrap" key={path} width="260px" mb={3}>
-      <Box
-        css={`
-          color: ${props => props.theme.colors.text.slightlyMuted};
-        `}
-      >
-        {path}
-      </Box>
-      <Box width="100%" height="50px" p={3} mr={3} bg={color} {...styles} />
-    </Flex>
+    <Box width="150px" height="150px" p={3} mr={3} bg={bg} {...styles}>
+      <Text color={color}>
+        {/* Path, potentially broken along the periods. */}
+        {path.split('.').map((word, i, arr) => (
+          <>
+            {word}
+            {i < arr.length - 1 ? '.' : ''}
+            {/*potential line break*/}
+            <wbr />
+          </>
+        ))}
+      </Text>
+    </Box>
   );
 }
diff --git a/web/packages/design/src/theme/themes/bblpTheme.ts b/web/packages/design/src/theme/themes/bblpTheme.ts
index 86a761d19379..49bff1570cb4 100644
--- a/web/packages/design/src/theme/themes/bblpTheme.ts
+++ b/web/packages/design/src/theme/themes/bblpTheme.ts
@@ -91,34 +91,66 @@ const colors: ThemeColors = {
   brand: '#FFA028',
 
   interactive: {
+    solid: {
+      primary: {
+        default: { text: '#000000', background: '#FFA028' },
+        hover: { text: '#000000', background: '#FFB04C' },
+        active: { text: '#000000', background: '#DB8922' },
+      },
+      success: {
+        default: { text: '#000000', background: '#00A223' },
+        hover: { text: '#000000', background: '#35D655' },
+        active: { text: '#000000', background: '#00851C' },
+      },
+      accent: {
+        default: { text: '#000000', background: '#66ABFF' },
+        hover: { text: '#000000', background: '#99C7FF' },
+        active: { text: '#000000', background: '#2B8EFF' },
+      },
+      danger: {
+        default: { text: '#FFFFFF', background: '#E51E3C' },
+        hover: { text: '#FFFFFF', background: '#FD2D4A' },
+        active: { text: '#FFFFFF', background: '#C31834' },
+      },
+      alert: {
+        default: { text: '#000000', background: '#FA5A28' },
+        hover: { text: '#000000', background: '#FB754C' },
+        active: { text: '#000000', background: '#D64D22' },
+      },
+    },
+
     tonal: {
       primary: [
-        'rgba(255,160,40, 0.1)',
-        'rgba(255,160,40, 0.18)',
-        'rgba(255,160,40, 0.25)',
+        { text: '#FFB04C', background: 'rgba(255,160,40, 0.1)' },
+        { text: '#DB8922', background: 'rgba(255,160,40, 0.18)' },
+        { text: '#DB8922', background: 'rgba(255,160,40, 0.25)' },
       ],
       success: [
-        'rgba(0, 162, 35, 0.1)',
-        'rgba(0, 162, 35, 0.18)',
-        'rgba(0, 162, 35, 0.25)',
+        { text: '#35D655', background: 'rgba(0, 162, 35, 0.1)' },
+        { text: '#35D655', background: 'rgba(0, 162, 35, 0.18)' },
+        { text: '#00851C', background: 'rgba(0, 162, 35, 0.25)' },
       ],
       // TODO rudream: update bblp interactive tonal colors.
       danger: [
-        'rgba(255, 98, 87, 0.1)',
-        'rgba(255, 98, 87, 0.18)',
-        'rgba(255, 98, 87, 0.25)',
+        { text: '#FD2D4A', background: 'rgba(255, 98, 87, 0.1)' },
+        { text: '#FD2D4A', background: 'rgba(255, 98, 87, 0.18)' },
+        { text: '#C31834', background: 'rgba(255, 98, 87, 0.25)' },
       ],
       alert: [
-        'rgba(255, 171, 0, 0.1)',
-        'rgba(255, 171, 0, 0.18)',
-        'rgba(255, 171, 0, 0.25)',
+        { text: '#D64D22', background: 'rgba(255, 171, 0, 0.1)' },
+        { text: '#D64D22', background: 'rgba(255, 171, 0, 0.18)' },
+        { text: '#D64D22', background: 'rgba(255, 171, 0, 0.25)' },
       ],
       informational: [
-        'rgba(0, 158, 255, 0.1)',
-        'rgba(0, 158, 255, 0.18)',
-        'rgba(0, 158, 255, 0.25)',
+        { text: '#2B8EFF', background: 'rgba(0, 158, 255, 0.1)' },
+        { text: '#2B8EFF', background: 'rgba(0, 158, 255, 0.18)' },
+        { text: '#2B8EFF', background: 'rgba(0, 158, 255, 0.25)' },
+      ],
+      neutral: [
+        { text: '#FFFFFF', background: neutralColors[0] },
+        { text: '#FFFFFF', background: neutralColors[1] },
+        { text: '#FFFFFF', background: neutralColors[2] },
       ],
-      neutral: neutralColors,
     },
   },
 
diff --git a/web/packages/design/src/theme/themes/darkTheme.ts b/web/packages/design/src/theme/themes/darkTheme.ts
index ca0065f243c2..53d9602803ca 100644
--- a/web/packages/design/src/theme/themes/darkTheme.ts
+++ b/web/packages/design/src/theme/themes/darkTheme.ts
@@ -91,33 +91,65 @@ const colors: ThemeColors = {
   brand: '#9F85FF',
 
   interactive: {
+    solid: {
+      primary: {
+        default: { text: '#000000', background: '#9F85FF' },
+        hover: { text: '#000000', background: '#B29DFF' },
+        active: { text: '#000000', background: '#C5B6FF' },
+      },
+      success: {
+        default: { text: '#000000', background: '#00BFA6' },
+        hover: { text: '#000000', background: '#33CCB8' },
+        active: { text: '#000000', background: '#66D9CA' },
+      },
+      accent: {
+        default: { text: '#000000', background: '#009EFF' },
+        hover: { text: '#000000', background: '#33B1FF' },
+        active: { text: '#000000', background: '#66C5FF' },
+      },
+      danger: {
+        default: { text: '#000000', background: '#FF6257' },
+        hover: { text: '#000000', background: '#FF8179' },
+        active: { text: '#000000', background: '#FFA19A' },
+      },
+      alert: {
+        default: { text: '#000000', background: '#FFAB00' },
+        hover: { text: '#000000', background: '#FFBC33' },
+        active: { text: '#000000', background: '#FFCD66' },
+      },
+    },
+
     tonal: {
       primary: [
-        'rgba(159,133,255, 0.1)',
-        'rgba(159,133,255, 0.18)',
-        'rgba(159,133,255, 0.25)',
+        { text: '#B29DFF', background: 'rgba(159,133,255, 0.1)' },
+        { text: '#C5B6FF', background: 'rgba(159,133,255, 0.18)' },
+        { text: '#C5B6FF', background: 'rgba(159,133,255, 0.25)' },
       ],
       success: [
-        'rgba(0, 191, 166, 0.1)',
-        'rgba(0, 191, 166, 0.18)',
-        'rgba(0, 191, 166, 0.25)',
+        { text: '#33CCB8', background: 'rgba(0, 191, 166, 0.1)' },
+        { text: '#33CCB8', background: 'rgba(0, 191, 166, 0.18)' },
+        { text: '#66D9CA', background: 'rgba(0, 191, 166, 0.25)' },
       ],
       danger: [
-        'rgba(255, 98, 87, 0.1)',
-        'rgba(255, 98, 87, 0.18)',
-        'rgba(255, 98, 87, 0.25)',
+        { text: '#FF8179', background: 'rgba(255, 98, 87, 0.1)' },
+        { text: '#FF8179', background: 'rgba(255, 98, 87, 0.18)' },
+        { text: '#FFA19A', background: 'rgba(255, 98, 87, 0.25)' },
       ],
       alert: [
-        'rgba(255, 171, 0, 0.1)',
-        'rgba(255, 171, 0, 0.18)',
-        'rgba(255, 171, 0, 0.25)',
+        { text: '#FFCD66', background: 'rgba(255, 171, 0, 0.1)' },
+        { text: '#FFCD66', background: 'rgba(255, 171, 0, 0.18)' },
+        { text: '#FFCD66', background: 'rgba(255, 171, 0, 0.25)' },
       ],
       informational: [
-        'rgba(0, 158, 255, 0.1)',
-        'rgba(0, 158, 255, 0.18)',
-        'rgba(0, 158, 255, 0.25)',
+        { text: '#66C5FF', background: 'rgba(0, 158, 255, 0.1)' },
+        { text: '#66C5FF', background: 'rgba(0, 158, 255, 0.18)' },
+        { text: '#66C5FF', background: 'rgba(0, 158, 255, 0.25)' },
+      ],
+      neutral: [
+        { text: '#FFFFFF', background: neutralColors[0] },
+        { text: '#FFFFFF', background: neutralColors[1] },
+        { text: '#FFFFFF', background: neutralColors[2] },
       ],
-      neutral: neutralColors,
     },
   },
 
diff --git a/web/packages/design/src/theme/themes/lightTheme.ts b/web/packages/design/src/theme/themes/lightTheme.ts
index 83e799225f73..e5095876f98c 100644
--- a/web/packages/design/src/theme/themes/lightTheme.ts
+++ b/web/packages/design/src/theme/themes/lightTheme.ts
@@ -90,33 +90,65 @@ const colors: ThemeColors = {
   brand: '#512FC9',
 
   interactive: {
+    solid: {
+      primary: {
+        default: { text: '#FFFFFF', background: '#512FC9' },
+        hover: { text: '#FFFFFF', background: '#4126A1' },
+        active: { text: '#FFFFFF', background: '#311C79' },
+      },
+      success: {
+        default: { text: '#FFFFFF', background: '#007D6B' },
+        hover: { text: '#FFFFFF', background: '#006456' },
+        active: { text: '#FFFFFF', background: '#004B40' },
+      },
+      accent: {
+        default: { text: '#FFFFFF', background: '#0073BA' },
+        hover: { text: '#FFFFFF', background: '#005C95' },
+        active: { text: '#FFFFFF', background: '#004570' },
+      },
+      danger: {
+        default: { text: '#FFFFFF', background: '#CC372D' },
+        hover: { text: '#FFFFFF', background: '#A32C24' },
+        active: { text: '#FFFFFF', background: '#7A211B' },
+      },
+      alert: {
+        default: { text: '#000000', background: '#FFAB00' },
+        hover: { text: '#000000', background: '#CC8900' },
+        active: { text: '#000000', background: '#996700' },
+      },
+    },
+
     tonal: {
       primary: [
-        'rgba(81,47,201, 0.1)',
-        'rgba(81,47,201, 0.18)',
-        'rgba(81,47,201, 0.25)',
+        { text: '#4126A1', background: 'rgba(81,47,201, 0.1)' },
+        { text: '#311C79', background: 'rgba(81,47,201, 0.18)' },
+        { text: '#311C79', background: 'rgba(81,47,201, 0.25)' },
       ],
       success: [
-        'rgba(0, 125, 107, 0.1)',
-        'rgba(0, 125, 107, 0.18)',
-        'rgba(0, 125, 107, 0.25)',
+        { text: '#006456', background: 'rgba(0, 125, 107, 0.1)' },
+        { text: '#006456', background: 'rgba(0, 125, 107, 0.18)' },
+        { text: '#004B40', background: 'rgba(0, 125, 107, 0.25)' },
       ],
       danger: [
-        'rgba(204, 55, 45, 0.1)',
-        'rgba(204, 55, 45, 0.18)',
-        'rgba(204, 55, 45, 0.25)',
+        { text: '#A32C24', background: 'rgba(204, 55, 45, 0.1)' },
+        { text: '#A32C24', background: 'rgba(204, 55, 45, 0.18)' },
+        { text: '#7A211B', background: 'rgba(204, 55, 45, 0.25)' },
       ],
       alert: [
-        'rgba(255, 171, 0, 0.1)',
-        'rgba(255, 171, 0, 0.18)',
-        'rgba(255, 171, 0, 0.25)',
+        { text: '#996700', background: 'rgba(255, 171, 0, 0.1)' },
+        { text: '#996700', background: 'rgba(255, 171, 0, 0.18)' },
+        { text: '#996700', background: 'rgba(255, 171, 0, 0.25)' },
       ],
       informational: [
-        'rgba(0, 115, 186, 0.1)',
-        'rgba(0, 115, 186, 0.18)',
-        'rgba(0, 115, 186, 0.25)',
+        { text: '#004570', background: 'rgba(0, 115, 186, 0.1)' },
+        { text: '#004570', background: 'rgba(0, 115, 186, 0.18)' },
+        { text: '#004570', background: 'rgba(0, 115, 186, 0.25)' },
+      ],
+      neutral: [
+        { text: '#000000', background: neutralColors[0] },
+        { text: '#000000', background: neutralColors[1] },
+        { text: '#000000', background: neutralColors[2] },
       ],
-      neutral: neutralColors,
     },
   },
 
diff --git a/web/packages/design/src/theme/themes/types.ts b/web/packages/design/src/theme/themes/types.ts
index b2ba896f6465..cc3aac6bedd3 100644
--- a/web/packages/design/src/theme/themes/types.ts
+++ b/web/packages/design/src/theme/themes/types.ts
@@ -20,6 +20,17 @@ import { fonts } from '../fonts';
 import { blueGrey } from '../palette';
 import typography, { fontSizes, fontWeights } from '../typography';
 
+type TextAndBackgroundColors = {
+  text: string;
+  background: string;
+};
+
+type InteractiveColorGroup = {
+  default: TextAndBackgroundColors;
+  hover: TextAndBackgroundColors;
+  active: TextAndBackgroundColors;
+};
+
 export type ThemeColors = {
   /**
     Colors in `levels` are used to reflect the perceived depth of elements in the UI.
@@ -52,17 +63,23 @@ export type ThemeColors = {
    * Interactive colors are used to highlight different actions or states
    * based on intent.
    *
-   * For example, primary would be used for as selected states,
-   * or hover over primary intent actions.
+   * For example, primary would be used for as selected states.
    */
   interactive: {
+    solid: {
+      primary: InteractiveColorGroup;
+      success: InteractiveColorGroup;
+      accent: InteractiveColorGroup;
+      danger: InteractiveColorGroup;
+      alert: InteractiveColorGroup;
+    };
     tonal: {
-      primary: string[];
-      neutral: string[];
-      success: string[];
-      danger: string[];
-      alert: string[];
-      informational: string[];
+      primary: TextAndBackgroundColors[];
+      neutral: TextAndBackgroundColors[];
+      success: TextAndBackgroundColors[];
+      danger: TextAndBackgroundColors[];
+      alert: TextAndBackgroundColors[];
+      informational: TextAndBackgroundColors[];
     };
   };
 
@@ -87,6 +104,7 @@ export type ThemeColors = {
     textDisabled: string;
     bgDisabled: string;
 
+    /** @deprecated Use `interactive.solid.primary` instead. */
     primary: {
       text: string;
       default: string;
@@ -94,6 +112,7 @@ export type ThemeColors = {
       active: string;
     };
 
+    /** @deprecated Use `interactive.tonal.neutral` instead. */
     secondary: {
       default: string;
       hover: string;
@@ -107,6 +126,7 @@ export type ThemeColors = {
       border: string;
     };
 
+    /** @deprecated Use `interactive.solid.danger` instead. */
     warning: {
       text: string;
       default: string;
@@ -116,6 +136,7 @@ export type ThemeColors = {
 
     trashButton: { default: string; hover: string };
 
+    /** @deprecated Use `interactive.solid.accent` instead. */
     link: {
       default: string;
       hover: string;
@@ -129,23 +150,28 @@ export type ThemeColors = {
 
   progressBarColor: string;
 
+  /** @deprecated Use `interactive.solid.danger` instead. */
   error: {
     main: string;
     hover: string;
     active: string;
   };
+
+  /** @deprecated Use `interactive.solid.alert` instead. */
   warning: {
     main: string;
     hover: string;
     active: string;
   };
 
+  /** @deprecated Use `interactive.solid.success` instead. */
   success: {
     main: string;
     hover: string;
     active: string;
   };
 
+  /** @deprecated Use `interactive.solid.accent` instead. */
   accent: {
     main: string;
     hover: string;
diff --git a/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts b/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts
index 5797395ed625..07c3848f455f 100644
--- a/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts
+++ b/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts
@@ -27,16 +27,16 @@ export interface BackgroundColorProps {
 
 export const getBackgroundColor = (props: BackgroundColorProps) => {
   if (props.requiresRequest && props.pinned) {
-    return props.theme.colors.interactive.tonal.primary[0];
+    return props.theme.colors.interactive.tonal.primary[0].background;
   }
   if (props.requiresRequest) {
     return props.theme.colors.spotBackground[0];
   }
   if (props.selected) {
-    return props.theme.colors.interactive.tonal.primary[2];
+    return props.theme.colors.interactive.tonal.primary[2].background;
   }
   if (props.pinned) {
-    return props.theme.colors.interactive.tonal.primary[1];
+    return props.theme.colors.interactive.tonal.primary[1].background;
   }
   return 'transparent';
 };
diff --git a/web/packages/teleport/src/Account/Account.tsx b/web/packages/teleport/src/Account/Account.tsx
index 2dbe2a2e8e2b..7690d6e4f1dc 100644
--- a/web/packages/teleport/src/Account/Account.tsx
+++ b/web/packages/teleport/src/Account/Account.tsx
@@ -348,7 +348,7 @@ function PasskeysHeader({
     return (
       <Flex flexDirection="column" alignItems="center">
         <Box
-          bg={theme.colors.interactive.tonal.neutral[0]}
+          bg={theme.colors.interactive.tonal.neutral[0].background}
           lineHeight={0}
           p={2}
           borderRadius={3}
diff --git a/web/packages/teleport/src/Account/Header.tsx b/web/packages/teleport/src/Account/Header.tsx
index 3df0ec84cdea..307b23fea666 100644
--- a/web/packages/teleport/src/Account/Header.tsx
+++ b/web/packages/teleport/src/Account/Header.tsx
@@ -48,7 +48,7 @@ export function Header({
       {/* lineHeight=0 prevents the icon background from being larger than
           required by the icon itself. */}
       <Box
-        bg={theme.colors.interactive.tonal.neutral[0]}
+        bg={theme.colors.interactive.tonal.neutral[0].background}
         lineHeight={0}
         p={2}
         borderRadius={3}
diff --git a/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx b/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
index a3c6838ab960..da677293058c 100644
--- a/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
@@ -276,7 +276,7 @@ function QrCodeBox({ privilegeToken }: { privilegeToken: string }) {
       gap={4}
       p={4}
       mb={4}
-      bg="interactive.tonal.neutral.0"
+      bg="interactive.tonal.neutral.0.background"
     >
       <Flex height="168px" justifyContent="center" alignItems="center">
         {fetchQrCodeAttempt.status === 'error' && (
diff --git a/web/packages/teleport/src/Account/StatePill.tsx b/web/packages/teleport/src/Account/StatePill.tsx
index 406fa32b451b..9350724596fe 100644
--- a/web/packages/teleport/src/Account/StatePill.tsx
+++ b/web/packages/teleport/src/Account/StatePill.tsx
@@ -57,13 +57,13 @@ function statePillStyles({ state }: StatePillProps): ReturnType<typeof css> {
     case 'active':
       return css`
         background-color: ${props =>
-          props.theme.colors.interactive.tonal.success[0]};
+          props.theme.colors.interactive.tonal.success[0].background};
         color: ${props => props.theme.colors.success.main};
       `;
     case 'inactive':
       return css`
         background-color: ${props =>
-          props.theme.colors.interactive.tonal.neutral[0]};
+          props.theme.colors.interactive.tonal.neutral[0].background};
         color: ${props => props.theme.colors.text.disabled};
       `;
     default:
diff --git a/web/packages/teleport/src/Notifications/Notification.tsx b/web/packages/teleport/src/Notifications/Notification.tsx
index 4f87023aeb25..307bc5ce4c7a 100644
--- a/web/packages/teleport/src/Notifications/Notification.tsx
+++ b/web/packages/teleport/src/Notifications/Notification.tsx
@@ -289,17 +289,19 @@ const Container = styled.div<{ clicked?: boolean }>`
   border-radius: ${props => props.theme.radii[3]}px;
   cursor: pointer;
 
-  background: ${props => props.theme.colors.interactive.tonal.primary[0]};
+  background: ${props =>
+    props.theme.colors.interactive.tonal.primary[0].background};
   &:hover {
-    background: ${props => props.theme.colors.interactive.tonal.primary[1]};
+    background: ${props =>
+      props.theme.colors.interactive.tonal.primary[1].background};
   }
 
   ${props =>
     props.clicked &&
     `
-    background: ${props.theme.colors.interactive.tonal.neutral[0]};
+    background: ${props.theme.colors.interactive.tonal.neutral[0].background};
     &:hover {
-      background: ${props.theme.colors.interactive.tonal.neutral[1]};
+      background: ${props.theme.colors.interactive.tonal.neutral[1].background};
     }
     `}
 `;
@@ -350,27 +352,27 @@ function getIconColors(
     case 'success':
       return {
         primary: theme.colors.success.main,
-        secondary: theme.colors.interactive.tonal.success[0],
+        secondary: theme.colors.interactive.tonal.success[0].background,
       };
     case 'success-alt':
       return {
         primary: theme.colors.accent.main,
-        secondary: theme.colors.interactive.tonal.informational[0],
+        secondary: theme.colors.interactive.tonal.informational[0].background,
       };
     case 'informational':
       return {
         primary: theme.colors.brand,
-        secondary: theme.colors.interactive.tonal.primary[0],
+        secondary: theme.colors.interactive.tonal.primary[0].background,
       };
     case `warning`:
       return {
         primary: theme.colors.warning.main,
-        secondary: theme.colors.interactive.tonal.alert[0],
+        secondary: theme.colors.interactive.tonal.alert[0].background,
       };
     case 'failure':
       return {
         primary: theme.colors.error.main,
-        secondary: theme.colors.interactive.tonal.danger[0],
+        secondary: theme.colors.interactive.tonal.danger[0].background,
       };
   }
 }
diff --git a/web/packages/teleport/src/Notifications/Notifications.tsx b/web/packages/teleport/src/Notifications/Notifications.tsx
index d8838606afb1..cd4f14e86b4a 100644
--- a/web/packages/teleport/src/Notifications/Notifications.tsx
+++ b/web/packages/teleport/src/Notifications/Notifications.tsx
@@ -298,7 +298,7 @@ function Header({
           box-sizing: border-box;
           gap: 12px;
           border-bottom: 1px solid
-            ${p => p.theme.colors.interactive.tonal.neutral[2]};
+            ${p => p.theme.colors.interactive.tonal.neutral[2].background};
           padding-bottom: ${p => p.theme.space[3]}px;
           margin-bottom: ${p => p.theme.space[3]}px;
         `}
@@ -337,9 +337,11 @@ function EmptyState() {
           justify-content: center;
           height: 88px;
           width: 88px;
-          background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
+          background-color: ${p =>
+            p.theme.colors.interactive.tonal.neutral[0].background};
           border-radius: ${p => p.theme.radii[7]}px;
-          border: 1px solid ${p => p.theme.colors.interactive.tonal.neutral[1]};
+          border: 1px solid
+            ${p => p.theme.colors.interactive.tonal.neutral[1].background};
         `}
       >
         <BellRinging size={40} />
@@ -522,7 +524,8 @@ const NotificationsList = styled.div`
   padding-right: ${p => `${p.theme.space[3] - 8}px`};
 
   ::-webkit-scrollbar-thumb {
-    background-color: ${p => p.theme.colors.interactive.tonal.neutral[2]};
+    background-color: ${p =>
+      p.theme.colors.interactive.tonal.neutral[2].background};
     border-radius: ${p => p.theme.radii[2]}px;
     // Trick to make the scrollbar thumb 2px narrower than the track.
     border: 2px solid transparent;
@@ -533,7 +536,8 @@ const NotificationsList = styled.div`
     width: 8px;
     border-radius: ${p => p.theme.radii[2]}px;
     border-radius: ${p => p.theme.radii[2]}px;
-    background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
+    background-color: ${p =>
+      p.theme.colors.interactive.tonal.neutral[0].background};
   }
 
   .notification {
diff --git a/web/packages/teleport/src/TopBar/TopBar.tsx b/web/packages/teleport/src/TopBar/TopBar.tsx
index 707af5b4b7ca..f789fcabc275 100644
--- a/web/packages/teleport/src/TopBar/TopBar.tsx
+++ b/web/packages/teleport/src/TopBar/TopBar.tsx
@@ -261,7 +261,7 @@ const TeleportLogo = ({ CustomLogo }: TopBarProps) => {
           &:hover,
           &:focus-visible {
             background-color: ${p =>
-              p.theme.colors.interactive.tonal.primary[0]};
+              p.theme.colors.interactive.tonal.primary[0].background};
           }
           align-items: center;
         `}
@@ -312,7 +312,8 @@ const NavigationButton = ({
 }) => {
   const theme = useTheme();
   const selectedBorder = `2px solid ${theme.colors.brand}`;
-  const selectedBackground = theme.colors.interactive.tonal.neutral[0];
+  const selectedBackground =
+    theme.colors.interactive.tonal.neutral[0].background;
 
   return (
     <HoverTooltip
diff --git a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
index 976892c3ee67..314176e8659c 100644
--- a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
+++ b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
@@ -154,7 +154,7 @@ const Passwordless = ({
       <Flex
         flexDirection="column"
         border={1}
-        borderColor="interactive.tonal.neutral.2"
+        borderColor="interactive.tonal.neutral.2.background"
         borderRadius={3}
         p={3}
         gap={3}
diff --git a/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx b/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx
index 5c8a5a9cd5ba..80e57ab96c21 100644
--- a/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx
+++ b/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx
@@ -186,7 +186,7 @@ export function NewMfaDeviceForm({
             {mfaType?.value === 'webauthn' && (
               <Box
                 border={1}
-                borderColor="interactive.tonal.neutral.2"
+                borderColor="interactive.tonal.neutral.2.background"
                 borderRadius={3}
                 p={3}
               >
@@ -214,7 +214,7 @@ export function NewMfaDeviceForm({
             {mfaType?.value === 'otp' && (
               <Flex
                 border={1}
-                borderColor="interactive.tonal.neutral.2"
+                borderColor="interactive.tonal.neutral.2.background"
                 borderRadius={3}
                 p={3}
                 gap={3}
diff --git a/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx b/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx
index 73058170e926..10bbb4fb9810 100644
--- a/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx
+++ b/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx
@@ -25,7 +25,7 @@ export function PasskeyBlurb() {
   return (
     <Box
       border={1}
-      borderColor="interactive.tonal.neutral.2"
+      borderColor="interactive.tonal.neutral.2.background"
       borderRadius={3}
       p={3}
     >
diff --git a/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx b/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx
index fd98a28205c9..45687dbbf19c 100644
--- a/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx
+++ b/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx
@@ -43,7 +43,8 @@ const OverlappingChip = styled.span`
   display: inline-block;
   background: ${props => props.theme.colors.levels.surface};
   border: ${props => props.theme.borders[1]};
-  border-color: ${props => props.theme.colors.interactive.tonal.neutral[2]};
+  border-color: ${props =>
+    props.theme.colors.interactive.tonal.neutral[2].background};
   border-radius: 50%;
   margin-right: -6px;
 `;

From 76ad8efed10f77782e2e0a0325425599561f3155 Mon Sep 17 00:00:00 2001
From: Bartosz Leper <bartosz.leper@goteleport.com>
Date: Fri, 11 Oct 2024 14:38:02 +0200
Subject: [PATCH 2/2] Get rid of unnecessary text colors (#47458)

* wip

* wip

* Remove the background field

* Remove the type

* Post-merge fix
---
 web/packages/design/src/Checkbox/Checkbox.tsx |  8 +--
 .../design/src/MultiRowBox/MultiRowBox.tsx    |  4 +-
 web/packages/design/src/Toggle/Toggle.tsx     |  3 +-
 .../design/src/theme/themeColors.story.tsx    | 22 +++----
 .../design/src/theme/themes/bblpTheme.ts      | 66 +++++++++----------
 .../design/src/theme/themes/darkTheme.ts      | 66 +++++++++----------
 .../design/src/theme/themes/lightTheme.ts     | 66 +++++++++----------
 web/packages/design/src/theme/themes/types.ts | 23 +++----
 .../shared/getBackgroundColor.ts              |  6 +-
 web/packages/teleport/src/Account/Account.tsx |  2 +-
 web/packages/teleport/src/Account/Header.tsx  |  2 +-
 .../wizards/AddAuthDeviceWizard.tsx           |  2 +-
 .../teleport/src/Account/StatePill.tsx        |  4 +-
 .../src/Notifications/Notification.tsx        | 20 +++---
 .../src/Notifications/Notifications.tsx       | 14 ++--
 web/packages/teleport/src/TopBar/TopBar.tsx   |  5 +-
 .../src/components/FormLogin/FormLogin.tsx    |  2 +-
 .../NewMfaDeviceForm/NewMfaDeviceForm.tsx     |  4 +-
 .../src/components/Passkeys/PasskeyBlurb.tsx  |  2 +-
 .../src/components/Passkeys/PasskeyIcons.tsx  |  3 +-
 20 files changed, 148 insertions(+), 176 deletions(-)

diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
index ff525844ea16..fb6b5f458a3f 100644
--- a/web/packages/design/src/Checkbox/Checkbox.tsx
+++ b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -166,7 +166,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
     &:hover,
     .teleport-checkbox__force-hover & {
       background-color: ${props =>
-        props.theme.colors.interactive.tonal.neutral[0].background};
+        props.theme.colors.interactive.tonal.neutral[0]};
       border-color: ${props => props.theme.colors.text.slightlyMuted};
 
       &:checked {
@@ -182,7 +182,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
     &:focus-visible,
     .teleport-checkbox__force-focus-visible & {
       background-color: ${props =>
-        props.theme.colors.interactive.tonal.neutral[0].background};
+        props.theme.colors.interactive.tonal.neutral[0]};
       border-color: ${props => props.theme.colors.buttons.primary.default};
       outline: none;
       border-width: 2px;
@@ -200,7 +200,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
     &:active,
     .teleport-checkbox__force-active & {
       background-color: ${props =>
-        props.theme.colors.interactive.tonal.neutral[1].background};
+        props.theme.colors.interactive.tonal.neutral[1]};
       border-color: ${props => props.theme.colors.text.slightlyMuted};
 
       &:checked {
@@ -212,7 +212,7 @@ export const StyledCheckboxInternal = styled.input.attrs(props => ({
 
   &:disabled {
     background-color: ${props =>
-      props.theme.colors.interactive.tonal.neutral[0].background};
+      props.theme.colors.interactive.tonal.neutral[0]};
     border-color: transparent;
   }
 
diff --git a/web/packages/design/src/MultiRowBox/MultiRowBox.tsx b/web/packages/design/src/MultiRowBox/MultiRowBox.tsx
index f6783ab23e94..2ab551cdfde7 100644
--- a/web/packages/design/src/MultiRowBox/MultiRowBox.tsx
+++ b/web/packages/design/src/MultiRowBox/MultiRowBox.tsx
@@ -39,7 +39,7 @@ type MultiRowBoxProps = {
  */
 export const MultiRowBox = styled(Box)`
   border: ${props =>
-    `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2].background}`};
+    `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2]}`};
   border-radius: ${props => props.theme.radii[2]}px;
 `;
 
@@ -48,7 +48,7 @@ export const Row = styled(Box)`
   padding: ${props => props.theme.space[4]}px;
   &:not(:last-child) {
     border-bottom: ${props =>
-      `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2].background}`};
+      `${props.theme.borders[1]} ${props.theme.colors.interactive.tonal.neutral[2]}`};
   }
 `;
 
diff --git a/web/packages/design/src/Toggle/Toggle.tsx b/web/packages/design/src/Toggle/Toggle.tsx
index 125d6e86dc03..807322044aae 100644
--- a/web/packages/design/src/Toggle/Toggle.tsx
+++ b/web/packages/design/src/Toggle/Toggle.tsx
@@ -160,7 +160,6 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })<SizeProps>`
   }
 
   &:disabled:checked + ${StyledSlider} {
-    background: ${props =>
-      props.theme.colors.interactive.tonal.success[2].background};
+    background: ${props => props.theme.colors.interactive.tonal.success[2]};
   }
 `;
diff --git a/web/packages/design/src/theme/themeColors.story.tsx b/web/packages/design/src/theme/themeColors.story.tsx
index 71208d8386ac..ac67fe4ce925 100644
--- a/web/packages/design/src/theme/themeColors.story.tsx
+++ b/web/packages/design/src/theme/themeColors.story.tsx
@@ -71,16 +71,14 @@ const ColorsComponent = () => {
           {Object.entries(theme.colors.interactive.solid).map(
             ([intent, colorGroup]) => (
               <Flex gap={4}>
-                {Object.entries(colorGroup).map(
-                  ([state, { background, text }]) => (
-                    <SingleColorBox
-                      mb="2"
-                      path={`theme.colors.interactive.solid.${intent}.${state}`}
-                      bg={background}
-                      color={text}
-                    />
-                  )
-                )}
+                {Object.entries(colorGroup).map(([state, background]) => (
+                  <SingleColorBox
+                    mb="2"
+                    path={`theme.colors.interactive.solid.${intent}.${state}`}
+                    bg={background}
+                    color={theme.colors.text.primaryInverse}
+                  />
+                ))}
               </Flex>
             )
           )}
@@ -99,12 +97,12 @@ const ColorsComponent = () => {
           {Object.entries(theme.colors.interactive.tonal).map(
             ([intent, colorGroup]) => (
               <Flex gap={4}>
-                {colorGroup.map(({ background, text }, i) => (
+                {colorGroup.map((background, i) => (
                   <SingleColorBox
                     mb="2"
                     path={`theme.colors.interactive.tonal.${intent}[${i}]`}
                     bg={background}
-                    color={text}
+                    color={theme.colors.text.main}
                   />
                 ))}
               </Flex>
diff --git a/web/packages/design/src/theme/themes/bblpTheme.ts b/web/packages/design/src/theme/themes/bblpTheme.ts
index 49bff1570cb4..f381551625f3 100644
--- a/web/packages/design/src/theme/themes/bblpTheme.ts
+++ b/web/packages/design/src/theme/themes/bblpTheme.ts
@@ -93,64 +93,60 @@ const colors: ThemeColors = {
   interactive: {
     solid: {
       primary: {
-        default: { text: '#000000', background: '#FFA028' },
-        hover: { text: '#000000', background: '#FFB04C' },
-        active: { text: '#000000', background: '#DB8922' },
+        default: '#FFA028',
+        hover: '#FFB04C',
+        active: '#DB8922',
       },
       success: {
-        default: { text: '#000000', background: '#00A223' },
-        hover: { text: '#000000', background: '#35D655' },
-        active: { text: '#000000', background: '#00851C' },
+        default: '#00A223',
+        hover: '#35D655',
+        active: '#00851C',
       },
       accent: {
-        default: { text: '#000000', background: '#66ABFF' },
-        hover: { text: '#000000', background: '#99C7FF' },
-        active: { text: '#000000', background: '#2B8EFF' },
+        default: '#66ABFF',
+        hover: '#99C7FF',
+        active: '#2B8EFF',
       },
       danger: {
-        default: { text: '#FFFFFF', background: '#E51E3C' },
-        hover: { text: '#FFFFFF', background: '#FD2D4A' },
-        active: { text: '#FFFFFF', background: '#C31834' },
+        default: '#E51E3C',
+        hover: '#FD2D4A',
+        active: '#C31834',
       },
       alert: {
-        default: { text: '#000000', background: '#FA5A28' },
-        hover: { text: '#000000', background: '#FB754C' },
-        active: { text: '#000000', background: '#D64D22' },
+        default: '#FA5A28',
+        hover: '#FB754C',
+        active: '#D64D22',
       },
     },
 
     tonal: {
       primary: [
-        { text: '#FFB04C', background: 'rgba(255,160,40, 0.1)' },
-        { text: '#DB8922', background: 'rgba(255,160,40, 0.18)' },
-        { text: '#DB8922', background: 'rgba(255,160,40, 0.25)' },
+        'rgba(255,160,40, 0.1)',
+        'rgba(255,160,40, 0.18)',
+        'rgba(255,160,40, 0.25)',
       ],
       success: [
-        { text: '#35D655', background: 'rgba(0, 162, 35, 0.1)' },
-        { text: '#35D655', background: 'rgba(0, 162, 35, 0.18)' },
-        { text: '#00851C', background: 'rgba(0, 162, 35, 0.25)' },
+        'rgba(0, 162, 35, 0.1)',
+        'rgba(0, 162, 35, 0.18)',
+        'rgba(0, 162, 35, 0.25)',
       ],
       // TODO rudream: update bblp interactive tonal colors.
       danger: [
-        { text: '#FD2D4A', background: 'rgba(255, 98, 87, 0.1)' },
-        { text: '#FD2D4A', background: 'rgba(255, 98, 87, 0.18)' },
-        { text: '#C31834', background: 'rgba(255, 98, 87, 0.25)' },
+        'rgba(255, 98, 87, 0.1)',
+        'rgba(255, 98, 87, 0.18)',
+        'rgba(255, 98, 87, 0.25)',
       ],
       alert: [
-        { text: '#D64D22', background: 'rgba(255, 171, 0, 0.1)' },
-        { text: '#D64D22', background: 'rgba(255, 171, 0, 0.18)' },
-        { text: '#D64D22', background: 'rgba(255, 171, 0, 0.25)' },
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
       ],
       informational: [
-        { text: '#2B8EFF', background: 'rgba(0, 158, 255, 0.1)' },
-        { text: '#2B8EFF', background: 'rgba(0, 158, 255, 0.18)' },
-        { text: '#2B8EFF', background: 'rgba(0, 158, 255, 0.25)' },
-      ],
-      neutral: [
-        { text: '#FFFFFF', background: neutralColors[0] },
-        { text: '#FFFFFF', background: neutralColors[1] },
-        { text: '#FFFFFF', background: neutralColors[2] },
+        'rgba(0, 158, 255, 0.1)',
+        'rgba(0, 158, 255, 0.18)',
+        'rgba(0, 158, 255, 0.25)',
       ],
+      neutral: [neutralColors[0], neutralColors[1], neutralColors[2]],
     },
   },
 
diff --git a/web/packages/design/src/theme/themes/darkTheme.ts b/web/packages/design/src/theme/themes/darkTheme.ts
index 53d9602803ca..44fabcad730a 100644
--- a/web/packages/design/src/theme/themes/darkTheme.ts
+++ b/web/packages/design/src/theme/themes/darkTheme.ts
@@ -93,63 +93,59 @@ const colors: ThemeColors = {
   interactive: {
     solid: {
       primary: {
-        default: { text: '#000000', background: '#9F85FF' },
-        hover: { text: '#000000', background: '#B29DFF' },
-        active: { text: '#000000', background: '#C5B6FF' },
+        default: '#9F85FF',
+        hover: '#B29DFF',
+        active: '#C5B6FF',
       },
       success: {
-        default: { text: '#000000', background: '#00BFA6' },
-        hover: { text: '#000000', background: '#33CCB8' },
-        active: { text: '#000000', background: '#66D9CA' },
+        default: '#00BFA6',
+        hover: '#33CCB8',
+        active: '#66D9CA',
       },
       accent: {
-        default: { text: '#000000', background: '#009EFF' },
-        hover: { text: '#000000', background: '#33B1FF' },
-        active: { text: '#000000', background: '#66C5FF' },
+        default: '#009EFF',
+        hover: '#33B1FF',
+        active: '#66C5FF',
       },
       danger: {
-        default: { text: '#000000', background: '#FF6257' },
-        hover: { text: '#000000', background: '#FF8179' },
-        active: { text: '#000000', background: '#FFA19A' },
+        default: '#FF6257',
+        hover: '#FF8179',
+        active: '#FFA19A',
       },
       alert: {
-        default: { text: '#000000', background: '#FFAB00' },
-        hover: { text: '#000000', background: '#FFBC33' },
-        active: { text: '#000000', background: '#FFCD66' },
+        default: '#FFAB00',
+        hover: '#FFBC33',
+        active: '#FFCD66',
       },
     },
 
     tonal: {
       primary: [
-        { text: '#B29DFF', background: 'rgba(159,133,255, 0.1)' },
-        { text: '#C5B6FF', background: 'rgba(159,133,255, 0.18)' },
-        { text: '#C5B6FF', background: 'rgba(159,133,255, 0.25)' },
+        'rgba(159,133,255, 0.1)',
+        'rgba(159,133,255, 0.18)',
+        'rgba(159,133,255, 0.25)',
       ],
       success: [
-        { text: '#33CCB8', background: 'rgba(0, 191, 166, 0.1)' },
-        { text: '#33CCB8', background: 'rgba(0, 191, 166, 0.18)' },
-        { text: '#66D9CA', background: 'rgba(0, 191, 166, 0.25)' },
+        'rgba(0, 191, 166, 0.1)',
+        'rgba(0, 191, 166, 0.18)',
+        'rgba(0, 191, 166, 0.25)',
       ],
       danger: [
-        { text: '#FF8179', background: 'rgba(255, 98, 87, 0.1)' },
-        { text: '#FF8179', background: 'rgba(255, 98, 87, 0.18)' },
-        { text: '#FFA19A', background: 'rgba(255, 98, 87, 0.25)' },
+        'rgba(255, 98, 87, 0.1)',
+        'rgba(255, 98, 87, 0.18)',
+        'rgba(255, 98, 87, 0.25)',
       ],
       alert: [
-        { text: '#FFCD66', background: 'rgba(255, 171, 0, 0.1)' },
-        { text: '#FFCD66', background: 'rgba(255, 171, 0, 0.18)' },
-        { text: '#FFCD66', background: 'rgba(255, 171, 0, 0.25)' },
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
       ],
       informational: [
-        { text: '#66C5FF', background: 'rgba(0, 158, 255, 0.1)' },
-        { text: '#66C5FF', background: 'rgba(0, 158, 255, 0.18)' },
-        { text: '#66C5FF', background: 'rgba(0, 158, 255, 0.25)' },
-      ],
-      neutral: [
-        { text: '#FFFFFF', background: neutralColors[0] },
-        { text: '#FFFFFF', background: neutralColors[1] },
-        { text: '#FFFFFF', background: neutralColors[2] },
+        'rgba(0, 158, 255, 0.1)',
+        'rgba(0, 158, 255, 0.18)',
+        'rgba(0, 158, 255, 0.25)',
       ],
+      neutral: [neutralColors[0], neutralColors[1], neutralColors[2]],
     },
   },
 
diff --git a/web/packages/design/src/theme/themes/lightTheme.ts b/web/packages/design/src/theme/themes/lightTheme.ts
index e5095876f98c..eb5a670c7ddf 100644
--- a/web/packages/design/src/theme/themes/lightTheme.ts
+++ b/web/packages/design/src/theme/themes/lightTheme.ts
@@ -92,63 +92,59 @@ const colors: ThemeColors = {
   interactive: {
     solid: {
       primary: {
-        default: { text: '#FFFFFF', background: '#512FC9' },
-        hover: { text: '#FFFFFF', background: '#4126A1' },
-        active: { text: '#FFFFFF', background: '#311C79' },
+        default: '#512FC9',
+        hover: '#4126A1',
+        active: '#311C79',
       },
       success: {
-        default: { text: '#FFFFFF', background: '#007D6B' },
-        hover: { text: '#FFFFFF', background: '#006456' },
-        active: { text: '#FFFFFF', background: '#004B40' },
+        default: '#007D6B',
+        hover: '#006456',
+        active: '#004B40',
       },
       accent: {
-        default: { text: '#FFFFFF', background: '#0073BA' },
-        hover: { text: '#FFFFFF', background: '#005C95' },
-        active: { text: '#FFFFFF', background: '#004570' },
+        default: '#0073BA',
+        hover: '#005C95',
+        active: '#004570',
       },
       danger: {
-        default: { text: '#FFFFFF', background: '#CC372D' },
-        hover: { text: '#FFFFFF', background: '#A32C24' },
-        active: { text: '#FFFFFF', background: '#7A211B' },
+        default: '#CC372D',
+        hover: '#A32C24',
+        active: '#7A211B',
       },
       alert: {
-        default: { text: '#000000', background: '#FFAB00' },
-        hover: { text: '#000000', background: '#CC8900' },
-        active: { text: '#000000', background: '#996700' },
+        default: '#FFAB00',
+        hover: '#CC8900',
+        active: '#996700',
       },
     },
 
     tonal: {
       primary: [
-        { text: '#4126A1', background: 'rgba(81,47,201, 0.1)' },
-        { text: '#311C79', background: 'rgba(81,47,201, 0.18)' },
-        { text: '#311C79', background: 'rgba(81,47,201, 0.25)' },
+        'rgba(81,47,201, 0.1)',
+        'rgba(81,47,201, 0.18)',
+        'rgba(81,47,201, 0.25)',
       ],
       success: [
-        { text: '#006456', background: 'rgba(0, 125, 107, 0.1)' },
-        { text: '#006456', background: 'rgba(0, 125, 107, 0.18)' },
-        { text: '#004B40', background: 'rgba(0, 125, 107, 0.25)' },
+        'rgba(0, 125, 107, 0.1)',
+        'rgba(0, 125, 107, 0.18)',
+        'rgba(0, 125, 107, 0.25)',
       ],
       danger: [
-        { text: '#A32C24', background: 'rgba(204, 55, 45, 0.1)' },
-        { text: '#A32C24', background: 'rgba(204, 55, 45, 0.18)' },
-        { text: '#7A211B', background: 'rgba(204, 55, 45, 0.25)' },
+        'rgba(204, 55, 45, 0.1)',
+        'rgba(204, 55, 45, 0.18)',
+        'rgba(204, 55, 45, 0.25)',
       ],
       alert: [
-        { text: '#996700', background: 'rgba(255, 171, 0, 0.1)' },
-        { text: '#996700', background: 'rgba(255, 171, 0, 0.18)' },
-        { text: '#996700', background: 'rgba(255, 171, 0, 0.25)' },
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
       ],
       informational: [
-        { text: '#004570', background: 'rgba(0, 115, 186, 0.1)' },
-        { text: '#004570', background: 'rgba(0, 115, 186, 0.18)' },
-        { text: '#004570', background: 'rgba(0, 115, 186, 0.25)' },
-      ],
-      neutral: [
-        { text: '#000000', background: neutralColors[0] },
-        { text: '#000000', background: neutralColors[1] },
-        { text: '#000000', background: neutralColors[2] },
+        'rgba(0, 115, 186, 0.1)',
+        'rgba(0, 115, 186, 0.18)',
+        'rgba(0, 115, 186, 0.25)',
       ],
+      neutral: [neutralColors[0], neutralColors[1], neutralColors[2]],
     },
   },
 
diff --git a/web/packages/design/src/theme/themes/types.ts b/web/packages/design/src/theme/themes/types.ts
index cc3aac6bedd3..b0b59b43d081 100644
--- a/web/packages/design/src/theme/themes/types.ts
+++ b/web/packages/design/src/theme/themes/types.ts
@@ -20,15 +20,10 @@ import { fonts } from '../fonts';
 import { blueGrey } from '../palette';
 import typography, { fontSizes, fontWeights } from '../typography';
 
-type TextAndBackgroundColors = {
-  text: string;
-  background: string;
-};
-
 type InteractiveColorGroup = {
-  default: TextAndBackgroundColors;
-  hover: TextAndBackgroundColors;
-  active: TextAndBackgroundColors;
+  default: string;
+  hover: string;
+  active: string;
 };
 
 export type ThemeColors = {
@@ -74,12 +69,12 @@ export type ThemeColors = {
       alert: InteractiveColorGroup;
     };
     tonal: {
-      primary: TextAndBackgroundColors[];
-      neutral: TextAndBackgroundColors[];
-      success: TextAndBackgroundColors[];
-      danger: TextAndBackgroundColors[];
-      alert: TextAndBackgroundColors[];
-      informational: TextAndBackgroundColors[];
+      primary: string[];
+      neutral: string[];
+      success: string[];
+      danger: string[];
+      alert: string[];
+      informational: string[];
     };
   };
 
diff --git a/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts b/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts
index 07c3848f455f..5797395ed625 100644
--- a/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts
+++ b/web/packages/shared/components/UnifiedResources/shared/getBackgroundColor.ts
@@ -27,16 +27,16 @@ export interface BackgroundColorProps {
 
 export const getBackgroundColor = (props: BackgroundColorProps) => {
   if (props.requiresRequest && props.pinned) {
-    return props.theme.colors.interactive.tonal.primary[0].background;
+    return props.theme.colors.interactive.tonal.primary[0];
   }
   if (props.requiresRequest) {
     return props.theme.colors.spotBackground[0];
   }
   if (props.selected) {
-    return props.theme.colors.interactive.tonal.primary[2].background;
+    return props.theme.colors.interactive.tonal.primary[2];
   }
   if (props.pinned) {
-    return props.theme.colors.interactive.tonal.primary[1].background;
+    return props.theme.colors.interactive.tonal.primary[1];
   }
   return 'transparent';
 };
diff --git a/web/packages/teleport/src/Account/Account.tsx b/web/packages/teleport/src/Account/Account.tsx
index 7690d6e4f1dc..2dbe2a2e8e2b 100644
--- a/web/packages/teleport/src/Account/Account.tsx
+++ b/web/packages/teleport/src/Account/Account.tsx
@@ -348,7 +348,7 @@ function PasskeysHeader({
     return (
       <Flex flexDirection="column" alignItems="center">
         <Box
-          bg={theme.colors.interactive.tonal.neutral[0].background}
+          bg={theme.colors.interactive.tonal.neutral[0]}
           lineHeight={0}
           p={2}
           borderRadius={3}
diff --git a/web/packages/teleport/src/Account/Header.tsx b/web/packages/teleport/src/Account/Header.tsx
index 307b23fea666..3df0ec84cdea 100644
--- a/web/packages/teleport/src/Account/Header.tsx
+++ b/web/packages/teleport/src/Account/Header.tsx
@@ -48,7 +48,7 @@ export function Header({
       {/* lineHeight=0 prevents the icon background from being larger than
           required by the icon itself. */}
       <Box
-        bg={theme.colors.interactive.tonal.neutral[0].background}
+        bg={theme.colors.interactive.tonal.neutral[0]}
         lineHeight={0}
         p={2}
         borderRadius={3}
diff --git a/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx b/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
index da677293058c..a3c6838ab960 100644
--- a/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/wizards/AddAuthDeviceWizard.tsx
@@ -276,7 +276,7 @@ function QrCodeBox({ privilegeToken }: { privilegeToken: string }) {
       gap={4}
       p={4}
       mb={4}
-      bg="interactive.tonal.neutral.0.background"
+      bg="interactive.tonal.neutral.0"
     >
       <Flex height="168px" justifyContent="center" alignItems="center">
         {fetchQrCodeAttempt.status === 'error' && (
diff --git a/web/packages/teleport/src/Account/StatePill.tsx b/web/packages/teleport/src/Account/StatePill.tsx
index 9350724596fe..406fa32b451b 100644
--- a/web/packages/teleport/src/Account/StatePill.tsx
+++ b/web/packages/teleport/src/Account/StatePill.tsx
@@ -57,13 +57,13 @@ function statePillStyles({ state }: StatePillProps): ReturnType<typeof css> {
     case 'active':
       return css`
         background-color: ${props =>
-          props.theme.colors.interactive.tonal.success[0].background};
+          props.theme.colors.interactive.tonal.success[0]};
         color: ${props => props.theme.colors.success.main};
       `;
     case 'inactive':
       return css`
         background-color: ${props =>
-          props.theme.colors.interactive.tonal.neutral[0].background};
+          props.theme.colors.interactive.tonal.neutral[0]};
         color: ${props => props.theme.colors.text.disabled};
       `;
     default:
diff --git a/web/packages/teleport/src/Notifications/Notification.tsx b/web/packages/teleport/src/Notifications/Notification.tsx
index 307bc5ce4c7a..4f87023aeb25 100644
--- a/web/packages/teleport/src/Notifications/Notification.tsx
+++ b/web/packages/teleport/src/Notifications/Notification.tsx
@@ -289,19 +289,17 @@ const Container = styled.div<{ clicked?: boolean }>`
   border-radius: ${props => props.theme.radii[3]}px;
   cursor: pointer;
 
-  background: ${props =>
-    props.theme.colors.interactive.tonal.primary[0].background};
+  background: ${props => props.theme.colors.interactive.tonal.primary[0]};
   &:hover {
-    background: ${props =>
-      props.theme.colors.interactive.tonal.primary[1].background};
+    background: ${props => props.theme.colors.interactive.tonal.primary[1]};
   }
 
   ${props =>
     props.clicked &&
     `
-    background: ${props.theme.colors.interactive.tonal.neutral[0].background};
+    background: ${props.theme.colors.interactive.tonal.neutral[0]};
     &:hover {
-      background: ${props.theme.colors.interactive.tonal.neutral[1].background};
+      background: ${props.theme.colors.interactive.tonal.neutral[1]};
     }
     `}
 `;
@@ -352,27 +350,27 @@ function getIconColors(
     case 'success':
       return {
         primary: theme.colors.success.main,
-        secondary: theme.colors.interactive.tonal.success[0].background,
+        secondary: theme.colors.interactive.tonal.success[0],
       };
     case 'success-alt':
       return {
         primary: theme.colors.accent.main,
-        secondary: theme.colors.interactive.tonal.informational[0].background,
+        secondary: theme.colors.interactive.tonal.informational[0],
       };
     case 'informational':
       return {
         primary: theme.colors.brand,
-        secondary: theme.colors.interactive.tonal.primary[0].background,
+        secondary: theme.colors.interactive.tonal.primary[0],
       };
     case `warning`:
       return {
         primary: theme.colors.warning.main,
-        secondary: theme.colors.interactive.tonal.alert[0].background,
+        secondary: theme.colors.interactive.tonal.alert[0],
       };
     case 'failure':
       return {
         primary: theme.colors.error.main,
-        secondary: theme.colors.interactive.tonal.danger[0].background,
+        secondary: theme.colors.interactive.tonal.danger[0],
       };
   }
 }
diff --git a/web/packages/teleport/src/Notifications/Notifications.tsx b/web/packages/teleport/src/Notifications/Notifications.tsx
index cd4f14e86b4a..d8838606afb1 100644
--- a/web/packages/teleport/src/Notifications/Notifications.tsx
+++ b/web/packages/teleport/src/Notifications/Notifications.tsx
@@ -298,7 +298,7 @@ function Header({
           box-sizing: border-box;
           gap: 12px;
           border-bottom: 1px solid
-            ${p => p.theme.colors.interactive.tonal.neutral[2].background};
+            ${p => p.theme.colors.interactive.tonal.neutral[2]};
           padding-bottom: ${p => p.theme.space[3]}px;
           margin-bottom: ${p => p.theme.space[3]}px;
         `}
@@ -337,11 +337,9 @@ function EmptyState() {
           justify-content: center;
           height: 88px;
           width: 88px;
-          background-color: ${p =>
-            p.theme.colors.interactive.tonal.neutral[0].background};
+          background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
           border-radius: ${p => p.theme.radii[7]}px;
-          border: 1px solid
-            ${p => p.theme.colors.interactive.tonal.neutral[1].background};
+          border: 1px solid ${p => p.theme.colors.interactive.tonal.neutral[1]};
         `}
       >
         <BellRinging size={40} />
@@ -524,8 +522,7 @@ const NotificationsList = styled.div`
   padding-right: ${p => `${p.theme.space[3] - 8}px`};
 
   ::-webkit-scrollbar-thumb {
-    background-color: ${p =>
-      p.theme.colors.interactive.tonal.neutral[2].background};
+    background-color: ${p => p.theme.colors.interactive.tonal.neutral[2]};
     border-radius: ${p => p.theme.radii[2]}px;
     // Trick to make the scrollbar thumb 2px narrower than the track.
     border: 2px solid transparent;
@@ -536,8 +533,7 @@ const NotificationsList = styled.div`
     width: 8px;
     border-radius: ${p => p.theme.radii[2]}px;
     border-radius: ${p => p.theme.radii[2]}px;
-    background-color: ${p =>
-      p.theme.colors.interactive.tonal.neutral[0].background};
+    background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
   }
 
   .notification {
diff --git a/web/packages/teleport/src/TopBar/TopBar.tsx b/web/packages/teleport/src/TopBar/TopBar.tsx
index f789fcabc275..707af5b4b7ca 100644
--- a/web/packages/teleport/src/TopBar/TopBar.tsx
+++ b/web/packages/teleport/src/TopBar/TopBar.tsx
@@ -261,7 +261,7 @@ const TeleportLogo = ({ CustomLogo }: TopBarProps) => {
           &:hover,
           &:focus-visible {
             background-color: ${p =>
-              p.theme.colors.interactive.tonal.primary[0].background};
+              p.theme.colors.interactive.tonal.primary[0]};
           }
           align-items: center;
         `}
@@ -312,8 +312,7 @@ const NavigationButton = ({
 }) => {
   const theme = useTheme();
   const selectedBorder = `2px solid ${theme.colors.brand}`;
-  const selectedBackground =
-    theme.colors.interactive.tonal.neutral[0].background;
+  const selectedBackground = theme.colors.interactive.tonal.neutral[0];
 
   return (
     <HoverTooltip
diff --git a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
index 314176e8659c..976892c3ee67 100644
--- a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
+++ b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
@@ -154,7 +154,7 @@ const Passwordless = ({
       <Flex
         flexDirection="column"
         border={1}
-        borderColor="interactive.tonal.neutral.2.background"
+        borderColor="interactive.tonal.neutral.2"
         borderRadius={3}
         p={3}
         gap={3}
diff --git a/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx b/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx
index 80e57ab96c21..5c8a5a9cd5ba 100644
--- a/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx
+++ b/web/packages/teleport/src/components/NewMfaDeviceForm/NewMfaDeviceForm.tsx
@@ -186,7 +186,7 @@ export function NewMfaDeviceForm({
             {mfaType?.value === 'webauthn' && (
               <Box
                 border={1}
-                borderColor="interactive.tonal.neutral.2.background"
+                borderColor="interactive.tonal.neutral.2"
                 borderRadius={3}
                 p={3}
               >
@@ -214,7 +214,7 @@ export function NewMfaDeviceForm({
             {mfaType?.value === 'otp' && (
               <Flex
                 border={1}
-                borderColor="interactive.tonal.neutral.2.background"
+                borderColor="interactive.tonal.neutral.2"
                 borderRadius={3}
                 p={3}
                 gap={3}
diff --git a/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx b/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx
index 10bbb4fb9810..73058170e926 100644
--- a/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx
+++ b/web/packages/teleport/src/components/Passkeys/PasskeyBlurb.tsx
@@ -25,7 +25,7 @@ export function PasskeyBlurb() {
   return (
     <Box
       border={1}
-      borderColor="interactive.tonal.neutral.2.background"
+      borderColor="interactive.tonal.neutral.2"
       borderRadius={3}
       p={3}
     >
diff --git a/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx b/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx
index 45687dbbf19c..fd98a28205c9 100644
--- a/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx
+++ b/web/packages/teleport/src/components/Passkeys/PasskeyIcons.tsx
@@ -43,8 +43,7 @@ const OverlappingChip = styled.span`
   display: inline-block;
   background: ${props => props.theme.colors.levels.surface};
   border: ${props => props.theme.borders[1]};
-  border-color: ${props =>
-    props.theme.colors.interactive.tonal.neutral[2].background};
+  border-color: ${props => props.theme.colors.interactive.tonal.neutral[2]};
   border-radius: 50%;
   margin-right: -6px;
 `;