@wordpress/theme 0.1.0

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

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+// Not sure why ESLint is erroring.
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Color from 'colorjs.io';
+
+/**
+ * Internal dependencies
+ */
+import { buildRamp } from '../lib';
+import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from '../lib/ramp-configs';
+import { DEFAULT_SEED_COLORS } from '../lib/constants';
+
+describe( '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
+		];
+
+		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 } );
+
+				return {
+					input: {
+						seedOriginal,
+						seedComputed,
+						seedUnchanged: seedOriginal === seedComputed,
+					},
+					output: ramp,
+				};
+			} )
+		).toMatchSnapshot();
+	} );
+
+	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 },
+				mainDirection: 'lighter',
+			},
+			{
+				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)
+		];
+
+		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 } );
+
+					return {
+						input: {
+							seedOriginal,
+							seedComputed,
+							seedUnchanged: seedOriginal === seedComputed,
+							bgInfo: o,
+						},
+						output: ramp,
+					};
+				} )
+			)
+		).toMatchSnapshot();
+	} );
+} );

package/src/context.ts

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ThemeProviderSettings } from './types';
+
+interface ThemeContextType {
+	resolvedSettings: ThemeProviderSettings;
+}
+
+export const ThemeContext = createContext< ThemeContextType >( {
+	resolvedSettings: {
+		color: {},
+	},
+} );

package/src/index.ts

@@ -0,0 +1,2 @@
+// Private APIs.
+export { privateApis } from './private-apis';

package/src/lock-unlock.ts

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/theme'
+	);

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

@@ -0,0 +1,401 @@
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */
+
+:root {
+	--wpds-border-radius-large: 8px; /* Large radius */
+	--wpds-border-radius-medium: 4px; /* Medium radius */
+	--wpds-border-radius-small: 2px; /* Small radius */
+	--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-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-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-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-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,
+		0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005; /* For components that offer additional actions. Example: Menus, Command Palette */
+	--wpds-elevation-small: 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a,
+		0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005; /* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */
+	--wpds-elevation-x-small: 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005,
+		0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003; /* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */
+	--wpds-font-family-body: -apple-system, system-ui, 'Segoe UI', 'Roboto',
+		'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Body font family */
+	--wpds-font-family-heading: -apple-system, system-ui, 'Segoe UI', 'Roboto',
+		'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; /* Headings font family */
+	--wpds-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */
+	--wpds-font-line-height-2x-large: 40px; /* 2X large line height */
+	--wpds-font-line-height-large: 28px; /* Large line height */
+	--wpds-font-line-height-medium: 24px; /* Medium line height */
+	--wpds-font-line-height-small: 20px; /* Small line height */
+	--wpds-font-line-height-x-large: 32px; /* Extra large line height */
+	--wpds-font-line-height-x-small: 16px; /* Extra small line height */
+	--wpds-font-size-2x-large: 32px; /* 2X large font size */
+	--wpds-font-size-large: 15px; /* Large font size */
+	--wpds-font-size-medium: 13px; /* Medium font size */
+	--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 ) {
+	:root {
+		--wpds-border-width-focus: 1.5px; /* Border width for focus ring */
+	}
+}

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

@@ -0,0 +1,116 @@
+/**
+ * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.
+ * Do not edit this file directly.
+ */
+
+export default [
+	'--wpds-border-radius-x-small',
+	'--wpds-border-radius-small',
+	'--wpds-border-radius-medium',
+	'--wpds-border-radius-large',
+	'--wpds-border-width-focus',
+	'--wpds-color-bg-surface-neutral',
+	'--wpds-color-bg-surface-neutral-strong',
+	'--wpds-color-bg-surface-neutral-weak',
+	'--wpds-color-bg-surface-brand',
+	'--wpds-color-bg-surface-success',
+	'--wpds-color-bg-surface-success-weak',
+	'--wpds-color-bg-surface-info',
+	'--wpds-color-bg-surface-info-weak',
+	'--wpds-color-bg-surface-warning',
+	'--wpds-color-bg-surface-warning-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-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-fg-content-neutral',
+	'--wpds-color-fg-content-neutral-weak',
+	'--wpds-color-fg-interactive-neutral',
+	'--wpds-color-fg-interactive-neutral-active',
+	'--wpds-color-fg-interactive-neutral-disabled',
+	'--wpds-color-fg-interactive-neutral-strong',
+	'--wpds-color-fg-interactive-neutral-strong-active',
+	'--wpds-color-fg-interactive-neutral-strong-disabled',
+	'--wpds-color-fg-interactive-neutral-weak',
+	'--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-stroke-surface-neutral',
+	'--wpds-color-stroke-surface-neutral-weak',
+	'--wpds-color-stroke-surface-neutral-strong',
+	'--wpds-color-stroke-surface-brand',
+	'--wpds-color-stroke-surface-brand-strong',
+	'--wpds-color-stroke-surface-success',
+	'--wpds-color-stroke-surface-success-strong',
+	'--wpds-color-stroke-surface-info',
+	'--wpds-color-stroke-surface-info-strong',
+	'--wpds-color-stroke-surface-warning',
+	'--wpds-color-stroke-surface-warning-strong',
+	'--wpds-color-stroke-surface-error',
+	'--wpds-color-stroke-surface-error-strong',
+	'--wpds-color-stroke-interactive-neutral',
+	'--wpds-color-stroke-interactive-neutral-active',
+	'--wpds-color-stroke-interactive-neutral-disabled',
+	'--wpds-color-stroke-interactive-neutral-strong',
+	'--wpds-color-stroke-interactive-brand',
+	'--wpds-color-stroke-interactive-brand-active',
+	'--wpds-color-stroke-interactive-brand-disabled',
+	'--wpds-color-stroke-interactive-error-strong',
+	'--wpds-color-stroke-focus-brand',
+	'--wpds-elevation-x-small',
+	'--wpds-elevation-small',
+	'--wpds-elevation-medium',
+	'--wpds-elevation-large',
+	'--wpds-spacing-05',
+	'--wpds-spacing-10',
+	'--wpds-spacing-15',
+	'--wpds-spacing-20',
+	'--wpds-spacing-30',
+	'--wpds-spacing-40',
+	'--wpds-spacing-50',
+	'--wpds-spacing-60',
+	'--wpds-spacing-70',
+	'--wpds-spacing-80',
+	'--wpds-font-family-heading',
+	'--wpds-font-family-body',
+	'--wpds-font-family-mono',
+	'--wpds-font-size-x-small',
+	'--wpds-font-size-small',
+	'--wpds-font-size-medium',
+	'--wpds-font-size-large',
+	'--wpds-font-size-x-large',
+	'--wpds-font-size-2x-large',
+	'--wpds-font-line-height-x-small',
+	'--wpds-font-line-height-small',
+	'--wpds-font-line-height-medium',
+	'--wpds-font-line-height-large',
+	'--wpds-font-line-height-x-large',
+	'--wpds-font-line-height-2x-large',
+];