@primer/primitives 8.2.4-rc.d955f312 → 8.2.4-rc.ea4beb50

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 (74) hide show
  1. package/README.md +17 -18
  2. package/dist/css/functional/size/border.css +1 -0
  3. package/dist/css/functional/themes/dark-colorblind.css +18 -12
  4. package/dist/css/functional/themes/dark-dimmed.css +20 -14
  5. package/dist/css/functional/themes/dark-high-contrast.css +258 -252
  6. package/dist/css/functional/themes/dark-tritanopia.css +20 -14
  7. package/dist/css/functional/themes/dark.css +20 -14
  8. package/dist/css/functional/themes/light-colorblind.css +30 -24
  9. package/dist/css/functional/themes/light-high-contrast.css +154 -148
  10. package/dist/css/functional/themes/light-tritanopia.css +30 -24
  11. package/dist/css/functional/themes/light.css +18 -12
  12. package/dist/css/primitives.css +1 -0
  13. package/dist/docs/functional/size/border.json +31 -0
  14. package/dist/docs/functional/themes/dark-colorblind.json +236 -149
  15. package/dist/docs/functional/themes/dark-dimmed.json +247 -158
  16. package/dist/docs/functional/themes/dark-high-contrast.json +555 -458
  17. package/dist/docs/functional/themes/dark-tritanopia.json +240 -153
  18. package/dist/docs/functional/themes/dark.json +247 -158
  19. package/dist/docs/functional/themes/light-colorblind.json +254 -173
  20. package/dist/docs/functional/themes/light-high-contrast.json +452 -361
  21. package/dist/docs/functional/themes/light-tritanopia.json +252 -171
  22. package/dist/docs/functional/themes/light.json +246 -157
  23. package/dist/fallbacks/functional/size/border.json +1 -0
  24. package/dist/figma/dimension/dimension.json +14 -0
  25. package/dist/figma/themes/dark-colorblind.json +246 -198
  26. package/dist/figma/themes/dark-dimmed.json +249 -200
  27. package/dist/figma/themes/dark-high-contrast.json +675 -625
  28. package/dist/figma/themes/dark-tritanopia.json +248 -200
  29. package/dist/figma/themes/dark.json +249 -200
  30. package/dist/figma/themes/light-colorblind.json +265 -218
  31. package/dist/figma/themes/light-high-contrast.json +457 -407
  32. package/dist/figma/themes/light-tritanopia.json +264 -217
  33. package/dist/figma/themes/light.json +187 -138
  34. package/dist/internalCss/dark-colorblind.css +18 -12
  35. package/dist/internalCss/dark-dimmed.css +20 -14
  36. package/dist/internalCss/dark-high-contrast.css +258 -252
  37. package/dist/internalCss/dark-tritanopia.css +20 -14
  38. package/dist/internalCss/dark.css +20 -14
  39. package/dist/internalCss/light-colorblind.css +30 -24
  40. package/dist/internalCss/light-high-contrast.css +154 -148
  41. package/dist/internalCss/light-tritanopia.css +30 -24
  42. package/dist/internalCss/light.css +18 -12
  43. package/dist/styleLint/functional/size/border.json +31 -0
  44. package/dist/styleLint/functional/themes/dark-colorblind.json +236 -149
  45. package/dist/styleLint/functional/themes/dark-dimmed.json +247 -158
  46. package/dist/styleLint/functional/themes/dark-high-contrast.json +555 -458
  47. package/dist/styleLint/functional/themes/dark-tritanopia.json +240 -153
  48. package/dist/styleLint/functional/themes/dark.json +247 -158
  49. package/dist/styleLint/functional/themes/light-colorblind.json +254 -173
  50. package/dist/styleLint/functional/themes/light-high-contrast.json +452 -361
  51. package/dist/styleLint/functional/themes/light-tritanopia.json +252 -171
  52. package/dist/styleLint/functional/themes/light.json +246 -157
  53. package/package.json +38 -35
  54. package/src/formats/cssAdvanced.ts +3 -3
  55. package/src/formats/cssCustomMedia.ts +2 -2
  56. package/src/formats/javascriptCommonJs.ts +2 -2
  57. package/src/formats/javascriptEsm.ts +2 -2
  58. package/src/formats/jsonFigma.ts +2 -2
  59. package/src/formats/jsonNestedPrefixed.ts +2 -2
  60. package/src/formats/jsonOneDimensional.ts +2 -2
  61. package/src/formats/jsonPostCssFallback.ts +2 -2
  62. package/src/formats/typescriptExportDefinition.ts +2 -2
  63. package/src/schemas/designToken.ts +1 -1
  64. package/src/schemas/validTokenType.ts +1 -1
  65. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +528 -2
  66. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +4 -0
  67. package/src/tokens/functional/color/dark/patterns-dark.json5 +26 -0
  68. package/src/tokens/functional/color/dark/primitives-dark.json5 +78 -65
  69. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +400 -0
  70. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +3 -6
  71. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +3 -6
  72. package/src/tokens/functional/color/light/patterns-light.json5 +26 -0
  73. package/src/tokens/functional/color/light/primitives-light.json5 +77 -64
  74. package/src/tokens/functional/size/border.json +13 -0
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -53,6 +53,18 @@
53
53
  },
