Skip to content

Commit a16f30e

Browse files
lukasoppermannlukasoppermann
authored
make borders same as fill, like it is in normal modes (#1146)
* make borders same as fill, like it is in normal modes * fix borderColor for colorblind mode * add borderColor to separate file
1 parent 5100c76 commit a16f30e

15 files changed

+653
-1276
lines changed

‎.changeset/smooth-tools-carry.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/primitives': patch
3+
---
4+
5+
Fix borderColors in colorblind modes

‎scripts/buildFigma.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
121121
`src/tokens/base/color/light/display-light.json5`,
122122
`src/tokens/functional/color/light/primitives-light.json5`,
123123
`src/tokens/functional/color/light/patterns-light.json5`,
124+
`src/tokens/functional/color/*.json5`,
124125
`src/tokens/component/*.json5`,
125126
],
126127
theme: 'light',
@@ -134,6 +135,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
134135
`src/tokens/base/color/light/display-light.json5`,
135136
`src/tokens/functional/color/light/primitives-light.json5`,
136137
`src/tokens/functional/color/light/patterns-light.json5`,
138+
`src/tokens/functional/color/*.json5`,
137139
`src/tokens/component/*.json5`,
138140
],
139141
theme: 'light-high-contrast',
@@ -147,6 +149,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
147149
`src/tokens/base/color/light/display-light.json5`,
148150
`src/tokens/functional/color/light/primitives-light.json5`,
149151
`src/tokens/functional/color/light/patterns-light.json5`,
152+
`src/tokens/functional/color/*.json5`,
150153
`src/tokens/component/*.json5`,
151154
],
152155
theme: 'light-protanopia-deuteranopia',
@@ -160,6 +163,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
160163
`src/tokens/base/color/light/display-light.json5`,
161164
`src/tokens/functional/color/light/primitives-light.json5`,
162165
`src/tokens/functional/color/light/patterns-light.json5`,
166+
`src/tokens/functional/color/*.json5`,
163167
`src/tokens/component/*.json5`,
164168
],
165169
theme: 'light-tritanopia',
@@ -172,6 +176,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
172176
`src/tokens/base/color/dark/display-dark.json5`,
173177
`src/tokens/functional/color/dark/primitives-dark.json5`,
174178
`src/tokens/functional/color/dark/patterns-dark.json5`,
179+
`src/tokens/functional/color/*.json5`,
175180
`src/tokens/component/*.json5`,
176181
],
177182
theme: 'dark',
@@ -185,6 +190,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
185190
`src/tokens/base/color/dark/display-dark.json5`,
186191
`src/tokens/functional/color/dark/primitives-dark.json5`,
187192
`src/tokens/functional/color/dark/patterns-dark.json5`,
193+
`src/tokens/functional/color/*.json5`,
188194
`src/tokens/component/*.json5`,
189195
],
190196
theme: 'dark-high-contrast',
@@ -198,6 +204,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
198204
`src/tokens/base/color/dark/display-dark.json5`,
199205
`src/tokens/functional/color/dark/primitives-dark.json5`,
200206
`src/tokens/functional/color/dark/patterns-dark.json5`,
207+
`src/tokens/functional/color/*.json5`,
201208
`src/tokens/component/*.json5`,
202209
],
203210
theme: 'dark-dimmed',
@@ -211,6 +218,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
211218
`src/tokens/base/color/dark/display-dark.json5`,
212219
`src/tokens/functional/color/dark/primitives-dark.json5`,
213220
`src/tokens/functional/color/dark/patterns-dark.json5`,
221+
`src/tokens/functional/color/*.json5`,
214222
`src/tokens/component/*.json5`,
215223
],
216224
theme: 'dark-protanopia-deuteranopia',
@@ -224,6 +232,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
224232
`src/tokens/base/color/dark/display-dark.json5`,
225233
`src/tokens/functional/color/dark/primitives-dark.json5`,
226234
`src/tokens/functional/color/dark/patterns-dark.json5`,
235+
`src/tokens/functional/color/*.json5`,
227236
`src/tokens/component/*.json5`,
228237
],
229238
theme: 'dark-tritanopia',

