Release tracking by primer[bot] · Pull Request #1335 · primer/brand

primer · 2026-04-30T18:52:04Z

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@primer/brand-css@0.68.0

Minor Changes

#1344 e54a442 Thanks @rezrah! - 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 Button hover background colors to use transitionable color values and standardized hover transitions with a 0.2s background color transition. Previously, they would not animate at all.
- Updated Button border radius, medium Button sizing, and medium ActionMenu item height to better match the new Figma treatment.
- Updated the shared medium control size token from 48px to 43px, so medium Button, ActionMenu, TextInput, and Select controls stay aligned.
- Updated medium Button label typography to better match the new Figma treatment.
- Fixed vertical alignment issues in the Button component so labels are centered consistently in browsers like Firefox.
- Deprecated the hasArrow prop and hid Button arrows by default.
  - Note: hasArrow will be removed entirely in a future release.

Patch Changes

#1359 9c900e9 Thanks @rezrah! - Adjusted the Hero.Label bottom spacing from 16px to 14px.
#1359 9c900e9 Thanks @rezrah! - Updated Icon with hasBackground to use a 12px border radius.
#1359 9c900e9 Thanks @rezrah! - Updated Checkbox and Radio checked, indeterminate, disabled, and hover state styling to match the latest design treatment.

Form controls now use a dedicated focus color token, with blue-6 in light mode and blue-2 in dark mode.

Updated form validation icon alignment and success color treatment.

The checkmark animation now uses the checked foreground color from the start instead of flashing the focus color first.
#1359 9c900e9 Thanks @rezrah! - Updated the LogoSuite gridline expressive layout to use slightly larger tablet logobar spacing, improving alignment with the overview template design.

Set LogoSuite mobile logo sizing to 32px, matching the tablet presentation and improving consistency across smaller viewports.

Updated the LogoSuite expressive gridline variant on tablet layouts to use fixed 91px inline edge spacing instead of a max-width cap.

@primer/brand-primitives@0.68.0

Minor Changes

#1353 d82cfa3 Thanks @rezrah! - Removed Pagination-specific CSS variables from @primer/brand-* packages. Pagination now uses the shared Brand Button component styling, so the previous custom token variables are no longer emitted or required:
```
- --brand-pagination-link-bgColor-rest
- --brand-pagination-link-bgColor-active
- --brand-pagination-borderColor-hover
```
#1340 670f3e6 Thanks @rezrah! - - Visual changes to the Pillar component.
- Pillar.Icon now defaults to a fixed green color with corresponding filled background. It now uses the Icon component internally for size parity with Card.Icon.
- ⚠️ Removed the Pillar.Icon color prop and PillarIconColors type export. Pillar icons using the shared background now always render green. Remove color from existing Pillar.Icon usage.
- ⚠️ Removed the iconColor field from FlexTemplate pillar items because it forwarded to the removed Pillar.Icon color prop.
- Native SVG icons fit the shared background by default, and hasBackground={false} renders custom artwork without the shared background treatment.
- ⚠️ Narrowed the Pillar.Icon icon prop type. It previously accepted arbitrary ReactNode values such as string, number, and boolean, but those values didn't render a usable icon. It now only accepts a valid icon component or icon element.
- Removed the Pillar-specific icon color tokens from the package output.
```
- --brand-Pillar-icon-color-default
- --brand-Pillar-icon-color-{blue,coral,green,gray,indigo,lemon,lime,orange,pink,purple,red,teal,yellow}
```
- Updated bordered Pillars to use a medium border radius.
- Increased default size of Pillar.Heading from subhead-large to 6
- Increased Pillar.Icon default size from 24px to 32px and added extra space between it and the subsequent heading.
#1344 e54a442 Thanks @rezrah! - 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 Button hover background colors to use transitionable color values and standardized hover transitions with a 0.2s background color transition. Previously, they would not animate at all.
- Updated Button border radius, medium Button sizing, and medium ActionMenu item height to better match the new Figma treatment.
- Updated the shared medium control size token from 48px to 43px, so medium Button, ActionMenu, TextInput, and Select controls stay aligned.
- Updated medium Button label typography to better match the new Figma treatment.
- Fixed vertical alignment issues in the Button component so labels are centered consistently in browsers like Firefox.
- Deprecated the hasArrow prop and hid Button arrows by default.
  - Note: hasArrow will be removed entirely in a future release.

