@primer/primitives 6.0.0 → 7.0.0-next.0-rc.41d503c

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 (34) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/colors/dark.d.ts +19 -60
  3. package/dist/js/colors/dark.js +19 -60
  4. package/dist/js/colors/dark_colorblind.d.ts +19 -60
  5. package/dist/js/colors/dark_colorblind.js +19 -60
  6. package/dist/js/colors/dark_dimmed.d.ts +19 -60
  7. package/dist/js/colors/dark_dimmed.js +19 -60
  8. package/dist/js/colors/dark_high_contrast.d.ts +19 -60
  9. package/dist/js/colors/dark_high_contrast.js +19 -60
  10. package/dist/js/colors/index.d.ts +114 -360
  11. package/dist/js/colors/light.d.ts +19 -60
  12. package/dist/js/colors/light.js +19 -60
  13. package/dist/js/colors/light_colorblind.d.ts +19 -60
  14. package/dist/js/colors/light_colorblind.js +19 -60
  15. package/dist/js/index.d.ts +114 -360
  16. package/dist/json/colors/dark.json +19 -60
  17. package/dist/json/colors/dark_colorblind.json +19 -60
  18. package/dist/json/colors/dark_dimmed.json +19 -60
  19. package/dist/json/colors/dark_high_contrast.json +19 -60
  20. package/dist/json/colors/light.json +19 -60
  21. package/dist/json/colors/light_colorblind.json +19 -60
  22. package/dist/scss/colors/_dark.scss +12 -31
  23. package/dist/scss/colors/_dark_colorblind.scss +12 -31
  24. package/dist/scss/colors/_dark_dimmed.scss +12 -31
  25. package/dist/scss/colors/_dark_high_contrast.scss +12 -31
  26. package/dist/scss/colors/_light.scss +12 -31
  27. package/dist/scss/colors/_light_colorblind.scss +12 -31
  28. package/dist/ts/colors/dark.ts +19 -60
  29. package/dist/ts/colors/dark_colorblind.ts +19 -60
  30. package/dist/ts/colors/dark_dimmed.ts +19 -60
  31. package/dist/ts/colors/dark_high_contrast.ts +19 -60
  32. package/dist/ts/colors/light.ts +19 -60
  33. package/dist/ts/colors/light_colorblind.ts +19 -60
  34. package/package.json +4 -2
