@coinbase/cds-mobile 8.73.0 → 8.74.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.74.0 (5/13/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: add illustration theming via applyTheme prop. [[#672](https://github.com/coinbase/cds/pull/672)]
+
 ## 8.73.0 (5/13/2026 PST)
 
 #### 🚀 Updates

package/dts/core/theme.d.ts

@@ -25,6 +25,14 @@ export type ThemeConfig = {
   darkColor?: {
     [key in ThemeVars.Color]: string;
   };
+  /** The light illustration color palette. */
+  lightIllustrationColor?: {
+    [key in ThemeVars.IllustrationColor]: string;
+  };
+  /** The dark illustration color palette. */
+  darkIllustrationColor?: {
+    [key in ThemeVars.IllustrationColor]: string;
+  };
   /** The space values, used for margin and padding. */
   space: {
     [key in ThemeVars.Space]: number;
@@ -89,6 +97,10 @@ export type Theme = ThemeConfig & {
   color: {
     [key in ThemeVars.Color]: string;
   };
+  /** The illustration color palette for the active color scheme. Undefined when the theme does not define illustration colors. */
+  illustrationColor?: {
+    [key in ThemeVars.IllustrationColor]: string;
+  };
 };
 export {};
 //# sourceMappingURL=theme.d.ts.map

package/dts/core/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE9E,KAAK,MAAM,GAAG;IACZ,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,aAAa,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IAC7D,sCAAsC;IACtC,YAAY,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IAC5D,+BAA+B;IAC/B,UAAU,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IAClD,8BAA8B;IAC9B,SAAS,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IACjD,qDAAqD;IACrD,KAAK,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IAC5C,4BAA4B;IAC5B,QAAQ,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,QAAQ,GAAG,MAAM;KAAE,CAAC;IAClD,8BAA8B;IAC9B,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IACtD,+BAA+B;IAC/B,WAAW,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,WAAW,GAAG,MAAM;KAAE,CAAC;IACxD,gCAAgC;IAChC,YAAY,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,YAAY,GAAG,MAAM;KAAE,CAAC;IAC1D,8BAA8B;IAC9B,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IACtD,kDAAkD;IAClD,cAAc,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IAC3D,4BAA4B;IAC5B,QAAQ,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,QAAQ,GAAG,MAAM;KAAE,CAAC;IAClD,wHAAwH;IACxH,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,YAAY,CAAC;KAAE,CAAC;IACvE,8BAA8B;IAC9B,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IACtD,iCAAiC;IACjC,aAAa,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,SAAS,CAAC,eAAe,CAAC;KAAE,CAAC;IAChF,yBAAyB;IACzB,MAAM,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,MAAM,GAAG,MAAM;KAAE,CAAC;IAC9C,+BAA+B;IAC/B,WAAW,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,WAAW,GAAG,MAAM;KAAE,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG;IAChC,gGAAgG;IAChG,iBAAiB,EAAE,WAAW,CAAC;IAC/B,8FAA8F;IAC9F,QAAQ,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IACvD,sFAAsF;IACtF,KAAK,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;CAC7C,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE9E,KAAK,MAAM,GAAG;IACZ,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,aAAa,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IAC7D,sCAAsC;IACtC,YAAY,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IAC5D,+BAA+B;IAC/B,UAAU,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IAClD,8BAA8B;IAC9B,SAAS,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IACjD,4CAA4C;IAC5C,sBAAsB,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,MAAM;KAAE,CAAC;IAC1E,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,MAAM;KAAE,CAAC;IACzE,qDAAqD;IACrD,KAAK,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IAC5C,4BAA4B;IAC5B,QAAQ,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,QAAQ,GAAG,MAAM;KAAE,CAAC;IAClD,8BAA8B;IAC9B,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IACtD,+BAA+B;IAC/B,WAAW,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,WAAW,GAAG,MAAM;KAAE,CAAC;IACxD,gCAAgC;IAChC,YAAY,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,YAAY,GAAG,MAAM;KAAE,CAAC;IAC1D,8BAA8B;IAC9B,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IACtD,kDAAkD;IAClD,cAAc,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IAC3D,4BAA4B;IAC5B,QAAQ,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,QAAQ,GAAG,MAAM;KAAE,CAAC;IAClD,wHAAwH;IACxH,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,YAAY,CAAC;KAAE,CAAC;IACvE,8BAA8B;IAC9B,UAAU,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,UAAU,GAAG,MAAM;KAAE,CAAC;IACtD,iCAAiC;IACjC,aAAa,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,SAAS,CAAC,eAAe,CAAC;KAAE,CAAC;IAChF,yBAAyB;IACzB,MAAM,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,MAAM,GAAG,MAAM;KAAE,CAAC;IAC9C,+BAA+B;IAC/B,WAAW,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,WAAW,GAAG,MAAM;KAAE,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG;IAChC,gGAAgG;IAChG,iBAAiB,EAAE,WAAW,CAAC;IAC/B,8FAA8F;IAC9F,QAAQ,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,aAAa,GAAG,MAAM;KAAE,CAAC;IACvD,sFAAsF;IACtF,KAAK,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,KAAK,GAAG,MAAM;KAAE,CAAC;IAC5C,gIAAgI;IAChI,iBAAiB,CAAC,EAAE;SAAG,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,MAAM;KAAE,CAAC;CACtE,CAAC"}

package/dts/illustrations/createIllustration.d.ts

@@ -48,12 +48,15 @@ export type IllustrationBaseProps<T extends keyof IllustrationNamesMap> = Shared
    * @default null
    * */
   fallback?: null | React.ReactElement;
+  /** Apply the theme to the illustration */
+  applyTheme?: boolean;
 };
 type IllustrationConfigShape = Record<
   string,
   {
     light: () => string;
     dark: () => string;
+    themeable?: () => string;
   }
 >;
 export type IllustrationA11yProps = Pick<

package/dts/illustrations/createIllustration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACxF,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACf,MAAM,6BAA6B,CAAC;AAKrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,iBAAiB,CAAC;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,oBAAoB,IAAI,WAAW,GAAG;IACtF,+CAA+C;IAC/C,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;SAGK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;CACtC,CAAC;AAEF,KAAK,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,kBAAkB,EAClB,oBAAoB,GAAG,mBAAmB,CAC3C,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAChC,OAAO,SAAS,mBAAmB,EACnC,MAAM,SAAS,uBAAuB,EACtC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,sEAoDjC"}
+{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACxF,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACf,MAAM,6BAA6B,CAAC;AAMrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,iBAAiB,CAAC;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,oBAAoB,IAAI,WAAW,GAAG;IACtF,+CAA+C;IAC/C,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;SAGK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,uBAAuB,GAAG,MAAM,CACnC,MAAM,EACN;IAAE,KAAK,EAAE,MAAM,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,MAAM,CAAA;CAAE,CACtE,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,kBAAkB,EAClB,oBAAoB,GAAG,mBAAmB,CAC3C,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAChC,OAAO,SAAS,mBAAmB,EACnC,MAAM,SAAS,uBAAuB,EACtC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,sEA8EjC"}

package/dts/system/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC;AAEtC,eAAO,MAAM,YAAY,kCAA0D,CAAC;AAMpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,wCAAwC,kBAAkB,4CAoCvF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB,GAAI,cAAc,0BAA0B,4CAY7E,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC;AAEtC,eAAO,MAAM,YAAY,kCAA0D,CAAC;AAMpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,wCAAwC,kBAAkB,4CAuCvF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB,GAAI,cAAc,0BAA0B,4CAY7E,CAAC"}

package/dts/themes/coinbaseDenseTheme.d.ts

@@ -555,5 +555,37 @@ export declare const coinbaseDenseTheme: {
       readonly shadowRadius: 24;
     };
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
 };
 //# sourceMappingURL=coinbaseDenseTheme.d.ts.map

package/dts/themes/coinbaseDenseTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coinbaseDenseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseDenseTheme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHC,CAAC"}
+{"version":3,"file":"coinbaseDenseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseDenseTheme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHC,CAAC"}

package/dts/themes/coinbaseHighContrastTheme.d.ts

@@ -551,5 +551,37 @@ export declare const coinbaseHighContrastTheme: {
       readonly shadowRadius: 24;
     };
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(143,178,255)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
 };
 //# sourceMappingURL=coinbaseHighContrastTheme.d.ts.map

package/dts/themes/coinbaseHighContrastTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coinbaseHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAsSpE,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QN,CAAC"}
+{"version":3,"file":"coinbaseHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AAsSpE,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SN,CAAC"}

package/dts/themes/coinbaseTheme.d.ts

@@ -551,5 +551,37 @@ export declare const coinbaseTheme: {
       readonly shadowRadius: 24;
     };
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
 };
 //# sourceMappingURL=coinbaseTheme.d.ts.map

package/dts/themes/coinbaseTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coinbaseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,aAAa,CAAC;AAsS1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QM,CAAC"}
+{"version":3,"file":"coinbaseTheme.d.ts","sourceRoot":"","sources":["../../src/themes/coinbaseTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,aAAa,CAAC;AAsS1C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SM,CAAC"}

package/dts/themes/defaultHighContrastTheme.d.ts

@@ -551,5 +551,37 @@ export declare const defaultHighContrastTheme: {
       readonly shadowRadius: 24;
     };
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(143,178,255)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
 };
 //# sourceMappingURL=defaultHighContrastTheme.d.ts.map

package/dts/themes/defaultHighContrastTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAsStE,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QL,CAAC"}
+{"version":3,"file":"defaultHighContrastTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultHighContrastTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,8BAA8B,CAAC;AAsStE,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SL,CAAC"}

package/dts/themes/defaultTheme.d.ts

@@ -381,6 +381,38 @@ export declare const defaultTheme: {
     readonly accentBoldGray: 'rgb(193,198,207)';
     readonly transparent: 'rgba(10,11,13,0)';
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
   readonly space: {
     readonly '0': 0;
     readonly '0.25': 2;

package/dts/themes/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAsS5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QO,CAAC"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/themes/defaultTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAsS5C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SO,CAAC"}

package/dts/utils/convertThemedSvgToHex.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+export declare const convertThemedSvgToHex: (
+  xml: string,
+  illustrationPalette: { [key in ThemeVars.IllustrationColor]: string },
+) => string;
+//# sourceMappingURL=convertThemedSvgToHex.d.ts.map

package/dts/utils/convertThemedSvgToHex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertThemedSvgToHex.d.ts","sourceRoot":"","sources":["../../src/utils/convertThemedSvgToHex.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,eAAO,MAAM,qBAAqB,GAChC,KAAK,MAAM,EACX,qBAAqB,GAAG,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,MAAM,GAAE,WAStE,CAAC"}

package/dts/utils/testHelpers.d.ts

@@ -402,6 +402,38 @@ export declare const theme: {
     readonly accentBoldGray: 'rgb(193,198,207)';
     readonly transparent: 'rgba(10,11,13,0)';
   };
+  readonly lightIllustrationColor: {
+    readonly primary: 'rgb(0,82,255)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(206,210,219)';
+    readonly gray2: 'rgb(10, 11, 15)';
+    readonly gray3: 'rgb(206, 210, 220)';
+    readonly positive: 'rgb(60,194,138)';
+    readonly negative: 'rgb(225,57,71)';
+    readonly accent1: 'rgb(255, 210, 0)';
+    readonly accent2: 'rgb(93,226,248)';
+    readonly accent3: 'rgb(237,112,47)';
+    readonly accent4: 'rgb(115,162,255)';
+    readonly invert: 'rgb(10, 11, 14)';
+    readonly invert2: 'rgb(255, 255, 254)';
+  };
+  readonly darkIllustrationColor: {
+    readonly primary: 'rgb(87,139,250)';
+    readonly black: 'rgb(10,11,13)';
+    readonly white: 'rgb(255,255,255)';
+    readonly gray: 'rgb(70,75,85)';
+    readonly gray2: 'rgb(70,75,85)';
+    readonly gray3: 'rgb(255,255,255)';
+    readonly positive: 'rgb(68,194,141)';
+    readonly negative: 'rgb(240,97,109)';
+    readonly accent1: 'rgb(236, 208, 105)';
+    readonly accent2: 'rgb(69,217,245)';
+    readonly accent3: 'rgb(240,120,54)';
+    readonly accent4: 'rgb(132,170,253)';
+    readonly invert: 'rgb(255,255,255)';
+    readonly invert2: 'rgb(114,120,134)';
+  };
   readonly space: {
     readonly '0': 0;
     readonly '0.25': 2;

package/dts/utils/testHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/testHelpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAG7B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAe,CAAC;AAElC,eAAO,MAAM,oBAAoB,GAAI,yCAIlC,yBAAyB,4CAM3B,CAAC"}
+{"version":3,"file":"testHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/testHelpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAG7B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAe,CAAC;AAElC,eAAO,MAAM,oBAAoB,GAAI,yCAIlC,yBAAyB,4CAM3B,CAAC"}

package/esm/illustrations/__stories__/ThemedIllustrations.stories.js

@@ -0,0 +1,214 @@
+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); }
+import { useCallback, useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { HStack, VStack } from '../../layout';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { SegmentedTabs } from '../../tabs/SegmentedTabs';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { HeroSquare } from '../HeroSquare';
+import { Pictogram } from '../Pictogram';
+import { SpotIcon } from '../SpotIcon';
+import { SpotRectangle } from '../SpotRectangle';
+import { SpotSquare } from '../SpotSquare';
+import { ILLUSTRATION_THEME_TABS, ILLUSTRATION_THEMES } from './illustrationThemes';
+
+// ─── Illustration samples ────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HERO_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'accountUnderReview', 'add2Fa', 'addBankAccount', 'addCreditCard'];
+const SPOT_SQUARE_SAMPLES = ['accessToAdvancedCharts', 'addCard', 'addEth', 'addMultipleCrypto', 'addPasswordProtection'];
+const PICTOGRAM_SAMPLES = ['accountsNavigation', 'accreditedInvestor', 'add', 'addCard', 'addPayment'];
+const SPOT_ICON_SAMPLES = ['advancedTradeProduct', 'arrowsUpDown', 'assetEmptyStateAa', 'assetEmptyStateAb', 'assetEmptyStateAc'];
+const SPOT_RECTANGLE_SAMPLES = ['accessToAdvancedCharts', 'addBank', 'addPhoneNumber', 'advancedTradeCharts', 'advancedTrading'];
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const resolveTheme = key => key === 'default' ? defaultTheme : _extends({}, defaultTheme, ILLUSTRATION_THEMES[key]);
+
+// ─── Story ───────────────────────────────────────────────────────────────────
+
+const ThemedIllustrationsStory = () => {
+  var _activeTab$id;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const [activeTab, setActiveTab] = useState(ILLUSTRATION_THEME_TABS[0]);
+  const handleChange = useCallback(tab => setActiveTab(tab), []);
+  const themeKey = (_activeTab$id = activeTab == null ? void 0 : activeTab.id) != null ? _activeTab$id : 'default';
+  const theme = resolveTheme(themeKey);
+  const garishTheme = resolveTheme('garish');
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Side-by-side comparison",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: activeColorScheme,
+          theme: defaultTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 2,
+            padding: 2,
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "label2",
+              children: "Default"
+            }), /*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts",
+              scaleMultiplier: 0.35
+            }), /*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts"
+            }), /*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: "add"
+            }), /*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: "advancedTradeProduct"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ThemeProvider, {
+          activeColorScheme: activeColorScheme,
+          theme: garishTheme,
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 2,
+            padding: 2,
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "label2",
+              children: "Garish"
+            }), /*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts",
+              scaleMultiplier: 0.35
+            }), /*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: "accessToAdvancedCharts"
+            }), /*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: "add"
+            }), /*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: "advancedTradeProduct"
+            })]
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Theme",
+      children: /*#__PURE__*/_jsx(SegmentedTabs, {
+        accessibilityLabel: "Select illustration theme",
+        activeTab: activeTab,
+        onChange: handleChange,
+        tabs: ILLUSTRATION_THEME_TABS
+      })
+    }), /*#__PURE__*/_jsxs(ThemeProvider, {
+      activeColorScheme: activeColorScheme,
+      theme: theme,
+      children: [/*#__PURE__*/_jsx(Example, {
+        title: "HeroSquare",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: HERO_SQUARE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(HeroSquare, {
+              applyTheme: true,
+              name: name,
+              scaleMultiplier: 0.3
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotSquare",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: SPOT_SQUARE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotSquare, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Pictogram",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: PICTOGRAM_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(Pictogram, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotIcon",
+        children: /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 2,
+          children: SPOT_ICON_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotIcon, {
+              applyTheme: true,
+              name: name
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "SpotRectangle",
+        children: /*#__PURE__*/_jsx(VStack, {
+          gap: 2,
+          children: SPOT_RECTANGLE_SAMPLES.map(name => /*#__PURE__*/_jsxs(VStack, {
+            gap: 0,
+            children: [/*#__PURE__*/_jsx(SpotRectangle, {
+              applyTheme: true,
+              name: name,
+              scaleMultiplier: 0.5
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              numberOfLines: 1,
+              children: name
+            })]
+          }, name))
+        })
+      })]
+    })]
+  });
+};
+export default ThemedIllustrationsStory;

