@wordpress/theme 0.5.1-next.ba3aee3a2.0 → 0.6.0

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

@@ -1,39 +1,29 @@
-/**
- * External dependencies
- */
-import { serialize } from 'colorjs.io/fn';
-
 /**
  * Internal dependencies
  */
 import '../lib/register-color-spaces';
 import { buildRamp } from '../lib';
+import { getColorString } from '../lib/color-utils';
 import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from '../lib/ramp-configs';
 import { DEFAULT_SEED_COLORS } from '../lib/constants';
 
 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 ];
+const hStops = [ 0, 60, 120, 180, 240, 300 ];
 
-describe.skip( 'buildRamps', () => {
+describe( 'buildRamps', () => {
 	it( 'background ramp snapshots', () => {
 		const allBgColors = lStops.flatMap( ( l ) =>
 			sStops.flatMap( ( s ) =>
-				hstops.map( ( h ) => `hsl(${ h }deg ${ s }% ${ l }%)` )
+				hStops.map( ( h ) => `hsl(${ h }deg ${ s }% ${ l }%)` )
 			)
 		);
 
 		expect(
 			allBgColors.map( ( bg ) => {
 				const ramp = buildRamp( bg, BG_RAMP_CONFIG );
-				const seedOriginal = serialize( bg, {
-					format: 'hex',
-					inGamut: true,
-				} );
-				const seedComputed = serialize( ramp.ramp.surface2, {
-					format: 'hex',
-					inGamut: true,
-				} );
+				const seedOriginal = getColorString( bg );
+				const seedComputed = getColorString( ramp.ramp.surface2 );
 
 				return {
 					input: {
@@ -99,14 +89,8 @@ describe.skip( 'buildRamps', () => {
 			allPrimaryColors.map( ( primary ) =>
 				options.map( ( o ) => {
 					const ramp = buildRamp( primary, ACCENT_RAMP_CONFIG, o );
-					const seedOriginal = serialize( primary, {
-						format: 'hex',
-						inGamut: true,
-					} );
-					const seedComputed = serialize( ramp.ramp.bgFill1, {
-						format: 'hex',
-						inGamut: true,
-					} );
+					const seedOriginal = getColorString( primary );
+					const seedComputed = getColorString( ramp.ramp.bgFill1 );
 
 					return {
 						input: {

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

@@ -3,49 +3,38 @@
  * ------------------------------------------- */
 
 :root {
-	--wpds-border-radius-surface-lg: 8px; /* Large radius for surfaces */
-	--wpds-border-radius-surface-md: 4px; /* Medium radius for surfaces */
-	--wpds-border-radius-surface-sm: 2px; /* Small radius for surfaces */
-	--wpds-border-radius-surface-xs: 1px; /* Extra small radius for surfaces */
-	--wpds-border-width-interactive-focus: 2px; /* Border width for focus ring */
-	--wpds-border-width-surface-lg: 8px; /* Large width for surfaces */
-	--wpds-border-width-surface-md: 4px; /* Medium width for surfaces */
-	--wpds-border-width-surface-sm: 2px; /* Small width for surfaces */
-	--wpds-border-width-surface-xs: 1px; /* Extra small width for surfaces */
-	--wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */
-	--wpds-color-bg-interactive-brand-active: #f6f8fd; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-bg-interactive-brand-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
+	--wpds-border-radius-lg: 8px; /* Large radius */
+	--wpds-border-radius-md: 4px; /* Medium radius */
+	--wpds-border-radius-sm: 2px; /* Small radius */
+	--wpds-border-radius-xs: 1px; /* Extra small radius */
+	--wpds-border-width-focus: 2px; /* Border width for focus ring */
+	--wpds-border-width-lg: 8px; /* Large width */
+	--wpds-border-width-md: 4px; /* Medium width */
+	--wpds-border-width-sm: 2px; /* Small width */
+	--wpds-border-width-xs: 1px; /* Extra small width */
 	--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: #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: #e6eaf4; /* 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-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-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
 	--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-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
 	--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-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error 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: #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: #d2d2d2; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+	--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-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: #e2e2e2; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
+	--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-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-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
-	--wpds-color-bg-surface-info-weak: #f3f9ff; /* Background color for surfaces with info tone and weak 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-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
 	--wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */
@@ -55,7 +44,7 @@
 	--wpds-color-bg-surface-warning-weak: #fff7e0; /* 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: #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-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). */
@@ -74,24 +63,20 @@
 	--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. */
 	--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: #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: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
 	--wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
 	--wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
-	--wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
 	--wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
 	--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-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error 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: #8a8a8a; /* 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 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: #6d6d6d; /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
+	--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 neutral tone and weak emphasis, in their disabled state. */
+	--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-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. */
@@ -100,7 +85,7 @@
 	--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 neutrally-toned elements with normal emphasis, in their disabled state. */
+	--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-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. */
@@ -201,6 +186,6 @@
 
 @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
 	:root {
-		--wpds-border-width-interactive-focus: 1.5px; /* Border width for focus ring */
+		--wpds-border-width-focus: 1.5px; /* Border width for focus ring */
 	}
 }

package/src/prebuilt/js/design-tokens.mjs

@@ -4,15 +4,15 @@
  */
 
 export default [
-	'--wpds-border-radius-surface-xs',
-	'--wpds-border-radius-surface-sm',
-	'--wpds-border-radius-surface-md',
-	'--wpds-border-radius-surface-lg',
-	'--wpds-border-width-surface-xs',
-	'--wpds-border-width-surface-sm',
-	'--wpds-border-width-surface-md',
-	'--wpds-border-width-surface-lg',
-	'--wpds-border-width-interactive-focus',
+	'--wpds-border-radius-xs',
+	'--wpds-border-radius-sm',
+	'--wpds-border-radius-md',
+	'--wpds-border-radius-lg',
+	'--wpds-border-width-xs',
+	'--wpds-border-width-sm',
+	'--wpds-border-width-md',
+	'--wpds-border-width-lg',
+	'--wpds-border-width-focus',
 	'--wpds-color-bg-surface-neutral',
 	'--wpds-color-bg-surface-neutral-strong',
 	'--wpds-color-bg-surface-neutral-weak',
@@ -27,40 +27,29 @@ export default [
 	'--wpds-color-bg-surface-caution-weak',
 	'--wpds-color-bg-surface-error',
 	'--wpds-color-bg-surface-error-weak',
-	'--wpds-color-bg-interactive-neutral',
-	'--wpds-color-bg-interactive-neutral-active',
-	'--wpds-color-bg-interactive-neutral-disabled',
 	'--wpds-color-bg-interactive-neutral-strong',
 	'--wpds-color-bg-interactive-neutral-strong-active',
 	'--wpds-color-bg-interactive-neutral-strong-disabled',
 	'--wpds-color-bg-interactive-neutral-weak',
 	'--wpds-color-bg-interactive-neutral-weak-active',
 	'--wpds-color-bg-interactive-neutral-weak-disabled',
-	'--wpds-color-bg-interactive-brand',
-	'--wpds-color-bg-interactive-brand-active',
-	'--wpds-color-bg-interactive-brand-disabled',
 	'--wpds-color-bg-interactive-brand-strong',
 	'--wpds-color-bg-interactive-brand-strong-active',
-	'--wpds-color-bg-interactive-brand-strong-disabled',
 	'--wpds-color-bg-interactive-brand-weak',
 	'--wpds-color-bg-interactive-brand-weak-active',
-	'--wpds-color-bg-interactive-brand-weak-disabled',
 	'--wpds-color-bg-interactive-error',
 	'--wpds-color-bg-interactive-error-active',
-	'--wpds-color-bg-interactive-error-disabled',
 	'--wpds-color-bg-interactive-error-strong',
 	'--wpds-color-bg-interactive-error-strong-active',
-	'--wpds-color-bg-interactive-error-strong-disabled',
 	'--wpds-color-bg-interactive-error-weak',
 	'--wpds-color-bg-interactive-error-weak-active',
-	'--wpds-color-bg-interactive-error-weak-disabled',
 	'--wpds-color-bg-track-neutral-weak',
 	'--wpds-color-bg-track-neutral',
 	'--wpds-color-bg-thumb-neutral-weak',
 	'--wpds-color-bg-thumb-neutral-weak-active',
 	'--wpds-color-bg-thumb-brand',
 	'--wpds-color-bg-thumb-brand-active',
-	'--wpds-color-bg-thumb-brand-disabled',
+	'--wpds-color-bg-thumb-neutral-disabled',
 	'--wpds-color-fg-content-neutral',
 	'--wpds-color-fg-content-neutral-weak',
 	'--wpds-color-fg-content-success',
@@ -83,16 +72,12 @@ export default [
 	'--wpds-color-fg-interactive-neutral-weak-disabled',
 	'--wpds-color-fg-interactive-brand',
 	'--wpds-color-fg-interactive-brand-active',
-	'--wpds-color-fg-interactive-brand-disabled',
 	'--wpds-color-fg-interactive-brand-strong',
 	'--wpds-color-fg-interactive-brand-strong-active',
-	'--wpds-color-fg-interactive-brand-strong-disabled',
 	'--wpds-color-fg-interactive-error',
 	'--wpds-color-fg-interactive-error-active',
-	'--wpds-color-fg-interactive-error-disabled',
 	'--wpds-color-fg-interactive-error-strong',
 	'--wpds-color-fg-interactive-error-strong-active',
-	'--wpds-color-fg-interactive-error-strong-disabled',
 	'--wpds-color-stroke-surface-neutral',
 	'--wpds-color-stroke-surface-neutral-weak',
 	'--wpds-color-stroke-surface-neutral-strong',

package/src/prebuilt/ts/color-tokens.ts

@@ -10,7 +10,6 @@ export default {
 		'fg-interactive-brand-strong-active',
 	],
 	'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],
-	'primary-surface2': [ 'bg-interactive-brand-active' ],
 	'primary-surface4': [ 'bg-interactive-brand-weak-active' ],
 	'primary-fgSurface3': [
 		'fg-interactive-brand',
@@ -72,23 +71,8 @@ export default {
 	'error-stroke4': [ 'stroke-interactive-error-active' ],
 	'error-stroke1': [ 'stroke-surface-error' ],
 	'bg-surface2': [ 'bg-surface-neutral' ],
-	'bg-surface6': [
-		'bg-interactive-brand-strong-disabled',
-		'bg-interactive-error-strong-disabled',
-		'bg-interactive-neutral-strong-disabled',
-	],
-	'bg-surface5': [
-		'bg-interactive-brand-disabled',
-		'bg-interactive-brand-weak-disabled',
-		'bg-interactive-error-disabled',
-		'bg-interactive-error-weak-disabled',
-		'bg-interactive-neutral-disabled',
-		'bg-interactive-neutral-weak-disabled',
-	],
-	'bg-surface4': [
-		'bg-interactive-neutral-active',
-		'bg-interactive-neutral-weak-active',
-	],
+	'bg-surface5': [ 'bg-interactive-neutral-strong-disabled' ],
+	'bg-surface4': [ 'bg-interactive-neutral-weak-active' ],
 	'bg-surface3': [ 'bg-surface-neutral-strong' ],
 	'bg-fgSurface4': [
 		'fg-content-neutral',
@@ -97,15 +81,11 @@ export default {
 	],
 	'bg-fgSurface3': [
 		'fg-content-neutral-weak',
-		'fg-interactive-brand-strong-disabled',
-		'fg-interactive-error-strong-disabled',
-		'fg-interactive-neutral-strong-disabled',
 		'fg-interactive-neutral-weak',
 	],
 	'bg-fgSurface2': [
-		'fg-interactive-brand-disabled',
-		'fg-interactive-error-disabled',
 		'fg-interactive-neutral-disabled',
+		'fg-interactive-neutral-strong-disabled',
 		'fg-interactive-neutral-weak-disabled',
 	],
 	'bg-stroke3': [
@@ -119,7 +99,7 @@ export default {
 		'stroke-interactive-neutral-strong',
 	],
 	'bg-stroke2': [
-		'bg-thumb-brand-disabled',
+		'bg-thumb-neutral-disabled',
 		'bg-track-neutral',
 		'stroke-interactive-neutral-disabled',
 		'stroke-surface-neutral',

package/src/prebuilt/ts/token-types.ts

@@ -21,7 +21,7 @@ export type BorderRadiusSize = 'xs' | 'sm' | 'md' | 'lg';
 /**
  * Size scale for border width tokens.
  */
-export type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg';
+export type BorderWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'focus';
 
 /**
  * Target elements that tokens can be applied to.
@@ -57,10 +57,8 @@ export type SurfaceBackgroundColor =
  * Background color variants for interactive elements.
  */
 export type InteractiveBackgroundColor =
-	| 'neutral'
 	| 'neutral-strong'
 	| 'neutral-weak'
-	| 'brand'
 	| 'brand-strong'
 	| 'brand-weak'
 	| 'error'
@@ -148,15 +146,11 @@ export type ForegroundColor =
 	| 'neutral-weak-disabled'
 	| 'brand'
 	| 'brand-active'
-	| 'brand-disabled'
 	| 'brand-strong'
 	| 'brand-strong-active'
-	| 'brand-strong-disabled'
 	| 'error-active'
-	| 'error-disabled'
 	| 'error-strong'
-	| 'error-strong-active'
-	| 'error-strong-disabled';
+	| 'error-strong-active';
 
 /**
  * Font family variants.

package/src/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,7 @@ import { ThemeProvider } from '../theme-provider';
 import '../prebuilt/css/design-tokens.css';
 
 const meta: Meta< typeof ThemeProvider > = {
-	title: 'Design System/Theme Provider',
+	title: 'Design System/Theme/Theme Provider',
 	component: ThemeProvider,
 	args: {
 		isRoot: true,
@@ -132,7 +132,7 @@ const DSTokensList = () => {
 
 	return (
 		<div style={ { color: 'var( --wpds-color-fg-content-neutral )' } }>
-			<h1>DS Color tokens</h1>
+			<h1>Design System Color tokens</h1>
 			<h2>Semantic tokens (can be consumed directly)</h2>
 			<ColorTokenTable tokens={ props.semanticProps } />
 			<h2>Legacy tokens (should not be consumed directly)</h2>
@@ -233,7 +233,7 @@ const NestingDebug = ( { bg = '', primary = '', density = '' } ) => (
 				padding: 'var(--wpds-dimension-padding-surface-xs)',
 				borderRadius: '0.25rem',
 				backgroundColor:
-					'var(--wpds-color-bg-interactive-brand-weak-disabled)',
+					'var(--wpds-color-bg-interactive-neutral-weak-disabled)',
 				color: 'var(--wpds-color-fg-content-neutral)',
 			} }
 		>

package/src/stories/introduction.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
+import Readme from '../../README.md?raw';
+
+<Meta title="Design System/Theme/Introduction" />
+
+<Markdown>{Readme}</Markdown>

package/src/style.scss

@@ -0,0 +1,6 @@
+/**
+ * WordPress Design System theme styles.
+ * This exports the design tokens (CSS custom properties) for use across WordPress packages.
+ */
+
+@use "./prebuilt/css/design-tokens.css";

package/src/stylelint-plugins/test/fixtures/no-unknown-ds-tokens-valid.css

@@ -2,7 +2,7 @@
 .example {
 	background-color: var(--wpds-color-bg-surface-neutral);
 	color: var(--wpds-color-fg-content-neutral);
-	border-radius: var(--wpds-border-radius-surface-sm);
+	border-radius: var(--wpds-border-radius-sm);
 	padding: var(--wpds-dimension-padding-surface-md);
 }
 

package/src/use-theme-provider-styles.ts

@@ -6,7 +6,6 @@ import {
 	clone,
 	set,
 	to,
-	serialize,
 	sRGB,
 	HSL,
 	type PlainColorObject,
@@ -30,6 +29,7 @@ import {
 	DEFAULT_SEED_COLORS,
 	type RampResult,
 } from './color-ramps';
+import { getColorString } from './color-ramps/lib/color-utils';
 import type { ThemeProviderProps } from './types';
 
 type Entry = [ string, string ];
@@ -117,23 +117,14 @@ function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
 	);
 
 	return [
-		[
-			'--wp-admin-theme-color',
-			serialize( parsedAccent, { format: 'hex' } ),
-		],
+		[ '--wp-admin-theme-color', getColorString( parsedAccent ) ],
 		[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],
-		[
-			'--wp-admin-theme-color-darker-10',
-			serialize( darker10, { format: 'hex' } ),
-		],
+		[ '--wp-admin-theme-color-darker-10', getColorString( darker10 ) ],
 		[
 			'--wp-admin-theme-color-darker-10--rgb',
 			customRgbFormat( darker10 ),
 		],
-		[
-			'--wp-admin-theme-color-darker-20',
-			serialize( darker20, { format: 'hex' } ),
-		],
+		[ '--wp-admin-theme-color-darker-20', getColorString( darker20 ) ],
 		[
 			'--wp-admin-theme-color-darker-20--rgb',
 			customRgbFormat( darker20 ),