@wordpress/theme 0.1.0 → 0.2.0

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

@@ -1,35 +1,42 @@
 /**
  * External dependencies
  */
-// Not sure why ESLint is erroring.
-// eslint-disable-next-line import/no-extraneous-dependencies
-import Color from 'colorjs.io';
+import { parse, to, serialize, sRGB } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import '../lib/register-color-spaces';
 import { buildRamp } from '../lib';
 import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from '../lib/ramp-configs';
 import { DEFAULT_SEED_COLORS } from '../lib/constants';
 
-describe( 'buildRamps', () => {
+const lStops = [ 100, 90, 80, 70, 60, 50, 40, 30, 20, 10 ];
+const sStops = [ 100, 80, 60, 40, 20, 0 ];
+const hstops = [ 0, 60, 120, 180, 240, 300 ];
+
+describe.skip( 'buildRamps', () => {
 	it( 'background ramp snapshots', () => {
-		// Representative sample covering edge cases and various hue/saturation/lightness combinations
-		const allBgColors = [
-			'hsl(0deg 0% 30%)', // Dark gray (desaturated)
-			'hsl(120deg 50% 60%)', // Mid-range green
-			'hsl(240deg 100% 30%)', // Dark saturated blue
-		];
+		const allBgColors = lStops.flatMap( ( l ) =>
+			sStops.flatMap( ( s ) =>
+				hstops.map( ( h ) => `hsl(${ h }deg ${ s }% ${ l }%)` )
+			)
+		);
 
 		expect(
 			allBgColors.map( ( bg ) => {
 				const ramp = buildRamp( bg, BG_RAMP_CONFIG );
-				const seedOriginal = new Color( bg )
-					.to( 'srgb' )
-					.toString( { format: 'hex', inGamut: true } );
-				const seedComputed = new Color( ramp.ramp.surface2.color )
-					.to( 'srgb' )
-					.toString( { format: 'hex', inGamut: true } );
+				const seedOriginal = serialize( to( parse( bg ), sRGB ), {
+					format: 'hex',
+					inGamut: true,
+				} );
+				const seedComputed = serialize(
+					to( parse( ramp.ramp.surface2.color ), sRGB ),
+					{
+						format: 'hex',
+						inGamut: true,
+					}
+				);
 
 				return {
 					input: {
@@ -41,42 +48,74 @@ describe( 'buildRamps', () => {
 				};
 			} )
 		).toMatchSnapshot();
-	} );
+	}, 10000 );
 
 	it( 'accent ramp snapshots', () => {
-		// Representative sample covering key option combinations
 		const options = [
 			{
 				pinLightness: { stepName: 'surface2', value: 0 },
 				mainDirection: 'lighter',
 			},
 			{
-				pinLightness: { stepName: 'surface2', value: 0.5 },
+				pinLightness: { stepName: 'surface2', value: 0.1 },
+				mainDirection: 'lighter',
+			},
+			{
+				pinLightness: { stepName: 'surface2', value: 0.2 },
+				mainDirection: 'lighter',
+			},
+			{
+				pinLightness: { stepName: 'surface2', value: 0.3 },
+				mainDirection: 'lighter',
+			},
+			{
+				pinLightness: { stepName: 'surface2', value: 0.4 },
 				mainDirection: 'lighter',
 			},
+			{
+				pinLightness: { stepName: 'surface2', value: 0.7 },
+				mainDirection: 'darker',
+			},
+			{
+				pinLightness: { stepName: 'surface2', value: 0.8 },
+				mainDirection: 'darker',
+			},
+			{
+				pinLightness: { stepName: 'surface2', value: 0.9 },
+				mainDirection: 'darker',
+			},
 			{
 				pinLightness: { stepName: 'surface2', value: 1 },
 				mainDirection: 'darker',
 			},
 		] as const;
 
-		// Representative sample covering different hue ranges and saturation levels
 		const allPrimaryColors = [
-			DEFAULT_SEED_COLORS.primary, // WP blue (mid saturation)
-			DEFAULT_SEED_COLORS.error, // WP error red (saturated)
-			'#c7a589', // WP Admin "coffee" theme accent (desaturated/beige)
+			...Object.values( DEFAULT_SEED_COLORS ),
+			'#52accc', // WP Admin "blue" theme accent
+			'#c7a589', // WP Admin "coffee" theme accent
+			'#a3b745', // WP Admin "ectoplasm" theme accent
+			'#dd823b', // WP Admin "sunrise" theme accent
 		];
 
 		expect(
 			allPrimaryColors.map( ( primary ) =>
 				options.map( ( o ) => {
 					const ramp = buildRamp( primary, ACCENT_RAMP_CONFIG, o );
-					const seedOriginal = new Color( primary )
-						.to( 'srgb' )
-						.toString( { format: 'hex', inGamut: true } );
-					const seedComputed = new Color( ramp.ramp.bgFill1.color )
-						.to( 'srgb' )
-						.toString( { format: 'hex', inGamut: true } );
+					const seedOriginal = serialize(
+						to( parse( primary ), sRGB ),
+						{
+							format: 'hex',
+							inGamut: true,
+						}
+					);
+					const seedComputed = serialize(
+						to( parse( ramp.ramp.bgFill1.color ), sRGB ),
+						{
+							format: 'hex',
+							inGamut: true,
+						}
+					);
 
 					return {
 						input: {

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

@@ -9,354 +9,97 @@
 	--wpds-border-radius-x-small: 1px; /* Extra small radius */
 	--wpds-border-width-focus: 2px; /* Border width for focus ring */
 	--wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */
-	--wpds-color-bg-interactive-brand-active: var(
-		--wpds-color-private-primary-surface2
-	); /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-brand-disabled: var(
-		--wpds-color-private-bg-surface5
-	); /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
-	--wpds-color-bg-interactive-brand-strong: var(
-		--wpds-color-private-primary-bg-fill1
-	); /* Background color for interactive elements with brand tone and strong emphasis. */
-	--wpds-color-bg-interactive-brand-strong-active: var(
-		--wpds-color-private-primary-bg-fill2
-	); /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-brand-strong-disabled: var(
-		--wpds-color-private-bg-surface6
-	); /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-brand-active: #f6f8fc; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-disabled: #e3e3e3; /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */
+	--wpds-color-bg-interactive-brand-strong-active: #2e49da; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-strong-disabled: #d3d3d3; /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
 	--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: var(
-		--wpds-color-private-primary-surface4
-	); /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-brand-weak-disabled: var(
-		--wpds-color-private-bg-surface5
-	); /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-brand-weak-active: #e5ebf7; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-weak-disabled: #e3e3e3; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
 	--wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
-	--wpds-color-bg-interactive-neutral-active: var(
-		--wpds-color-private-bg-surface4
-	); /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-neutral-disabled: var(
-		--wpds-color-private-bg-surface5
-	); /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
-	--wpds-color-bg-interactive-neutral-strong: var(
-		--wpds-color-private-bg-bg-fill-inverted1
-	); /* Background color for interactive elements with neutral tone and strong emphasis. */
-	--wpds-color-bg-interactive-neutral-strong-active: var(
-		--wpds-color-private-bg-bg-fill-inverted2
-	); /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-neutral-strong-disabled: var(
-		--wpds-color-private-bg-surface6
-	); /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-neutral-disabled: #e3e3e3; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
+	--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: #d3d3d3; /* 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: var(
-		--wpds-color-private-bg-surface4
-	); /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-neutral-weak-disabled: var(
-		--wpds-color-private-bg-surface5
-	); /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
-	--wpds-color-bg-surface-brand: var(
-		--wpds-color-private-primary-surface1
-	); /* Background color for surfaces with brand tone and normal emphasis. */
-	--wpds-color-bg-surface-error: var(
-		--wpds-color-private-error-surface4
-	); /* Background color for surfaces with error tone and normal emphasis. */
-	--wpds-color-bg-surface-error-weak: var(
-		--wpds-color-private-error-surface2
-	); /* Background color for surfaces with error tone and weak emphasis. */
-	--wpds-color-bg-surface-info: var(
-		--wpds-color-private-info-surface4
-	); /* Background color for surfaces with info tone and normal emphasis. */
-	--wpds-color-bg-surface-info-weak: var(
-		--wpds-color-private-info-surface2
-	); /* Background color for surfaces with info tone and weak emphasis. */
-	--wpds-color-bg-surface-neutral: var(
-		--wpds-color-private-bg-surface2
-	); /* Background color for surfaces with normal emphasis. */
-	--wpds-color-bg-surface-neutral-strong: var(
-		--wpds-color-private-bg-surface3
-	); /* Background color for surfaces with strong emphasis. */
-	--wpds-color-bg-surface-neutral-weak: var(
-		--wpds-color-private-bg-surface1
-	); /* Background color for surfaces with weak emphasis. */
-	--wpds-color-bg-surface-success: var(
-		--wpds-color-private-success-surface4
-	); /* Background color for surfaces with success tone and normal emphasis. */
-	--wpds-color-bg-surface-success-weak: var(
-		--wpds-color-private-success-surface2
-	); /* Background color for surfaces with success tone and weak emphasis. */
-	--wpds-color-bg-surface-warning: var(
-		--wpds-color-private-warning-surface4
-	); /* Background color for surfaces with warning tone and normal emphasis. */
-	--wpds-color-bg-surface-warning-weak: var(
-		--wpds-color-private-warning-surface2
-	); /* Background color for surfaces with warning tone and weak emphasis. */
-	--wpds-color-bg-thumb-brand: var(
-		--wpds-color-private-primary-stroke3
-	); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
-	--wpds-color-bg-thumb-brand-active: var(
-		--wpds-color-private-primary-stroke3
-	); /* 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-brand-disabled: var(
-		--wpds-color-private-bg-stroke2
-	); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
-	--wpds-color-bg-thumb-neutral-weak: var(
-		--wpds-color-private-bg-stroke3
-	); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
-	--wpds-color-bg-thumb-neutral-weak-active: var(
-		--wpds-color-private-bg-stroke4
-	); /* 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: var(
-		--wpds-color-private-bg-stroke2
-	); /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
-	--wpds-color-bg-track-neutral-weak: var(
-		--wpds-color-private-bg-stroke1
-	); /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
-	--wpds-color-fg-content-neutral: var(
-		--wpds-color-private-bg-fg-surface4
-	); /* Foreground color for content like text with normal emphasis. */
-	--wpds-color-fg-content-neutral-weak: var(
-		--wpds-color-private-bg-fg-surface3
-	); /* Foreground color for content like text with weak emphasis. */
-	--wpds-color-fg-interactive-brand: var(
-		--wpds-color-private-primary-fg-surface3
-	); /* Foreground color for interactive elements with brand tone and normal emphasis. */
-	--wpds-color-fg-interactive-brand-active: var(
-		--wpds-color-private-primary-fg-surface3
-	); /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-brand-disabled: var(
-		--wpds-color-private-bg-fg-surface2
-	); /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
-	--wpds-color-fg-interactive-brand-strong: var(
-		--wpds-color-private-primary-fg-fill
-	); /* Foreground color for interactive elements with brand tone and strong emphasis. */
-	--wpds-color-fg-interactive-brand-strong-active: var(
-		--wpds-color-private-primary-fg-fill
-	); /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-brand-strong-disabled: var(
-		--wpds-color-private-bg-fg-surface3
-	); /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
-	--wpds-color-fg-interactive-neutral: var(
-		--wpds-color-private-bg-fg-surface4
-	); /* Foreground color for interactive elements with neutral tone and normal emphasis. */
-	--wpds-color-fg-interactive-neutral-active: var(
-		--wpds-color-private-bg-fg-surface4
-	); /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-neutral-disabled: var(
-		--wpds-color-private-bg-fg-surface2
-	); /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
-	--wpds-color-fg-interactive-neutral-strong: var(
-		--wpds-color-private-bg-fg-fill-inverted
-	); /* Foreground color for interactive elements with neutral tone and strong emphasis. */
-	--wpds-color-fg-interactive-neutral-strong-active: var(
-		--wpds-color-private-bg-fg-fill-inverted
-	); /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-neutral-strong-disabled: var(
-		--wpds-color-private-bg-fg-surface3
-	); /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
-	--wpds-color-fg-interactive-neutral-weak: var(
-		--wpds-color-private-bg-fg-surface3
-	); /* Foreground color for interactive elements with neutral tone and weak emphasis. */
-	--wpds-color-fg-interactive-neutral-weak-disabled: var(
-		--wpds-color-private-bg-fg-surface2
-	); /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
-	--wpds-color-private-bg-bg-fill-dark: #1e1e1e;
-	--wpds-color-private-bg-bg-fill-inverted1: #2f2f2f;
-	--wpds-color-private-bg-bg-fill-inverted2: #1e1e1e;
-	--wpds-color-private-bg-bg-fill1: #555555;
-	--wpds-color-private-bg-bg-fill2: #474747;
-	--wpds-color-private-bg-fg-fill: #f0f0f0;
-	--wpds-color-private-bg-fg-fill-dark: #f0f0f0;
-	--wpds-color-private-bg-fg-fill-inverted: #f0f0f0;
-	--wpds-color-private-bg-fg-surface1: #a9a9a9;
-	--wpds-color-private-bg-fg-surface2: #898989;
-	--wpds-color-private-bg-fg-surface3: #6c6c6c;
-	--wpds-color-private-bg-fg-surface4: #1e1e1e;
-	--wpds-color-private-bg-stroke1: #d0d0d0;
-	--wpds-color-private-bg-stroke2: #aeaeae;
-	--wpds-color-private-bg-stroke3: #898989;
-	--wpds-color-private-bg-stroke4: #6a6a6a;
-	--wpds-color-private-bg-surface1: #efefef;
-	--wpds-color-private-bg-surface2: #f8f8f8;
-	--wpds-color-private-bg-surface3: #ffffff;
-	--wpds-color-private-bg-surface4: #eaeaea;
-	--wpds-color-private-bg-surface5: #dfdfdf;
-	--wpds-color-private-bg-surface6: #d0d0d0;
-	--wpds-color-private-error-bg-fill-dark: #231c1b;
-	--wpds-color-private-error-bg-fill-inverted1: #6d0000;
-	--wpds-color-private-error-bg-fill-inverted2: #231c1b;
-	--wpds-color-private-error-bg-fill1: #cc1818;
-	--wpds-color-private-error-bg-fill2: #b90000;
-	--wpds-color-private-error-fg-fill: #f2efef;
-	--wpds-color-private-error-fg-fill-dark: #f2efef;
-	--wpds-color-private-error-fg-fill-inverted: #f2efef;
-	--wpds-color-private-error-fg-surface1: #ff8070;
-	--wpds-color-private-error-fg-surface2: #f64b40;
-	--wpds-color-private-error-fg-surface3: #cc1818;
-	--wpds-color-private-error-fg-surface4: #4a0000;
-	--wpds-color-private-error-stroke1: #dc9085;
-	--wpds-color-private-error-stroke2: #cd695d;
-	--wpds-color-private-error-stroke3: #cc1818;
-	--wpds-color-private-error-stroke4: #a30000;
-	--wpds-color-private-error-surface1: #fcedea;
-	--wpds-color-private-error-surface2: #fdf6f5;
-	--wpds-color-private-error-surface3: #ffffff;
-	--wpds-color-private-error-surface4: #fae5e2;
-	--wpds-color-private-error-surface5: #f8d8d3;
-	--wpds-color-private-error-surface6: #f5c5bd;
-	--wpds-color-private-info-bg-fill-dark: #1b1e23;
-	--wpds-color-private-info-bg-fill-inverted1: #00297b;
-	--wpds-color-private-info-bg-fill-inverted2: #1b1e23;
-	--wpds-color-private-info-bg-fill1: #0090ff;
-	--wpds-color-private-info-bg-fill2: #007eec;
-	--wpds-color-private-info-fg-fill: #1b1e23;
-	--wpds-color-private-info-fg-fill-dark: #eff0f2;
-	--wpds-color-private-info-fg-fill-inverted: #eff0f2;
-	--wpds-color-private-info-fg-surface1: #4dafff;
-	--wpds-color-private-info-fg-surface2: #008bf9;
-	--wpds-color-private-info-fg-surface3: #006cd8;
-	--wpds-color-private-info-fg-surface4: #001758;
-	--wpds-color-private-info-stroke1: #8baed6;
-	--wpds-color-private-info-stroke2: #5c90c9;
-	--wpds-color-private-info-stroke3: #006cd8;
-	--wpds-color-private-info-stroke4: #004bb5;
-	--wpds-color-private-info-surface1: #e9f1fa;
-	--wpds-color-private-info-surface2: #f5f9fd;
-	--wpds-color-private-info-surface3: #ffffff;
-	--wpds-color-private-info-surface4: #e0ecf8;
-	--wpds-color-private-info-surface5: #d0e1f5;
-	--wpds-color-private-info-surface6: #b9d3f0;
-	--wpds-color-private-primary-bg-fill-dark: #1b1e26;
-	--wpds-color-private-primary-bg-fill-inverted1: #1401a5;
-	--wpds-color-private-primary-bg-fill-inverted2: #1b1e26;
-	--wpds-color-private-primary-bg-fill1: #3858e9;
-	--wpds-color-private-primary-bg-fill2: #2c47d7;
-	--wpds-color-private-primary-fg-fill: #eff0f2;
-	--wpds-color-private-primary-fg-fill-dark: #eff0f2;
-	--wpds-color-private-primary-fg-fill-inverted: #eff0f2;
-	--wpds-color-private-primary-fg-surface1: #81a6ff;
-	--wpds-color-private-primary-fg-surface2: #577fff;
-	--wpds-color-private-primary-fg-surface3: #3858e9;
-	--wpds-color-private-primary-fg-surface4: #080071;
-	--wpds-color-private-primary-stroke1: #93a4d0;
-	--wpds-color-private-primary-stroke2: #7085c0;
-	--wpds-color-private-primary-stroke3: #3858e9;
-	--wpds-color-private-primary-stroke4: #2236c7;
-	--wpds-color-private-primary-surface1: #ecf0f9;
-	--wpds-color-private-primary-surface2: #f6f8fc;
-	--wpds-color-private-primary-surface3: #ffffff;
-	--wpds-color-private-primary-surface4: #e5eaf7;
-	--wpds-color-private-primary-surface5: #d7dff3;
-	--wpds-color-private-primary-surface6: #c4d0ee;
-	--wpds-color-private-success-bg-fill-dark: #1b1f1c;
-	--wpds-color-private-success-bg-fill-inverted1: #003b00;
-	--wpds-color-private-success-bg-fill-inverted2: #1b1f1c;
-	--wpds-color-private-success-bg-fill1: #4ab866;
-	--wpds-color-private-success-bg-fill2: #34a554;
-	--wpds-color-private-success-fg-fill: #1b1f1c;
-	--wpds-color-private-success-fg-fill-dark: #edf2ed;
-	--wpds-color-private-success-fg-fill-inverted: #edf2ed;
-	--wpds-color-private-success-fg-surface1: #52bf6d;
-	--wpds-color-private-success-fg-surface2: #2a9e4d;
-	--wpds-color-private-success-fg-surface3: #008030;
-	--wpds-color-private-success-fg-surface4: #002b00;
-	--wpds-color-private-success-stroke1: #78bb84;
-	--wpds-color-private-success-stroke2: #629a6c;
-	--wpds-color-private-success-stroke3: #008030;
-	--wpds-color-private-success-stroke4: #006013;
-	--wpds-color-private-success-surface1: #ddf8e1;
-	--wpds-color-private-success-surface2: #f0fcf2;
-	--wpds-color-private-success-surface3: #ffffff;
-	--wpds-color-private-success-surface4: #cdf5d2;
-	--wpds-color-private-success-surface5: #abf0b7;
-	--wpds-color-private-success-surface6: #7be792;
-	--wpds-color-private-warning-bg-fill-dark: #1f1e1b;
-	--wpds-color-private-warning-bg-fill-inverted1: #472900;
-	--wpds-color-private-warning-bg-fill-inverted2: #1f1e1b;
-	--wpds-color-private-warning-bg-fill1: #f0b849;
-	--wpds-color-private-warning-bg-fill2: #dba32f;
-	--wpds-color-private-warning-fg-fill: #1f1e1b;
-	--wpds-color-private-warning-fg-fill-dark: #f3f0e9;
-	--wpds-color-private-warning-fg-fill-inverted: #f3f0e9;
-	--wpds-color-private-warning-fg-surface1: #d7a02b;
-	--wpds-color-private-warning-fg-surface2: #b58000;
-	--wpds-color-private-warning-fg-surface3: #966200;
-	--wpds-color-private-warning-fg-surface4: #2f1800;
-	--wpds-color-private-warning-stroke1: #c3a777;
-	--wpds-color-private-warning-stroke2: #a18a61;
-	--wpds-color-private-warning-stroke3: #966200;
-	--wpds-color-private-warning-stroke4: #724700;
-	--wpds-color-private-warning-surface1: #faefdc;
-	--wpds-color-private-warning-surface2: #fdf7ee;
-	--wpds-color-private-warning-surface3: #ffffff;
-	--wpds-color-private-warning-surface4: #f8e8cd;
-	--wpds-color-private-warning-surface5: #f5dcb2;
-	--wpds-color-private-warning-surface6: #f0cb89;
-	--wpds-color-stroke-focus-brand: var(
-		--wpds-color-private-primary-stroke3
-	); /* Accessible stroke color applied to focus rings. */
-	--wpds-color-stroke-interactive-brand: var(
-		--wpds-color-private-primary-stroke3
-	); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
-	--wpds-color-stroke-interactive-brand-active: var(
-		--wpds-color-private-primary-stroke4
-	); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
-	--wpds-color-stroke-interactive-brand-disabled: var(
-		--wpds-color-private-bg-stroke2
-	); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
-	--wpds-color-stroke-interactive-error-strong: var(
-		--wpds-color-private-error-stroke3
-	); /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
-	--wpds-color-stroke-interactive-neutral: var(
-		--wpds-color-private-bg-stroke3
-	); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
-	--wpds-color-stroke-interactive-neutral-active: var(
-		--wpds-color-private-bg-stroke4
-	); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
-	--wpds-color-stroke-interactive-neutral-disabled: var(
-		--wpds-color-private-bg-stroke2
-	); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
-	--wpds-color-stroke-interactive-neutral-strong: var(
-		--wpds-color-private-bg-stroke4
-	); /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
-	--wpds-color-stroke-surface-brand: var(
-		--wpds-color-private-primary-stroke1
-	); /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-brand-strong: var(
-		--wpds-color-private-primary-stroke3
-	); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-error: var(
-		--wpds-color-private-error-stroke1
-	); /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-error-strong: var(
-		--wpds-color-private-error-stroke3
-	); /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-info: var(
-		--wpds-color-private-info-stroke1
-	); /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-info-strong: var(
-		--wpds-color-private-info-stroke3
-	); /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-neutral: var(
-		--wpds-color-private-bg-stroke2
-	); /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-neutral-strong: var(
-		--wpds-color-private-bg-stroke3
-	); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-neutral-weak: var(
-		--wpds-color-private-bg-stroke1
-	); /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
-	--wpds-color-stroke-surface-success: var(
-		--wpds-color-private-success-stroke1
-	); /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-success-strong: var(
-		--wpds-color-private-success-stroke3
-	); /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-warning: var(
-		--wpds-color-private-warning-stroke1
-	); /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-warning-strong: var(
-		--wpds-color-private-warning-stroke3
-	); /* Decorative stroke color used to define warning-toned surface boundaries with strong 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-disabled: #e3e3e3; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
+	--wpds-color-bg-surface-brand: #edf0fa; /* Background color for surfaces with brand tone and normal emphasis. */
+	--wpds-color-bg-surface-caution: #f8ebb5; /* Background color for surfaces with caution tone and normal emphasis. */
+	--wpds-color-bg-surface-caution-weak: #fdf9e7; /* Background color for surfaces with caution tone and weak emphasis. */
+	--wpds-color-bg-surface-error: #fae5e2; /* Background color for surfaces with error tone and normal emphasis. */
+	--wpds-color-bg-surface-error-weak: #fdf6f5; /* Background color for surfaces with error tone and weak emphasis. */
+	--wpds-color-bg-surface-info: #e0ebf8; /* Background color for surfaces with info tone and normal emphasis. */
+	--wpds-color-bg-surface-info-weak: #f5f9fd; /* 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-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: #cdf5d3; /* Background color for surfaces with success tone and normal emphasis. */
+	--wpds-color-bg-surface-success-weak: #f0fcf2; /* Background color for surfaces with success tone and weak emphasis. */
+	--wpds-color-bg-surface-warning: #f8e9cd; /* Background color for surfaces with warning tone and normal emphasis. */
+	--wpds-color-bg-surface-warning-weak: #fdf7ee; /* 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-brand-disabled: #adadad; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
+	--wpds-color-bg-thumb-neutral-weak: #8b8b8b; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
+	--wpds-color-bg-thumb-neutral-weak-active: #6d6d6d; /* 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: #adadad; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
+	--wpds-color-bg-track-neutral-weak: #cfcfcf; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
+	--wpds-color-fg-content-caution: #291d00; /* Foreground color for content like text with caution tone and normal emphasis. */
+	--wpds-color-fg-content-caution-weak: #876b00; /* Foreground color for content like text with caution tone and weak emphasis. */
+	--wpds-color-fg-content-error: #4a0000; /* Foreground color for content like text with error tone and normal emphasis. */
+	--wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */
+	--wpds-color-fg-content-info: #001758; /* Foreground color for content like text with info tone and normal emphasis. */
+	--wpds-color-fg-content-info-weak: #006dd9; /* 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: #6e6e6e; /* Foreground color for content like text with weak emphasis. */
+	--wpds-color-fg-content-success: #002b00; /* Foreground color for content like text with success tone and normal emphasis. */
+	--wpds-color-fg-content-success-weak: #008031; /* Foreground color for content like text with success tone and weak emphasis. */
+	--wpds-color-fg-content-warning: #2f1800; /* Foreground color for content like text with warning tone and normal emphasis. */
+	--wpds-color-fg-content-warning-weak: #976300; /* 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. */
+	--wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-fg-interactive-brand-disabled: #8b8b8b; /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
+	--wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
+	--wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-fg-interactive-brand-strong-disabled: #6e6e6e; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+	--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: #8b8b8b; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
+	--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: #6e6e6e; /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+	--wpds-color-fg-interactive-neutral-weak: #6e6e6e; /* Foreground color for interactive elements with neutral tone and weak emphasis. */
+	--wpds-color-fg-interactive-neutral-weak-disabled: #8b8b8b; /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
+	--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-brand-disabled: #adadad; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
+	--wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
+	--wpds-color-stroke-interactive-neutral: #8b8b8b; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
+	--wpds-color-stroke-interactive-neutral-active: #6d6d6d; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
+	--wpds-color-stroke-interactive-neutral-disabled: #adadad; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
+	--wpds-color-stroke-interactive-neutral-strong: #6d6d6d; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
+	--wpds-color-stroke-surface-brand: #91a2cf; /* 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 neutrally-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-error: #dc8e83; /* 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: #8aaed6; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-info-strong: #006dd9; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-neutral: #adadad; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-neutral-strong: #8b8b8b; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-neutral-weak: #cfcfcf; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
+	--wpds-color-stroke-surface-success: #77ba84; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-success-strong: #008031; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-warning: #c2a776; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-warning-strong: #976300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
+	--wpds-dimension-base: 4px; /* Base dimension unit */
+	--wpds-dimension-padding-surface-large: 24px; /* Large spacing for surfaces */
+	--wpds-dimension-padding-surface-medium: 16px; /* Medium spacing for surfaces */
+	--wpds-dimension-padding-surface-small: 12px; /* Small spacing for surfaces */
+	--wpds-dimension-padding-surface-x-small: 8px; /* Extra small spacing for surfaces */
 	--wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
 		0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
 	--wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
@@ -382,16 +125,6 @@
 	--wpds-font-size-small: 12px; /* Small font size */
 	--wpds-font-size-x-large: 20px; /* Extra large font size */
 	--wpds-font-size-x-small: 11px; /* Extra small font size */
-	--wpds-spacing-05: 4px; /* Extra small spacing */
-	--wpds-spacing-10: 8px; /* Small spacing */
-	--wpds-spacing-15: 12px; /* Medium spacing */
-	--wpds-spacing-20: 16px; /* Large spacing */
-	--wpds-spacing-30: 24px; /* Extra large spacing */
-	--wpds-spacing-40: 32px; /* 2X large spacing */
-	--wpds-spacing-50: 40px; /* 3X large spacing */
-	--wpds-spacing-60: 48px; /* 4X large spacing */
-	--wpds-spacing-70: 56px; /* 5X large spacing */
-	--wpds-spacing-80: 64px; /* 6X large spacing */
 }
 
 @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {