@primer/primitives 8.2.4-rc.b28008e7 → 8.2.4-rc.b7bbf7a5

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 (64) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +12 -12
  2. package/dist/css/functional/themes/dark-dimmed.css +14 -14
  3. package/dist/css/functional/themes/dark-high-contrast.css +250 -250
  4. package/dist/css/functional/themes/dark-tritanopia.css +14 -14
  5. package/dist/css/functional/themes/dark.css +14 -14
  6. package/dist/css/functional/themes/light-colorblind.css +24 -24
  7. package/dist/css/functional/themes/light-high-contrast.css +146 -146
  8. package/dist/css/functional/themes/light-tritanopia.css +24 -24
  9. package/dist/css/functional/themes/light.css +12 -12
  10. package/dist/docs/functional/themes/dark-colorblind.json +149 -149
  11. package/dist/docs/functional/themes/dark-dimmed.json +160 -158
  12. package/dist/docs/functional/themes/dark-high-contrast.json +464 -454
  13. package/dist/docs/functional/themes/dark-tritanopia.json +153 -153
  14. package/dist/docs/functional/themes/dark.json +160 -158
  15. package/dist/docs/functional/themes/light-colorblind.json +167 -173
  16. package/dist/docs/functional/themes/light-high-contrast.json +362 -358
  17. package/dist/docs/functional/themes/light-tritanopia.json +165 -171
  18. package/dist/docs/functional/themes/light.json +159 -157
  19. package/dist/figma/themes/dark-colorblind.json +198 -198
  20. package/dist/figma/themes/dark-dimmed.json +201 -200
  21. package/dist/figma/themes/dark-high-contrast.json +598 -596
  22. package/dist/figma/themes/dark-tritanopia.json +200 -200
  23. package/dist/figma/themes/dark.json +201 -200
  24. package/dist/figma/themes/light-colorblind.json +217 -218
  25. package/dist/figma/themes/light-high-contrast.json +393 -391
  26. package/dist/figma/themes/light-tritanopia.json +216 -217
  27. package/dist/figma/themes/light.json +139 -138
  28. package/dist/internalCss/dark-colorblind.css +12 -12
  29. package/dist/internalCss/dark-dimmed.css +14 -14
  30. package/dist/internalCss/dark-high-contrast.css +250 -250
  31. package/dist/internalCss/dark-tritanopia.css +14 -14
  32. package/dist/internalCss/dark.css +14 -14
  33. package/dist/internalCss/light-colorblind.css +24 -24
  34. package/dist/internalCss/light-high-contrast.css +146 -146
  35. package/dist/internalCss/light-tritanopia.css +24 -24
  36. package/dist/internalCss/light.css +12 -12
  37. package/dist/styleLint/functional/themes/dark-colorblind.json +149 -149
  38. package/dist/styleLint/functional/themes/dark-dimmed.json +160 -158
  39. package/dist/styleLint/functional/themes/dark-high-contrast.json +464 -454
  40. package/dist/styleLint/functional/themes/dark-tritanopia.json +153 -153
  41. package/dist/styleLint/functional/themes/dark.json +160 -158
  42. package/dist/styleLint/functional/themes/light-colorblind.json +167 -173
  43. package/dist/styleLint/functional/themes/light-high-contrast.json +362 -358
  44. package/dist/styleLint/functional/themes/light-tritanopia.json +165 -171
  45. package/dist/styleLint/functional/themes/light.json +159 -157
  46. package/package.json +28 -28
  47. package/src/formats/cssAdvanced.ts +3 -3
  48. package/src/formats/cssCustomMedia.ts +2 -2
  49. package/src/formats/javascriptCommonJs.ts +2 -2
  50. package/src/formats/javascriptEsm.ts +2 -2
  51. package/src/formats/jsonFigma.ts +2 -2
  52. package/src/formats/jsonNestedPrefixed.ts +2 -2
  53. package/src/formats/jsonOneDimensional.ts +2 -2
  54. package/src/formats/jsonPostCssFallback.ts +2 -2
  55. package/src/formats/typescriptExportDefinition.ts +2 -2
  56. package/src/schemas/designToken.ts +1 -1
  57. package/src/schemas/validTokenType.ts +1 -1
  58. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +512 -2
  59. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +4 -0
  60. package/src/tokens/functional/color/dark/primitives-dark.json5 +66 -65
  61. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +394 -0
  62. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +3 -6
  63. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +3 -6
  64. package/src/tokens/functional/color/light/primitives-light.json5 +65 -64
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -105,7 +105,7 @@
105
105
  },
106
106
  },
107
107
  neutral: {
108
- $value: '{base.color.neutral.4}',
108
+ $value: '{base.color.neutral.2}',
109
109
  $type: 'color',
110
110
  $extensions: {
111
111
  'org.primer.figma': {
@@ -150,8 +150,8 @@
150
150
  },
151
151
  },
152
152
  },
