Skip to content

Commit 3df3a35

Browse files
danielguillandanielguillan
authored
Merge branch 'main' into danielguillan/color-scheme-attribute
2 parents 9a8794a + 27294bc commit 3df3a35

382 files changed

Lines changed: 4386 additions & 420 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/brave-moons-pull.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Added `fullWidth` prop to `Pillar`. When set, the component removes its default `max-width` constraint so it can fill the available container width.
6+
7+
```tsx
8+
<Pillar fullWidth>
9+
<Pillar.Heading>Heading</Pillar.Heading>
10+
<Pillar.Description>Description</Pillar.Description>
11+
</Pillar>
12+
```

‎.changeset/bright-carpets-juggle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
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").

‎.changeset/bright-videos-listen.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
'@primer/react-brand': minor
3+
'@primer/brand-primitives': patch
4+
---
5+
6+
Added new `MediaPlaylist` component, which can be used for presenting a list of YouTube videos.
7+
8+
```tsx
9+
<MediaPlaylist>
10+
<MediaPlaylist.Heading>Latest videos</MediaPlaylist.Heading>
11+
<MediaPlaylist.Item thumbnail={<img src="thumbnail.jpg" alt="" />}>
12+
<MediaPlaylist.ItemHeading title="Getting More from Every Copilot Interaction" description="10:57" />
13+
<MediaPlaylist.ItemContent>
14+
<Text as="p" variant="muted">
15+
See workflows for scoping context, choosing the right mode, and getting more focused Copilot answers.
16+
</Text>
17+
</MediaPlaylist.ItemContent>
18+
<MediaPlaylist.ItemMedia>
19+
<iframe
20+
title="Getting More from Every Copilot Interaction"
21+
src="https://www.youtube-nocookie.com/embed/ITxzBiTBZW0"
22+
/>
23+
</MediaPlaylist.ItemMedia>
24+
</MediaPlaylist.Item>
25+
</MediaPlaylist>
26+
```
27+
28+
🔗 [See `MediaPlaylist` documentation for more usage examples](https://primer.style/brand/components/MediaPlaylist)

‎.changeset/calm-subnavs-wrap.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Fixed `SubNav` narrow viewport layout and alignment issues:
6+
7+
- A narrow sub nav without a subheading will keep the heading and menu toggle on one row by hiding the visible current page label.
8+
- Active link pills are vertically centered more consistently.
9+
- Submenu chevrons now align more closely with their labels and use consistent spacing.

‎.changeset/fair-heroes-wave.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/react-brand': patch
3+
'@primer/brand-css': patch
4+
---
5+
6+
Adjusted the `Hero.Label` bottom spacing from `16px` to `14px`.

‎.changeset/fair-pages-drop.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@primer/brand-primitives': minor
3+
---
4+
5+
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:
6+
7+
```diff
8+
- --brand-pagination-link-bgColor-rest
9+
- --brand-pagination-link-bgColor-active
10+
- --brand-pagination-borderColor-hover
11+
```

‎.changeset/fresh-controls-shine.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
'@primer/brand-primitives': patch
3+
---
4+
5+
Added and updated form control color tokens for `Checkbox`, `Radio`, and shared focus states.
6+
7+
New tokens are now available:
8+
9+
```diff
10+
+ --brand-control-color-focus
11+
+ --brand-control-checkbox-bg-hover
12+
+ --brand-control-checkbox-bg-checked-hover
13+
+ --brand-control-checkbox-bg-checked-disabled
14+
+ --brand-control-checkbox-bg-indeterminate-hover
15+
+ --brand-control-checkbox-fg-checked-disabled
16+
+ --brand-control-checkbox-border-hover
17+
+ --brand-control-checkbox-border-checked-hover
18+
+ --brand-control-checkbox-border-checked-disabled
19+
+ --brand-control-checkbox-border-indeterminate-hover
20+
+ --brand-control-checkbox-border-unchecked-disabled
21+
+ --brand-control-radio-bg-hover
22+
+ --brand-control-radio-bg-checked-hover
23+
+ --brand-control-radio-border-hover
24+
+ --brand-control-radio-border-checked-hover
25+
+ --brand-control-radio-border-disabled
26+
+ --brand-control-radio-dot-checked
27+
+ --brand-control-radio-dot-checked-hover
28+
```
29+
30+
Existing tokens were also updated:
31+
32+
```diff
33+
/* light */
34+
- --brand-control-checkbox-bg-checked: var(--base-color-scale-black-0)
35+
+ --brand-control-checkbox-bg-checked: var(--base-color-scale-green-6)
36+
- --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-black-0)
37+
+ --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-6)
38+
- --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-1)
39+
+ --brand-control-checkbox-bg-disabled: var(--brand-color-canvas-default)
40+
- --brand-control-checkbox-border-checked: var(--base-color-scale-black-0)
41+
+ --brand-control-checkbox-border-checked: var(--base-color-scale-green-6)
42+
- --brand-control-checkbox-border-indeterminate: var(--base-color-scale-black-0)
43+
+ --brand-control-checkbox-border-indeterminate: var(--base-color-scale-green-6)
44+
- --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-2)
45+
+ --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4)
46+
- --brand-control-radio-bg-disabled: var(--base-color-scale-gray-1)
47+
+ --brand-control-radio-bg-disabled: var(--brand-color-canvas-default)
48+
- --brand-control-radio-border-checked: var(--base-color-scale-black-0)
49+
+ --brand-control-radio-border-checked: var(--base-color-scale-green-6)
50+
51+
/* dark */
52+
- --brand-control-checkbox-bg-checked: var(--base-color-scale-white-0)
53+
+ --brand-control-checkbox-bg-checked: var(--base-color-scale-green-5)
54+
- --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-white-0)
55+
+ --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-5)
56+
- --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-4)
57+
+ --brand-control-checkbox-bg-disabled: var(--brand-color-canvas-default)
58+
- --brand-control-checkbox-fg-checked: var(--base-color-scale-black-0)
59+
+ --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0)
60+
- --brand-control-checkbox-border-checked: var(--base-color-scale-white-0)
61+
+ --brand-control-checkbox-border-checked: #077726
62+
- --brand-control-checkbox-border-indeterminate: var(--base-color-scale-white-0)
63+
+ --brand-control-checkbox-border-indeterminate: #077726
64+
- --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4)
65+
+ --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-5)
66+
- --brand-control-radio-bg-disabled: var(--base-color-scale-gray-4)
67+
+ --brand-control-radio-bg-disabled: var(--brand-color-canvas-default)
68+
- --brand-control-radio-border-default: var(--base-color-scale-white-0)
69+
+ --brand-control-radio-border-default: var(--base-color-scale-gray-4)
70+
- --brand-control-radio-border-checked: var(--base-color-scale-white-0)
71+
+ --brand-control-radio-border-checked: #077726
72+
```

‎.changeset/green-primary-buttons.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ Updated Button appearance and API ergonomics:
88

99
- ⚠️ Breaking change: Removed the `accent` Button variant. Use `primary` instead, which now applies the previous `accent` appearance.
1010
- Updated `secondary`, and `subtle` variant colors and state styles.
11+
- 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.
12+
- Updated Button border radius, medium Button sizing, and medium ActionMenu item height to better match the new Figma treatment.
13+
- Updated the shared medium control size token from `48px` to `43px`, so medium Button, ActionMenu, TextInput, and Select controls stay aligned.
1114
- Updated medium Button label typography to better match the new Figma treatment.
15+
- Fixed vertical alignment issues in the `Button` component so labels are centered consistently in browsers like Firefox.
1216
- Deprecated the `hasArrow` prop and hid Button arrows by default.
1317
- Note: `hasArrow` will be removed entirely in a future release.

‎.changeset/quiet-icons-dance.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/react-brand': patch
3+
'@primer/brand-css': patch
4+
---
5+
6+
Updated `Icon` with `hasBackground` to use a 12px border radius.

‎.changeset/sharp-checkboxes-smile.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'@primer/react-brand': patch
3+
'@primer/brand-css': patch
4+
---
5+
6+
Updated `Checkbox` and `Radio` checked, indeterminate, disabled, and hover state styling to match the latest design treatment.
7+
8+
Form controls now use a dedicated focus color token, with blue-6 in light mode and blue-2 in dark mode.
9+
10+
Updated form validation icon alignment and success color treatment.
11+
12+
The checkmark animation now uses the checked foreground color from the start instead of flashing the focus color first.

0 commit comments

Comments
 (0)