@primer/primitives 10.0.0-rc.e413e85d → 10.0.0-rc.f5f47b7d

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 (66) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +40 -22
  2. package/dist/css/functional/themes/dark-dimmed.css +42 -24
  3. package/dist/css/functional/themes/dark-high-contrast.css +40 -22
  4. package/dist/css/functional/themes/dark-tritanopia.css +40 -22
  5. package/dist/css/functional/themes/dark.css +40 -22
  6. package/dist/css/functional/themes/light-colorblind.css +40 -22
  7. package/dist/css/functional/themes/light-high-contrast.css +42 -24
  8. package/dist/css/functional/themes/light-tritanopia.css +40 -22
  9. package/dist/css/functional/themes/light.css +40 -22
  10. package/dist/css/functional/typography/typography.css +20 -20
  11. package/dist/css/primitives.css +20 -20
  12. package/dist/docs/functional/themes/dark-colorblind.json +504 -251
  13. package/dist/docs/functional/themes/dark-dimmed.json +531 -256
  14. package/dist/docs/functional/themes/dark-high-contrast.json +359 -148
  15. package/dist/docs/functional/themes/dark-tritanopia.json +506 -257
  16. package/dist/docs/functional/themes/dark.json +515 -256
  17. package/dist/docs/functional/themes/light-colorblind.json +326 -65
  18. package/dist/docs/functional/themes/light-high-contrast.json +304 -63
  19. package/dist/docs/functional/themes/light-tritanopia.json +278 -61
  20. package/dist/docs/functional/themes/light.json +307 -58
  21. package/dist/figma/figma.json +8 -8
  22. package/dist/figma/scales/dark-dimmed.json +2880 -0
  23. package/dist/figma/scales/dark-high-constrast.json +2880 -0
  24. package/dist/figma/scales/dark.json +2880 -0
  25. package/dist/figma/scales/light-high-constrast.json +2880 -0
  26. package/dist/figma/scales/light.json +2880 -0
  27. package/dist/figma/themes/dark-colorblind.json +128 -15
  28. package/dist/figma/themes/dark-dimmed.json +211 -52
  29. package/dist/figma/themes/dark-high-contrast.json +119 -25
  30. package/dist/figma/themes/dark-tritanopia.json +140 -28
  31. package/dist/figma/themes/dark.json +195 -52
  32. package/dist/figma/themes/light-colorblind.json +175 -16
  33. package/dist/figma/themes/light-high-contrast.json +153 -26
  34. package/dist/figma/themes/light-tritanopia.json +145 -35
  35. package/dist/figma/themes/light.json +185 -44
  36. package/dist/internalCss/dark-colorblind.css +40 -22
  37. package/dist/internalCss/dark-dimmed.css +42 -24
  38. package/dist/internalCss/dark-high-contrast.css +40 -22
  39. package/dist/internalCss/dark-tritanopia.css +40 -22
  40. package/dist/internalCss/dark.css +40 -22
  41. package/dist/internalCss/light-colorblind.css +40 -22
  42. package/dist/internalCss/light-high-contrast.css +42 -24
  43. package/dist/internalCss/light-tritanopia.css +40 -22
  44. package/dist/internalCss/light.css +40 -22
  45. package/dist/styleLint/functional/themes/dark-colorblind.json +504 -251
  46. package/dist/styleLint/functional/themes/dark-dimmed.json +531 -256
  47. package/dist/styleLint/functional/themes/dark-high-contrast.json +358 -147
  48. package/dist/styleLint/functional/themes/dark-tritanopia.json +506 -257
  49. package/dist/styleLint/functional/themes/dark.json +515 -256
  50. package/dist/styleLint/functional/themes/light-colorblind.json +326 -65
  51. package/dist/styleLint/functional/themes/light-high-contrast.json +304 -63
  52. package/dist/styleLint/functional/themes/light-tritanopia.json +278 -61
  53. package/dist/styleLint/functional/themes/light.json +307 -58
  54. package/package.json +2 -8
  55. package/src/tokens/functional/color/dark/app-dark.json5 +203 -88
  56. package/src/tokens/functional/color/dark/display-dark.json5 +95 -95
  57. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -8
  58. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +39 -26
  59. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +54 -28
  60. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +36 -13
  61. package/src/tokens/functional/color/dark/patterns-dark.json5 +4 -4
  62. package/src/tokens/functional/color/dark/primitives-dark.json5 +1 -1
  63. package/src/tokens/functional/color/light/app-light.json5 +195 -85
  64. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -25
  65. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +59 -26
  66. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +62 -10
