@primer/primitives 8.2.4-rc.8aeeb948 → 8.2.4-rc.b28008e7

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 (29) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +10 -10
  2. package/dist/css/functional/themes/dark-dimmed.css +12 -12
  3. package/dist/css/functional/themes/dark-high-contrast.css +12 -12
  4. package/dist/css/functional/themes/dark-tritanopia.css +12 -12
  5. package/dist/css/functional/themes/dark.css +12 -12
  6. package/dist/docs/functional/themes/dark-colorblind.json +145 -145
  7. package/dist/docs/functional/themes/dark-dimmed.json +153 -155
  8. package/dist/docs/functional/themes/dark-high-contrast.json +154 -156
  9. package/dist/docs/functional/themes/dark-tritanopia.json +149 -149
  10. package/dist/docs/functional/themes/dark.json +153 -155
  11. package/dist/figma/themes/dark-colorblind.json +155 -155
  12. package/dist/figma/themes/dark-dimmed.json +138 -139
  13. package/dist/figma/themes/dark-high-contrast.json +138 -139
  14. package/dist/figma/themes/dark-tritanopia.json +157 -157
  15. package/dist/figma/themes/dark.json +138 -139
  16. package/dist/internalCss/dark-colorblind.css +10 -10
  17. package/dist/internalCss/dark-dimmed.css +12 -12
  18. package/dist/internalCss/dark-high-contrast.css +12 -12
  19. package/dist/internalCss/dark-tritanopia.css +12 -12
  20. package/dist/internalCss/dark.css +12 -12
  21. package/dist/styleLint/functional/themes/dark-colorblind.json +145 -145
  22. package/dist/styleLint/functional/themes/dark-dimmed.json +153 -155
  23. package/dist/styleLint/functional/themes/dark-high-contrast.json +154 -156
  24. package/dist/styleLint/functional/themes/dark-tritanopia.json +149 -149
  25. package/dist/styleLint/functional/themes/dark.json +153 -155
  26. package/package.json +1 -1
  27. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +0 -7
  28. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +0 -4
  29. package/src/tokens/functional/color/dark/primitives-dark.json5 +61 -62
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "8.2.4-rc.8aeeb948",
3
+ "version": "8.2.4-rc.b28008e7",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 CHANGED
@@ -72,13 +72,6 @@
72
72
  alpha: 1,
73
73
  },
74
74
  },
75
- open: {
76
- muted: {
77
- $value: '{borderColor.success.muted}',
78
- $type: 'color',
79
- alpha: 1,
80
- },
81
- },
82
75
  attention: {
83
76
  muted: {
84
77
  $value: '{base.color.yellow.4}',
package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 CHANGED
@@ -27,7 +27,6 @@
27
27
  muted: {
28
28
  $value: '{base.color.blue.4}',
29
29
  $type: 'color',
30
- alpha: 0.15,
31
30
  },
32
31
  emphasis: {
33
32
  $value: '{base.color.blue.5}',
@@ -38,7 +37,6 @@
38
37
  muted: {
39
38
  $value: '{base.color.red.4}',
40
39
  $type: 'color',
41
- alpha: 0.1,
42
40
  },
43
41
  emphasis: {
44
42
  $value: '{base.color.red.5}',
@@ -49,7 +47,6 @@
49
47
  muted: {
50
48
  $value: '{base.color.red.4}',
51
49
  $type: 'color',
52
- alpha: 0.15,
53
50
  },
54
51
  emphasis: {
55
52
  $value: '{base.color.red.5}',
@@ -60,7 +57,6 @@
60
57
  muted: {
61
58
  $value: '{base.color.neutral.4}',
62
59
  $type: 'color',
63
- alpha: 0.1,
64
60
  },
65
61
  emphasis: {
66
62
  $value: '{base.color.neutral.5}',
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -150,8 +150,8 @@
150
150
  },
151
151
  },
152
152
  },
153
- open: {
154
- $value: '{fgColor.success}',
153
+ attention: {
154
+ $value: '{base.color.yellow.3}',
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-open) /* utility class: .color-fg-open */',
163
+ web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
164
164
  },
165
165
  },
166
166
  },
167
167
  },
168
- attention: {
169
- $value: '{base.color.yellow.3}',
168
+ severe: {
169
+ $value: '{base.color.orange.4}',
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-attention) /* utility class: .color-fg-attention */',
178
+ web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
179
179
  },
180
180
  },
181
181
  },
182
182
  },
183
- severe: {
184
- $value: '{base.color.orange.4}',
183
+ danger: {
184
+ $value: '{base.color.red.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-severe) /* utility class: .color-fg-severe */',
193
+ web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
194
194
  },
195
195
  },
196
196
  },
197
197
  },
198
- danger: {
199
- $value: '{base.color.red.4}',
198
+ open: {
199
+ $value: '{fgColor.success}',
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-danger) /* utility class: .color-fg-danger */',
208
+ web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
209
209
  },
210
210
  },
211
211
  },
212
212
  },
213
213
  closed: {
214
- $value: '{fgColor.danger}',
214
+ $value: '{base.color.red.4}',
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: '{fgColor.done}',
244
+ $value: '{base.color.purple.4}',
245
245
  $type: 'color',
246
246
  $extensions: {
247
247
  'org.primer.figma': {
@@ -489,9 +489,9 @@
489
489
  },
490
490
  },
491
491
  },
492
- open: {
492
+ attention: {
493
493
  muted: {
494
- $value: '{bgColor.success.muted}',
494
+ $value: '{base.color.yellow.4}',
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-success-muted) /* utility class: .color-bg-success */',
503
+ web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
504
504
  },
505
505
  },
506
506
  },
507
507
  alpha: 0.15,
508
508
  },
509
509
  emphasis: {
510
- $value: '{bgColor.success.emphasis}',
510
+ $value: '{base.color.yellow.5}',
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-success-emphasis) /* utility class: .color-bg-success-emphasis */',
519
+ web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
520
520
  },
521
521
  },
522
522
  },
523
523
  },
524
524
  },
525
- attention: {
525
+ severe: {
526
526
  muted: {
527
- $value: '{base.color.yellow.4}',
527
+ $value: '{base.color.orange.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-attention-muted) /* utility class: .color-bg-attention */',
536
+ web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
537
537
  },
538
538
  },
539
539
  },
540
- alpha: 0.15,
540
+ alpha: 0.1,
541
541
  },
542
542
  emphasis: {
543
- $value: '{base.color.yellow.5}',
543
+ $value: '{base.color.orange.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-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
552
+ web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
553
553
  },
554
554
  },
555
555
  },
556
556
  },
557
557
  },
558
- severe: {
558
+ danger: {
559
559
  muted: {
560
- $value: '{base.color.orange.4}',
560
+ $value: '{base.color.red.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-severe-muted) /* utility class: .color-bg-severe */',
569
+ web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
570
570
  },
571
571
  },
572
572
  },
573
573
  alpha: 0.1,
574
574
  },
575
575
  emphasis: {
576
- $value: '{base.color.orange.5}',
576
+ $value: '{base.color.red.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-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
585
+ web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
586
586
  },
587
587
  },
588
588
  },
589
589
  },
590
590
  },
591
- danger: {
591
+ open: {
592
592
  muted: {
593
- $value: '{base.color.red.4}',
593
+ $value: '{bgColor.success.muted}',
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-danger-muted) /* utility class: .color-bg-danger */',
602
+ web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
603
603
  },
604
604
  },
605
605
  },
606
606
  alpha: 0.1,
607
607
  },
608
608
  emphasis: {
609
- $value: '{base.color.red.5}',
609
+ $value: '{bgColor.success.emphasis}',
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-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
618
+ web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
619
619
  },
620
620
  },
621
621
  },
@@ -623,7 +623,7 @@
623
623
  },
624
624
  closed: {
625
625
  muted: {
626
- $value: '{bgColor.danger.muted}',
626
+ $value: '{base.color.red.4}',
627
627
  $type: 'color',
628
628
  $extensions: {
629
629
  'org.primer.figma': {
@@ -636,7 +636,7 @@
636
636
  },
637
637
  },
638
638
  },
639
- alpha: 0.1,
639
+ alpha: 0.15,
640
640
  },
641
641
  emphasis: {
642
642
  $value: '{base.color.red.5}',
@@ -928,9 +928,9 @@
928
928
  },
929
929
  },
930
930
  },
931
- open: {
931
+ attention: {
932
932
  muted: {
933
- $value: '{borderColor.success.muted}',
933
+ $value: '{base.color.yellow.4}',
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-open-muted) /* utility class: .color-border-open */',
942
+ web: 'var(--borderColor-attention-muted) /* utility class: .color-border-attention */',
943
943
  },
944
944
  },
945
945
  },
946
946
  alpha: 0.4,
947
947
  },
948
948
  emphasis: {
949
- $value: '{borderColor.success.emphasis}',
949
+ $value: '{base.color.yellow.5}',
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-open-emphasis) /* utility class: .color-border-open-emphasis */',
958
+ web: 'var(--borderColor-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
959
959
  },
