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

package/esm/navigation/NavigationBar.js

@@ -77,10 +77,6 @@ export const NavigationBar = /*#__PURE__*/memo(_props => {
   }, props), {}, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
-      gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
-        base: 2,
-        phone: 1
-      },
       overflow: "auto",
       children: [/*#__PURE__*/_jsx(Collapsible, {
         collapsed: !start,
@@ -96,14 +92,22 @@ export const NavigationBar = /*#__PURE__*/memo(_props => {
           style: styles === null || styles === void 0 ? void 0 : styles.start,
           children: startNode
         })
-      }), /*#__PURE__*/_jsx(HStack, {
+      }), /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
-        className: cx(navigationBarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
         flexGrow: 1,
-        gap: 1,
-        style: styles === null || styles === void 0 ? void 0 : styles.content,
-        children: children
-      }), end]
+        gap: columnGap !== null && columnGap !== void 0 ? columnGap : {
+          base: 2,
+          phone: 1
+        },
+        children: [/*#__PURE__*/_jsx(HStack, {
+          alignItems: "center",
+          className: cx(navigationBarClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+          flexGrow: 1,
+          gap: 1,
+          style: styles === null || styles === void 0 ? void 0 : styles.content,
+          children: children
+        }), end]
+      })]
     }), bottom]
   }));
 });

package/esm/page/PageFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["action", "height", "justifyContent", "paddingX", "paddingY", "role"];
+const _excluded = ["action", "legalText", "height", "justifyContent", "paddingX", "paddingY", "role"];
 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; }
 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; }
 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; }
@@ -10,7 +10,9 @@ import React, { forwardRef, memo } from 'react';
 import { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const pageFooterPaddingX = {
   phone: 3,
   tablet: 4,
@@ -21,11 +23,17 @@ export const pageFooterJustifyContent = {
   tablet: 'flex-end',
   desktop: 'flex-end'
 };
+const legalTextAlignItems = {
+  phone: 'center',
+  tablet: 'flex-end',
+  desktop: 'flex-end'
+};
 export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('PageFooter', _props);
   const {
       action,
-      height = pageFooterHeight,
+      legalText,
+      height = legalText ? undefined : pageFooterHeight,
       justifyContent = pageFooterJustifyContent,
       paddingX = pageFooterPaddingX,
       paddingY = 1.5,
@@ -40,6 +48,14 @@ export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     paddingY: paddingY,
     role: role
   }, props), {}, {
-    children: action
+    children: legalText ? /*#__PURE__*/_jsxs(VStack, {
+      alignItems: legalTextAlignItems,
+      gap: 2,
+      children: [action, /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "legal",
+        children: legalText
+      })]
+    }) : action
   }));
 }));

package/esm/page/__figma__/PageFooter.figma.js

@@ -1,17 +1,61 @@
+import React from 'react';
 import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons/Button';
+import { ButtonGroup } from '../../buttons/ButtonGroup';
 import { PageFooter } from '../PageFooter';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(PageFooter, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266', {
-  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'"],
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const url = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266';
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'"],
+  variant: {
+    '# of actions': '1'
+  },
   props: {
-    action: figma.children('ButtonGroup')
+    action: figma.children('Button'),
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
   },
   example: _ref => {
     let {
-      action
+      legalText
     } = _ref;
     return /*#__PURE__*/_jsx(PageFooter, {
-      action: action
+      action: /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
+        children: "Next"
+      }),
+      legalText: legalText
+    });
+  }
+});
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'", "import { ButtonGroup } from '@coinbase/cds-web/buttons/ButtonGroup'"],
+  variant: {
+    '# of actions': '2'
+  },
+  props: {
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
+  },
+  example: _ref2 => {
+    let {
+      legalText
+    } = _ref2;
+    return /*#__PURE__*/_jsx(PageFooter, {
+      action: /*#__PURE__*/_jsxs(ButtonGroup, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Back"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Next"
+        })]
+      }),
+      legalText: legalText
     });
   }
 });

package/esm/system/ThemeProvider.js

@@ -73,6 +73,7 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref2 => {
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
+    const activeIllustrationKey = activeColorScheme === 'dark' ? 'darkIllustrationColor' : 'lightIllustrationColor';
     const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
     const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
     if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is ".concat(activeColorScheme, " but no ").concat(activeColorScheme, " colors are defined for the theme. See the docs https://cds.coinbase.com/getting-started/theming"));
@@ -82,7 +83,8 @@ export const ThemeProvider = /*#__PURE__*/memo(_ref2 => {
     return _objectSpread(_objectSpread({}, theme), {}, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
-      color: theme[activeColorKey]
+      color: theme[activeColorKey],
+      illustrationColor: theme[activeIllustrationKey]
     });
   }, [theme, activeColorScheme]);
   const parentTheme = useContext(ThemeContext);

package/esm/tabs/DefaultTab.css

@@ -1,3 +1,2 @@
 @layer cds{.pressableCss-p1gyavxu{margin:0;padding:0;white-space:nowrap;}
-.insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}
-.labelPaddingCss-lu2xm1d{padding-top:var(--space-2);padding-bottom:calc(var(--space-2) - 2px);}}
+.insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}}

package/esm/tabs/DefaultTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className"];
+const _excluded = ["id", "label", "disabled", "onClick", "count", "max", "accessibilityLabel", "className", "color", "activeColor"];
 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; }
 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; }
 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; }
@@ -18,7 +18,6 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressableCss = "pressableCss-p1gyavxu";
 const insetFocusRingCss = "insetFocusRingCss-i14sq9yf";
-const labelPaddingCss = "labelPaddingCss-lu2xm1d";
 const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -28,7 +27,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       count,
       max,
       accessibilityLabel,
-      className
+      className,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -59,10 +60,10 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       gap: 0.5,
       children: [/*#__PURE__*/_jsx(Text, {
         as: "h2",
-        className: labelPaddingCss,
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         display: "block",
         font: "headline",
+        paddingY: 2,
         children: label
       }), !!count && /*#__PURE__*/_jsx(DotCount, {
         accessibilityLabel: "".concat(accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : typeof label === 'string' ? label : '', " count: ").concat(count),

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeColor", "activeTab", "color", "onActiveTabElementChange", "disabled", "onChange", "className", "classNames", "styles", "role", "position", "width", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "style", "testID"],
   _excluded3 = ["activeTabRect", "position", "testID"];
 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; }
 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; }
@@ -52,7 +52,9 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      activeColor,
       activeTab,
+      color,
       onActiveTabElementChange,
       disabled,
       onChange,
@@ -144,6 +146,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    color: color,
     onKeyDown: handleTabsContainerKeyDown,
     opacity: disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -168,7 +171,10 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       }), tabs.map(props => {
         var _props$Component;
         const RenderedTab = (_props$Component = props.Component) !== null && _props$Component !== void 0 ? _props$Component : TabComponent;
-        const renderedTabProps = _objectSpread(_objectSpread({}, props), {}, {
+        const renderedTabProps = _objectSpread(_objectSpread({
+          activeColor,
+          color
+        }, props), {}, {
           'data-rendered-tab': true,
           className: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
           role: 'tab',

package/esm/tag/Tag.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "display", "alignItems", "gap", "justifyContent", "paddingY", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "display", "alignItems", "gap", "justifyContent", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "testID"];
 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; }
 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; }
 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; }
@@ -35,7 +35,13 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       alignItems = 'center',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = tagStaticClassName
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
@@ -58,7 +64,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     display: display,
     gap: gap,
     justifyContent: justifyContent,
-    paddingX: tagHorizontalSpacing[intent],
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : tagHorizontalSpacing[intent],
     paddingY: paddingY,
     style: boxStyles,
     testID: testID
@@ -77,7 +83,11 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     }) : null, /*#__PURE__*/_jsx(Text, {
       color: "currentColor",
       display: "inline",
-      font: tagFontMap[intent],
+      font: font !== null && font !== void 0 ? font : tagFontMap[intent],
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      lineHeight: lineHeight,
       overflow: "truncate",
       testID: "".concat(testID, "--text"),
       children: children

package/esm/themes/coinbaseHighContrastTheme.js

@@ -569,6 +569,38 @@ export const coinbaseHighContrastTheme = {
     caption: 'uppercase',
     legal: 'none'
   },
+  lightIllustrationColor: {
+    primary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    black: "rgb(".concat(lightSpectrum.gray100, ")"),
+    white: "rgb(".concat(lightSpectrum.gray0, ")"),
+    gray: "rgb(".concat(lightSpectrum.gray20, ")"),
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(".concat(lightSpectrum.green30, ")"),
+    negative: "rgb(".concat(lightSpectrum.red50, ")"),
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
+    accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
+    accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    black: "rgb(".concat(darkSpectrum.gray0, ")"),
+    white: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    positive: "rgb(".concat(darkSpectrum.green70, ")"),
+    negative: "rgb(".concat(darkSpectrum.red60, ")"),
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
+    accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
+    accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
+    invert: "rgb(".concat(darkSpectrum.gray100, ")"),
+    invert2: "rgb(".concat(darkSpectrum.gray50, ")")
+  },
   shadow: {
     elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
     elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'

package/esm/themes/coinbaseTheme.js

@@ -316,7 +316,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
+    bgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
+    bgWarning: "rgb(".concat(darkSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line
@@ -572,5 +572,37 @@ export const coinbaseTheme = {
   shadow: {
     elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
     elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
+  },
+  lightIllustrationColor: {
+    primary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    black: "rgb(".concat(lightSpectrum.gray100, ")"),
+    white: "rgb(".concat(lightSpectrum.gray0, ")"),
+    gray: "rgb(".concat(lightSpectrum.gray20, ")"),
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(".concat(lightSpectrum.green30, ")"),
+    negative: "rgb(".concat(lightSpectrum.red50, ")"),
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
+    accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
+    accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    black: "rgb(".concat(darkSpectrum.gray0, ")"),
+    white: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    positive: "rgb(".concat(darkSpectrum.green70, ")"),
+    negative: "rgb(".concat(darkSpectrum.red60, ")"),
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
+    accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
+    accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
+    invert: "rgb(".concat(darkSpectrum.gray100, ")"),
+    invert2: "rgb(".concat(darkSpectrum.gray50, ")")
   }
 };

package/esm/themes/defaultHighContrastTheme.js

@@ -569,6 +569,38 @@ export const defaultHighContrastTheme = {
     caption: 'uppercase',
     legal: 'none'
   },
+  lightIllustrationColor: {
+    primary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    black: "rgb(".concat(lightSpectrum.gray100, ")"),
+    white: "rgb(".concat(lightSpectrum.gray0, ")"),
+    gray: "rgb(".concat(lightSpectrum.gray20, ")"),
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(".concat(lightSpectrum.green30, ")"),
+    negative: "rgb(".concat(lightSpectrum.red50, ")"),
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
+    accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
+    accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    black: "rgb(".concat(darkSpectrum.gray0, ")"),
+    white: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    positive: "rgb(".concat(darkSpectrum.green70, ")"),
+    negative: "rgb(".concat(darkSpectrum.red60, ")"),
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
+    accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
+    accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
+    invert: "rgb(".concat(darkSpectrum.gray100, ")"),
+    invert2: "rgb(".concat(darkSpectrum.gray50, ")")
+  },
   shadow: {
     elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
     elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'

package/esm/themes/defaultTheme.js

@@ -316,7 +316,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(".concat(lightSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(lightSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(lightSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(lightSpectrum.orange40, ")"),
+    bgWarning: "rgb(".concat(lightSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(lightSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(".concat(darkSpectrum.red0, ")"),
     bgPositive: "rgb(".concat(darkSpectrum.green60, ")"),
     bgPositiveWash: "rgb(".concat(darkSpectrum.green0, ")"),
-    bgWarning: "rgb(".concat(darkSpectrum.yellow50, ")"),
+    bgWarning: "rgb(".concat(darkSpectrum.orange60, ")"),
     bgWarningWash: "rgb(".concat(darkSpectrum.orange0, ")"),
     currentColor: 'currentColor',
     // Line
@@ -395,6 +395,38 @@ export const defaultTheme = {
     // Transparent
     transparent: "rgba(".concat(darkSpectrum.gray0, ",0)")
   },
+  lightIllustrationColor: {
+    primary: "rgb(".concat(lightSpectrum.blue60, ")"),
+    black: "rgb(".concat(lightSpectrum.gray100, ")"),
+    white: "rgb(".concat(lightSpectrum.gray0, ")"),
+    gray: "rgb(".concat(lightSpectrum.gray20, ")"),
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(".concat(lightSpectrum.green30, ")"),
+    negative: "rgb(".concat(lightSpectrum.red50, ")"),
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
+    accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
+    accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(".concat(darkSpectrum.blue70, ")"),
+    black: "rgb(".concat(darkSpectrum.gray0, ")"),
+    white: "rgb(".concat(darkSpectrum.gray100, ")"),
+    gray: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
+    gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
+    positive: "rgb(".concat(darkSpectrum.green70, ")"),
+    negative: "rgb(".concat(darkSpectrum.red60, ")"),
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
+    accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
+    accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
+    invert: "rgb(".concat(darkSpectrum.gray100, ")"),
+    invert2: "rgb(".concat(darkSpectrum.gray50, ")")
+  },
   space: {
     '0': 0,
     '0.25': 2,

package/esm/visualizations/chart/PeriodSelector.js

@@ -1,6 +1,6 @@
 const _excluded = ["activeTabRect", "background", "position", "borderRadius", "style"],
   _excluded2 = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
-  _excluded3 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
+  _excluded3 = ["background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
 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; }
 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; }
 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
   }));
 }));
 
-// Custom tab component with primary color for active state
+// Set font
 const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _objectSpread({
   ref: ref,
-  activeColor: "fgPrimary",
   font: "label1"
 }, props))));
 /**
@@ -97,6 +96,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
   let {
       background = 'transparent',
       activeBackground = 'bgPrimaryWash',
+      activeColor = 'fgPrimary',
       width = '100%',
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
@@ -112,6 +112,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     classNames: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.0.0-rc.2",
+  "version": "9.0.0-rc.3",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -215,9 +215,9 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.0-rc.2",
+    "@coinbase/cds-common": "^9.0.0-rc.3",
     "@coinbase/cds-icons": "^5.16.0",
-    "@coinbase/cds-illustrations": "^4.38.0",
+    "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",