package/dist/js/colors/dark_high_contrast.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(39,43,51,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(9,180,58,1)",
182
- "info": "rgba(64,158,255,1)",
183
- "bgShadeGradient": {
184
- "top": "rgba(1,4,9,0.065)",
185
- "bottom": "rgba(1,4,9,0)"
186
- },
187
181
  "btn": {
188
- "bg": {
189
- "top": "hsla(228,82%,66%,1)",
190
- "bottom": "#4969ed"
191
- },
192
- "bgOverlay": {
193
- "top": "hsla(228,74%,59%,1)",
194
- "bottom": "#3355e0"
195
- },
196
- "text": "#ffffff",
197
- "primary": {
198
- "bg": {
199
- "top": "hsla(137,56%,46%,1)",
200
- "bottom": "#2ea44f"
201
- },
202
- "bgOverlay": {
203
- "top": "hsla(134,60%,38%,1)",
204
- "bottom": "#22863a"
205
- },
206
- "text": "#ffffff"
207
- },
208
- "enterprise": {
209
- "bg": {
210
- "top": "hsla(249,100%,72%,1)",
211
- "bottom": "#6f57ff"
212
- },
213
- "bgOverlay": {
214
- "top": "hsla(248,65%,63%,1)",
215
- "bottom": "#614eda"
216
- },
217
- "text": "#ffffff"
218
- },
219
- "outline": {
220
- "text": "#ffffff",
221
- "border": "rgba(255,255,255,0.3)",
222
- "hover": {
223
- "text": "#ffffff",
224
- "border": "rgba(255,255,255,0.5)"
225
- },
226
- "focus": {
227
- "border": "#ffffff",
228
- "borderInset": "rgba(255,255,255,0.5)"
229
- }
230
- },
231
- "dark": {
232
- "text": "#ffffff",
233
- "border": "rgba(255,255,255,0.3)",
234
- "hover": {
235
- "text": "#ffffff",
236
- "border": "rgba(255,255,255,0.5)"
237
- },
238
- "focus": {
239
- "border": "#ffffff",
240
- "borderInset": "rgba(255,255,255,0.5)"
241
- }
182
+ "bg": "#f6f8fa",
183
+ "shadow": {
184
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
185
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
186
+ "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
187
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
242
188
  }
243
189
  }
244
190
  },
@@ -381,6 +327,19 @@ exports.default = {
381
327
  "icon": "#f0f3f6",
382
328
  "borderHover": "#bdc4cc"
383
329
  },
330
+ "actionListItem": {
331
+ "inlineDivider": "#7a828e",
332
+ "default": {
333
+ "hoverBg": "rgba(217,222,227,0.12)",
334
+ "activeBg": "rgba(217,222,227,0.24)",
335
+ "selectedBg": "rgba(217,222,227,0.08)"
336
+ },
337
+ "danger": {
338
+ "hoverBg": "#ff6a69",
339
+ "activeBg": "#ff4445",
340
+ "hoverText": "#0a0c10"
341
+ }
342
+ },
384
343
  "fg": {
385
344
  "default": "#f0f3f6",
386
345
  "muted": "#f0f3f6",
package/dist/js/colors/index.d.ts CHANGED
@@ -177,67 +177,13 @@ declare const _default: {
177
177
  gradientOut: string;
178
178
  };
179
179
  mktg: {
180
- success: string;
181
- info: string;
182
- bgShadeGradient: {
183
- top: string;
184
- bottom: string;
185
- };
186
180
  btn: {
187
- bg: {
188
- top: string;
189
- bottom: string;
190
- };
191
- bgOverlay: {
192
- top: string;
193
- bottom: string;
194
- };
195
- text: string;
196
- primary: {
197
- bg: {
198
- top: string;
199
- bottom: string;
200
- };
201
- bgOverlay: {
202
- top: string;
203
- bottom: string;
204
- };
205
- text: string;
206
- };
207
- enterprise: {
208
- bg: {
209
- top: string;
210
- bottom: string;
211
- };
212
- bgOverlay: {
213
- top: string;
214
- bottom: string;
215
- };
216
- text: string;
217
- };
218
- outline: {
219
- text: string;
220
- border: string;
221
- hover: {
222
- text: string;
223
- border: string;
224
- };
225
- focus: {
226
- border: string;
227
- borderInset: string;
228
- };
229
- };
230
- dark: {
231
- text: string;
232
- border: string;
233
- hover: {
234
- text: string;
235
- border: string;
236
- };
237
- focus: {
238
- border: string;
239
- borderInset: string;
240
- };
181
+ bg: string;
182
+ shadow: {
183
+ outline: string;
184
+ focus: string;
185
+ hover: string;
186
+ hoverMuted: string;
241
187
  };
242
188
  };
243
189
  };
@@ -380,6 +326,19 @@ declare const _default: {
380
326
  icon: string;
381
327
  borderHover: string;
382
328
  };
329
+ actionListItem: {
330
+ inlineDivider: string;
331
+ default: {
332
+ hoverBg: string;
333
+ activeBg: string;
334
+ selectedBg: string;
335
+ };
336
+ danger: {
337
+ hoverBg: string;
338
+ activeBg: string;
339
+ hoverText: string;
340
+ };
341
+ };
383
342
  fg: {
384
343
  default: string;
385
344
  muted: string;
@@ -661,67 +620,13 @@ declare const _default: {
661
620
  gradientOut: string;
662
621
  };
663
622
  mktg: {
664
- success: string;
665
- info: string;
666
- bgShadeGradient: {
667
- top: string;
668
- bottom: string;
669
- };
670
623
  btn: {
671
- bg: {
672
- top: string;
673
- bottom: string;
674
- };
675
- bgOverlay: {
676
- top: string;
677
- bottom: string;
678
- };
679
- text: string;
680
- primary: {
681
- bg: {
682
- top: string;
683
- bottom: string;
684
- };
685
- bgOverlay: {
686
- top: string;
687
- bottom: string;
688
- };
689
- text: string;
690
- };
691
- enterprise: {
692
- bg: {
693
- top: string;
694
- bottom: string;
695
- };
696
- bgOverlay: {
697
- top: string;
698
- bottom: string;
699
- };
700
- text: string;
701
- };
702
- outline: {
703
- text: string;
704
- border: string;
705
- hover: {
706
- text: string;
707
- border: string;
708
- };
709
- focus: {
710
- border: string;
711
- borderInset: string;
712
- };
713
- };
714
- dark: {
715
- text: string;
716
- border: string;
717
- hover: {
718
- text: string;
719
- border: string;
720
- };
721
- focus: {
722
- border: string;
723
- borderInset: string;
724
- };
624
+ bg: string;
625
+ shadow: {
626
+ outline: string;
627
+ focus: string;
628
+ hover: string;
629
+ hoverMuted: string;
725
630
  };
726
631
  };
727
632
  };
@@ -864,6 +769,19 @@ declare const _default: {
864
769
  icon: string;
865
770
  borderHover: string;
866
771
  };
772
+ actionListItem: {
773
+ inlineDivider: string;
774
+ default: {
775
+ hoverBg: string;
776
+ activeBg: string;
777
+ selectedBg: string;
778
+ };
779
+ danger: {
780
+ hoverBg: string;
781
+ activeBg: string;
782
+ hoverText: string;
783
+ };
784
+ };
867
785
  fg: {
868
786
  default: string;
869
787
  muted: string;
@@ -1145,67 +1063,13 @@ declare const _default: {
1145
1063
  gradientOut: string;
1146
1064
  };
1147
1065
  mktg: {
1148
- success: string;
1149
- info: string;
1150
- bgShadeGradient: {
1151
- top: string;
1152
- bottom: string;
1153
- };
1154
1066
  btn: {
1155
- bg: {
1156
- top: string;
1157
- bottom: string;
1158
- };
1159
- bgOverlay: {
1160
- top: string;
1161
- bottom: string;
1162
- };
1163
- text: string;
1164
- primary: {
1165
- bg: {
1166
- top: string;
1167
- bottom: string;
1168
- };
1169
- bgOverlay: {
1170
- top: string;
1171
- bottom: string;
1172
- };
1173
- text: string;
1174
- };
1175
- enterprise: {
1176
- bg: {
1177
- top: string;
1178
- bottom: string;
1179
- };
1180
- bgOverlay: {
1181
- top: string;
1182
- bottom: string;
1183
- };
1184
- text: string;
1185
- };
1186
- outline: {
1187
- text: string;
1188
- border: string;
1189
- hover: {
1190
- text: string;
1191
- border: string;
1192
- };
1193
- focus: {
1194
- border: string;
1195
- borderInset: string;
1196
- };
1197
- };
1198
- dark: {
1199
- text: string;
1200
- border: string;
1201
- hover: {
1202
- text: string;
1203
- border: string;
1204
- };
1205
- focus: {
1206
- border: string;
1207
- borderInset: string;
1208
- };
1067
+ bg: string;
1068
+ shadow: {
1069
+ outline: string;
1070
+ focus: string;
1071
+ hover: string;
1072
+ hoverMuted: string;
1209
1073
  };
1210
1074
  };
1211
1075
  };
@@ -1348,6 +1212,19 @@ declare const _default: {
1348
1212
  icon: string;
1349
1213
  borderHover: string;
1350
1214
  };
1215
+ actionListItem: {
1216
+ inlineDivider: string;
1217
+ default: {
1218
+ hoverBg: string;
1219
+ activeBg: string;
1220
+ selectedBg: string;
1221
+ };
1222
+ danger: {
1223
+ hoverBg: string;
1224
+ activeBg: string;
1225
+ hoverText: string;
1226
+ };
1227
+ };
1351
1228
  fg: {
1352
1229
  default: string;
1353
1230
  muted: string;
@@ -1629,67 +1506,13 @@ declare const _default: {
1629
1506
  gradientOut: string;
1630
1507
  };
1631
1508
  mktg: {
1632
- success: string;
1633
- info: string;
1634
- bgShadeGradient: {
1635
- top: string;
1636
- bottom: string;
1637
- };
1638
1509
  btn: {
1639
- bg: {
1640
- top: string;
1641
- bottom: string;
1642
- };
1643
- bgOverlay: {
1644
- top: string;
1645
- bottom: string;
1646
- };
1647
- text: string;
1648
- primary: {
1649
- bg: {
1650
- top: string;
1651
- bottom: string;
1652
- };
1653
- bgOverlay: {
1654
- top: string;
1655
- bottom: string;
1656
- };
1657
- text: string;
1658
- };
1659
- enterprise: {
1660
- bg: {
1661
- top: string;
1662
- bottom: string;
1663
- };
1664
- bgOverlay: {
1665
- top: string;
1666
- bottom: string;
1667
- };
1668
- text: string;
1669
- };
1670
- outline: {
1671
- text: string;
1672
- border: string;
1673
- hover: {
1674
- text: string;
1675
- border: string;
1676
- };
1677
- focus: {
1678
- border: string;
1679
- borderInset: string;
1680
- };
1681
- };
1682
- dark: {
1683
- text: string;
1684
- border: string;
1685
- hover: {
1686
- text: string;
1687
- border: string;
1688
- };
1689
- focus: {
1690
- border: string;
1691
- borderInset: string;
1692
- };
1510
+ bg: string;
1511
+ shadow: {
1512
+ outline: string;
1513
+ focus: string;
1514
+ hover: string;
1515
+ hoverMuted: string;
1693
1516
  };
1694
1517
  };
1695
1518
  };
@@ -1832,6 +1655,19 @@ declare const _default: {
1832
1655
  icon: string;
1833
1656
  borderHover: string;
1834
1657
  };
1658
+ actionListItem: {
1659
+ inlineDivider: string;
1660
+ default: {
1661
+ hoverBg: string;
1662
+ activeBg: string;
1663
+ selectedBg: string;
1664
+ };
1665
+ danger: {
1666
+ hoverBg: string;
1667
+ activeBg: string;
1668
+ hoverText: string;
1669
+ };
1670
+ };
1835
1671
  fg: {
1836
1672
  default: string;
1837
1673
  muted: string;
@@ -2113,67 +1949,13 @@ declare const _default: {
2113
1949
  gradientOut: string;
2114
1950
  };
2115
1951
  mktg: {
2116
- success: string;
2117
- info: string;
2118
- bgShadeGradient: {
2119
- top: string;
2120
- bottom: string;
2121
- };
2122
1952
  btn: {
2123
- bg: {
2124
- top: string;
2125
- bottom: string;
2126
- };
2127
- bgOverlay: {
2128
- top: string;
2129
- bottom: string;
2130
- };
2131
- text: string;
2132
- primary: {
2133
- bg: {
2134
- top: string;
2135
- bottom: string;
2136
- };
2137
- bgOverlay: {
2138
- top: string;
2139
- bottom: string;
2140
- };
2141
- text: string;
2142
- };
2143
- enterprise: {
2144
- bg: {
2145
- top: string;
2146
- bottom: string;
2147
- };
2148
- bgOverlay: {
2149
- top: string;
2150
- bottom: string;
2151
- };
2152
- text: string;
2153
- };
2154
- outline: {
2155
- text: string;
2156
- border: string;
2157
- hover: {
2158
- text: string;
2159
- border: string;
2160
- };
2161
- focus: {
2162
- border: string;
2163
- borderInset: string;
2164
- };
2165
- };
2166
- dark: {
2167
- text: string;
2168
- border: string;
2169
- hover: {
2170
- text: string;
2171
- border: string;
2172
- };
2173
- focus: {
2174
- border: string;
2175
- borderInset: string;
2176
- };
1953
+ bg: string;
1954
+ shadow: {
1955
+ outline: string;
1956
+ focus: string;
1957
+ hover: string;
1958
+ hoverMuted: string;
2177
1959
  };
2178
1960
  };
2179
1961
  };
@@ -2316,6 +2098,19 @@ declare const _default: {
2316
2098
  icon: string;
2317
2099
  borderHover: string;
2318
2100
  };
2101
+ actionListItem: {
2102
+ inlineDivider: string;
2103
+ default: {
2104
+ hoverBg: string;
2105
+ activeBg: string;
2106
+ selectedBg: string;
2107
+ };
2108
+ danger: {
2109
+ hoverBg: string;
2110
+ activeBg: string;
2111
+ hoverText: string;
2112
+ };
2113
+ };
2319
2114
  fg: {
2320
2115
  default: string;
2321
2116
  muted: string;
@@ -2597,67 +2392,13 @@ declare const _default: {
2597
2392
  gradientOut: string;
2598
2393
  };
2599
2394
  mktg: {
2600
- success: string;
2601
- info: string;
2602
- bgShadeGradient: {
2603
- top: string;
2604
- bottom: string;
2605
- };
2606
2395
  btn: {
2607
- bg: {
2608
- top: string;
2609
- bottom: string;
2610
- };
2611
- bgOverlay: {
2612
- top: string;
2613
- bottom: string;
2614
- };
2615
- text: string;
2616
- primary: {
2617
- bg: {
2618
- top: string;
2619
- bottom: string;
2620
- };
2621
- bgOverlay: {
2622
- top: string;
2623
- bottom: string;
2624
- };
2625
- text: string;
2626
- };
2627
- enterprise: {
2628
- bg: {
2629
- top: string;
2630
- bottom: string;
2631
- };
2632
- bgOverlay: {
2633
- top: string;
2634
- bottom: string;
2635
- };
2636
- text: string;
2637
- };
2638
- outline: {
2639
- text: string;
2640
- border: string;
2641
- hover: {
2642
- text: string;
2643
- border: string;
2644
- };
2645
- focus: {
2646
- border: string;
2647
- borderInset: string;
2648
- };
2649
- };
2650
- dark: {
2651
- text: string;
2652
- border: string;
2653
- hover: {
2654
- text: string;
2655
- border: string;
2656
- };
2657
- focus: {
2658
- border: string;
2659
- borderInset: string;
2660
- };
2396
+ bg: string;
2397
+ shadow: {
2398
+ outline: string;
2399
+ focus: string;
2400
+ hover: string;
2401
+ hoverMuted: string;
2661
2402
  };
2662
2403
  };
2663
2404
  };
@@ -2800,6 +2541,19 @@ declare const _default: {
2800
2541
  icon: string;
2801
2542
  borderHover: string;
2802
2543
  };
2544
+ actionListItem: {
2545
+ inlineDivider: string;
2546
+ default: {
2547
+ hoverBg: string;
2548
+ activeBg: string;
2549
+ selectedBg: string;
2550
+ };
2551
+ danger: {
2552
+ hoverBg: string;
2553
+ activeBg: string;
2554
+ hoverText: string;
2555
+ };
2556
+ };
2803
2557
  fg: {
2804
2558
  default: string;
2805
2559
  muted: string;