@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/build/PrimerStyleDictionary.js +1 -0
  2. package/dist/build/formats/cssAdvanced.js +9 -10
  3. package/dist/build/transformers/index.d.ts +1 -0
  4. package/dist/build/transformers/index.js +3 -1
  5. package/dist/css/functional/motion/motion.css +3 -3
  6. package/dist/css/functional/size/border.css +2 -2
  7. package/dist/css/functional/typography/typography.css +11 -11
  8. package/dist/css/primitives.css +16 -16
  9. package/package.json +5 -3
  10. package/src/tokens/base/color/dark/dark.dimmed.json5 +1164 -0
  11. package/src/tokens/base/color/dark/dark.high-contrast.json5 +764 -0
  12. package/src/tokens/base/color/dark/dark.json5 +911 -0
  13. package/src/tokens/base/color/dark/display-dark.json5 +1774 -0
  14. package/src/tokens/base/color/light/display-light.json5 +1774 -0
  15. package/src/tokens/base/color/light/light.high-contrast.json5 +755 -0
  16. package/src/tokens/base/color/light/light.json5 +911 -0
  17. package/src/tokens/base/size/size.json +196 -0
  18. package/src/tokens/base/typography/typography.json +48 -0
  19. package/src/tokens/fallback/color-fallbacks.json +270 -0
  20. package/src/tokens/functional/border/dark.json5 +12 -0
  21. package/src/tokens/functional/border/light.json5 +12 -0
  22. package/src/tokens/functional/color/dark/app-dark.json5 +554 -0
  23. package/src/tokens/functional/color/dark/data-vis-dark.json5 +284 -0
  24. package/src/tokens/functional/color/dark/display-dark.json5 +1258 -0
  25. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +194 -0
  26. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +935 -0
  27. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +310 -0
  28. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +224 -0
  29. package/src/tokens/functional/color/dark/patterns-dark.json5 +3097 -0
  30. package/src/tokens/functional/color/dark/primitives-dark.json5 +1200 -0
  31. package/src/tokens/functional/color/dark/syntax-dark.json5 +559 -0
  32. package/src/tokens/functional/color/light/app-light.json5 +551 -0
  33. package/src/tokens/functional/color/light/data-vis-light.json5 +284 -0
  34. package/src/tokens/functional/color/light/display-light.json5 +1258 -0
  35. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +819 -0
  36. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +327 -0
  37. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +237 -0
  38. package/src/tokens/functional/color/light/patterns-light.json5 +3091 -0
  39. package/src/tokens/functional/color/light/primitives-light.json5 +1193 -0
  40. package/src/tokens/functional/color/light/syntax-light.json5 +559 -0
  41. package/src/tokens/functional/motion/loading.json5 +17 -0
  42. package/src/tokens/functional/motion/patterns.json5 +28 -0
  43. package/src/tokens/functional/shadow/dark.json5 +383 -0
  44. package/src/tokens/functional/shadow/light.json5 +376 -0
  45. package/src/tokens/functional/size/border.json +111 -0
  46. package/src/tokens/functional/size/breakpoints.json +64 -0
  47. package/src/tokens/functional/size/size-coarse.json +28 -0
  48. package/src/tokens/functional/size/size-fine.json +28 -0
  49. package/src/tokens/functional/size/size.json +740 -0
  50. package/src/tokens/functional/size/viewport.json +28 -0
  51. package/src/tokens/functional/typography/typography.json +527 -0
  52. package/src/tokens/removed/color.json +421 -0
  53. package/src/tokens/removed/testing.json5 +4 -0
