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

package/esm/themes/coinbaseHighContrastTheme.js

@@ -564,5 +564,37 @@ export const coinbaseHighContrastTheme = {
       shadowOpacity: 0.12,
       shadowRadius: 24
     }
+  },
+  lightIllustrationColor: {
+    primary: "rgb(" + lightSpectrum.blue60 + ")",
+    black: "rgb(" + lightSpectrum.gray100 + ")",
+    white: "rgb(" + lightSpectrum.gray0 + ")",
+    gray: "rgb(" + lightSpectrum.gray20 + ")",
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(" + lightSpectrum.green30 + ")",
+    negative: "rgb(" + lightSpectrum.red50 + ")",
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(" + lightSpectrum.teal15 + ")",
+    accent3: "rgb(" + lightSpectrum.orange40 + ")",
+    accent4: "rgb(" + lightSpectrum.blue20 + ")",
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(" + darkSpectrum.blue70 + ")",
+    black: "rgb(" + darkSpectrum.gray0 + ")",
+    white: "rgb(" + darkSpectrum.gray100 + ")",
+    gray: "rgb(" + darkSpectrum.gray30 + ")",
+    gray2: "rgb(" + darkSpectrum.gray30 + ")",
+    gray3: "rgb(" + darkSpectrum.gray100 + ")",
+    positive: "rgb(" + darkSpectrum.green70 + ")",
+    negative: "rgb(" + darkSpectrum.red60 + ")",
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(" + darkSpectrum.teal80 + ")",
+    accent3: "rgb(" + darkSpectrum.orange60 + ")",
+    accent4: "rgb(" + darkSpectrum.blue80 + ")",
+    invert: "rgb(" + darkSpectrum.gray100 + ")",
+    invert2: "rgb(" + darkSpectrum.gray50 + ")"
   }
 };

package/esm/themes/coinbaseTheme.js

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

package/esm/themes/defaultHighContrastTheme.js

@@ -564,5 +564,37 @@ export const defaultHighContrastTheme = {
       shadowOpacity: 0.12,
       shadowRadius: 24
     }
+  },
+  lightIllustrationColor: {
+    primary: "rgb(" + lightSpectrum.blue60 + ")",
+    black: "rgb(" + lightSpectrum.gray100 + ")",
+    white: "rgb(" + lightSpectrum.gray0 + ")",
+    gray: "rgb(" + lightSpectrum.gray20 + ")",
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(" + lightSpectrum.green30 + ")",
+    negative: "rgb(" + lightSpectrum.red50 + ")",
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(" + lightSpectrum.teal15 + ")",
+    accent3: "rgb(" + lightSpectrum.orange40 + ")",
+    accent4: "rgb(" + lightSpectrum.blue20 + ")",
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(" + darkSpectrum.blue70 + ")",
+    black: "rgb(" + darkSpectrum.gray0 + ")",
+    white: "rgb(" + darkSpectrum.gray100 + ")",
+    gray: "rgb(" + darkSpectrum.gray30 + ")",
+    gray2: "rgb(" + darkSpectrum.gray30 + ")",
+    gray3: "rgb(" + darkSpectrum.gray100 + ")",
+    positive: "rgb(" + darkSpectrum.green70 + ")",
+    negative: "rgb(" + darkSpectrum.red60 + ")",
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(" + darkSpectrum.teal80 + ")",
+    accent3: "rgb(" + darkSpectrum.orange60 + ")",
+    accent4: "rgb(" + darkSpectrum.blue80 + ")",
+    invert: "rgb(" + darkSpectrum.gray100 + ")",
+    invert2: "rgb(" + darkSpectrum.gray50 + ")"
   }
 };

package/esm/themes/defaultTheme.js

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

package/esm/utils/convertThemedSvgToHex.js

@@ -0,0 +1,9 @@
+import { colorToHex } from '@coinbase/cds-common/color/colorToHex';
+export const convertThemedSvgToHex = (xml, illustrationPalette) => {
+  const cssVarPattern = /var\(--illustration-([a-z0-9-]+)\)/gi;
+  const normalizeToken = token => token.replace(/-/g, '');
+  return xml.replace(cssVarPattern, (_, token) => {
+    const color = illustrationPalette[normalizeToken(token)];
+    return color ? colorToHex(color) : "var(--illustration-" + token + ")";
+  });
+};

package/esm/visualizations/chart/PeriodSelector.js

@@ -1,5 +1,5 @@
 const _excluded = ["color", "label", "font", "hideDot", "style"],
-  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+  _excluded2 = ["background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useMemo } from 'react';
@@ -107,11 +107,8 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
     }))]
   });
 }));
-
-// Custom tab component with primary color for active state
 const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
   ref: ref,
-  activeColor: "fgPrimary",
   font: "label1"
 }, props))));
 /**
@@ -122,6 +119,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
   let {
       background = 'transparent',
       activeBackground = 'bgPrimaryWash',
+      activeColor = 'fgPrimary',
       width = '100%',
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
@@ -133,6 +131,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
     justifyContent: justifyContent,
     width: width

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.0.0-rc.2",
+  "version": "9.0.0-rc.3",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -202,9 +202,9 @@
     "react-native-worklets": "0.5.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-native": "^0.10.5",