153
- attention: {
154
- $value: '{base.color.yellow.3}',
153
+ open: {
154
+ $value: '{fgColor.success}',
155
155
  $type: 'color',
156
156
  $extensions: {
157
157
  'org.primer.figma': {
@@ -160,13 +160,13 @@
160
160
  group: 'semantic',
161
161
  scopes: ['fgColor'],
162
162
  codeSyntax: {
163
- web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
163
+ web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
164
164
  },
165
165
  },
166
166
  },
167
167
  },
168
- severe: {
169
- $value: '{base.color.orange.4}',
168
+ attention: {
169
+ $value: '{base.color.yellow.3}',
170
170
  $type: 'color',
171
171
  $extensions: {
172
172
  'org.primer.figma': {
@@ -175,13 +175,13 @@
175
175
  group: 'semantic',
176
176
  scopes: ['fgColor'],
177
177
  codeSyntax: {
178
- web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
178
+ web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
179
179
  },
180
180
  },
181
181
  },
182
182
  },
183
- danger: {
184
- $value: '{base.color.red.4}',
183
+ severe: {
184
+ $value: '{base.color.orange.4}',
185
185
  $type: 'color',
186
186
  $extensions: {
187
187
  'org.primer.figma': {
@@ -190,13 +190,13 @@
190
190
  group: 'semantic',
191
191
  scopes: ['fgColor'],
192
192
  codeSyntax: {
193
- web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
193
+ web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
194
194
  },
195
195
  },
196
196
  },
197
197
  },
198
- open: {
199
- $value: '{fgColor.success}',
198
+ danger: {
199
+ $value: '{base.color.red.4}',
200
200
  $type: 'color',
201
201
  $extensions: {
202
202
  'org.primer.figma': {
@@ -205,13 +205,13 @@
205
205
  group: 'semantic',
206
206
  scopes: ['fgColor'],
207
207
  codeSyntax: {
208
- web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
208
+ web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
209
209
  },
210
210
  },
211
211
  },
212
212
  },
213
213
  closed: {
214
- $value: '{base.color.red.4}',
214
+ $value: '{fgColor.danger}',
215
215
  $type: 'color',
216
216
  $extensions: {
217
217
  'org.primer.figma': {
@@ -241,7 +241,7 @@
241
241
  },
242
242
  },
243
243
  upsell: {
244
- $value: '{base.color.purple.4}',
244
+ $value: '{fgColor.done}',
245
245
  $type: 'color',
246
246
  $extensions: {
247
247
  'org.primer.figma': {
@@ -489,9 +489,9 @@
489
489
  },
490
490
  },
491
491
  },
492
- attention: {
492
+ open: {
493
493
  muted: {
494
- $value: '{base.color.yellow.4}',
494
+ $value: '{bgColor.success.muted}',
495
495
  $type: 'color',
496
496
  $extensions: {
497
497
  'org.primer.figma': {
@@ -500,14 +500,14 @@
500
500
  group: 'semantic',
501
501
  scopes: ['bgColor'],
502
502
  codeSyntax: {
503
- web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
503
+ web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
504
504
  },
505
505
  },
506
506
  },
507
507
  alpha: 0.15,
508
508
  },
509
509
  emphasis: {
510
- $value: '{base.color.yellow.5}',
510
+ $value: '{bgColor.success.emphasis}',
511
511
  $type: 'color',
512
512
  $extensions: {
513
513
  'org.primer.figma': {
@@ -516,15 +516,15 @@
516
516
  group: 'semantic',
517
517
  scopes: ['bgColor'],
518
518
  codeSyntax: {
519
- web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
519
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
520
520
  },
521
521
  },
522
522
  },
523
523
  },
524
524
  },
525
- severe: {
525
+ attention: {
526
526
  muted: {
527
- $value: '{base.color.orange.4}',
527
+ $value: '{base.color.yellow.4}',
528
528
  $type: 'color',
529
529
  $extensions: {
530
530
  'org.primer.figma': {
@@ -533,14 +533,14 @@
533
533
  group: 'semantic',
534
534
  scopes: ['bgColor'],
535
535
  codeSyntax: {
536
- web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
536
+ web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
537
537
  },
538
538
  },
539
539
  },
540
- alpha: 0.1,
540
+ alpha: 0.15,
541
541
  },
542
542
  emphasis: {
543
- $value: '{base.color.orange.5}',
543
+ $value: '{base.color.yellow.5}',
544
544
  $type: 'color',
545
545
  $extensions: {
546
546
  'org.primer.figma': {
@@ -549,15 +549,15 @@
549
549
  group: 'semantic',
550
550
  scopes: ['bgColor'],
551
551
  codeSyntax: {
552
- web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
552
+ web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
553
553
  },
554
554
  },
555
555
  },
556
556
  },
557
557
  },
558
- danger: {
558
+ severe: {
559
559
  muted: {
560
- $value: '{base.color.red.4}',
560
+ $value: '{base.color.orange.4}',
561
561
  $type: 'color',
562
562
  $extensions: {
563
563
  'org.primer.figma': {
@@ -566,14 +566,14 @@
566
566
  group: 'semantic',
567
567
  scopes: ['bgColor'],
568
568
  codeSyntax: {
569
- web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
569
+ web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
570
570
  },
571
571
  },
572
572
  },
573
573
  alpha: 0.1,
574
574
  },
575
575
  emphasis: {
576
- $value: '{base.color.red.5}',
576
+ $value: '{base.color.orange.5}',
577
577
  $type: 'color',
578
578
  $extensions: {
579
579
  'org.primer.figma': {
@@ -582,15 +582,15 @@
582
582
  group: 'semantic',
583
583
  scopes: ['bgColor'],
584
584
  codeSyntax: {
585
- web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
585
+ web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
586
586
  },
587
587
  },
588
588
  },
589
589
  },
590
590
  },
591
- open: {
591
+ danger: {
592
592
  muted: {
593
- $value: '{bgColor.success.muted}',
593
+ $value: '{base.color.red.4}',
594
594
  $type: 'color',
595
595
  $extensions: {
596
596
  'org.primer.figma': {
@@ -599,14 +599,14 @@
599
599
  group: 'semantic',
600
600
  scopes: ['bgColor'],
601
601
  codeSyntax: {
602
- web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
602
+ web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
603
603
  },
604
604
  },
605
605
  },
606
606
  alpha: 0.1,
607
607
  },
608
608
  emphasis: {
609
- $value: '{bgColor.success.emphasis}',
609
+ $value: '{base.color.red.5}',
610
610
  $type: 'color',
611
611
  $extensions: {
612
612
  'org.primer.figma': {
@@ -615,7 +615,7 @@
615
615
  group: 'semantic',
616
616
  scopes: ['bgColor'],
617
617
  codeSyntax: {
618
- web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
618
+ web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
619
619
  },
620
620
  },
621
621
  },
@@ -623,7 +623,7 @@
623
623
  },
624
624
  closed: {
625
625
  muted: {
626
- $value: '{base.color.red.4}',
626
+ $value: '{bgColor.danger.muted}',
627
627
  $type: 'color',
628
628
  $extensions: {
629
629
  'org.primer.figma': {
@@ -636,10 +636,10 @@
636
636
  },
637
637
  },
638
638
  },
639
- alpha: 0.15,
639
+ alpha: 0.1,
640
640
  },
641
641
  emphasis: {
642
- $value: '{base.color.red.5}',
642
+ $value: '{bgColor.danger.emphasis}',
643
643
  $type: 'color',
644
644
  $extensions: {
645
645
  'org.primer.figma': {
@@ -689,7 +689,7 @@
689
689
  },
690
690
  upsell: {
691
691
  muted: {
692
- $value: '{base.color.purple.4}',
692
+ $value: '{bgColor.done.muted}',
693
693
  $type: 'color',
694
694
  $extensions: {
695
695
  'org.primer.figma': {
@@ -705,7 +705,7 @@
705
705
  alpha: 0.15,
706
706
  },
707
707
  emphasis: {
708
- $value: '{base.color.purple.5}',
708
+ $value: '{bgColor.done.emphasis}',
709
709
  $type: 'color',
710
710
  $extensions: {
711
711
  'org.primer.figma': {
@@ -928,9 +928,9 @@
928
928
  },
929
929
  },
930
930
  },
931
- attention: {
931
+ open: {
932
932
  muted: {
933
- $value: '{base.color.yellow.4}',
933
+ $value: '{borderColor.success.muted}',
934
934
  $type: 'color',
935
935
  $extensions: {
936
936
  'org.primer.figma': {
@@ -939,14 +939,14 @@
939
939
  group: 'semantic',
940
940
  scopes: ['borderColor'],
941
941
  codeSyntax: {
942
- web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
942
+ web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
943
943
  },
944
944
  },
945
945
  },
946
946
  alpha: 0.4,
947
947
  },
948
948
  emphasis: {
949
- $value: '{base.color.yellow.5}',
949
+ $value: '{borderColor.success.emphasis}',
950
950
  $type: 'color',
951
951
  $extensions: {
952
952
  'org.primer.figma': {
@@ -955,15 +955,15 @@
955
955
  group: 'semantic',
956
956
  scopes: ['borderColor'],
957
957
  codeSyntax: {
958
- web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
958
+ web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
959
959
  },
960
960
  },
961
961
  },
962
962
  },
963
963
  },
964
- severe: {
964
+ attention: {
965
965
  muted: {
966
- $value: '{base.color.orange.4}',
966
+ $value: '{base.color.yellow.4}',
967
967
  $type: 'color',
968
968
  $extensions: {
969
969
  'org.primer.figma': {
@@ -972,14 +972,14 @@
972
972
  group: 'semantic',
973
973
  scopes: ['borderColor'],
974
974
  codeSyntax: {
975
- web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
975
+ web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
976
976
  },
977
977
  },
978
978
  },
979
979
  alpha: 0.4,
980
980
  },
981
981
  emphasis: {
982
- $value: '{base.color.orange.5}',
982
+ $value: '{base.color.yellow.5}',
983
983
  $type: 'color',
984
984
  $extensions: {
985
985
  'org.primer.figma': {
@@ -988,15 +988,15 @@
988
988
  group: 'semantic',
989
989
  scopes: ['borderColor'],
990
990
  codeSyntax: {
991
- web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
991
+ web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
992
992
  },
993
993
  },
994
994
  },
995
995
  },
996
996
  },
997
- danger: {
997
+ severe: {
998
998
  muted: {
999
- $value: '{base.color.red.4}',
999
+ $value: '{base.color.orange.4}',
1000
1000
  $type: 'color',
1001
1001
  $extensions: {
1002
1002
  'org.primer.figma': {
@@ -1005,14 +1005,14 @@
1005
1005
  group: 'semantic',
1006
1006
  scopes: ['borderColor'],
1007
1007
  codeSyntax: {
1008
- web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1008
+ web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
1009
1009
  },
1010
1010
  },
1011
1011
  },
1012
1012
  alpha: 0.4,
1013
1013
  },
1014
1014
  emphasis: {
1015
- $value: '{base.color.red.5}',
1015
+ $value: '{base.color.orange.5}',
1016
1016
  $type: 'color',
1017
1017
  $extensions: {
1018
1018
  'org.primer.figma': {
@@ -1021,15 +1021,15 @@
1021
1021
  group: 'semantic',
1022
1022
  scopes: ['borderColor'],
1023
1023
  codeSyntax: {
1024
- web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1024
+ web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1025
1025
  },
1026
1026
  },
1027
1027
  },
1028
1028
  },
1029
1029
  },
1030
- open: {
1030
+ danger: {
1031
1031
  muted: {
1032
- $value: '{borderColor.success.muted}',
1032
+ $value: '{base.color.red.4}',
1033
1033
  $type: 'color',
1034
1034
  $extensions: {
1035
1035
  'org.primer.figma': {
@@ -1038,13 +1038,14 @@
1038
1038
  group: 'semantic',
1039
1039
  scopes: ['borderColor'],
1040
1040
  codeSyntax: {
1041
- web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
1041
+ web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1042
1042
  },
1043
1043
  },
1044
1044
  },
1045
+ alpha: 0.4,
1045
1046
  },
1046
1047
  emphasis: {
1047
- $value: '{borderColor.success.emphasis}',
1048
+ $value: '{base.color.red.5}',
1048
1049
  $type: 'color',
1049
1050
  $extensions: {
1050
1051
  'org.primer.figma': {
@@ -1053,7 +1054,7 @@
1053
1054
  group: 'semantic',
1054
1055
  scopes: ['borderColor'],
1055
1056
  codeSyntax: {
1056
- web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
1057
+ web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1057
1058
  },
1058
1059
  },
1059
1060
  },
@@ -1061,7 +1062,7 @@
1061
1062
  },
1062
1063
  closed: {
1063
1064
  muted: {
1064
- $value: '{base.color.red.4}',
1065
+ $value: '{borderColor.danger.muted}',
1065
1066
  $type: 'color',
1066
1067
  $extensions: {
1067
1068
  'org.primer.figma': {
@@ -1077,7 +1078,7 @@
1077
1078
  alpha: 0.4,
1078
1079
  },
1079
1080
  emphasis: {
1080
- $value: '{base.color.red.5}',
1081
+ $value: '{borderColor.danger.emphasis}',
1081
1082
  $type: 'color',
1082
1083
  $extensions: {
1083
1084
  'org.primer.figma': {
@@ -1127,7 +1128,7 @@
1127
1128
  },
1128
1129
  upsell: {
1129
1130
  muted: {
1130
- $value: '{base.color.purple.4}',
1131
+ $value: '{borderColor.done.muted}',
1131
1132
  $type: 'color',
1132
1133
  $extensions: {
1133
1134
  'org.primer.figma': {
@@ -1143,7 +1144,7 @@
1143
1144
  alpha: 0.4,
1144
1145
  },
1145
1146
  emphasis: {
1146
- $value: '{base.color.purple.5}',
1147
+ $value: '{borderColor.done.emphasis}',
1147
1148
  $type: 'color',
1148
1149
  $extensions: {
1149
1150
  'org.primer.figma': {