960
960
  },
961
961
  },
962
962
  },
963
963
  },
964
- attention: {
964
+ severe: {
965
965
  muted: {
966
- $value: '{base.color.yellow.4}',
966
+ $value: '{base.color.orange.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-attention-muted) /* utility class: .color-border-attention */',
975
+ web: 'var(--borderColor-severe-muted) /* utility class: .color-border-severe */',
976
976
  },
977
977
  },
978
978
  },
979
979
  alpha: 0.4,
980
980
  },
981
981
  emphasis: {
982
- $value: '{base.color.yellow.5}',
982
+ $value: '{base.color.orange.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-attention-emphasis) /* utility class: .color-border-attention-emphasis */',
991
+ web: 'var(--borderColor-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
992
992
  },
993
993
  },
994
994
  },
995
995
  },
996
996
  },
997
- severe: {
997
+ danger: {
998
998
  muted: {
999
- $value: '{base.color.orange.4}',
999
+ $value: '{base.color.red.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-severe-muted) /* utility class: .color-border-severe */',
1008
+ web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1009
1009
  },
1010
1010
  },
1011
1011
  },
1012
1012
  alpha: 0.4,
1013
1013
  },
1014
1014
  emphasis: {
1015
- $value: '{base.color.orange.5}',
1015
+ $value: '{base.color.red.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-severe-emphasis) /* utility class: .color-border-severe-emphasis */',
1024
+ web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1025
1025
  },
1026
1026
  },
1027
1027
  },
1028
1028
  },
1029
1029
  },
1030
- danger: {
1030
+ open: {
1031
1031
  muted: {
1032
- $value: '{base.color.red.4}',
1032
+ $value: '{borderColor.success.muted}',
1033
1033
  $type: 'color',
1034
1034
  $extensions: {
1035
1035
  'org.primer.figma': {
@@ -1038,14 +1038,13 @@
1038
1038
  group: 'semantic',
1039
1039
  scopes: ['borderColor'],
1040
1040
  codeSyntax: {
1041
- web: 'var(--borderColor-danger-muted) /* utility class: .color-border-danger */',
1041
+ web: 'var(--borderColor-open-muted) /* utility class: .color-border-open */',
1042
1042
  },
1043
1043
  },
1044
1044
  },
1045
- alpha: 0.4,
1046
1045
  },
1047
1046
  emphasis: {
1048
- $value: '{base.color.red.5}',
1047
+ $value: '{borderColor.success.emphasis}',
1049
1048
  $type: 'color',
1050
1049
  $extensions: {
1051
1050
  'org.primer.figma': {
@@ -1054,7 +1053,7 @@
1054
1053
  group: 'semantic',
1055
1054
  scopes: ['borderColor'],
1056
1055
  codeSyntax: {
1057
- web: 'var(--borderColor-danger-emphasis) /* utility class: .color-border-danger-emphasis */',
1056
+ web: 'var(--borderColor-open-emphasis) /* utility class: .color-border-open-emphasis */',
1058
1057
  },
1059
1058
  },
1060
1059
  },
@@ -1062,7 +1061,7 @@
1062
1061
  },
1063
1062
  closed: {
1064
1063
  muted: {
1065
- $value: '{borderColor.danger.muted}',
1064
+ $value: '{base.color.red.4}',
1066
1065
  $type: 'color',
1067
1066
  $extensions: {
1068
1067
  'org.primer.figma': {
@@ -1078,7 +1077,7 @@
1078
1077
  alpha: 0.4,
1079
1078
  },
1080
1079
  emphasis: {
1081
- $value: '{borderColor.danger.emphasis}',
1080
+ $value: '{base.color.red.5}',
1082
1081
  $type: 'color',
1083
1082
  $extensions: {
1084
1083
  'org.primer.figma': {
@@ -1128,7 +1127,7 @@
1128
1127
  },
1129
1128
  upsell: {
1130
1129
  muted: {
1131
- $value: '{borderColor.done.muted}',
1130
+ $value: '{base.color.purple.4}',
1132
1131
  $type: 'color',
1133
1132
  $extensions: {
1134
1133
  'org.primer.figma': {
@@ -1144,7 +1143,7 @@
1144
1143
  alpha: 0.4,
1145
1144
  },
1146
1145
  emphasis: {
1147
- $value: '{borderColor.done.emphasis}',
1146
+ $value: '{base.color.purple.5}',
1148
1147
  $type: 'color',
1149
1148
  $extensions: {
1150
1149
  'org.primer.figma': {