@primer/primitives 6.1.0 → 7.0.0-rc.fe8d621

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 +6 -0
  2. package/dist/js/colors/dark.d.ts +6 -60
  3. package/dist/js/colors/dark.js +6 -60
  4. package/dist/js/colors/dark_colorblind.d.ts +6 -60
  5. package/dist/js/colors/dark_colorblind.js +6 -60
  6. package/dist/js/colors/dark_dimmed.d.ts +6 -60
  7. package/dist/js/colors/dark_dimmed.js +6 -60
  8. package/dist/js/colors/dark_high_contrast.d.ts +6 -60
  9. package/dist/js/colors/dark_high_contrast.js +6 -60
  10. package/dist/js/colors/index.d.ts +36 -360
  11. package/dist/js/colors/light.d.ts +6 -60
  12. package/dist/js/colors/light.js +6 -60
  13. package/dist/js/colors/light_colorblind.d.ts +6 -60
  14. package/dist/js/colors/light_colorblind.js +6 -60
  15. package/dist/js/index.d.ts +36 -360
  16. package/dist/json/colors/dark.json +6 -60
  17. package/dist/json/colors/dark_colorblind.json +6 -60
  18. package/dist/json/colors/dark_dimmed.json +6 -60
  19. package/dist/json/colors/dark_high_contrast.json +6 -60
  20. package/dist/json/colors/light.json +6 -60
  21. package/dist/json/colors/light_colorblind.json +6 -60
  22. package/dist/scss/colors/_dark.scss +5 -31
  23. package/dist/scss/colors/_dark_colorblind.scss +5 -31
  24. package/dist/scss/colors/_dark_dimmed.scss +5 -31
  25. package/dist/scss/colors/_dark_high_contrast.scss +5 -31
  26. package/dist/scss/colors/_light.scss +5 -31
  27. package/dist/scss/colors/_light_colorblind.scss +5 -31
  28. package/dist/ts/colors/dark.ts +6 -60
  29. package/dist/ts/colors/dark_colorblind.ts +6 -60
  30. package/dist/ts/colors/dark_dimmed.ts +6 -60
  31. package/dist/ts/colors/dark_high_contrast.ts +6 -60
  32. package/dist/ts/colors/light.ts +6 -60
  33. package/dist/ts/colors/light_colorblind.ts +6 -60
  34. package/package.json +4 -2
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
  };
@@ -674,67 +620,13 @@ declare const _default: {
674
620
  gradientOut: string;
675
621
  };
