@wordpress/theme 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -2,9 +2,23 @@
 
 ## Unreleased
 
+## 0.11.0 (2026-04-15)
+
+### Breaking changes
+
+-   Renamed typography tokens from `--wpds-font-*` to `--wpds-typography-*`. Sub-groups that correspond to CSS `font-*` properties retain the `font-` prefix; `line-height` does not. To migrate:
+    -   `--wpds-font-family-*`: use `--wpds-typography-font-family-*` instead.
+    -   `--wpds-font-size-*`: use `--wpds-typography-font-size-*` instead.
+    -   `--wpds-font-weight-*`: use `--wpds-typography-font-weight-*` instead.
+    -   `--wpds-font-line-height-*`: use `--wpds-typography-line-height-*` instead.
+
+### Enhancements
+
+-   The design token fallback build plugins (PostCSS, esbuild, Vite) now throw an error when encountering an unknown `--wpds-*` token, instead of silently skipping it.
+
 ## 0.10.0 (2026-04-01)
 
-### Enhancement
+### Enhancements
 
 -   Change the default value of `--wpds-cursor-control` from `default` to `pointer` ([#76762](https://github.com/WordPress/gutenberg/pull/76762)).
 

package/README.md

@@ -13,6 +13,36 @@ A theming package that's part of the WordPress Design System. It has two parts:
 
 In the **[Design Tokens Reference](https://github.com/WordPress/gutenberg/blob/trunk/packages/theme/docs/tokens.md)** document there is a complete reference of all available design tokens including colors, spacing, typography, and more.
 
+### Using Design Tokens
+
+Design tokens are delivered as CSS custom properties (e.g. `var(--wpds-color-fg-content-neutral)`). To use them, a stylesheet defining the token values must be loaded on the page.
+
+The [`ThemeProvider`](#theme-provider) component can be used to customize token values like colors and density for a specific part of your application.
+
+#### Within WordPress
+
+Stylesheets are managed on your behalf in a WordPress context, so you don't need to worry about loading them yourself.
+
+#### Outside WordPress
+
+Outside of WordPress, you will need to install and load the design tokens stylesheet to support the full range of theming capabilities:
+
+```
+npm install @wordpress/theme
+```
+
+```js
+import '@wordpress/theme/design-tokens.css';
+```
+
+This stylesheet is universal and does not have a separate RTL version.
+
+### Developer Tools
+
+For the best development experience, we recommend configuring the [build plugins](#build-plugins) and [Stylelint rules](#stylelint-plugins) provided by this package. The build plugins automatically inject fallback values into `var(--wpds-*)` references so components render correctly even when the tokens stylesheet is not yet loaded, and will raise an error if a reference does not match a known token. The Stylelint rules catch typos, unknown tokens, and other discouraged patterns during development.
+
+If you use `@wordpress/build` to build your scripts, the build plugins are already enabled by default.
+
 ### Architecture
 
 Internally, the design system uses a tiered token architecture:
@@ -52,27 +82,29 @@ Semantic tokens follow a consistent naming pattern:
 
 **Type** indicates what kind of value it represents, usually mapping to a DTCG token type.
 
-| Value       | Description                                                                    |
-| ----------- | ------------------------------------------------------------------------------ |
-| `color`     | Color values for backgrounds, foregrounds, and strokes                         |
-| `dimension` | Spacing, sizing, and other measurable lengths (e.g., padding, margins, widths) |
-| `border`    | Border properties like radius and width                                        |
-| `elevation` | Shadow definitions for layering and depth                                      |
-| `font`      | Typography properties like family, size, and line-height                       |
+| Value        | Description                                                                    |
+| ------------ | ------------------------------------------------------------------------------ |
+| `color`      | Color values for backgrounds, foregrounds, and strokes                         |
+| `dimension`  | Spacing, sizing, and other measurable lengths (e.g., padding, margins, widths) |
+| `border`     | Border properties like radius and width                                        |
+| `elevation`  | Shadow definitions for layering and depth                                      |
+| `typography` | Typography properties like font family, font size, and line-height             |
 
 **Property** is the specific design property being defined.
 
-| Value     | Description                        |
-| --------- | ---------------------------------- |
-| `bg`      | Background color                   |
-| `fg`      | Foreground color (text and icons)  |
-| `stroke`  | Border and outline color           |
-| `padding` | Internal spacing within an element |
-| `gap`     | Spacing between elements           |
-| `radius`  | Border radius for rounded corners  |
-| `width`   | Border width                       |
-| `size`    | Font size                          |
-| `family`  | Font family                        |
+| Value         | Description                        |
+| ------------- | ---------------------------------- |
+| `bg`          | Background color                   |
+| `fg`          | Foreground color (text and icons)  |
+| `stroke`      | Border and outline color           |
+| `padding`     | Internal spacing within an element |
+| `gap`         | Spacing between elements           |
+| `radius`      | Border radius for rounded corners  |
+| `width`       | Border width                       |
+| `font-size`   | Font size                          |
+| `font-family` | Font family                        |
+| `font-weight` | Font weight                        |
+| `line-height` | Line height                        |
 
 **Target** is the component or element type the token applies to.
 
@@ -136,10 +168,7 @@ import { ThemeProvider } from '@wordpress/theme';
 
 function App() {
 	return (
-		<ThemeProvider
-			color={ { primary: 'blue' } }
-			density="compact"
-		>
+		<ThemeProvider color={ { primary: 'blue' } } density="compact">
 			{ /* Your app content */ }
 		</ThemeProvider>
 	);

package/build/color-ramps/lib/constants.cjs

@@ -75,7 +75,7 @@ var CONTRAST_COMBINATIONS = [
   }
 ];
 var DEFAULT_SEED_COLORS = {
-  bg: "#f8f8f8",
+  bg: "#fcfcfc",
   primary: "#3858e9",
   info: "#0090ff",
   success: "#4ab866",

package/build/color-ramps/lib/constants.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/constants.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.\n// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.02;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.\n// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.02;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#fcfcfc',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA0B;AAK1B,mCAAO;AAGA,IAAM,YAAQ,cAAI,SAAS,eAAM;AACjC,IAAM,YAAQ,cAAI,SAAS,eAAM;AAMjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,mBAAmB;AAEzB,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
   "names": []
 }

package/build/color-ramps/lib/default-ramps.cjs

@@ -25,28 +25,28 @@ module.exports = __toCommonJS(default_ramps_exports);
 var DEFAULT_RAMPS = {
   bg: {
     ramp: {
-      surface2: "#f8f8f8",
+      surface2: "#fcfcfc",
       bgFill1: "#555",
       fgFill: "#f0f0f0",
       bgFill2: "#484848",
-      surface6: "#d2d2d2",
-      surface5: "#e2e2e2",
-      surface4: "#eaeaea",
+      surface6: "#d6d6d6",
+      surface5: "#e6e6e6",
+      surface4: "#ededed",
       surface3: "#fff",
       fgSurface4: "#1e1e1e",
-      fgSurface3: "#6d6d6d",
-      fgSurface2: "#8a8a8a",
-      fgSurface1: "#aaa",
-      stroke3: "#8a8a8a",
-      stroke4: "#6c6c6c",
-      stroke2: "#d8d8d8",
-      stroke1: "#e0e0e0",
+      fgSurface3: "#707070",
+      fgSurface2: "#8d8d8d",
+      fgSurface1: "#aeaeae",
+      stroke3: "#8d8d8d",
+      stroke4: "#6e6e6e",
+      stroke2: "#dbdbdb",
+      stroke1: "#e4e4e4",
       bgFillDark: "#1e1e1e",
       fgFillDark: "#f0f0f0",
       bgFillInverted2: "#1e1e1e",
       bgFillInverted1: "#2d2d2d",
       fgFillInverted: "#f0f0f0",
-      surface1: "#f0f0f0"
+      surface1: "#f4f4f4"
     },
     direction: "darker"
   },
@@ -55,15 +55,15 @@ var DEFAULT_RAMPS = {
       bgFill1: "#3858e9",
       fgFill: "#eff0f2",
       bgFill2: "#2e49d9",
-      surface2: "#f6f8fd",
-      surface6: "#c7d2ed",
-      surface5: "#dbe2f4",
+      surface2: "#f6f8fe",
+      surface6: "#c7d2ee",
+      surface5: "#dce3f4",
       surface4: "#e6eaf4",
       surface3: "#fff",
       fgSurface4: "#0b0070",
       fgSurface3: "#3858e9",
-      fgSurface2: "#5b82ff",
-      fgSurface1: "#85a9ff",
+      fgSurface2: "#5a82ff",
+      fgSurface1: "#86a9ff",
       stroke3: "#3858e9",
       stroke4: "#2337c8",
       stroke2: "#9caacc",
@@ -73,7 +73,7 @@ var DEFAULT_RAMPS = {
       bgFillInverted2: "#1a1e27",
       bgFillInverted1: "#13009f",
       fgFillInverted: "#eff0f2",
-      surface1: "#ecf0f9"
+      surface1: "#ecf0fa"
     },
     direction: "darker"
   },
@@ -82,15 +82,15 @@ var DEFAULT_RAMPS = {
       bgFill1: "#0090ff",
       fgFill: "#1a1f24",
       bgFill2: "#007fed",
-      surface2: "#f2f9ff",
+      surface2: "#f3f9ff",
       surface6: "#bcd5f2",
-      surface5: "#d3e4f7",
+      surface5: "#d4e4f7",
       surface4: "#deebfa",
       surface3: "#fff",
       fgSurface4: "#001b4f",
       fgSurface3: "#006bd7",
       fgSurface2: "#008bfa",
-      fgSurface1: "#58b0ff",
+      fgSurface1: "#59b0ff",
       stroke3: "#006bd7",
       stroke4: "#004fa9",
       stroke2: "#95b5d9",
@@ -100,7 +100,7 @@ var DEFAULT_RAMPS = {
       bgFillInverted2: "#1a1f24",
       bgFillInverted1: "#002a69",
       fgFillInverted: "#eef0f3",
-      surface1: "#e4f1ff"
+      surface1: "#e5f1ff"
     },
     direction: "darker"
   },
@@ -109,25 +109,25 @@ var DEFAULT_RAMPS = {
       bgFill1: "#4ab866",
       fgFill: "#1b1f1c",
       bgFill2: "#37a756",
-      surface2: "#eaffed",
+      surface2: "#ebffed",
       surface6: "#88e89b",
-      surface5: "#aff3bb",
-      surface4: "#c5f7cc",
+      surface5: "#b0f3bb",
+      surface4: "#c6f7cd",
       surface3: "#fff",
       fgSurface4: "#002900",
-      fgSurface3: "#007f30",
-      fgSurface2: "#2b9e4e",
-      fgSurface1: "#53c16e",
-      stroke3: "#007f30",
-      stroke4: "#006013",
-      stroke2: "#84c08e",
+      fgSurface3: "#008030",
+      fgSurface2: "#2b9f4e",
+      fgSurface1: "#54c16e",
+      stroke3: "#008030",
+      stroke4: "#006113",
+      stroke2: "#84c08f",
       stroke1: "#8ac894",
       bgFillDark: "#1b1f1c",
       fgFillDark: "#eaf3eb",
       bgFillInverted2: "#1b1f1c",
       bgFillInverted1: "#003701",
       fgFillInverted: "#eaf3eb",
-      surface1: "#cbfdd2"
+      surface1: "#ccfdd3"
     },
     direction: "darker"
   },
@@ -136,17 +136,17 @@ var DEFAULT_RAMPS = {
       bgFill1: "#f0d149",
       fgFill: "#1f1e1b",
       bgFill2: "#dcbe2f",
-      surface2: "#fff9c9",
-      surface6: "#e8d172",
-      surface5: "#f7e18a",
-      surface4: "#fee994",
+      surface2: "#fff9ca",
+      surface6: "#e9d170",
+      surface5: "#f7e28a",
+      surface4: "#fee995",
       surface3: "#fff",
       fgSurface4: "#281d00",
       fgSurface3: "#826a00",
-      fgSurface2: "#a48600",
+      fgSurface2: "#a48700",
       fgSurface1: "#c6a800",
       stroke3: "#826a00",
-      stroke4: "#624f00",
+      stroke4: "#634f00",
       stroke2: "#bdb17e",
       stroke1: "#c5b883",
       bgFillDark: "#1f1e1b",
@@ -154,7 +154,7 @@ var DEFAULT_RAMPS = {
       bgFillInverted2: "#1f1e1b",
       bgFillInverted1: "#392c00",
       fgFillInverted: "#fdf1bf",
-      surface1: "#ffef9b"
+      surface1: "#fff09c"
     },
     direction: "darker"
   },
@@ -163,25 +163,25 @@ var DEFAULT_RAMPS = {
       bgFill1: "#f0b849",
       fgFill: "#1f1e1b",
       bgFill2: "#dda633",
-      surface2: "#fff7e0",
-      surface6: "#f4cc84",
-      surface5: "#faddac",
-      surface4: "#fde6bd",
+      surface2: "#fff7e1",
+      surface6: "#f4cc85",
+      surface5: "#fadead",
+      surface4: "#fde6be",
       surface3: "#fff",
       fgSurface4: "#2e1900",
       fgSurface3: "#926300",
-      fgSurface2: "#b47f00",
-      fgSurface1: "#d7a02a",
+      fgSurface2: "#b57f00",
+      fgSurface1: "#d7a02b",
       stroke3: "#926300",
       stroke4: "#6f4900",
       stroke2: "#c7ad7e",
-      stroke1: "#d0b381",
+      stroke1: "#d0b481",
       bgFillDark: "#1f1e1b",
       fgFillDark: "#f7efe2",
       bgFillInverted2: "#1f1e1b",
       bgFillInverted1: "#422800",
       fgFillInverted: "#f7efe2",
-      surface1: "#ffecc4"
+      surface1: "#ffedc5"
     },
     direction: "darker"
   },
@@ -190,9 +190,9 @@ var DEFAULT_RAMPS = {
       bgFill1: "#cc1818",
       fgFill: "#f2efef",
       bgFill2: "#b90000",
-      surface2: "#fff6f4",
-      surface6: "#f3c8c2",
-      surface5: "#f8dcd7",
+      surface2: "#fff6f5",
+      surface6: "#f3c9c2",
+      surface5: "#f7dbd7",
       surface4: "#f6e6e3",
       surface3: "#fff",
       fgSurface4: "#470000",

package/build/color-ramps/lib/default-ramps.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/default-ramps.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampResult } from './types';\nimport type { DEFAULT_SEED_COLORS } from './constants';\n\nexport const DEFAULT_RAMPS: Record<\n\tkeyof typeof DEFAULT_SEED_COLORS,\n\tRampResult\n> = {\n\tbg: {\n\t\tramp: {\n\t\t\tsurface2: '#f8f8f8',\n\t\t\tbgFill1: '#555',\n\t\t\tfgFill: '#f0f0f0',\n\t\t\tbgFill2: '#484848',\n\t\t\tsurface6: '#d2d2d2',\n\t\t\tsurface5: '#e2e2e2',\n\t\t\tsurface4: '#eaeaea',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#1e1e1e',\n\t\t\tfgSurface3: '#6d6d6d',\n\t\t\tfgSurface2: '#8a8a8a',\n\t\t\tfgSurface1: '#aaa',\n\t\t\tstroke3: '#8a8a8a',\n\t\t\tstroke4: '#6c6c6c',\n\t\t\tstroke2: '#d8d8d8',\n\t\t\tstroke1: '#e0e0e0',\n\t\t\tbgFillDark: '#1e1e1e',\n\t\t\tfgFillDark: '#f0f0f0',\n\t\t\tbgFillInverted2: '#1e1e1e',\n\t\t\tbgFillInverted1: '#2d2d2d',\n\t\t\tfgFillInverted: '#f0f0f0',\n\t\t\tsurface1: '#f0f0f0',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tprimary: {\n\t\tramp: {\n\t\t\tbgFill1: '#3858e9',\n\t\t\tfgFill: '#eff0f2',\n\t\t\tbgFill2: '#2e49d9',\n\t\t\tsurface2: '#f6f8fd',\n\t\t\tsurface6: '#c7d2ed',\n\t\t\tsurface5: '#dbe2f4',\n\t\t\tsurface4: '#e6eaf4',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#0b0070',\n\t\t\tfgSurface3: '#3858e9',\n\t\t\tfgSurface2: '#5b82ff',\n\t\t\tfgSurface1: '#85a9ff',\n\t\t\tstroke3: '#3858e9',\n\t\t\tstroke4: '#2337c8',\n\t\t\tstroke2: '#9caacc',\n\t\t\tstroke1: '#a3b1d4',\n\t\t\tbgFillDark: '#1a1e27',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1a1e27',\n\t\t\tbgFillInverted1: '#13009f',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#ecf0f9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tinfo: {\n\t\tramp: {\n\t\t\tbgFill1: '#0090ff',\n\t\t\tfgFill: '#1a1f24',\n\t\t\tbgFill2: '#007fed',\n\t\t\tsurface2: '#f2f9ff',\n\t\t\tsurface6: '#bcd5f2',\n\t\t\tsurface5: '#d3e4f7',\n\t\t\tsurface4: '#deebfa',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001b4f',\n\t\t\tfgSurface3: '#006bd7',\n\t\t\tfgSurface2: '#008bfa',\n\t\t\tfgSurface1: '#58b0ff',\n\t\t\tstroke3: '#006bd7',\n\t\t\tstroke4: '#004fa9',\n\t\t\tstroke2: '#95b5d9',\n\t\t\tstroke1: '#9fbcdc',\n\t\t\tbgFillDark: '#1a1f24',\n\t\t\tfgFillDark: '#eef0f3',\n\t\t\tbgFillInverted2: '#1a1f24',\n\t\t\tbgFillInverted1: '#002a69',\n\t\t\tfgFillInverted: '#eef0f3',\n\t\t\tsurface1: '#e4f1ff',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tsuccess: {\n\t\tramp: {\n\t\t\tbgFill1: '#4ab866',\n\t\t\tfgFill: '#1b1f1c',\n\t\t\tbgFill2: '#37a756',\n\t\t\tsurface2: '#eaffed',\n\t\t\tsurface6: '#88e89b',\n\t\t\tsurface5: '#aff3bb',\n\t\t\tsurface4: '#c5f7cc',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002900',\n\t\t\tfgSurface3: '#007f30',\n\t\t\tfgSurface2: '#2b9e4e',\n\t\t\tfgSurface1: '#53c16e',\n\t\t\tstroke3: '#007f30',\n\t\t\tstroke4: '#006013',\n\t\t\tstroke2: '#84c08e',\n\t\t\tstroke1: '#8ac894',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#eaf3eb',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003701',\n\t\t\tfgFillInverted: '#eaf3eb',\n\t\t\tsurface1: '#cbfdd2',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tcaution: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0d149',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dcbe2f',\n\t\t\tsurface2: '#fff9c9',\n\t\t\tsurface6: '#e8d172',\n\t\t\tsurface5: '#f7e18a',\n\t\t\tsurface4: '#fee994',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#281d00',\n\t\t\tfgSurface3: '#826a00',\n\t\t\tfgSurface2: '#a48600',\n\t\t\tfgSurface1: '#c6a800',\n\t\t\tstroke3: '#826a00',\n\t\t\tstroke4: '#624f00',\n\t\t\tstroke2: '#bdb17e',\n\t\t\tstroke1: '#c5b883',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#fdf1bf',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#392c00',\n\t\t\tfgFillInverted: '#fdf1bf',\n\t\t\tsurface1: '#ffef9b',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\twarning: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0b849',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dda633',\n\t\t\tsurface2: '#fff7e0',\n\t\t\tsurface6: '#f4cc84',\n\t\t\tsurface5: '#faddac',\n\t\t\tsurface4: '#fde6bd',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2e1900',\n\t\t\tfgSurface3: '#926300',\n\t\t\tfgSurface2: '#b47f00',\n\t\t\tfgSurface1: '#d7a02a',\n\t\t\tstroke3: '#926300',\n\t\t\tstroke4: '#6f4900',\n\t\t\tstroke2: '#c7ad7e',\n\t\t\tstroke1: '#d0b381',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f7efe2',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#422800',\n\t\t\tfgFillInverted: '#f7efe2',\n\t\t\tsurface1: '#ffecc4',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\terror: {\n\t\tramp: {\n\t\t\tbgFill1: '#cc1818',\n\t\t\tfgFill: '#f2efef',\n\t\t\tbgFill2: '#b90000',\n\t\t\tsurface2: '#fff6f4',\n\t\t\tsurface6: '#f3c8c2',\n\t\t\tsurface5: '#f8dcd7',\n\t\t\tsurface4: '#f6e6e3',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#470000',\n\t\t\tfgSurface3: '#cc1818',\n\t\t\tfgSurface2: '#f74c40',\n\t\t\tfgSurface1: '#ff8879',\n\t\t\tstroke3: '#cc1818',\n\t\t\tstroke4: '#9d0000',\n\t\t\tstroke2: '#d39c95',\n\t\t\tstroke1: '#daa39b',\n\t\t\tbgFillDark: '#231c1b',\n\t\t\tfgFillDark: '#f2efef',\n\t\t\tbgFillInverted2: '#231c1b',\n\t\t\tbgFillInverted1: '#640000',\n\t\t\tfgFillInverted: '#f2efef',\n\t\t\tsurface1: '#fcece9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { RampResult } from './types';\nimport type { DEFAULT_SEED_COLORS } from './constants';\n\nexport const DEFAULT_RAMPS: Record<\n\tkeyof typeof DEFAULT_SEED_COLORS,\n\tRampResult\n> = {\n\tbg: {\n\t\tramp: {\n\t\t\tsurface2: '#fcfcfc',\n\t\t\tbgFill1: '#555',\n\t\t\tfgFill: '#f0f0f0',\n\t\t\tbgFill2: '#484848',\n\t\t\tsurface6: '#d6d6d6',\n\t\t\tsurface5: '#e6e6e6',\n\t\t\tsurface4: '#ededed',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#1e1e1e',\n\t\t\tfgSurface3: '#707070',\n\t\t\tfgSurface2: '#8d8d8d',\n\t\t\tfgSurface1: '#aeaeae',\n\t\t\tstroke3: '#8d8d8d',\n\t\t\tstroke4: '#6e6e6e',\n\t\t\tstroke2: '#dbdbdb',\n\t\t\tstroke1: '#e4e4e4',\n\t\t\tbgFillDark: '#1e1e1e',\n\t\t\tfgFillDark: '#f0f0f0',\n\t\t\tbgFillInverted2: '#1e1e1e',\n\t\t\tbgFillInverted1: '#2d2d2d',\n\t\t\tfgFillInverted: '#f0f0f0',\n\t\t\tsurface1: '#f4f4f4',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tprimary: {\n\t\tramp: {\n\t\t\tbgFill1: '#3858e9',\n\t\t\tfgFill: '#eff0f2',\n\t\t\tbgFill2: '#2e49d9',\n\t\t\tsurface2: '#f6f8fe',\n\t\t\tsurface6: '#c7d2ee',\n\t\t\tsurface5: '#dce3f4',\n\t\t\tsurface4: '#e6eaf4',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#0b0070',\n\t\t\tfgSurface3: '#3858e9',\n\t\t\tfgSurface2: '#5a82ff',\n\t\t\tfgSurface1: '#86a9ff',\n\t\t\tstroke3: '#3858e9',\n\t\t\tstroke4: '#2337c8',\n\t\t\tstroke2: '#9caacc',\n\t\t\tstroke1: '#a3b1d4',\n\t\t\tbgFillDark: '#1a1e27',\n\t\t\tfgFillDark: '#eff0f2',\n\t\t\tbgFillInverted2: '#1a1e27',\n\t\t\tbgFillInverted1: '#13009f',\n\t\t\tfgFillInverted: '#eff0f2',\n\t\t\tsurface1: '#ecf0fa',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tinfo: {\n\t\tramp: {\n\t\t\tbgFill1: '#0090ff',\n\t\t\tfgFill: '#1a1f24',\n\t\t\tbgFill2: '#007fed',\n\t\t\tsurface2: '#f3f9ff',\n\t\t\tsurface6: '#bcd5f2',\n\t\t\tsurface5: '#d4e4f7',\n\t\t\tsurface4: '#deebfa',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#001b4f',\n\t\t\tfgSurface3: '#006bd7',\n\t\t\tfgSurface2: '#008bfa',\n\t\t\tfgSurface1: '#59b0ff',\n\t\t\tstroke3: '#006bd7',\n\t\t\tstroke4: '#004fa9',\n\t\t\tstroke2: '#95b5d9',\n\t\t\tstroke1: '#9fbcdc',\n\t\t\tbgFillDark: '#1a1f24',\n\t\t\tfgFillDark: '#eef0f3',\n\t\t\tbgFillInverted2: '#1a1f24',\n\t\t\tbgFillInverted1: '#002a69',\n\t\t\tfgFillInverted: '#eef0f3',\n\t\t\tsurface1: '#e5f1ff',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tsuccess: {\n\t\tramp: {\n\t\t\tbgFill1: '#4ab866',\n\t\t\tfgFill: '#1b1f1c',\n\t\t\tbgFill2: '#37a756',\n\t\t\tsurface2: '#ebffed',\n\t\t\tsurface6: '#88e89b',\n\t\t\tsurface5: '#b0f3bb',\n\t\t\tsurface4: '#c6f7cd',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#002900',\n\t\t\tfgSurface3: '#008030',\n\t\t\tfgSurface2: '#2b9f4e',\n\t\t\tfgSurface1: '#54c16e',\n\t\t\tstroke3: '#008030',\n\t\t\tstroke4: '#006113',\n\t\t\tstroke2: '#84c08f',\n\t\t\tstroke1: '#8ac894',\n\t\t\tbgFillDark: '#1b1f1c',\n\t\t\tfgFillDark: '#eaf3eb',\n\t\t\tbgFillInverted2: '#1b1f1c',\n\t\t\tbgFillInverted1: '#003701',\n\t\t\tfgFillInverted: '#eaf3eb',\n\t\t\tsurface1: '#ccfdd3',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\tcaution: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0d149',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dcbe2f',\n\t\t\tsurface2: '#fff9ca',\n\t\t\tsurface6: '#e9d170',\n\t\t\tsurface5: '#f7e28a',\n\t\t\tsurface4: '#fee995',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#281d00',\n\t\t\tfgSurface3: '#826a00',\n\t\t\tfgSurface2: '#a48700',\n\t\t\tfgSurface1: '#c6a800',\n\t\t\tstroke3: '#826a00',\n\t\t\tstroke4: '#634f00',\n\t\t\tstroke2: '#bdb17e',\n\t\t\tstroke1: '#c5b883',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#fdf1bf',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#392c00',\n\t\t\tfgFillInverted: '#fdf1bf',\n\t\t\tsurface1: '#fff09c',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\twarning: {\n\t\tramp: {\n\t\t\tbgFill1: '#f0b849',\n\t\t\tfgFill: '#1f1e1b',\n\t\t\tbgFill2: '#dda633',\n\t\t\tsurface2: '#fff7e1',\n\t\t\tsurface6: '#f4cc85',\n\t\t\tsurface5: '#fadead',\n\t\t\tsurface4: '#fde6be',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#2e1900',\n\t\t\tfgSurface3: '#926300',\n\t\t\tfgSurface2: '#b57f00',\n\t\t\tfgSurface1: '#d7a02b',\n\t\t\tstroke3: '#926300',\n\t\t\tstroke4: '#6f4900',\n\t\t\tstroke2: '#c7ad7e',\n\t\t\tstroke1: '#d0b481',\n\t\t\tbgFillDark: '#1f1e1b',\n\t\t\tfgFillDark: '#f7efe2',\n\t\t\tbgFillInverted2: '#1f1e1b',\n\t\t\tbgFillInverted1: '#422800',\n\t\t\tfgFillInverted: '#f7efe2',\n\t\t\tsurface1: '#ffedc5',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n\terror: {\n\t\tramp: {\n\t\t\tbgFill1: '#cc1818',\n\t\t\tfgFill: '#f2efef',\n\t\t\tbgFill2: '#b90000',\n\t\t\tsurface2: '#fff6f5',\n\t\t\tsurface6: '#f3c9c2',\n\t\t\tsurface5: '#f7dbd7',\n\t\t\tsurface4: '#f6e6e3',\n\t\t\tsurface3: '#fff',\n\t\t\tfgSurface4: '#470000',\n\t\t\tfgSurface3: '#cc1818',\n\t\t\tfgSurface2: '#f74c40',\n\t\t\tfgSurface1: '#ff8879',\n\t\t\tstroke3: '#cc1818',\n\t\t\tstroke4: '#9d0000',\n\t\t\tstroke2: '#d39c95',\n\t\t\tstroke1: '#daa39b',\n\t\t\tbgFillDark: '#231c1b',\n\t\t\tfgFillDark: '#f2efef',\n\t\t\tbgFillInverted2: '#231c1b',\n\t\t\tbgFillInverted1: '#640000',\n\t\t\tfgFillInverted: '#f2efef',\n\t\t\tsurface1: '#fcece9',\n\t\t},\n\t\tdirection: 'darker',\n\t},\n};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMO,IAAM,gBAGT;AAAA,EACH,IAAI;AAAA,IACH,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACL,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACR,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,IACN,MAAM;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,UAAU;AAAA,IACX;AAAA,IACA,WAAW;AAAA,EACZ;AACD;",
   "names": []
 }

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

@@ -28,7 +28,9 @@ function addFallbackToVar(cssValue, tokenFallbacks, { escapeQuotes = false } = {
     (match, tokenName) => {
       let fallback = tokenFallbacks[tokenName];
       if (fallback === void 0) {
-        return match;
+        throw new Error(
+          `Unknown design token: ${tokenName}. This token is not in the design system. If this token was recently renamed, update all references to use the new name.`
+        );
       }
       if (escapeQuotes) {
         fallback = fallback.replaceAll('"', '\\"').replaceAll("'", "\\'");

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 * @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;",
+  "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\tthrow new Error(\n\t\t\t\t\t`Unknown design token: ${ tokenName }. ` +\n\t\t\t\t\t\t'This token is not in the design system. ' +\n\t\t\t\t\t\t'If this token was recently renamed, update all references to use the new name.'\n\t\t\t\t);\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,cAAM,IAAI;AAAA,UACT,yBAA0B,SAAU;AAAA,QAGrC;AAAA,MACD;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

@@ -40,7 +40,9 @@ function addFallbackToVar(cssValue, { escapeQuotes = false } = {}) {
     (match, tokenName) => {
       let fallback = tokenFallbacks[tokenName];
       if (fallback === void 0) {
-        return match;
+        throw new Error(
+          `Unknown design token: ${tokenName}. This token is not in the design system. If this token was recently renamed, update all references to use the new name.`
+        );
       }
       if (escapeQuotes) {
         fallback = fallback.replaceAll('"', '\\"').replaceAll("'", "\\'");

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 * @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;",
+  "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\tthrow new Error(\n\t\t\t\t\t`Unknown design token: ${ tokenName }. ` +\n\t\t\t\t\t\t'This token is not in the design system. ' +\n\t\t\t\t\t\t'If this token was recently renamed, update all references to use the new name.'\n\t\t\t\t);\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,cAAM,IAAI;AAAA,UACT,yBAA0B,SAAU;AAAA,QAGrC;AAAA,MACD;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"]
 }