@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/light/primitives-light.json5 CHANGED
@@ -49,6 +49,18 @@
49
49
  },
50
50
  },
51
51
  },
52
+ onInverse: {
53
+ $value: '{base.color.white}',
54
+ $type: 'color',
55
+ $extensions: {
56
+ 'org.primer.figma': {
57
+ collection: 'mode',
58
+ mode: 'light',
59
+ group: 'semantic',
60
+ scopes: ['fgColor'],
61
+ },
62
+ },
63
+ },
52
64
  white: {
53
65
  $value: '{base.color.white}',
54
66
  $type: 'color',
@@ -101,7 +113,7 @@
101
113
  },
102
114
  },
103
115
  neutral: {
104
- $value: '{base.color.neutral.5}',
116
+ $value: '{base.color.neutral.6}',
105
117
  $type: 'color',
106
118
  $extensions: {
107
119
  'org.primer.figma': {
@@ -110,7 +122,7 @@
110
122
  group: 'semantic',
111
123
  scopes: ['fgColor'],
112
124
  },
113
- },
125
+ }
114
126
  },
115
127
  accent: {
116
128
  $value: '{base.color.blue.5}',
@@ -142,6 +154,21 @@
142
154
  },
143
155
  },
144
156
  },
157
+ open: {
158
+ $value: '{fgColor.success}',
159
+ $type: 'color',
160
+ $extensions: {
161
+ 'org.primer.figma': {
162
+ collection: 'mode',
163
+ mode: 'light',
164
+ group: 'semantic',
165
+ scopes: ['fgColor'],
166
+ codeSyntax: {
167
+ web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
168
+ },
169
+ },
170
+ },
171
+ },
145
172
  attention: {
146
173
  $value: '{base.color.yellow.5}',
147
174
  $type: 'color',
@@ -191,21 +218,6 @@
191
218
  weight: 0.05,
192
219
  },
193
220
  },
194
- open: {
195
- $value: '{fgColor.success}',
196
- $type: 'color',
197
- $extensions: {
198
- 'org.primer.figma': {
199
- collection: 'mode',
200
- mode: 'light',
201
- group: 'semantic',
202
- scopes: ['fgColor'],
203
- codeSyntax: {
204
- web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
205
- },
206
- },
207
- },
208
- },
209
221
  closed: {
210
222
  $value: '{fgColor.danger}',
211
223
  $type: 'color',
@@ -237,7 +249,7 @@
237
249
  },
238
250
  },
239
251
  upsell: {
240
- $value: '{base.color.purple.5}',
252
+ $value: '{fgColor.done}',
241
253
  $type: 'color',
242
254
  $extensions: {
243
255
  'org.primer.figma': {
@@ -487,9 +499,9 @@
487
499
  },
488
500
  },
489
501
  },