676
622
  mktg: {
677
- success: string;
678
- info: string;
679
- bgShadeGradient: {
680
- top: string;
681
- bottom: string;
682
- };
683
623
  btn: {
684
- bg: {
685
- top: string;
686
- bottom: string;
687
- };
688
- bgOverlay: {
689
- top: string;
690
- bottom: string;
691
- };
692
- text: string;
693
- primary: {
694
- bg: {
695
- top: string;
696
- bottom: string;
697
- };
698
- bgOverlay: {
699
- top: string;
700
- bottom: string;
701
- };
702
- text: string;
703
- };
704
- enterprise: {
705
- bg: {
706
- top: string;
707
- bottom: string;
708
- };
709
- bgOverlay: {
710
- top: string;
711
- bottom: string;
712
- };
713
- text: string;
714
- };
715
- outline: {
716
- text: string;
717
- border: string;
718
- hover: {
719
- text: string;
720
- border: string;
721
- };
722
- focus: {
723
- border: string;
724
- borderInset: string;
725
- };
726
- };
727
- dark: {
728
- text: string;
729
- border: string;
730
- hover: {
731
- text: string;
732
- border: string;
733
- };
734
- focus: {
735
- border: string;
736
- borderInset: string;
737
- };
624
+ bg: string;
625
+ shadow: {
626
+ outline: string;
627
+ focus: string;
628
+ hover: string;
629
+ hoverMuted: string;
738
630
  };
739
631
  };
740
632
  };
@@ -1171,67 +1063,13 @@ declare const _default: {
1171
1063
  gradientOut: string;
1172
1064
  };
1173
1065
  mktg: {
1174
- success: string;
1175
- info: string;
1176
- bgShadeGradient: {
1177
- top: string;
1178
- bottom: string;
1179
- };
1180
1066
  btn: {
1181
- bg: {
1182
- top: string;
1183
- bottom: string;
1184
- };
1185
- bgOverlay: {
1186
- top: string;
1187
- bottom: string;
1188
- };
1189
- text: string;
1190
- primary: {
1191
- bg: {
1192
- top: string;
1193
- bottom: string;
1194
- };
1195
- bgOverlay: {
1196
- top: string;
1197
- bottom: string;
1198
- };
1199
- text: string;
1200
- };
1201
- enterprise: {
1202
- bg: {
1203
- top: string;
1204
- bottom: string;
1205
- };
1206
- bgOverlay: {
1207
- top: string;
1208
- bottom: string;
1209
- };
1210
- text: string;
1211
- };
1212
- outline: {
1213
- text: string;
1214
- border: string;
1215
- hover: {
1216
- text: string;
1217
- border: string;
1218
- };
1219
- focus: {
1220
- border: string;
1221
- borderInset: string;
1222
- };
1223
- };
1224
- dark: {
1225
- text: string;
1226
- border: string;
1227
- hover: {
1228
- text: string;
1229
- border: string;
1230
- };
1231
- focus: {
1232
- border: string;
1233
- borderInset: string;
1234
- };
1067
+ bg: string;
1068
+ shadow: {
1069
+ outline: string;
1070
+ focus: string;
1071
+ hover: string;
1072
+ hoverMuted: string;
1235
1073
  };
1236
1074
  };
1237
1075
  };
@@ -1668,67 +1506,13 @@ declare const _default: {
1668
1506
  gradientOut: string;
1669
1507
  };
1670
1508
  mktg: {
1671
- success: string;
1672
- info: string;
1673
- bgShadeGradient: {
1674
- top: string;
1675
- bottom: string;
1676
- };
1677
1509
  btn: {
1678
- bg: {
1679
- top: string;
1680
- bottom: string;
1681
- };
1682
- bgOverlay: {
1683
- top: string;
1684
- bottom: string;
1685
- };
1686
- text: string;
1687
- primary: {
1688
- bg: {
1689
- top: string;
1690
- bottom: string;
1691
- };
1692
- bgOverlay: {
1693
- top: string;
1694
- bottom: string;
1695
- };
1696
- text: string;
1697
- };
1698
- enterprise: {
1699
- bg: {
1700
- top: string;
1701
- bottom: string;
1702
- };
1703
- bgOverlay: {
1704
- top: string;
1705
- bottom: string;
1706
- };
1707
- text: string;
1708
- };
1709
- outline: {
1710
- text: string;
1711
- border: string;
1712
- hover: {
1713
- text: string;
1714
- border: string;
1715
- };
1716
- focus: {
1717
- border: string;
1718
- borderInset: string;
1719
- };
1720
- };
1721
- dark: {
1722
- text: string;
1723
- border: string;
1724
- hover: {
1725
- text: string;
1726
- border: string;
1727
- };
1728
- focus: {
1729
- border: string;
1730
- borderInset: string;
1731
- };
1510
+ bg: string;
1511
+ shadow: {
1512
+ outline: string;
1513
+ focus: string;
1514
+ hover: string;
1515
+ hoverMuted: string;
1732
1516
  };
1733
1517
  };
1734
1518
  };
@@ -2165,67 +1949,13 @@ declare const _default: {
2165
1949
  gradientOut: string;
2166
1950
  };
2167
1951
  mktg: {
2168
- success: string;
2169
- info: string;
2170
- bgShadeGradient: {
2171
- top: string;
2172
- bottom: string;
2173
- };
2174
1952
  btn: {
2175
- bg: {
2176
- top: string;
2177
- bottom: string;
2178
- };
2179
- bgOverlay: {
2180
- top: string;
2181
- bottom: string;
2182
- };
2183
- text: string;
2184
- primary: {
2185
- bg: {
2186
- top: string;
2187
- bottom: string;
2188
- };
2189
- bgOverlay: {
2190
- top: string;
2191
- bottom: string;
2192
- };
2193
- text: string;
2194
- };
2195
- enterprise: {
2196
- bg: {
2197
- top: string;
2198
- bottom: string;
2199
- };
2200
- bgOverlay: {
2201
- top: string;
2202
- bottom: string;
2203
- };
2204
- text: string;
2205
- };
2206
- outline: {
2207
- text: string;
2208
- border: string;
2209
- hover: {
2210
- text: string;
2211
- border: string;
2212
- };
2213
- focus: {
2214
- border: string;
2215
- borderInset: string;
2216
- };
2217
- };
2218
- dark: {
2219
- text: string;
2220
- border: string;
2221
- hover: {
2222
- text: string;
2223
- border: string;
2224
- };
2225
- focus: {
2226
- border: string;
2227
- borderInset: string;
2228
- };
1953
+ bg: string;
1954
+ shadow: {
1955
+ outline: string;
1956
+ focus: string;
1957
+ hover: string;
1958
+ hoverMuted: string;
2229
1959
  };
2230
1960
  };
2231
1961
  };
@@ -2662,67 +2392,13 @@ declare const _default: {
2662
2392
  gradientOut: string;
2663
2393
  };
2664
2394
  mktg: {
2665
- success: string;
2666
- info: string;
2667
- bgShadeGradient: {
2668
- top: string;
2669
- bottom: string;
2670
- };
2671
2395
  btn: {
2672
- bg: {
2673
- top: string;
2674
- bottom: string;
2675
- };
2676
- bgOverlay: {
2677
- top: string;
2678
- bottom: string;
2679
- };
2680
- text: string;
2681
- primary: {
2682
- bg: {
2683
- top: string;
2684
- bottom: string;
2685
- };
2686
- bgOverlay: {
2687
- top: string;
2688
- bottom: string;
2689
- };
2690
- text: string;
2691
- };
2692
- enterprise: {
2693
- bg: {
2694
- top: string;
2695
- bottom: string;
2696
- };
2697
- bgOverlay: {
2698
- top: string;
2699
- bottom: string;
2700
- };
2701
- text: string;
2702
- };
2703
- outline: {
2704
- text: string;
2705
- border: string;
2706
- hover: {
2707
- text: string;
2708
- border: string;
2709
- };
2710
- focus: {
2711
- border: string;
2712
- borderInset: string;
2713
- };
2714
- };
2715
- dark: {
2716
- text: string;
2717
- border: string;
2718
- hover: {
2719
- text: string;
2720
- border: string;
2721
- };
2722
- focus: {
2723
- border: string;
2724
- borderInset: string;
2725
- };
2396
+ bg: string;
2397
+ shadow: {
2398
+ outline: string;
2399
+ focus: string;
2400
+ hover: string;
2401
+ hoverMuted: string;
2726
2402
  };
2727
2403
  };
2728
2404
  };
package/dist/js/colors/light.d.ts CHANGED
@@ -176,67 +176,13 @@ declare const _default: {
176
176
  gradientOut: string;
177
177
  };
178
178
  mktg: {
179
- success: string;
180
- info: string;
181
- bgShadeGradient: {
182
- top: string;
183
- bottom: string;
184
- };
185
179
  btn: {
186
- bg: {
187
- top: string;
188
- bottom: string;
189
- };
190
- bgOverlay: {
191
- top: string;
192
- bottom: string;
193
- };
194
- text: string;
195
- primary: {
196
- bg: {
197
- top: string;
198
- bottom: string;
199
- };
200
- bgOverlay: {
201
- top: string;
202
- bottom: string;
203
- };
204
- text: string;
205
- };
206
- enterprise: {
207
- bg: {
208
- top: string;
209
- bottom: string;
210
- };
211
- bgOverlay: {
212
- top: string;
213
- bottom: string;
214
- };
215
- text: string;
216
- };
217
- outline: {
218
- text: string;
219
- border: string;
220
- hover: {
221
- text: string;
222
- border: string;
223
- };
224
- focus: {
225
- border: string;
226
- borderInset: string;
227
- };
228
- };
229
- dark: {
230
- text: string;
231
- border: string;
232
- hover: {
233
- text: string;
234
- border: string;
235
- };
236
- focus: {
237
- border: string;
238
- borderInset: string;
239
- };
180
+ bg: string;
181
+ shadow: {
182
+ outline: string;
183
+ focus: string;
184
+ hover: string;
185
+ hoverMuted: string;
240
186
  };
241
187
  };
242
188
  };
package/dist/js/colors/light.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(255,255,255,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(36,146,67,1)",
182
- "info": "rgba(19,119,234,1)",
183
- "bgShadeGradient": {
184
- "top": "rgba(27,31,36,0.065)",
185
- "bottom": "rgba(27,31,36,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": "#4969ed",
221
- "border": "rgba(73,105,237,0.3)",
222
- "hover": {
223
- "text": "#3355e0",
224
- "border": "rgba(51,85,224,0.5)"
225
- },
226
- "focus": {
227
- "border": "#4969ed",
228
- "borderInset": "rgba(73,105,237,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": "#1b1f23",
183
+ "shadow": {
184
+ "outline": "rgb(0 0 0 / 15%) 0 0 0 1px inset",
185
+ "focus": "rgb(0 0 0 / 15%) 0 0 0 4px",
186
+ "hover": "0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)",
187
+ "hoverMuted": "rgb(0 0 0 / 70%) 0 0 0 2px inset"
242
188
  }
243
189
  }
244
190
  },
package/dist/js/colors/light_colorblind.d.ts CHANGED
@@ -176,67 +176,13 @@ declare const _default: {
176
176
  gradientOut: string;
177
177
  };
178
178
  mktg: {
179
- success: string;
180
- info: string;
181
- bgShadeGradient: {
182
- top: string;
183
- bottom: string;
184
- };
185
179
  btn: {
186
- bg: {
187
- top: string;
188
- bottom: string;
189
- };
190
- bgOverlay: {
191
- top: string;
192
- bottom: string;
193
- };
194
- text: string;
195
- primary: {
196
- bg: {
197
- top: string;
198
- bottom: string;
199
- };
200
- bgOverlay: {
201
- top: string;
202
- bottom: string;
203
- };
204
- text: string;
205
- };
206
- enterprise: {
207
- bg: {
208
- top: string;
209
- bottom: string;
210
- };
211
- bgOverlay: {
212
- top: string;
213
- bottom: string;
214
- };
215
- text: string;
216
- };
217
- outline: {
218
- text: string;
219
- border: string;
220
- hover: {
221
- text: string;
222
- border: string;
223
- };
224
- focus: {
225
- border: string;
226
- borderInset: string;
227
- };
228
- };
229
- dark: {
230
- text: string;
231
- border: string;
232
- hover: {
233
- text: string;
234
- border: string;
235
- };
236
- focus: {
237
- border: string;
238
- borderInset: string;
239
- };
180
+ bg: string;
181
+ shadow: {
182
+ outline: string;
183
+ focus: string;
184
+ hover: string;
185
+ hoverMuted: string;
240
186
  };
241
187
  };
242
188
  };