@wordpress/theme 0.2.1-next.16d95556a.0 → 0.2.1-next.dc3f6d3c1.0

package/src/color-ramps/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, OKLCH, parse, serialize } from 'colorjs.io/fn';
+import { get, OKLCH, parse } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -89,6 +89,7 @@ export function checkAccessibleCombinations( {
 		fgName: keyof Ramp;
 		fgColor: string;
 		unmetContrast: number;
+		achievedContrast: number;
 	}[] = [];
 
 	// Assess combinations within each ramp
@@ -96,15 +97,17 @@ export function checkAccessibleCombinations( {
 		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
 			for ( const bg of bgs ) {
 				for ( const fg of fgs ) {
-					const bgColor = parse( ramp.ramp[ bg ] );
-					const fgColor = parse( ramp.ramp[ fg ] );
-					if ( getContrast( bgColor, fgColor ) < target ) {
+					const bgColor = ramp.ramp[ bg ];
+					const fgColor = ramp.ramp[ fg ];
+					const achievedContrast = getContrast( bgColor, fgColor );
+					if ( achievedContrast < target ) {
 						unmetTargets.push( {
 							bgName: bg,
-							bgColor: serialize( bgColor ),
+							bgColor,
 							fgName: fg,
-							fgColor: serialize( fgColor ),
+							fgColor,
 							unmetContrast: target,
+							achievedContrast,
 						} );
 					}
 				}
@@ -116,15 +119,17 @@ export function checkAccessibleCombinations( {
 		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
 			for ( const bg of bgs ) {
 				for ( const fg of fgs ) {
-					const bgColor = parse( bgRamp.ramp[ bg ] );
-					const fgColor = parse( ramp.ramp[ fg ] );
-					if ( getContrast( bgColor, fgColor ) < target ) {
+					const bgColor = bgRamp.ramp[ bg ];
+					const fgColor = ramp.ramp[ fg ];
+					const achievedContrast = getContrast( bgColor, fgColor );
+					if ( achievedContrast < target ) {
 						unmetTargets.push( {
 							bgName: bg,
-							bgColor: serialize( bgColor ),
+							bgColor,
 							fgName: fg,
-							fgColor: serialize( fgColor ),
+							fgColor,
 							unmetContrast: target,
+							achievedContrast,
 						} );
 					}
 				}

package/src/color-ramps/lib/color-utils.ts

@@ -3,9 +3,11 @@
  */
 import {
 	to,
+	toGamut,
 	serialize,
 	contrastWCAG21,
 	sRGB,
+	OKLCH,
 	type ColorTypes,
 } from 'colorjs.io/fn';
 
@@ -32,3 +34,12 @@ export function getColorString( color: ColorTypes ): string {
 export function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {
 	return contrastWCAG21( colorA, colorB );
 }
+
+/**
+ * Make sure that a color is valid in the sRGB gamut and convert it to OKLCH.
+ * @param c
+ */
+export function clampToGamut( c: ColorTypes ) {
+	// map into sRGB using CSS OKLCH method
+	return to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH );
+}

package/src/color-ramps/lib/constants.ts

@@ -14,9 +14,9 @@ export const BLACK = to( 'black', OKLCH );
 
 // Margin added to target contrasts to counter for algorithm approximations and rounding errors.
 // - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.
-// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.
-// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.
-export const UNIVERSAL_CONTRAST_TOPUP = 0.012;
+// - the max contrast between adjacent RGB values is 1.016, so 0.016 is the maximum total rounding error between two values.
+// - the sum is 0.02: the margin we add to ensure that the target contrast is met after all the rounding.
+export const UNIVERSAL_CONTRAST_TOPUP = 0.02;
 
 // When enabling "lighter direction" bias, this is the amount by which
 // black text contrast needs to be greater than white text contrast.

package/src/color-ramps/lib/default-ramps.ts

@@ -13,19 +13,19 @@ export const DEFAULT_RAMPS: Record<
 			surface2: '#f8f8f8',
 			bgFill1: '#555',
 			fgFill: '#f0f0f0',
-			bgFill2: '#494949',
-			surface6: '#d3d3d3',
-			surface5: '#e3e3e3',
+			bgFill2: '#484848',
+			surface6: '#d2d2d2',
+			surface5: '#e2e2e2',
 			surface4: '#eaeaea',
 			surface3: '#fff',
 			fgSurface4: '#1e1e1e',
-			fgSurface3: '#6e6e6e',
-			fgSurface2: '#8b8b8b',
-			fgSurface1: '#ababab',
-			stroke3: '#8b8b8b',
-			stroke4: '#6d6d6d',
-			stroke2: '#adadad',
-			stroke1: '#cfcfcf',
+			fgSurface3: '#6d6d6d',
+			fgSurface2: '#8a8a8a',
+			fgSurface1: '#aaa',
+			stroke3: '#8a8a8a',
+			stroke4: '#6c6c6c',
+			stroke2: '#d8d8d8',
+			stroke1: '#e0e0e0',
 			bgFillDark: '#1e1e1e',
 			fgFillDark: '#f0f0f0',
 			bgFillInverted2: '#1e1e1e',
@@ -39,26 +39,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#3858e9',
 			fgFill: '#eff0f2',
-			bgFill2: '#2e49da',
+			bgFill2: '#2e49d9',
 			surface2: '#f6f8fc',
-			surface6: '#c7d3ef',
-			surface5: '#dce3f5',
-			surface4: '#e5ebf7',
+			surface6: '#c7d2ee',
+			surface5: '#dbe2f4',
+			surface4: '#e4eaf7',
 			surface3: '#fff',
-			fgSurface4: '#080071',
+			fgSurface4: '#0b0070',
 			fgSurface3: '#3858e9',
-			fgSurface2: '#5881ff',
-			fgSurface1: '#84a9ff',
+			fgSurface2: '#5b82ff',
+			fgSurface1: '#85a9ff',
 			stroke3: '#3858e9',
 			stroke4: '#2337c8',
-			stroke2: '#6d83bf',
-			stroke1: '#91a2cf',
+			stroke2: '#9aaad3',
+			stroke1: '#a2b1d6',
 			bgFillDark: '#1b1e26',
 			fgFillDark: '#eff0f2',
 			bgFillInverted2: '#1b1e26',
-			bgFillInverted1: '#12009f',
+			bgFillInverted1: '#13009f',
 			fgFillInverted: '#eff0f2',
-			surface1: '#edf0fa',
+			surface1: '#ecf0f9',
 		},
 		direction: 'darker',
 	},
@@ -66,26 +66,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#0090ff',
 			fgFill: '#1b1e23',
-			bgFill2: '#0081ef',
+			bgFill2: '#007fed',
 			surface2: '#f5f9fd',
-			surface6: '#bed6f1',
-			surface5: '#d5e5f6',
-			surface4: '#e0ebf8',
+			surface6: '#bdd5f1',
+			surface5: '#d4e4f6',
+			surface4: '#dfebf8',
 			surface3: '#fff',
-			fgSurface4: '#001758',
-			fgSurface3: '#006dd9',
-			fgSurface2: '#008cfb',
-			fgSurface1: '#53b1ff',
-			stroke3: '#006dd9',
-			stroke4: '#004eb8',
-			stroke2: '#5d8fc6',
-			stroke1: '#8aaed6',
+			fgSurface4: '#001b4f',
+			fgSurface3: '#006bd7',
+			fgSurface2: '#008bfa',
+			fgSurface1: '#59b0ff',
+			stroke3: '#006bd7',
+			stroke4: '#004fa9',
+			stroke2: '#94b5d9',
+			stroke1: '#9fbcdd',
 			bgFillDark: '#1b1e23',
 			fgFillDark: '#eff0f2',
 			bgFillInverted2: '#1b1e23',
-			bgFillInverted1: '#002675',
+			bgFillInverted1: '#002a69',
 			fgFillInverted: '#eff0f2',
-			surface1: '#eaf1fa',
+			surface1: '#e9f1fa',
 		},
 		direction: 'darker',
 	},
@@ -93,26 +93,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#4ab866',
 			fgFill: '#1b1f1c',
-			bgFill2: '#37a857',
+			bgFill2: '#37a756',
 			surface2: '#f0fcf2',
 			surface6: '#7eea95',
-			surface5: '#b7f2c1',
-			surface4: '#cdf5d3',
+			surface5: '#b5f1bf',
+			surface4: '#cbf5d1',
 			surface3: '#fff',
-			fgSurface4: '#002b00',
-			fgSurface3: '#008031',
-			fgSurface2: '#2c9f4e',
-			fgSurface1: '#54c16f',
-			stroke3: '#008031',
-			stroke4: '#006314',
-			stroke2: '#61986b',
-			stroke1: '#77ba84',
+			fgSurface4: '#002900',
+			fgSurface3: '#007f30',
+			fgSurface2: '#2b9e4e',
+			fgSurface1: '#53c06e',
+			stroke3: '#007f30',
+			stroke4: '#006013',
+			stroke2: '#7dc189',
+			stroke1: '#82c98f',
 			bgFillDark: '#1b1f1c',
 			fgFillDark: '#edf2ed',
 			bgFillInverted2: '#1b1f1c',
-			bgFillInverted1: '#003800',
+			bgFillInverted1: '#003701',
 			fgFillInverted: '#edf2ed',
-			surface1: '#ddf8e1',
+			surface1: '#dbf8df',
 		},
 		direction: 'darker',
 	},
@@ -120,26 +120,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#f0d149',
 			fgFill: '#1f1e1b',
-			bgFill2: '#ddbe30',
+			bgFill2: '#dcbe2f',
 			surface2: '#fdf9e7',
-			surface6: '#ecd367',
-			surface5: '#f5e399',
-			surface4: '#f8ebb5',
+			surface6: '#ecd264',
+			surface5: '#f5e297',
+			surface4: '#f7eab3',
 			surface3: '#fff',
-			fgSurface4: '#291d00',
-			fgSurface3: '#876b00',
-			fgSurface2: '#a78900',
-			fgSurface1: '#c9aa00',
-			stroke3: '#876b00',
-			stroke4: '#675000',
-			stroke2: '#978c60',
-			stroke1: '#b8ab75',
+			fgSurface4: '#281d00',
+			fgSurface3: '#836b00',
+			fgSurface2: '#a58700',
+			fgSurface1: '#c7a900',
+			stroke3: '#836b00',
+			stroke4: '#635000',
+			stroke2: '#bfb17a',
+			stroke1: '#c7b97f',
 			bgFillDark: '#1f1e1b',
 			fgFillDark: '#f6f1da',
 			bgFillInverted2: '#1f1e1b',
-			bgFillInverted1: '#3a2b00',
+			bgFillInverted1: '#392c00',
 			fgFillInverted: '#f6f1da',
-			surface1: '#faf1cd',
+			surface1: '#f9f0c8',
 		},
 		direction: 'darker',
 	},
@@ -147,26 +147,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#f0b849',
 			fgFill: '#1f1e1b',
-			bgFill2: '#dea633',
+			bgFill2: '#dda633',
 			surface2: '#fdf7ee',
-			surface6: '#f1ce90',
-			surface5: '#f6e0bb',
-			surface4: '#f8e9cd',
+			surface6: '#f1ce8f',
+			surface5: '#f6e0b9',
+			surface4: '#f8e8cc',
 			surface3: '#fff',
-			fgSurface4: '#2f1800',
-			fgSurface3: '#976300',
-			fgSurface2: '#b78100',
-			fgSurface1: '#d9a22e',
-			stroke3: '#976300',
-			stroke4: '#754900',
-			stroke2: '#9f8860',
-			stroke1: '#c2a776',
+			fgSurface4: '#2e1900',
+			fgSurface3: '#936400',
+			fgSurface2: '#b68000',
+			fgSurface1: '#d8a12c',
+			stroke3: '#936400',
+			stroke4: '#704a00',
+			stroke2: '#caae7c',
+			stroke1: '#d2b581',
 			bgFillDark: '#1f1e1b',
 			fgFillDark: '#f3f0e9',
 			bgFillInverted2: '#1f1e1b',
-			bgFillInverted1: '#432600',
+			bgFillInverted1: '#422800',
 			fgFillInverted: '#f3f0e9',
-			surface1: '#faefdc',
+			surface1: '#faeeda',
 		},
 		direction: 'darker',
 	},
