@coinbase/cds-web 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/createThemeCssVars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThemeCssVars.d.ts","sourceRoot":"","sources":["../../src/core/createThemeCssVars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAIvD,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,GAAI,OAAO,OAAO,CAAC,KAAK,CAAC,4BAiCvD,CAAC"}
+{"version":3,"file":"createThemeCssVars.d.ts","sourceRoot":"","sources":["../../src/core/createThemeCssVars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAQvD,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,GAAI,OAAO,OAAO,CAAC,KAAK,CAAC,4BAoDvD,CAAC"}

package/dts/core/theme.d.ts

@@ -19,6 +19,14 @@ export type ThemeConfig = {
   darkColor?: {
     [key in ThemeVars.Color]: Property.Color;
   };
+  /** The light illustration color palette. */
+  lightIllustrationColor?: {
+    [key in ThemeVars.IllustrationColor]: Property.Color;
+  };
+  /** The dark illustration color palette. */
+  darkIllustrationColor?: {
+    [key in ThemeVars.IllustrationColor]: Property.Color;
+  };
   /** The space values, used for margin and padding. */
   space: {
     [key in ThemeVars.Space]: number;
@@ -83,6 +91,10 @@ export type Theme = ThemeConfig & {
   color: {
     [key in ThemeVars.Color]: Property.Color;
   };
+  /** The illustration color palette for the active color scheme. Undefined when the theme does not define illustration colors. */
+  illustrationColor?: {
+    [key in ThemeVars.IllustrationColor]: Property.Color;
+  };
 };
 /** Maps our StyleVars to their CSS variable prefixes. For example, the names of CSS vars generated from `iconSize` vars will be prefixed with `--iconSize-`. */
 export declare const styleVarPrefixes: {
@@ -90,6 +102,9 @@ export declare const styleVarPrefixes: {
   readonly darkSpectrum: 'dark';
   readonly lightColor: 'lightColor';
   readonly darkColor: 'darkColor';
+  readonly lightIllustrationColor: 'lightIllustrationColor';
+  readonly darkIllustrationColor: 'darkIllustrationColor';
+  readonly illustrationColor: 'illustration';
   readonly spectrum: '';
   readonly color: 'color';
   readonly space: 'space';

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/HeroSquare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeroSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/HeroSquare.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,kHAAyD,CAAC;AAEjF,YAAY,EAAE,cAAc,EAAE,MAAM,2EAA2E,CAAC"}
+{"version":3,"file":"HeroSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/HeroSquare.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,kHAItB,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,2EAA2E,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../src/illustrations/Pictogram.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,SAAS,iHAAuD,CAAC;AAE9E,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,WAAW,CAAC,GACjE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC;CACpD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../src/illustrations/Pictogram.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,SAAS,iHAA2E,CAAC;AAElG,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,WAAW,CAAC,GACjE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC;CACpD,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SpotIcon.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,QAAQ,gHAAqD,CAAC;AAE3E,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,CAAC,GAC/D,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AACJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"SpotIcon.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,QAAQ,gHAAwE,CAAC;AAE9F,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,CAAC,GAC/D,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AACJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SpotRectangle.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotRectangle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,eAAe,CAAC,GACzE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,qHAA+D,CAAC;AAE1F,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"SpotRectangle.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotRectangle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,eAAe,CAAC,GACzE,qBAAqB,GAAG;IACtB;;;SAGK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,CAAC;CACxD,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,qHAIzB,CAAC;AAEF,YAAY,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SpotSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotSquare.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,UAAU,kHAAyD,CAAC;AAEjF,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"SpotSquare.d.ts","sourceRoot":"","sources":["../../src/illustrations/SpotSquare.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAC/B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,UAAU,kHAItB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,YAAY,CAAC,GACnE,qBAAqB,GAAG;IACtB;;SAEK;IACL,SAAS,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CACrD,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC"}

package/dts/illustrations/createIllustration.d.ts

@@ -43,15 +43,30 @@ export type IllustrationBaseProps<T extends keyof IllustrationNamesMap> = Shared
   /** Multiply the width & height while maintaining aspect ratio */
   scaleMultiplier?: number;
   /**
-   * Fallback element to render if unable to find an illustration with the matching name
+   * Fallback element to render if unable to find an illustration with the matching name,
+   * or while the themed SVG is loading when applyTheme is set.
    * @default null
    * */
   fallback?: null | React.ReactElement;
+  /** Apply the theme to the illustration */
+  applyTheme?: boolean;
 };
-type IllustrationConfigShape<Variant extends IllustrationVariant> = Record<
+type IllustrationVersionMapShape<Variant extends IllustrationVariant> = Record<
   IllustrationNamesMap[Variant],
   number
 >;
+/**
+ * ESM-compatible lazy loader map. Each entry uses a relative dynamic import so
+ * any bundler (Vite, webpack, esbuild) can code-split without CORS or bare-specifier issues.
+ */
+type SvgEsmConfigShape<Variant extends IllustrationVariant> = Partial<
+  Record<
+    IllustrationNamesMap[Variant],
+    {
+      themeable?: () => Promise<string>;
+    }
+  >
+>;
 export type IllustrationA11yProps = {
   /** Alt tag to apply to the img
    * @default "" will identify the image as decorative
@@ -62,7 +77,8 @@ export type IllustrationBasePropsWithA11y<Type extends IllustrationVariant> =
   IllustrationBaseProps<Type> & IllustrationA11yProps;
 export declare function createIllustration<Variant extends IllustrationVariant>(
   variant: Variant,
-  config: IllustrationConfigShape<Variant>,
+  versionMap: IllustrationVersionMapShape<Variant>,
+  svgEsmConfig?: SvgEsmConfigShape<Variant>,
 ): React.NamedExoticComponent<IllustrationBasePropsWithA11y<Variant>>;
 export {};
 //# sourceMappingURL=createIllustration.d.ts.map

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,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,CAAC,OAAO,SAAS,mBAAmB,IAAI,MAAM,CACxE,oBAAoB,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,EACpE,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,uBAAuB,CAAC,OAAO,CAAC,sEA0CzC"}
+{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,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;AAOrC,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;;;;SAIK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,CAAC,OAAO,SAAS,mBAAmB,IAAI,MAAM,CAC5E,oBAAoB,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP,CAAC;AAEF;;;GAGG;AACH,KAAK,iBAAiB,CAAC,OAAO,SAAS,mBAAmB,IAAI,OAAO,CACnE,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAC7E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,EACpE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,sEAuF1C"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAGnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG9F,OAAO,QAAQ,SAAS,CAAC;IAEvB,UAAU,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;KAAG;CACtD;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC;AAEtC,eAAO,MAAM,YAAY,kCAA0D,CAAC;AAEpF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,KAAK,4BAGlD,CAAC;AAeF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC,GACzF,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,GAAG;IAClD,KAAK,EAAE,WAAW,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,aAAa,GAAI,oFAQ3B,kBAAkB,4CA6CpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,iBAAiB,EACjB,SAAS,GAAG,WAAW,GAAG,OAAO,CAClC,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB,GAAI,0CAKnC,0BAA0B,4CAkB5B,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAGnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG9F,OAAO,QAAQ,SAAS,CAAC;IAEvB,UAAU,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;KAAG;CACtD;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC;AAEtC,eAAO,MAAM,YAAY,kCAA0D,CAAC;AAEpF,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,KAAK,4BAGlD,CAAC;AAeF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC,GACzF,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,GAAG;IAClD,KAAK,EAAE,WAAW,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,aAAa,GAAI,oFAQ3B,kBAAkB,4CAgDpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,iBAAiB,EACjB,SAAS,GAAG,WAAW,GAAG,OAAO,CAClC,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB,GAAI,0CAKnC,0BAA0B,4CAkB5B,CAAC"}

package/dts/themes/coinbaseDenseTheme.d.ts

@@ -539,5 +539,37 @@ export declare const coinbaseDenseTheme: {
     readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
     readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';
   };
+  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,CAAC"}

package/dts/themes/coinbaseHighContrastTheme.d.ts

@@ -531,6 +531,38 @@ export declare const coinbaseHighContrastTheme: {
     readonly caption: 'uppercase';
     readonly legal: 'none';
   };
+  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)';
+  };
   readonly shadow: {
     readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
     readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQN,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSN,CAAC"}

package/dts/themes/coinbaseTheme.d.ts

@@ -535,5 +535,37 @@ export declare const coinbaseTheme: {
     readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
     readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';
   };
+  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQM,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSM,CAAC"}

package/dts/themes/defaultHighContrastTheme.d.ts

@@ -531,6 +531,38 @@ export declare const defaultHighContrastTheme: {
     readonly caption: 'uppercase';
     readonly legal: 'none';
   };
+  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)';
+  };
   readonly shadow: {
     readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
     readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQO,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSO,CAAC"}

package/esm/core/createThemeCssVars.js

@@ -1,6 +1,10 @@
 import { styleVarPrefixes } from './theme';
 const periodsRegex = /\./g;
 
+// Converts a camelCase illustration theme key to the kebab-case CSS var suffix that
+// the generated themeable SVGs expect: accent1 → accent-1, gray2 → gray-2.
+const toIllustrationVarSuffix = key => key.replace(/([a-z])(\d+)$/i, '$1-$2');
+
 /** Takes a theme object and formats its keys as CSS variables to be used in inline styles. */
 export const createThemeCssVars = theme => {
   const themeCss = {};
@@ -14,6 +18,25 @@ export const createThemeCssVars = theme => {
       themeCss['--activeColorScheme'] = theme.activeColorScheme;
       continue;
     }
+
+    // lightIllustrationColor/darkIllustrationColor are resolved into theme.illustrationColor by ThemeProvider.
+    // Skip them here to avoid emitting --lightIllustrationColor-* / --darkIllustrationColor-* vars.
+    if (key === 'lightIllustrationColor' || key === 'darkIllustrationColor') {
+      continue;
+    }
+
+    // Illustration colors use a kebab-converted key format to match the var(--illustration-accent-1)
+    // tokens in the generated themeable SVGs, so they need special handling rather than the default
+    // period-to-underscore substitution.
+    if (key === 'illustrationColor') {
+      for (const varName of Object.keys(themeVars)) {
+        const value = themeVars[varName];
+        if (value !== undefined) {
+          themeCss["--illustration-".concat(toIllustrationVarSuffix(varName))] = value;
+        }
+      }
+      continue;
+    }
     const prefix = styleVarPrefixes[key];
     const cssVarPrefix = prefix ? "--".concat(prefix, "-") : '--';
     const varNames = Object.keys(themeVars);

package/esm/core/theme.js

@@ -4,6 +4,9 @@ export const styleVarPrefixes = {
   darkSpectrum: 'dark',
   lightColor: 'lightColor',
   darkColor: 'darkColor',
+  lightIllustrationColor: 'lightIllustrationColor',
+  darkIllustrationColor: 'darkIllustrationColor',
+  illustrationColor: 'illustration',
   spectrum: '',
   color: 'color',
   space: 'space',

package/esm/illustrations/HeroSquare.js

@@ -1,3 +1,4 @@
+import heroSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/svgEsmMap';
 import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap);
+export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap, heroSquareSvgEsmMap);

package/esm/illustrations/Pictogram.js

@@ -1,3 +1,4 @@
+import pictogramSvgEsmMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/svgEsmMap';
 import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const Pictogram = createIllustration('pictogram', pictogramVersionMap);
+export const Pictogram = createIllustration('pictogram', pictogramVersionMap, pictogramSvgEsmMap);

package/esm/illustrations/SpotIcon.js

@@ -1,3 +1,4 @@
+import spotIconSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/svgEsmMap';
 import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap);
+export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap, spotIconSvgEsmMap);

package/esm/illustrations/SpotRectangle.js

@@ -1,3 +1,4 @@
+import spotRectangleSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/svgEsmMap';
 import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap);
+export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap, spotRectangleSvgEsmMap);

package/esm/illustrations/SpotSquare.js

@@ -1,3 +1,4 @@
+import spotSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/svgEsmMap';
 import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
 import { createIllustration } from './createIllustration';
-export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap);
+export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap, spotSquareSvgEsmMap);

package/esm/illustrations/createIllustration.js

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

package/esm/system/ThemeProvider.js

@@ -47,6 +47,7 @@ export const ThemeProvider = _ref2 => {
   const themeApi = useMemo(() => {
     const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
     const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
+    const activeIllustrationKey = activeColorScheme === 'dark' ? 'darkIllustrationColor' : 'lightIllustrationColor';
     const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
     const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
 
@@ -58,7 +59,8 @@ export const ThemeProvider = _ref2 => {
     return _objectSpread(_objectSpread({}, theme), {}, {
       activeColorScheme: activeColorScheme,
       spectrum: theme[activeSpectrumKey],
-      color: theme[activeColorKey]
+      color: theme[activeColorKey],
+      illustrationColor: theme[activeIllustrationKey]
     });
   }, [theme, activeColorScheme]);
   return /*#__PURE__*/_jsx(FramerMotionProvider, {

package/esm/themes/coinbaseHighContrastTheme.js

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

package/esm/themes/coinbaseTheme.js

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

package/esm/themes/defaultHighContrastTheme.js

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

package/esm/themes/defaultTheme.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.73.0",
+  "version": "8.74.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "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",