@primer/components 31.2.1-rc.48ecca6e → 31.2.1-rc.7fa29a87

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 (22) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/browser.esm.js +194 -190
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +204 -200
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +27 -52
  7. package/lib/ActionList/Item.jsx +17 -40
  8. package/lib/NewButton/button.js +34 -42
  9. package/lib/NewButton/button.jsx +24 -23
  10. package/lib/utils/testing.d.ts +6 -60
  11. package/lib-esm/ActionList/Item.js +28 -53
  12. package/lib-esm/NewButton/button.js +31 -42
  13. package/lib-esm/theme-preval.js +66 -366
  14. package/lib-esm/utils/testing.d.ts +6 -60
  15. package/package-lock.json +7 -7
  16. package/package.json +2 -2
  17. package/src/ActionList/Item.tsx +17 -46
  18. package/src/NewButton/button.tsx +82 -78
  19. package/src/__tests__/__snapshots__/ActionList.test.tsx.snap +5 -5
  20. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +25 -25
  21. package/src/__tests__/__snapshots__/NewButton.test.tsx.snap +5 -0
  22. package/stats.html +1 -1
package/lib-esm/NewButton/button.js CHANGED
@@ -5,6 +5,7 @@ import Box from '../Box';
5
5
  import styled from 'styled-components';
6
6
  import sx, { merge } from '../sx';
7
7
  import { useTheme } from '../ThemeProvider';
8
+ const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
8
9
 