@@ -174,26 +174,26 @@ export const DEFAULT_RAMPS: Record<
 		ramp: {
 			bgFill1: '#cc1818',
 			fgFill: '#f2efef',
-			bgFill2: '#bc0001',
+			bgFill2: '#b90000',
 			surface2: '#fdf6f5',
-			surface6: '#f5c9c2',
-			surface5: '#f9dcd8',
-			surface4: '#fae5e2',
+			surface6: '#f5c8c1',
+			surface5: '#f9dbd7',
+			surface4: '#fae4e1',
 			surface3: '#fff',
-			fgSurface4: '#4a0000',
+			fgSurface4: '#470000',
 			fgSurface3: '#cc1818',
-			fgSurface2: '#f84d41',
-			fgSurface1: '#ff8373',
+			fgSurface2: '#f74c40',
+			fgSurface1: '#ff8879',
 			stroke3: '#cc1818',
-			stroke4: '#a70000',
-			stroke2: '#ca675c',
-			stroke1: '#dc8e83',
+			stroke4: '#9d0000',
+			stroke2: '#de988e',
+			stroke1: '#e1a198',
 			bgFillDark: '#231c1b',
 			fgFillDark: '#f2efef',
 			bgFillInverted2: '#231c1b',
-			bgFillInverted1: '#680000',
+			bgFillInverted1: '#640000',
 			fgFillInverted: '#f2efef',
-			surface1: '#fcedea',
+			surface1: '#fbece9',
 		},
 		direction: 'darker',
 	},