Patch Changes

#1353 d82cfa3 Thanks @rezrah! - Added new MediaPlaylist component, which can be used for presenting a list of YouTube videos.

<MediaPlaylist>
  <MediaPlaylist.Heading>Latest videos</MediaPlaylist.Heading>
  <MediaPlaylist.Item thumbnail={<img src="thumbnail.jpg" alt="" />}>
    <MediaPlaylist.ItemHeading title="Getting More from Every Copilot Interaction" description="10:57" />
    <MediaPlaylist.ItemContent>
      <Text as="p" variant="muted">
        See workflows for scoping context, choosing the right mode, and getting more focused Copilot answers.
      </Text>
    </MediaPlaylist.ItemContent>
    <MediaPlaylist.ItemMedia>
      <iframe
        title="Getting More from Every Copilot Interaction"
        src="https://www.youtube-nocookie.com/embed/ITxzBiTBZW0"
      />
    </MediaPlaylist.ItemMedia>
  </MediaPlaylist.Item>
</MediaPlaylist>

🔗 See MediaPlaylist documentation for more usage examples

#1359 9c900e9 Thanks @rezrah! - Added and updated form control color tokens for Checkbox, Radio, and shared focus states.

New tokens are now available:

+ --brand-control-color-focus
+ --brand-control-checkbox-bg-hover
+ --brand-control-checkbox-bg-checked-hover
+ --brand-control-checkbox-bg-checked-disabled
+ --brand-control-checkbox-bg-indeterminate-hover
+ --brand-control-checkbox-fg-checked-disabled
+ --brand-control-checkbox-border-hover
+ --brand-control-checkbox-border-checked-hover
+ --brand-control-checkbox-border-checked-disabled
+ --brand-control-checkbox-border-indeterminate-hover
+ --brand-control-checkbox-border-unchecked-disabled
+ --brand-control-radio-bg-hover
+ --brand-control-radio-bg-checked-hover
+ --brand-control-radio-border-hover
+ --brand-control-radio-border-checked-hover
+ --brand-control-radio-border-disabled
+ --brand-control-radio-dot-checked
+ --brand-control-radio-dot-checked-hover

Existing tokens were also updated:

/* light */
- --brand-control-checkbox-bg-checked: var(--base-color-scale-black-0)
+ --brand-control-checkbox-bg-checked: var(--base-color-scale-green-6)
- --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-black-0)
+ --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-6)
- --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-1)
+ --brand-control-checkbox-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-checkbox-border-checked: var(--base-color-scale-black-0)
+ --brand-control-checkbox-border-checked: var(--base-color-scale-green-6)
- --brand-control-checkbox-border-indeterminate: var(--base-color-scale-black-0)
+ --brand-control-checkbox-border-indeterminate: var(--base-color-scale-green-6)
- --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-2)
+ --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4)
- --brand-control-radio-bg-disabled: var(--base-color-scale-gray-1)
+ --brand-control-radio-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-radio-border-checked: var(--base-color-scale-black-0)
+ --brand-control-radio-border-checked: var(--base-color-scale-green-6)

/* dark */
- --brand-control-checkbox-bg-checked: var(--base-color-scale-white-0)
+ --brand-control-checkbox-bg-checked: var(--base-color-scale-green-5)
- --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-white-0)
+ --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-5)
- --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-4)
+ --brand-control-checkbox-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-checkbox-fg-checked: var(--base-color-scale-black-0)
+ --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0)
- --brand-control-checkbox-border-checked: var(--base-color-scale-white-0)
+ --brand-control-checkbox-border-checked: #077726
- --brand-control-checkbox-border-indeterminate: var(--base-color-scale-white-0)
+ --brand-control-checkbox-border-indeterminate: #077726
- --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4)
+ --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-5)
- --brand-control-radio-bg-disabled: var(--base-color-scale-gray-4)
+ --brand-control-radio-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-radio-border-default: var(--base-color-scale-white-0)
+ --brand-control-radio-border-default: var(--base-color-scale-gray-4)
- --brand-control-radio-border-checked: var(--base-color-scale-white-0)
+ --brand-control-radio-border-checked: #077726