package/esm/illustrations/__stories__/illustrationThemes.js

@@ -0,0 +1,122 @@
+export const ILLUSTRATION_THEME_TABS = [{
+  id: 'default',
+  label: 'Default'
+}, {
+  id: 'warm',
+  label: 'Warm'
+}, {
+  id: 'monochrome',
+  label: 'Mono'
+}, {
+  id: 'garish',
+  label: 'Garish'
+}];
+export const WARM_ILLUSTRATION_THEME = {
+  lightIllustrationColor: {
+    primary: 'rgb(234, 88, 12)',
+    black: 'rgb(28, 25, 23)',
+    white: 'rgb(255, 247, 237)',
+    gray: 'rgb(254, 243, 199)',
+    gray2: 'rgb(254, 243, 199)',
+    gray3: 'rgb(253, 230, 138)',
+    positive: 'rgb(34, 197, 94)',
+    negative: 'rgb(239, 68, 68)',
+    accent1: 'rgb(250, 204, 21)',
+    accent2: 'rgb(249, 115, 22)',
+    accent3: 'rgb(239, 68, 68)',
+    accent4: 'rgb(254, 215, 170)',
+    invert: 'rgb(120, 53, 15)',
+    invert2: 'rgb(255, 247, 237)'
+  },
+  darkIllustrationColor: {
+    primary: 'rgb(251, 146, 60)',
+    black: 'rgb(255, 247, 237)',
+    white: 'rgb(28, 25, 23)',
+    gray: 'rgb(120, 53, 15)',
+    gray2: 'rgb(120, 53, 15)',
+    gray3: 'rgb(154, 52, 18)',
+    positive: 'rgb(74, 222, 128)',
+    negative: 'rgb(248, 113, 113)',
+    accent1: 'rgb(253, 224, 71)',
+    accent2: 'rgb(253, 186, 116)',
+    accent3: 'rgb(248, 113, 113)',
+    accent4: 'rgb(154, 52, 18)',
+    invert: 'rgb(255, 237, 213)',
+    invert2: 'rgb(120, 53, 15)'
+  }
+};
+export const MONOCHROME_ILLUSTRATION_THEME = {
+  lightIllustrationColor: {
+    primary: 'rgb(113, 113, 122)',
+    black: 'rgb(9, 9, 11)',
+    white: 'rgb(250, 250, 250)',
+    gray: 'rgb(228, 228, 231)',
+    gray2: 'rgb(212, 212, 216)',
+    gray3: 'rgb(196, 196, 202)',
+    positive: 'rgb(161, 161, 170)',
+    negative: 'rgb(82, 82, 91)',
+    accent1: 'rgb(161, 161, 170)',
+    accent2: 'rgb(113, 113, 122)',
+    accent3: 'rgb(82, 82, 91)',
+    accent4: 'rgb(212, 212, 216)',
+    invert: 'rgb(9, 9, 11)',
+    invert2: 'rgb(244, 244, 245)'
+  },
+  darkIllustrationColor: {
+    primary: 'rgb(161, 161, 170)',
+    black: 'rgb(244, 244, 245)',
+    white: 'rgb(24, 24, 27)',
+    gray: 'rgb(63, 63, 70)',
+    gray2: 'rgb(63, 63, 70)',
+    gray3: 'rgb(82, 82, 91)',
+    positive: 'rgb(113, 113, 122)',
+    negative: 'rgb(212, 212, 216)',
+    accent1: 'rgb(113, 113, 122)',
+    accent2: 'rgb(161, 161, 170)',
+    accent3: 'rgb(212, 212, 216)',
+    accent4: 'rgb(63, 63, 70)',
+    invert: 'rgb(244, 244, 245)',
+    invert2: 'rgb(39, 39, 42)'
+  }
+};
+
+// Maximally distinct colors — ideal for verifying every token is wired correctly
+export const GARISH_ILLUSTRATION_THEME = {
+  lightIllustrationColor: {
+    primary: 'rgb(220, 38, 38)',
+    black: 'rgb(20, 83, 45)',
+    white: 'rgb(254, 249, 195)',
+    gray: 'rgb(243, 232, 255)',
+    gray2: 'rgb(243, 232, 255)',
+    gray3: 'rgb(219, 234, 254)',
+    positive: 'rgb(34, 197, 94)',
+    negative: 'rgb(185, 28, 28)',
+    accent1: 'rgb(249, 115, 22)',
+    accent2: 'rgb(20, 184, 166)',
+    accent3: 'rgb(34, 197, 94)',
+    accent4: 'rgb(147, 197, 253)',
+    invert: 'rgb(127, 29, 29)',
+    invert2: 'rgb(219, 234, 254)'
+  },
+  darkIllustrationColor: {
+    primary: 'rgb(248, 113, 113)',
+    black: 'rgb(187, 247, 208)',
+    white: 'rgb(30, 27, 75)',
+    gray: 'rgb(88, 28, 135)',
+    gray2: 'rgb(88, 28, 135)',
+    gray3: 'rgb(30, 58, 138)',
+    positive: 'rgb(74, 222, 128)',
+    negative: 'rgb(252, 165, 165)',
+    accent1: 'rgb(253, 186, 116)',
+    accent2: 'rgb(94, 234, 212)',
+    accent3: 'rgb(74, 222, 128)',
+    accent4: 'rgb(147, 197, 253)',
+    invert: 'rgb(254, 202, 202)',
+    invert2: 'rgb(30, 58, 138)'
+  }
+};
+export const ILLUSTRATION_THEMES = {
+  warm: WARM_ILLUSTRATION_THEME,
+  monochrome: MONOCHROME_ILLUSTRATION_THEME,
+  garish: GARISH_ILLUSTRATION_THEME
+};

