[Brand Refactor] Multiple component + recipe updates by rezrah · Pull Request #1363 · primer/brand

rezrah · 2026-06-03T13:03:46Z

Summary

Lots of different updates in this PR that are clearing items in the QA board. Mostly minor spacing/sizing/type changes but some bigger changes to Accordion and base size tokens (additive).

Towards https://github.com/github/brand-marketing-design/issues/2606

List of notable changes:

Updates the Accordion animation to match the Figma prototype
Updated the Flex Suite overview page, where qa items are relevant to only that
Updated components in non-breaking way everywhere else
Added new base size tokens for --base-size-60 and --base-size-88
🆕 Updated River accordion to use triangles instead of chevrons

What should reviewers focus on?

Go through the QA items if you're feeling brave and cross-check changes are there
Otherwise just focus on a code review and check the preview.
Review the FAQ animations though, they've been completely updated.

Steps to test:

See new accordion animations here
See the revised FlexSuite here

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After
Screen.Recording.2026-06-08.at.15.03.24.mov	Screen.Recording.2026-06-08.at.15.02.53.mov

Before	After

changeset-bot · 2026-06-03T13:03:51Z

🦋 Changeset detected

Latest commit: 60046ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@primer/brand-primitives	Patch
@primer/react-brand	Patch
@primer/brand-css	Patch
@primer/brand-docs	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-06-03T13:05:34Z

🔍 Design token changes found

View CSS variable changes

+ --base-size-88: 5.5rem;

+ --base-size-60: 3.75rem;

- --brand-LogoSuite-color-control-hover: var(--base-color-scale-gray-2);
+ --brand-LogoSuite-color-control-hover: var(--base-color-scale-gray-1);

- --brand-LogoSuite-color-control-hover: var(--base-color-scale-gray-2);
+ --brand-LogoSuite-color-control-hover: var(--base-color-scale-gray-1);

github-actions · 2026-06-03T13:07:02Z

🟢 No visual differences found

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

github-actions · 2026-06-03T13:07:05Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	98.33 kB	99.28 kB	⬆️ +973 B (+1.0%)
UMD — full bundle (CSS)	64.59 kB	65.21 kB	⬆️ +640 B (+1.0%)
ESM — full bundle (JS + CSS)	1.48 MB	1.49 MB	⬆️ +11.94 kB (+0.8%)
ESM — tree-shaken simple (Button)	67.38 kB	68.13 kB	⬆️ +759 B (+1.1%)
ESM — tree-shaken complex (ActionMenu)	76.17 kB	76.91 kB	⬆️ +759 B (+1.0%)

Copilot

Pull request overview

This PR updates several Primer Brand React components, recipes, and design tokens to better align spacing, typography, and interaction animations with the latest design direction (notably Accordion + FlexSuite overview adjustments), while extending the base sizing scale and component token coverage.

Changes:

Updated Accordion toggle indicator + open/close animation to use measured content height and a single animated indicator.
Added new base size tokens (60, 88) and exposed them through spacing-enabled components (notably Box/Stack).
Refined component visuals via token/typography/spacing tweaks (e.g., Tabs item typography, Hero/Card spacing, TextCursorAnimation cursor color token, FlexSuite overview layout updates).

Show a summary per file

