@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/light_colorblind.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(255,255,255,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(3,119,234,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/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
  };
@@ -675,67 +621,13 @@ declare const _default: {
675
621
  gradientOut: string;
676
622
  };
677
623
  mktg: {
678
- success: string;
679
- info: string;
680
- bgShadeGradient: {
681
- top: string;
682
- bottom: string;
683
- };
684
624
  btn: {
685
- bg: {
686
- top: string;
687
- bottom: string;
688
- };
689
- bgOverlay: {
690
- top: string;
691
- bottom: string;
692
- };
693
- text: string;
694
- primary: {
695
- bg: {
696
- top: string;
697
- bottom: string;
698
- };
699
- bgOverlay: {
700
- top: string;
701
- bottom: string;
702
- };
703
- text: string;
704
- };
705
- enterprise: {
706
- bg: {
707
- top: string;
708
- bottom: string;
709
- };
710
- bgOverlay: {
711
- top: string;
712
- bottom: string;
713
- };
714
- text: string;
715
- };
716
- outline: {
717
- text: string;
718
- border: string;
719
- hover: {
720
- text: string;
721
- border: string;
722
- };
723
- focus: {
724
- border: string;
725
- borderInset: string;
726
- };
727
- };
728
- dark: {
729
- text: string;
730
- border: string;
731
- hover: {
732
- text: string;
733
- border: string;
734
- };
735
- focus: {
736
- border: string;
737
- borderInset: string;
738
- };
625
+ bg: string;
626
+ shadow: {
627
+ outline: string;
628
+ focus: string;
629
+ hover: string;
630
+ hoverMuted: string;
739
631
  };
740
632
  };
741
633
  };
@@ -1172,67 +1064,13 @@ declare const _default: {
1172
1064
  gradientOut: string;
1173
1065
  };
1174
1066
  mktg: {
1175
- success: string;
1176
- info: string;
1177
- bgShadeGradient: {
1178
- top: string;
1179
- bottom: string;
1180
- };
1181
1067
  btn: {
1182
- bg: {
1183
- top: string;
1184
- bottom: string;
1185
- };
1186
- bgOverlay: {
1187
- top: string;
1188
- bottom: string;
1189
- };
1190
- text: string;
1191
- primary: {
1192
- bg: {
1193
- top: string;
1194
- bottom: string;
1195
- };
1196
- bgOverlay: {
1197
- top: string;
1198
- bottom: string;
1199
- };
1200
- text: string;
1201
- };
1202
- enterprise: {
1203
- bg: {
1204
- top: string;
1205
- bottom: string;
1206
- };
1207
- bgOverlay: {
1208
- top: string;
1209
- bottom: string;
1210
- };
1211
- text: string;
1212
- };
1213
- outline: {
1214
- text: string;
1215
- border: string;
1216
- hover: {
1217
- text: string;
1218
- border: string;
1219
- };
1220
- focus: {
1221
- border: string;
1222
- borderInset: string;
1223
- };
1224
- };
1225
- dark: {
1226
- text: string;
1227
- border: string;
1228
- hover: {
1229
- text: string;
1230
- border: string;
1231
- };
1232
- focus: {
1233
- border: string;
1234
- borderInset: string;
1235
- };
1068
+ bg: string;
1069
+ shadow: {
1070
+ outline: string;
1071
+ focus: string;
1072
+ hover: string;
1073
+ hoverMuted: string;
1236
1074
  };
1237
1075
  };
1238
1076
  };
@@ -1669,67 +1507,13 @@ declare const _default: {
1669
1507
  gradientOut: string;
1670
1508
  };
1671
1509
  mktg: {
1672
- success: string;
1673
- info: string;
1674
- bgShadeGradient: {
1675
- top: string;
1676
- bottom: string;
1677
- };
1678
1510
  btn: {
1679
- bg: {
1680
- top: string;
1681
- bottom: string;
1682
- };
1683
- bgOverlay: {
1684
- top: string;
1685
- bottom: string;
1686
- };
1687
- text: string;
1688
- primary: {
1689
- bg: {
1690
- top: string;
1691
- bottom: string;
1692
- };
1693
- bgOverlay: {
1694
- top: string;
1695
- bottom: string;
1696
- };
1697
- text: string;
1698
- };
1699
- enterprise: {
1700
- bg: {
1701
- top: string;
1702
- bottom: string;
1703
- };
1704
- bgOverlay: {
1705
- top: string;
1706
- bottom: string;
1707
- };
1708
- text: string;
1709
- };
1710
- outline: {
1711
- text: string;
1712
- border: string;
1713
- hover: {
1714
- text: string;
1715
- border: string;
1716
- };
1717
- focus: {
1718
- border: string;
1719
- borderInset: string;
1720
- };
1721
- };
1722
- dark: {
1723
- text: string;
1724
- border: string;
1725
- hover: {
1726
- text: string;
1727
- border: string;
1728
- };
1729
- focus: {
1730
- border: string;
1731
- borderInset: string;
1732
- };
1511
+ bg: string;
1512
+ shadow: {
1513
+ outline: string;
1514
+ focus: string;
1515
+ hover: string;
1516
+ hoverMuted: string;
1733
1517
  };
1734
1518
  };
1735
1519
  };
@@ -2166,67 +1950,13 @@ declare const _default: {
2166
1950
  gradientOut: string;
2167
1951
  };
2168
1952
  mktg: {
2169
- success: string;
2170
- info: string;
2171
- bgShadeGradient: {
2172
- top: string;
2173
- bottom: string;
2174
- };
2175
1953
  btn: {
2176
- bg: {
2177
- top: string;
2178
- bottom: string;
2179
- };
2180
- bgOverlay: {
2181
- top: string;
2182
- bottom: string;
2183
- };
2184
- text: string;
2185
- primary: {
2186
- bg: {
2187
- top: string;
2188
- bottom: string;
2189
- };
2190
- bgOverlay: {
2191
- top: string;
2192
- bottom: string;
2193
- };
2194
- text: string;
2195
- };
2196
- enterprise: {
2197
- bg: {
2198
- top: string;
2199
- bottom: string;
2200
- };
2201
- bgOverlay: {
2202
- top: string;
2203
- bottom: string;
2204
- };
2205
- text: string;
2206
- };
2207
- outline: {
2208
- text: string;
2209
- border: string;
2210
- hover: {
2211
- text: string;
2212
- border: string;
2213
- };
2214
- focus: {
2215
- border: string;
2216
- borderInset: string;
2217
- };
2218
- };
2219
- dark: {
2220
- text: string;
2221
- border: string;
2222
- hover: {
2223
- text: string;
2224
- border: string;
2225
- };
2226
- focus: {
2227
- border: string;
2228
- borderInset: string;
2229
- };
1954
+ bg: string;
1955
+ shadow: {
1956
+ outline: string;
1957
+ focus: string;
1958
+ hover: string;
1959
+ hoverMuted: string;
2230
1960
  };
2231
1961
  };
2232
1962
  };
@@ -2663,67 +2393,13 @@ declare const _default: {
2663
2393
  gradientOut: string;
2664
2394
  };
2665
2395
  mktg: {
2666
- success: string;
2667
- info: string;
2668
- bgShadeGradient: {
2669
- top: string;
2670
- bottom: string;
2671
- };
2672
2396
  btn: {
2673
- bg: {
2674
- top: string;
2675
- bottom: string;
2676
- };
2677
- bgOverlay: {
2678
- top: string;
2679
- bottom: string;
2680
- };
2681
- text: string;
2682
- primary: {
2683
- bg: {
2684
- top: string;
2685
- bottom: string;
2686
- };
2687
- bgOverlay: {
2688
- top: string;
2689
- bottom: string;
2690
- };
2691
- text: string;
2692
- };
2693
- enterprise: {
2694
- bg: {
2695
- top: string;
2696
- bottom: string;
2697
- };
2698
- bgOverlay: {
2699
- top: string;
2700
- bottom: string;
2701
- };
2702
- text: string;
2703
- };
2704
- outline: {
2705
- text: string;
2706
- border: string;
2707
- hover: {
2708
- text: string;
2709
- border: string;
2710
- };
2711
- focus: {
2712
- border: string;
2713
- borderInset: string;
2714
- };
2715
- };
2716
- dark: {
2717
- text: string;
2718
- border: string;
2719
- hover: {
2720
- text: string;
2721
- border: string;
2722
- };
2723
- focus: {
2724
- border: string;
2725
- borderInset: string;
2726
- };
2397
+ bg: string;
2398
+ shadow: {
2399
+ outline: string;
2400
+ focus: string;
2401
+ hover: string;
2402
+ hoverMuted: string;
2727
2403
  };
2728
2404
  };
2729
2405
  };
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
  },
package/dist/json/colors/dark_colorblind.json CHANGED
@@ -176,67 +176,13 @@
176
176
  "gradientOut": "rgba(22,27,34,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(25,119,239,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
  },