@wordpress/theme 0.10.1-next.v.202604091042.0 → 0.11.0

package/src/color-ramps/test/__snapshots__/index.test.ts.snap

@@ -13,7 +13,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
           },
         },
         "seedComputed": "#d1d1d1",
-        "seedOriginal": "#f8f8f8",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": false,
       },
       "output": {
@@ -58,7 +58,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
           },
         },
         "seedComputed": "#d1d1d1",
-        "seedOriginal": "#f8f8f8",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": false,
       },
       "output": {
@@ -103,7 +103,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
           },
         },
         "seedComputed": "#d1d1d1",
-        "seedOriginal": "#f8f8f8",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": false,
       },
       "output": {
@@ -148,7 +148,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
           },
         },
         "seedComputed": "#d1d1d1",
-        "seedOriginal": "#f8f8f8",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": false,
       },
       "output": {
@@ -193,7 +193,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
           },
         },
         "seedComputed": "#d2d2d2",
-        "seedOriginal": "#f8f8f8",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": false,
       },
       "output": {
@@ -237,15 +237,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
             "value": 0.7,
           },
         },
-        "seedComputed": "#f8f8f8",
-        "seedOriginal": "#f8f8f8",
+        "seedComputed": "#fcfcfc",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": true,
       },
       "output": {
         "direction": "darker",
         "ramp": {
-          "bgFill1": "#f8f8f8",
-          "bgFill2": "#e2e2e2",
+          "bgFill1": "#fcfcfc",
+          "bgFill2": "#e6e6e6",
           "bgFillDark": "#050505",
           "bgFillInverted1": "#1e1e1e",
           "bgFillInverted2": "#050505",
@@ -279,15 +279,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
             "value": 0.8,
           },
         },
-        "seedComputed": "#f8f8f8",
-        "seedOriginal": "#f8f8f8",
+        "seedComputed": "#fcfcfc",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": true,
       },
       "output": {
         "direction": "darker",
         "ramp": {
-          "bgFill1": "#f8f8f8",
-          "bgFill2": "#e2e2e2",
+          "bgFill1": "#fcfcfc",
+          "bgFill2": "#e6e6e6",
           "bgFillDark": "#1e1e1e",
           "bgFillInverted1": "#2d2d2d",
           "bgFillInverted2": "#1e1e1e",
@@ -321,15 +321,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
             "value": 0.9,
           },
         },
-        "seedComputed": "#f8f8f8",
-        "seedOriginal": "#f8f8f8",
+        "seedComputed": "#fcfcfc",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": true,
       },
       "output": {
         "direction": "darker",
         "ramp": {
-          "bgFill1": "#f8f8f8",
-          "bgFill2": "#e2e2e2",
+          "bgFill1": "#fcfcfc",
+          "bgFill2": "#e6e6e6",
           "bgFillDark": "#1e1e1e",
           "bgFillInverted1": "#2d2d2d",
           "bgFillInverted2": "#1e1e1e",
@@ -363,15 +363,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
             "value": 1,
           },
         },
