diff --git a/polaris-react/src/components/TopBar/TopBar.tsx b/polaris-react/src/components/TopBar/TopBar.tsx
index 45de446e761..a918714bc99 100644
--- a/polaris-react/src/components/TopBar/TopBar.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.tsx
@@ -10,9 +10,10 @@ import {Icon} from '../Icon';
 import {Image} from '../Image';
 import {UnstyledLink} from '../UnstyledLink';
 
-import {SearchField, UserMenu, Search, Menu} from './components';
+import {SearchField, UserMenu, Search, Menu, TopBarButton} from './components';
 import type {SearchFieldProps, UserMenuProps, SearchProps} from './components';
 import styles from './TopBar.module.scss';
+import {ThemeProvider} from '../ThemeProvider';
 
 export type {UserMenuProps, SearchFieldProps};
 
@@ -50,6 +51,7 @@ export const TopBar: React.FunctionComponent<TopBarProps> & {
   Menu: typeof Menu;
   SearchField: typeof SearchField;
   UserMenu: typeof UserMenu;
+  Button: typeof TopBarButton;
 } = function TopBar({
   showNavigationToggle,
   userMenu,
@@ -141,22 +143,25 @@ export const TopBar: React.FunctionComponent<TopBarProps> & {
   ) : null;
 
   return (
-    <div className={styles.TopBar}>
-      <div className={styles.Container}>
-        <div className={styles.LeftContent}>
-          {navigationButtonMarkup}
-          {contextMarkup}
-        </div>
-        <div className={styles.Search}>{searchMarkup}</div>
-        <div className={styles.RightContent}>
-          <div className={styles.SecondaryMenu}>{secondaryMenu}</div>
-          {userMenu}
+    <ThemeProvider theme="dark">
+      <div className={styles.TopBar}>
+        <div className={styles.Container}>
+          <div className={styles.LeftContent}>
+            {navigationButtonMarkup}
+            {contextMarkup}
+          </div>
+          <div className={styles.Search}>{searchMarkup}</div>
+          <div className={styles.RightContent}>
+            <div className={styles.SecondaryMenu}>{secondaryMenu}</div>
+            {userMenu}
+          </div>
         </div>
       </div>
-    </div>
+    </ThemeProvider>
   );
 };
 
 TopBar.Menu = Menu;
 TopBar.SearchField = SearchField;
 TopBar.UserMenu = UserMenu;
+TopBar.Button = TopBarButton;
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss
index d65a2015e22..189bd344ee3 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss
@@ -36,11 +36,6 @@ $activator-variables: (
   border-radius: var(--p-border-radius-200);
   background-color: var(--p-color-bg-fill-inverse);
 
-  // stylelint-disable-next-line scss/selector-no-union-class-name -- set user menu padding
-  &-userMenu {
-    padding: var(--p-space-050);
-  }
-
   &:focus {
     background-color: var(--p-color-bg-fill-inverse-hover);
     outline: none;
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx
index aa0adb4c65a..06afc229a07 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx
@@ -9,6 +9,7 @@ import {classNames} from '../../../../utilities/css';
 import {Message} from './components';
 import type {MessageProps} from './components';
 import styles from './Menu.module.scss';
+import {TopBarButton} from '../TopBarButton';
 
 export interface MenuProps {
   /** Accepts an activator component that renders inside of a button that opens the menu */
@@ -43,7 +44,6 @@ export function Menu(props: MenuProps) {
     message,
     accessibilityLabel,
     customWidth,
-    userMenu,
   } = props;
 
   const badgeProps = message &&
@@ -69,17 +69,14 @@ export function Menu(props: MenuProps) {
     <Popover
       activator={
         <div className={styles.ActivatorWrapper}>
-          <button
+          <TopBarButton
             type="button"
-            className={classNames(
-              styles.Activator,
-              userMenu && styles['Activator-userMenu'],
-            )}
+            className={classNames(styles.Activator)}
             onClick={onOpen}
             aria-label={accessibilityLabel}
           >
             {activatorContent}
-          </button>
+          </TopBarButton>
         </div>
       }
       active={open}
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.module.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.module.scss
index c56a739f4e7..3a3d5bb37d4 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.module.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.module.scss
@@ -2,7 +2,7 @@
 @import '../../variables';
 
 $icon-size: 18px;
-$new-input-height: 32px;
+$new-input-height: 36px;
 $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
 
 .SearchField {
@@ -86,23 +86,39 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   height: $new-input-height;
   width: 100%;
   padding: 0 $search-icon-width 0 $search-icon-width;
-  border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
-  border-radius: var(--p-border-radius-200);
-  background-color: transparent;
   outline: none;
   color: var(--p-color-text-inverse-secondary);
   will-change: fill, color;
   transition: fill var(--p-motion-duration-200) var(--p-motion-ease),
     color var(--p-motion-duration-200) var(--p-motion-ease);
 
-  &:hover {
-    border-color: var(--p-color-border-inverse-hover);
+  @include border-gradient(
+    var(--p-color-bg-surface),
+    var(--p-color-border-gradient),
+    var(--p-border-radius-300)
+  );
+
+  // stylelint-disable-next-line selector-max-specificity -- don't hover on active states
+  &:hover:not(:focus-visible):not(:active) {
+    @include update-border-gradient-colors(
+      var(--p-color-bg-surface-hover),
+      var(--p-color-border-gradient-hover)
+    );
+  }
+
+  // stylelint-disable-next-line no-duplicate-selectors -- border override
+  &:focus-visible {
+    @include update-border-gradient-colors(
+      var(--p-color-bg-surface-active),
+      var(--p-color-border-gradient-active)
+    );
   }
 
-  &:active,
-  &:focus {
-    box-shadow: inset 0 0 0 var(--p-border-width-025)
-      var(--p-color-border-inverse-active);
+  &:active {
+    @include update-border-gradient-colors(
+      var(--p-color-bg-surface-selected),
+      var(--p-color-border-gradient-selected)
+    );
   }
 
   &::placeholder {
@@ -185,5 +201,5 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-300));
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg-surface-inverse);
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-300);
 }
diff --git a/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.module.scss b/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.module.scss
new file mode 100644
index 00000000000..fa2fff33d52
--- /dev/null
+++ b/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.module.scss
@@ -0,0 +1,52 @@
+@import '../../../../styles/common';
+
+.TopBarButton {
+  color: var(--p-color-text);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--p-height-900);
+  min-width: var(--p-height-900);
+  padding: var(--p-space-200);
+  cursor: pointer;
+
+  @include border-gradient(
+    var(--p-color-bg-fill),
+    var(--p-color-border-gradient),
+    var(--p-border-radius-300)
+  );
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    @include no-focus-ring;
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+    outline-offset: var(--p-space-050);
+  }
+
+  &:hover {
+    @include update-border-gradient-colors(
+      var(--p-color-bg-fill-hover),
+      var(--p-color-border-gradient-hover)
+    );
+  }
+
+  &:active,
+  &[aria-expanded='true'] {
+    @include update-border-gradient-colors(
+      var(--p-color-bg-fill-active),
+      var(--p-color-border-gradient-active)
+    );
+  }
+
+  &:active {
+    @include update-border-gradient-colors(
+      var(--p-color-bg-fill-selected),
+      var(--p-color-border-gradient-selected)
+    );
+  }
+}
diff --git a/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.tsx b/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.tsx
new file mode 100644
index 00000000000..78aa451d698
--- /dev/null
+++ b/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.tsx
@@ -0,0 +1,19 @@
+import React, {ButtonHTMLAttributes} from 'react';
+import styles from './TopBarButton.module.scss';
+import {classNames} from '../../../../utilities/css';
+
+export function TopBarButton({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={classNames(className, styles.TopBarButton)}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/polaris-react/src/components/TopBar/components/TopBarButton/index.ts b/polaris-react/src/components/TopBar/components/TopBarButton/index.ts
new file mode 100644
index 00000000000..a676ed0ccd2
--- /dev/null
+++ b/polaris-react/src/components/TopBar/components/TopBarButton/index.ts
@@ -0,0 +1 @@
+export * from './TopBarButton';
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss
index 135a3ae7d7c..f18a5ba1b41 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss
@@ -3,8 +3,7 @@
 .Details {
   max-width: 160px;
   margin-right: 0;
-  // stylelint-disable-next-line polaris/space/declaration-property-unit-disallowed-list -- set padding
-  padding: 0 var(--p-space-200) 0 10px;
+  padding-right: var(--p-space-200);
 
   > p {
     font-size: var(--p-font-size-300);
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 994df0e88ea..744682aaf18 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
@@ -9,6 +9,7 @@ import type {MenuProps} from '../Menu';
 import {Text} from '../../../Text';
 
 import styles from './UserMenu.module.scss';
+import {Bleed} from '../../../Bleed';
 
 export interface UserMenuProps {
   /** An array of action objects that are rendered inside of a popover triggered by this menu */
@@ -70,14 +71,16 @@ export function UserMenu({
           </Text>
         </span>
       </span>
-      <MessageIndicator active={showIndicator}>
-        <Avatar
-          size="md"
-          initials={initials && initials.replace(' ', '')}
-          source={avatar}
-          name={name}
-        />
-      </MessageIndicator>
+      <Bleed marginInlineEnd={{xs: '0', md: '100'}}>
+        <MessageIndicator active={showIndicator}>
+          <Avatar
+            size="md"
+            initials={initials && initials.replace(' ', '')}
+            source={avatar}
+            name={name}
+          />
+        </MessageIndicator>
+      </Bleed>
     </>
   );
 
diff --git a/polaris-react/src/components/TopBar/components/index.ts b/polaris-react/src/components/TopBar/components/index.ts
index d4e058d3688..e892dc04a4d 100644
--- a/polaris-react/src/components/TopBar/components/index.ts
+++ b/polaris-react/src/components/TopBar/components/index.ts
@@ -7,3 +7,5 @@ export * from './SearchDismissOverlay';
 export * from './UserMenu';
 
 export * from './Menu';
+
+export * from './TopBarButton';
diff --git a/polaris-react/src/styles/_common.scss b/polaris-react/src/styles/_common.scss
index f34f331e5fe..e2edf4a22f0 100644
--- a/polaris-react/src/styles/_common.scss
+++ b/polaris-react/src/styles/_common.scss
@@ -7,6 +7,7 @@
 @import './foundation/layout';
 @import './foundation/focus-ring';
 @import './foundation/shadow-bevel';
+@import './foundation/border-gradient';
 
 @import './shared/accessibility';
 @import './shared/buttons';
diff --git a/polaris-react/src/styles/foundation/_border-gradient.scss b/polaris-react/src/styles/foundation/_border-gradient.scss
new file mode 100644
index 00000000000..8dc4791ccba
--- /dev/null
+++ b/polaris-react/src/styles/foundation/_border-gradient.scss
@@ -0,0 +1,29 @@
+/// Applies a border-gradient effect to an element.
+/// @param $backgroundColor - Color of element inside the border. Transparent colors are not supported.
+/// @param $borderGradientColor - Color gradient to use for the border
+/// @param $borderRadius - Polaris BorderRadiusScale custom property.
+@mixin border-gradient(
+  $backgroundColor: null,
+  $borderGradientColor: null,
+  $borderRadius: null
+) {
+  border-radius: $borderRadius;
+  border: solid var(--p-border-width-025) transparent;
+  background-color: $backgroundColor;
+  background-image: linear-gradient($backgroundColor, $backgroundColor),
+    $borderGradientColor;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+
+/// Override border gradient colors after setting base border-gradient.
+/// This can be used on element state changes like on hover.
+/// @param $backgroundColor - Color of element inside the border
+/// @param $borderGradientColor - Color gradient to use for the border
+@mixin update-border-gradient-colors(
+  $backgroundColor: null,
+  $borderGradientColor: null
+) {
+  background-image: linear-gradient($backgroundColor, $backgroundColor),
+    $borderGradientColor;
+}
diff --git a/polaris-tokens/src/colors.ts b/polaris-tokens/src/colors.ts
index 44458fb20d3..a49def42faf 100644
--- a/polaris-tokens/src/colors.ts
+++ b/polaris-tokens/src/colors.ts
@@ -289,3 +289,22 @@ export const blackAlpha: ColorAlpha = {
   15: 'rgba(0, 0, 0, 0.81)',
   16: 'rgba(0, 0, 0, 0.90)',
 };
+
+export const whiteAlpha: ColorAlpha = {
+  1: 'rgba(255, 255, 255, 0)',
+  2: 'rgba(255, 255, 255, 0.01)',
+  3: 'rgba(255, 255, 255, 0.02)',
+  4: 'rgba(255, 255, 255, 0.03)',
+  5: 'rgba(255, 255, 255, 0.05)',
+  6: 'rgba(255, 255, 255, 0.06)',
+  7: 'rgba(255, 255, 255, 0.08)',
+  8: 'rgba(255, 255, 255, 0.11)',
+  9: 'rgba(255, 255, 255, 0.17)',
+  10: 'rgba(255, 255, 255, 0.20)',
+  11: 'rgba(255, 255, 255, 0.28)',
+  12: 'rgba(255, 255, 255, 0.46)',
+  13: 'rgba(255, 255, 255, 0.62)',
+  14: 'rgba(255, 255, 255, 0.71)',
+  15: 'rgba(255, 255, 255, 0.81)',
+  16: 'rgba(255, 255, 255, 0.90)',
+};
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
index ba80f1ef496..76d59237b45 100644
--- a/polaris-tokens/src/themes/base/color.ts
+++ b/polaris-tokens/src/themes/base/color.ts
@@ -148,7 +148,11 @@ export type ColorBorderAlias =
   /** Specialty and component border colors. */
   | 'input-border-active'
   | 'input-border-hover'
-  | 'input-border';
+  | 'input-border'
+  | 'border-gradient'
+  | 'border-gradient-hover'
+  | 'border-gradient-selected'
+  | 'border-gradient-active';
 
 export type ColorIconAlias =
   | 'icon-active'
@@ -1006,6 +1010,19 @@ export const color: {
     description:
       'The active state (on press) color for borders on an inverse background.',
   },
+  // to do: get light theme border gradient colors
+  'color-border-gradient': {
+    value: `linear-gradient(to bottom, ${colors.blackAlpha[7]}, ${colors.blackAlpha[11]})`,
+  },
+  'color-border-gradient-hover': {
+    value: `linear-gradient(to bottom, ${colors.blackAlpha[11]}, ${colors.blackAlpha[7]})`,
+  },
+  'color-border-gradient-selected': {
+    value: `linear-gradient(to bottom, ${colors.blackAlpha[11]}, ${colors.blackAlpha[11]})`,
+  },
+  'color-border-gradient-active': {
+    value: `linear-gradient(to bottom, ${colors.blackAlpha[12]}, ${colors.blackAlpha[8]})`,
+  },
   'color-icon': {
     value: colors.gray[14],
     description: 'The default color for icons.',
diff --git a/polaris-tokens/src/themes/dark.ts b/polaris-tokens/src/themes/dark.ts
index 87ffd55e844..76a77e706bf 100644
--- a/polaris-tokens/src/themes/dark.ts
+++ b/polaris-tokens/src/themes/dark.ts
@@ -4,236 +4,45 @@ import {createMetaTheme, createMetaThemePartial} from './utils';
 
 export const metaThemeDarkPartial = createMetaThemePartial({
   color: {
+    // todo
     'color-bg': {value: colors.gray[16]},
+    // from figma
     'color-bg-surface': {value: colors.gray[15]},
-    'color-bg-fill-disabled': {value: colors.gray[15]},
-    'color-bg-fill-secondary': {value: colors.gray[13]},
-    'color-text': {value: colors.gray[3]},
-    'color-text-secondary': {value: colors.gray[6]},
-    'color-text-disabled': {value: colors.gray[13]},
-    'color-text-brand': {value: colors.blue[14]},
-    'color-icon': {value: colors.gray[11]},
-    'color-icon-disabled': {value: colors.gray[13]},
-    'color-bg-inverse': {value: 'rgba(255, 255, 255, 1)'},
-    'color-bg-surface-hover': {value: 'rgba(48, 48, 48, 1)'},
-    'color-bg-surface-active': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-surface-selected': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-surface-disabled': {value: 'rgba(255, 255, 255, 0.06)'},
-    'color-bg-surface-secondary': {value: 'rgba(48, 48, 48, 1)'},
-    'color-bg-surface-secondary-hover': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-surface-secondary-active': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-surface-secondary-selected': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-surface-tertiary': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-surface-tertiary-hover': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-surface-tertiary-active': {value: 'rgba(138, 138, 138, 1)'},
-    'color-bg-surface-brand': {value: 'rgba(212, 212, 212, 1)'},
-    'color-bg-surface-brand-hover': {value: 'rgba(227, 227, 227, 1)'},
-    'color-bg-surface-brand-active': {value: 'rgba(235, 235, 235, 1)'},
-    'color-bg-surface-brand-selected': {value: 'rgba(241, 241, 241, 1)'},
-    'color-bg-surface-info': {value: 'rgba(0, 82, 124, 1)'},
-    'color-bg-surface-info-hover': {value: 'rgba(0, 103, 155, 1)'},
-    'color-bg-surface-info-active': {value: 'rgba(0, 148, 213, 1)'},
-    'color-bg-surface-success': {value: 'rgba(12, 81, 50, 1)'},
-    'color-bg-surface-success-hover': {value: 'rgba(19, 111, 69, 1)'},
-    'color-bg-surface-success-active': {value: 'rgba(41, 132, 90, 1)'},
-    'color-bg-surface-caution': {value: 'rgba(51, 46, 0, 1)'},
-    'color-bg-surface-caution-hover': {value: 'rgba(79, 71, 0, 1)'},
-    'color-bg-surface-caution-active': {value: 'rgba(105, 95, 0, 1)'},
-    'color-bg-surface-warning': {value: 'rgba(94, 66, 0, 1)'},
-    'color-bg-surface-warning-hover': {value: 'rgba(124, 88, 0, 1)'},
-    'color-bg-surface-warning-active': {value: 'rgba(149, 111, 0, 1)'},
-    'color-bg-surface-critical': {value: 'rgba(181, 38, 11, 1)'},
-    'color-bg-surface-critical-hover': {value: 'rgba(229, 28, 0, 1)'},
-    'color-bg-surface-critical-active': {value: 'rgba(239, 77, 47, 1)'},
-    'color-bg-surface-emphasis': {value: 'rgba(0, 66, 153, 1)'},
-    'color-bg-surface-emphasis-hover': {value: 'rgba(0, 91, 211, 1)'},
-    'color-bg-surface-emphasis-active': {value: 'rgba(0, 113, 233, 1)'},
-    'color-bg-surface-magic': {value: 'rgba(28, 0, 79, 1)'},
-    'color-bg-surface-magic-hover': {value: 'rgba(59, 0, 147, 1)'},
-    'color-bg-surface-magic-active': {value: 'rgba(87, 0, 209, 1)'},
-    'color-bg-surface-inverse': {value: 'rgba(253, 253, 253, 1)'},
-    'color-bg-surface-transparent': {value: 'rgba(255, 255, 255, 0.02)'},
-    'color-bg-fill': {value: 'rgba(48, 48, 48, 1)'},
-    'color-bg-fill-hover': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-fill-active': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-selected': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-secondary-hover': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-fill-secondary-active': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-tertiary': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-fill-tertiary-hover': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-tertiary-active': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-brand': {value: 'rgba(48, 48, 48, 1)'},
-    'color-bg-fill-brand-hover': {value: 'rgba(74, 74, 74, 1)'},
-    'color-bg-fill-brand-active': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-brand-selected': {value: 'rgba(97, 97, 97, 1)'},
-    'color-bg-fill-brand-disabled': {value: 'rgba(0, 0, 0, 0.17)'},
-    'color-bg-fill-info': {value: 'rgba(168, 216, 255, 1)'},
-    'color-bg-fill-info-hover': {value: 'rgba(192, 225, 255, 1)'},
-    'color-bg-fill-info-active': {value: 'rgba(202, 230, 255, 1)'},
-    'color-bg-fill-info-secondary': {value: 'rgba(213, 235, 255, 1)'},
-    'color-bg-fill-success': {value: 'rgba(146, 254, 194, 1)'},
-    'color-bg-fill-success-hover': {value: 'rgba(180, 254, 210, 1)'},
-    'color-bg-fill-success-active': {value: 'rgba(205, 254, 225, 1)'},
-    'color-bg-fill-success-secondary': {value: 'rgba(19, 111, 69, 1)'},
-    'color-bg-fill-warning': {value: 'rgba(255, 200, 121, 1)'},
-    'color-bg-fill-warning-hover': {value: 'rgba(255, 214, 164, 1)'},
-    'color-bg-fill-warning-active': {value: 'rgba(255, 221, 182, 1)'},
-    'color-bg-fill-warning-secondary': {value: 'rgba(229, 165, 0, 1)'},
-    'color-bg-fill-caution': {value: 'rgba(153, 138, 0, 1)'},
-    'color-bg-fill-caution-hover': {value: 'rgba(197, 178, 0, 1)'},
-    'color-bg-fill-caution-active': {value: 'rgba(225, 203, 0, 1)'},
-    'color-bg-fill-caution-secondary': {value: 'rgba(225, 203, 0, 1)'},
-    'color-bg-fill-critical': {value: 'rgba(254, 226, 225, 1)'},
-    'color-bg-fill-critical-hover': {value: 'rgba(254, 233, 232, 1)'},
-    'color-bg-fill-critical-active': {value: 'rgba(255, 237, 236, 1)'},
-    'color-bg-fill-critical-selected': {value: 'rgba(255, 237, 236, 1)'},
-    'color-bg-fill-critical-secondary': {value: 'rgba(254, 211, 209, 1)'},
-    'color-bg-fill-emphasis': {value: 'rgba(234, 237, 255, 1)'},
-    'color-bg-fill-emphasis-hover': {value: 'rgba(240, 242, 255, 1)'},
-    'color-bg-fill-emphasis-active': {value: 'rgba(246, 248, 255, 1)'},
-    'color-bg-fill-magic': {value: 'rgba(233, 229, 255, 1)'},
-    'color-bg-fill-magic-secondary': {value: 'rgba(223, 217, 255, 1)'},
-    'color-bg-fill-magic-secondary-hover': {value: 'rgba(228, 222, 255, 1)'},
-    'color-bg-fill-magic-secondary-active': {value: 'rgba(223, 217, 255, 1)'},
-    'color-bg-fill-inverse': {value: 'rgba(250, 250, 250, 1)'},
-    'color-bg-fill-inverse-hover': {value: 'rgba(253, 253, 253, 1)'},
-    'color-bg-fill-inverse-active': {value: 'rgba(255, 255, 255, 1)'},
-    'color-bg-fill-transparent': {value: 'rgba(255, 255, 255, 0)'},
-    'color-bg-fill-transparent-hover': {value: 'rgba(255, 255, 255, 0.17)'},
-    'color-bg-fill-transparent-active': {value: 'rgba(255, 255, 255, 0.2)'},
-    'color-bg-fill-transparent-selected': {value: 'rgba(0, 0, 0, 0.08)'},
-    'color-bg-fill-transparent-secondary': {value: 'rgba(0, 0, 0, 0.06)'},
-    'color-bg-fill-transparent-secondary-hover': {value: 'rgba(0, 0, 0, 0.08)'},
-    'color-bg-fill-transparent-secondary-active': {
-      value: 'rgba(0, 0, 0, 0.11)',
+    'color-bg-fill': {value: colors.gray[15]},
+    'color-icon': {value: colors.gray[8]},
+    'color-icon-secondary': {value: colors.gray[12]},
+    'color-text': {value: colors.gray[8]},
+    'color-text-secondary': {value: colors.gray[11]},
+    'color-bg-fill-transparent': {value: colors.whiteAlpha[8]},
+    'color-bg-fill-brand': {value: colors.gray[1]},
+    'color-text-brand-on-bg-fill': {value: colors.gray[15]},
+    'color-bg-surface-hover': {value: colors.gray[14]},
+    'color-bg-fill-hover': {value: colors.gray[14]},
+    'color-bg-fill-transparent-hover': {value: colors.whiteAlpha[9]},
+    'color-bg-fill-brand-hover': {value: colors.gray[5]},
+    'color-bg-surface-selected': {value: colors.gray[13]},
+    'color-bg-fill-selected': {value: colors.gray[13]},
+    'color-bg-fill-transparent-selected': {value: colors.whiteAlpha[11]},
+    'color-bg-fill-brand-selected': {value: colors.gray[9]},
+    'color-bg-surface-active': {value: colors.gray[13]},
+    'color-bg-fill-active': {value: colors.gray[13]},
+    'color-bg-fill-transparent-active': {value: colors.whiteAlpha[10]},
+    'color-bg-fill-brand-active': {value: colors.gray[4]},
+    'color-bg-surface-secondary-active': {value: colors.gray[13]},
+    'color-bg-surface-secondary-hover': {value: colors.gray[14]},
+    'color-border-secondary': {value: colors.gray[13]},
+    'color-border-gradient': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
     },
-    'color-text-link': {value: 'rgba(234, 237, 255, 1)'},
-    'color-text-link-hover': {value: 'rgba(240, 242, 255, 1)'},
-    'color-text-link-active': {value: 'rgba(246, 248, 255, 1)'},
-    'color-text-brand-hover': {value: 'rgba(255, 255, 255, 1)'},
-    'color-text-brand-on-bg-fill': {value: 'rgba(247, 247, 247, 1)'},
-    'color-text-brand-on-bg-fill-hover': {value: 'rgba(250, 250, 250, 1)'},
-    'color-text-brand-on-bg-fill-active': {value: 'rgba(253, 253, 253, 1)'},
-    'color-text-brand-on-bg-fill-disabled': {value: 'rgba(74, 74, 74, 1)'},
-    'color-text-info': {value: 'rgba(242, 249, 255, 1)'},
-    'color-text-info-hover': {value: 'rgba(242, 249, 255, 1)'},
-    'color-text-info-active': {value: 'rgba(251, 253, 255, 1)'},
-    'color-text-info-secondary': {value: 'rgba(213, 235, 255, 1)'},
-    'color-text-info-on-bg-fill': {value: 'rgba(251, 253, 255, 1)'},
-    'color-text-success': {value: 'rgba(205, 254, 225, 1)'},
-    'color-text-success-hover': {value: 'rgba(227, 255, 237, 1)'},
-    'color-text-success-active': {value: 'rgba(248, 255, 251, 1)'},
-    'color-text-success-secondary': {value: 'rgba(146, 254, 194, 1)'},
-    'color-text-success-on-bg-fill': {value: 'rgba(8, 61, 37, 1)'},
-    'color-text-caution': {value: 'rgba(247, 223, 0, 1)'},
-    'color-text-caution-hover': {value: 'rgba(255, 230, 0, 1)'},
-    'color-text-caution-active': {value: 'rgba(255, 235, 120, 1)'},
-    'color-text-caution-secondary': {value: 'rgba(255, 235, 120, 1)'},
-    'color-text-caution-on-bg-fill': {value: 'rgba(255, 248, 219, 1)'},
-    'color-text-warning': {value: 'rgba(255, 200, 121, 1)'},
-    'color-text-warning-hover': {value: 'rgba(255, 228, 198, 1)'},
-    'color-text-warning-active': {value: 'rgba(255, 221, 182, 1)'},
-    'color-text-warning-secondary': {value: 'rgba(149, 111, 0, 1)'},
-    'color-text-warning-on-bg-fill': {value: 'rgba(255, 253, 250, 1)'},
-    'color-text-critical': {value: 'rgba(255, 237, 236, 1)'},
-    'color-text-critical-hover': {value: 'rgba(255, 246, 246, 1)'},
-    'color-text-critical-active': {value: 'rgba(255, 251, 251, 1)'},
-    'color-text-critical-secondary': {value: 'rgba(254, 226, 225, 1)'},
-    'color-text-critical-on-bg-fill': {value: 'rgba(95, 21, 7, 1)'},
-    'color-text-emphasis': {value: 'rgba(234, 237, 255, 1)'},
-    'color-text-emphasis-hover': {value: 'rgba(240, 242, 255, 1)'},
-    'color-text-emphasis-active': {value: 'rgba(246, 248, 255, 1)'},
-    'color-text-emphasis-on-bg-fill': {value: 'rgba(0, 22, 51, 1)'},
-    'color-text-emphasis-on-bg-fill-hover': {value: 'rgba(0, 113, 233, 1)'},
-    'color-text-emphasis-on-bg-fill-active': {value: 'rgba(151, 173, 255, 1)'},
-    'color-text-magic': {value: 'rgba(243, 241, 255, 1)'},
-    'color-text-magic-secondary': {value: 'rgba(239, 236, 255, 1)'},
-    'color-text-magic-on-bg-fill': {value: 'rgba(59, 0, 147, 1)'},
-    'color-text-inverse': {value: 'rgba(212, 212, 212, 1)'},
-    'color-text-inverse-secondary': {value: 'rgba(241, 241, 241, 1)'},
-    'color-text-link-inverse': {value: 'rgba(186, 199, 255, 1)'},
-    'color-border': {value: 'rgba(212, 212, 212, 1)'},
-    'color-border-hover': {value: 'rgba(235, 235, 235, 1)'},
-    'color-border-disabled': {value: 'rgba(48, 48, 48, 1)'},
-    'color-border-secondary': {value: 'rgba(48, 48, 48, 1)'},
-    'color-border-tertiary': {value: 'rgba(48, 48, 48, 1)'},
-    'color-border-focus': {value: 'rgba(234, 237, 255, 1)'},
-    'color-border-brand': {value: 'rgba(212, 212, 212, 1)'},
-    'color-border-info': {value: 'rgba(145, 208, 255, 1)'},
-    'color-border-success': {value: 'rgba(41, 132, 90, 1)'},
-    'color-border-caution': {value: 'rgba(130, 117, 0, 1)'},
-    'color-border-warning': {value: 'rgba(255, 184, 0, 1)'},
-    'color-border-critical': {value: 'rgba(253, 176, 172, 1)'},
-    'color-border-critical-secondary': {value: 'rgba(255, 237, 236, 1)'},
-    'color-border-emphasis': {value: 'rgba(234, 237, 255, 1)'},
-    'color-border-emphasis-hover': {value: 'rgba(240, 242, 255, 1)'},
-    'color-border-emphasis-active': {value: 'rgba(246, 248, 255, 1)'},
-    'color-border-magic': {value: 'rgba(148, 116, 255, 1)'},
-    'color-border-magic-secondary': {value: 'rgba(223, 217, 255, 1)'},
-    'color-border-magic-secondary-hover': {value: 'rgba(228, 222, 255, 1)'},
-    'color-border-inverse': {value: 'rgba(247, 247, 247, 1)'},
-    'color-border-inverse-hover': {value: 'rgba(250, 250, 250, 1)'},
-    'color-border-inverse-active': {value: 'rgba(253, 253, 253, 1)'},
-    'color-icon-hover': {value: 'rgba(253, 253, 253, 1)'},
-    'color-icon-active': {value: 'rgba(255, 255, 255, 1)'},
-    'color-icon-secondary': {value: 'rgba(181, 181, 181, 1)'},
-    'color-icon-secondary-hover': {value: 'rgba(235, 235, 235, 1)'},
-    'color-icon-secondary-active': {value: 'rgba(241, 241, 241, 1)'},
-    'color-icon-brand': {value: 'rgba(253, 253, 253, 1)'},
-    'color-icon-info': {value: 'rgba(202, 230, 255, 1)'},
-    'color-icon-success': {value: 'rgba(146, 254, 194, 1)'},
-    'color-icon-caution': {value: 'rgba(255, 230, 0, 1)'},
-    'color-icon-warning': {value: 'rgba(255, 221, 182, 1)'},
-    'color-icon-critical': {value: 'rgba(254, 218, 217, 1)'},
-    'color-icon-emphasis': {value: 'rgba(234, 237, 255, 1)'},
-    'color-icon-emphasis-hover': {value: 'rgba(240, 242, 255, 1)'},
-    'color-icon-emphasis-active': {value: 'rgba(246, 248, 255, 1)'},
-    'color-icon-magic': {value: 'rgba(170, 149, 255, 1)'},
-    'color-icon-inverse': {value: 'rgba(212, 212, 212, 1)'},
-    'color-avatar-bg-fill': {value: 'rgba(181, 181, 181, 1)'},
-    'color-avatar-five-bg-fill': {value: 'rgba(253, 75, 146, 1)'},
-    'color-avatar-five-text-on-bg-fill': {value: 'rgba(255, 246, 248, 1)'},
-    'color-avatar-four-bg-fill': {value: 'rgba(81, 192, 255, 1)'},
-    'color-avatar-four-text-on-bg-fill': {value: 'rgba(0, 33, 51, 1)'},
-    'color-avatar-one-bg-fill': {value: 'rgba(197, 48, 197, 1)'},
-    'color-avatar-one-text-on-bg-fill': {value: 'rgba(253, 239, 253, 1)'},
-    'color-avatar-seven-bg-fill': {value: 'rgba(148, 116, 255, 1)'},
-    'color-avatar-seven-text-on-bg-fill': {value: 'rgba(248, 247, 255, 1)'},
-    'color-avatar-six-bg-fill': {value: 'rgba(37, 232, 43, 1)'},
-    'color-avatar-six-text-on-bg-fill': {value: 'rgba(3, 61, 5, 1)'},
-    'color-avatar-text-on-bg-fill': {value: 'rgba(255, 255, 255, 1)'},
-    'color-avatar-three-bg-fill': {value: 'rgba(44, 224, 212, 1)'},
-    'color-avatar-three-text-on-bg-fill': {value: 'rgba(3, 60, 57, 1)'},
-    'color-avatar-two-bg-fill': {value: 'rgba(56, 250, 163, 1)'},
-    'color-avatar-two-text-on-bg-fill': {value: 'rgba(12, 81, 50, 1)'},
-    'color-backdrop-bg': {value: 'rgba(0, 0, 0, 0.71)'},
-    'color-button-gradient-bg-fill': {
-      value:
-        'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
+    'color-border-gradient-hover': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
     },
-    'color-checkbox-bg-surface-disabled': {value: 'rgba(0, 0, 0, 0.08)'},
-    'color-checkbox-icon-disabled': {value: 'rgba(255, 255, 255, 1)'},
-    'color-input-bg-surface': {value: 'rgba(26, 26, 26, 1)'},
-    'color-input-bg-surface-hover': {value: 'rgba(48, 48, 48, 1)'},
-    'color-input-bg-surface-active': {value: 'rgba(74, 74, 74, 1)'},
-    'color-input-border': {value: 'rgba(74, 74, 74, 1)'},
-    'color-input-border-hover': {value: 'rgba(97, 97, 97, 1)'},
-    'color-input-border-active': {value: 'rgba(138, 138, 138, 1)'},
-    'color-nav-bg': {value: 'rgba(235, 235, 235, 1)'},
-    'color-nav-bg-surface': {value: 'rgba(0, 0, 0, 0.02)'},
-    'color-nav-bg-surface-hover': {value: 'rgba(241, 241, 241, 1)'},
-    'color-nav-bg-surface-active': {value: 'rgba(250, 250, 250, 1)'},
-    'color-nav-bg-surface-selected': {value: 'rgba(250, 250, 250, 1)'},
-    'color-radio-button-bg-surface-disabled': {value: 'rgba(0, 0, 0, 0.08)'},
-    'color-radio-button-icon-disabled': {value: 'rgba(255, 255, 255, 1)'},
-    'color-video-thumbnail-play-button-bg-fill-hover': {
-      value: 'rgba(0, 0, 0, 0.81)',
+    'color-border-gradient-selected': {
+      value: `linear-gradient(to bottom, ${colors.blackAlpha[10]}, ${colors.whiteAlpha[10]})`,
     },
-    'color-video-thumbnail-play-button-bg-fill': {value: 'rgba(0, 0, 0, 0.71)'},
-    'color-video-thumbnail-play-button-text-on-bg-fill': {
-      value: 'rgba(255, 255, 255, 1)',
+    'color-border-gradient-active': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
     },
-    'color-scrollbar-thumb-bg-hover': {value: 'rgba(138, 138, 138, 1)'},
   },
 });