File	Description
packages/react/src/TextCursorAnimation/TextCursorAnimation.tsx	Imports new component token CSS for cursor color modes.
packages/react/src/TextCursorAnimation/TextCursorAnimation.module.css	Switches cursor mix color to a dedicated token var.
packages/react/src/Tabs/Tabs.module.css	Updates tab item typography tokens from 100 → 200.
packages/react/src/Stack/Stack.module.css.d.ts	Adds typings for new `60`/`88` spacing classes.
packages/react/src/Stack/Stack.module.css	Adds `gap`/`padding` classes for base sizes `60` and `88`.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx	Updates FlexSuite overview layout and pricing options panel structure.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css	Adds top margin to tabs panel container for spacing adjustments.
packages/react/src/Hero/Hero.module.css	Tweaks action/trailing spacing values.
packages/react/src/constants.tsx	Extends `BaseSizeScale` to include `60` and `88`.
packages/react/src/Card/Card.module.css	Adjusts heading bottom spacing.
packages/react/src/Box/Box.module.css.d.ts	Adds typings for new `60`/`88` spacing classes.
packages/react/src/Box/Box.module.css	Adds padding/margin variants for base sizes `60` and `88`.
packages/react/src/Accordion/Accordion.tsx	Implements new toggle SVG indicator + measured-height open/close animation logic.
packages/react/src/Accordion/Accordion.test.tsx	Updates tests for delayed close animation + new indicator markup.
packages/react/src/Accordion/Accordion.module.css.d.ts	Updates typings for new classes (`closing`, toggle icon, content-inner).
packages/react/src/Accordion/Accordion.module.css	Reworks Accordion content/toggle animations (max-height + animated lines).
packages/design-tokens/src/tokens/functional/components/text-cursor-animation/colors.json	Adds cursor color token (light + dark mode values).
packages/design-tokens/src/tokens/functional/components/logosuite/colors.json	Adjusts LogoSuite hover color token for light mode.
packages/design-tokens/src/tokens/base/size/size.json	Adds base size token definitions including `60` and `88`.
packages/design-tokens/scripts/build-tokens.js	Includes TextCursorAnimation token file in color-mode build list.
.changeset/tidy-text-cursor-color.md	Changeset for TextCursorAnimation cursor color tokens.
.changeset/tidy-tabs-item-typography.md	Changeset for Tabs typography update.
.changeset/tidy-logosuite-control-hover.md	Changeset for LogoSuite hover color update.
.changeset/tidy-hero-action-spacing.md	Changeset for Hero spacing update.
.changeset/tidy-card-heading-spacing.md	Changeset for Card heading spacing update.
.changeset/tidy-accordion-toggle-animation.md	Changeset for Accordion toggle + animation updates.
.changeset/add-base-size-tokens.md	Changeset for adding base size `60`/`88` and exposing via Box/Stack.

Copilot's findings

Files reviewed: 24/27 changed files
Comments generated: 1

github-actions · 2026-06-03T19:12:02Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 0 improved, 1 decreased

Component/Hook	Statements	Functions	Branches	Change
`Accordion`	~~100.0%~~ 99.1%	100.0%	~~94.1%~~ 85.0%	-9.1%

danielguillan · 2026-06-05T07:48:02Z

 export type AccordionRootProps = DetailsHTMLAttributes<HTMLDetailsElement> & {
  children: ReactElement<AccordionHeadingProps | AccordionContentProps>[]
  variant?: 'default' | 'emphasis'
+  disableAnimation?: boolean


We're missing the docs and storybook control for the new prop.

Added storybook story, but we don't have public docs for Accordion so left that out. Or did you mean FAQ @danielguillan?

Should we document this prop in FAQ, or do we expect it to always animate? We can omit it if that's the only behavior we anticipate everywhere.

danielguillan · 2026-06-05T07:53:58Z

+          event.preventDefault()
+
+          if (!isClosingRef.current) {
+            closeWithAnimation(details)
+          }


This seems to be breaking consumer's custom onClick. I think it should run the close logic only after consumer's onClick has had a chance to call preventDefault(). For example: the Always Exactly One Panel Open story breaks, since clicking on the open panel closes it.

Nice catch Dani, thanks for this. Yeah there was an issue, which is now fixed but how did you spot that out of interest? was it comparing the prod to preview? Just curious as this slipped through my tests and want to put some checks in place for next time.

I spotted the issue by clicking around the Always Exactly One Panel Open. I had to compare it with the production version though because I wasn't completely confident that the behavior was correct, even though the story name is quite clear.

danielguillan · 2026-06-05T08:10:23Z


 // TODO: consider generating the scale from  style dictionary and serve from the brand-primitives package
-export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128] as const
+export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128] as const


Nit: my OCD can’t unsee this. 😅

Could we add the missing values so the 4px increments are complete up to 64, and the 8px increments stay consistent after that?

Suggested change

export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128] as const

export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 88, 96, 112, 128] as const