@@ -0,0 +1,327 @@
1
+ /**
2
+ * Light protanopia and deuteranopia (colorblind)
3
+ * @extends all functional tokens
4
+ * @description All overwrites for functional color tokens for light protanopia and deuteranopia color mode are in this file
5
+ */
6
+ {
7
+ fgColor: {
8
+ success: {
9
+ $value: '{base.color.blue.5}',
10
+ $type: 'color',
11
+ },
12
+ open: {
13
+ $value: '{base.color.orange.5}',
14
+ $type: 'color',
15
+ },
16
+ closed: {
17
+ $value: '{fgColor.muted}',
18
+ $type: 'color',
19
+ },
20
+ danger: {
21
+ $value: '{base.color.orange.5}',
22
+ $type: 'color',
23
+ mix: {
24
+ color: '{base.color.orange.4}',
25
+ weight: 0.05,
26
+ },
27
+ },
28
+ },
29
+ bgColor: {
30
+ success: {
31
+ muted: {
32
+ $value: '{base.color.blue.0}',
33
+ $type: 'color',
34
+ },
35
+ emphasis: {
36
+ $value: '{base.color.blue.5}',
37
+ $type: 'color',
38
+ mix: null
39
+ },
40
+ },
41
+ open: {
42
+ muted: {
43
+ $value: '{base.color.orange.3}',
44
+ $type: 'color',
45
+ alpha: 0.4,
46
+ },
47
+ emphasis: {
48
+ $value: '{base.color.orange.4}',
49
+ $type: 'color',
50
+ },
51
+ },
52
+ danger: {
53
+ muted: {
54
+ $value: '{base.color.orange.0}',
55
+ $type: 'color',
56
+ },
57
+ emphasis: {
58
+ $value: '{base.color.orange.5}',
59
+ $type: 'color',
60
+ },
61
+ },
62
+ closed: {
63
+ muted: {
64
+ $value: '{bgColor.neutral.muted}',
65
+ $type: 'color',
66
+ },
67
+ emphasis: {
68
+ $value: '{bgColor.neutral.emphasis}',
69
+ $type: 'color',
70
+ },
71
+ },
72
+ },
73
+ borderColor: {
74
+ open: {
75
+ muted: {
76
+ $value: '{base.color.orange.3}',
77
+ $type: 'color',
78
+ alpha: 0.4,
79
+ },
80
+ emphasis: {
81
+ $value: '{base.color.orange.4}',
82
+ $type: 'color',
83
+ },
84
+ },
85
+ closed: {
86
+ muted: {
87
+ $value: '{borderColor.default}',
88
+ $type: 'color',
89
+ },
90
+ emphasis: {
91
+ $value: '{borderColor.emphasis}',
92
+ $type: 'color',
93
+ },
94
+ },
95
+ success: {
96
+ muted: {
97
+ $value: '{base.color.blue.3}',
98
+ $type: 'color',
99
+ alpha: 0.4,
100
+ },
101
+ emphasis: {
102
+ $value: '{base.color.blue.5}',
103
+ $type: 'color',
104
+ },
105
+ },
106
+ danger: {
107
+ muted: {
108
+ $value: '{base.color.orange.3}',
109
+ $type: 'color',
110
+ alpha: 0.4,
111
+ },
112
+ emphasis: {
113
+ $value: '{base.color.orange.5}',
114
+ $type: 'color',
115
+ },
116
+ },
117
+ },
118
+ diffBlob: {
119
+ addition: {
120
+ bgColor: {
121
+ num: {
122
+ $value: '{base.color.blue.3}',
123
+ $type: 'color',
124
+ mix: null,
125
+ alpha: 0.4,
126
+ },
127
+ line: {
128
+ $value: '{base.color.blue.0}',
129
+ $type: 'color',
130
+ alpha: 0.5,
131
+ },
132
+ word: {
133
+ $value: '{base.color.blue.3}',
134
+ $type: 'color',
135
+ alpha: 0.4,
136
+ },
137
+ },
138
+ },
139
+ deletion: {
140
+ bgColor: {
141
+ num: {
142
+ $value: '{base.color.orange.3}',
143
+ $type: 'color',
144
+ alpha: 0.4,
145
+ },
146
+ line: {
147
+ $value: '{base.color.orange.0}',
148
+ $type: 'color',
149
+ alpha: 0.5,
150
+ },
151
+ word: {
152
+ $value: '{base.color.orange.2}',
153
+ $type: 'color',
154
+ alpha: 0.5,
155
+ },
156
+ },
157
+ },
158
+ },
159
+ codeMirror: {
160
+ syntax: {
161
+ fgColor: {
162
+ keyword: {
163
+ $value: '{base.color.orange.5}',
164
+ $type: 'color',
165
+ },
166
+ storage: {
167
+ $value: '{base.color.orange.5}',
168
+ $type: 'color',
169
+ },
170
+ },
171
+ },
172
+ },
173
+ button: {
174
+ primary: {
175
+ bgColor: {
176
+ hover: {
177
+ $value: '{bgColor.success.emphasis}',
178
+ $type: 'color',
179
+ mix: {
180
+ color: '{base.color.blue.6}',
181
+ weight: 0.2,
182
+ },
183
+ },
184
+ active: {
185
+ $value: '{bgColor.success.emphasis}',
186
+ $type: 'color',
187
+ mix: {
188
+ color: '{base.color.blue.6}',
189
+ weight: 0.4,
190
+ },
191
+ },
192
+ disabled: {
193
+ $value: '{base.color.blue.4}',
194
+ $type: 'color',
195
+ mix: {
196
+ color: '{base.color.blue.0}',
197
+ weight: 0.6,
198
+ },
199
+ },
200
+ },
201
+ shadow: {
202
+ selected: {
203
+ $value: [
204
+ {
205
+ color: '{base.color.blue.9}',
206
+ alpha: 0.3,
207
+ offsetX: '0px',
208
+ offsetY: '1px',
209
+ blur: '0px',
210
+ spread: '0px',
211
+ inset: true,
212
+ },
213
+ ],
214
+ $type: 'shadow',
215
+ },
216
+ },
217
+ },
218
+ danger: {
219
+ bgColor: {
220
+ hover: {
221
+ $value: '{base.color.orange.6}',
222
+ $type: 'color',
223
+ },
224
+ active: {
225
+ $value: '{base.color.orange.6}',
226
+ $type: 'color',
227
+ mix: {
228
+ color: '{base.color.orange.8}',
229
+ weight: 0.4,
230
+ },
231
+ },
232
+ },
233
+ shadow: {
234
+ selected: {
235
+ $value: [
236
+ {
237
+ color: '{base.color.orange.9}',
238
+ alpha: 0.2,
239
+ offsetX: '0px',
240
+ offsetY: '1px',
241
+ blur: '0px',
242
+ spread: '0px',
243
+ inset: true,
244
+ },
245
+ ],
246
+ $type: 'shadow',
247
+ },
248
+ },
249
+ },
250
+ },
251
+ color: {
252
+ ansi: {
253
+ green: {
254
+ $value: '{base.color.blue.6}',
255
+ $type: 'color',
256
+ },
257
+ 'green-bright': {
258
+ $value: '{base.color.blue.5}',
259
+ $type: 'color',
260
+ },
261
+ red: {
262
+ $value: '{base.color.orange.5}',
263
+ $type: 'color',
264
+ },
265
+ 'red-bright': {
266
+ $value: '{base.color.orange.6}',
267
+ $type: 'color',
268
+ },
269
+ },
270
+ prettylights: {
271
+ syntax: {
272
+ keyword: {
273
+ $value: '{base.color.orange.5}',
274
+ $type: 'color',
275
+ },
276
+ invalid: {
277
+ illegal: {
278
+ bg: {
279
+ $value: '{base.color.orange.7}',
280
+ $type: 'color',
281
+ },
282
+ },
283
+ },
284
+ carriage: {
285
+ return: {
286
+ bg: {
287
+ $value: '{base.color.orange.5}',
288
+ $type: 'color',
289
+ },
290
+ },
291
+ },
292
+ 'string-regexp': {
293
+ $value: '{base.color.blue.6}',
294
+ $type: 'color',
295
+ },
296
+ brackethighlighter: {
297
+ unmatched: {
298
+ $value: '{base.color.orange.7}',
299
+ $type: 'color',
300
+ },
301
+ },
302
+ markup: {
303
+ deleted: {
304
+ text: {
305
+ $value: '{base.color.orange.7}',
306
+ $type: 'color',
307
+ },
308
+ bg: {
309
+ $value: '{base.color.orange.0}',
310
+ $type: 'color',
311
+ },
312
+ },
313
+ inserted: {
314
+ text: {
315
+ $value: '{base.color.blue.6}',
316
+ $type: 'color',
317
+ },
318
+ bg: {
319
+ $value: '{base.color.blue.0}',
320
+ $type: 'color',
321
+ },
322
+ },
323
+ },
324
+ },
325
+ },
326
+ },
327
+ }
@@ -0,0 +1,237 @@
1
+ /**
2
+ * Light tritanopia theme
3
+ * @extends all functional tokens
4
+ * @description All overwrites for functional color tokens for this theme are in this file
5
+ */
6
+ {
7
+ fgColor: {
8
+ success: {
9
+ $value: '{base.color.blue.5}',
10
+ $type: 'color',
11
+ },
12
+ severe: {
13
+ $value: '{base.color.red.5}',
14
+ $type: 'color',
15
+ },
16
+ open: {
17
+ $value: '{base.color.red.5}',
18
+ $type: 'color',
19
+ },
20
+ closed: {
21
+ $value: '{fgColor.muted}',
22
+ $type: 'color',
23
+ },
24
+ },
25
+ bgColor: {
26
+ success: {
27
+ muted: {
28
+ $value: '{base.color.blue.0}',
29
+ $type: 'color',
30
+ },
31
+ emphasis: {
32
+ $value: '{base.color.blue.5}',
33
+ $type: 'color',
34
+ mix: null
35
+ },
36
+ },
37
+ open: {
38
+ muted: {
39
+ $value: '{base.color.red.0}',
40
+ $type: 'color',
41
+ },
42
+ emphasis: {
43
+ $value: '{base.color.red.5}',
44
+ $type: 'color',
45
+ },
46
+ },
47
+ severe: {
48
+ muted: {
49
+ $value: '{base.color.red.0}',
50
+ $type: 'color',
51
+ },
52
+ emphasis: {
53
+ $value: '{base.color.red.5}',
54
+ $type: 'color',
55
+ },
56
+ },
57
+ closed: {
58
+ muted: {
59
+ $value: '{bgColor.neutral.muted}',
60
+ $type: 'color',
61
+ },
62
+ emphasis: {
63
+ $value: '{bgColor.neutral.emphasis}',
64
+ $type: 'color',
65
+ },
66
+ },
67
+ },
68
+ borderColor: {
69
+ success: {
70
+ muted: {
71
+ $value: '{base.color.blue.3}',
72
+ $type: 'color',
73
+ alpha: 0.4,
74
+ },
75
+ emphasis: {
76
+ $value: '{base.color.blue.5}',
77
+ $type: 'color',
78
+ },
79
+ },
80
+ severe: {
81
+ muted: {
82
+ $value: '{base.color.red.3}',
83
+ $type: 'color',
84
+ alpha: 0.4,
85
+ },
86
+ emphasis: {
87
+ $value: '{base.color.red.5}',
88
+ $type: 'color',
89
+ },
90
+ },
91
+ open: {
92
+ muted: {
93
+ $value: '{base.color.red.3}',
94
+ $type: 'color',
95
+ alpha: 0.4,
96
+ },
97
+ emphasis: {
98
+ $value: '{base.color.red.5}',
99
+ $type: 'color',
100
+ },
101
+ },
102
+ closed: {
103
+ muted: {
104
+ $value: '{borderColor.default}',
105
+ $type: 'color',
106
+ },
107
+ emphasis: {
108
+ $value: '{borderColor.emphasis}',
109
+ $type: 'color',
110
+ },
111
+ },
112
+ },
113
+ diffBlob: {
114
+ addition: {
115
+ bgColor: {
116
+ num: {
117
+ $value: '{base.color.blue.1}',
118
+ $type: 'color',
119
+ mix: {
120
+ color: '{base.color.blue.0}',
121
+ weight: 0.8,
122
+ },
123
+ },
124
+ line: {
125
+ $value: '{base.color.blue.0}',
126
+ $type: 'color',
127
+ },
128
+ word: {
129
+ $value: '{base.color.blue.1}',
130
+ $type: 'color',
131
+ },
132
+ },
133
+ },
134
+ },
135
+ codeMirror: {
136
+ syntax: {
137
+ fgColor: {
138
+ variable: {
139
+ $value: '{base.color.red.6}',
140
+ $type: 'color',
141
+ },
142
+ },
143
+ },
144
+ },
145
+ button: {
146
+ primary: {
147
+ bgColor: {
148
+ hover: {
149
+ $value: '{bgColor.success.emphasis}',
150
+ $type: 'color',
151
+ mix: {
152
+ color: '{base.color.blue.6}',
153
+ weight: 0.2,
154
+ },
155
+ },
156
+ active: {
157
+ $value: '{bgColor.success.emphasis}',
158
+ $type: 'color',
159
+ mix: {
160
+ color: '{base.color.blue.6}',
161
+ weight: 0.4,
162
+ },
163
+ },
164
+ disabled: {
165
+ $value: '{base.color.blue.4}',
166
+ $type: 'color',
167
+ mix: {
168
+ color: '{base.color.blue.0}',
169
+ weight: 0.6,
170
+ },
171
+ },
172
+ },
173
+ shadow: {
174
+ selected: {
175
+ $value: [
176
+ {
177
+ color: '{base.color.blue.9}',
178
+ alpha: 0.3,
179
+ offsetX: '0px',
180
+ offsetY: '1px',
181
+ blur: '0px',
182
+ spread: '0px',
183
+ inset: true,
184
+ },
185
+ ],
186
+ $type: 'shadow',
187
+ },
188
+ },
189
+ },
190
+ },
191
+ color: {
192
+ ansi: {
193
+ green: {
194
+ $value: '{base.color.blue.6}',
195
+ $type: 'color',
196
+ },
197
+ 'green-bright': {
198
+ $value: '{base.color.blue.5}',
199
+ $type: 'color',
200
+ },
201
+ },
202
+ prettylights: {
203
+ syntax: {
204
+ 'string-regexp': {
205
+ $value: '{base.color.blue.6}',
206
+ $type: 'color',
207
+ },
208
+ variable: {
209
+ $value: '{base.color.red.6}',
210
+ $type: 'color',
211
+ },
212
+ markup: {
213
+ inserted: {
214
+ text: {
215
+ $value: '{base.color.blue.6}',
216
+ $type: 'color',
217
+ },
218
+ bg: {
219
+ $value: '{base.color.blue.0}',
220
+ $type: 'color',
221
+ },
222
+ },
223
+ changed: {
224
+ text: {
225
+ $value: '{base.color.red.6}',
226
+ $type: 'color',
227
+ },
228
+ bg: {
229
+ $value: '{base.color.red.1}',
230
+ $type: 'color',
231
+ },
232
+ },
233
+ },
234
+ },
235
+ },
236
+ },
237
+ }