package/esm/illustrations/createIllustration.js

@@ -5,11 +5,12 @@ import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSiz
 import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useTheme } from '../hooks/useTheme';
+import { convertThemedSvgToHex } from '../utils/convertThemedSvgToHex';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function createIllustration(variant, config) {
   const defaultSize = getDefaultSizeObjectForIllustration(variant);
   const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
-    var _config$name;
+    var _config$name2, _config$name3;
     let {
       fallback = null,
       name,
@@ -17,13 +18,13 @@ export function createIllustration(variant, config) {
       scaleMultiplier,
       testID,
       accessibilityHint,
-      accessibilityLabel
+      accessibilityLabel,
+      applyTheme
     } = _ref;
     const {
-      activeColorScheme
+      activeColorScheme,
+      illustrationColor
     } = useTheme();
-    const requireFn = (_config$name = config[name]) == null ? void 0 : _config$name[activeColorScheme];
-    const xml = useMemo(() => requireFn == null ? void 0 : requireFn(), [requireFn]);
     const style = useMemo(() => {
       let size = defaultSize;
       if (dimension) {
@@ -34,6 +35,31 @@ export function createIllustration(variant, config) {
       }
       return size;
     }, [dimension, scaleMultiplier]);
+    const themedXml = useMemo(() => {
+      var _config$name, _config$name$themeabl;
+      if (!applyTheme || illustrationColor === undefined) return null;
+      const raw = (_config$name = config[name]) == null || (_config$name$themeabl = _config$name['themeable']) == null ? void 0 : _config$name$themeabl.call(_config$name);
+      return raw ? convertThemedSvgToHex(raw, illustrationColor) : null;
+    }, [name, applyTheme, illustrationColor]);
+    if (applyTheme) {
+      if (themedXml) {
+        return /*#__PURE__*/_jsx(SvgXml, {
+          accessibilityHint: accessibilityHint,
+          accessibilityLabel: accessibilityLabel,
+          accessibilityRole: "image",
+          accessible: !!accessibilityLabel,
+          style: style,
+          testID: testID,
+          xml: themedXml
+        });
+      }
+
+      // No themed variant available or no palette — return fallback.
+      return fallback;
+    }
+
+    // Default light/dark path.
+    const xml = (_config$name2 = config[name]) == null || (_config$name3 = _config$name2[activeColorScheme === 'dark' ? 'dark' : 'light']) == null ? void 0 : _config$name3.call(_config$name2);
     if (!xml) {
       if (isDevelopment()) {
         console.error("Unable to find illustration with name: " + name);

package/esm/system/ThemeProvider.js

@@ -16,6 +16,7 @@ export const ThemeProvider = _ref => {
   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 " + activeColorScheme + " but no " + activeColorScheme + " colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
@@ -25,7 +26,8 @@ export const ThemeProvider = _ref => {
     return _extends({}, theme, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
-      color: theme[activeColorKey]
+      color: theme[activeColorKey],
+      illustrationColor: theme[activeIllustrationKey]
     });
   }, [theme, activeColorScheme]);
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {

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

@@ -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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.73.0",
+  "version": "8.74.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,7 +196,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.73.0",
+    "@coinbase/cds-common": "^8.74.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.40.0",
     "@coinbase/cds-lottie-files": "^3.3.4",