9
10
  const getVariantStyles = (variant = 'default', theme) => {
10
11
  const style = {
@@ -129,7 +130,7 @@ const getVariantStyles = (variant = 'default', theme) => {
129
130
  borderColor: 'btn.outline.focusBorder',
130
131
  boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.focusShadow}`
131
132
  },
132
- '&:active': {
133
+ '&:active:not([disabled])': {
133
134
  color: 'btn.outline.selectedText',
134
135
  backgroundColor: 'btn.outline.selectedBg',
135
136
  boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.selectedShadow}`,
@@ -199,6 +200,7 @@ const ButtonBase = styled.button.withConfig({
199
200
  })(sx);
200
201
  const Button = /*#__PURE__*/forwardRef(({
201
202
  children,
203
+ sx: sxProp = {},
202
204
  ...props
203
205
  }, forwardedRef) => {
204
206
  const {
@@ -206,12 +208,9 @@ const Button = /*#__PURE__*/forwardRef(({
206
208
  leadingIcon: LeadingIcon,
207
209
  trailingIcon: TrailingIcon,
208
210
  variant = 'default',
209
- size = 'medium',
210
- sx: sxProp = {}
211
+ size = 'medium'
211
212
  } = props;
212
213
  const iconOnly = !!Icon;
213
- const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
214
-
215
214
  const {
216
215
  theme
217
216
  } = useTheme();
@@ -252,46 +251,36 @@ const Button = /*#__PURE__*/forwardRef(({
252
251
  gridArea: 'trailingIcon'
253
252
  }
254
253
  };
255
- const variableStyles = { ...getSizeStyles(size, variant, iconOnly),
256
- ...getVariantStyles(variant, theme)
257
- };
258
- const componentStyles = { ...styles,
259
- ...variableStyles
260
- };
261
254
  const iconWrapStyles = {
262
255
  display: 'inline-block'
263
256
  };
264
- return (
265
- /*#__PURE__*/
266
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
267
- // @ts-ignore Why wont it accept the sx prop?
268
- React.createElement(ButtonBase, _extends({
269
- sx: merge(componentStyles, sxProp),
270
- ref: forwardedRef
271
- }, props), LeadingIcon && /*#__PURE__*/React.createElement(Box, {
272
- as: "span",
273
- "data-component": "leadingIcon",
274
- sx: iconWrapStyles,
275
- "aria-hidden": !iconOnly
276
- }, /*#__PURE__*/React.createElement(LeadingIcon, null)), /*#__PURE__*/React.createElement("span", {
277
- "data-component": "text",
278
- hidden: Icon ? true : undefined
279
- }, children), Icon && /*#__PURE__*/React.createElement(Box, {
280
- "data-component": "icon-only",
281
- as: "span",
282
- sx: {
283
- display: 'inline-block'
284
- },
285
- "aria-hidden": !iconOnly
286
- }, /*#__PURE__*/React.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/React.createElement(Box, {
287
- as: "span",
288
- "data-component": "trailingIcon",
289
- sx: { ...iconWrapStyles,
290
- ml: 2
291
- },
292
- "aria-hidden": !iconOnly
293
- }, /*#__PURE__*/React.createElement(TrailingIcon, null)))
294
- );
257
+ const sxStyles = merge.all([styles, getSizeStyles(size, variant, iconOnly), getVariantStyles(variant, theme), sxProp]);
258
+ return /*#__PURE__*/React.createElement(ButtonBase, _extends({
259
+ sx: sxStyles,
260
+ ref: forwardedRef
261
+ }, props), LeadingIcon && /*#__PURE__*/React.createElement(Box, {
262
+ as: "span",
263
+ "data-component": "leadingIcon",
264
+ sx: iconWrapStyles,
265
+ "aria-hidden": !iconOnly
266
+ }, /*#__PURE__*/React.createElement(LeadingIcon, null)), /*#__PURE__*/React.createElement("span", {
267
+ "data-component": "text",
268
+ hidden: Icon ? true : false
269
+ }, children), Icon && /*#__PURE__*/React.createElement(Box, {
270
+ "data-component": "icon-only",
271
+ as: "span",
272
+ sx: {
273
+ display: 'inline-block'
274
+ },
275
+ "aria-hidden": !iconOnly
276
+ }, /*#__PURE__*/React.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/React.createElement(Box, {
277
+ as: "span",
278
+ "data-component": "trailingIcon",
279
+ sx: { ...iconWrapStyles,
280
+ ml: 2
281
+ },
282
+ "aria-hidden": !iconOnly
283
+ }, /*#__PURE__*/React.createElement(TrailingIcon, null)));
295
284
  });
296
285
  Button.displayName = 'Button';
297
286
  Object.assign(Button, {});
package/lib-esm/theme-preval.js CHANGED
@@ -208,68 +208,8 @@ module.exports = {
208
208
  "gradientOut": "rgba(255,255,255,0)"
209
209
  },
210
210
  "mktg": {
211
- "success": "rgba(36,146,67,1)",
212
- "info": "rgba(19,119,234,1)",
213
- "bgShadeGradient": {
214
- "top": "rgba(27,31,36,0.065)",
215
- "bottom": "rgba(27,31,36,0)"
216
- },
217
211
  "btn": {
218
- "bg": {
219
- "top": "hsla(228,82%,66%,1)",
220
- "bottom": "#4969ed"
221
- },
222
- "bgOverlay": {
223
- "top": "hsla(228,74%,59%,1)",
224
- "bottom": "#3355e0"
225
- },
226
- "text": "#ffffff",
227
- "primary": {
228
- "bg": {
229
- "top": "hsla(137,56%,46%,1)",
230
- "bottom": "#2ea44f"
231
- },
232
- "bgOverlay": {
233
- "top": "hsla(134,60%,38%,1)",
234
- "bottom": "#22863a"
235
- },
236
- "text": "#ffffff"
237
- },
238
- "enterprise": {
239
- "bg": {
240
- "top": "hsla(249,100%,72%,1)",
241
- "bottom": "#6f57ff"
242
- },
243
- "bgOverlay": {
244
- "top": "hsla(248,65%,63%,1)",
245
- "bottom": "#614eda"
246
- },
247
- "text": "#ffffff"
248
- },
249
- "outline": {
250
- "text": "#4969ed",
251
- "border": "rgba(73,105,237,0.3)",
252
- "hover": {
253
- "text": "#3355e0",
254
- "border": "rgba(51,85,224,0.5)"
255
- },
256
- "focus": {
257
- "border": "#4969ed",
258
- "borderInset": "rgba(73,105,237,0.5)"
259
- }
260
- },
261
- "dark": {
262
- "text": "#ffffff",
263
- "border": "rgba(255,255,255,0.3)",
264
- "hover": {
265
- "text": "#ffffff",
266
- "border": "rgba(255,255,255,0.5)"
267
- },
268
- "focus": {
269
- "border": "#ffffff",
270
- "borderInset": "rgba(255,255,255,0.5)"
271
- }
272
- }
212
+ "bg": "#1b1f23"
273
213
  }
274
214
  },
275
215
  "avatar": {
@@ -483,6 +423,16 @@ module.exports = {
483
423
  }
484
424
  },
485
425
  "shadows": {
426
+ "mktg": {
427
+ "btn": {
428
+ "shadow": {
429
+ "outline": "rgb(0 0 0 / 15%) 0 0 0 1px inset",
430
+ "focus": "rgb(0 0 0 / 15%) 0 0 0 4px",
431
+ "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)",
432
+ "hoverMuted": "rgb(0 0 0 / 70%) 0 0 0 2px inset"
433
+ }
434
+ }
435
+ },
486
436
  "avatar": {
487
437
  "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
488
438
  },
@@ -704,68 +654,8 @@ module.exports = {
704
654
  "gradientOut": "rgba(255,255,255,0)"
705
655
  },
706
656
  "mktg": {
707
- "success": "rgba(3,119,234,1)",
708
- "info": "rgba(19,119,234,1)",
709
- "bgShadeGradient": {
710
- "top": "rgba(27,31,36,0.065)",
711
- "bottom": "rgba(27,31,36,0)"
712
- },
713
657
  "btn": {
714
- "bg": {
715
- "top": "hsla(228,82%,66%,1)",
716
- "bottom": "#4969ed"
717
- },
718
- "bgOverlay": {
719
- "top": "hsla(228,74%,59%,1)",
720
- "bottom": "#3355e0"
721
- },
722
- "text": "#ffffff",
723
- "primary": {
724
- "bg": {
725
- "top": "hsla(137,56%,46%,1)",
726
- "bottom": "#2ea44f"
727
- },
728
- "bgOverlay": {
729
- "top": "hsla(134,60%,38%,1)",
730
- "bottom": "#22863a"
731
- },
732
- "text": "#ffffff"
733
- },
734
- "enterprise": {
735
- "bg": {
736
- "top": "hsla(249,100%,72%,1)",
737
- "bottom": "#6f57ff"
738
- },
739
- "bgOverlay": {
740
- "top": "hsla(248,65%,63%,1)",
741
- "bottom": "#614eda"
742
- },
743
- "text": "#ffffff"
744
- },
745
- "outline": {
746
- "text": "#4969ed",
747
- "border": "rgba(73,105,237,0.3)",
748
- "hover": {
749
- "text": "#3355e0",
750
- "border": "rgba(51,85,224,0.5)"
751
- },
752
- "focus": {
753
- "border": "#4969ed",
754
- "borderInset": "rgba(73,105,237,0.5)"
755
- }
756
- },
757
- "dark": {
758
- "text": "#ffffff",
759
- "border": "rgba(255,255,255,0.3)",
760
- "hover": {
761
- "text": "#ffffff",
762
- "border": "rgba(255,255,255,0.5)"
763
- },
764
- "focus": {
765
- "border": "#ffffff",
766
- "borderInset": "rgba(255,255,255,0.5)"
767
- }
768
- }
658
+ "bg": "#1b1f23"
769
659
  }
770
660
  },
771
661
  "avatar": {
@@ -979,6 +869,16 @@ module.exports = {
979
869
  }
980
870
  },
981
871
  "shadows": {
872
+ "mktg": {
873
+ "btn": {
874
+ "shadow": {
875
+ "outline": "rgb(0 0 0 / 15%) 0 0 0 1px inset",
876
+ "focus": "rgb(0 0 0 / 15%) 0 0 0 4px",
877
+ "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)",
878
+ "hoverMuted": "rgb(0 0 0 / 70%) 0 0 0 2px inset"
879
+ }
880
+ }
881
+ },
982
882
  "avatar": {
983
883
  "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
984
884
  },
@@ -1200,68 +1100,8 @@ module.exports = {
1200
1100
  "gradientOut": "rgba(22,27,34,0)"
1201
1101
  },
1202
1102
  "mktg": {
1203
- "success": "rgba(41,147,61,1)",
1204
- "info": "rgba(42,123,243,1)",
1205
- "bgShadeGradient": {
1206
- "top": "rgba(1,4,9,0.065)",
1207
- "bottom": "rgba(1,4,9,0)"
1208
- },
1209
1103
  "btn": {
1210
- "bg": {
1211
- "top": "hsla(228,82%,66%,1)",
1212
- "bottom": "#4969ed"
1213
- },
1214
- "bgOverlay": {
1215
- "top": "hsla(228,74%,59%,1)",
1216
- "bottom": "#3355e0"
1217
- },
1218
- "text": "#f0f6fc",
1219
- "primary": {
1220
- "bg": {
1221
- "top": "hsla(137,56%,46%,1)",
1222
- "bottom": "#2ea44f"
1223
- },
1224
- "bgOverlay": {
1225
- "top": "hsla(134,60%,38%,1)",
1226
- "bottom": "#22863a"
1227
- },
1228
- "text": "#f0f6fc"
1229
- },
1230
- "enterprise": {
1231
- "bg": {
1232
- "top": "hsla(249,100%,72%,1)",
1233
- "bottom": "#6f57ff"
1234
- },
1235
- "bgOverlay": {
1236
- "top": "hsla(248,65%,63%,1)",
1237
- "bottom": "#614eda"
1238
- },
1239
- "text": "#f0f6fc"
1240
- },
1241
- "outline": {
1242
- "text": "#f0f6fc",
1243
- "border": "rgba(240,246,252,0.3)",
1244
- "hover": {
1245
- "text": "#f0f6fc",
1246
- "border": "rgba(240,246,252,0.5)"
1247
- },
1248
- "focus": {
1249
- "border": "#f0f6fc",
1250
- "borderInset": "rgba(240,246,252,0.5)"
1251
- }
1252
- },
1253
- "dark": {
1254
- "text": "#f0f6fc",
1255
- "border": "rgba(240,246,252,0.3)",
1256
- "hover": {
1257
- "text": "#f0f6fc",
1258
- "border": "rgba(240,246,252,0.5)"
1259
- },
1260
- "focus": {
1261
- "border": "#f0f6fc",
1262
- "borderInset": "rgba(240,246,252,0.5)"
1263
- }
1264
- }
1104
+ "bg": "#f6f8fa"
1265
1105
  }
1266
1106
  },
1267
1107
  "avatar": {
@@ -1478,6 +1318,16 @@ module.exports = {
1478
1318
  "checks": {
1479
1319
  "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
1480
1320
  },
1321
+ "mktg": {
1322
+ "btn": {
1323
+ "shadow": {
1324
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
1325
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
1326
+ "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)",
1327
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
1328
+ }
1329
+ }
1330
+ },
1481
1331
  "avatar": {
1482
1332
  "childShadow": "-2px -2px 0 #0d1117"
1483
1333
  },
@@ -1699,68 +1549,8 @@ module.exports = {
1699
1549
  "gradientOut": "rgba(45,51,59,0)"
1700
1550
  },
1701
1551
  "mktg": {
1702
- "success": "rgba(61,137,66,1)",
1703
- "info": "rgba(56,119,213,1)",
1704
- "bgShadeGradient": {
1705
- "top": "rgba(28,33,40,0.065)",
1706
- "bottom": "rgba(28,33,40,0)"
1707
- },
1708
1552
  "btn": {
1709
- "bg": {
1710
- "top": "hsla(228,82%,66%,1)",
1711
- "bottom": "#4969ed"
1712
- },
1713
- "bgOverlay": {
1714
- "top": "hsla(228,74%,59%,1)",
1715
- "bottom": "#3355e0"
1716
- },
1717
- "text": "#cdd9e5",
1718
- "primary": {
1719
- "bg": {
1720
- "top": "hsla(137,56%,46%,1)",
1721
- "bottom": "#2ea44f"
1722
- },
1723
- "bgOverlay": {
1724
- "top": "hsla(134,60%,38%,1)",
1725
- "bottom": "#22863a"
1726
- },
1727
- "text": "#cdd9e5"
1728
- },
1729
- "enterprise": {
1730
- "bg": {
1731
- "top": "hsla(249,100%,72%,1)",
1732
- "bottom": "#6f57ff"
1733
- },
1734
- "bgOverlay": {
1735
- "top": "hsla(248,65%,63%,1)",
1736
- "bottom": "#614eda"
1737
- },
1738
- "text": "#cdd9e5"
1739
- },
1740
- "outline": {
1741
- "text": "#cdd9e5",
1742
- "border": "rgba(205,217,229,0.3)",
1743
- "hover": {
1744
- "text": "#cdd9e5",
1745
- "border": "rgba(205,217,229,0.5)"
1746
- },
1747
- "focus": {
1748
- "border": "#cdd9e5",
1749
- "borderInset": "rgba(205,217,229,0.5)"
1750
- }
1751
- },
1752
- "dark": {
1753
- "text": "#cdd9e5",
1754
- "border": "rgba(205,217,229,0.3)",
1755
- "hover": {
1756
- "text": "#cdd9e5",
1757
- "border": "rgba(205,217,229,0.5)"
1758
- },
1759
- "focus": {
1760
- "border": "#cdd9e5",
1761
- "borderInset": "rgba(205,217,229,0.5)"
1762
- }
1763
- }
1553
+ "bg": "#f6f8fa"
1764
1554
  }
1765
1555
  },
1766
1556
  "avatar": {
@@ -1977,6 +1767,16 @@ module.exports = {
1977
1767
  "checks": {
1978
1768
  "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
1979
1769
  },
1770
+ "mktg": {
1771
+ "btn": {
1772
+ "shadow": {
1773
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
1774
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
1775
+ "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)",
1776
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
1777
+ }
1778
+ }
1779
+ },
1980
1780
  "avatar": {
1981
1781
  "childShadow": "-2px -2px 0 #22272e"
1982
1782
  },
@@ -2198,68 +1998,8 @@ module.exports = {
2198
1998
  "gradientOut": "rgba(39,43,51,0)"
2199
1999
  },
2200
2000
  "mktg": {
2201
- "success": "rgba(9,180,58,1)",
2202
- "info": "rgba(64,158,255,1)",
2203
- "bgShadeGradient": {
2204
- "top": "rgba(1,4,9,0.065)",
2205
- "bottom": "rgba(1,4,9,0)"
2206
- },
2207
2001
  "btn": {
2208
- "bg": {
2209
- "top": "hsla(228,82%,66%,1)",
2210
- "bottom": "#4969ed"
2211
- },
2212
- "bgOverlay": {
2213
- "top": "hsla(228,74%,59%,1)",
2214
- "bottom": "#3355e0"
2215
- },
2216
- "text": "#ffffff",
2217
- "primary": {
2218
- "bg": {
2219
- "top": "hsla(137,56%,46%,1)",
2220
- "bottom": "#2ea44f"
2221
- },
2222
- "bgOverlay": {
2223
- "top": "hsla(134,60%,38%,1)",
2224
- "bottom": "#22863a"
2225
- },
2226
- "text": "#ffffff"
2227
- },
2228
- "enterprise": {
2229
- "bg": {
2230
- "top": "hsla(249,100%,72%,1)",
2231
- "bottom": "#6f57ff"
2232
- },
2233
- "bgOverlay": {
2234
- "top": "hsla(248,65%,63%,1)",
2235
- "bottom": "#614eda"
2236
- },
2237
- "text": "#ffffff"
2238
- },
2239
- "outline": {
2240
- "text": "#ffffff",
2241
- "border": "rgba(255,255,255,0.3)",
2242
- "hover": {
2243
- "text": "#ffffff",
2244
- "border": "rgba(255,255,255,0.5)"
2245
- },
2246
- "focus": {
2247
- "border": "#ffffff",
2248
- "borderInset": "rgba(255,255,255,0.5)"
2249
- }
2250
- },
2251
- "dark": {
2252
- "text": "#ffffff",
2253
- "border": "rgba(255,255,255,0.3)",
2254
- "hover": {
2255
- "text": "#ffffff",
2256
- "border": "rgba(255,255,255,0.5)"
2257
- },
2258
- "focus": {
2259
- "border": "#ffffff",
2260
- "borderInset": "rgba(255,255,255,0.5)"
2261
- }
2262
- }
2002
+ "bg": "#f6f8fa"
2263
2003
  }
2264
2004
  },
2265
2005
  "avatar": {
@@ -2476,6 +2216,16 @@ module.exports = {
2476
2216
  "checks": {
2477
2217
  "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
2478
2218
  },
2219
+ "mktg": {
2220
+ "btn": {
2221
+ "shadow": {
2222
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
2223
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
2224
+ "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)",
2225
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
2226
+ }
2227
+ }
2228
+ },
2479
2229
  "avatar": {
2480
2230
  "childShadow": "-2px -2px 0 #0a0c10"
2481
2231
  },
@@ -2697,68 +2447,8 @@ module.exports = {
2697
2447
  "gradientOut": "rgba(22,27,34,0)"
2698
2448
  },
2699
2449
  "mktg": {
2700
- "success": "rgba(25,119,239,1)",
2701
- "info": "rgba(42,123,243,1)",
2702
- "bgShadeGradient": {
2703
- "top": "rgba(1,4,9,0.065)",
2704
- "bottom": "rgba(1,4,9,0)"
2705
- },
2706
2450
  "btn": {
2707
- "bg": {
2708
- "top": "hsla(228,82%,66%,1)",
2709
- "bottom": "#4969ed"
2710
- },
2711
- "bgOverlay": {
2712
- "top": "hsla(228,74%,59%,1)",
2713
- "bottom": "#3355e0"
2714
- },
2715
- "text": "#f0f6fc",
2716
- "primary": {
2717
- "bg": {
2718
- "top": "hsla(137,56%,46%,1)",
2719
- "bottom": "#2ea44f"
2720
- },
2721
- "bgOverlay": {
2722
- "top": "hsla(134,60%,38%,1)",
2723
- "bottom": "#22863a"
2724
- },
2725
- "text": "#f0f6fc"
2726
- },
2727
- "enterprise": {
2728
- "bg": {
2729
- "top": "hsla(249,100%,72%,1)",
2730
- "bottom": "#6f57ff"
2731
- },
2732
- "bgOverlay": {
2733
- "top": "hsla(248,65%,63%,1)",
2734
- "bottom": "#614eda"
2735
- },
2736
- "text": "#f0f6fc"
2737
- },
2738
- "outline": {
2739
- "text": "#f0f6fc",
2740
- "border": "rgba(240,246,252,0.3)",
2741
- "hover": {
2742
- "text": "#f0f6fc",
2743
- "border": "rgba(240,246,252,0.5)"
2744
- },
2745
- "focus": {
2746
- "border": "#f0f6fc",
2747
- "borderInset": "rgba(240,246,252,0.5)"
2748
- }
2749
- },
2750
- "dark": {
2751
- "text": "#f0f6fc",
2752
- "border": "rgba(240,246,252,0.3)",
2753
- "hover": {
2754
- "text": "#f0f6fc",
2755
- "border": "rgba(240,246,252,0.5)"
2756
- },
2757
- "focus": {
2758
- "border": "#f0f6fc",
2759
- "borderInset": "rgba(240,246,252,0.5)"
2760
- }
2761
- }
2451
+ "bg": "#f6f8fa"
2762
2452
  }
2763
2453
  },
2764
2454
  "avatar": {
@@ -2975,6 +2665,16 @@ module.exports = {
2975
2665
  "checks": {
2976
2666
  "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
2977
2667
  },
2668
+ "mktg": {
2669
+ "btn": {
2670
+ "shadow": {
2671
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
2672
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
2673
+ "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)",
2674
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
2675
+ }
2676
+ }
2677
+ },
2978
2678
  "avatar": {
2979
2679
  "childShadow": "-2px -2px 0 #0d1117"
2980
2680
  },