@coinbase/cds-web 8.74.2 → 8.74.3

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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dts/illustrations/createIllustration.d.ts.map +1 -1
  3. package/esm/illustrations/createIllustration.js +7 -5
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.74.3 (5/14/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix: prevent flickering when illustration palette changes on web. [[#685](https://github.com/coinbase/cds/pull/685)]
16
+
11
17
  ## 8.74.2 (5/14/2026 PST)
12
18
 
13
19
  #### 🐞 Fixes
package/dts/illustrations/createIllustration.d.ts.map CHANGED
@@ -1 +1 @@
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
+ {"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,sEAwF1C"}
package/esm/illustrations/createIllustration.js CHANGED
@@ -36,21 +36,23 @@ export function createIllustration(variant, versionMap, svgEsmConfig) {
36
36
  var _svgEsmConfig$name;
37
37
  let cancelled = false;
38
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) {
39
+ if (applyTheme && themeableLoader) {
42
40
  themeableLoader().then(svg => {
43
41
  if (!cancelled) setSvgMarkup(svg);
44
42
  }).catch(err => {
45
43
  if (isDevelopment()) {
46
44
  console.error("Failed to load themeable illustration ".concat(name, ":"), err);
47
45
  }
46
+ // Clear stale markup on failure so we don't display the wrong illustration.
47
+ if (!cancelled) setSvgMarkup(null);
48
48
  });
49
49
  }
50
50
  return () => {
51
51
  cancelled = true;
52
52
  };
53
- }, [name, version, applyTheme, illustrationColor]);
53
+ // The SVG source is the same regardless of the active palette — illustrationColor
54
+ // only affects the CSS variables emitted by ThemeProvider, not the file to load.
55
+ }, [name, version, applyTheme]);
54
56
  const {
55
57
  width,
56
58
  height
@@ -60,7 +62,7 @@ export function createIllustration(variant, versionMap, svgEsmConfig) {
60
62
  if (scaleMultiplier) size = convertSizeWithMultiplier(size, scaleMultiplier);
61
63
  return size;
62
64
  }, [dimension, scaleMultiplier]);
63
- if (applyTheme) {
65
+ if (applyTheme && illustrationColor) {
64
66
  if (svgMarkup) {
65
67
  // The SVG retains its var(--illustration-*) tokens. ThemeProvider emits the resolved
66
68
  // --illustration-* CSS vars so the browser applies them through normal cascade.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.74.2",
3
+ "version": "8.74.3",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,7 +207,7 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.74.2",
210
+ "@coinbase/cds-common": "^8.74.3",
211
211
  "@coinbase/cds-icons": "^5.16.0",
212
212
  "@coinbase/cds-illustrations": "^4.40.1",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",