Test out dark theme values

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;

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;

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}

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);
 }

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

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

@@ -0,0 +1,19 @@
+import React, {ButtonHTMLAttributes, forwardRef} from 'react';
+import styles from './TopBarButton.module.scss';
+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.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);

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>
     </>
   );
 

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-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';

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;
+}

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

@@ -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.',