‎scripts/buildTokens.ts

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -201,15 +201,8 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
201201
// color, shadow & borders
202202
{
203203
filename: 'theme',
204-
source: [
205-
`src/tokens/base/color/light/light.json5`,
206-
`src/tokens/base/color/light/display-light.json5`,
207-
`src/tokens/functional/color/light/*.json5`,
208-
`src/tokens/functional/shadow/light.json5`,
209-
`src/tokens/functional/border/*.json5`,
210-
`src/tokens/component/*.json5`,
211-
],
212-
include: [`src/tokens/base/color/light/light.json5`, 'src/tokens/functional/size/border.json5'],
204+
source: themes.find(theme => theme.filename === 'light')?.source || [],
205+
include: themes.find(theme => theme.filename === 'light')?.include || [],
213206
},
214207
// typography
215208
{

‎scripts/themes.config.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ export const themes: TokenBuildInput[] = [
55
filename: 'light',
66
theme: 'light',
77
source: [
8-
`src/tokens/functional/color/light/*.json5`,
98
`src/tokens/functional/shadow/light.json5`,
109
`src/tokens/functional/border/*.json5`,
1110
`src/tokens/component/*.json5`,
11+
`src/tokens/functional/color/*.json5`,
12+
`src/tokens/functional/color/light/*.json5`,
1213
],
1314
include: [
1415
`src/tokens/functional/size/border.json5`,
@@ -23,6 +24,7 @@ export const themes: TokenBuildInput[] = [
2324
`src/tokens/functional/shadow/light.json5`,
2425
`src/tokens/functional/border/*.json5`,
2526
`src/tokens/component/*.json5`,
27+
`src/tokens/functional/color/*.json5`,
2628
`src/tokens/functional/color/light/*.json5`,
2729
`src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
2830
],
@@ -39,6 +41,7 @@ export const themes: TokenBuildInput[] = [
3941
`src/tokens/functional/shadow/light.json5`,
4042
`src/tokens/functional/border/*.json5`,
4143
`src/tokens/component/*.json5`,
44+
`src/tokens/functional/color/*.json5`,
4245
`src/tokens/functional/color/light/*.json5`,
4346
`src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
4447
],
@@ -55,6 +58,7 @@ export const themes: TokenBuildInput[] = [
5558
`src/tokens/functional/shadow/light.json5`,
5659
`src/tokens/functional/border/*.json5`,
5760
`src/tokens/component/*.json5`,
61+
`src/tokens/functional/color/*.json5`,
5862
`src/tokens/functional/color/light/*.json5`,
5963
`src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
6064
],
@@ -72,6 +76,7 @@ export const themes: TokenBuildInput[] = [
7276
`src/tokens/functional/shadow/dark.json5`,
7377
`src/tokens/functional/border/*.json5`,
7478
`src/tokens/component/*.json5`,
79+
`src/tokens/functional/color/*.json5`,
7580
`src/tokens/functional/color/dark/*.json5`,
7681
],
7782
include: [
@@ -87,6 +92,7 @@ export const themes: TokenBuildInput[] = [
8792
`src/tokens/functional/shadow/dark.json5`,
8893
`src/tokens/functional/border/*.json5`,
8994
`src/tokens/component/*.json5`,
95+
`src/tokens/functional/color/*.json5`,
9096
`src/tokens/functional/color/dark/*.json5`,
9197
`src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
9298
],
@@ -104,6 +110,7 @@ export const themes: TokenBuildInput[] = [
104110
`src/tokens/functional/shadow/dark.json5`,
105111
`src/tokens/functional/border/*.json5`,
106112
`src/tokens/component/*.json5`,
113+
`src/tokens/functional/color/*.json5`,
107114
`src/tokens/functional/color/dark/*.json5`,
108115
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
109116
],
@@ -120,6 +127,7 @@ export const themes: TokenBuildInput[] = [
120127
`src/tokens/functional/shadow/dark.json5`,
121128
`src/tokens/functional/border/*.json5`,
122129
`src/tokens/component/*.json5`,
130+
`src/tokens/functional/color/*.json5`,
123131
`src/tokens/functional/color/dark/*.json5`,
124132
`src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
125133
],
@@ -136,6 +144,7 @@ export const themes: TokenBuildInput[] = [
136144
`src/tokens/functional/shadow/dark.json5`,
137145
`src/tokens/functional/border/*.json5`,
138146
`src/tokens/component/*.json5`,
147+
`src/tokens/functional/color/*.json5`,
139148
`src/tokens/functional/color/dark/*.json5`,
140149
`src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
141150
],

‎src/schemas/colorToken.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const colorToken = baseColorToken
6262
errorMap: e => {
6363
if (e.code === 'unrecognized_keys') {
6464
return {
65-
message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deutranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deutranopia, dark-high-contrast, dark-dimmed`,
65+
message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`,
6666
}
6767
}
6868
return {message: `Error: ${e.code}`}

0 commit comments

Comments
 (0)