Test out top bar dark theme values

polaris-react/postcss-mixins/border-gradient.js

@@ -0,0 +1,12 @@
+// 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.
+module.exports = (_, backgroundColor, borderGradientColor, borderRadius) => ({
+  borderRadius: borderRadius,
+  border: 'solid var(--p-border-width-025) transparent',
+  backgroundColor: backgroundColor,
+  backgroundImage: `linear-gradient(${backgroundColor}, ${backgroundColor}), ${borderGradientColor}`,
+  backgroundOrigin: 'border-box',
+  backgroundClip: 'padding-box, border-box',
+});

polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx

@@ -13,7 +13,7 @@ const tailUpPaths = (
   <>
     <path
       d="M18.829 8.171 11.862.921A3 3 0 0 0 7.619.838L0 8.171h1.442l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557h1.387Z"
-      fill="#E3E3E3"
+      fill="var(--p-color-tooltip-border-tail-up)"
     />
     <path
       d="M17.442 10.171h-16v-2l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557v2Z"
@@ -26,7 +26,7 @@ const tailDownPaths = (
   <>
     <path
       d="m0 2 6.967 7.25a3 3 0 0 0 4.243.083L18.829 2h-1.442l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2H0Z"
-      fill="#D4D4D4"
+      fill="var(--p-color-tooltip-border-tail-down)"
     />
     <path
       d="M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z"

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.css';
+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;

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.css';
+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}

polaris-react/src/components/TopBar/components/SearchField/SearchField.module.css

@@ -77,7 +77,7 @@
   @mixin text-style-input;
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
   z-index: var(--pc-search-field-input);
-  height: 32px;
+  height: 36px;
   width: 100%;
   /* stylelint-disable-next-line -- polaris component custom properties */
   padding: 0 calc(var(--pc-search-field-icon-size) + var(--p-space-300));
@@ -90,14 +90,27 @@
   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);
+  @mixin border-gradient var(--p-color-bg-surface),
+    var(--p-color-border-gradient-experimental), var(--p-border-radius-300);
+
+  /* stylelint-disable-next-line selector-max-specificity -- don't hover on active states */
+  &:hover:not(:focus-visible):not(:active) {
+    @mixin border-gradient var(--p-color-bg-surface-hover),
+      var(--p-color-border-gradient-hover-experimental),
+      var(--p-border-radius-300);
   }
 
-  &:active,
-  &:focus {
-    box-shadow: inset 0 0 0 var(--p-border-width-025)
-      var(--p-color-border-inverse-active);
+  /* stylelint-disable-next-line no-duplicate-selectors -- border override */
+  &:focus-visible {
+    @mixin border-gradient var(--p-color-bg-surface-active),
+      var(--p-color-border-gradient-active-experimental),
+      var(--p-border-radius-300);
+  }
+
+  &:active {
+    @mixin border-gradient var(--p-color-bg-surface-selected),
+      var(--p-color-border-gradient-selected-experimental),
+      var(--p-border-radius-300);
   }
 
   &::placeholder {
@@ -182,5 +195,5 @@
   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);
 }

polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.module.css

@@ -0,0 +1,44 @@
+.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;
+
+  @mixin border-gradient var(--p-color-bg-fill),
+    var(--p-color-border-gradient-experimental), var(--p-border-radius-300);
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
+    @mixin no-focus-ring;
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+    outline-offset: var(--p-space-050);
+  }
+
+  &:hover {
+    @mixin border-gradient var(--p-color-bg-fill-hover),
+      var(--p-color-border-gradient-hover-experimental),
+      var(--p-border-radius-300);
+  }
+
+  &:active,
+  &[aria-expanded='true'] {
+    @mixin border-gradient var(--p-color-bg-fill-active),
+      var(--p-color-border-gradient-active-experimental),
+      var(--p-border-radius-300);
+  }
+
+  &:active {
+    @mixin border-gradient var(--p-color-bg-fill-selected),
+      var(--p-color-border-gradient-selected-experimental),
+      var(--p-border-radius-300);
+  }
+}

polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.tsx

@@ -0,0 +1,19 @@
+import React, {ButtonHTMLAttributes, forwardRef} from 'react';
+import styles from './TopBarButton.module.css';
+import {classNames} from '../../../../utilities/css';
+
+export const TopBarButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>(function TopBarButton({children, className, ...props}, ref) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={classNames(className, styles.TopBarButton)}
+      ref={ref}
+    >
+      {children}
+    </button>
+  );
+});

polaris-react/src/components/TopBar/components/TopBarButton/index.ts

@@ -0,0 +1 @@
+export * from './TopBarButton';

polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.css

@@ -1,8 +1,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);

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.css';
+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>
     </>
   );
 

polaris-react/src/components/TopBar/components/index.ts

@@ -7,3 +7,5 @@ export * from './SearchDismissOverlay';
 export * from './UserMenu';
 
 export * from './Menu';
+
+export * from './TopBarButton';

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)',
+};

polaris-tokens/src/themes/base/color.ts

@@ -145,10 +145,16 @@ export type ColorBorderAlias =
   | 'border-tertiary'
   | 'border-warning'
   | 'border'
+  | 'border-gradient-experimental'
+  | 'border-gradient-hover-experimental'
+  | 'border-gradient-selected-experimental'
+  | 'border-gradient-active-experimental'
   /** Specialty and component border colors. */
   | 'input-border-active'
   | 'input-border-hover'
-  | 'input-border';
+  | 'input-border'
+  | 'tooltip-border-tail-down'
+  | 'tooltip-border-tail-up';
 
 export type ColorIconAlias =
   | 'icon-active'
@@ -1010,6 +1016,27 @@ export const color: {
     description:
       'The active state (on press) color for borders on an inverse background.',
   },
+  'color-tooltip-border-tail-down': {
+    value: colors.gray[9],
+    description: 'The border color for tool tip tails pointing down.',
+  },
+  'color-tooltip-border-tail-up': {
+    value: colors.gray[8],
+    description: 'The border color for tool tip tails pointing up.',
+  },
+  // Temporary light theme border gradient values
+  'color-border-gradient-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
+  },
+  'color-border-gradient-hover-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
+  },
+  'color-border-gradient-selected-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
+  },
+  'color-border-gradient-active-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
+  },
   'color-icon': {
     value: colors.gray[14],
     description: 'The default color for icons.',

polaris-tokens/src/themes/dark.ts

@@ -12,8 +12,37 @@ export const metaThemeDarkPartial = createMetaThemePartial({
     '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-bg-surface-brand-selected': {value: colors.gray[14]},
+    'color-border-secondary': {value: colors.gray[13]},
+    'color-border-gradient-experimental': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
+    },
+    'color-border-gradient-hover-experimental': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
+    },
+    'color-border-gradient-selected-experimental': {
+      value: `linear-gradient(to bottom, ${colors.blackAlpha[10]}, ${colors.whiteAlpha[10]})`,
+    },
+    'color-border-gradient-active-experimental': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
+    },
   },
 });