-        "seedComputed": "#f8f8f8",
-        "seedOriginal": "#f8f8f8",
+        "seedComputed": "#fcfcfc",
+        "seedOriginal": "#fcfcfc",
         "seedUnchanged": true,
       },
       "output": {
         "direction": "darker",
         "ramp": {
-          "bgFill1": "#f8f8f8",
-          "bgFill2": "#e2e2e2",
+          "bgFill1": "#fcfcfc",
+          "bgFill2": "#e6e6e6",
           "bgFillDark": "#1e1e1e",
           "bgFillInverted1": "#2d2d2d",
           "bgFillInverted2": "#1e1e1e",

package/src/postcss-plugins/add-fallback-to-var.ts

@@ -27,7 +27,11 @@ export function addFallbackToVar(
 		( match, tokenName: string ) => {
 			let fallback = tokenFallbacks[ tokenName ];
 			if ( fallback === undefined ) {
-				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

package/src/postcss-plugins/ds-token-fallbacks.mjs

@@ -30,7 +30,11 @@ export function addFallbackToVar( cssValue, { escapeQuotes = false } = {} ) {
 		( match, tokenName ) => {
 			let fallback = tokenFallbacks[ tokenName ];
 			if ( fallback === undefined ) {
-				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

package/src/postcss-plugins/test/add-fallback-to-var.test.ts

@@ -8,9 +8,10 @@ const mockFallbacks: Record< string, string > = {
 		'var(--wp-admin-theme-color, #3858e9)',
 	'--wpds-color-bg-interactive-brand-strong-active':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 92%, black)',
-	'--wpds-font-family-body':
+	'--wpds-typography-font-family-body':
 		'-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
-	'--wpds-font-family-mono': '"Menlo", "Consolas", monaco, monospace',
+	'--wpds-typography-font-family-mono':
+		'"Menlo", "Consolas", monaco, monospace',
 };
 
 describe( 'addFallbackToVar', () => {
@@ -20,10 +21,10 @@ describe( 'addFallbackToVar', () => {
 		).toBe( 'var(--wpds-border-radius-sm, 2px)' );
 	} );
 
-	it( 'leaves unknown tokens untouched', () => {
-		expect(
+	it( 'throws for unknown tokens', () => {
+		expect( () =>
 			addFallbackToVar( 'var(--wpds-nonexistent-token)', mockFallbacks )
-		).toBe( 'var(--wpds-nonexistent-token)' );
+		).toThrow( /Unknown design token: --wpds-nonexistent-token/ );
 	} );
 
 	it( 'leaves non-wpds custom properties untouched', () => {
@@ -96,23 +97,23 @@ describe( 'addFallbackToVar', () => {
 		it( 'does not escape quotes by default', () => {
 			expect(
 				addFallbackToVar(
-					'var(--wpds-font-family-body)',
+					'var(--wpds-typography-font-family-body)',
 					mockFallbacks
 				)
 			).toBe(
-				'var(--wpds-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif)'
+				'var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif)'
 			);
 		} );
 
 		it( 'escapes double quotes when enabled', () => {
 			expect(
 				addFallbackToVar(
-					'var(--wpds-font-family-mono)',
+					'var(--wpds-typography-font-family-mono)',
 					mockFallbacks,
 					{ escapeQuotes: true }
 				)
 			).toBe(
-				'var(--wpds-font-family-mono, \\"Menlo\\", \\"Consolas\\", monaco, monospace)'
+				'var(--wpds-typography-font-family-mono, \\"Menlo\\", \\"Consolas\\", monaco, monospace)'
 			);
 		} );
 

package/src/postcss-plugins/test/ds-token-fallbacks.test.ts

@@ -0,0 +1,39 @@
+import { addFallbackToVar } from '../ds-token-fallbacks.mjs';
+
+describe( 'addFallbackToVar', () => {
+	it( 'injects a fallback for a known token', () => {
+		expect(
+			addFallbackToVar( 'var(--wpds-typography-font-family-mono)' )
+		).toBe(
+			'var(--wpds-typography-font-family-mono, "Menlo", "Consolas", monaco, monospace)'
+		);
+	} );
+
+	it( 'throws for an unknown token', () => {
+		expect( () => addFallbackToVar( 'var(--wpds-nonexistent)' ) ).toThrow(
+			'Unknown design token: --wpds-nonexistent'
+		);
+	} );
+
+	it( 'leaves var() calls that already have a fallback', () => {
+		expect(
+			addFallbackToVar( 'var(--wpds-border-radius-sm, 999px)' )
+		).toBe( 'var(--wpds-border-radius-sm, 999px)' );
+	} );
+
+	it( 'leaves var() calls that are not design token properties', () => {
+		expect( addFallbackToVar( 'var(--my-custom-prop)' ) ).toBe(
+			'var(--my-custom-prop)'
+		);
+	} );
+
+	it( 'escapes quotes in fallback values when escapeQuotes is true', () => {
+		expect(
+			addFallbackToVar( 'var(--wpds-typography-font-family-mono)', {
+				escapeQuotes: true,
+			} )
+		).toBe(
+			'var(--wpds-typography-font-family-mono, \\"Menlo\\", \\"Consolas\\", monaco, monospace)'
+		);
+	} );
+} );

package/src/prebuilt/css/design-tokens.css

@@ -17,38 +17,38 @@
 	--wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
 	--wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
-	--wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-active: #fff6f5; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
 	--wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
 	--wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-neutral-strong: #2d2d2d; /* Background color for interactive elements with neutral tone and strong emphasis. */
 	--wpds-color-bg-interactive-neutral-strong-active: #1e1e1e; /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-neutral-strong-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-neutral-strong-disabled: #e6e6e6; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
 	--wpds-color-bg-interactive-neutral-weak: #00000000; /* Background color for interactive elements with neutral tone and weak emphasis. */
-	--wpds-color-bg-interactive-neutral-weak-active: #eaeaea; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-neutral-weak-active: #ededed; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-neutral-weak-disabled: #00000000; /* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
-	--wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */
-	--wpds-color-bg-surface-caution: #fee994; /* Background color for surfaces with caution tone and normal emphasis. */
-	--wpds-color-bg-surface-caution-weak: #fff9c9; /* Background color for surfaces with caution tone and weak emphasis. */
+	--wpds-color-bg-surface-brand: #ecf0fa; /* Background color for surfaces with brand tone and normal emphasis. */
+	--wpds-color-bg-surface-caution: #fee995; /* Background color for surfaces with caution tone and normal emphasis. */
+	--wpds-color-bg-surface-caution-weak: #fff9ca; /* Background color for surfaces with caution tone and weak emphasis. */
 	--wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */
-	--wpds-color-bg-surface-error-weak: #fff6f4; /* Background color for surfaces with error tone and weak emphasis. */
+	--wpds-color-bg-surface-error-weak: #fff6f5; /* Background color for surfaces with error tone and weak emphasis. */
 	--wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
-	--wpds-color-bg-surface-info-weak: #f2f9ff; /* Background color for surfaces with info tone and weak emphasis. */
-	--wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */
+	--wpds-color-bg-surface-info-weak: #f3f9ff; /* Background color for surfaces with info tone and weak emphasis. */
+	--wpds-color-bg-surface-neutral: #fcfcfc; /* Background color for surfaces with normal emphasis. */
 	--wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
-	--wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */
-	--wpds-color-bg-surface-success: #c5f7cc; /* Background color for surfaces with success tone and normal emphasis. */
-	--wpds-color-bg-surface-success-weak: #eaffed; /* Background color for surfaces with success tone and weak emphasis. */
-	--wpds-color-bg-surface-warning: #fde6bd; /* Background color for surfaces with warning tone and normal emphasis. */
-	--wpds-color-bg-surface-warning-weak: #fff7e0; /* Background color for surfaces with warning tone and weak emphasis. */
+	--wpds-color-bg-surface-neutral-weak: #f4f4f4; /* Background color for surfaces with weak emphasis. */
+	--wpds-color-bg-surface-success: #c6f7cd; /* Background color for surfaces with success tone and normal emphasis. */
+	--wpds-color-bg-surface-success-weak: #ebffed; /* Background color for surfaces with success tone and weak emphasis. */
+	--wpds-color-bg-surface-warning: #fde6be; /* Background color for surfaces with warning tone and normal emphasis. */
+	--wpds-color-bg-surface-warning-weak: #fff7e1; /* Background color for surfaces with warning tone and weak emphasis. */
 	--wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
 	--wpds-color-bg-thumb-brand-active: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
-	--wpds-color-bg-thumb-neutral-disabled: #d8d8d8; /* Background color for thumbs with normal emphasis (eg. slider thumb and filled track), in their disabled state, regardless of the tone. */
-	--wpds-color-bg-thumb-neutral-weak: #8a8a8a; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
-	--wpds-color-bg-thumb-neutral-weak-active: #6c6c6c; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
-	--wpds-color-bg-track-neutral: #d8d8d8; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
-	--wpds-color-bg-track-neutral-weak: #e0e0e0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
+	--wpds-color-bg-thumb-neutral-disabled: #dbdbdb; /* Background color for thumbs with normal emphasis (eg. slider thumb and filled track), in their disabled state, regardless of the tone. */
+	--wpds-color-bg-thumb-neutral-weak: #8d8d8d; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
+	--wpds-color-bg-thumb-neutral-weak-active: #6e6e6e; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
+	--wpds-color-bg-track-neutral: #dbdbdb; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
+	--wpds-color-bg-track-neutral-weak: #e4e4e4; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
 	--wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
 	--wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */
 	--wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */
@@ -56,9 +56,9 @@
 	--wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */
 	--wpds-color-fg-content-info-weak: #006bd7; /* Foreground color for content like text with info tone and weak emphasis. */
 	--wpds-color-fg-content-neutral: #1e1e1e; /* Foreground color for content like text with normal emphasis. */
-	--wpds-color-fg-content-neutral-weak: #6d6d6d; /* Foreground color for content like text with weak emphasis. */
+	--wpds-color-fg-content-neutral-weak: #707070; /* Foreground color for content like text with weak emphasis. */
 	--wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */
-	--wpds-color-fg-content-success-weak: #007f30; /* Foreground color for content like text with success tone and weak emphasis. */
+	--wpds-color-fg-content-success-weak: #008030; /* Foreground color for content like text with success tone and weak emphasis. */
 	--wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
 	--wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */
 	--wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */
@@ -71,34 +71,34 @@
 	--wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
 	--wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-fg-interactive-neutral-disabled: #8d8d8d; /* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
 	--wpds-color-fg-interactive-neutral-strong: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis. */
 	--wpds-color-fg-interactive-neutral-strong-active: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-neutral-strong-disabled: #8a8a8a; /* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
-	--wpds-color-fg-interactive-neutral-weak: #6d6d6d; /* Foreground color for interactive elements with neutral tone and weak emphasis. */
-	--wpds-color-fg-interactive-neutral-weak-disabled: #8a8a8a; /* Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-fg-interactive-neutral-strong-disabled: #8d8d8d; /* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-fg-interactive-neutral-weak: #707070; /* Foreground color for interactive elements with neutral tone and weak emphasis. */
+	--wpds-color-fg-interactive-neutral-weak-disabled: #8d8d8d; /* Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
 	--wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
 	--wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
-	--wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
-	--wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
-	--wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
-	--wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
+	--wpds-color-stroke-interactive-neutral: #8d8d8d; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
+	--wpds-color-stroke-interactive-neutral-active: #6e6e6e; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
+	--wpds-color-stroke-interactive-neutral-disabled: #dbdbdb; /* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-stroke-interactive-neutral-strong: #6e6e6e; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
 	--wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-neutral: #d8d8d8; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-neutral-weak: #e0e0e0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
+	--wpds-color-stroke-surface-neutral: #dbdbdb; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-neutral-strong: #8d8d8d; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-neutral-weak: #e4e4e4; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
 	--wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-success-strong: #008030; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-warning: #d0b481; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
 	--wpds-cursor-control: pointer; /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
 	--wpds-dimension-base: 4px; /* Base dimension unit */
@@ -130,25 +130,27 @@
 		0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005; /* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */
 	--wpds-elevation-xs: 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005,
 		0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003; /* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */
-	--wpds-font-family-body: -apple-system, system-ui, 'Segoe UI', 'Roboto',
-		'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Body font family */
-	--wpds-font-family-heading: -apple-system, system-ui, 'Segoe UI', 'Roboto',
-		'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Headings font family */
-	--wpds-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */
-	--wpds-font-line-height-2xl: 40px; /* 2X large line height */
-	--wpds-font-line-height-lg: 28px; /* Large line height */
-	--wpds-font-line-height-md: 24px; /* Medium line height */
-	--wpds-font-line-height-sm: 20px; /* Small line height */
-	--wpds-font-line-height-xl: 32px; /* Extra large line height */
-	--wpds-font-line-height-xs: 16px; /* Extra small line height */
-	--wpds-font-size-2xl: 32px; /* 2X large font size */
-	--wpds-font-size-lg: 15px; /* Large font size */
-	--wpds-font-size-md: 13px; /* Medium font size */
-	--wpds-font-size-sm: 12px; /* Small font size */
-	--wpds-font-size-xl: 20px; /* Extra large font size */
-	--wpds-font-size-xs: 11px; /* Extra small font size */
-	--wpds-font-weight-medium: 499; /* Medium font weight for emphasis and headings */
-	--wpds-font-weight-regular: 400; /* Regular font weight for body text */
+	--wpds-typography-font-family-body: -apple-system, system-ui, 'Segoe UI',
+		'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
+		sans-serif; /* Body font family */
+	--wpds-typography-font-family-heading: -apple-system, system-ui, 'Segoe UI',
+		'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
+		sans-serif; /* Headings font family */
+	--wpds-typography-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */
+	--wpds-typography-font-size-2xl: 32px; /* 2X large font size */
+	--wpds-typography-font-size-lg: 15px; /* Large font size */
+	--wpds-typography-font-size-md: 13px; /* Medium font size */
+	--wpds-typography-font-size-sm: 12px; /* Small font size */
+	--wpds-typography-font-size-xl: 20px; /* Extra large font size */
+	--wpds-typography-font-size-xs: 11px; /* Extra small font size */
+	--wpds-typography-font-weight-medium: 499; /* Medium font weight for emphasis and headings */
+	--wpds-typography-font-weight-regular: 400; /* Regular font weight for body text */
+	--wpds-typography-line-height-2xl: 40px; /* 2X large line height */
+	--wpds-typography-line-height-lg: 28px; /* Large line height */
+	--wpds-typography-line-height-md: 24px; /* Medium line height */
+	--wpds-typography-line-height-sm: 20px; /* Small line height */
+	--wpds-typography-line-height-xl: 32px; /* Extra large line height */
+	--wpds-typography-line-height-xs: 16px; /* Extra small line height */
 }
 
 [data-wpds-theme-provider-id][data-wpds-density='compact'] {

package/src/prebuilt/js/design-token-fallbacks.mjs

@@ -21,40 +21,40 @@ export default {
 	'--wpds-color-bg-interactive-brand-weak-active':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',
 	'--wpds-color-bg-interactive-error': '#00000000',
-	'--wpds-color-bg-interactive-error-active': '#fff6f4',
+	'--wpds-color-bg-interactive-error-active': '#fff6f5',
 	'--wpds-color-bg-interactive-error-strong': '#cc1818',
 	'--wpds-color-bg-interactive-error-strong-active': '#b90000',
 	'--wpds-color-bg-interactive-error-weak': '#00000000',
 	'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',
 	'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',
 	'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',
-	'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',
+	'--wpds-color-bg-interactive-neutral-strong-disabled': '#e6e6e6',
 	'--wpds-color-bg-interactive-neutral-weak': '#00000000',
-	'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',
+	'--wpds-color-bg-interactive-neutral-weak-active': '#ededed',
 	'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',
 	'--wpds-color-bg-surface-brand':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',
-	'--wpds-color-bg-surface-caution': '#fee994',
-	'--wpds-color-bg-surface-caution-weak': '#fff9c9',
+	'--wpds-color-bg-surface-caution': '#fee995',
+	'--wpds-color-bg-surface-caution-weak': '#fff9ca',
 	'--wpds-color-bg-surface-error': '#f6e6e3',
-	'--wpds-color-bg-surface-error-weak': '#fff6f4',
+	'--wpds-color-bg-surface-error-weak': '#fff6f5',
 	'--wpds-color-bg-surface-info': '#deebfa',
-	'--wpds-color-bg-surface-info-weak': '#f2f9ff',
-	'--wpds-color-bg-surface-neutral': '#f8f8f8',
+	'--wpds-color-bg-surface-info-weak': '#f3f9ff',
+	'--wpds-color-bg-surface-neutral': '#fcfcfc',
 	'--wpds-color-bg-surface-neutral-strong': '#ffffff',
-	'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',
-	'--wpds-color-bg-surface-success': '#c5f7cc',
-	'--wpds-color-bg-surface-success-weak': '#eaffed',
-	'--wpds-color-bg-surface-warning': '#fde6bd',
-	'--wpds-color-bg-surface-warning-weak': '#fff7e0',
+	'--wpds-color-bg-surface-neutral-weak': '#f4f4f4',
+	'--wpds-color-bg-surface-success': '#c6f7cd',
+	'--wpds-color-bg-surface-success-weak': '#ebffed',
+	'--wpds-color-bg-surface-warning': '#fde6be',
+	'--wpds-color-bg-surface-warning-weak': '#fff7e1',
 	'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',
 	'--wpds-color-bg-thumb-brand-active':
 		'var(--wp-admin-theme-color, #3858e9)',
-	'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',
-	'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',
-	'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',
-	'--wpds-color-bg-track-neutral': '#d8d8d8',
-	'--wpds-color-bg-track-neutral-weak': '#e0e0e0',
+	'--wpds-color-bg-thumb-neutral-disabled': '#dbdbdb',
+	'--wpds-color-bg-thumb-neutral-weak': '#8d8d8d',
+	'--wpds-color-bg-thumb-neutral-weak-active': '#6e6e6e',
+	'--wpds-color-bg-track-neutral': '#dbdbdb',
+	'--wpds-color-bg-track-neutral-weak': '#e4e4e4',
 	'--wpds-color-fg-content-caution': '#281d00',
 	'--wpds-color-fg-content-caution-weak': '#826a00',
 	'--wpds-color-fg-content-error': '#470000',
@@ -62,9 +62,9 @@ export default {
 	'--wpds-color-fg-content-info': '#001b4f',
 	'--wpds-color-fg-content-info-weak': '#006bd7',
 	'--wpds-color-fg-content-neutral': '#1e1e1e',
-	'--wpds-color-fg-content-neutral-weak': '#6d6d6d',
+	'--wpds-color-fg-content-neutral-weak': '#707070',
 	'--wpds-color-fg-content-success': '#002900',
-	'--wpds-color-fg-content-success-weak': '#007f30',
+	'--wpds-color-fg-content-success-weak': '#008030',
 	'--wpds-color-fg-content-warning': '#2e1900',
 	'--wpds-color-fg-content-warning-weak': '#926300',
 	'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',
@@ -78,12 +78,12 @@ export default {
 	'--wpds-color-fg-interactive-error-strong-active': '#f2efef',
 	'--wpds-color-fg-interactive-neutral': '#1e1e1e',
 	'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',
-	'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',
+	'--wpds-color-fg-interactive-neutral-disabled': '#8d8d8d',
 	'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',
 	'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',
-	'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',
-	'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',
-	'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',
+	'--wpds-color-fg-interactive-neutral-strong-disabled': '#8d8d8d',
+	'--wpds-color-fg-interactive-neutral-weak': '#707070',
+	'--wpds-color-fg-interactive-neutral-weak-disabled': '#8d8d8d',
 	'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',
 	'--wpds-color-stroke-interactive-brand':
 		'var(--wp-admin-theme-color, #3858e9)',
@@ -92,10 +92,10 @@ export default {
 	'--wpds-color-stroke-interactive-error': '#cc1818',
 	'--wpds-color-stroke-interactive-error-active': '#9d0000',
 	'--wpds-color-stroke-interactive-error-strong': '#cc1818',
-	'--wpds-color-stroke-interactive-neutral': '#8a8a8a',
-	'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',
-	'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',
-	'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',
+	'--wpds-color-stroke-interactive-neutral': '#8d8d8d',
+	'--wpds-color-stroke-interactive-neutral-active': '#6e6e6e',
+	'--wpds-color-stroke-interactive-neutral-disabled': '#dbdbdb',
+	'--wpds-color-stroke-interactive-neutral-strong': '#6e6e6e',
 	'--wpds-color-stroke-surface-brand':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',
 	'--wpds-color-stroke-surface-brand-strong':
@@ -104,12 +104,12 @@ export default {
 	'--wpds-color-stroke-surface-error-strong': '#cc1818',
 	'--wpds-color-stroke-surface-info': '#9fbcdc',
 	'--wpds-color-stroke-surface-info-strong': '#006bd7',
-	'--wpds-color-stroke-surface-neutral': '#d8d8d8',
-	'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',
-	'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',
+	'--wpds-color-stroke-surface-neutral': '#dbdbdb',
+	'--wpds-color-stroke-surface-neutral-strong': '#8d8d8d',
+	'--wpds-color-stroke-surface-neutral-weak': '#e4e4e4',
 	'--wpds-color-stroke-surface-success': '#8ac894',
-	'--wpds-color-stroke-surface-success-strong': '#007f30',
-	'--wpds-color-stroke-surface-warning': '#d0b381',
+	'--wpds-color-stroke-surface-success-strong': '#008030',
+	'--wpds-color-stroke-surface-warning': '#d0b481',
 	'--wpds-color-stroke-surface-warning-strong': '#926300',
 	'--wpds-cursor-control': 'pointer',
 	'--wpds-dimension-base': '4px',
@@ -141,23 +141,24 @@ export default {
 		'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',
 	'--wpds-elevation-xs':
 		'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',
-	'--wpds-font-family-body':
+	'--wpds-typography-font-family-body':
 		'-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
-	'--wpds-font-family-heading':
+	'--wpds-typography-font-family-heading':
 		'-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
-	'--wpds-font-family-mono': '"Menlo", "Consolas", monaco, monospace',
-	'--wpds-font-line-height-2xl': '40px',
-	'--wpds-font-line-height-lg': '28px',
-	'--wpds-font-line-height-md': '24px',
-	'--wpds-font-line-height-sm': '20px',
-	'--wpds-font-line-height-xl': '32px',
-	'--wpds-font-line-height-xs': '16px',
-	'--wpds-font-size-2xl': '32px',
-	'--wpds-font-size-lg': '15px',
-	'--wpds-font-size-md': '13px',
-	'--wpds-font-size-sm': '12px',
-	'--wpds-font-size-xl': '20px',
-	'--wpds-font-size-xs': '11px',
-	'--wpds-font-weight-medium': '499',
-	'--wpds-font-weight-regular': '400',
+	'--wpds-typography-font-family-mono':
+		'"Menlo", "Consolas", monaco, monospace',
+	'--wpds-typography-font-size-2xl': '32px',
+	'--wpds-typography-font-size-lg': '15px',
+	'--wpds-typography-font-size-md': '13px',
+	'--wpds-typography-font-size-sm': '12px',
+	'--wpds-typography-font-size-xl': '20px',
+	'--wpds-typography-font-size-xs': '11px',
+	'--wpds-typography-font-weight-medium': '499',
+	'--wpds-typography-font-weight-regular': '400',
+	'--wpds-typography-line-height-2xl': '40px',
+	'--wpds-typography-line-height-lg': '28px',
+	'--wpds-typography-line-height-md': '24px',
+	'--wpds-typography-line-height-sm': '20px',
+	'--wpds-typography-line-height-xl': '32px',
+	'--wpds-typography-line-height-xs': '16px',
 };