@primer/react-brand@0.68.0

Minor Changes

#1353 d82cfa3 Thanks @rezrah! - Added new MediaPlaylist component, which can be used for presenting a list of YouTube videos.

<MediaPlaylist>
  <MediaPlaylist.Heading>Latest videos</MediaPlaylist.Heading>
  <MediaPlaylist.Item thumbnail={<img src="thumbnail.jpg" alt="" />}>
    <MediaPlaylist.ItemHeading title="Getting More from Every Copilot Interaction" description="10:57" />
    <MediaPlaylist.ItemContent>
      <Text as="p" variant="muted">
        See workflows for scoping context, choosing the right mode, and getting more focused Copilot answers.
      </Text>
    </MediaPlaylist.ItemContent>
    <MediaPlaylist.ItemMedia>
      <iframe
        title="Getting More from Every Copilot Interaction"
        src="https://www.youtube-nocookie.com/embed/ITxzBiTBZW0"
      />
    </MediaPlaylist.ItemMedia>
  </MediaPlaylist.Item>
</MediaPlaylist>

🔗 See MediaPlaylist documentation for more usage examples

#1280 97a3f50 Thanks @rezrah! - Added ESM library support.

A new @primer/react-brand/esm entry point is now available for modern bundlers (E.g. Vite, Next.js, etc).

Components imported from this path automatically include the minimum CSS needed. Separate global stylesheet imports are no longer required.
```
import {Hero, ThemeProvider} from '@primer/react-brand/esm'
```
ESM features are opt-in, and the previous UMD bundle (@primer/react-brand) and global CSS (@primer/react-brand/lib/css/main.css) continue to work as before.

We recommend switching to ESM as soon as possible, as it will eventually become the default in future.

🔗 Get started with ESM
#1340 670f3e6 Thanks @rezrah! - - Visual changes to the Pillar component.
- Pillar.Icon now defaults to a fixed green color with corresponding filled background. It now uses the Icon component internally for size parity with Card.Icon.
- ⚠️ Removed the Pillar.Icon color prop and PillarIconColors type export. Pillar icons using the shared background now always render green. Remove color from existing Pillar.Icon usage.
- ⚠️ Removed the iconColor field from FlexTemplate pillar items because it forwarded to the removed Pillar.Icon color prop.
- Native SVG icons fit the shared background by default, and hasBackground={false} renders custom artwork without the shared background treatment.
- ⚠️ Narrowed the Pillar.Icon icon prop type. It previously accepted arbitrary ReactNode values such as string, number, and boolean, but those values didn't render a usable icon. It now only accepts a valid icon component or icon element.
- Removed the Pillar-specific icon color tokens from the package output.
```
- --brand-Pillar-icon-color-default
- --brand-Pillar-icon-color-{blue,coral,green,gray,indigo,lemon,lime,orange,pink,purple,red,teal,yellow}
```
- Updated bordered Pillars to use a medium border radius.
- Increased default size of Pillar.Heading from subhead-large to 6
- Increased Pillar.Icon default size from 24px to 32px and added extra space between it and the subsequent heading.
#1344 e54a442 Thanks @rezrah! - 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 Button hover background colors to use transitionable color values and standardized hover transitions with a 0.2s background color transition. Previously, they would not animate at all.
- Updated Button border radius, medium Button sizing, and medium ActionMenu item height to better match the new Figma treatment.
- Updated the shared medium control size token from 48px to 43px, so medium Button, ActionMenu, TextInput, and Select controls stay aligned.
- Updated medium Button label typography to better match the new Figma treatment.
- Fixed vertical alignment issues in the Button component so labels are centered consistently in browsers like Firefox.
- Deprecated the hasArrow prop and hid Button arrows by default.
  - Note: hasArrow will be removed entirely in a future release.
