@coinbase/cds-web 8.73.0 → 8.74.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/core/createThemeCssVars.d.ts.map +1 -1
  3. package/dts/core/theme.d.ts +15 -0
  4. package/dts/core/theme.d.ts.map +1 -1
  5. package/dts/illustrations/HeroSquare.d.ts.map +1 -1
  6. package/dts/illustrations/Pictogram.d.ts.map +1 -1
  7. package/dts/illustrations/SpotIcon.d.ts.map +1 -1
  8. package/dts/illustrations/SpotRectangle.d.ts.map +1 -1
  9. package/dts/illustrations/SpotSquare.d.ts.map +1 -1
  10. package/dts/illustrations/createIllustration.d.ts +19 -3
  11. package/dts/illustrations/createIllustration.d.ts.map +1 -1
  12. package/dts/system/ThemeProvider.d.ts.map +1 -1
  13. package/dts/tabs/DefaultTab.d.ts.map +1 -1
  14. package/dts/themes/coinbaseDenseTheme.d.ts +32 -0
  15. package/dts/themes/coinbaseDenseTheme.d.ts.map +1 -1
  16. package/dts/themes/coinbaseHighContrastTheme.d.ts +32 -0
  17. package/dts/themes/coinbaseHighContrastTheme.d.ts.map +1 -1
  18. package/dts/themes/coinbaseTheme.d.ts +32 -0
  19. package/dts/themes/coinbaseTheme.d.ts.map +1 -1
  20. package/dts/themes/defaultHighContrastTheme.d.ts +32 -0
  21. package/dts/themes/defaultHighContrastTheme.d.ts.map +1 -1
  22. package/dts/themes/defaultTheme.d.ts +32 -0
  23. package/dts/themes/defaultTheme.d.ts.map +1 -1
  24. package/esm/core/createThemeCssVars.js +23 -0
  25. package/esm/core/theme.js +3 -0
  26. package/esm/illustrations/HeroSquare.js +2 -1
  27. package/esm/illustrations/Pictogram.js +2 -1
  28. package/esm/illustrations/SpotIcon.js +2 -1
  29. package/esm/illustrations/SpotRectangle.js +2 -1
  30. package/esm/illustrations/SpotSquare.js +2 -1
  31. package/esm/illustrations/createIllustration.js +63 -19
  32. package/esm/system/ThemeProvider.js +3 -1
  33. package/esm/tabs/DefaultTab.css +1 -2
  34. package/esm/tabs/DefaultTab.js +1 -2
  35. package/esm/themes/coinbaseHighContrastTheme.js +32 -0
  36. package/esm/themes/coinbaseTheme.js +32 -0
  37. package/esm/themes/defaultHighContrastTheme.js +32 -0
  38. package/esm/themes/defaultTheme.js +32 -0
  39. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.74.1 (5/14/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix: adjust tabs default tab label padding. [[#682](https://github.com/coinbase/cds/pull/682)]
16
+
17
+ ## 8.74.0 (5/13/2026 PST)
18
+
19
+ #### 🚀 Updates
20
+
21
+ - Feat: add illustration theming via applyTheme prop. [[#672](https://github.com/coinbase/cds/pull/672)]
22
+
11
23
  ## 8.73.0 (5/13/2026 PST)
12
24
 
13
25
  #### 🚀 Updates
@@ -1 +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"}
1
+ {"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"}
@@ -19,6 +19,14 @@ export type ThemeConfig = {
19
19
  darkColor?: {
20
20
  [key in ThemeVars.Color]: Property.Color;
21
21
  };
22
+ /** The light illustration color palette. */
23
+ lightIllustrationColor?: {
24
+ [key in ThemeVars.IllustrationColor]: Property.Color;
25
+ };
26
+ /** The dark illustration color palette. */
27
+ darkIllustrationColor?: {
28
+ [key in ThemeVars.IllustrationColor]: Property.Color;
29
+ };
22
30
  /** The space values, used for margin and padding. */
23
31
  space: {
24
32
  [key in ThemeVars.Space]: number;
@@ -83,6 +91,10 @@ export type Theme = ThemeConfig & {
83
91
  color: {
84
92
  [key in ThemeVars.Color]: Property.Color;
85
93
  };
94
+ /** The illustration color palette for the active color scheme. Undefined when the theme does not define illustration colors. */
95
+ illustrationColor?: {
96
+ [key in ThemeVars.IllustrationColor]: Property.Color;
97
+ };
86
98
  };
87
99
  /** Maps our StyleVars to their CSS variable prefixes. For example, the names of CSS vars generated from `iconSize` vars will be prefixed with `--iconSize-`. */
88
100
  export declare const styleVarPrefixes: {
@@ -90,6 +102,9 @@ export declare const styleVarPrefixes: {
90
102
  readonly darkSpectrum: 'dark';
91
103
  readonly lightColor: 'lightColor';
92
104
  readonly darkColor: 'darkColor';
105
+ readonly lightIllustrationColor: 'lightIllustrationColor';
106
+ readonly darkIllustrationColor: 'darkIllustrationColor';
107
+ readonly illustrationColor: 'illustration';
93
108
  readonly spectrum: '';
94
109
  readonly color: 'color';
95
110
  readonly space: 'space';
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/core/theme.ts"],"names":[],"mappings":"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -43,15 +43,30 @@ export type IllustrationBaseProps<T extends keyof IllustrationNamesMap> = Shared
43
43
  /** Multiply the width & height while maintaining aspect ratio */
44
44
  scaleMultiplier?: number;
45
45
  /**
46
- * Fallback element to render if unable to find an illustration with the matching name
46
+ * Fallback element to render if unable to find an illustration with the matching name,
47
+ * or while the themed SVG is loading when applyTheme is set.
47
48
  * @default null
48
49
  * */
49
50
  fallback?: null | React.ReactElement;
51
+ /** Apply the theme to the illustration */
52
+ applyTheme?: boolean;
50
53
  };
51
- type IllustrationConfigShape<Variant extends IllustrationVariant> = Record<
54
+ type IllustrationVersionMapShape<Variant extends IllustrationVariant> = Record<
52
55
  IllustrationNamesMap[Variant],
53
56
  number
54
57
  >;
58
+ /**
59
+ * ESM-compatible lazy loader map. Each entry uses a relative dynamic import so
60
+ * any bundler (Vite, webpack, esbuild) can code-split without CORS or bare-specifier issues.
61
+ */
62
+ type SvgEsmConfigShape<Variant extends IllustrationVariant> = Partial<
63
+ Record<
64
+ IllustrationNamesMap[Variant],
65
+ {
66
+ themeable?: () => Promise<string>;
67
+ }
68
+ >
69
+ >;
55
70
  export type IllustrationA11yProps = {
56
71
  /** Alt tag to apply to the img
57
72
  * @default "" will identify the image as decorative
@@ -62,7 +77,8 @@ export type IllustrationBasePropsWithA11y<Type extends IllustrationVariant> =
62
77
  IllustrationBaseProps<Type> & IllustrationA11yProps;
63
78
  export declare function createIllustration<Variant extends IllustrationVariant>(
64
79
  variant: Variant,
65
- config: IllustrationConfigShape<Variant>,
80
+ versionMap: IllustrationVersionMapShape<Variant>,
81
+ svgEsmConfig?: SvgEsmConfigShape<Variant>,
66
82
  ): React.NamedExoticComponent<IllustrationBasePropsWithA11y<Variant>>;
67
83
  export {};
68
84
  //# sourceMappingURL=createIllustration.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
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,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"}
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAIlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AA2BvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,kBAAkB,EAClB,SAAS,GAAG,OAAO,CACpB,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC5E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;;;;;;IARrB,oFAAoF;+BAC3D,IAAI;4CA4EhC,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}
1
+ {"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAIlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAsBvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,kBAAkB,EAClB,SAAS,GAAG,OAAO,CACpB,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC5E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;;;;;;IARrB,oFAAoF;+BAC3D,IAAI;4CA4EhC,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}
@@ -539,5 +539,37 @@ export declare const coinbaseDenseTheme: {
539
539
  readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
540
540
  readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';
541
541
  };
542
+ readonly lightIllustrationColor: {
543
+ readonly primary: 'rgb(0,82,255)';
544
+ readonly black: 'rgb(10,11,13)';
545
+ readonly white: 'rgb(255,255,255)';
546
+ readonly gray: 'rgb(206,210,219)';
547
+ readonly gray2: 'rgb(10, 11, 15)';
548
+ readonly gray3: 'rgb(206, 210, 220)';
549
+ readonly positive: 'rgb(60,194,138)';
550
+ readonly negative: 'rgb(225,57,71)';
551
+ readonly accent1: 'rgb(255, 210, 0)';
552
+ readonly accent2: 'rgb(93,226,248)';
553
+ readonly accent3: 'rgb(237,112,47)';
554
+ readonly accent4: 'rgb(115,162,255)';
555
+ readonly invert: 'rgb(10, 11, 14)';
556
+ readonly invert2: 'rgb(255, 255, 254)';
557
+ };
558
+ readonly darkIllustrationColor: {
559
+ readonly primary: 'rgb(87,139,250)';
560
+ readonly black: 'rgb(10,11,13)';
561
+ readonly white: 'rgb(255,255,255)';
562
+ readonly gray: 'rgb(70,75,85)';
563
+ readonly gray2: 'rgb(70,75,85)';
564
+ readonly gray3: 'rgb(255,255,255)';
565
+ readonly positive: 'rgb(68,194,141)';
566
+ readonly negative: 'rgb(240,97,109)';
567
+ readonly accent1: 'rgb(236, 208, 105)';
568
+ readonly accent2: 'rgb(69,217,245)';
569
+ readonly accent3: 'rgb(240,120,54)';
570
+ readonly accent4: 'rgb(132,170,253)';
571
+ readonly invert: 'rgb(255,255,255)';
572
+ readonly invert2: 'rgb(114,120,134)';
573
+ };
542
574
  };
543
575
  //# sourceMappingURL=coinbaseDenseTheme.d.ts.map
@@ -1 +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"}
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"}
@@ -531,6 +531,38 @@ export declare const coinbaseHighContrastTheme: {
531
531
  readonly caption: 'uppercase';
532
532
  readonly legal: 'none';
533
533
  };
534
+ readonly lightIllustrationColor: {
535
+ readonly primary: 'rgb(0,82,255)';
536
+ readonly black: 'rgb(10,11,13)';
537
+ readonly white: 'rgb(255,255,255)';
538
+ readonly gray: 'rgb(206,210,219)';
539
+ readonly gray2: 'rgb(10, 11, 15)';
540
+ readonly gray3: 'rgb(206, 210, 220)';
541
+ readonly positive: 'rgb(60,194,138)';
542
+ readonly negative: 'rgb(225,57,71)';
543
+ readonly accent1: 'rgb(255, 210, 0)';
544
+ readonly accent2: 'rgb(93,226,248)';
545
+ readonly accent3: 'rgb(237,112,47)';
546
+ readonly accent4: 'rgb(115,162,255)';
547
+ readonly invert: 'rgb(10, 11, 14)';
548
+ readonly invert2: 'rgb(255, 255, 254)';
549
+ };
550
+ readonly darkIllustrationColor: {
551
+ readonly primary: 'rgb(87,139,250)';
552
+ readonly black: 'rgb(10,11,13)';
553
+ readonly white: 'rgb(255,255,255)';
554
+ readonly gray: 'rgb(70,75,85)';
555
+ readonly gray2: 'rgb(70,75,85)';
556
+ readonly gray3: 'rgb(255,255,255)';
557
+ readonly positive: 'rgb(68,194,141)';
558
+ readonly negative: 'rgb(240,97,109)';
559
+ readonly accent1: 'rgb(236, 208, 105)';
560
+ readonly accent2: 'rgb(69,217,245)';
561
+ readonly accent3: 'rgb(240,120,54)';
562
+ readonly accent4: 'rgb(143,178,255)';
563
+ readonly invert: 'rgb(255,255,255)';
564
+ readonly invert2: 'rgb(114,120,134)';
565
+ };
534
566
  readonly shadow: {
535
567
  readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
536
568
  readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';
@@ -1 +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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSN,CAAC"}
@@ -535,5 +535,37 @@ export declare const coinbaseTheme: {
535
535
  readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
536
536
  readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';
537
537
  };
538
+ readonly lightIllustrationColor: {
539
+ readonly primary: 'rgb(0,82,255)';
540
+ readonly black: 'rgb(10,11,13)';
541
+ readonly white: 'rgb(255,255,255)';
542
+ readonly gray: 'rgb(206,210,219)';
543
+ readonly gray2: 'rgb(10, 11, 15)';
544
+ readonly gray3: 'rgb(206, 210, 220)';
545
+ readonly positive: 'rgb(60,194,138)';
546
+ readonly negative: 'rgb(225,57,71)';
547
+ readonly accent1: 'rgb(255, 210, 0)';
548
+ readonly accent2: 'rgb(93,226,248)';
549
+ readonly accent3: 'rgb(237,112,47)';
550
+ readonly accent4: 'rgb(115,162,255)';
551
+ readonly invert: 'rgb(10, 11, 14)';
552
+ readonly invert2: 'rgb(255, 255, 254)';
553
+ };
554
+ readonly darkIllustrationColor: {
555
+ readonly primary: 'rgb(87,139,250)';
556
+ readonly black: 'rgb(10,11,13)';
557
+ readonly white: 'rgb(255,255,255)';
558
+ readonly gray: 'rgb(70,75,85)';
559
+ readonly gray2: 'rgb(70,75,85)';
560
+ readonly gray3: 'rgb(255,255,255)';
561
+ readonly positive: 'rgb(68,194,141)';
562
+ readonly negative: 'rgb(240,97,109)';
563
+ readonly accent1: 'rgb(236, 208, 105)';
564
+ readonly accent2: 'rgb(69,217,245)';
565
+ readonly accent3: 'rgb(240,120,54)';
566
+ readonly accent4: 'rgb(132,170,253)';
567
+ readonly invert: 'rgb(255,255,255)';
568
+ readonly invert2: 'rgb(114,120,134)';
569
+ };
538
570
  };
539
571
  //# sourceMappingURL=coinbaseTheme.d.ts.map
@@ -1 +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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSM,CAAC"}
@@ -531,6 +531,38 @@ export declare const defaultHighContrastTheme: {
531
531
  readonly caption: 'uppercase';
532
532
  readonly legal: 'none';
533
533
  };
534
+ readonly lightIllustrationColor: {
535
+ readonly primary: 'rgb(0,82,255)';
536
+ readonly black: 'rgb(10,11,13)';
537
+ readonly white: 'rgb(255,255,255)';
538
+ readonly gray: 'rgb(206,210,219)';
539
+ readonly gray2: 'rgb(10, 11, 15)';
540
+ readonly gray3: 'rgb(206, 210, 220)';
541
+ readonly positive: 'rgb(60,194,138)';
542
+ readonly negative: 'rgb(225,57,71)';
543
+ readonly accent1: 'rgb(255, 210, 0)';
544
+ readonly accent2: 'rgb(93,226,248)';
545
+ readonly accent3: 'rgb(237,112,47)';
546
+ readonly accent4: 'rgb(115,162,255)';
547
+ readonly invert: 'rgb(10, 11, 14)';
548
+ readonly invert2: 'rgb(255, 255, 254)';
549
+ };
550
+ readonly darkIllustrationColor: {
551
+ readonly primary: 'rgb(87,139,250)';
552
+ readonly black: 'rgb(10,11,13)';
553
+ readonly white: 'rgb(255,255,255)';
554
+ readonly gray: 'rgb(70,75,85)';
555
+ readonly gray2: 'rgb(70,75,85)';
556
+ readonly gray3: 'rgb(255,255,255)';
557
+ readonly positive: 'rgb(68,194,141)';
558
+ readonly negative: 'rgb(240,97,109)';
559
+ readonly accent1: 'rgb(236, 208, 105)';
560
+ readonly accent2: 'rgb(69,217,245)';
561
+ readonly accent3: 'rgb(240,120,54)';
562
+ readonly accent4: 'rgb(143,178,255)';
563
+ readonly invert: 'rgb(255,255,255)';
564
+ readonly invert2: 'rgb(114,120,134)';
565
+ };
534
566
  readonly shadow: {
535
567
  readonly elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)';
536
568
  readonly elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)';
@@ -1 +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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSL,CAAC"}
@@ -381,6 +381,38 @@ export declare const defaultTheme: {
381
381
  readonly accentBoldGray: 'rgb(193,198,207)';
382
382
  readonly transparent: 'rgba(10,11,13,0)';
383
383
  };
384
+ readonly lightIllustrationColor: {
385
+ readonly primary: 'rgb(0,82,255)';
386
+ readonly black: 'rgb(10,11,13)';
387
+ readonly white: 'rgb(255,255,255)';
388
+ readonly gray: 'rgb(206,210,219)';
389
+ readonly gray2: 'rgb(10, 11, 15)';
390
+ readonly gray3: 'rgb(206, 210, 220)';
391
+ readonly positive: 'rgb(60,194,138)';
392
+ readonly negative: 'rgb(225,57,71)';
393
+ readonly accent1: 'rgb(255, 210, 0)';
394
+ readonly accent2: 'rgb(93,226,248)';
395
+ readonly accent3: 'rgb(237,112,47)';
396
+ readonly accent4: 'rgb(115,162,255)';
397
+ readonly invert: 'rgb(10, 11, 14)';
398
+ readonly invert2: 'rgb(255, 255, 254)';
399
+ };
400
+ readonly darkIllustrationColor: {
401
+ readonly primary: 'rgb(87,139,250)';
402
+ readonly black: 'rgb(10,11,13)';
403
+ readonly white: 'rgb(255,255,255)';
404
+ readonly gray: 'rgb(70,75,85)';
405
+ readonly gray2: 'rgb(70,75,85)';
406
+ readonly gray3: 'rgb(255,255,255)';
407
+ readonly positive: 'rgb(68,194,141)';
408
+ readonly negative: 'rgb(240,97,109)';
409
+ readonly accent1: 'rgb(236, 208, 105)';
410
+ readonly accent2: 'rgb(69,217,245)';
411
+ readonly accent3: 'rgb(240,120,54)';
412
+ readonly accent4: 'rgb(132,170,253)';
413
+ readonly invert: 'rgb(255,255,255)';
414
+ readonly invert2: 'rgb(114,120,134)';
415
+ };
384
416
  readonly space: {
385
417
  readonly '0': 0;
386
418
  readonly '0.25': 2;
@@ -1 +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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoSO,CAAC"}
@@ -1,6 +1,10 @@
1
1
  import { styleVarPrefixes } from './theme';
2
2
  const periodsRegex = /\./g;
3
3
 
4
+ // Converts a camelCase illustration theme key to the kebab-case CSS var suffix that
5
+ // the generated themeable SVGs expect: accent1 → accent-1, gray2 → gray-2.
6
+ const toIllustrationVarSuffix = key => key.replace(/([a-z])(\d+)$/i, '$1-$2');
7
+
4
8
  /** Takes a theme object and formats its keys as CSS variables to be used in inline styles. */
5
9
  export const createThemeCssVars = theme => {
6
10
  const themeCss = {};
@@ -14,6 +18,25 @@ export const createThemeCssVars = theme => {
14
18
  themeCss['--activeColorScheme'] = theme.activeColorScheme;
15
19
  continue;
16
20
  }
21
+
22
+ // lightIllustrationColor/darkIllustrationColor are resolved into theme.illustrationColor by ThemeProvider.
23
+ // Skip them here to avoid emitting --lightIllustrationColor-* / --darkIllustrationColor-* vars.
24
+ if (key === 'lightIllustrationColor' || key === 'darkIllustrationColor') {
25
+ continue;
26
+ }
27
+
28
+ // Illustration colors use a kebab-converted key format to match the var(--illustration-accent-1)
29
+ // tokens in the generated themeable SVGs, so they need special handling rather than the default
30
+ // period-to-underscore substitution.
31
+ if (key === 'illustrationColor') {
32
+ for (const varName of Object.keys(themeVars)) {
33
+ const value = themeVars[varName];
34
+ if (value !== undefined) {
35
+ themeCss["--illustration-".concat(toIllustrationVarSuffix(varName))] = value;
36
+ }
37
+ }
38
+ continue;
39
+ }
17
40
  const prefix = styleVarPrefixes[key];
18
41
  const cssVarPrefix = prefix ? "--".concat(prefix, "-") : '--';
19
42
  const varNames = Object.keys(themeVars);
package/esm/core/theme.js CHANGED
@@ -4,6 +4,9 @@ export const styleVarPrefixes = {
4
4
  darkSpectrum: 'dark',
5
5
  lightColor: 'lightColor',
6
6
  darkColor: 'darkColor',
7
+ lightIllustrationColor: 'lightIllustrationColor',
8
+ darkIllustrationColor: 'darkIllustrationColor',
9
+ illustrationColor: 'illustration',
7
10
  spectrum: '',
8
11
  color: 'color',
9
12
  space: 'space',
@@ -1,3 +1,4 @@
1
+ import heroSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/svgEsmMap';
1
2
  import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/versionMap';
2
3
  import { createIllustration } from './createIllustration';
3
- export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap);
4
+ export const HeroSquare = createIllustration('heroSquare', heroSquareVersionMap, heroSquareSvgEsmMap);
@@ -1,3 +1,4 @@
1
+ import pictogramSvgEsmMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/svgEsmMap';
1
2
  import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/versionMap';
2
3
  import { createIllustration } from './createIllustration';
3
- export const Pictogram = createIllustration('pictogram', pictogramVersionMap);
4
+ export const Pictogram = createIllustration('pictogram', pictogramVersionMap, pictogramSvgEsmMap);
@@ -1,3 +1,4 @@
1
+ import spotIconSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/svgEsmMap';
1
2
  import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/versionMap';
2
3
  import { createIllustration } from './createIllustration';
3
- export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap);
4
+ export const SpotIcon = createIllustration('spotIcon', spotIconVersionMap, spotIconSvgEsmMap);
@@ -1,3 +1,4 @@
1
+ import spotRectangleSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/svgEsmMap';
1
2
  import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
2
3
  import { createIllustration } from './createIllustration';
3
- export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap);
4
+ export const SpotRectangle = createIllustration('spotRectangle', spotRectangleVersionMap, spotRectangleSvgEsmMap);
@@ -1,3 +1,4 @@
1
+ import spotSquareSvgEsmMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/svgEsmMap';
1
2
  import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
2
3
  import { createIllustration } from './createIllustration';
3
- export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap);
4
+ export const SpotSquare = createIllustration('spotSquare', spotSquareVersionMap, spotSquareSvgEsmMap);
@@ -1,11 +1,18 @@
1
- import React, { memo, useMemo } from 'react';
1
+ import React, { memo, useEffect, useMemo, useState } from 'react';
2
2
  import { convertDimensionToSize } from '@coinbase/cds-common/utils/convertDimensionToSize';
3
3
  import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSizeWithMultiplier';
4
4
  import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
5
5
  import { isDevelopment } from '@coinbase/cds-utils';
6
6
  import { useTheme } from '../hooks/useTheme';
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
- export function createIllustration(variant, config) {
8
+ const STATIC_ASSETS_CDN = 'https://static-assets.coinbase.com/ui-infra/illustration/v1';
9
+
10
+ /**
11
+ * ESM-compatible lazy loader map. Each entry uses a relative dynamic import so
12
+ * any bundler (Vite, webpack, esbuild) can code-split without CORS or bare-specifier issues.
13
+ */
14
+
15
+ export function createIllustration(variant, versionMap, svgEsmConfig) {
9
16
  const defaultSize = getDefaultSizeObjectForIllustration(variant);
10
17
  const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
11
18
  let {
@@ -14,39 +21,76 @@ export function createIllustration(variant, config) {
14
21
  scaleMultiplier,
15
22
  testID,
16
23
  alt = '',
17
- fallback = null
24
+ fallback,
25
+ applyTheme
18
26
  } = _ref;
19
27
  const {
20
- activeColorScheme
28
+ activeColorScheme,
29
+ illustrationColor
21
30
  } = useTheme();
22
- const version = config[name];
23
- const src = "https://static-assets.coinbase.com/ui-infra/illustration/v1/".concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg");
31
+ const version = versionMap[name];
32
+
33
+ // null = not yet loaded (or load failed), string = loaded inline SVG
34
+ const [svgMarkup, setSvgMarkup] = useState(null);
35
+ useEffect(() => {
36
+ var _svgEsmConfig$name;
37
+ let cancelled = false;
38
+ const themeableLoader = svgEsmConfig === null || svgEsmConfig === void 0 || (_svgEsmConfig$name = svgEsmConfig[name]) === null || _svgEsmConfig$name === void 0 ? void 0 : _svgEsmConfig$name.themeable;
39
+ const shouldLoad = applyTheme && illustrationColor && themeableLoader;
40
+ setSvgMarkup(null);
41
+ if (shouldLoad) {
42
+ themeableLoader().then(svg => {
43
+ if (!cancelled) setSvgMarkup(svg);
44
+ }).catch(err => {
45
+ if (isDevelopment()) {
46
+ console.error("Failed to load themeable illustration ".concat(name, ":"), err);
47
+ }
48
+ });
49
+ }
50
+ return () => {
51
+ cancelled = true;
52
+ };
53
+ }, [name, version, applyTheme, illustrationColor]);
24
54
  const {
25
55
  width,
26
56
  height
27
57
  } = useMemo(() => {
28
58
  let size = defaultSize;
29
- if (dimension) {
30
- size = convertDimensionToSize(dimension);
31
- }
32
- if (scaleMultiplier) {
33
- size = convertSizeWithMultiplier(size, scaleMultiplier);
34
- }
59
+ if (dimension) size = convertDimensionToSize(dimension);
60
+ if (scaleMultiplier) size = convertSizeWithMultiplier(size, scaleMultiplier);
35
61
  return size;
36
62
  }, [dimension, scaleMultiplier]);
37
- if (version === undefined) {
38
- if (isDevelopment()) {
39
- console.error("Unable to find illustration with name: ".concat(name));
63
+ if (applyTheme) {
64
+ if (svgMarkup) {
65
+ // The SVG retains its var(--illustration-*) tokens. ThemeProvider emits the resolved
66
+ // --illustration-* CSS vars so the browser applies them through normal cascade.
67
+ return /*#__PURE__*/_jsx("div", {
68
+ dangerouslySetInnerHTML: {
69
+ __html: svgMarkup
70
+ },
71
+ "aria-label": alt || undefined,
72
+ "data-testid": testID,
73
+ role: alt ? 'img' : 'presentation',
74
+ style: {
75
+ width,
76
+ height,
77
+ display: 'inline-block'
78
+ }
79
+ });
40
80
  }
41
- return fallback;
81
+
82
+ // Still loading or failed — return fallback (defaults to null).
83
+ return fallback !== null && fallback !== void 0 ? fallback : null;
42
84
  }
43
- return /*#__PURE__*/_jsx("img", {
85
+
86
+ // Default CDN path — used when applyTheme is false.
87
+ return version ? /*#__PURE__*/_jsx("img", {
44
88
  alt: alt,
45
89
  "data-testid": testID,
46
90
  height: height,
47
- src: src,
91
+ src: "".concat(STATIC_ASSETS_CDN, "/").concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg"),
48
92
  width: width
49
- });
93
+ }) : fallback !== null && fallback !== void 0 ? fallback : null;
50
94
  });
51
95
  Illustration.displayName = 'Illustration';
52
96
  return Illustration;
@@ -47,6 +47,7 @@ export const ThemeProvider = _ref2 => {
47
47
  const themeApi = useMemo(() => {
48
48
  const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
49
49
  const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
50
+ const activeIllustrationKey = activeColorScheme === 'dark' ? 'darkIllustrationColor' : 'lightIllustrationColor';
50
51
  const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
51
52
  const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
52
53
 
@@ -58,7 +59,8 @@ export const ThemeProvider = _ref2 => {
58
59
  return _objectSpread(_objectSpread({}, theme), {}, {
59
60
  activeColorScheme: activeColorScheme,
60
61
  spectrum: theme[activeSpectrumKey],
61
- color: theme[activeColorKey]
62
+ color: theme[activeColorKey],
63
+ illustrationColor: theme[activeIllustrationKey]
62
64
  });
63
65
  }, [theme, activeColorScheme]);
64
66
  return /*#__PURE__*/_jsx(FramerMotionProvider, {
@@ -1,3 +1,2 @@
1
1
  @layer cds{.pressableCss-p1gyavxu{margin:0;padding:0;white-space:nowrap;}
2
- .insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}
3
- .labelPaddingCss-lu2xm1d{padding-top:var(--space-2);padding-bottom:calc(var(--space-2) - 2px);}}
2
+ .insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}}
@@ -18,7 +18,6 @@ import { Text } from '../typography/Text';
18
18
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
19
19
  const pressableCss = "pressableCss-p1gyavxu";
20
20
  const insetFocusRingCss = "insetFocusRingCss-i14sq9yf";
21
- const labelPaddingCss = "labelPaddingCss-lu2xm1d";
22
21
  const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
23
22
  let {
24
23
  id,
@@ -61,10 +60,10 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
61
60
  gap: 0.5,
62
61
  children: [/*#__PURE__*/_jsx(Text, {
63
62
  as: "h2",
64
- className: labelPaddingCss,
65
63
  color: isActive ? activeColor : color,
66
64
  display: "block",
67
65
  font: "headline",
66
+ paddingY: 2,
68
67
  children: label
69
68
  }), !!count && /*#__PURE__*/_jsx(DotCount, {
70
69
  accessibilityLabel: "".concat(accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : typeof label === 'string' ? label : '', " count: ").concat(count),
@@ -569,6 +569,38 @@ export const coinbaseHighContrastTheme = {
569
569
  caption: 'uppercase',
570
570
  legal: 'none'
571
571
  },
572
+ lightIllustrationColor: {
573
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
574
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
575
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
576
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
577
+ gray2: "rgb(10, 11, 15)",
578
+ gray3: "rgb(206, 210, 220)",
579
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
580
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
581
+ accent1: "rgb(255, 210, 0)",
582
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
583
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
584
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
585
+ invert: "rgb(10, 11, 14)",
586
+ invert2: "rgb(255, 255, 254)"
587
+ },
588
+ darkIllustrationColor: {
589
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
590
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
591
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
592
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
593
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
594
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
595
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
596
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
597
+ accent1: "rgb(236, 208, 105)",
598
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
599
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
600
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
601
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
602
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
603
+ },
572
604
  shadow: {
573
605
  elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
574
606
  elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
@@ -572,5 +572,37 @@ export const coinbaseTheme = {
572
572
  shadow: {
573
573
  elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
574
574
  elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
575
+ },
576
+ lightIllustrationColor: {
577
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
578
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
579
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
580
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
581
+ gray2: "rgb(10, 11, 15)",
582
+ gray3: "rgb(206, 210, 220)",
583
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
584
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
585
+ accent1: "rgb(255, 210, 0)",
586
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
587
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
588
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
589
+ invert: "rgb(10, 11, 14)",
590
+ invert2: "rgb(255, 255, 254)"
591
+ },
592
+ darkIllustrationColor: {
593
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
594
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
595
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
596
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
597
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
598
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
599
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
600
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
601
+ accent1: "rgb(236, 208, 105)",
602
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
603
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
604
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
605
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
606
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
575
607
  }
576
608
  };
@@ -569,6 +569,38 @@ export const defaultHighContrastTheme = {
569
569
  caption: 'uppercase',
570
570
  legal: 'none'
571
571
  },
572
+ lightIllustrationColor: {
573
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
574
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
575
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
576
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
577
+ gray2: "rgb(10, 11, 15)",
578
+ gray3: "rgb(206, 210, 220)",
579
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
580
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
581
+ accent1: "rgb(255, 210, 0)",
582
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
583
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
584
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
585
+ invert: "rgb(10, 11, 14)",
586
+ invert2: "rgb(255, 255, 254)"
587
+ },
588
+ darkIllustrationColor: {
589
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
590
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
591
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
592
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
593
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
594
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
595
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
596
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
597
+ accent1: "rgb(236, 208, 105)",
598
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
599
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
600
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
601
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
602
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
603
+ },
572
604
  shadow: {
573
605
  elevation1: '0px 8px 12px rgba(0, 0, 0, 0.12)',
574
606
  elevation2: '0px 8px 24px rgba(0, 0, 0, 0.12)'
@@ -395,6 +395,38 @@ export const defaultTheme = {
395
395
  // Transparent
396
396
  transparent: "rgba(".concat(darkSpectrum.gray0, ",0)")
397
397
  },
398
+ lightIllustrationColor: {
399
+ primary: "rgb(".concat(lightSpectrum.blue60, ")"),
400
+ black: "rgb(".concat(lightSpectrum.gray100, ")"),
401
+ white: "rgb(".concat(lightSpectrum.gray0, ")"),
402
+ gray: "rgb(".concat(lightSpectrum.gray20, ")"),
403
+ gray2: "rgb(10, 11, 15)",
404
+ gray3: "rgb(206, 210, 220)",
405
+ positive: "rgb(".concat(lightSpectrum.green30, ")"),
406
+ negative: "rgb(".concat(lightSpectrum.red50, ")"),
407
+ accent1: "rgb(255, 210, 0)",
408
+ accent2: "rgb(".concat(lightSpectrum.teal15, ")"),
409
+ accent3: "rgb(".concat(lightSpectrum.orange40, ")"),
410
+ accent4: "rgb(".concat(lightSpectrum.blue20, ")"),
411
+ invert: "rgb(10, 11, 14)",
412
+ invert2: "rgb(255, 255, 254)"
413
+ },
414
+ darkIllustrationColor: {
415
+ primary: "rgb(".concat(darkSpectrum.blue70, ")"),
416
+ black: "rgb(".concat(darkSpectrum.gray0, ")"),
417
+ white: "rgb(".concat(darkSpectrum.gray100, ")"),
418
+ gray: "rgb(".concat(darkSpectrum.gray30, ")"),
419
+ gray2: "rgb(".concat(darkSpectrum.gray30, ")"),
420
+ gray3: "rgb(".concat(darkSpectrum.gray100, ")"),
421
+ positive: "rgb(".concat(darkSpectrum.green70, ")"),
422
+ negative: "rgb(".concat(darkSpectrum.red60, ")"),
423
+ accent1: "rgb(236, 208, 105)",
424
+ accent2: "rgb(".concat(darkSpectrum.teal80, ")"),
425
+ accent3: "rgb(".concat(darkSpectrum.orange60, ")"),
426
+ accent4: "rgb(".concat(darkSpectrum.blue80, ")"),
427
+ invert: "rgb(".concat(darkSpectrum.gray100, ")"),
428
+ invert2: "rgb(".concat(darkSpectrum.gray50, ")")
429
+ },
398
430
  space: {
399
431
  '0': 0,
400
432
  '0.25': 2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.73.0",
3
+ "version": "8.74.1",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,9 +207,9 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.73.0",
210
+ "@coinbase/cds-common": "^8.74.1",
211
211
  "@coinbase/cds-icons": "^5.16.0",
212
- "@coinbase/cds-illustrations": "^4.40.0",
212
+ "@coinbase/cds-illustrations": "^4.40.1",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",
214
214
  "@coinbase/cds-utils": "^2.3.5",
215
215
  "@floating-ui/react-dom": "^2.1.1",