Skip to content

Commit 4648660

Browse files
rezrahrezrah
committed
LOTS of design adjustments
1 parent 4b5cff7 commit 4648660

27 files changed

Lines changed: 1064 additions & 193 deletions

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
'@primer/brand-primitives': patch
3+
'@primer/react-brand': patch
4+
'@primer/brand-css': patch
5+
---
6+
7+
Added the `--base-size-60` and `--base-size-88` base size tokens.
8+
9+
Also exposed `60` and `88` through React components that use the base size scale, such as `Box` and `Stack`.
10+
11+
```tsx
12+
<Box padding={60} />
13+
<Box padding={88} />
14+
<Stack gap={60} />
15+
<Stack gap={88} />
16+
```

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@primer/react-brand': patch
3+
'@primer/brand-css': patch
4+
---
5+
6+
- Updated the `Accordion` toggle indicator to animate from a horizontal line into a down chevron when opened.
7+
8+
- Improved `Accordion` content open and close animation so items transition using measured content height.

‎.changeset/tidy-card-heading-spacing.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 `Card.Heading` bottom spacing from `20px` to `12px`.

‎.changeset/tidy-hero-action-spacing.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` 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‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@primer/brand-primitives': patch
3+
'@primer/react-brand': patch
4+
'@primer/brand-css': patch
5+
---
6+
7+
Updated the `LogoSuite` control hover color in light mode from `gray-2` to `gray-1`.

‎.changeset/tidy-tabs-item-typography.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 `Tabs` item typography from text size `100` to `200`.

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

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

‎packages/design-tokens/scripts/build-tokens.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
275275
`tokens/functional/components/tabs/colors.json`,
276276
`tokens/functional/components/media-playlist/colors.json`,
277277
`tokens/functional/components/blinking-cursor/colors.js`,
278+
`tokens/functional/components/text-cursor-animation/colors.json`,
278279
`tokens/functional/components/tiles/colors.js`,
279280
]
280281

‎packages/design-tokens/src/tokens/base/size/size.json‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
{
2+
"base": {
3+
"size": {
4+
"2": {
5+
"$value": "2px",
6+
"$type": "dimension",
7+
"$extensions": {
8+
"org.primer.figma": {
9+
"collection": "base/size",
10+
"scopes": ["size"]
11+
}
12+
}
13+
},
14+
"4": {
15+
"$value": "4px",
16+
"$type": "dimension",
17+
"$extensions": {
18+
"org.primer.figma": {
19+
"collection": "base/size",
20+
"scopes": ["size"]
21+
}
22+
}
23+
},
24+
"6": {
25+
"$value": "6px",
26+
"$type": "dimension",
27+
"$extensions": {
28+
"org.primer.figma": {
29+
"collection": "base/size",
30+
"scopes": ["size"]
31+
}
32+
}
33+
},
34+
"8": {
35+
"$value": "8px",
36+
"$type": "dimension",
37+
"$extensions": {
38+
"org.primer.figma": {
39+
"collection": "base/size",
40+
"scopes": ["size"]
41+
}
42+
}
43+
},
44+
"12": {
45+
"$value": "12px",
46+
"$type": "dimension",
47+
"$extensions": {
48+
"org.primer.figma": {
49+
"collection": "base/size",
50+
"scopes": ["size"]
51+
}
52+
}
53+
},
54+
"16": {
55+
"$value": "16px",
56+
"$type": "dimension",
57+
"$extensions": {
58+
"org.primer.figma": {
59+
"collection": "base/size",
60+
"scopes": ["size"]
61+
}
62+
}
63+
},
64+
"20": {
65+
"$value": "20px",
66+
"$type": "dimension",
67+
"$extensions": {
68+
"org.primer.figma": {
69+
"collection": "base/size",
70+
"scopes": ["size"]
71+
}
72+
}
73+
},
74+
"24": {
75+
"$value": "24px",
76+
"$type": "dimension",
77+
"$extensions": {
78+
"org.primer.figma": {
79+
"collection": "base/size",
80+
"scopes": ["size"]
81+
}
82+
}
83+
},
84+
"28": {
85+
"$value": "28px",
86+
"$type": "dimension",
87+
"$extensions": {
88+
"org.primer.figma": {
89+
"collection": "base/size",
90+
"scopes": ["size"]
91+
}
92+
}
93+
},
94+
"32": {
95+
"$value": "32px",
96+
"$type": "dimension",
97+
"$extensions": {
98+
"org.primer.figma": {
99+
"collection": "base/size",
100+
"scopes": ["size"]
101+
}
102+
}
103+
},
104+
"36": {
105+
"$value": "36px",
106+
"$type": "dimension",
107+
"$extensions": {
108+
"org.primer.figma": {
109+
"collection": "base/size",
110+
"scopes": ["size"]
111+
}
112+
}
113+
},
114+
"40": {
115+
"$value": "40px",
116+
"$type": "dimension",
117+
"$extensions": {
118+
"org.primer.figma": {
119+
"collection": "base/size",
120+
"scopes": ["size"]
121+
}
122+
}
123+
},
124+
"44": {
125+
"$value": "44px",
126+
"$type": "dimension",
127+
"$extensions": {
128+
"org.primer.figma": {
129+
"collection": "base/size",
130+
"scopes": ["size"]
131+
}
132+
}
133+
},
134+
"48": {
135+
"$value": "48px",
136+
"$type": "dimension",
137+
"$extensions": {
138+
"org.primer.figma": {
139+
"collection": "base/size",
140+
"scopes": ["size"]
141+
}
142+
}
143+
},
144+
"60": {
145+
"$value": "60px",
146+
"$type": "dimension",
147+
"$extensions": {
148+
"org.primer.figma": {
149+
"collection": "base/size",
150+
"scopes": ["size"]
151+
}
152+
}
153+
},
154+
"64": {
155+
"$value": "64px",
156+
"$type": "dimension",
157+
"$extensions": {
158+
"org.primer.figma": {
159+
"collection": "base/size",
160+
"scopes": ["size"]
161+
}
162+
}
163+
},
164+
"80": {
165+
"$value": "80px",
166+
"$type": "dimension",
167+
"$extensions": {
168+
"org.primer.figma": {
169+
"collection": "base/size",
170+
"scopes": ["size"]
171+
}
172+
}
173+
},
174+
"88": {
175+
"$value": "88px",
176+
"$type": "dimension",
177+
"$extensions": {
178+
"org.primer.figma": {
179+
"collection": "base/size",
180+
"scopes": ["size"]
181+
}
182+
}
183+
},
184+
"96": {
185+
"$value": "96px",
186+
"$type": "dimension",
187+
"$extensions": {
188+
"org.primer.figma": {
189+
"collection": "base/size",
190+
"scopes": ["size"]
191+
}
192+
}
193+
},
194+
"112": {
195+
"$value": "112px",
196+
"$type": "dimension",
197+
"$extensions": {
198+
"org.primer.figma": {
199+
"collection": "base/size",
200+
"scopes": ["size"]
201+
}
202+
}
203+
},
204+
"128": {
205+
"$value": "128px",
206+
"$type": "dimension",
207+
"$extensions": {
208+
"org.primer.figma": {
209+
"collection": "base/size",
210+
"scopes": ["size"]
211+
}
212+
}
213+
}
214+
}
215+
}
216+
}

‎packages/design-tokens/src/tokens/functional/components/logosuite/colors.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"dark": "var(--brand-color-canvas-muted)"
88
},
99
"hover": {
10-
"value": "var(--base-color-scale-gray-2)",
10+
"value": "var(--base-color-scale-gray-1)",
1111
"dark": "#5a5b7c"
1212
}
1313
},

0 commit comments

Comments
 (0)