#1332 c4f4634 Thanks @rezrah! - Updated CTABanner with new features and better defaults.
- Added CTABanner.Logo for displaying custom logos.
```
<CTABanner>
  <CTABanner.Logo>
    <svg role="img" viewBox="0 0 45 16">
      <title>GitHub</title>
      <path d="..." />
    </svg>
  </CTABanner.Logo>
</CTABanner>
```
- Added CTABanner.Link for rendering a secondary call-to-action as a text link.
```
<CTABanner>
  <CTABanner.Link href="#">Read the customer story</CTABanner.Link>
</CTABanner>
```
- CTABanner.Heading now automatically renders at visual size '6' in the minimal variant when no size prop is provided.
- CTABanner.Image now accepts all native <img> HTML attributes.
🔗 See the documentation for more usage examples

Patch Changes

#1354 2c08abf Thanks @danielguillan! - Added fullWidth prop to Pillar. When set, the component removes its default max-width constraint so it can fill the available container width.
```
<Pillar fullWidth>
  <Pillar.Heading>Heading</Pillar.Heading>
  <Pillar.Description>Description</Pillar.Description>
</Pillar>
```
#1339 617e7a3 Thanks @danielguillan! - Fixed horizontal scrollbar overflow caused by gridlines pseudo-elements in Tiles, River, RiverBreakout, RiverAccordion, and SectionIntroStacked on systems with classic always-visible scrollbars (Windows, Linux, macOS with "Always show scrollbars").
#1353 d82cfa3 Thanks @rezrah! - Fixed SubNav narrow viewport layout and alignment issues:
- A narrow sub nav without a subheading will keep the heading and menu toggle on one row by hiding the visible current page label.
- Active link pills are vertically centered more consistently.
- Submenu chevrons now align more closely with their labels and use consistent spacing.
#1359 9c900e9 Thanks @rezrah! - Adjusted the Hero.Label bottom spacing from 16px to 14px.
#1359 9c900e9 Thanks @rezrah! - Updated Icon with hasBackground to use a 12px border radius.
#1359 9c900e9 Thanks @rezrah! - Updated Checkbox and Radio checked, indeterminate, disabled, and hover state styling to match the latest design treatment.

Form controls now use a dedicated focus color token, with blue-6 in light mode and blue-2 in dark mode.

Updated form validation icon alignment and success color treatment.

The checkmark animation now uses the checked foreground color from the start instead of flashing the focus color first.
#1353 d82cfa3 Thanks @rezrah! - Updates to Pagination component:
- Pagination controls now render with the Button component for more consistent visual styling.
- Inactive controls use subtle styling, while the active page item keeps primary styling.
- Removed previous arrow/link-specific styling.
- No breaking API changes.

#1355 56748b7 Thanks @danielguillan! - Updated the RiverAccordion gridline variant to include full-bleed visual backgrounds by default. Override --brand-RiverAccordion-visual-background to customize the visual background with a color, gradient, or image.

<RiverAccordion variant="gridline">
  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading</RiverAccordion.Heading>
    <RiverAccordion.Content>Content</RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="example.png" alt="Example visual" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>
</RiverAccordion>

#1359 9c900e9 Thanks @rezrah! - Updated the LogoSuite gridline expressive layout to use slightly larger tablet logobar spacing, improving alignment with the overview template design.

Set LogoSuite mobile logo sizing to 32px, matching the tablet presentation and improving consistency across smaller viewports.

Updated the LogoSuite expressive gridline variant on tablet layouts to use fixed 91px inline edge spacing instead of a max-width cap.

@primer/brand-docs@0.68.0

@primer/brand-storybook@0.68.0

@primer/brand-e2e@0.68.0

@primer/brand-fonts@0.68.0

@primer/brand-config@0.68.0

github-actions · 2026-04-30T18:52:28Z

github-actions · 2026-04-30T18:53:44Z

🟢 No design token changes found

github-actions · 2026-04-30T18:55:41Z

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

github-actions · 2026-04-30T18:59:29Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

github-actions · 2026-05-08T10:18:00Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	98.33 kB	98.33 kB	🟢 No change
UMD — full bundle (CSS)	64.59 kB	64.59 kB	🟢 No change
ESM — full bundle (JS + CSS)	1.48 MB	1.48 MB	🟢 No change
ESM — tree-shaken simple (Button)	67.38 kB	67.38 kB	🟢 No change
ESM — tree-shaken complex (ActionMenu)	76.17 kB	76.17 kB	🟢 No change

