[Brand Refactor] Button updates (#1344)

Author: rezrah

.changeset/green-primary-buttons.md

@@ -0,0 +1,13 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-primitives': minor
+'@primer/brand-css': minor
+---
+
+Updated Button appearance and API ergonomics:
+
+- ⚠️ Breaking change: Removed the `accent` Button variant. Use `primary` instead, which now applies the previous `accent` appearance.
+- Updated `secondary`, and `subtle` variant colors and state styles.
+- Updated medium Button label typography to better match the new Figma treatment.
+- Deprecated the `hasArrow` prop and hid Button arrows by default.
+  - Note: `hasArrow` will be removed entirely in a future release.

apps/next-docs/content/components/Button/images/button_accent.png

@@ -9,7 +9,6 @@ thumbnail_darkMode: '/images/thumbnails/button-thumbnail-dark.png'
 ---
 
 import header from './images/button_header.png'
-import buttonAccent from './images/button_accent.png'
 
 <img src={header.src} alt="The different button types" />
 
@@ -64,12 +63,6 @@ Primary buttons have top priority in visual hierarchy, and using too many of the
 
 ![An image showing all primary states.](https://github.com/primer/brand/assets/6951037/dfad0124-4cdc-4230-b442-4ee9c747d0f0)
 
-#### Accent
-
-Accent buttons share a similar hierarchical priority, and should also be used sparingly to avoid diluting their effectiveness. Crucially, accent buttons should only be used in the [hero](/components/Hero) and [CTA banner](/components/CTABanner) components.
-
-<img src={buttonAccent.src} alt="All accent button states." />
-
 #### Secondary
 
 Secondary buttons are the default button type. Use them for the main actions on a page or form. Secondary buttons are the most common button type and should be used in most cases. They can be paired with a primary button to perform a secondary action, or used on their own.
@@ -130,10 +123,6 @@ Small buttons are meant to be used sparingly. Some use cases can be:
 - Areas where very low priority information might display a CTA.
 - Brand presence inside products where information is compact. For example for in-product banner.
 
-### Arrow
-
-+The arrow is hidden by default for all button variants except subtle. You can optionally show the arrow when you need to draw attention to a specific, singular button on a page. However, use arrows sparingly on primary actions to avoid diluting their impact. Multiple arrows on the same page will reduce their effectiveness as directional cues.
-
 ## Accessibility
 
 ### Descriptive buttons

apps/next-docs/content/components/Button/index.mdx

@@ -36,14 +36,6 @@ The `primary` variant of `Button` indicates that the action is of high priority,
 <Button variant="primary">Primary</Button>
 ```
 
-### Accent
-
-The `accent` variant is equally high priority, and should be used only in [Hero](../../Hero) or [CTABanner](../../CTABanner) components.
-
-```jsx live
-<Button variant="accent">Accent</Button>
-```
-
 ### Subtle
 
 The `subtle` variant of Button indicates that the action is a low priority one.
@@ -68,14 +60,6 @@ The `subtle` variant of Button indicates that the action is a low priority one.
 <Button block>Full-width button</Button>
 ```
 
-### Removing the arrow
-
-The animated arrow indicator can be removed using the `hasArrow` prop.
-
-```jsx live
-<Button hasArrow={false}>No arrow</Button>
-```
-
 ### Using an icon
 
 You can place an icon inside the `Button` in either the leading or the trailing position to enhance the visual context. It is recommended to use an [Octicon](https://primer.style/octicons) here.
@@ -111,5 +95,5 @@ The `Button` component can render as a `button` or `a` HTML element. By default,
 | `variants`       | <ButtonVariantsProp /> | `'secondary'` | The styling variations available in Button                                                              |
 | `size`           | <ButtonSizesProp />    |  `'medium'`   | The size variations available in Button                                                                 |
 | `block`          | `boolean`              |    `false`    | The full-width option available in Button                                                               |
-| `hasArrow`       | `boolean`              |    `true`     | A flag to show/hide the arrow icon                                                                      |
+| `hasArrow`       | `boolean`              |    `false`    | Deprecated. The `hasArrow` prop will be removed in a future release.                                    |
 | `disabled`       | `boolean`              |    `false`    | Disables the rendered element using `disabled` or `aria-disabled` attributes based on the element type. |

apps/next-docs/content/components/Button/react.mdx

@@ -47,7 +47,7 @@ Use this with caution. It is generally better to use a visible label for better
 
 ```jsx live
 <Tooltip text="Go fullscreen" type="label">
-  <Button hasArrow={false}>
+  <Button>
     <ScreenFullIcon />
   </Button>
 </Tooltip>

apps/next-docs/content/components/Tooltip/index.mdx

@@ -3,16 +3,18 @@ module.exports = {
     primary: {
       bgColor: {
         rest: {
-          value: 'var(--base-color-scale-black-0)',
-          dark: 'var(--base-color-scale-white-0)',
+          value: 'var(--base-color-scale-green-6)',
+          dark: 'var(--base-color-scale-green-5)',
         },
         hover: {
-          value: 'var(--base-color-scale-gray-8)',
-          dark: 'var(--base-color-scale-gray-0)',
+          value:
+            'linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), var(--base-color-scale-green-6)', // 000000 at 16% opacity
+          dark: 'linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), var(--base-color-scale-green-5)', // 000000 at 16% opacity
         },
         active: {
-          value: 'var(--base-color-scale-gray-8)',
-          dark: 'var(--base-color-scale-gray-0)',
+          value:
+            'linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%), var(--base-color-scale-green-6)', // 000000 at 24% opacity
+          dark: 'linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%), var(--base-color-scale-green-5)', // 000000 at 24% opacity
         },
         disabled: {
           value: 'var(--base-color-scale-gray-4)',
@@ -21,26 +23,26 @@ module.exports = {
       },
       borderColor: {
         rest: {
-          value: 'var(--base-color-scale-black-0)',
-          dark: 'var(--base-color-scale-white-0)',
+          value: 'transparent',
+          dark: 'transparent',
         },
         hover: {
-          value: 'var(--base-color-scale-gray-8)',
-          dark: 'var(--base-color-scale-white-0)',
+          value: 'transparent',
+          dark: 'transparent',
         },
         active: {
-          value: 'var(--base-color-scale-gray-8)',
-          dark: 'var(--base-color-scale-white-0)',
+          value: 'var(--base-color-scale-green-7)',
+          dark: 'var(--base-color-scale-green-6)',
         },
         disabled: {
-          value: 'var(--base-color-scale-gray-4)',
-          dark: 'var(--base-color-scale-gray-4)',
+          value: 'transparent',
+          dark: 'transparent',
         },
       },
       fgColor: {
         rest: {
-          value: 'var(--brand-color-text-onEmphasis)',
-          dark: 'var(--brand-color-text-onEmphasis)',
+          value: 'var(--base-color-scale-white-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
         disabled: {
           value: 'var(--base-color-scale-gray-2)',
@@ -49,66 +51,38 @@ module.exports = {
       },
       shadow: {
         active: {
-          value: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
-          dark: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
+          value: 'none',
+          dark: 'none',
         },
       },
     },
-    accent: {
+    secondary: {
       bgColor: {
         rest: {
-          value: 'var(--base-color-scale-green-6)',
-          dark: 'var(--base-color-scale-green-5)',
+          value: 'rgba(0, 0, 0, 0.06)', // 000000 at 6% opacity
+          dark: 'rgba(255, 255, 255, 0.12)', // ffffff at 12% opacity
         },
         hover: {
-          value: 'var(--base-color-scale-green-7)',
-          dark: 'var(--base-color-scale-green-6)',
+          value: 'linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), rgba(0, 0, 0, 0.06)', // 000000 at 6% opacity overlay and base
+          dark: 'rgba(255, 255, 255, 0.16)', // ffffff at 16% opacity
         },
         active: {
-          value: 'var(--base-color-scale-green-6)',
-          dark: 'var(--base-color-scale-green-5)',
-        },
-        disabled: {
-          value: 'var(--base-color-scale-gray-4)',
-          dark: 'var(--base-color-scale-gray-4)',
+          value: 'linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), rgba(0, 0, 0, 0.06)', // 000000 at 16% opacity over 000000 at 6% opacity
+          dark: 'rgba(255, 255, 255, 0.26)', // ffffff at 26% opacity
         },
       },
       borderColor: {
-        active: {
-          value: 'var(--base-color-scale-green-7)',
-          dark: 'var(--base-color-scale-green-6)',
-        },
-      },
-      fgColor: {
         rest: {
-          value: 'var(--base-color-scale-white-0)',
-          dark: 'var(--base-color-scale-white-0)',
-        },
-        disabled: {
           value: 'var(--base-color-scale-gray-2)',
-          dark: 'var(--base-color-scale-gray-2)',
-        },
-      },
-    },
-    secondary: {
-      bgColor: {
-        rest: {
-          value: 'transparent',
-          dark: 'transparent',
-        },
-      },
-      borderColor: {
-        rest: {
-          value: '#0D111729', // 0D1117 at 16% opacity
-          dark: '#ffffff29', // ffffff at 16% opacity
+          dark: 'rgba(255, 255, 255, 0.06)', // ffffff at 6% opacity
         },
         hover: {
-          value: '#0D111752', // 0D1117 at 32% opacity
-          dark: '#ffffff52', // ffffff at 32% opacity
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'rgba(255, 255, 255, 0.12)', // ffffff at 12% opacity
         },
         active: {
-          value: '#0D111752', // 0D1117 at 32% opacity
-          dark: '#ffffff52', // ffffff at 32% opacity
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'rgba(255, 255, 255, 0.12)', // ffffff at 12% opacity
         },
       },
       fgColor: {
@@ -125,16 +99,30 @@ module.exports = {
     subtle: {
       bgColor: {
         rest: {
-          value: '#0D111712', // 0D1117 at 7% opacity
-          dark: '#ffffff12', // ffffff at 7% opacity
+          value: 'rgba(0, 0, 0, 0.01)', // 000000 at 1% opacity
+          dark: 'rgba(0, 0, 0, 0.01)', // 000000 at 1% opacity
+        },
+        hover: {
+          value: 'linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), rgba(0, 0, 0, 0.06)', // 000000 at 6% opacity overlay and base
+          dark: 'rgba(255, 255, 255, 0.16)', // ffffff at 16% opacity
+        },
+        active: {
+          value: 'linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), rgba(0, 0, 0, 0.06)', // 000000 at 16% opacity over 000000 at 6% opacity
+          dark: 'rgba(255, 255, 255, 0.24)', // ffffff at 24% opacity
+        },
+      },
+      borderColor: {
+        rest: {
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'var(--base-color-scale-gray-6)',
         },
         hover: {
-          value: '#0D11170D', // 0D1117 at 5% opacity
-          dark: '#ffffff0D', // ffffff at 5% opacity
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'rgba(255, 255, 255, 0.12)', // ffffff at 12% opacity
         },
         active: {
-          value: '#0D111712', // 0D1117 at 7% opacity
-          dark: '#ffffff12', // ffffff at 7% opacity
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'rgba(255, 255, 255, 0.12)', // ffffff at 12% opacity
         },
       },
       fgColor: {

packages/design-tokens/src/tokens/functional/components/button/colors.js

@@ -170,7 +170,7 @@ export const SplitButtonModeAllVariants = () => {
   /**
    * TODO: Only show examples for action menu button variants that are design approved
    */
-  const filteredButtonsVariants = ButtonVariants.filter(variant => !['accent', 'secondary'].includes(variant))
+  const filteredButtonsVariants = ButtonVariants.filter(variant => variant !== 'secondary')
 
   return (
     <>

packages/react/src/ActionMenu/ActionMenu.features.stories.tsx

@@ -70,6 +70,10 @@
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */
 }
 
+.ActionMenu__inner-button-dropdown-icon {
+  vertical-align: middle !important;
+}
+
 .ActionMenu__innerButton--split-button:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

packages/react/src/ActionMenu/ActionMenu.module.css

@@ -6,6 +6,7 @@ declare const styles: {
   readonly "ActionMenu__button--medium": string;
   readonly "ActionMenu__button--small": string;
   readonly "ActionMenu__button--split-button": string;
+  readonly "ActionMenu__inner-button-dropdown-icon": string;
   readonly "ActionMenu__innerButton--disabled": string;
   readonly "ActionMenu__innerButton--medium": string;
   readonly "ActionMenu__innerButton--split-button": string;

packages/react/src/ActionMenu/ActionMenu.module.css.d.ts

@@ -372,7 +372,6 @@ const ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(
               disabled && styles['ActionMenu__innerButton--disabled'],
             )}
             variant={variant}
-            hasArrow={false}
             aria-disabled={disabled}
             data-testid={testId || testIds.button}
             size={size}
@@ -385,7 +384,6 @@ const ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(
             as="button"
             className={styles['ActionMenu__innerButton--split-button']}
             variant={variant}
-            hasArrow={false}
             aria-haspopup="true"
             aria-label="Menu"
             size={size}
@@ -394,7 +392,7 @@ const ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(
             disabled={disabled}
             {...props}
           >
-            <ChevronDownIcon />
+            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />
           </Button>
         </div>
       )
@@ -404,7 +402,6 @@ const ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(
       <Button
         ref={ref}
         className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}
-        hasArrow={false}
         aria-haspopup="true"
         aria-expanded={menuOpen ? 'true' : 'false'}
         disabled={disabled}