package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 CHANGED
@@ -116,14 +116,6 @@
116
116
  },
117
117
  },
118
118
  },
119
- diffBlob: {
120
- expander: {
121
- iconColor: {
122
- $value: '{fgColor.default}',
123
- $type: 'color',
124
- },
125
- },
126
- },
127
119
  overlay: {
128
120
  backdrop: {
129
121
  bgColor: {
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -441,7 +441,7 @@
441
441
  $extensions: {
442
442
  'org.primer.figma': {
443
443
  collection: 'mode',
444
- mode: 'light',
444
+ mode: 'dark',
445
445
  group: 'component (internal)',
446
446
  scopes: ['fgColor'],
447
447
  },
@@ -509,51 +509,64 @@
509
509
  },
510
510
  },
511
511
  diffBlob: {
512
- addition: {
512
+ additionLine: {
513
513
  fgColor: {
514
- text: {
515
- $value: '{fgColor.onEmphasis}',
516
- $type: 'color',
517
- },
514
+ $value: '{fgColor.onEmphasis}',
515
+ $type: 'color',
518
516
  },
519
517
  bgColor: {
520
- word: {
521
- $value: '{bgColor.success.emphasis}',
522
- $type: 'color',
523
- alpha: 1,
524
- },
518
+ $value: '{bgColor.success.muted}',
519
+ $type: 'color',
520
+ alpha: 0.2,
521
+ },
522
+ },
523
+ additionWord: {
524
+ bgColor: {
525
+ $value: '{bgColor.success.emphasis}',
526
+ $type: 'color',
527
+ alpha: 1,
525
528
  },
526
529
  },
527
- deletion: {
530
+ deletionLine: {
528
531
  fgColor: {
529
- text: {
530
- $value: '{fgColor.onEmphasis}',
531
- $type: 'color',
532
- },
532
+ $value: '{fgColor.onEmphasis}',
533
+ $type: 'color',
533
534
  },
534
535
  bgColor: {
535
- word: {
536
- $value: '{bgColor.danger.emphasis}',
537
- $type: 'color',
538
- alpha: 1,
539
- },
536
+ $value: '{bgColor.danger.muted}',
537
+ $type: 'color',
538
+ alpha: 0.2,
540
539
  },
541
540
  },
542
- expander: {
543
- iconColor: {
544
- $value: '{fgColor.default}',
541
+ deletionWord: {
542
+ bgColor: {
543
+ $value: '{bgColor.danger.emphasis}',
545
544
  $type: 'color',
545
+ alpha: 1,
546
546
  },
547
547
  },
548
- hunk: {
548
+ hunkNum: {
549
549
  bgColor: {
550
- num: {
550
+ rest: {
551
551
  $value: '{base.color.blue.4}',
552
552
  $type: 'color',
553
553
  alpha: 0.4,
554
554
  },
555
555
  },
556
556
  },
557
+ hunkLine: {
558
+ bgColor: {
559
+ $value: '{bgColor.accent.muted}',
560
+ $type: 'color',
561
+ alpha: 0.2,
562
+ },
563
+ },
564
+ expander: {
565
+ iconColor: {
566
+ $value: '{fgColor.default}',
567
+ $type: 'color',
568
+ },
569
+ },
557
570
  },
558
571
  codeMirror: {
559
572
  selection: {
package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 CHANGED
@@ -192,43 +192,69 @@
192
192
  },
193
193
  },
194
194
  diffBlob: {
195
- addition: {
195
+ additionNum: {
196
196
  bgColor: {
197
- num: {
198
- $value: '{base.color.blue.3}',
199
- $type: 'color',
200
- alpha: 0.3,
201
- },
202
- line: {
203
- $value: '{base.color.blue.4}',
204
- $type: 'color',
205
- alpha: 0.15,
206
- mix: null,
207
- },
208
- word: {
209
- $value: '{base.color.blue.4}',
210
- $type: 'color',
211
- alpha: 0.4,
212
- },
197
+ $value: '{base.color.blue.3}',
198
+ $type: 'color',
199
+ alpha: 0.3,
213
200
  },
214
201
  },
215
- deletion: {
202
+ additionWord: {
216
203
  bgColor: {
217
- num: {
218
- $value: '{base.color.orange.4}',
204
+ $value: '{base.color.blue.4}',
205
+ $type: 'color',
206
+ alpha: 0.4,
207
+ },
208
+ },
209
+ deletionNum: {
210
+ bgColor: {
211
+ $value: '{base.color.orange.4}',
212
+ $type: 'color',
213
+ alpha: 0.3,
214
+ },
215
+ },
216
+ deletionLine: {
217
+ bgColor: {
218
+ $value: '{base.color.orange.4}',
219
+ $type: 'color',
220
+ alpha: 0.15,
221
+ mix: null,
222
+ },
223
+ },
224
+ deletionWord: {
225
+ bgColor: {
226
+ $value: '{base.color.orange.4}',
227
+ $type: 'color',
228
+ alpha: 0.4,
229
+ },
230
+ },
231
+ hunkNum: {
232
+ bgColor: {
233
+ rest: {
234
+ $value: '{base.color.neutral.6}',
219
235
  $type: 'color',
220
- alpha: 0.3,
236
+ mix: null,
237
+ $extensions: {
238
+ alpha: 1,
239
+ },
221
240
  },
222
- line: {
223
- $value: '{base.color.orange.4}',
241
+ hover: {
242
+ $value: '{base.color.neutral.8}',
224
243
  $type: 'color',
225
- alpha: 0.15,
226
244
  mix: null,
245
+ $extensions: {
246
+ alpha: 1,
247
+ },
227
248
  },
228
- word: {
229
- $value: '{base.color.orange.4}',
230
- $type: 'color',
231
- alpha: 0.4,
249
+ },
250
+ },
251
+ hunkLine: {
252
+ bgColor: {
253
+ $value: '{base.color.neutral.3}',
254
+ $type: 'color',
255
+ mix: null,
256
+ $extensions: {
257
+ alpha: 1,
232
258
  },
233
259
  },
234
260
  },
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 CHANGED
@@ -123,31 +123,54 @@
123
123
  },
124
124
  },
125
125
  diffBlob: {
126
- addition: {
126
+ additionNum: {
127
127
  bgColor: {
128
- num: {
129
- $value: '{base.color.blue.3}',
130
- $type: 'color',
131
- $extensions: {
132
- alpha: 0.3,
133
- },
128
+ $value: '{base.color.blue.3}',
129
+ $type: 'color',
130
+ $extensions: {
131
+ alpha: 0.3,
134
132
  },
135
- line: {
136
- $value: '{base.color.blue.4}',
133
+ },
134
+ },
135
+ additionWord: {
136
+ bgColor: {
137
+ $value: '{base.color.blue.4}',
138
+ $type: 'color',
139
+ $extensions: {
140
+ alpha: 0.4,
141
+ },
142
+ },
143
+ },
144
+ hunkNum: {
145
+ bgColor: {
146
+ rest: {
147
+ $value: '{base.color.neutral.6}',
137
148
  $type: 'color',
149
+ mix: null,
138
150
  $extensions: {
139
- alpha: 0.15,
151
+ alpha: 1,
140
152
  },
141
153
  },
142
- word: {
143
- $value: '{base.color.blue.4}',
154
+ hover: {
155
+ $value: '{base.color.neutral.8}',
144
156
  $type: 'color',
157
+ mix: null,
145
158
  $extensions: {
146
- alpha: 0.4,
159
+ alpha: 1,
147
160
  },
148
161
  },
149
162
  },
150
163
  },
164
+ hunkLine: {
165
+ bgColor: {
166
+ $value: '{base.color.neutral.3}',
167
+ $type: 'color',
168
+ mix: null,
169
+ $extensions: {
170
+ alpha: 1,
171
+ },
172
+ },
173
+ },
151
174
  },
152
175
  codeMirror: {
153
176
  syntax: {
package/src/tokens/functional/color/dark/patterns-dark.json5 CHANGED
@@ -773,7 +773,7 @@
773
773
  scopes: ['bgColor'],
774
774
  },
775
775
  },
776
- }
776
+ },
777
777
  },
778
778
  },
779
779
  button: {
@@ -1131,7 +1131,7 @@
1131
1131
  $extensions: {
1132
1132
  'org.primer.figma': {
1133
1133
  collection: 'mode',
1134
- mode: 'light',
1134
+ mode: 'dark',
1135
1135
  group: 'component (internal)',
1136
1136
  scopes: ['fgColor'],
1137
1137
  },
@@ -1538,7 +1538,7 @@
1538
1538
  $extensions: {
1539
1539
  'org.primer.figma': {
1540
1540
  collection: 'mode',
1541
- mode: 'light',
1541
+ mode: 'dark',
1542
1542
  group: 'component (internal)',
1543
1543
  scopes: ['fgColor'],
1544
1544
  },
@@ -1550,7 +1550,7 @@
1550
1550
  $extensions: {
1551
1551
  'org.primer.figma': {
1552
1552
  collection: 'mode',
1553
- mode: 'light',
1553
+ mode: 'dark',
1554
1554
  group: 'component (internal)',
1555
1555
  scopes: ['bgColor'],
1556
1556
  },
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -63,7 +63,7 @@
63
63
  $extensions: {
64
64
  'org.primer.figma': {
65
65
  collection: 'mode',
66
- mode: 'light',
66
+ mode: 'dark',
67
67
  group: 'semantic',
68
68
  scopes: ['fgColor'],
69
69
  },
package/src/tokens/functional/color/light/app-light.json5 CHANGED
@@ -46,79 +46,191 @@
46
46
  },
47
47
  },
48
48
  diffBlob: {
49
- addition: {
49
+ additionLine: {
50
50
  fgColor: {
51
- text: {
52
- $value: '{fgColor.default}',
53
- $type: 'color',
54
- $extensions: {
55
- 'org.primer.figma': {
56
- collection: 'mode',
57
- mode: 'light',
58
- group: 'component',
59
- scopes: ['fgColor'],
60
- },
51
+ $value: '{fgColor.default}',
52
+ $type: 'color',
53
+ $extensions: {
54
+ 'org.primer.figma': {
55
+ collection: 'mode',
56
+ mode: 'light',
57
+ group: 'component',
58
+ scopes: ['fgColor'],
61
59
  },
62
60
  },
63
- num: {
64
- $value: '{fgColor.default}',
65
- $type: 'color',
66
- $extensions: {
67
- 'org.primer.figma': {
68
- collection: 'mode',
69
- mode: 'light',
70
- group: 'component',
71
- scopes: ['fgColor'],
72
- },
61
+ },
62
+ bgColor: {
63
+ $value: '{bgColor.success.muted}',
64
+ $type: 'color',
65
+ $extensions: {
66
+ 'org.primer.figma': {
67
+ collection: 'mode',
68
+ mode: 'light',
69
+ group: 'component',
70
+ scopes: ['bgColor'],
71
+ },
72
+ },
73
+ },
74
+ },
75
+ additionWord: {
76
+ fgColor: {
77
+ $value: '{fgColor.default}',
78
+ $type: 'color',
79
+ $extensions: {
80
+ 'org.primer.figma': {
81
+ collection: 'mode',
82
+ mode: 'light',
83
+ group: 'component',
84
+ scopes: ['fgColor'],
73
85
  },
74
86
  },
75
87
  },
76
88
  bgColor: {
77
- num: {
78
- $value: '{base.color.green.1}',
79
- $type: 'color',
80
- $extensions: {
81
- 'org.primer.figma': {
82
- collection: 'mode',
83
- mode: 'light',
84
- group: 'component',
85
- scopes: ['bgColor'],
86
- },
89
+ $value: '{base.color.green.1}',
90
+ $type: 'color',
91
+ $extensions: {
92
+ 'org.primer.figma': {
93
+ collection: 'mode',
94
+ mode: 'light',
95
+ group: 'component',
96
+ scopes: ['bgColor'],
87
97
  },
88
- mix: {
89
- color: '{base.color.green.0}',
90
- weight: 0.8,
98
+ },
99
+ },
100
+ },
101
+ additionNum: {
102
+ fgColor: {
103
+ $value: '{fgColor.default}',
104
+ $type: 'color',
105
+ $extensions: {
106
+ 'org.primer.figma': {
107
+ collection: 'mode',
108
+ mode: 'light',
109
+ group: 'component',
110
+ scopes: ['fgColor'],
91
111
  },
92
112
  },
93
- line: {
94
- $value: '{base.color.green.0}',
95
- $type: 'color',
96
- $extensions: {
97
- 'org.primer.figma': {
98
- collection: 'mode',
99
- mode: 'light',
100
- group: 'component',
101
- scopes: ['bgColor'],
102
- },
113
+ },
114
+ bgColor: {
115
+ $value: '{base.color.green.1}',
116
+ $type: 'color',
117
+ $extensions: {
118
+ 'org.primer.figma': {
119
+ collection: 'mode',
120
+ mode: 'light',
121
+ group: 'component',
122
+ scopes: ['bgColor'],
103
123
  },
104
124
  },
105
- word: {
106
- $value: '{base.color.green.1}',
107
- $type: 'color',
108
- $extensions: {
109
- 'org.primer.figma': {
110
- collection: 'mode',
111
- mode: 'light',
112
- group: 'component',
113
- scopes: ['bgColor'],
114
- },
125
+ },
126
+ },
127
+ deletionLine: {
128
+ fgColor: {
129
+ $value: '{fgColor.default}',
130
+ $type: 'color',
131
+ $extensions: {
132
+ 'org.primer.figma': {
133
+ collection: 'mode',
134
+ mode: 'light',
135
+ group: 'component',
136
+ scopes: ['fgColor'],
137
+ },
138
+ },
139
+ },
140
+ bgColor: {
141
+ $value: '{bgColor.danger.muted}',
142
+ $type: 'color',
143
+ $extensions: {
144
+ 'org.primer.figma': {
145
+ collection: 'mode',
146
+ mode: 'light',
147
+ group: 'component',
148
+ scopes: ['bgColor'],
149
+ },
150
+ },
151
+ },
152
+ },
153
+ deletionWord: {
154
+ fgColor: {
155
+ $value: '{fgColor.default}',
156
+ $type: 'color',
157
+ $extensions: {
158
+ 'org.primer.figma': {
159
+ collection: 'mode',
160
+ mode: 'light',
161
+ group: 'component',
162
+ scopes: ['fgColor'],
163
+ },
164
+ },
165
+ },
166
+ bgColor: {
167
+ $value: '{base.color.red.1}',
168
+ $type: 'color',
169
+ $extensions: {
170
+ 'org.primer.figma': {
171
+ collection: 'mode',
172
+ mode: 'light',
173
+ group: 'component',
174
+ scopes: ['bgColor'],
115
175
  },
116
176
  },
117
177
  },
118
178
  },
119
- deletion: {
179
+ deletionNum: {
120
180
  fgColor: {
121
- text: {
181
+ $value: '{fgColor.default}',
182
+ $type: 'color',
183
+ $extensions: {
184
+ 'org.primer.figma': {
185
+ collection: 'mode',
186
+ mode: 'light',
187
+ group: 'component',
188
+ scopes: ['fgColor'],
189
+ },
190
+ },
191
+ },
192
+ bgColor: {
193
+ $value: '{base.color.red.1}',
194
+ $type: 'color',
195
+ $extensions: {
196
+ 'org.primer.figma': {
197
+ collection: 'mode',
198
+ mode: 'light',
199
+ group: 'component',
200
+ scopes: ['bgColor'],
201
+ },
202
+ },
203
+ },
204
+ },
205
+ hunkLine: {
206
+ bgColor: {
207
+ $value: '{bgColor.accent.muted}',
208
+ $type: 'color',
209
+ $extensions: {
210
+ 'org.primer.figma': {
211
+ collection: 'mode',
212
+ mode: 'light',
213
+ group: 'component',
214
+ scopes: ['bgColor'],
215
+ },
216
+ },
217
+ },
218
+ fgColor: {
219
+ $value: '{fgColor.muted}',
220
+ $type: 'color',
221
+ $extensions: {
222
+ 'org.primer.figma': {
223
+ collection: 'mode',
224
+ mode: 'light',
225
+ group: 'component',
226
+ scopes: ['fgColor'],
227
+ },
228
+ },
229
+ },
230
+ },
231
+ hunkNum: {
232
+ fgColor: {
233
+ rest: {
122
234
  $value: '{fgColor.default}',
123
235
  $type: 'color',
124
236
  $extensions: {
@@ -130,8 +242,8 @@
130
242
  },
131
243
  },
132
244
  },
133
- num: {
134
- $value: '{fgColor.default}',
245
+ hover: {
246
+ $value: '{fgColor.onEmphasis}',
135
247
  $type: 'color',
136
248
  $extensions: {
137
249
  'org.primer.figma': {
@@ -144,8 +256,8 @@
144
256
  },
145
257
  },
146
258
  bgColor: {
147
- num: {
148
- $value: '{base.color.red.1}',
259
+ rest: {
260
+ $value: '{base.color.blue.1}',
149
261
  $type: 'color',
150
262
  $extensions: {
151
263
  'org.primer.figma': {
@@ -156,8 +268,8 @@
156
268
  },
157
269
  },
158
270
  },
159
- line: {
160
- $value: '{base.color.red.0}',
271
+ hover: {
272
+ $value: '{bgColor.accent.emphasis}',
161
273
  $type: 'color',
162
274
  $extensions: {
163
275
  'org.primer.figma': {
@@ -168,35 +280,33 @@
168
280
  },
169
281
  },
170
282
  },
171
- word: {
172
- $value: '{base.color.red.3}',
173
- $type: 'color',
174
- $extensions: {
175
- 'org.primer.figma': {
176
- collection: 'mode',
177
- mode: 'light',
178
- group: 'component',
179
- scopes: ['bgColor'],
180
- },
283
+ },
284
+ },
285
+ emptyNum: {
286
+ bgColor: {
287
+ $value: '{bgColor.muted}',
288
+ $type: 'color',
289
+ $extensions: {
290
+ 'org.primer.figma': {
291
+ collection: 'mode',
292
+ mode: 'light',
293
+ group: 'component',
294
+ scopes: ['bgColor'],
181
295
  },
182
- alpha: 0.4,
183
296
  },
184
297
  },
185
298
  },
186
- hunk: {
299
+ emptyLine: {
187
300
  bgColor: {
188
- num: {
189
- $value: '{base.color.blue.3}',
190
- $type: 'color',
191
- $extensions: {
192
- 'org.primer.figma': {
193
- collection: 'mode',
194
- mode: 'light',
195
- group: 'component',
196
- scopes: ['bgColor'],
197
- },
301
+ $value: '{bgColor.muted}',
302
+ $type: 'color',
303
+ $extensions: {
304
+ 'org.primer.figma': {
305
+ collection: 'mode',
306
+ mode: 'light',
307
+ group: 'component',
308
+ scopes: ['bgColor'],
198
309
  },
199
- alpha: 0.4,
200
310
  },
201
311
  },
202
312
  },