@coinbase/cds-web 9.0.0-rc.2 → 9.0.0

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 (81) hide show
  1. package/CHANGELOG.md +102 -4
  2. package/dts/buttons/Button.d.ts.map +1 -1
  3. package/dts/buttons/IconButton.d.ts +15 -1
  4. package/dts/buttons/IconButton.d.ts.map +1 -1
  5. package/dts/chips/TabbedChips.d.ts.map +1 -1
  6. package/dts/collapsible/Collapsible.d.ts.map +1 -1
  7. package/dts/controls/CheckboxGroup.d.ts +4 -0
  8. package/dts/controls/CheckboxGroup.d.ts.map +1 -1
  9. package/dts/controls/InputLabel.d.ts.map +1 -1
  10. package/dts/controls/NativeInput.d.ts +6 -0
  11. package/dts/controls/NativeInput.d.ts.map +1 -1
  12. package/dts/controls/SearchInput.d.ts +2 -0
  13. package/dts/controls/SearchInput.d.ts.map +1 -1
  14. package/dts/controls/TextInput.d.ts +2 -2
  15. package/dts/controls/TextInput.d.ts.map +1 -1
  16. package/dts/core/createThemeCssVars.d.ts.map +1 -1
  17. package/dts/core/theme.d.ts +15 -0
  18. package/dts/core/theme.d.ts.map +1 -1
  19. package/dts/illustrations/HeroSquare.d.ts.map +1 -1
  20. package/dts/illustrations/Pictogram.d.ts.map +1 -1
  21. package/dts/illustrations/SpotIcon.d.ts.map +1 -1
  22. package/dts/illustrations/SpotRectangle.d.ts.map +1 -1
  23. package/dts/illustrations/SpotSquare.d.ts.map +1 -1
  24. package/dts/illustrations/createIllustration.d.ts +19 -3
  25. package/dts/illustrations/createIllustration.d.ts.map +1 -1
  26. package/dts/navigation/NavigationBar.d.ts.map +1 -1
  27. package/dts/page/PageFooter.d.ts +4 -0
  28. package/dts/page/PageFooter.d.ts.map +1 -1
  29. package/dts/system/ThemeProvider.d.ts.map +1 -1
  30. package/dts/tabs/DefaultTab.d.ts +11 -2
  31. package/dts/tabs/DefaultTab.d.ts.map +1 -1
  32. package/dts/tabs/SegmentedTab.d.ts +13 -12
  33. package/dts/tabs/SegmentedTab.d.ts.map +1 -1
  34. package/dts/tabs/Tabs.d.ts +9 -3
  35. package/dts/tabs/Tabs.d.ts.map +1 -1
  36. package/dts/tag/Tag.d.ts +3 -2
  37. package/dts/tag/Tag.d.ts.map +1 -1
  38. package/dts/themes/coinbaseDenseTheme.d.ts +34 -2
  39. package/dts/themes/coinbaseDenseTheme.d.ts.map +1 -1
  40. package/dts/themes/coinbaseHighContrastTheme.d.ts +32 -0
  41. package/dts/themes/coinbaseHighContrastTheme.d.ts.map +1 -1
  42. package/dts/themes/coinbaseTheme.d.ts +34 -2
  43. package/dts/themes/coinbaseTheme.d.ts.map +1 -1
  44. package/dts/themes/defaultHighContrastTheme.d.ts +32 -0
  45. package/dts/themes/defaultHighContrastTheme.d.ts.map +1 -1
  46. package/dts/themes/defaultTheme.d.ts +34 -2
  47. package/dts/themes/defaultTheme.d.ts.map +1 -1
  48. package/dts/visualizations/chart/PeriodSelector.d.ts.map +1 -1
  49. package/esm/buttons/Button.css +1 -1
  50. package/esm/buttons/IconButton.js +27 -6
  51. package/esm/chips/TabbedChips.js +4 -2
  52. package/esm/collapsible/Collapsible.js +11 -15
  53. package/esm/controls/CheckboxGroup.js +5 -0
  54. package/esm/controls/InputLabel.js +4 -3
  55. package/esm/controls/InputStack.js +1 -3
  56. package/esm/controls/NativeInput.js +5 -3
  57. package/esm/controls/TextInput.js +10 -5
  58. package/esm/core/createThemeCssVars.js +23 -0
  59. package/esm/core/theme.js +3 -0
  60. package/esm/illustrations/HeroSquare.js +2 -1
  61. package/esm/illustrations/Pictogram.js +2 -1
  62. package/esm/illustrations/SpotIcon.js +2 -1
  63. package/esm/illustrations/SpotRectangle.js +2 -1
  64. package/esm/illustrations/SpotSquare.js +2 -1
  65. package/esm/illustrations/createIllustration.css +1 -0
  66. package/esm/illustrations/createIllustration.js +68 -20
  67. package/esm/navigation/NavigationBar.js +14 -10
  68. package/esm/overlays/tray/Tray.js +1 -1
  69. package/esm/page/PageFooter.js +20 -4
  70. package/esm/page/__figma__/PageFooter.figma.js +50 -6
  71. package/esm/system/ThemeProvider.js +3 -1
  72. package/esm/tabs/DefaultTab.css +1 -2
  73. package/esm/tabs/DefaultTab.js +6 -5
  74. package/esm/tabs/Tabs.js +8 -2
  75. package/esm/tag/Tag.js +13 -3
  76. package/esm/themes/coinbaseHighContrastTheme.js +32 -0
  77. package/esm/themes/coinbaseTheme.js +34 -2
  78. package/esm/themes/defaultHighContrastTheme.js +32 -0
  79. package/esm/themes/defaultTheme.js +34 -2
  80. package/esm/visualizations/chart/PeriodSelector.js +4 -3
  81. package/package.json +3 -3
package/esm/themes/coinbaseTheme.js CHANGED
@@ -316,7 +316,7 @@ export const coinbaseTheme = {
316
316
  bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
317
317
  bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
318
318
  bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
319
- bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
319
+ bgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
320
320
  bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
321
321
  currentColor: 'currentColor',
322
322
  // Line
@@ -367,7 +367,7 @@ export const coinbaseTheme = {
367
367
  bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
368
368
  bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
369
369
  bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
370
- bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
370
+ bgWarning: "rgb(".concat(darkSpectrum.orange60, ")"),
371
371
  bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
372
372
  currentColor: 'currentColor',
373
373
  // Line
@@ -572,5 +572,37 @@ export const coinbaseTheme = {
572
572
  shadow: {
573
573
  elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
574
574
  elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
575
+ },
576
+ lightIllustrationColor: {
577
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
578
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
579
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
580
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
581
+ gray2: "rgb(10, 11, 15)",
582
+ gray3: "rgb(206, 210, 220)",
583
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
584
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
585
+ accent1: "rgb(255, 210, 0)",
586
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
587
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
588
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
589
+ invert: "rgb(10, 11, 14)",
590
+ invert2: "rgb(255, 255, 254)"
591
+ },
592
+ darkIllustrationColor: {
593
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
594
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
595
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
596
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
597
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
598
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
599
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
600
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
601
+ accent1: "rgb(236, 208, 105)",
602
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
603
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
604
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
605
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
606
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
575
607
  }
576
608
  };
package/esm/themes/defaultHighContrastTheme.js CHANGED
@@ -569,6 +569,38 @@ export const defaultHighContrastTheme = {
569
569
  caption: 'uppercase',
570
570
  legal: 'none'
571
571
  },
572
+ lightIllustrationColor: {
573
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
574
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
575
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
576
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
577
+ gray2: "rgb(10, 11, 15)",
578
+ gray3: "rgb(206, 210, 220)",
579
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
580
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
581
+ accent1: "rgb(255, 210, 0)",
582
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
583
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
584
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
585
+ invert: "rgb(10, 11, 14)",
586
+ invert2: "rgb(255, 255, 254)"
587
+ },
588
+ darkIllustrationColor: {
589
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
590
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
591
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
592
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
593
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
594
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
595
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
596
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
597
+ accent1: "rgb(236, 208, 105)",
598
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
599
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
600
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
601
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
602
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
603
+ },
572
604
  shadow: {
573
605
  elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
574
606
  elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
package/esm/themes/defaultTheme.js CHANGED
@@ -316,7 +316,7 @@ export const defaultTheme = {
316
316
  bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
317
317
  bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
318
318
  bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
319
- bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
319
+ bgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
320
320
  bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
321
321
  currentColor: 'currentColor',
322
322
  // Line
@@ -367,7 +367,7 @@ export const defaultTheme = {
367
367
  bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
368
368
  bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
369
369
  bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
370
- bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
370
+ bgWarning: "rgb(".concat(darkSpectrum.orange60, ")"),
371
371
  bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
372
372
  currentColor: 'currentColor',
373
373
  // Line
@@ -395,6 +395,38 @@ export const defaultTheme = {
395
395
  // Transparent
396
396
  transparent: "rgba(".concat(darkSpectrum.gray0, ",0)")
397
397
  },
398
+ lightIllustrationColor: {
399
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
400
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
401
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
402
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
403
+ gray2: "rgb(10, 11, 15)",
404
+ gray3: "rgb(206, 210, 220)",
405
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
406
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
407
+ accent1: "rgb(255, 210, 0)",
408
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
409
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
410
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
411
+ invert: "rgb(10, 11, 14)",
412
+ invert2: "rgb(255, 255, 254)"
413
+ },
414
+ darkIllustrationColor: {
415
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
416
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
417
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
418
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
419
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
420
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
421
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
422
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
423
+ accent1: "rgb(236, 208, 105)",
424
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
425
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
426
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
427
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
428
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
429
+ },
398
430
  space: {
399
431
  '0': 0,
400
432
  '0.25': 2,
package/esm/visualizations/chart/PeriodSelector.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const _excluded = ["activeTabRect", "background", "position", "borderRadius", "style"],
2
2
  _excluded2 = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
3
- _excluded3 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
3
+ _excluded3 = ["background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -83,10 +83,9 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
83
83
  }));
84
84
  }));
85
85
 
86
- // Custom tab component with primary color for active state
86
+ // Set font
87
87
  const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _objectSpread({
88
88
  ref: ref,
89
- activeColor: "fgPrimary",
90
89
  font: "label1"
91
90
  }, props))));
92
91
  /**
@@ -97,6 +96,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
97
96
  let {
98
97
  background = 'transparent',
99
98
  activeBackground = 'bgPrimaryWash',
99
+ activeColor = 'fgPrimary',
100
100
  width = '100%',
101
101
  justifyContent = 'space-between',
102
102
  TabComponent = PeriodSelectorTab,
@@ -112,6 +112,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
112
112
  TabComponent: TabComponent,
113
113
  TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
114
114
  activeBackground: activeBackground,
115
+ activeColor: activeColor,
115
116
  background: background,
116
117
  className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
117
118
  classNames: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "9.0.0-rc.2",
3
+ "version": "9.0.0",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -215,9 +215,9 @@
215
215
  "react-dom": "^18.0.0 || ~19.1.2"
216
216
  },
217
217
  "dependencies": {
218
- "@coinbase/cds-common": "^9.0.0-rc.2",
218
+ "@coinbase/cds-common": "^9.0.0",
219
219
  "@coinbase/cds-icons": "^5.16.0",
220
- "@coinbase/cds-illustrations": "^4.38.0",
220
+ "@coinbase/cds-illustrations": "^4.40.1",
221
221
  "@coinbase/cds-lottie-files": "^3.3.4",
222
222
  "@coinbase/cds-utils": "^2.3.5",
223
223
  "@floating-ui/react-dom": "^2.1.1",