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