package/src/color-ramps/lib/find-color-with-constraints.ts

@@ -7,9 +7,9 @@ import { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';
  * Internal dependencies
  */
 import './register-color-spaces';
-import { clampToGamut, solveWithBisect } from './utils';
+import { solveWithBisect } from './utils';
 import { WHITE, BLACK, CONTRAST_EPSILON } from './constants';
-import { getContrast } from './color-utils';
+import { clampToGamut, getContrast } from './color-utils';
 import { type TaperChromaOptions, taperChroma } from './taper-chroma';
 
 /**

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

@@ -15,10 +15,9 @@ import {
  * Internal dependencies
  */
 import './register-color-spaces';
-import { getContrast, getColorString } from './color-utils';
+import { clampToGamut, getContrast, getColorString } from './color-utils';
 import { findColorMeetingRequirements } from './find-color-with-constraints';
 import {
-	clampToGamut,
 	sortByDependency,
 	computeBetterFgColorDirection,
 	adjustContrastTarget,

package/src/color-ramps/lib/ramp-configs.ts

@@ -142,7 +142,7 @@ export const BG_RAMP_CONFIG: RampConfig = {
 		contrast: {
 			reference: 'stroke3',
 			followDirection: 'opposite',
-			target: 2.2,
+			target: 2.6,
 		},
 		taperChromaOptions: STROKE_TAPER_CHROMA,
 	},
@@ -150,7 +150,7 @@ export const BG_RAMP_CONFIG: RampConfig = {
 		contrast: {
 			reference: 'stroke3',
 			followDirection: 'opposite',
-			target: 1.5,
+			target: 2.4,
 		},
 		taperChromaOptions: STROKE_TAPER_CHROMA,
 	},

package/src/color-ramps/lib/utils.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { toGamut, to, P3, OKLCH, type ColorTypes } from 'colorjs.io/fn';
+import { type ColorTypes } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -19,13 +19,6 @@ import {
 import type { Ramp, RampConfig, RampDirection } from './types';
 import { getContrast } from './color-utils';
 
-/**
- * Make sure that a color is valid in the p3 gamut, and converts it to oklch.
- * @param c
- */
-export const clampToGamut = ( c: ColorTypes ) =>
-	to( toGamut( c, { space: P3, method: 'css' } ), OKLCH ); // map into Display-P3 using CSS OKLCH method
-
 /**
  * Build a dependency graph from the steps configuration
  * @param config - The steps configuration object

package/src/color-ramps/stories/index.story.tsx

@@ -133,10 +133,12 @@ export const Default: StoryObj< typeof ColorGen > = {
 									fgName,
 									fgColor,
 									unmetContrast,
+									achievedContrast,
 								},
 								i
 							) => (
 								<li key={ i }>
+									{ fgName } (
 									<span
 										style={ {
 											width: 20,
@@ -144,8 +146,8 @@ export const Default: StoryObj< typeof ColorGen > = {
 											backgroundColor: fgColor,
 											display: 'inline-block',
 										} }
-									></span>
-									{ fgName } over
+									/>
+									{ fgColor }) over { bgName } (
 									<span
 										style={ {
 											width: 20,
@@ -153,8 +155,9 @@ export const Default: StoryObj< typeof ColorGen > = {
 											backgroundColor: bgColor,
 											display: 'inline-block',
 										} }
-									></span>
-									{ bgName } did not meet { unmetContrast }
+									/>
+									{ bgColor }) did not meet { unmetContrast },
+									achieved just { achievedContrast }
 								</li>
 							)
 						) }

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

@@ -10,91 +10,91 @@
 	--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: #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-disabled: #e2e2e2; /* 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-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-strong-disabled: #d2d2d2; /* 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: #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-brand-weak-active: #e4eaf7; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* 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: #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-disabled: #e2e2e2; /* 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-strong-disabled: #d2d2d2; /* 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-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-interactive-neutral-weak-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
+	--wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */
+	--wpds-color-bg-surface-caution: #f7eab3; /* 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: #fae4e1; /* 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: #dfebf8; /* 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: #cbf5d1; /* 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: #f8e8cc; /* 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-bg-thumb-brand-disabled: #d8d8d8; /* 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: #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-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
+	--wpds-color-fg-content-caution-weak: #836b00; /* 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. */
 	--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-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: #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-content-neutral-weak: #6d6d6d; /* 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-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
+	--wpds-color-fg-content-warning-weak: #936400; /* 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-disabled: #8a8a8a; /* 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-brand-strong-disabled: #6d6d6d; /* 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-disabled: #8a8a8a; /* 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-fg-interactive-neutral-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+	--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 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-brand-disabled: #d8d8d8; /* 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-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 neutrally-toned elements with normal emphasis, in their disabled state. */
+	--wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
+	--wpds-color-stroke-surface-brand: #a2b1d6; /* 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: #e1a198; /* 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-color-stroke-surface-info: #9fbcdd; /* 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-success: #82c98f; /* 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: #d2b581; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-warning-strong: #936400; /* 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 */