490
- attention: {
502
+ open: {
491
503
  muted: {
492
- $value: '{base.color.yellow.0}',
504
+ $value: '{bgColor.success.muted}',
493
505
  $type: 'color',
494
506
  $extensions: {
495
507
  'org.primer.figma': {
@@ -498,13 +510,13 @@
498
510
  group: 'semantic',
499
511
  scopes: ['bgColor'],
500
512
  codeSyntax: {
501
- web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
513
+ web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
502
514
  },
503
515
  },
504
516
  },
505
517
  },
506
518
  emphasis: {
507
- $value: '{base.color.yellow.5}',
519
+ $value: '{bgColor.success.emphasis}',
508
520
  $type: 'color',
509
521
  $extensions: {
510
522
  'org.primer.figma': {
@@ -513,15 +525,15 @@
513
525
  group: 'semantic',
514
526
  scopes: ['bgColor'],
515
527
  codeSyntax: {
516
- web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
528
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
517
529
  },
518
530
  },
519
531
  },
520
532
  },
521
533
  },
522
- severe: {
534
+ attention: {
523
535
  muted: {
524
- $value: '{base.color.orange.0}',
536
+ $value: '{base.color.yellow.0}',
525
537
  $type: 'color',
526
538
  $extensions: {
527
539
  'org.primer.figma': {
@@ -530,13 +542,13 @@
530
542
  group: 'semantic',
531
543
  scopes: ['bgColor'],
532
544
  codeSyntax: {
533
- web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
545
+ web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
534
546
  },
535
547
  },
536
548
  },
537
549
  },
538
550
  emphasis: {
539
- $value: '{base.color.orange.5}',
551
+ $value: '{base.color.yellow.5}',
540
552
  $type: 'color',
541
553
  $extensions: {
542
554
  'org.primer.figma': {
@@ -545,15 +557,15 @@
545
557
  group: 'semantic',
546
558
  scopes: ['bgColor'],
547
559
  codeSyntax: {
548
- web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
560
+ web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
549
561
  },
550
562
  },
551
563
  },
552
564
  },
553
565
  },
554
- danger: {
566
+ severe: {
555
567
  muted: {
556
- $value: '{base.color.red.0}',
568
+ $value: '{base.color.orange.0}',
557
569
  $type: 'color',
558
570
  $extensions: {
559
571
  'org.primer.figma': {
@@ -562,13 +574,13 @@
562
574
  group: 'semantic',
563
575
  scopes: ['bgColor'],
564
576
  codeSyntax: {
565
- web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
577
+ web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
566
578
  },
567
579
  },
568
580
  },
569
581
  },
570
582
  emphasis: {
571
- $value: '{base.color.red.5}',
583
+ $value: '{base.color.orange.5}',
572
584
  $type: 'color',
573
585
  $extensions: {
574
586
  'org.primer.figma': {
@@ -577,15 +589,15 @@
577
589
  group: 'semantic',
578
590
  scopes: ['bgColor'],
579
591
  codeSyntax: {
580
- web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
592
+ web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
581
593
  },
582
594
  },
583
595
  },
584
596
  },
585
597
  },
586
- open: {
598
+ danger: {
587
599
  muted: {
588
- $value: '{bgColor.success.muted}',
600
+ $value: '{base.color.red.0}',
589
601
  $type: 'color',
590
602
  $extensions: {
591
603
  'org.primer.figma': {
@@ -594,13 +606,13 @@
594
606
  group: 'semantic',
595
607
  scopes: ['bgColor'],
596
608
  codeSyntax: {
597
- web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
609
+ web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
598
610
  },
599
611
  },
600
612
  },
601
613
  },
602
614
  emphasis: {
603
- $value: '{bgColor.success.emphasis}',
615
+ $value: '{base.color.red.5}',
604
616
  $type: 'color',
605
617
  $extensions: {
606
618
  'org.primer.figma': {
@@ -609,7 +621,7 @@
609
621
  group: 'semantic',
610
622
  scopes: ['bgColor'],
611
623
  codeSyntax: {
612
- web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
624
+ web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
613
625
  },
614
626
  },
615
627
  },
@@ -617,7 +629,7 @@
617
629
  },
618
630
  closed: {
619
631
  muted: {
620
- $value: '{base.color.red.0}',
632
+ $value: '{bgColor.danger.muted}',
621
633
  $type: 'color',
622
634
  $extensions: {
623
635
  'org.primer.figma': {
@@ -632,7 +644,7 @@
632
644
  },
633
645
  },
634
646
  emphasis: {
635
- $value: '{base.color.red.5}',
647
+ $value: '{bgColor.danger.emphasis}',
636
648
  $type: 'color',
637
649
  $extensions: {
638
650
  'org.primer.figma': {
@@ -681,7 +693,7 @@
681
693
  },
682
694
  upsell: {
683
695
  muted: {
684
- $value: '{base.color.purple.0}',
696
+ $value: '{bgColor.done.muted}',
685
697
  $type: 'color',
686
698
  $extensions: {
687
699
  'org.primer.figma': {
@@ -696,7 +708,7 @@
696
708
  },
697
709
  },
698
710
  emphasis: {
699
- $value: '{base.color.purple.5}',
711
+ $value: '{bgColor.done.emphasis}',
700
712
  $type: 'color',
701
713
  $extensions: {
702
714
  'org.primer.figma': {
@@ -918,9 +930,9 @@
918
930
  },
919
931
  },
920
932
  },
921
- attention: {
933
+ open: {
922
934
  muted: {
923
- $value: '{base.color.yellow.3}',
935
+ $value: '{borderColor.success.muted}',
924
936
  $type: 'color',
925
937
  $extensions: {
926
938
  'org.primer.figma': {
@@ -929,14 +941,14 @@
929
941
  group: 'semantic',
930
942
  scopes: ['borderColor'],
931
943
  codeSyntax: {
932
- web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
944
+ web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
933
945
  },
934
946
  },
935
947
  },
936
948
  alpha: 0.4,
937
949
  },
938
950
  emphasis: {
939
- $value: '{base.color.yellow.4}',
951
+ $value: '{borderColor.success.emphasis}',
940
952
  $type: 'color',
941
953
  $extensions: {
942
954
  'org.primer.figma': {
@@ -945,15 +957,15 @@
945
957
  group: 'semantic',
946
958
  scopes: ['borderColor'],
947
959
  codeSyntax: {
948
- web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
960
+ web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
949
961
  },
950
962
  },
951
963
  },
952
964
  },
953
965
  },
954
- severe: {
966
+ attention: {
955
967
  muted: {
956
- $value: '{base.color.orange.3}',
968
+ $value: '{base.color.yellow.3}',
957
969
  $type: 'color',
958
970
  $extensions: {
959
971
  'org.primer.figma': {
@@ -962,14 +974,14 @@
962
974
  group: 'semantic',
963
975
  scopes: ['borderColor'],
964
976
  codeSyntax: {
965
- web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
977
+ web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
966
978
  },
967
979
  },
968
980
  },
969
981
  alpha: 0.4,
970
982
  },
971
983
  emphasis: {
972
- $value: '{base.color.orange.5}',
984
+ $value: '{base.color.yellow.4}',
973
985
  $type: 'color',
974
986
  $extensions: {
975
987
  'org.primer.figma': {
@@ -978,15 +990,15 @@
978
990
  group: 'semantic',
979
991
  scopes: ['borderColor'],
980
992
  codeSyntax: {
981
- web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
993
+ web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
982
994
  },
983
995
  },
984
996
  },
985
997
  },
986
998
  },
987
- danger: {
999
+ severe: {
988
1000
  muted: {
989
- $value: '{base.color.red.3}',
1001
+ $value: '{base.color.orange.3}',
990
1002
  $type: 'color',
991
1003
  $extensions: {
992
1004
  'org.primer.figma': {
@@ -995,14 +1007,14 @@
995
1007
  group: 'semantic',
996
1008
  scopes: ['borderColor'],
997
1009
  codeSyntax: {
998
- web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1010
+ web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
999
1011
  },
1000
1012
  },
1001
1013
  },
1002
1014
  alpha: 0.4,
1003
1015
  },
1004
1016
  emphasis: {
1005
- $value: '{base.color.red.5}',
1017
+ $value: '{base.color.orange.5}',
1006
1018
  $type: 'color',
1007
1019
  $extensions: {
1008
1020
  'org.primer.figma': {
@@ -1011,15 +1023,15 @@
1011
1023
  group: 'semantic',
1012
1024
  scopes: ['borderColor'],
1013
1025
  codeSyntax: {
1014
- web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1026
+ web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1015
1027
  },
1016
1028
  },
1017
1029
  },
1018
1030
  },
1019
1031
  },
1020
- open: {
1032
+ danger: {
1021
1033
  muted: {
1022
- $value: '{borderColor.success.muted}',
1034
+ $value: '{base.color.red.3}',
1023
1035
  $type: 'color',
1024
1036
  $extensions: {
1025
1037
  'org.primer.figma': {
@@ -1028,13 +1040,14 @@
1028
1040
  group: 'semantic',
1029
1041
  scopes: ['borderColor'],
1030
1042
  codeSyntax: {
1031
- web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
1043
+ web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1032
1044
  },
1033
1045
  },
1034
1046
  },
1047
+ alpha: 0.4,
1035
1048
  },
1036
1049
  emphasis: {
1037
- $value: '{borderColor.success.emphasis}',
1050
+ $value: '{base.color.red.5}',
1038
1051
  $type: 'color',
1039
1052
  $extensions: {
1040
1053
  'org.primer.figma': {
@@ -1043,7 +1056,7 @@
1043
1056
  group: 'semantic',
1044
1057
  scopes: ['borderColor'],
1045
1058
  codeSyntax: {
1046
- web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
1059
+ web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1047
1060
  },
1048
1061
  },
1049
1062
  },
@@ -1117,7 +1130,7 @@
1117
1130
  },
1118
1131
  upsell: {
1119
1132
  muted: {
1120
- $value: '{base.color.purple.3}',
1133
+ $value: '{borderColor.done.muted}',
1121
1134
  $type: 'color',
1122
1135
  $extensions: {
1123
1136
  'org.primer.figma': {
@@ -1133,7 +1146,7 @@
1133
1146
  alpha: 0.4,
1134
1147
  },
1135
1148
  emphasis: {
1136
- $value: '{base.color.purple.5}',
1149
+ $value: '{borderColor.done.emphasis}',
1137
1150
  $type: 'color',
1138
1151
  $extensions: {
1139
1152
  'org.primer.figma': {
package/src/tokens/functional/size/border.json CHANGED
@@ -81,6 +81,19 @@
81
81
  }
82
82
  }
83
83
  }
84
+ },
85
+ "default": {
86
+ "$value": "{borderRadius.medium}",
87
+ "$type": "dimension",
88
+ "$extensions": {
89
+ "org.primer.figma": {
90
+ "collection": "functional/size",
91
+ "scopes": ["radius"],
92
+ "codeSyntax": {
93
+ "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
94
+ }
95
+ }
96
+ }
84
97
  }
85
98
  },
86
99
  "outline": {