@coinbase/cds-mobile 8.72.0 → 8.74.0

package/CHANGELOG.md

@@ -8,6 +8,22 @@ 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
+
+- Feat: support more props on TextInputBaseProps. [[#679](https://github.com/coinbase/cds/pull/679)]
+
+#### 🐞 Fixes
+
+- Fix: tabs props spreaidng order. [[#679](https://github.com/coinbase/cds/pull/679)]
+
 ## 8.72.0 (5/12/2026 PST)
 
 #### 🚀 Updates

package/dts/controls/InputLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/controls/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,UAAU,6CAErB,CAAC"}
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/controls/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,UAAU,6CAMrB,CAAC"}

package/dts/controls/SearchInput.d.ts

@@ -15,6 +15,8 @@ export type SearchInputBaseProps = Pick<
   | 'focusedBorderWidth'
   | 'helperTextErrorIconAccessibilityLabel'
   | 'font'
+  | 'labelFont'
+  | 'labelColor'
   | 'placeholder'
   | 'testID'
   | 'testIDMap'
@@ -90,6 +92,8 @@ export declare const SearchInput: React.MemoExoticComponent<
       | 'compact'
       | 'enableColorSurge'
       | 'focusedBorderWidth'
+      | 'labelFont'
+      | 'labelColor'
       | 'testIDMap'
       | 'helperTextErrorIconAccessibilityLabel'
     > & {

package/dts/controls/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAExF,OAAO,KAAK,EACV,qBAAqB,EAErB,SAAS,IAAI,WAAW,EAEzB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAM3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,cAAc,GACd,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,MAAM,GACN,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,cAAc,GAAG;IACf,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,WAAW;IAvDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;;;;;;;aA4BzC,CAAC;WAEJ,CAAN;aACO,CAAC;kBACU,CAAC;;;;;;;;;;;;IA3Bf,uDAAuD;cAC7C,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAChD;;;OAGG;aACM,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAC/C;;;OAGG;uBACgB,OAAO;sCAiI7B,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAExF,OAAO,KAAK,EACV,qBAAqB,EAErB,SAAS,IAAI,WAAW,EAEzB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAM3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,cAAc,GACd,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,MAAM,GACN,WAAW,GACX,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,cAAc,GAAG;IACf,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,WAAW;IAvDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;;;;;;;aA0BxC,CAAC;WACK,CAAC;aAEX,CAAF;kBAEE,CAAJ;;;;;;;;;;;;IA1BE,uDAAuD;cAC7C,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAChD;;;OAGG;aACM,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAC/C;;;OAGG;uBACgB,OAAO;sCAiI7B,CAAC"}

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"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"}

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":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"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"}

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/controls/InputLabel.js

@@ -1,4 +1,4 @@
-const _excluded = ["color"];
+const _excluded = ["color", "font"];
 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, { memo } from 'react';
@@ -6,12 +6,13 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputLabel = /*#__PURE__*/memo(function InputLabel(_ref) {
   let {
-      color
+      color = 'fg',
+      font = 'label1'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Text, _extends({
     color: color,
-    font: "label1",
+    font: font,
     paddingY: 0.5
   }, props));
 });

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
 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, { cloneElement, forwardRef, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -31,6 +31,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
+      labelFont = 'label1',
+      labelColor = 'fg',
       helperText = '',
       variant = 'foregroundMuted',
       testID,
@@ -176,6 +178,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
         background: readOnlyInputBackground
       }, {
         children: labelNode ? labelNode : /*#__PURE__*/_jsx(InputLabel, _extends({
+          color: labelColor,
+          font: labelFont,
           testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : ''
         }, labelVariant === 'inside' && {
           paddingTop: 0,
@@ -202,6 +206,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
         children: /*#__PURE__*/_jsxs(HStack, {
           paddingStart: compact && hasLabel ? 2 : undefined,
           children: [compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
+            color: labelColor,
+            font: labelFont,
             children: label
           })), !!start && /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
             value: focusedVariant,

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/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -1,8 +1,6 @@
-const _excluded = ["label", "labelNode"];
+const _excluded = ["label", "labelNode", "readOnly"];
 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; }
 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 { Text } from '../../../typography/Text';
-import { jsx as _jsx } from "react/jsx-runtime";
 export const customComponentConfig = {
   Banner: {
     borderRadius: 0
@@ -29,18 +27,14 @@ export const customComponentConfig = {
   },
   TextInput: _ref => {
     let {
-        label,
-        labelNode
+        readOnly
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
     return {
-      labelNode: (labelNode != null ? labelNode : label) ? /*#__PURE__*/_jsx(Text, {
-        color: "fgMuted",
-        font: "label2",
-        children: label
-      }) : undefined,
+      labelColor: 'fgMuted',
+      labelFont: 'label2',
       bordered: false,
-      inputBackground: 'bgAlternate',
+      inputBackground: readOnly ? 'bgSecondary' : 'bgAlternate',
       font: props.compact ? 'label2' : 'body',
       variant: 'foregroundMuted',
       focusedBorderWidth: 100

package/esm/system/__stories__/componentConfigStickerSheet/examples/TextInput.js

@@ -40,6 +40,18 @@ export const TextInputExample = /*#__PURE__*/memo(() => {
       labelVariant: "inside",
       onChangeText: setValue,
       placeholder: "Input with icon button",
+      style: {
+        flexGrow: 1
+      },
+      value: value
+    }), /*#__PURE__*/_jsx(TextInput, {
+      readOnly: true,
+      label: "Label",
+      onChangeText: setValue,
+      placeholder: "Read only input",
+      style: {
+        flexGrow: 1
+      },
       value: value
     })]
   });

package/esm/tabs/Tabs.js

@@ -129,12 +129,12 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
           } = tabProps,
           tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
-        const renderedTabProps = _extends({}, tabRest, {
+        const renderedTabProps = _extends({
           activeColor,
           color,
           id,
           style: styles == null ? void 0 : styles.tab
-        });
+        }, tabRest);
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
           registerRef: registerRef,

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.72.0",
+  "version": "8.74.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,9 +196,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.72.0",
+    "@coinbase/cds-common": "^8.74.0",
     "@coinbase/cds-icons": "^5.16.0",
-    "@coinbase/cds-illustrations": "^4.39.0",
+    "@coinbase/cds-illustrations": "^4.40.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",