@wordpress/theme 0.8.1-next.v.202603102151.0 → 0.9.0

package/CHANGELOG.md

@@ -2,12 +2,19 @@
 
 ## Unreleased
 
+## 0.9.0 (2026-03-18)
+
+### New Features
+
+-   Added `no-token-fallback-values` stylelint rule that disallows manual fallback values for `--wpds-*` design tokens. Available as `@wordpress/theme/stylelint-plugins/no-token-fallback-values` ([#76415](https://github.com/WordPress/gutenberg/pull/76415)).
+
 ## 0.8.0 (2026-03-04)
 
 ### New Features
 
 -   Added PostCSS, esbuild, and Vite build plugins that inject fallback values for design system tokens (`--wpds-*`). Available as package exports: `@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks`, `@wordpress/theme/esbuild-plugins/esbuild-ds-token-fallbacks`, `@wordpress/theme/vite-plugins/vite-ds-token-fallbacks` ([#75589](https://github.com/WordPress/gutenberg/pull/75589)).
 -   Add `--wpds-cursor-control` design token for interactive non-link elements ([#75697](https://github.com/WordPress/gutenberg/pull/75697)).
+-   Add `--wpds-dimension-surface-width-*` design tokens for component width constraints.
 
 ## 0.7.0 (2026-02-18)
 

package/README.md

@@ -204,11 +204,13 @@ This package provides Stylelint plugins to help enforce consistent usage of desi
 {
 	"plugins": [
 		"@wordpress/theme/stylelint-plugins/no-unknown-ds-tokens",
-		"@wordpress/theme/stylelint-plugins/no-setting-wpds-custom-properties"
+		"@wordpress/theme/stylelint-plugins/no-setting-wpds-custom-properties",
+		"@wordpress/theme/stylelint-plugins/no-token-fallback-values"
 	],
 	"rules": {
 		"plugin-wpds/no-unknown-ds-tokens": true,
-		"plugin-wpds/no-setting-wpds-custom-properties": true
+		"plugin-wpds/no-setting-wpds-custom-properties": true,
+		"plugin-wpds/no-token-fallback-values": true
 	}
 }
 ```
@@ -250,6 +252,27 @@ This rule reports an error when a CSS declaration sets (defines) a custom proper
 }
 ```
 
+### `plugin-wpds/no-token-fallback-values`
+
+This rule reports an error when a `var()` call for a `--wpds-*` token includes a manual fallback value. Fallback values for design tokens are injected automatically at build time by the [build plugins](#build-plugins), so manual fallbacks in source are redundant and can drift out of sync with the token definitions.
+
+```css
+/* ✗ Error: Do not add a fallback value for Design System token '--wpds-color-fg-content-neutral' */
+.example {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+}
+
+/* ✓ OK */
+.example {
+	color: var(--wpds-color-fg-content-neutral);
+}
+
+/* ✓ OK: Non-wpds custom properties are not checked */
+.example {
+	color: var(--my-custom-color, red);
+}
+```
+
 ## Build Plugins
 
 This package provides build plugins that inject fallback values into bare `var(--wpds-*)` references at build time. This ensures components render correctly even when a `ThemeProvider` or design tokens stylesheet is not present — for example, `var(--wpds-color-fg-content-neutral)` becomes `var(--wpds-color-fg-content-neutral, #1e1e1e)`.

package/build/esbuild-plugins/esbuild-ds-token-fallbacks.cjs

@@ -47,7 +47,7 @@ var plugin = {
       }
       const ext = args.path.match(/(\.[^.]+)$/)?.[1] || ".js";
       return {
-        contents: (0, import_ds_token_fallbacks.addFallbackToVar)(source),
+        contents: (0, import_ds_token_fallbacks.addFallbackToVar)(source, { escapeQuotes: true }),
         loader: LOADER_MAP[ext] || "jsx"
       };
     });

package/build/esbuild-plugins/esbuild-ds-token-fallbacks.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/esbuild-plugins/esbuild-ds-token-fallbacks.mjs"],
-  "sourcesContent": ["import { readFile } from 'fs/promises';\nimport { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\nconst LOADER_MAP = {\n\t'.js': 'jsx',\n\t'.jsx': 'jsx',\n\t'.ts': 'tsx',\n\t'.tsx': 'tsx',\n\t'.mjs': 'jsx',\n\t'.mts': 'tsx',\n\t'.cjs': 'jsx',\n\t'.cts': 'tsx',\n};\n\n/**\n * esbuild plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = {\n\tname: 'ds-token-fallbacks-js',\n\tsetup( build ) {\n\t\tbuild.onLoad( { filter: /\\.[mc]?[jt]sx?$/ }, async ( args ) => {\n\t\t\t// Skip node_modules.\n\t\t\tif ( args.path.includes( 'node_modules' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst source = await readFile( args.path, 'utf8' );\n\n\t\t\tif ( ! source.includes( '--wpds-' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst ext = args.path.match( /(\\.[^.]+)$/ )?.[ 1 ] || '.js';\n\n\t\t\treturn {\n\t\t\t\tcontents: addFallbackToVar( source ),\n\t\t\t\tloader: LOADER_MAP[ ext ] || 'jsx',\n\t\t\t};\n\t\t} );\n\t},\n};\n\nexport default plugin;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,gCAAiC;AAEjC,IAAM,aAAa;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACT;AASA,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,MAAO,OAAQ;AACd,UAAM,OAAQ,EAAE,QAAQ,kBAAkB,GAAG,OAAQ,SAAU;AAE9D,UAAK,KAAK,KAAK,SAAU,cAAe,GAAI;AAC3C,eAAO;AAAA,MACR;AAEA,YAAM,SAAS,UAAM,0BAAU,KAAK,MAAM,MAAO;AAEjD,UAAK,CAAE,OAAO,SAAU,SAAU,GAAI;AACrC,eAAO;AAAA,MACR;AAEA,YAAM,MAAM,KAAK,KAAK,MAAO,YAAa,IAAK,CAAE,KAAK;AAEtD,aAAO;AAAA,QACN,cAAU,4CAAkB,MAAO;AAAA,QACnC,QAAQ,WAAY,GAAI,KAAK;AAAA,MAC9B;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,IAAO,qCAAQ;",
+  "sourcesContent": ["import { readFile } from 'fs/promises';\nimport { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\nconst LOADER_MAP = {\n\t'.js': 'jsx',\n\t'.jsx': 'jsx',\n\t'.ts': 'tsx',\n\t'.tsx': 'tsx',\n\t'.mjs': 'jsx',\n\t'.mts': 'tsx',\n\t'.cjs': 'jsx',\n\t'.cts': 'tsx',\n};\n\n/**\n * esbuild plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = {\n\tname: 'ds-token-fallbacks-js',\n\tsetup( build ) {\n\t\tbuild.onLoad( { filter: /\\.[mc]?[jt]sx?$/ }, async ( args ) => {\n\t\t\t// Skip node_modules.\n\t\t\tif ( args.path.includes( 'node_modules' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst source = await readFile( args.path, 'utf8' );\n\n\t\t\tif ( ! source.includes( '--wpds-' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst ext = args.path.match( /(\\.[^.]+)$/ )?.[ 1 ] || '.js';\n\n\t\t\treturn {\n\t\t\t\tcontents: addFallbackToVar( source, { escapeQuotes: true } ),\n\t\t\t\tloader: LOADER_MAP[ ext ] || 'jsx',\n\t\t\t};\n\t\t} );\n\t},\n};\n\nexport default plugin;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AACzB,gCAAiC;AAEjC,IAAM,aAAa;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACT;AASA,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,MAAO,OAAQ;AACd,UAAM,OAAQ,EAAE,QAAQ,kBAAkB,GAAG,OAAQ,SAAU;AAE9D,UAAK,KAAK,KAAK,SAAU,cAAe,GAAI;AAC3C,eAAO;AAAA,MACR;AAEA,YAAM,SAAS,UAAM,0BAAU,KAAK,MAAM,MAAO;AAEjD,UAAK,CAAE,OAAO,SAAU,SAAU,GAAI;AACrC,eAAO;AAAA,MACR;AAEA,YAAM,MAAM,KAAK,KAAK,MAAO,YAAa,IAAK,CAAE,KAAK;AAEtD,aAAO;AAAA,QACN,cAAU,4CAAkB,QAAQ,EAAE,cAAc,KAAK,CAAE;AAAA,QAC3D,QAAQ,WAAY,GAAI,KAAK;AAAA,MAC9B;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,IAAO,qCAAQ;",
   "names": []
 }

package/build/postcss-plugins/add-fallback-to-var.cjs

@@ -22,12 +22,18 @@ __export(add_fallback_to_var_exports, {
   addFallbackToVar: () => addFallbackToVar
 });
 module.exports = __toCommonJS(add_fallback_to_var_exports);
-function addFallbackToVar(cssValue, tokenFallbacks) {
+function addFallbackToVar(cssValue, tokenFallbacks, { escapeQuotes = false } = {}) {
   return cssValue.replace(
     /var\(\s*(--wpds-[\w-]+)\s*\)/g,
     (match, tokenName) => {
-      const fallback = tokenFallbacks[tokenName];
-      return fallback !== void 0 ? `var(${tokenName}, ${fallback})` : match;
+      let fallback = tokenFallbacks[tokenName];
+      if (fallback === void 0) {
+        return match;
+      }
+      if (escapeQuotes) {
+        fallback = fallback.replaceAll('"', '\\"').replaceAll("'", "\\'");
+      }
+      return `var(${tokenName}, ${fallback})`;
     }
   );
 }

package/build/postcss-plugins/add-fallback-to-var.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/postcss-plugins/add-fallback-to-var.ts"],
-  "sourcesContent": ["/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the provided token fallback map.\n *\n * Existing fallbacks (i.e. `var()` calls that already contain a comma)\n * are left untouched, making the function safe to run multiple times\n * (idempotent).\n *\n * NOTE: The regex and replacement logic here is mirrored in\n * `ds-token-fallbacks.mjs`. If you update one, update the other to match.\n *\n * @param cssValue       A CSS declaration value.\n * @param tokenFallbacks Map of CSS variable names to their fallback expressions.\n * @return The value with fallbacks injected.\n */\nexport function addFallbackToVar(\n\tcssValue: string,\n\ttokenFallbacks: Record< string, string >\n): string {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName: string ) => {\n\t\t\tconst fallback = tokenFallbacks[ tokenName ];\n\t\t\treturn fallback !== undefined\n\t\t\t\t? `var(${ tokenName }, ${ fallback })`\n\t\t\t\t: match;\n\t\t}\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeO,SAAS,iBACf,UACA,gBACS;AACT,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAuB;AAC/B,YAAM,WAAW,eAAgB,SAAU;AAC3C,aAAO,aAAa,SACjB,OAAQ,SAAU,KAAM,QAAS,MACjC;AAAA,IACJ;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the provided token fallback map.\n *\n * Existing fallbacks (i.e. `var()` calls that already contain a comma)\n * are left untouched, making the function safe to run multiple times\n * (idempotent).\n *\n * NOTE: The regex and replacement logic here is mirrored in\n * `ds-token-fallbacks.mjs`. If you update one, update the other to match.\n *\n * @param cssValue             A CSS declaration value.\n * @param tokenFallbacks       Map of CSS variable names to their fallback expressions.\n * @param options              Options.\n * @param options.escapeQuotes When true, escape `\"` and `'` in fallback values.\n *                             Use this when the input is JS/TS source so that\n *                             injected quotes don't break string literals.\n * @return                     The value with fallbacks injected.\n */\nexport function addFallbackToVar(\n\tcssValue: string,\n\ttokenFallbacks: Record< string, string >,\n\t{ escapeQuotes = false }: { escapeQuotes?: boolean } = {}\n): string {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName: string ) => {\n\t\t\tlet fallback = tokenFallbacks[ tokenName ];\n\t\t\tif ( fallback === undefined ) {\n\t\t\t\treturn match;\n\t\t\t}\n\t\t\tif ( escapeQuotes ) {\n\t\t\t\tfallback = fallback\n\t\t\t\t\t.replaceAll( '\"', '\\\\\"' )\n\t\t\t\t\t.replaceAll( \"'\", \"\\\\'\" );\n\t\t\t}\n\t\t\treturn `var(${ tokenName }, ${ fallback })`;\n\t\t}\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,SAAS,iBACf,UACA,gBACA,EAAE,eAAe,MAAM,IAAgC,CAAC,GAC/C;AACT,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAuB;AAC/B,UAAI,WAAW,eAAgB,SAAU;AACzC,UAAK,aAAa,QAAY;AAC7B,eAAO;AAAA,MACR;AACA,UAAK,cAAe;AACnB,mBAAW,SACT,WAAY,KAAK,KAAM,EACvB,WAAY,KAAK,KAAM;AAAA,MAC1B;AACA,aAAO,OAAQ,SAAU,KAAM,QAAS;AAAA,IACzC;AAAA,EACD;AACD;",
   "names": []
 }

package/build/postcss-plugins/ds-token-fallbacks.cjs

@@ -34,12 +34,18 @@ __export(ds_token_fallbacks_exports, {
 module.exports = __toCommonJS(ds_token_fallbacks_exports);
 var import_design_token_fallbacks = __toESM(require("../prebuilt/js/design-token-fallbacks.mjs"), 1);
 var tokenFallbacks = import_design_token_fallbacks.default;
-function addFallbackToVar(cssValue) {
+function addFallbackToVar(cssValue, { escapeQuotes = false } = {}) {
   return cssValue.replace(
     /var\(\s*(--wpds-[\w-]+)\s*\)/g,
     (match, tokenName) => {
-      const fallback = tokenFallbacks[tokenName];
-      return fallback !== void 0 ? `var(${tokenName}, ${fallback})` : match;
+      let fallback = tokenFallbacks[tokenName];
+      if (fallback === void 0) {
+        return match;
+      }
+      if (escapeQuotes) {
+        fallback = fallback.replaceAll('"', '\\"').replaceAll("'", "\\'");
+      }
+      return `var(${tokenName}, ${fallback})`;
     }
   );
 }

package/build/postcss-plugins/ds-token-fallbacks.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/postcss-plugins/ds-token-fallbacks.mjs"],
-  "sourcesContent": ["import _tokenFallbacks from '../prebuilt/js/design-token-fallbacks.mjs';\n\n/** @type {Record<string, string>} */\nconst tokenFallbacks = _tokenFallbacks;\n\n/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the generated token fallback map.\n *\n * Existing fallbacks (i.e. var() calls that already contain a comma) are\n * left untouched, making the function safe to run multiple times.\n *\n * NOTE: The regex and replacement logic here mirrors `add-fallback-to-var.ts`.\n * If you update one, update the other to match.\n *\n * @param {string} cssValue A CSS declaration value.\n * @return {string} The value with fallbacks injected.\n */\nexport function addFallbackToVar( cssValue ) {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName ) => {\n\t\t\tconst fallback = tokenFallbacks[ tokenName ];\n\t\t\treturn fallback !== undefined\n\t\t\t\t? `var(${ tokenName }, ${ fallback })`\n\t\t\t\t: match;\n\t\t}\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA4B;AAG5B,IAAM,iBAAiB,8BAAAA;AAehB,SAAS,iBAAkB,UAAW;AAC5C,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAe;AACvB,YAAM,WAAW,eAAgB,SAAU;AAC3C,aAAO,aAAa,SACjB,OAAQ,SAAU,KAAM,QAAS,MACjC;AAAA,IACJ;AAAA,EACD;AACD;",
+  "sourcesContent": ["import _tokenFallbacks from '../prebuilt/js/design-token-fallbacks.mjs';\n\n/** @type {Record<string, string>} */\nconst tokenFallbacks = _tokenFallbacks;\n\n/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the generated token fallback map.\n *\n * Existing fallbacks (i.e. var() calls that already contain a comma) are\n * left untouched, making the function safe to run multiple times.\n *\n * NOTE: The regex and replacement logic here mirrors `add-fallback-to-var.ts`.\n * If you update one, update the other to match.\n *\n * @param {string}  cssValue               A CSS declaration value.\n * @param {Object}  [options]              Options.\n * @param {boolean} [options.escapeQuotes] When true, escape `\"` and `'` in\n *                                         fallback values. Use this when the\n *                                         input is JS/TS source so that\n *                                         injected quotes don't break string\n *                                         literals. JS will unescape them at\n *                                         parse time, so the browser's CSS\n *                                         engine still sees the correct value.\n * @return {string}                        The value with fallbacks injected.\n */\nexport function addFallbackToVar( cssValue, { escapeQuotes = false } = {} ) {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName ) => {\n\t\t\tlet fallback = tokenFallbacks[ tokenName ];\n\t\t\tif ( fallback === undefined ) {\n\t\t\t\treturn match;\n\t\t\t}\n\t\t\tif ( escapeQuotes ) {\n\t\t\t\tfallback = fallback\n\t\t\t\t\t.replaceAll( '\"', '\\\\\"' )\n\t\t\t\t\t.replaceAll( \"'\", \"\\\\'\" );\n\t\t\t}\n\t\t\treturn `var(${ tokenName }, ${ fallback })`;\n\t\t}\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAA4B;AAG5B,IAAM,iBAAiB,8BAAAA;AAuBhB,SAAS,iBAAkB,UAAU,EAAE,eAAe,MAAM,IAAI,CAAC,GAAI;AAC3E,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAe;AACvB,UAAI,WAAW,eAAgB,SAAU;AACzC,UAAK,aAAa,QAAY;AAC7B,eAAO;AAAA,MACR;AACA,UAAK,cAAe;AACnB,mBAAW,SACT,WAAY,KAAK,KAAM,EACvB,WAAY,KAAK,KAAM;AAAA,MAC1B;AACA,aAAO,OAAQ,SAAU,KAAM,QAAS;AAAA,IACzC;AAAA,EACD;AACD;",
   "names": ["_tokenFallbacks"]
 }

package/build/prebuilt/js/design-token-fallbacks.cjs

@@ -136,6 +136,12 @@ var design_token_fallbacks_default = {
   "--wpds-dimension-padding-sm": "8px",
   "--wpds-dimension-padding-xl": "20px",
   "--wpds-dimension-padding-xs": "4px",
+  "--wpds-dimension-surface-width-2xl": "960px",
+  "--wpds-dimension-surface-width-lg": "560px",
+  "--wpds-dimension-surface-width-md": "400px",
+  "--wpds-dimension-surface-width-sm": "320px",
+  "--wpds-dimension-surface-width-xl": "720px",
+  "--wpds-dimension-surface-width-xs": "240px",
   "--wpds-elevation-lg": "0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005",
   "--wpds-elevation-md": "0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005",
   "--wpds-elevation-sm": "0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005",

package/build/prebuilt/js/design-token-fallbacks.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/prebuilt/js/design-token-fallbacks.mjs"],
-  "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': 'default',\n\t'--wpds-dimension-base': '4px',\n\t'--wpds-dimension-gap-2xl': '32px',\n\t'--wpds-dimension-gap-3xl': '40px',\n\t'--wpds-dimension-gap-lg': '16px',\n\t'--wpds-dimension-gap-md': '12px',\n\t'--wpds-dimension-gap-sm': '8px',\n\t'--wpds-dimension-gap-xl': '24px',\n\t'--wpds-dimension-gap-xs': '4px',\n\t'--wpds-dimension-padding-2xl': '24px',\n\t'--wpds-dimension-padding-3xl': '32px',\n\t'--wpds-dimension-padding-lg': '16px',\n\t'--wpds-dimension-padding-md': '12px',\n\t'--wpds-dimension-padding-sm': '8px',\n\t'--wpds-dimension-padding-xl': '20px',\n\t'--wpds-dimension-padding-xs': '4px',\n\t'--wpds-elevation-lg':\n\t\t'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',\n\t'--wpds-elevation-md':\n\t\t'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',\n\t'--wpds-elevation-sm':\n\t\t'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',\n\t'--wpds-elevation-xs':\n\t\t'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',\n\t'--wpds-font-family-body':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-heading':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-mono': '\"Menlo\", \"Consolas\", monaco, monospace',\n\t'--wpds-font-line-height-2xl': '40px',\n\t'--wpds-font-line-height-lg': '28px',\n\t'--wpds-font-line-height-md': '24px',\n\t'--wpds-font-line-height-sm': '20px',\n\t'--wpds-font-line-height-xl': '32px',\n\t'--wpds-font-line-height-xs': '16px',\n\t'--wpds-font-size-2xl': '32px',\n\t'--wpds-font-size-lg': '15px',\n\t'--wpds-font-size-md': '13px',\n\t'--wpds-font-size-sm': '12px',\n\t'--wpds-font-size-xl': '20px',\n\t'--wpds-font-size-xs': '11px',\n\t'--wpds-font-weight-medium': '499',\n\t'--wpds-font-weight-regular': '400',\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'--wpds-border-radius-lg': '8px',\n\t'--wpds-border-radius-md': '4px',\n\t'--wpds-border-radius-sm': '2px',\n\t'--wpds-border-radius-xs': '1px',\n\t'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',\n\t'--wpds-border-width-lg': '8px',\n\t'--wpds-border-width-md': '4px',\n\t'--wpds-border-width-sm': '2px',\n\t'--wpds-border-width-xs': '1px',\n\t'--wpds-color-bg-interactive-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-interactive-brand-strong-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',\n\t'--wpds-color-bg-interactive-brand-weak': '#00000000',\n\t'--wpds-color-bg-interactive-brand-weak-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',\n\t'--wpds-color-bg-interactive-error': '#00000000',\n\t'--wpds-color-bg-interactive-error-active': '#fff6f4',\n\t'--wpds-color-bg-interactive-error-strong': '#cc1818',\n\t'--wpds-color-bg-interactive-error-strong-active': '#b90000',\n\t'--wpds-color-bg-interactive-error-weak': '#00000000',\n\t'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',\n\t'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',\n\t'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',\n\t'--wpds-color-bg-interactive-neutral-weak': '#00000000',\n\t'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',\n\t'--wpds-color-bg-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',\n\t'--wpds-color-bg-surface-caution': '#fee994',\n\t'--wpds-color-bg-surface-caution-weak': '#fff9c9',\n\t'--wpds-color-bg-surface-error': '#f6e6e3',\n\t'--wpds-color-bg-surface-error-weak': '#fff6f4',\n\t'--wpds-color-bg-surface-info': '#deebfa',\n\t'--wpds-color-bg-surface-info-weak': '#f2f9ff',\n\t'--wpds-color-bg-surface-neutral': '#f8f8f8',\n\t'--wpds-color-bg-surface-neutral-strong': '#ffffff',\n\t'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',\n\t'--wpds-color-bg-surface-success': '#c5f7cc',\n\t'--wpds-color-bg-surface-success-weak': '#eaffed',\n\t'--wpds-color-bg-surface-warning': '#fde6bd',\n\t'--wpds-color-bg-surface-warning-weak': '#fff7e0',\n\t'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',\n\t'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',\n\t'--wpds-color-bg-track-neutral': '#d8d8d8',\n\t'--wpds-color-bg-track-neutral-weak': '#e0e0e0',\n\t'--wpds-color-fg-content-caution': '#281d00',\n\t'--wpds-color-fg-content-caution-weak': '#826a00',\n\t'--wpds-color-fg-content-error': '#470000',\n\t'--wpds-color-fg-content-error-weak': '#cc1818',\n\t'--wpds-color-fg-content-info': '#001b4f',\n\t'--wpds-color-fg-content-info-weak': '#006bd7',\n\t'--wpds-color-fg-content-neutral': '#1e1e1e',\n\t'--wpds-color-fg-content-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-content-success': '#002900',\n\t'--wpds-color-fg-content-success-weak': '#007f30',\n\t'--wpds-color-fg-content-warning': '#2e1900',\n\t'--wpds-color-fg-content-warning-weak': '#926300',\n\t'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-active':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-fg-interactive-brand-strong': '#fff',\n\t'--wpds-color-fg-interactive-brand-strong-active': '#fff',\n\t'--wpds-color-fg-interactive-error': '#cc1818',\n\t'--wpds-color-fg-interactive-error-active': '#cc1818',\n\t'--wpds-color-fg-interactive-error-strong': '#f2efef',\n\t'--wpds-color-fg-interactive-error-strong-active': '#f2efef',\n\t'--wpds-color-fg-interactive-neutral': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',\n\t'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',\n\t'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',\n\t'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-interactive-brand-active':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',\n\t'--wpds-color-stroke-interactive-error': '#cc1818',\n\t'--wpds-color-stroke-interactive-error-active': '#9d0000',\n\t'--wpds-color-stroke-interactive-error-strong': '#cc1818',\n\t'--wpds-color-stroke-interactive-neutral': '#8a8a8a',\n\t'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',\n\t'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',\n\t'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',\n\t'--wpds-color-stroke-surface-brand':\n\t\t'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',\n\t'--wpds-color-stroke-surface-brand-strong':\n\t\t'var(--wp-admin-theme-color, #3858e9)',\n\t'--wpds-color-stroke-surface-error': '#daa39b',\n\t'--wpds-color-stroke-surface-error-strong': '#cc1818',\n\t'--wpds-color-stroke-surface-info': '#9fbcdc',\n\t'--wpds-color-stroke-surface-info-strong': '#006bd7',\n\t'--wpds-color-stroke-surface-neutral': '#d8d8d8',\n\t'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',\n\t'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',\n\t'--wpds-color-stroke-surface-success': '#8ac894',\n\t'--wpds-color-stroke-surface-success-strong': '#007f30',\n\t'--wpds-color-stroke-surface-warning': '#d0b381',\n\t'--wpds-color-stroke-surface-warning-strong': '#926300',\n\t'--wpds-cursor-control': 'default',\n\t'--wpds-dimension-base': '4px',\n\t'--wpds-dimension-gap-2xl': '32px',\n\t'--wpds-dimension-gap-3xl': '40px',\n\t'--wpds-dimension-gap-lg': '16px',\n\t'--wpds-dimension-gap-md': '12px',\n\t'--wpds-dimension-gap-sm': '8px',\n\t'--wpds-dimension-gap-xl': '24px',\n\t'--wpds-dimension-gap-xs': '4px',\n\t'--wpds-dimension-padding-2xl': '24px',\n\t'--wpds-dimension-padding-3xl': '32px',\n\t'--wpds-dimension-padding-lg': '16px',\n\t'--wpds-dimension-padding-md': '12px',\n\t'--wpds-dimension-padding-sm': '8px',\n\t'--wpds-dimension-padding-xl': '20px',\n\t'--wpds-dimension-padding-xs': '4px',\n\t'--wpds-dimension-surface-width-2xl': '960px',\n\t'--wpds-dimension-surface-width-lg': '560px',\n\t'--wpds-dimension-surface-width-md': '400px',\n\t'--wpds-dimension-surface-width-sm': '320px',\n\t'--wpds-dimension-surface-width-xl': '720px',\n\t'--wpds-dimension-surface-width-xs': '240px',\n\t'--wpds-elevation-lg':\n\t\t'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',\n\t'--wpds-elevation-md':\n\t\t'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',\n\t'--wpds-elevation-sm':\n\t\t'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',\n\t'--wpds-elevation-xs':\n\t\t'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',\n\t'--wpds-font-family-body':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-heading':\n\t\t'-apple-system, system-ui, \"Segoe UI\", \"Roboto\", \"Oxygen-Sans\", \"Ubuntu\", \"Cantarell\", \"Helvetica Neue\", sans-serif',\n\t'--wpds-font-family-mono': '\"Menlo\", \"Consolas\", monaco, monospace',\n\t'--wpds-font-line-height-2xl': '40px',\n\t'--wpds-font-line-height-lg': '28px',\n\t'--wpds-font-line-height-md': '24px',\n\t'--wpds-font-line-height-sm': '20px',\n\t'--wpds-font-line-height-xl': '32px',\n\t'--wpds-font-line-height-xs': '16px',\n\t'--wpds-font-size-2xl': '32px',\n\t'--wpds-font-size-lg': '15px',\n\t'--wpds-font-size-md': '13px',\n\t'--wpds-font-size-sm': '12px',\n\t'--wpds-font-size-xl': '20px',\n\t'--wpds-font-size-xs': '11px',\n\t'--wpds-font-weight-medium': '499',\n\t'--wpds-font-weight-regular': '400',\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build/prebuilt/js/design-tokens.cjs

@@ -136,6 +136,12 @@ var design_tokens_default = [
   "--wpds-dimension-gap-xl",
   "--wpds-dimension-gap-2xl",
   "--wpds-dimension-gap-3xl",
+  "--wpds-dimension-surface-width-xs",
+  "--wpds-dimension-surface-width-sm",
+  "--wpds-dimension-surface-width-md",
+  "--wpds-dimension-surface-width-lg",
+  "--wpds-dimension-surface-width-xl",
+  "--wpds-dimension-surface-width-2xl",
   "--wpds-elevation-xs",
   "--wpds-elevation-sm",
   "--wpds-elevation-md",

package/build/prebuilt/js/design-tokens.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/prebuilt/js/design-tokens.mjs"],
-  "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-xs',\n\t'--wpds-border-radius-sm',\n\t'--wpds-border-radius-md',\n\t'--wpds-border-radius-lg',\n\t'--wpds-border-width-xs',\n\t'--wpds-border-width-sm',\n\t'--wpds-border-width-md',\n\t'--wpds-border-width-lg',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-neutral-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-cursor-control',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-xs',\n\t'--wpds-dimension-padding-sm',\n\t'--wpds-dimension-padding-md',\n\t'--wpds-dimension-padding-lg',\n\t'--wpds-dimension-padding-xl',\n\t'--wpds-dimension-padding-2xl',\n\t'--wpds-dimension-padding-3xl',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-dimension-gap-2xl',\n\t'--wpds-dimension-gap-3xl',\n\t'--wpds-elevation-xs',\n\t'--wpds-elevation-sm',\n\t'--wpds-elevation-md',\n\t'--wpds-elevation-lg',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-xs',\n\t'--wpds-font-size-sm',\n\t'--wpds-font-size-md',\n\t'--wpds-font-size-lg',\n\t'--wpds-font-size-xl',\n\t'--wpds-font-size-2xl',\n\t'--wpds-font-line-height-xs',\n\t'--wpds-font-line-height-sm',\n\t'--wpds-font-line-height-md',\n\t'--wpds-font-line-height-lg',\n\t'--wpds-font-line-height-xl',\n\t'--wpds-font-line-height-2xl',\n\t'--wpds-font-weight-regular',\n\t'--wpds-font-weight-medium',\n];\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
+  "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-xs',\n\t'--wpds-border-radius-sm',\n\t'--wpds-border-radius-md',\n\t'--wpds-border-radius-lg',\n\t'--wpds-border-width-xs',\n\t'--wpds-border-width-sm',\n\t'--wpds-border-width-md',\n\t'--wpds-border-width-lg',\n\t'--wpds-border-width-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-neutral-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-cursor-control',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-xs',\n\t'--wpds-dimension-padding-sm',\n\t'--wpds-dimension-padding-md',\n\t'--wpds-dimension-padding-lg',\n\t'--wpds-dimension-padding-xl',\n\t'--wpds-dimension-padding-2xl',\n\t'--wpds-dimension-padding-3xl',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-dimension-gap-2xl',\n\t'--wpds-dimension-gap-3xl',\n\t'--wpds-dimension-surface-width-xs',\n\t'--wpds-dimension-surface-width-sm',\n\t'--wpds-dimension-surface-width-md',\n\t'--wpds-dimension-surface-width-lg',\n\t'--wpds-dimension-surface-width-xl',\n\t'--wpds-dimension-surface-width-2xl',\n\t'--wpds-elevation-xs',\n\t'--wpds-elevation-sm',\n\t'--wpds-elevation-md',\n\t'--wpds-elevation-lg',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-xs',\n\t'--wpds-font-size-sm',\n\t'--wpds-font-size-md',\n\t'--wpds-font-size-lg',\n\t'--wpds-font-size-xl',\n\t'--wpds-font-size-2xl',\n\t'--wpds-font-line-height-xs',\n\t'--wpds-font-line-height-sm',\n\t'--wpds-font-line-height-md',\n\t'--wpds-font-line-height-lg',\n\t'--wpds-font-line-height-xl',\n\t'--wpds-font-line-height-2xl',\n\t'--wpds-font-weight-regular',\n\t'--wpds-font-weight-medium',\n];\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
   "names": []
 }

package/build/prebuilt/ts/token-types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/prebuilt/ts/token-types.ts"],
-  "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.\n * Do not edit this file directly.\n */\n\n/**\n * Size scale for padding tokens.\n */\nexport type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\n/**\n * Size scale for gap tokens.\n */\nexport type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\n/**\n * Size scale for border radius tokens.\n */\nexport type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for border width tokens.\n */\nexport type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'focus';\n\n/**\n * Target elements that tokens can be applied to.\n */\nexport type Target =\n\t| 'surface'\n\t| 'interactive'\n\t| 'track'\n\t| 'thumb'\n\t| 'content'\n\t| 'focus';\n\n/**\n * Background color variants for surface elements.\n */\nexport type SurfaceBackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Background color variants for interactive elements.\n */\nexport type InteractiveBackgroundColor =\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand-strong'\n\t| 'brand-weak'\n\t| 'error'\n\t| 'error-strong'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for content text and icons.\n */\nexport type ContentForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for interactive element text and icons.\n */\nexport type InteractiveForegroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for surface borders.\n */\nexport type SurfaceStrokeColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'success'\n\t| 'success-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'warning'\n\t| 'warning-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for interactive element borders.\n */\nexport type InteractiveStrokeColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Foreground color variants for text elements.\n */\nexport type ForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak'\n\t| 'neutral-active'\n\t| 'neutral-disabled'\n\t| 'neutral-strong'\n\t| 'neutral-strong-active'\n\t| 'neutral-strong-disabled'\n\t| 'neutral-weak-disabled'\n\t| 'brand'\n\t| 'brand-active'\n\t| 'brand-strong'\n\t| 'brand-strong-active'\n\t| 'error-active'\n\t| 'error-strong'\n\t| 'error-strong-active';\n\n/**\n * Font family variants.\n */\nexport type FontFamily = 'heading' | 'body' | 'mono';\n\n/**\n * Font size scale.\n */\nexport type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Font weight variants.\n */\nexport type FontWeight = 'regular' | 'medium';\n\n/**\n * Line height scale.\n */\nexport type LineHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n"],
+  "sourcesContent": ["/*\n * This file is generated by the @wordpress/terrazzo-plugin-typescript-types plugin.\n * Do not edit this file directly.\n */\n\n/**\n * Size scale for padding tokens.\n */\nexport type PaddingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\n/**\n * Size scale for gap tokens.\n */\nexport type GapSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\n/**\n * Size scale for surface width tokens.\n */\nexport type SurfaceWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Size scale for border radius tokens.\n */\nexport type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Size scale for border width tokens.\n */\nexport type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'focus';\n\n/**\n * Target elements that tokens can be applied to.\n */\nexport type Target =\n\t| 'surface'\n\t| 'interactive'\n\t| 'track'\n\t| 'thumb'\n\t| 'content'\n\t| 'focus';\n\n/**\n * Background color variants for surface elements.\n */\nexport type SurfaceBackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Background color variants for interactive elements.\n */\nexport type InteractiveBackgroundColor =\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand-strong'\n\t| 'brand-weak'\n\t| 'error'\n\t| 'error-strong'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for content text and icons.\n */\nexport type ContentForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\n/**\n * Foreground color variants for interactive element text and icons.\n */\nexport type InteractiveForegroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for surface borders.\n */\nexport type SurfaceStrokeColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'success'\n\t| 'success-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'warning'\n\t| 'warning-strong'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Stroke color variants for interactive element borders.\n */\nexport type InteractiveStrokeColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'brand'\n\t| 'error'\n\t| 'error-strong';\n\n/**\n * Foreground color variants for text elements.\n */\nexport type ForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak'\n\t| 'neutral-active'\n\t| 'neutral-disabled'\n\t| 'neutral-strong'\n\t| 'neutral-strong-active'\n\t| 'neutral-strong-disabled'\n\t| 'neutral-weak-disabled'\n\t| 'brand'\n\t| 'brand-active'\n\t| 'brand-strong'\n\t| 'brand-strong-active'\n\t| 'error-active'\n\t| 'error-strong'\n\t| 'error-strong-active';\n\n/**\n * Font family variants.\n */\nexport type FontFamily = 'heading' | 'body' | 'mono';\n\n/**\n * Font size scale.\n */\nexport type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Font weight variants.\n */\nexport type FontWeight = 'regular' | 'medium';\n\n/**\n * Line height scale.\n */\nexport type LineHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n"],
   "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build/stylelint-plugins/no-token-fallback-values.cjs

@@ -0,0 +1,73 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/stylelint-plugins/no-token-fallback-values.mjs
+var no_token_fallback_values_exports = {};
+__export(no_token_fallback_values_exports, {
+  default: () => no_token_fallback_values_default
+});
+module.exports = __toCommonJS(no_token_fallback_values_exports);
+var import_stylelint = __toESM(require("stylelint"), 1);
+var {
+  createPlugin,
+  utils: { report, ruleMessages, validateOptions }
+} = import_stylelint.default;
+var ruleName = "plugin-wpds/no-token-fallback-values";
+var varWithFallbackRegex = /var\(\s*(--wpds-[\w-]+)\s*,/g;
+var messages = ruleMessages(ruleName, {
+  rejected: (tokenName) => `Do not add a fallback value for Design System token '${tokenName}'. Fallbacks are injected automatically at build time.`
+});
+var ruleFunction = (primary) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+      possible: [true]
+    });
+    if (!validOptions) {
+      return;
+    }
+    root.walkDecls((ruleNode) => {
+      const { value } = ruleNode;
+      let match;
+      varWithFallbackRegex.lastIndex = 0;
+      while ((match = varWithFallbackRegex.exec(value)) !== null) {
+        report({
+          message: messages.rejected(match[1]),
+          node: ruleNode,
+          word: match[0],
+          result,
+          ruleName
+        });
+      }
+    });
+  };
+};
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+var no_token_fallback_values_default = createPlugin(ruleName, ruleFunction);
+//# sourceMappingURL=no-token-fallback-values.cjs.map

package/build/stylelint-plugins/no-token-fallback-values.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stylelint-plugins/no-token-fallback-values.mjs"],
+  "sourcesContent": ["import stylelint from 'stylelint';\n\nconst {\n\tcreatePlugin,\n\tutils: { report, ruleMessages, validateOptions },\n} = stylelint;\n\nconst ruleName = 'plugin-wpds/no-token-fallback-values';\n\n/**\n * Matches `var(--wpds-<name>,` \u2014 the comma signals a fallback value.\n * Captures the token name (e.g. `--wpds-color-fg-content-neutral`).\n */\nconst varWithFallbackRegex = /var\\(\\s*(--wpds-[\\w-]+)\\s*,/g;\n\nconst messages = ruleMessages( ruleName, {\n\trejected: ( tokenName ) =>\n\t\t`Do not add a fallback value for Design System token '${ tokenName }'. Fallbacks are injected automatically at build time.`,\n} );\n\n/** @type {import('stylelint').Rule} */\nconst ruleFunction = ( primary ) => {\n\treturn ( root, result ) => {\n\t\tconst validOptions = validateOptions( result, ruleName, {\n\t\t\tactual: primary,\n\t\t\tpossible: [ true ],\n\t\t} );\n\n\t\tif ( ! validOptions ) {\n\t\t\treturn;\n\t\t}\n\n\t\troot.walkDecls( ( ruleNode ) => {\n\t\t\tconst { value } = ruleNode;\n\n\t\t\tlet match;\n\t\t\tvarWithFallbackRegex.lastIndex = 0;\n\t\t\twhile ( ( match = varWithFallbackRegex.exec( value ) ) !== null ) {\n\t\t\t\treport( {\n\t\t\t\t\tmessage: messages.rejected( match[ 1 ] ),\n\t\t\t\t\tnode: ruleNode,\n\t\t\t\t\tword: match[ 0 ],\n\t\t\t\t\tresult,\n\t\t\t\t\truleName,\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t};\n};\n\nruleFunction.ruleName = ruleName;\nruleFunction.messages = messages;\n\n/** @type {import('stylelint').Plugin} */\nexport default createPlugin( ruleName, ruleFunction );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AAEtB,IAAM;AAAA,EACL;AAAA,EACA,OAAO,EAAE,QAAQ,cAAc,gBAAgB;AAChD,IAAI,iBAAAA;AAEJ,IAAM,WAAW;AAMjB,IAAM,uBAAuB;AAE7B,IAAM,WAAW,aAAc,UAAU;AAAA,EACxC,UAAU,CAAE,cACX,wDAAyD,SAAU;AACrE,CAAE;AAGF,IAAM,eAAe,CAAE,YAAa;AACnC,SAAO,CAAE,MAAM,WAAY;AAC1B,UAAM,eAAe,gBAAiB,QAAQ,UAAU;AAAA,MACvD,QAAQ;AAAA,MACR,UAAU,CAAE,IAAK;AAAA,IAClB,CAAE;AAEF,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AAEA,SAAK,UAAW,CAAE,aAAc;AAC/B,YAAM,EAAE,MAAM,IAAI;AAElB,UAAI;AACJ,2BAAqB,YAAY;AACjC,cAAU,QAAQ,qBAAqB,KAAM,KAAM,OAAQ,MAAO;AACjE,eAAQ;AAAA,UACP,SAAS,SAAS,SAAU,MAAO,CAAE,CAAE;AAAA,UACvC,MAAM;AAAA,UACN,MAAM,MAAO,CAAE;AAAA,UACf;AAAA,UACA;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,aAAa,WAAW;AACxB,aAAa,WAAW;AAGxB,IAAO,mCAAQ,aAAc,UAAU,YAAa;",
+  "names": ["stylelint"]
+}

package/build/vite-plugins/vite-ds-token-fallbacks.cjs

@@ -35,7 +35,10 @@ var plugin = () => ({
     if (!code.includes("--wpds-")) {
       return null;
     }
-    return { code: (0, import_ds_token_fallbacks.addFallbackToVar)(code), map: null };
+    return {
+      code: (0, import_ds_token_fallbacks.addFallbackToVar)(code, { escapeQuotes: true }),
+      map: null
+    };
   }
 });
 var vite_ds_token_fallbacks_default = plugin;

package/build/vite-plugins/vite-ds-token-fallbacks.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/vite-plugins/vite-ds-token-fallbacks.mjs"],
-  "sourcesContent": ["import { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\n/**\n * Vite plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = () => ( {\n\tname: 'ds-token-fallbacks-js',\n\ttransform( code, id ) {\n\t\tif ( ! /\\.[mc]?[jt]sx?$/.test( id ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( id.includes( 'node_modules' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( ! code.includes( '--wpds-' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\t// Sourcemap omitted: replacements are small, inline substitutions\n\t\t// that preserve line structure, so the debugging impact is negligible.\n\t\treturn { code: addFallbackToVar( code ), map: null };\n\t},\n} );\n\nexport default plugin;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAiC;AASjC,IAAM,SAAS,OAAQ;AAAA,EACtB,MAAM;AAAA,EACN,UAAW,MAAM,IAAK;AACrB,QAAK,CAAE,kBAAkB,KAAM,EAAG,GAAI;AACrC,aAAO;AAAA,IACR;AACA,QAAK,GAAG,SAAU,cAAe,GAAI;AACpC,aAAO;AAAA,IACR;AACA,QAAK,CAAE,KAAK,SAAU,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAGA,WAAO,EAAE,UAAM,4CAAkB,IAAK,GAAG,KAAK,KAAK;AAAA,EACpD;AACD;AAEA,IAAO,kCAAQ;",
+  "sourcesContent": ["import { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\n/**\n * Vite plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = () => ( {\n\tname: 'ds-token-fallbacks-js',\n\ttransform( code, id ) {\n\t\tif ( ! /\\.[mc]?[jt]sx?$/.test( id ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( id.includes( 'node_modules' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\tif ( ! code.includes( '--wpds-' ) ) {\n\t\t\treturn null;\n\t\t}\n\t\t// Sourcemap omitted: replacements are small, inline substitutions\n\t\t// that preserve line structure, so the debugging impact is negligible.\n\t\treturn {\n\t\t\tcode: addFallbackToVar( code, { escapeQuotes: true } ),\n\t\t\tmap: null,\n\t\t};\n\t},\n} );\n\nexport default plugin;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAiC;AASjC,IAAM,SAAS,OAAQ;AAAA,EACtB,MAAM;AAAA,EACN,UAAW,MAAM,IAAK;AACrB,QAAK,CAAE,kBAAkB,KAAM,EAAG,GAAI;AACrC,aAAO;AAAA,IACR;AACA,QAAK,GAAG,SAAU,cAAe,GAAI;AACpC,aAAO;AAAA,IACR;AACA,QAAK,CAAE,KAAK,SAAU,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAGA,WAAO;AAAA,MACN,UAAM,4CAAkB,MAAM,EAAE,cAAc,KAAK,CAAE;AAAA,MACrD,KAAK;AAAA,IACN;AAAA,EACD;AACD;AAEA,IAAO,kCAAQ;",
   "names": []
 }

package/build-module/esbuild-plugins/esbuild-ds-token-fallbacks.mjs

@@ -24,7 +24,7 @@ var plugin = {
       }
       const ext = args.path.match(/(\.[^.]+)$/)?.[1] || ".js";
       return {
-        contents: addFallbackToVar(source),
+        contents: addFallbackToVar(source, { escapeQuotes: true }),
         loader: LOADER_MAP[ext] || "jsx"
       };
     });

package/build-module/esbuild-plugins/esbuild-ds-token-fallbacks.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/esbuild-plugins/esbuild-ds-token-fallbacks.mjs"],
-  "sourcesContent": ["import { readFile } from 'fs/promises';\nimport { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\nconst LOADER_MAP = {\n\t'.js': 'jsx',\n\t'.jsx': 'jsx',\n\t'.ts': 'tsx',\n\t'.tsx': 'tsx',\n\t'.mjs': 'jsx',\n\t'.mts': 'tsx',\n\t'.cjs': 'jsx',\n\t'.cts': 'tsx',\n};\n\n/**\n * esbuild plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = {\n\tname: 'ds-token-fallbacks-js',\n\tsetup( build ) {\n\t\tbuild.onLoad( { filter: /\\.[mc]?[jt]sx?$/ }, async ( args ) => {\n\t\t\t// Skip node_modules.\n\t\t\tif ( args.path.includes( 'node_modules' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst source = await readFile( args.path, 'utf8' );\n\n\t\t\tif ( ! source.includes( '--wpds-' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst ext = args.path.match( /(\\.[^.]+)$/ )?.[ 1 ] || '.js';\n\n\t\t\treturn {\n\t\t\t\tcontents: addFallbackToVar( source ),\n\t\t\t\tloader: LOADER_MAP[ ext ] || 'jsx',\n\t\t\t};\n\t\t} );\n\t},\n};\n\nexport default plugin;\n"],
-  "mappings": ";AAAA,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,IAAM,aAAa;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACT;AASA,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,MAAO,OAAQ;AACd,UAAM,OAAQ,EAAE,QAAQ,kBAAkB,GAAG,OAAQ,SAAU;AAE9D,UAAK,KAAK,KAAK,SAAU,cAAe,GAAI;AAC3C,eAAO;AAAA,MACR;AAEA,YAAM,SAAS,MAAM,SAAU,KAAK,MAAM,MAAO;AAEjD,UAAK,CAAE,OAAO,SAAU,SAAU,GAAI;AACrC,eAAO;AAAA,MACR;AAEA,YAAM,MAAM,KAAK,KAAK,MAAO,YAAa,IAAK,CAAE,KAAK;AAEtD,aAAO;AAAA,QACN,UAAU,iBAAkB,MAAO;AAAA,QACnC,QAAQ,WAAY,GAAI,KAAK;AAAA,MAC9B;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,IAAO,qCAAQ;",
+  "sourcesContent": ["import { readFile } from 'fs/promises';\nimport { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';\n\nconst LOADER_MAP = {\n\t'.js': 'jsx',\n\t'.jsx': 'jsx',\n\t'.ts': 'tsx',\n\t'.tsx': 'tsx',\n\t'.mjs': 'jsx',\n\t'.mts': 'tsx',\n\t'.cjs': 'jsx',\n\t'.cts': 'tsx',\n};\n\n/**\n * esbuild plugin that injects design-system token fallbacks into JS/TS files.\n *\n * Replaces bare `var(--wpds-*)` references in string literals with\n * `var(--wpds-*, <fallback>)` so components render correctly without\n * a ThemeProvider.\n */\nconst plugin = {\n\tname: 'ds-token-fallbacks-js',\n\tsetup( build ) {\n\t\tbuild.onLoad( { filter: /\\.[mc]?[jt]sx?$/ }, async ( args ) => {\n\t\t\t// Skip node_modules.\n\t\t\tif ( args.path.includes( 'node_modules' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst source = await readFile( args.path, 'utf8' );\n\n\t\t\tif ( ! source.includes( '--wpds-' ) ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\n\t\t\tconst ext = args.path.match( /(\\.[^.]+)$/ )?.[ 1 ] || '.js';\n\n\t\t\treturn {\n\t\t\t\tcontents: addFallbackToVar( source, { escapeQuotes: true } ),\n\t\t\t\tloader: LOADER_MAP[ ext ] || 'jsx',\n\t\t\t};\n\t\t} );\n\t},\n};\n\nexport default plugin;\n"],
+  "mappings": ";AAAA,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,IAAM,aAAa;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACT;AASA,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,MAAO,OAAQ;AACd,UAAM,OAAQ,EAAE,QAAQ,kBAAkB,GAAG,OAAQ,SAAU;AAE9D,UAAK,KAAK,KAAK,SAAU,cAAe,GAAI;AAC3C,eAAO;AAAA,MACR;AAEA,YAAM,SAAS,MAAM,SAAU,KAAK,MAAM,MAAO;AAEjD,UAAK,CAAE,OAAO,SAAU,SAAU,GAAI;AACrC,eAAO;AAAA,MACR;AAEA,YAAM,MAAM,KAAK,KAAK,MAAO,YAAa,IAAK,CAAE,KAAK;AAEtD,aAAO;AAAA,QACN,UAAU,iBAAkB,QAAQ,EAAE,cAAc,KAAK,CAAE;AAAA,QAC3D,QAAQ,WAAY,GAAI,KAAK;AAAA,MAC9B;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,IAAO,qCAAQ;",
   "names": []
 }

package/build-module/postcss-plugins/add-fallback-to-var.mjs

@@ -1,10 +1,16 @@
 // packages/theme/src/postcss-plugins/add-fallback-to-var.ts
-function addFallbackToVar(cssValue, tokenFallbacks) {
+function addFallbackToVar(cssValue, tokenFallbacks, { escapeQuotes = false } = {}) {
   return cssValue.replace(
     /var\(\s*(--wpds-[\w-]+)\s*\)/g,
     (match, tokenName) => {
-      const fallback = tokenFallbacks[tokenName];
-      return fallback !== void 0 ? `var(${tokenName}, ${fallback})` : match;
+      let fallback = tokenFallbacks[tokenName];
+      if (fallback === void 0) {
+        return match;
+      }
+      if (escapeQuotes) {
+        fallback = fallback.replaceAll('"', '\\"').replaceAll("'", "\\'");
+      }
+      return `var(${tokenName}, ${fallback})`;
     }
   );
 }

package/build-module/postcss-plugins/add-fallback-to-var.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/postcss-plugins/add-fallback-to-var.ts"],
-  "sourcesContent": ["/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the provided token fallback map.\n *\n * Existing fallbacks (i.e. `var()` calls that already contain a comma)\n * are left untouched, making the function safe to run multiple times\n * (idempotent).\n *\n * NOTE: The regex and replacement logic here is mirrored in\n * `ds-token-fallbacks.mjs`. If you update one, update the other to match.\n *\n * @param cssValue       A CSS declaration value.\n * @param tokenFallbacks Map of CSS variable names to their fallback expressions.\n * @return The value with fallbacks injected.\n */\nexport function addFallbackToVar(\n\tcssValue: string,\n\ttokenFallbacks: Record< string, string >\n): string {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName: string ) => {\n\t\t\tconst fallback = tokenFallbacks[ tokenName ];\n\t\t\treturn fallback !== undefined\n\t\t\t\t? `var(${ tokenName }, ${ fallback })`\n\t\t\t\t: match;\n\t\t}\n\t);\n}\n"],
-  "mappings": ";AAeO,SAAS,iBACf,UACA,gBACS;AACT,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAuB;AAC/B,YAAM,WAAW,eAAgB,SAAU;AAC3C,aAAO,aAAa,SACjB,OAAQ,SAAU,KAAM,QAAS,MACjC;AAAA,IACJ;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the provided token fallback map.\n *\n * Existing fallbacks (i.e. `var()` calls that already contain a comma)\n * are left untouched, making the function safe to run multiple times\n * (idempotent).\n *\n * NOTE: The regex and replacement logic here is mirrored in\n * `ds-token-fallbacks.mjs`. If you update one, update the other to match.\n *\n * @param cssValue             A CSS declaration value.\n * @param tokenFallbacks       Map of CSS variable names to their fallback expressions.\n * @param options              Options.\n * @param options.escapeQuotes When true, escape `\"` and `'` in fallback values.\n *                             Use this when the input is JS/TS source so that\n *                             injected quotes don't break string literals.\n * @return                     The value with fallbacks injected.\n */\nexport function addFallbackToVar(\n\tcssValue: string,\n\ttokenFallbacks: Record< string, string >,\n\t{ escapeQuotes = false }: { escapeQuotes?: boolean } = {}\n): string {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName: string ) => {\n\t\t\tlet fallback = tokenFallbacks[ tokenName ];\n\t\t\tif ( fallback === undefined ) {\n\t\t\t\treturn match;\n\t\t\t}\n\t\t\tif ( escapeQuotes ) {\n\t\t\t\tfallback = fallback\n\t\t\t\t\t.replaceAll( '\"', '\\\\\"' )\n\t\t\t\t\t.replaceAll( \"'\", \"\\\\'\" );\n\t\t\t}\n\t\t\treturn `var(${ tokenName }, ${ fallback })`;\n\t\t}\n\t);\n}\n"],
+  "mappings": ";AAmBO,SAAS,iBACf,UACA,gBACA,EAAE,eAAe,MAAM,IAAgC,CAAC,GAC/C;AACT,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAuB;AAC/B,UAAI,WAAW,eAAgB,SAAU;AACzC,UAAK,aAAa,QAAY;AAC7B,eAAO;AAAA,MACR;AACA,UAAK,cAAe;AACnB,mBAAW,SACT,WAAY,KAAK,KAAM,EACvB,WAAY,KAAK,KAAM;AAAA,MAC1B;AACA,aAAO,OAAQ,SAAU,KAAM,QAAS;AAAA,IACzC;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/postcss-plugins/ds-token-fallbacks.mjs

@@ -1,12 +1,18 @@
 // packages/theme/src/postcss-plugins/ds-token-fallbacks.mjs
 import _tokenFallbacks from "../prebuilt/js/design-token-fallbacks.mjs";
 var tokenFallbacks = _tokenFallbacks;
-function addFallbackToVar(cssValue) {
+function addFallbackToVar(cssValue, { escapeQuotes = false } = {}) {
   return cssValue.replace(
     /var\(\s*(--wpds-[\w-]+)\s*\)/g,
     (match, tokenName) => {
-      const fallback = tokenFallbacks[tokenName];
-      return fallback !== void 0 ? `var(${tokenName}, ${fallback})` : match;
+      let fallback = tokenFallbacks[tokenName];
+      if (fallback === void 0) {
+        return match;
+      }
+      if (escapeQuotes) {
+        fallback = fallback.replaceAll('"', '\\"').replaceAll("'", "\\'");
+      }
+      return `var(${tokenName}, ${fallback})`;
     }
   );
 }

package/build-module/postcss-plugins/ds-token-fallbacks.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/postcss-plugins/ds-token-fallbacks.mjs"],
-  "sourcesContent": ["import _tokenFallbacks from '../prebuilt/js/design-token-fallbacks.mjs';\n\n/** @type {Record<string, string>} */\nconst tokenFallbacks = _tokenFallbacks;\n\n/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the generated token fallback map.\n *\n * Existing fallbacks (i.e. var() calls that already contain a comma) are\n * left untouched, making the function safe to run multiple times.\n *\n * NOTE: The regex and replacement logic here mirrors `add-fallback-to-var.ts`.\n * If you update one, update the other to match.\n *\n * @param {string} cssValue A CSS declaration value.\n * @return {string} The value with fallbacks injected.\n */\nexport function addFallbackToVar( cssValue ) {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName ) => {\n\t\t\tconst fallback = tokenFallbacks[ tokenName ];\n\t\t\treturn fallback !== undefined\n\t\t\t\t? `var(${ tokenName }, ${ fallback })`\n\t\t\t\t: match;\n\t\t}\n\t);\n}\n"],
-  "mappings": ";AAAA,OAAO,qBAAqB;AAG5B,IAAM,iBAAiB;AAehB,SAAS,iBAAkB,UAAW;AAC5C,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAe;AACvB,YAAM,WAAW,eAAgB,SAAU;AAC3C,aAAO,aAAa,SACjB,OAAQ,SAAU,KAAM,QAAS,MACjC;AAAA,IACJ;AAAA,EACD;AACD;",
+  "sourcesContent": ["import _tokenFallbacks from '../prebuilt/js/design-token-fallbacks.mjs';\n\n/** @type {Record<string, string>} */\nconst tokenFallbacks = _tokenFallbacks;\n\n/**\n * Replace bare `var(--wpds-*)` references in a CSS value string with\n * `var(--wpds-*, <fallback>)` using the generated token fallback map.\n *\n * Existing fallbacks (i.e. var() calls that already contain a comma) are\n * left untouched, making the function safe to run multiple times.\n *\n * NOTE: The regex and replacement logic here mirrors `add-fallback-to-var.ts`.\n * If you update one, update the other to match.\n *\n * @param {string}  cssValue               A CSS declaration value.\n * @param {Object}  [options]              Options.\n * @param {boolean} [options.escapeQuotes] When true, escape `\"` and `'` in\n *                                         fallback values. Use this when the\n *                                         input is JS/TS source so that\n *                                         injected quotes don't break string\n *                                         literals. JS will unescape them at\n *                                         parse time, so the browser's CSS\n *                                         engine still sees the correct value.\n * @return {string}                        The value with fallbacks injected.\n */\nexport function addFallbackToVar( cssValue, { escapeQuotes = false } = {} ) {\n\treturn cssValue.replace(\n\t\t/var\\(\\s*(--wpds-[\\w-]+)\\s*\\)/g,\n\t\t( match, tokenName ) => {\n\t\t\tlet fallback = tokenFallbacks[ tokenName ];\n\t\t\tif ( fallback === undefined ) {\n\t\t\t\treturn match;\n\t\t\t}\n\t\t\tif ( escapeQuotes ) {\n\t\t\t\tfallback = fallback\n\t\t\t\t\t.replaceAll( '\"', '\\\\\"' )\n\t\t\t\t\t.replaceAll( \"'\", \"\\\\'\" );\n\t\t\t}\n\t\t\treturn `var(${ tokenName }, ${ fallback })`;\n\t\t}\n\t);\n}\n"],
+  "mappings": ";AAAA,OAAO,qBAAqB;AAG5B,IAAM,iBAAiB;AAuBhB,SAAS,iBAAkB,UAAU,EAAE,eAAe,MAAM,IAAI,CAAC,GAAI;AAC3E,SAAO,SAAS;AAAA,IACf;AAAA,IACA,CAAE,OAAO,cAAe;AACvB,UAAI,WAAW,eAAgB,SAAU;AACzC,UAAK,aAAa,QAAY;AAC7B,eAAO;AAAA,MACR;AACA,UAAK,cAAe;AACnB,mBAAW,SACT,WAAY,KAAK,KAAM,EACvB,WAAY,KAAK,KAAM;AAAA,MAC1B;AACA,aAAO,OAAQ,SAAU,KAAM,QAAS;AAAA,IACzC;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/prebuilt/js/design-token-fallbacks.mjs

@@ -113,6 +113,12 @@ var design_token_fallbacks_default = {
   "--wpds-dimension-padding-sm": "8px",
   "--wpds-dimension-padding-xl": "20px",
   "--wpds-dimension-padding-xs": "4px",
+  "--wpds-dimension-surface-width-2xl": "960px",
+  "--wpds-dimension-surface-width-lg": "560px",
+  "--wpds-dimension-surface-width-md": "400px",
+  "--wpds-dimension-surface-width-sm": "320px",
+  "--wpds-dimension-surface-width-xl": "720px",
+  "--wpds-dimension-surface-width-xs": "240px",
   "--wpds-elevation-lg": "0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005",
   "--wpds-elevation-md": "0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005",
   "--wpds-elevation-sm": "0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005",