primer Bot requested a review from a team as a code owner April 30, 2026 18:52

primer Bot temporarily deployed to github-pages April 30, 2026 18:55 Inactive

primer Bot force-pushed the changeset-release/main branch from 01cf5f7 to 59bbed4 Compare May 5, 2026 11:49

primer Bot temporarily deployed to github-pages May 5, 2026 11:52 Inactive

primer Bot force-pushed the changeset-release/main branch from 59bbed4 to 0198e80 Compare May 5, 2026 12:29

primer Bot temporarily deployed to github-pages May 5, 2026 12:32 Inactive

primer Bot force-pushed the changeset-release/main branch from 0198e80 to 275a2b0 Compare May 8, 2026 10:14

primer Bot temporarily deployed to github-pages May 8, 2026 10:17 Inactive

primer Bot force-pushed the changeset-release/main branch from 275a2b0 to 5bd56cb Compare May 10, 2026 17:12

primer Bot temporarily deployed to github-pages May 10, 2026 17:15 Inactive

primer Bot force-pushed the changeset-release/main branch from 5bd56cb to 0963e67 Compare May 11, 2026 08:03

primer Bot temporarily deployed to github-pages May 11, 2026 08:06 Inactive

primer Bot force-pushed the changeset-release/main branch from 0963e67 to 485a344 Compare May 27, 2026 08:59

primer Bot temporarily deployed to github-pages May 27, 2026 09:03 Inactive

primer Bot force-pushed the changeset-release/main branch from 485a344 to 982c487 Compare May 28, 2026 15:13

primer Bot temporarily deployed to github-pages May 28, 2026 15:16 Inactive

primer Bot force-pushed the changeset-release/main branch from 982c487 to 4784c3e Compare May 28, 2026 18:34

primer Bot temporarily deployed to github-pages May 28, 2026 18:38 Inactive

primer Bot force-pushed the changeset-release/main branch from 4784c3e to b6d410e Compare May 29, 2026 12:57

primer Bot temporarily deployed to github-pages May 29, 2026 13:01 Inactive

primer Bot force-pushed the changeset-release/main branch from b6d410e to 5601e39 Compare May 29, 2026 13:55

primer Bot temporarily deployed to github-pages May 29, 2026 13:59 Inactive

Version Packages

20c2136

primer Bot force-pushed the changeset-release/main branch from 5601e39 to 20c2136 Compare May 29, 2026 18:10

primer Bot deployed to github-pages May 29, 2026 18:13 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release tracking#1335

Release tracking#1335
primer[bot] wants to merge 1 commit into
mainfrom
changeset-release/main

primer Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 30, 2026 •

edited by danielguillan

Loading

Uh oh!

github-actions Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 8, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

Conversation

primer Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Releases

@primer/brand-css@0.68.0

Minor Changes

Patch Changes

@primer/brand-primitives@0.68.0

Minor Changes

Patch Changes

@primer/react-brand@0.68.0

Minor Changes

Patch Changes

@primer/brand-docs@0.68.0

@primer/brand-storybook@0.68.0

@primer/brand-e2e@0.68.0

@primer/brand-fonts@0.68.0

@primer/brand-config@0.68.0

Uh oh!

github-actions Bot commented Apr 30, 2026 • edited by danielguillan Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❗ Pre-merge checklist

✅ Preliminary checks

🔌 Integration smoke tests

Dotcom

Subdomain sites

Sandboxes

🤔 Cross-check (aka sanity test)

After tests

🚢 After merge

Uh oh!

github-actions Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No design token changes found

Uh oh!

github-actions Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No unit test coverage changes found

Uh oh!

github-actions Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

github-actions Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Bundle size report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

primer Bot commented Apr 30, 2026 •

edited

Loading

github-actions Bot commented Apr 30, 2026 •

edited by danielguillan

Loading

github-actions Bot commented Apr 30, 2026 •

edited

Loading

github-actions Bot commented Apr 30, 2026 •

edited

Loading

github-actions Bot commented Apr 30, 2026 •

edited

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading