@primer/primitives 10.1.0 → 10.2.0-rc.265b4e6a

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 (31) hide show
  1. package/dist/build/primerStyleDictionary.js +2 -0
  2. package/dist/build/schemas/colorToken.d.ts +1 -6
  3. package/dist/build/schemas/colorToken.js +1 -1
  4. package/dist/build/transformers/colorAlphaToCss.d.ts +3 -0
  5. package/dist/build/transformers/colorAlphaToCss.js +23 -0
  6. package/dist/build/transformers/colorToHex.js +1 -2
  7. package/dist/docs/functional/themes/dark-colorblind.json +12 -32
  8. package/dist/docs/functional/themes/dark-dimmed.json +4 -4
  9. package/dist/docs/functional/themes/dark-high-contrast.json +4 -4
  10. package/dist/docs/functional/themes/dark-tritanopia.json +22 -58
  11. package/dist/docs/functional/themes/dark.json +6 -6
  12. package/dist/docs/functional/themes/light-colorblind.json +2 -6
  13. package/dist/docs/functional/themes/light-tritanopia.json +2 -6
  14. package/dist/figma/themes/dark-colorblind.json +9 -8
  15. package/dist/figma/themes/dark-dimmed.json +6 -4
  16. package/dist/figma/themes/dark-high-contrast.json +4 -2
  17. package/dist/figma/themes/dark-tritanopia.json +13 -11
  18. package/dist/figma/themes/dark.json +15 -12
  19. package/dist/styleLint/functional/themes/dark-colorblind.json +12 -32
  20. package/dist/styleLint/functional/themes/dark-dimmed.json +4 -4
  21. package/dist/styleLint/functional/themes/dark-high-contrast.json +4 -4
  22. package/dist/styleLint/functional/themes/dark-tritanopia.json +22 -58
  23. package/dist/styleLint/functional/themes/dark.json +6 -6
  24. package/dist/styleLint/functional/themes/light-colorblind.json +2 -6
  25. package/dist/styleLint/functional/themes/light-tritanopia.json +2 -6
  26. package/package.json +1 -1
  27. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -15
  28. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +9 -27
  29. package/src/tokens/functional/color/dark/primitives-dark.json5 +3 -3
  30. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +1 -3
  31. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +1 -3
package/dist/styleLint/functional/themes/dark-tritanopia.json CHANGED
@@ -168,17 +168,13 @@
168
168
  "diffBlob-additionWord-bgColor": {
169
169
  "$value": "#388bfd66",
170
170
  "$type": "color",
171
- "$extensions": {
172
- "alpha": 0.4
173
- },
171
+ "alpha": 0.4,
174
172
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
175
173
  "isSource": true,
176
174
  "original": {
177
175
  "$value": "{base.color.blue.4}",
178
176
  "$type": "color",
179
- "$extensions": {
180
- "alpha": 0.4
181
- }
177
+ "alpha": 0.4
182
178
  },
183
179
  "name": "diffBlob-additionWord-bgColor",
184
180
  "attributes": {},
@@ -214,17 +210,13 @@
214
210
  "diffBlob-additionNum-bgColor": {
215
211
  "$value": "#58a6ff4d",
216
212
  "$type": "color",
217
- "$extensions": {
218
- "alpha": 0.3
219
- },
213
+ "alpha": 0.3,
220
214
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
221
215
  "isSource": true,
222
216
  "original": {
223
217
  "$value": "{base.color.blue.3}",
224
218
  "$type": "color",
225
- "$extensions": {
226
- "alpha": 0.3
227
- }
219
+ "alpha": 0.3
228
220
  },
229
221
  "name": "diffBlob-additionNum-bgColor",
230
222
  "attributes": {},
@@ -426,17 +418,13 @@
426
418
  "diffBlob-hunkLine-bgColor": {
427
419
  "$value": "#212830",
428
420
  "$type": "color",
429
- "$extensions": {
430
- "alpha": 1
431
- },
421
+ "alpha": 1,
432
422
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
433
423
  "isSource": true,
434
424
  "original": {
435
425
  "$value": "{base.color.neutral.3}",
436
426
  "$type": "color",
437
- "$extensions": {
438
- "alpha": 1
439
- }
427
+ "alpha": 1
440
428
  },
441
429
  "name": "diffBlob-hunkLine-bgColor",
442
430
  "attributes": {},
@@ -499,17 +487,13 @@
499
487
  "diffBlob-hunkNum-bgColor-rest": {
500
488
  "$value": "#2f3742",
501
489
  "$type": "color",
502
- "$extensions": {
503
- "alpha": 1
504
- },
490
+ "alpha": 1,
505
491
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
506
492
  "isSource": true,
507
493
  "original": {
508
494
  "$value": "{base.color.neutral.6}",
509
495
  "$type": "color",
510
- "$extensions": {
511
- "alpha": 1
512
- }
496
+ "alpha": 1
513
497
  },
514
498
  "name": "diffBlob-hunkNum-bgColor-rest",
515
499
  "attributes": {},
@@ -518,17 +502,13 @@
518
502
  "diffBlob-hunkNum-bgColor-hover": {
519
503
  "$value": "#656c76",
520
504
  "$type": "color",
521
- "$extensions": {
522
- "alpha": 1
523
- },
505
+ "alpha": 1,
524
506
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
525
507
  "isSource": true,
526
508
  "original": {
527
509
  "$value": "{base.color.neutral.8}",
528
510
  "$type": "color",
529
- "$extensions": {
530
- "alpha": 1
531
- }
511
+ "alpha": 1
532
512
  },
533
513
  "name": "diffBlob-hunkNum-bgColor-hover",
534
514
  "attributes": {},
@@ -12022,8 +12002,8 @@
12022
12002
  "fgColor-disabled": {
12023
12003
  "$value": "#656c7699",
12024
12004
  "$type": "color",
12005
+ "alpha": 0.6,
12025
12006
  "$extensions": {
12026
- "alpha": 0.6,
12027
12007
  "org.primer.figma": {
12028
12008
  "collection": "mode",
12029
12009
  "group": "semantic",
@@ -12035,8 +12015,8 @@
12035
12015
  "original": {
12036
12016
  "$value": "{base.color.neutral.8}",
12037
12017
  "$type": "color",
12018
+ "alpha": 0.6,
12038
12019
  "$extensions": {
12039
- "alpha": 0.6,
12040
12020
  "org.primer.figma": {
12041
12021
  "collection": "mode",
12042
12022
  "group": "semantic",
@@ -12910,8 +12890,8 @@
12910
12890
  "bgColor-danger-muted": {
12911
12891
  "$value": "#f851491a",
12912
12892
  "$type": "color",
12893
+ "alpha": 0.1,
12913
12894
  "$extensions": {
12914
- "alpha": 0.1,
12915
12895
  "org.primer.figma": {
12916
12896
  "collection": "mode",
12917
12897
  "group": "semantic",
@@ -12926,8 +12906,8 @@
12926
12906
  "original": {
12927
12907
  "$value": "{base.color.red.4}",
12928
12908
  "$type": "color",
12909
+ "alpha": 0.1,
12929
12910
  "$extensions": {
12930
- "alpha": 0.1,
12931
12911
  "org.primer.figma": {
12932
12912
  "collection": "mode",
12933
12913
  "group": "semantic",
@@ -13492,17 +13472,13 @@
13492
13472
  "borderColor-success-muted": {
13493
13473
  "$value": "#388bfd66",
13494
13474
  "$type": "color",
13495
- "$extensions": {
13496
- "alpha": 0.4
13497
- },
13475
+ "alpha": 0.4,
13498
13476
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
13499
13477
  "isSource": true,
13500
13478
  "original": {
13501
13479
  "$value": "{base.color.blue.4}",
13502
13480
  "$type": "color",
13503
- "$extensions": {
13504
- "alpha": 0.4
13505
- }
13481
+ "alpha": 0.4
13506
13482
  },
13507
13483
  "name": "borderColor-success-muted",
13508
13484
  "attributes": {},
@@ -13524,17 +13500,13 @@
13524
13500
  "borderColor-open-muted": {
13525
13501
  "$value": "#f8514966",
13526
13502
  "$type": "color",
13527
- "$extensions": {
13528
- "alpha": 0.4
13529
- },
13503
+ "alpha": 0.4,
13530
13504
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
13531
13505
  "isSource": true,
13532
13506
  "original": {
13533
13507
  "$value": "{base.color.red.4}",
13534
13508
  "$type": "color",
13535
- "$extensions": {
13536
- "alpha": 0.4
13537
- }
13509
+ "alpha": 0.4
13538
13510
  },
13539
13511
  "name": "borderColor-open-muted",
13540
13512
  "attributes": {},
@@ -13624,17 +13596,13 @@
13624
13596
  "borderColor-severe-muted": {
13625
13597
  "$value": "#f8514966",
13626
13598
  "$type": "color",
13627
- "$extensions": {
13628
- "alpha": 0.4
13629
- },
13599
+ "alpha": 0.4,
13630
13600
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
13631
13601
  "isSource": true,
13632
13602
  "original": {
13633
13603
  "$value": "{base.color.red.4}",
13634
13604
  "$type": "color",
13635
- "$extensions": {
13636
- "alpha": 0.4
13637
- }
13605
+ "alpha": 0.4
13638
13606
  },
13639
13607
  "name": "borderColor-severe-muted",
13640
13608
  "attributes": {},
@@ -13724,17 +13692,13 @@
13724
13692
  "borderColor-closed-muted": {
13725
13693
  "$value": "#3d444d66",
13726
13694
  "$type": "color",
13727
- "$extensions": {
13728
- "alpha": 0.4
13729
- },
13695
+ "alpha": 0.4,
13730
13696
  "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
13731
13697
  "isSource": true,
13732
13698
  "original": {
13733
13699
  "$value": "{borderColor.default}",
13734
13700
  "$type": "color",
13735
- "$extensions": {
13736
- "alpha": 0.4
13737
- }
13701
+ "alpha": 0.4
13738
13702
  },
13739
13703
  "name": "borderColor-closed-muted",
13740
13704
  "attributes": {},
package/dist/styleLint/functional/themes/dark.json CHANGED
@@ -12178,8 +12178,8 @@
12178
12178
  "fgColor-disabled": {
12179
12179
  "$value": "#656c7699",
12180
12180
  "$type": "color",
12181
+ "alpha": 0.6,
12181
12182
  "$extensions": {
12182
- "alpha": 0.6,
12183
12183
  "org.primer.figma": {
12184
12184
  "collection": "mode",
12185
12185
  "group": "semantic",
@@ -12191,8 +12191,8 @@
12191
12191
  "original": {
12192
12192
  "$value": "{base.color.neutral.8}",
12193
12193
  "$type": "color",
12194
+ "alpha": 0.6,
12194
12195
  "$extensions": {
12195
- "alpha": 0.6,
12196
12196
  "org.primer.figma": {
12197
12197
  "collection": "mode",
12198
12198
  "group": "semantic",
@@ -13266,8 +13266,8 @@
13266
13266
  "bgColor-danger-muted": {
13267
13267
  "$value": "#f851491a",
13268
13268
  "$type": "color",
13269
+ "alpha": 0.1,
13269
13270
  "$extensions": {
13270
- "alpha": 0.1,
13271
13271
  "org.primer.figma": {
13272
13272
  "collection": "mode",
13273
13273
  "group": "semantic",
@@ -13282,8 +13282,8 @@
13282
13282
  "original": {
13283
13283
  "$value": "{base.color.red.4}",
13284
13284
  "$type": "color",
13285
+ "alpha": 0.1,
13285
13286
  "$extensions": {
13286
- "alpha": 0.1,
13287
13287
  "org.primer.figma": {
13288
13288
  "collection": "mode",
13289
13289
  "group": "semantic",
@@ -13334,8 +13334,8 @@
13334
13334
  "bgColor-closed-muted": {
13335
13335
  "$value": "#f851491a",
13336
13336
  "$type": "color",
13337
+ "alpha": 0.1,
13337
13338
  "$extensions": {
13338
- "alpha": 0.1,
13339
13339
  "org.primer.figma": {
13340
13340
  "collection": "mode",
13341
13341
  "group": "semantic",
@@ -13350,8 +13350,8 @@
13350
13350
  "original": {
13351
13351
  "$value": "{bgColor.danger.muted}",
13352
13352
  "$type": "color",
13353
+ "alpha": 0.1,
13353
13354
  "$extensions": {
13354
- "alpha": 0.1,
13355
13355
  "org.primer.figma": {
13356
13356
  "collection": "mode",
13357
13357
  "group": "semantic",
package/dist/styleLint/functional/themes/light-colorblind.json CHANGED
@@ -13668,17 +13668,13 @@
13668
13668
  "borderColor-closed-muted": {
13669
13669
  "$value": "#d1d9e066",
13670
13670
  "$type": "color",
13671
- "$extensions": {
13672
- "alpha": 0.4
13673
- },
13671
+ "alpha": 0.4,
13674
13672
  "filePath": "src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5",
13675
13673
  "isSource": true,
13676
13674
  "original": {
13677
13675
  "$value": "{borderColor.default}",
13678
13676
  "$type": "color",
13679
- "$extensions": {
13680
- "alpha": 0.4
13681
- }
13677
+ "alpha": 0.4
13682
13678
  },
13683
13679
  "name": "borderColor-closed-muted",
13684
13680
  "attributes": {},
package/dist/styleLint/functional/themes/light-tritanopia.json CHANGED
@@ -13710,17 +13710,13 @@
13710
13710
  "borderColor-closed-muted": {
13711
13711
  "$value": "#d1d9e066",
13712
13712
  "$type": "color",
13713
- "$extensions": {
13714
- "alpha": 0.4
13715
- },
13713
+ "alpha": 0.4,
13716
13714
  "filePath": "src/tokens/functional/color/light/overrides/light.tritanopia.json5",
13717
13715
  "isSource": true,
13718
13716
  "original": {
13719
13717
  "$value": "{borderColor.default}",
13720
13718
  "$type": "color",
13721
- "$extensions": {
13722
- "alpha": 0.4
13723
- }
13719
+ "alpha": 0.4
13724
13720
  },
13725
13721
  "name": "borderColor-closed-muted",
13726
13722
  "attributes": {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "10.1.0",
3
+ "version": "10.2.0-rc.265b4e6a",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "type": "module",
6
6
  "files": [
package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 CHANGED
@@ -60,9 +60,7 @@
60
60
  muted: {
61
61
  $value: '{bgColor.neutral.muted}',
62
62
  $type: 'color',
63
- $extensions: {
64
- alpha: 0.1,
65
- },
63
+ alpha: 0.1,
66
64
  },
67
65
  emphasis: {
68
66
  $value: '{bgColor.neutral.emphasis}',
@@ -86,9 +84,7 @@
86
84
  muted: {
87
85
  $value: '{borderColor.muted}',
88
86
  $type: 'color',
89
- $extensions: {
90
- alpha: 0.4,
91
- },
87
+ alpha: 0.4,
92
88
  },
93
89
  emphasis: {
94
90
  $value: '{borderColor.emphasis}',
@@ -231,16 +227,12 @@
231
227
  rest: {
232
228
  $value: '{base.color.neutral.6}',
233
229
  $type: 'color',
234
- $extensions: {
235
- alpha: 1,
236
- },
230
+ alpha: 1,
237
231
  },
238
232
  hover: {
239
233
  $value: '{base.color.neutral.8}',
240
234
  $type: 'color',
241
- $extensions: {
242
- alpha: 1,
243
- },
235
+ alpha: 1,
244
236
  },
245
237
  },
246
238
  },
@@ -248,9 +240,7 @@
248
240
  bgColor: {
249
241
  $value: '{base.color.neutral.3}',
250
242
  $type: 'color',
251
- $extensions: {
252
- alpha: 1,
253
- },
243
+ alpha: 1,
254
244
  },
255
245
  },
256
246
  },
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 CHANGED
@@ -80,9 +80,7 @@
80
80
  muted: {
81
81
  $value: '{base.color.blue.4}',
82
82
  $type: 'color',
83
- $extensions: {
84
- alpha: 0.4,
85
- },
83
+ alpha: 0.4,
86
84
  },
87
85
  emphasis: {
88
86
  $value: '{base.color.blue.5}',
@@ -93,9 +91,7 @@
93
91
  muted: {
94
92
  $value: '{base.color.red.4}',
95
93
  $type: 'color',
96
- $extensions: {
97
- alpha: 0.4,
98
- },
94
+ alpha: 0.4,
99
95
  },
100
96
  emphasis: {
101
97
  $value: '{base.color.red.5}',
@@ -106,9 +102,7 @@
106
102
  muted: {
107
103
  $value: '{base.color.red.4}',
108
104
  $type: 'color',
109
- $extensions: {
110
- alpha: 0.4,
111
- },
105
+ alpha: 0.4,
112
106
  },
113
107
  emphasis: {
114
108
  $value: '{base.color.red.5}',
@@ -119,9 +113,7 @@
119
113
  muted: {
120
114
  $value: '{borderColor.default}',
121
115
  $type: 'color',
122
- $extensions: {
123
- alpha: 0.4,
124
- },
116
+ alpha: 0.4,
125
117
  },
126
118
  emphasis: {
127
119
  $value: '{borderColor.emphasis}',
@@ -134,18 +126,14 @@
134
126
  bgColor: {
135
127
  $value: '{base.color.blue.3}',
136
128
  $type: 'color',
137
- $extensions: {
138
- alpha: 0.3,
139
- },
129
+ alpha: 0.3,
140
130
  },
141
131
  },
142
132
  additionWord: {
143
133
  bgColor: {
144
134
  $value: '{base.color.blue.4}',
145
135
  $type: 'color',
146
- $extensions: {
147
- alpha: 0.4,
148
- },
136
+ alpha: 0.4,
149
137
  },
150
138
  },
151
139
  hunkNum: {
@@ -153,16 +141,12 @@
153
141
  rest: {
154
142
  $value: '{base.color.neutral.6}',
155
143
  $type: 'color',
156
- $extensions: {
157
- alpha: 1,
158
- },
144
+ alpha: 1,
159
145
  },
160
146
  hover: {
161
147
  $value: '{base.color.neutral.8}',
162
148
  $type: 'color',
163
- $extensions: {
164
- alpha: 1,
165
- },
149
+ alpha: 1,
166
150
  },
167
151
  },
168
152
  },
@@ -170,9 +154,7 @@
170
154
  bgColor: {
171
155
  $value: '{base.color.neutral.3}',
172
156
  $type: 'color',
173
- $extensions: {
174
- alpha: 1,
175
- },
157
+ alpha: 1,
176
158
  },
177
159
  },
178
160
  },
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -84,8 +84,8 @@
84
84
  disabled: {
85
85
  $value: '{base.color.neutral.8}',
86
86
  $type: 'color',
87
+ alpha: 0.6,
87
88
  $extensions: {
88
- alpha: 0.6,
89
89
  'org.primer.figma': {
90
90
  collection: 'mode',
91
91
 
@@ -592,8 +592,8 @@
592
592
  muted: {
593
593
  $value: '{base.color.red.4}',
594
594
  $type: 'color',
595
+ alpha: 0.1,
595
596
  $extensions: {
596
- alpha: 0.1,
597
597
  'org.primer.figma': {
598
598
  collection: 'mode',
599
599
 
@@ -625,8 +625,8 @@
625
625
  muted: {
626
626
  $value: '{bgColor.danger.muted}',
627
627
  $type: 'color',
628
+ alpha: 0.1,
628
629
  $extensions: {
629
- alpha: 0.1,
630
630
  'org.primer.figma': {
631
631
  collection: 'mode',
632
632
 
package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 CHANGED
@@ -80,9 +80,7 @@
80
80
  muted: {
81
81
  $value: '{borderColor.default}',
82
82
  $type: 'color',
83
- $extensions: {
84
- alpha: 0.4,
85
- },
83
+ alpha: 0.4,
86
84
  },
87
85
  emphasis: {
88
86
  $value: '{borderColor.emphasis}',
package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 CHANGED
@@ -102,9 +102,7 @@
102
102
  muted: {
103
103
  $value: '{borderColor.default}',
104
104
  $type: 'color',
105
- $extensions: {
106
- alpha: 0.4,
107
- },
105
+ alpha: 0.4,
108
106
  },
109
107
  emphasis: {
110
108
  $value: '{borderColor.emphasis}',