[Brand Refactor] Multiple component + recipe updates (#1363)

* LOTS of design adjustments

* adding disableANimation prop

* fix animation for toggle

* increase test coverage

* upgrade playwright dep

* use local chrome

* change chevrons to triangles and address feedback

* fix tests

Author: rezrah

.changeset/add-base-size-tokens.md

@@ -0,0 +1,16 @@
+---
+'@primer/brand-primitives': patch
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+Added the `--base-size-60` and `--base-size-88` base size tokens.
+
+Also exposed `60` and `88` through React components that use the base size scale, such as `Box` and `Stack`.
+
+```tsx
+<Box padding={60} />
+<Box padding={88} />
+<Stack gap={60} />
+<Stack gap={88} />
+```

.changeset/disable-pricing-options-accordion-animation.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Disabled feature-list accordion animations in `PricingOptions` now that the intrinsic accordion includes a default animation.

.changeset/tidy-accordion-toggle-animation.md

@@ -0,0 +1,12 @@
+---
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+- Updated the `Accordion` toggle indicator to use the `TriangleDownIcon` octicon, which rotates anti-clockwise between its open and closed states.
+
+- Improved `Accordion` content open and close animation so items transition using measured content height.
+
+- Added a `disableAnimation` prop to `Accordion` now that it includes a default animation, which may not be applicable in all use-cases.
+
+- Updated `Accordion` to close immediately when reduced motion is preferred.

.changeset/tidy-card-heading-spacing.md

@@ -0,0 +1,6 @@
+---
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+Adjusted the `Card.Heading` bottom spacing from `20px` to `12px`.

.changeset/tidy-hero-action-spacing.md

@@ -0,0 +1,6 @@
+---
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+Adjusted the `Hero` action group top spacing from `32px` to `28px` and the expressive trailing content top spacing from `32px` to `20px` on wider viewports.

.changeset/tidy-logosuite-control-hover.md

@@ -0,0 +1,7 @@
+---
+'@primer/brand-primitives': patch
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+Updated the `LogoSuite` control hover color in light mode from `gray-2` to `gray-1`.

.changeset/tidy-river-accordion-toggle-icon.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated the `RiverAccordion` toggle indicator to use the `TriangleDownIcon` and `TriangleUpIcon` octicons in place of chevrons, for consistency with the `Accordion` component.

.changeset/tidy-tabs-item-typography.md

@@ -0,0 +1,6 @@
+---
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+Updated `Tabs` item typography from text size `100` to `200`.

.changeset/tidy-text-cursor-color.md

@@ -0,0 +1,7 @@
+---
+'@primer/brand-primitives': patch
+'@primer/react-brand': patch
+'@primer/brand-css': patch
+---
+
+Added `TextCursorAnimation` cursor color tokens. The light mode cursor color now uses `--base-color-scale-green-6`, while dark mode preserves the existing accent color.

.github/workflows/update_visual_snapshots.yml

@@ -2,6 +2,7 @@ name: Update visual snapshots
 
 env:
   NODE_ENV: test
+  PLAYWRIGHT_CHROME_PATH: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome # Use local Chrome instead of downaloading
 
 on:
   pull_request: