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

package/esm/illustrations/createIllustration.js

@@ -1,11 +1,18 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { convertDimensionToSize } from '@coinbase/cds-common/utils/convertDimensionToSize';
 import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSizeWithMultiplier';
 import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useTheme } from '../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function createIllustration(variant, config) {
+const STATIC_ASSETS_CDN = 'https://static-assets.coinbase.com/ui-infra/illustration/v1';
+
+/**
+ * ESM-compatible lazy loader map. Each entry uses a relative dynamic import so
+ * any bundler (Vite, webpack, esbuild) can code-split without CORS or bare-specifier issues.
+ */
+
+export function createIllustration(variant, versionMap, svgEsmConfig) {
   const defaultSize = getDefaultSizeObjectForIllustration(variant);
   const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
     let {
@@ -14,39 +21,78 @@ export function createIllustration(variant, config) {
       scaleMultiplier,
       testID,
       alt = '',
-      fallback = null
+      fallback,
+      applyTheme
     } = _ref;
     const {
-      activeColorScheme
+      activeColorScheme,
+      illustrationColor
     } = useTheme();
-    const version = config[name];
-    const src = "https://static-assets.coinbase.com/ui-infra/illustration/v1/".concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg");
+    const version = versionMap[name];
+
+    // null = not yet loaded (or load failed), string = loaded inline SVG
+    const [svgMarkup, setSvgMarkup] = useState(null);
+    useEffect(() => {
+      var _svgEsmConfig$name;
+      let cancelled = false;
+      const themeableLoader = svgEsmConfig === null || svgEsmConfig === void 0 || (_svgEsmConfig$name = svgEsmConfig[name]) === null || _svgEsmConfig$name === void 0 ? void 0 : _svgEsmConfig$name.themeable;
+      if (applyTheme && themeableLoader) {
+        themeableLoader().then(svg => {
+          if (!cancelled) setSvgMarkup(svg);
+        }).catch(err => {
+          if (isDevelopment()) {
+            console.error("Failed to load themeable illustration ".concat(name, ":"), err);
+          }
+          // Clear stale markup on failure so we don't display the wrong illustration.
+          if (!cancelled) setSvgMarkup(null);
+        });
+      }
+      return () => {
+        cancelled = true;
+      };
+      // The SVG source is the same regardless of the active palette — illustrationColor
+      // only affects the CSS variables emitted by ThemeProvider, not the file to load.
+    }, [name, version, applyTheme]);
     const {
       width,
       height
     } = useMemo(() => {
       let size = defaultSize;
-      if (dimension) {
-        size = convertDimensionToSize(dimension);
-      }
-      if (scaleMultiplier) {
-        size = convertSizeWithMultiplier(size, scaleMultiplier);
-      }
+      if (dimension) size = convertDimensionToSize(dimension);
+      if (scaleMultiplier) size = convertSizeWithMultiplier(size, scaleMultiplier);
       return size;
     }, [dimension, scaleMultiplier]);
-    if (version === undefined) {
-      if (isDevelopment()) {
-        console.error("Unable to find illustration with name: ".concat(name));
+    if (applyTheme && illustrationColor) {
+      if (svgMarkup) {
+        // The SVG retains its var(--illustration-*) tokens. ThemeProvider emits the resolved
+        // --illustration-* CSS vars so the browser applies them through normal cascade.
+        return /*#__PURE__*/_jsx("div", {
+          dangerouslySetInnerHTML: {
+            __html: svgMarkup
+          },
+          "aria-label": alt || undefined,
+          "data-testid": testID,
+          role: alt ? 'img' : 'presentation',
+          style: {
+            width,
+            height,
+            display: 'inline-block'
+          }
+        });
       }
-      return fallback;
+
+      // Still loading or failed — return fallback (defaults to null).
+      return fallback !== null && fallback !== void 0 ? fallback : null;
     }
-    return /*#__PURE__*/_jsx("img", {
+
+    // Default CDN path — used when applyTheme is false.
+    return version !== undefined ? /*#__PURE__*/_jsx("img", {
       alt: alt,
       "data-testid": testID,
       height: height,
-      src: src,
+      src: "".concat(STATIC_ASSETS_CDN, "/").concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg"),
       width: width
-    });
+    }) : fallback !== null && fallback !== void 0 ? fallback : null;
   });
   Illustration.displayName = 'Illustration';
   return Illustration;

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,