@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
package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 ADDED
@@ -0,0 +1,310 @@
1
+ /**
2
+ * Dark protanopia and deuteranopia (colorblind)
3
+ * @extends all functional tokens
4
+ * @description All overwrites for functional color tokens for dark protanopia and deuteranopia color mode are in this file
5
+ */
6
+ {
7
+ fgColor: {
8
+ success: {
9
+ $value: '{base.color.blue.3}',
10
+ $type: 'color',
11
+ },
12
+ danger: {
13
+ $value: '{base.color.orange.4}',
14
+ $type: 'color',
15
+ },
16
+ open: {
17
+ $value: '{base.color.orange.3}',
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.4}',
29
+ $type: 'color',
30
+ alpha: 0.15,
31
+ },
32
+ emphasis: {
33
+ $value: '{base.color.blue.5}',
34
+ $type: 'color',
35
+ },
36
+ },
37
+ danger: {
38
+ muted: {
39
+ $value: '{base.color.orange.4}',
40
+ $type: 'color',
41
+ alpha: 0.1,
42
+ },
43
+ emphasis: {
44
+ $value: '{base.color.orange.5}',
45
+ $type: 'color',
46
+ },
47
+ },
48
+ open: {
49
+ muted: {
50
+ $value: '{base.color.orange.4}',
51
+ $type: 'color',
52
+ alpha: 0.4,
53
+ },
54
+ emphasis: {
55
+ $value: '{base.color.orange.5}',
56
+ $type: 'color',
57
+ },
58
+ },
59
+ closed: {
60
+ muted: {
61
+ $value: '{bgColor.neutral.muted}',
62
+ $type: 'color',
63
+ },
64
+ emphasis: {
65
+ $value: '{bgColor.neutral.emphasis}',
66
+ $type: 'color',
67
+ },
68
+ },
69
+ },
70
+ borderColor: {
71
+ open: {
72
+ muted: {
73
+ $value: '{base.color.orange.4}',
74
+ $type: 'color',
75
+ alpha: 0.4,
76
+ },
77
+ emphasis: {
78
+ $value: '{base.color.orange.4}',
79
+ $type: 'color',
80
+ },
81
+ },
82
+ closed: {
83
+ muted: {
84
+ $value: '{borderColor.muted}',
85
+ $type: 'color',
86
+ },
87
+ emphasis: {
88
+ $value: '{borderColor.emphasis}',
89
+ $type: 'color',
90
+ },
91
+ },
92
+ success: {
93
+ muted: {
94
+ $value: '{base.color.blue.4}',
95
+ $type: 'color',
96
+ alpha: 0.4,
97
+ },
98
+ emphasis: {
99
+ $value: '{base.color.blue.5}',
100
+ $type: 'color',
101
+ },
102
+ },
103
+ danger: {
104
+ muted: {
105
+ $value: '{base.color.orange.4}',
106
+ $type: 'color',
107
+ alpha: 0.4,
108
+ },
109
+ emphasis: {
110
+ $value: '{base.color.orange.5}',
111
+ $type: 'color',
112
+ },
113
+ },
114
+ },
115
+ control: {
116
+ danger: {
117
+ fgColor: {
118
+ hover: {
119
+ $value: '{base.color.orange.3}',
120
+ $type: 'color',
121
+ },
122
+ },
123
+ },
124
+ },
125
+ codeMirror: {
126
+ syntax: {
127
+ fgColor: {
128
+ keyword: {
129
+ $value: '{base.color.orange.3}',
130
+ $type: 'color',
131
+ },
132
+ storage: {
133
+ $value: '{base.color.orange.3}',
134
+ $type: 'color',
135
+ },
136
+ },
137
+ },
138
+ },
139
+ button: {
140
+ primary: {
141
+ bgColor: {
142
+ hover: {
143
+ $value: '{bgColor.success.emphasis}',
144
+ $type: 'color',
145
+ mix: {
146
+ color: '{base.color.blue.3}',
147
+ weight: 0.2,
148
+ },
149
+ },
150
+ active: {
151
+ $value: '{bgColor.success.emphasis}',
152
+ $type: 'color',
153
+ mix: {
154
+ color: '{base.color.blue.3}',
155
+ weight: 0.4,
156
+ },
157
+ },
158
+ disabled: {
159
+ $value: '{base.color.blue.6}',
160
+ $type: 'color',
161
+ mix: null,
162
+ },
163
+ },
164
+ },
165
+ danger: {
166
+ fgColor: {
167
+ rest: {
168
+ $value: '{fgColor.danger}',
169
+ $type: 'color',
170
+ },
171
+ },
172
+ bgColor: {
173
+ hover: {
174
+ $value: '{base.color.orange.6}',
175
+ $type: 'color',
176
+ },
177
+ active: {
178
+ $value: '{base.color.orange.6}',
179
+ $type: 'color',
180
+ mix: {
181
+ color: '{base.color.orange.4}',
182
+ weight: 0.4,
183
+ },
184
+ },
185
+ },
186
+ },
187
+ },
188
+ diffBlob: {
189
+ addition: {
190
+ bgColor: {
191
+ num: {
192
+ $value: '{base.color.blue.3}',
193
+ $type: 'color',
194
+ alpha: 0.3,
195
+ },
196
+ line: {
197
+ $value: '{base.color.blue.4}',
198
+ $type: 'color',
199
+ alpha: 0.15,
200
+ mix: null,
201
+ },
202
+ word: {
203
+ $value: '{base.color.blue.4}',
204
+ $type: 'color',
205
+ alpha: 0.4,
206
+ },
207
+ },
208
+ },
209
+ deletion: {
210
+ bgColor: {
211
+ num: {
212
+ $value: '{base.color.orange.4}',
213
+ $type: 'color',
214
+ alpha: 0.3,
215
+ },
216
+ line: {
217
+ $value: '{base.color.orange.4}',
218
+ $type: 'color',
219
+ alpha: 0.15,
220
+ mix: null,
221
+ },
222
+ word: {
223
+ $value: '{base.color.orange.4}',
224
+ $type: 'color',
225
+ alpha: 0.4,
226
+ },
227
+ },
228
+ },
229
+ },
230
+ color: {
231
+ ansi: {
232
+ green: {
233
+ $value: '{base.color.blue.3}',
234
+ $type: 'color',
235
+ },
236
+ 'green-bright': {
237
+ $value: '{base.color.blue.2}',
238
+ $type: 'color',
239
+ },
240
+ red: {
241
+ $value: '{base.color.orange.3}',
242
+ $type: 'color',
243
+ },
244
+ 'red-bright': {
245
+ $value: '{base.color.orange.2}',
246
+ $type: 'color',
247
+ },
248
+ },
249
+ prettylights: {
250
+ syntax: {
251
+ 'entity-tag': {
252
+ $value: '{base.color.blue.1}',
253
+ $type: 'color',
254
+ },
255
+ keyword: {
256
+ $value: '{base.color.orange.3}',
257
+ $type: 'color',
258
+ },
259
+ brackethighlighter: {
260
+ unmatched: {
261
+ $value: '{base.color.orange.4}',
262
+ $type: 'color',
263
+ },
264
+ },
265
+ invalid: {
266
+ illegal: {
267
+ bg: {
268
+ $value: '{base.color.orange.7}',
269
+ $type: 'color',
270
+ },
271
+ },
272
+ },
273
+ carriage: {
274
+ return: {
275
+ bg: {
276
+ $value: '{base.color.orange.6}',
277
+ $type: 'color',
278
+ },
279
+ },
280
+ },
281
+ 'string-regexp': {
282
+ $value: '{base.color.blue.1}',
283
+ $type: 'color',
284
+ },
285
+ markup: {
286
+ deleted: {
287
+ text: {
288
+ $value: '{base.color.orange.0}',
289
+ $type: 'color',
290
+ },
291
+ bg: {
292
+ $value: '{base.color.orange.8}',
293
+ $type: 'color',
294
+ },
295
+ },
296
+ inserted: {
297
+ text: {
298
+ $value: '{base.color.blue.0}',
299
+ $type: 'color',
300
+ },
301
+ bg: {
302
+ $value: '{base.color.blue.8}',
303
+ $type: 'color',
304
+ },
305
+ },
306
+ },
307
+ },
308
+ },
309
+ },
310
+ }
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 ADDED
@@ -0,0 +1,224 @@
1
+ /**
2
+ * Dark 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.3}',
10
+ $type: 'color',
11
+ },
12
+ severe: {
13
+ $value: '{base.color.red.4}',
14
+ $type: 'color',
15
+ },
16
+ open: {
17
+ $value: '{base.color.red.4}',
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.4}',
29
+ $type: 'color',
30
+ alpha: 0.15,
31
+ },
32
+ emphasis: {
33
+ $value: '{base.color.blue.5}',
34
+ $type: 'color',
35
+ },
36
+ },
37
+ severe: {
38
+ muted: {
39
+ $value: '{base.color.red.4}',
40
+ $type: 'color',
41
+ alpha: 0.1,
42
+ },
43
+ emphasis: {
44
+ $value: '{base.color.red.5}',
45
+ $type: 'color',
46
+ },
47
+ },
48
+ open: {
49
+ muted: {
50
+ $value: '{base.color.red.4}',
51
+ $type: 'color',
52
+ alpha: 0.15,
53
+ },
54
+ emphasis: {
55
+ $value: '{base.color.red.5}',
56
+ $type: 'color',
57
+ },
58
+ },
59
+ closed: {
60
+ muted: {
61
+ $value: '{bgColor.neutral.muted}',
62
+ $type: 'color',
63
+ alpha: 0.1,
64
+ },
65
+ emphasis: {
66
+ $value: '{bgColor.neutral.emphasis}',
67
+ $type: 'color',
68
+ },
69
+ },
70
+ },
71
+ borderColor: {
72
+ success: {
73
+ muted: {
74
+ $value: '{base.color.blue.4}',
75
+ $type: 'color',
76
+ alpha: 0.4,
77
+ },
78
+ emphasis: {
79
+ $value: '{base.color.blue.5}',
80
+ $type: 'color',
81
+ },
82
+ },
83
+ severe: {
84
+ muted: {
85
+ $value: '{base.color.red.4}',
86
+ $type: 'color',
87
+ alpha: 0.4,
88
+ },
89
+ emphasis: {
90
+ $value: '{base.color.red.5}',
91
+ $type: 'color',
92
+ },
93
+ },
94
+ open: {
95
+ muted: {
96
+ $value: '{base.color.red.4}',
97
+ $type: 'color',
98
+ alpha: 0.4,
99
+ },
100
+ emphasis: {
101
+ $value: '{base.color.red.5}',
102
+ $type: 'color',
103
+ },
104
+ },
105
+ closed: {
106
+ muted: {
107
+ $value: '{borderColor.default}',
108
+ $type: 'color',
109
+ },
110
+ emphasis: {
111
+ $value: '{borderColor.emphasis}',
112
+ $type: 'color',
113
+ },
114
+ },
115
+ },
116
+ diffBlob: {
117
+ addition: {
118
+ bgColor: {
119
+ num: {
120
+ $value: '{base.color.blue.3}',
121
+ $type: 'color',
122
+ },
123
+ line: {
124
+ $value: '{base.color.blue.4}',
125
+ $type: 'color',
126
+ },
127
+ word: {
128
+ $value: '{base.color.blue.4}',
129
+ $type: 'color',
130
+ },
131
+ },
132
+ },
133
+ },
134
+ codeMirror: {
135
+ syntax: {
136
+ fgColor: {
137
+ variable: {
138
+ $value: '{base.color.red.2}',
139
+ $type: 'color',
140
+ },
141
+ },
142
+ },
143
+ },
144
+ button: {
145
+ primary: {
146
+ bgColor: {
147
+ hover: {
148
+ $value: '{bgColor.success.emphasis}',
149
+ $type: 'color',
150
+ mix: {
151
+ color: '{base.color.blue.3}',
152
+ weight: 0.2,
153
+ },
154
+ },
155
+ active: {
156
+ $value: '{bgColor.success.emphasis}',
157
+ $type: 'color',
158
+ mix: {
159
+ color: '{base.color.blue.3}',
160
+ weight: 0.4,
161
+ },
162
+ },
163
+ disabled: {
164
+ $value: '{base.color.blue.4}',
165
+ $type: 'color',
166
+ mix: {
167
+ color: '{base.color.blue.2}',
168
+ weight: 0.6,
169
+ },
170
+ },
171
+ },
172
+ },
173
+ },
174
+ color: {
175
+ ansi: {
176
+ green: {
177
+ $value: '{base.color.blue.3}',
178
+ $type: 'color',
179
+ },
180
+ 'green-bright': {
181
+ $value: '{base.color.blue.2}',
182
+ $type: 'color',
183
+ },
184
+ },
185
+ prettylights: {
186
+ syntax: {
187
+ 'string-regexp': {
188
+ $value: '{base.color.blue.1}',
189
+ $type: 'color',
190
+ },
191
+ 'entity-tag': {
192
+ $value: '{base.color.blue.1}',
193
+ $type: 'color',
194
+ },
195
+ variable: {
196
+ $value: '{base.color.red.2}',
197
+ $type: 'color',
198
+ },
199
+ markup: {
200
+ inserted: {
201
+ text: {
202
+ $value: '{base.color.blue.0}',
203
+ $type: 'color',
204
+ },
205
+ bg: {
206
+ $value: '{base.color.blue.8}',
207
+ $type: 'color',
208
+ },
209
+ },
210
+ changed: {
211
+ text: {
212
+ $value: '{base.color.red.0}',
213
+ $type: 'color',
214
+ },
215
+ bg: {
216
+ $value: '{base.color.red.8}',
217
+ $type: 'color',
218
+ },
219
+ },
220
+ },
221
+ },
222
+ },
223
+ },
224
+ }