Yeah i definitely see the issue, but just to clarify, this would expand the current token API beyond what is immediately required. AFAIK we don't need those additional values yet, but we could create load bearing dependency on them. Not sure we should do that right now. Do you have any thoughts on that Dani? Do you feel strongly enough that the trade off is worth. it, or are you happy leaving it as a nit that we can live with for now?

I see the concern, but I don’t think this introduces much risk in practice. These values would still be part of the same scale logic rather than arbitrary additions, and the consistent increments make the scale more predictable and useful from a systems perspective.

That said, I’m fine not introducing them now if we don’t have an immediate need. We can leave it as-is and revisit later. 👍

…refactor-june-3

jesussandreas

heelllll yeeeeea

danielguillan

🚀 Great updates!

LOTS of design adjustments

4648660

Copilot AI review requested due to automatic review settings June 3, 2026 13:03

rezrah requested a review from a team as a code owner June 3, 2026 13:03

Copilot started reviewing on behalf of rezrah June 3, 2026 13:04 View session

rezrah temporarily deployed to github-pages June 3, 2026 13:06 — with GitHub Actions Inactive

Copilot AI reviewed Jun 3, 2026

View reviewed changes

Comment thread packages/react/src/Accordion/Accordion.tsx Outdated

rezrah added 2 commits June 3, 2026 14:29

adding disableANimation prop

a28ca09

fix animation for toggle

de14477

rezrah temporarily deployed to github-pages June 3, 2026 19:11 — with GitHub Actions Inactive

increase test coverage

84272b9

rezrah temporarily deployed to github-pages June 4, 2026 08:57 — with GitHub Actions Inactive

upgrade playwright dep

2217963

rezrah temporarily deployed to github-pages June 4, 2026 09:26 — with GitHub Actions Inactive

use local chrome

d4f4c19

rezrah temporarily deployed to github-pages June 4, 2026 09:31 — with GitHub Actions Inactive

rezrah requested review from danielguillan and jesussandreas June 4, 2026 10:20

danielguillan reviewed Jun 5, 2026

View reviewed changes

Comment thread packages/react/src/Accordion/Accordion.module.css Outdated

danielguillan reviewed Jun 5, 2026

View reviewed changes

rezrah added 2 commits June 8, 2026 09:06

Merge branch 'main' of github.com:primer/brand into rezrah/design-qa-…

3a84938

…refactor-june-3

change chevrons to triangles and address feedback

b5ec32d

rezrah temporarily deployed to github-pages June 8, 2026 13:35 — with GitHub Actions Inactive

fix tests

60046ed

rezrah requested a review from danielguillan June 8, 2026 13:49

rezrah temporarily deployed to github-pages June 8, 2026 13:50 — with GitHub Actions Inactive

jesussandreas approved these changes Jun 8, 2026

View reviewed changes

danielguillan approved these changes Jun 10, 2026

View reviewed changes

rezrah merged commit f3a70ed into main Jun 10, 2026
17 checks passed

rezrah deleted the rezrah/design-qa-refactor-june-3 branch June 10, 2026 14:57

primer Bot mentioned this pull request Jun 10, 2026

Release tracking #1369

Merged

github-actions Bot mentioned this pull request Jun 19, 2026

New release available "@primer/react-brand@0.69.0" primer/brand-releases#40

Closed

3 tasks

	export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128] as const
	export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 88, 96, 112, 128] as const

Uh oh!

Conversation

rezrah commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

🔍 Design token changes found

Uh oh!

github-actions Bot commented Jun 3, 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 Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Bundle size report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Uh oh!

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

Uh oh!

🟢 Unit test coverage changes found

Uh oh!

Uh oh!

danielguillan Jun 5, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

danielguillan Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

danielguillan Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rezrah Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielguillan Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

danielguillan Jun 5, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Jun 8, 2026

Choose a reason for hiding this comment

Uh oh!

danielguillan Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

jesussandreas left a comment

Choose a reason for hiding this comment

Uh oh!

danielguillan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

rezrah commented Jun 3, 2026 •

edited

Loading

changeset-bot Bot commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

danielguillan Jun 5, 2026 •

edited

Loading

rezrah Jun 8, 2026 •

edited

Loading