54
54
  },
55
55
  },
56
+ onInverse: {
57
+ $value: '{base.color.black}',
58
+ $type: 'color',
59
+ $extensions: {
60
+ 'org.primer.figma': {
61
+ collection: 'mode',
62
+ mode: 'dark',
63
+ group: 'semantic',
64
+ scopes: ['fgColor'],
65
+ },
66
+ },
67
+ },
56
68
  white: {
57
69
  $value: '{base.color.white}',
58
70
  $type: 'color',
@@ -105,7 +117,7 @@
105
117
  },
106
118
  },
107
119
  neutral: {
108
- $value: '{base.color.neutral.4}',
120
+ $value: '{base.color.neutral.2}',
109
121
  $type: 'color',
110
122
  $extensions: {
111
123
  'org.primer.figma': {
@@ -150,8 +162,8 @@
150
162
  },
151
163
  },
152
164
  },
153
- attention: {
154
- $value: '{base.color.yellow.3}',
165
+ open: {
166
+ $value: '{fgColor.success}',
155
167
  $type: 'color',
156
168
  $extensions: {
157
169
  'org.primer.figma': {
@@ -160,13 +172,13 @@
160
172
  group: 'semantic',
161
173
  scopes: ['fgColor'],
162
174
  codeSyntax: {
163
- web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
175
+ web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
164
176
  },
165
177
  },
166
178
  },
167
179
  },
168
- severe: {
169
- $value: '{base.color.orange.4}',
180
+ attention: {
181
+ $value: '{base.color.yellow.3}',
170
182
  $type: 'color',
171
183
  $extensions: {
172
184
  'org.primer.figma': {
@@ -175,13 +187,13 @@
175
187
  group: 'semantic',
176
188
  scopes: ['fgColor'],
177
189
  codeSyntax: {
178
- web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
190
+ web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
179
191
  },
180
192
  },
181
193
  },
182
194
  },
183
- danger: {
184
- $value: '{base.color.red.4}',
195
+ severe: {
196
+ $value: '{base.color.orange.4}',
185
197
  $type: 'color',
186
198
  $extensions: {
187
199
  'org.primer.figma': {
@@ -190,13 +202,13 @@
190
202
  group: 'semantic',
191
203
  scopes: ['fgColor'],
192
204
  codeSyntax: {
193
- web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
205
+ web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
194
206
  },
195
207
  },
196
208
  },
197
209
  },
198
- open: {
199
- $value: '{fgColor.success}',
210
+ danger: {
211
+ $value: '{base.color.red.4}',
200
212
  $type: 'color',
201
213
  $extensions: {
202
214
  'org.primer.figma': {
@@ -205,13 +217,13 @@
205
217
  group: 'semantic',
206
218
  scopes: ['fgColor'],
207
219
  codeSyntax: {
208
- web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
220
+ web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
209
221
  },
210
222
  },
211
223
  },
212
224
  },
213
225
  closed: {
214
- $value: '{base.color.red.4}',
226
+ $value: '{fgColor.danger}',
215
227
  $type: 'color',
216
228
  $extensions: {
217
229
  'org.primer.figma': {
@@ -241,7 +253,7 @@
241
253
  },
242
254
  },
243
255
  upsell: {
244
- $value: '{base.color.purple.4}',
256
+ $value: '{fgColor.done}',
245
257
  $type: 'color',
246
258
  $extensions: {
247
259
  'org.primer.figma': {
@@ -489,9 +501,9 @@
489
501
  },
490
502
  },
491
503
  },
492
- attention: {
504
+ open: {
493
505
  muted: {
494
- $value: '{base.color.yellow.4}',
506
+ $value: '{bgColor.success.muted}',
495
507
  $type: 'color',
496
508
  $extensions: {
497
509
  'org.primer.figma': {
@@ -500,14 +512,14 @@
500
512
  group: 'semantic',
501
513
  scopes: ['bgColor'],
502
514
  codeSyntax: {
503
- web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
515
+ web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
504
516
  },
505
517
  },
506
518
  },
507
519
  alpha: 0.15,
508
520
  },
509
521
  emphasis: {
510
- $value: '{base.color.yellow.5}',
522
+ $value: '{bgColor.success.emphasis}',
511
523
  $type: 'color',
512
524
  $extensions: {
513
525
  'org.primer.figma': {
@@ -516,15 +528,15 @@
516
528
  group: 'semantic',
517
529
  scopes: ['bgColor'],
518
530
  codeSyntax: {
519
- web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
531
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
520
532
  },
521
533
  },
522
534
  },
523
535
  },
524
536
  },
525
- severe: {
537
+ attention: {
526
538
  muted: {
527
- $value: '{base.color.orange.4}',
539
+ $value: '{base.color.yellow.4}',
528
540
  $type: 'color',
529
541
  $extensions: {
530
542
  'org.primer.figma': {
@@ -533,14 +545,14 @@
533
545
  group: 'semantic',
534
546
  scopes: ['bgColor'],
535
547
  codeSyntax: {
536
- web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
548
+ web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
537
549
  },
538
550
  },
539
551
  },
540
- alpha: 0.1,
552
+ alpha: 0.15,
541
553
  },
542
554
  emphasis: {
543
- $value: '{base.color.orange.5}',
555
+ $value: '{base.color.yellow.5}',
544
556
  $type: 'color',
545
557
  $extensions: {
546
558
  'org.primer.figma': {
@@ -549,15 +561,15 @@
549
561
  group: 'semantic',
550
562
  scopes: ['bgColor'],
551
563
  codeSyntax: {
552
- web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
564
+ web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
553
565
  },
554
566
  },
555
567
  },
556
568
  },
557
569
  },
558
- danger: {
570
+ severe: {
559
571
  muted: {
560
- $value: '{base.color.red.4}',
572
+ $value: '{base.color.orange.4}',
561
573
  $type: 'color',
562
574
  $extensions: {
563
575
  'org.primer.figma': {
@@ -566,14 +578,14 @@
566
578
  group: 'semantic',
567
579
  scopes: ['bgColor'],
568
580
  codeSyntax: {
569
- web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
581
+ web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
570
582
  },
571
583
  },
572
584
  },
573
585
  alpha: 0.1,
574
586
  },
575
587
  emphasis: {
576
- $value: '{base.color.red.5}',
588
+ $value: '{base.color.orange.5}',
577
589
  $type: 'color',
578
590
  $extensions: {
579
591
  'org.primer.figma': {
@@ -582,15 +594,15 @@
582
594
  group: 'semantic',
583
595
  scopes: ['bgColor'],
584
596
  codeSyntax: {
585
- web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
597
+ web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
586
598
  },
587
599
  },
588
600
  },
589
601
  },
590
602
  },
591
- open: {
603
+ danger: {
592
604
  muted: {
593
- $value: '{bgColor.success.muted}',
605
+ $value: '{base.color.red.4}',
594
606
  $type: 'color',
595
607
  $extensions: {
596
608
  'org.primer.figma': {
@@ -599,14 +611,14 @@
599
611
  group: 'semantic',
600
612
  scopes: ['bgColor'],
601
613
  codeSyntax: {
602
- web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
614
+ web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
603
615
  },
604
616
  },
605
617
  },
606
618
  alpha: 0.1,
607
619
  },
608
620
  emphasis: {
609
- $value: '{bgColor.success.emphasis}',
621
+ $value: '{base.color.red.5}',
610
622
  $type: 'color',
611
623
  $extensions: {
612
624
  'org.primer.figma': {
@@ -615,7 +627,7 @@
615
627
  group: 'semantic',
616
628
  scopes: ['bgColor'],
617
629
  codeSyntax: {
618
- web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
630
+ web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
619
631
  },
620
632
  },
621
633
  },
@@ -623,7 +635,7 @@
623
635
  },
624
636
  closed: {
625
637
  muted: {
626
- $value: '{base.color.red.4}',
638
+ $value: '{bgColor.danger.muted}',
627
639
  $type: 'color',
628
640
  $extensions: {
629
641
  'org.primer.figma': {
@@ -636,10 +648,10 @@
636
648
  },
637
649
  },
638
650
  },
639
- alpha: 0.15,
651
+ alpha: 0.1,
640
652
  },
641
653
  emphasis: {
642
- $value: '{base.color.red.5}',
654
+ $value: '{bgColor.danger.emphasis}',
643
655
  $type: 'color',
644
656
  $extensions: {
645
657
  'org.primer.figma': {
@@ -689,7 +701,7 @@
689
701
  },
690
702
  upsell: {
691
703
  muted: {
692
- $value: '{base.color.purple.4}',
704
+ $value: '{bgColor.done.muted}',
693
705
  $type: 'color',
694
706
  $extensions: {
695
707
  'org.primer.figma': {
@@ -705,7 +717,7 @@
705
717
  alpha: 0.15,
706
718
  },
707
719
  emphasis: {
708
- $value: '{base.color.purple.5}',
720
+ $value: '{bgColor.done.emphasis}',
709
721
  $type: 'color',
710
722
  $extensions: {
711
723
  'org.primer.figma': {
@@ -928,9 +940,9 @@
928
940
  },
929
941
  },
930
942
  },
931
- attention: {
943
+ open: {
932
944
  muted: {
933
- $value: '{base.color.yellow.4}',
945
+ $value: '{borderColor.success.muted}',
934
946
  $type: 'color',
935
947
  $extensions: {
936
948
  'org.primer.figma': {
@@ -939,14 +951,14 @@
939
951
  group: 'semantic',
940
952
  scopes: ['borderColor'],
941
953
  codeSyntax: {
942
- web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
954
+ web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
943
955
  },
944
956
  },
945
957
  },
946
958
  alpha: 0.4,
947
959
  },
948
960
  emphasis: {
949
- $value: '{base.color.yellow.5}',
961
+ $value: '{borderColor.success.emphasis}',
950
962
  $type: 'color',
951
963
  $extensions: {
952
964
  'org.primer.figma': {
@@ -955,15 +967,15 @@
955
967
  group: 'semantic',
956
968
  scopes: ['borderColor'],
957
969
  codeSyntax: {
958
- web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
970
+ web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
959
971
  },
960
972
  },
961
973
  },
962
974
  },
963
975
  },
964
- severe: {
976
+ attention: {
965
977
  muted: {
966
- $value: '{base.color.orange.4}',
978
+ $value: '{base.color.yellow.4}',
967
979
  $type: 'color',
968
980
  $extensions: {
969
981
  'org.primer.figma': {
@@ -972,14 +984,14 @@
972
984
  group: 'semantic',
973
985
  scopes: ['borderColor'],
974
986
  codeSyntax: {
975
- web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
987
+ web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
976
988
  },
977
989
  },
978
990
  },
979
991
  alpha: 0.4,
980
992
  },
981
993
  emphasis: {
982
- $value: '{base.color.orange.5}',
994
+ $value: '{base.color.yellow.5}',
983
995
  $type: 'color',
984
996
  $extensions: {
985
997
  'org.primer.figma': {
@@ -988,15 +1000,15 @@
988
1000
  group: 'semantic',
989
1001
  scopes: ['borderColor'],
990
1002
  codeSyntax: {
991
- web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1003
+ web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
992
1004
  },
993
1005
  },
994
1006
  },
995
1007
  },
996
1008
  },
997
- danger: {
1009
+ severe: {
998
1010
  muted: {
999
- $value: '{base.color.red.4}',
1011
+ $value: '{base.color.orange.4}',
1000
1012
  $type: 'color',
1001
1013
  $extensions: {
1002
1014
  'org.primer.figma': {
@@ -1005,14 +1017,14 @@
1005
1017
  group: 'semantic',
1006
1018
  scopes: ['borderColor'],
1007
1019
  codeSyntax: {
1008
- web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1020
+ web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
1009
1021
  },
1010
1022
  },
1011
1023
  },
1012
1024
  alpha: 0.4,
1013
1025
  },
1014
1026
  emphasis: {
1015
- $value: '{base.color.red.5}',
1027
+ $value: '{base.color.orange.5}',
1016
1028
  $type: 'color',
1017
1029
  $extensions: {
1018
1030
  'org.primer.figma': {
@@ -1021,15 +1033,15 @@
1021
1033
  group: 'semantic',
1022
1034
  scopes: ['borderColor'],
1023
1035
  codeSyntax: {
1024
- web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1036
+ web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1025
1037
  },
1026
1038
  },
1027
1039
  },
1028
1040
  },
1029
1041
  },
1030
- open: {
1042
+ danger: {
1031
1043
  muted: {
1032
- $value: '{borderColor.success.muted}',
1044
+ $value: '{base.color.red.4}',
1033
1045
  $type: 'color',
1034
1046
  $extensions: {
1035
1047
  'org.primer.figma': {
@@ -1038,13 +1050,14 @@
1038
1050
  group: 'semantic',
1039
1051
  scopes: ['borderColor'],
1040
1052
  codeSyntax: {
1041
- web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
1053
+ web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1042
1054
  },
1043
1055
  },
1044
1056
  },
1057
+ alpha: 0.4,
1045
1058
  },
1046
1059
  emphasis: {
1047
- $value: '{borderColor.success.emphasis}',
1060
+ $value: '{base.color.red.5}',
1048
1061
  $type: 'color',
1049
1062
  $extensions: {
1050
1063
  'org.primer.figma': {
@@ -1053,7 +1066,7 @@
1053
1066
  group: 'semantic',
1054
1067
  scopes: ['borderColor'],
1055
1068
  codeSyntax: {
1056
- web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
1069
+ web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1057
1070
  },
1058
1071
  },
1059
1072
  },
@@ -1061,7 +1074,7 @@
1061
1074
  },
1062
1075
  closed: {
1063
1076
  muted: {
1064
- $value: '{base.color.red.4}',
1077
+ $value: '{borderColor.danger.muted}',
1065
1078
  $type: 'color',
1066
1079
  $extensions: {
1067
1080
  'org.primer.figma': {
@@ -1077,7 +1090,7 @@
1077
1090
  alpha: 0.4,
1078
1091
  },
1079
1092
  emphasis: {
1080
- $value: '{base.color.red.5}',
1093
+ $value: '{borderColor.danger.emphasis}',
1081
1094
  $type: 'color',
1082
1095
  $extensions: {
1083
1096
  'org.primer.figma': {
@@ -1127,7 +1140,7 @@
1127
1140
  },
1128
1141
  upsell: {
1129
1142
  muted: {
1130
- $value: '{base.color.purple.4}',
1143
+ $value: '{borderColor.done.muted}',
1131
1144
  $type: 'color',
1132
1145
  $extensions: {
1133
1146
  'org.primer.figma': {
@@ -1143,7 +1156,7 @@
1143
1156
  alpha: 0.4,
1144
1157
  },
1145
1158
  emphasis: {
1146
- $value: '{base.color.purple.5}',
1159
+ $value: '{borderColor.done.emphasis}',
1147
1160
  $type: 'color',
1148
1161
  $extensions: {
1149
1162
  'org.primer.figma': {