@wordpress/theme 0.7.1-next.v.202602111440.0 → 0.8.0

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

@@ -0,0 +1,91 @@
+import { addFallbackToVar } from '../add-fallback-to-var';
+
+const mockFallbacks: Record< string, string > = {
+	'--wpds-border-radius-sm': '2px',
+	'--wpds-dimension-gap-sm': '8px',
+	'--wpds-dimension-gap-lg': '16px',
+	'--wpds-color-bg-interactive-brand-strong':
+		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-bg-interactive-brand-strong-active':
+		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 92%, black)',
+};
+
+describe( 'addFallbackToVar', () => {
+	it( 'injects a fallback for a known token', () => {
+		expect(
+			addFallbackToVar( 'var(--wpds-border-radius-sm)', mockFallbacks )
+		).toBe( 'var(--wpds-border-radius-sm, 2px)' );
+	} );
+
+	it( 'leaves unknown tokens untouched', () => {
+		expect(
+			addFallbackToVar( 'var(--wpds-nonexistent-token)', mockFallbacks )
+		).toBe( 'var(--wpds-nonexistent-token)' );
+	} );
+
+	it( 'leaves non-wpds custom properties untouched', () => {
+		expect(
+			addFallbackToVar( 'var(--my-custom-prop)', mockFallbacks )
+		).toBe( 'var(--my-custom-prop)' );
+	} );
+
+	it( 'does not double-wrap a var() that already has a fallback', () => {
+		expect(
+			addFallbackToVar(
+				'var(--wpds-border-radius-sm, 999px)',
+				mockFallbacks
+			)
+		).toBe( 'var(--wpds-border-radius-sm, 999px)' );
+	} );
+
+	it( 'handles multiple var() calls in one value', () => {
+		const input =
+			'var(--wpds-dimension-gap-sm) var(--wpds-dimension-gap-lg)';
+		const result = addFallbackToVar( input, mockFallbacks );
+		expect( result ).toBe(
+			'var(--wpds-dimension-gap-sm, 8px) var(--wpds-dimension-gap-lg, 16px)'
+		);
+	} );
+
+	it( 'injects a brand token fallback with var(--wp-admin-theme-color)', () => {
+		const result = addFallbackToVar(
+			'var(--wpds-color-bg-interactive-brand-strong)',
+			mockFallbacks
+		);
+		expect( result ).toBe(
+			'var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9))'
+		);
+	} );
+
+	it( 'injects a color-mix fallback for a derived brand token', () => {
+		const result = addFallbackToVar(
+			'var(--wpds-color-bg-interactive-brand-strong-active)',
+			mockFallbacks
+		);
+		expect( result ).toBe(
+			'var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 92%, black))'
+		);
+	} );
+
+	it( 'returns the original string when there are no var() calls', () => {
+		expect( addFallbackToVar( '10px solid red', mockFallbacks ) ).toBe(
+			'10px solid red'
+		);
+	} );
+
+	it( 'injects a fallback inside calc()', () => {
+		expect(
+			addFallbackToVar(
+				'calc(var(--wpds-dimension-gap-sm) * 2)',
+				mockFallbacks
+			)
+		).toBe( 'calc(var(--wpds-dimension-gap-sm, 8px) * 2)' );
+	} );
+
+	it( 'is idempotent — running twice gives the same result', () => {
+		const input = 'var(--wpds-border-radius-sm)';
+		const first = addFallbackToVar( input, mockFallbacks );
+		const second = addFallbackToVar( first, mockFallbacks );
+		expect( second ).toBe( first );
+	} );
+} );

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

@@ -100,6 +100,7 @@
 	--wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
+	--wpds-cursor-control: default; /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
 	--wpds-dimension-base: 4px; /* Base dimension unit */
 	--wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
 	--wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
@@ -144,24 +145,6 @@
 	--wpds-font-weight-regular: 400; /* Regular font weight for body text */
 }
 
-[data-wpds-theme-provider-id][data-wpds-density='default'] {
-	--wpds-dimension-base: 4px; /* Base dimension unit */
-	--wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
-	--wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
-	--wpds-dimension-gap-lg: 16px; /* Large gap */
-	--wpds-dimension-gap-md: 12px; /* Medium gap */
-	--wpds-dimension-gap-sm: 8px; /* Small gap */
-	--wpds-dimension-gap-xl: 24px; /* Extra large gap */
-	--wpds-dimension-gap-xs: 4px; /* Extra small gap */
-	--wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
-	--wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
-	--wpds-dimension-padding-lg: 16px; /* Large padding */
-	--wpds-dimension-padding-md: 12px; /* Medium padding */
-	--wpds-dimension-padding-sm: 8px; /* Small padding */
-	--wpds-dimension-padding-xl: 20px; /* Extra large padding */
-	--wpds-dimension-padding-xs: 4px; /* Extra small padding */
-}
-
 [data-wpds-theme-provider-id][data-wpds-density='compact'] {
 	--wpds-dimension-gap-2xl: 24px; /* 2x extra large gap */
 	--wpds-dimension-gap-3xl: 32px; /* 3x extra large gap */
@@ -196,6 +179,24 @@
 	--wpds-dimension-padding-xs: 8px; /* Extra small padding */
 }
 
+[data-wpds-theme-provider-id][data-wpds-density='default'] {
+	--wpds-dimension-base: 4px; /* Base dimension unit */
+	--wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
+	--wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
+	--wpds-dimension-gap-lg: 16px; /* Large gap */
+	--wpds-dimension-gap-md: 12px; /* Medium gap */
+	--wpds-dimension-gap-sm: 8px; /* Small gap */
+	--wpds-dimension-gap-xl: 24px; /* Extra large gap */
+	--wpds-dimension-gap-xs: 4px; /* Extra small gap */
+	--wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
+	--wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
+	--wpds-dimension-padding-lg: 16px; /* Large padding */
+	--wpds-dimension-padding-md: 12px; /* Medium padding */
+	--wpds-dimension-padding-sm: 8px; /* Small padding */
+	--wpds-dimension-padding-xl: 20px; /* Extra large padding */
+	--wpds-dimension-padding-xs: 4px; /* Extra small padding */
+}
+
 @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-token-fallbacks.mjs

@@ -0,0 +1,157 @@
+/*
+ * This file is generated by the @wordpress/terrazzo-plugin-ds-token-fallbacks plugin.
+ * Do not edit this file directly.
+ */
+
+export default {
+	'--wpds-border-radius-lg': '8px',
+	'--wpds-border-radius-md': '4px',
+	'--wpds-border-radius-sm': '2px',
+	'--wpds-border-radius-xs': '1px',
+	'--wpds-border-width-focus': 'var(--wp-admin-border-width-focus, 2px)',
+	'--wpds-border-width-lg': '8px',
+	'--wpds-border-width-md': '4px',
+	'--wpds-border-width-sm': '2px',
+	'--wpds-border-width-xs': '1px',
+	'--wpds-color-bg-interactive-brand-strong':
+		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-bg-interactive-brand-strong-active':
+		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',
+	'--wpds-color-bg-interactive-brand-weak': '#00000000',
+	'--wpds-color-bg-interactive-brand-weak-active':
+		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',
+	'--wpds-color-bg-interactive-error': '#00000000',
+	'--wpds-color-bg-interactive-error-active': '#fff6f4',
+	'--wpds-color-bg-interactive-error-strong': '#cc1818',
+	'--wpds-color-bg-interactive-error-strong-active': '#b90000',
+	'--wpds-color-bg-interactive-error-weak': '#00000000',
+	'--wpds-color-bg-interactive-error-weak-active': '#f6e6e3',
+	'--wpds-color-bg-interactive-neutral-strong': '#2d2d2d',
+	'--wpds-color-bg-interactive-neutral-strong-active': '#1e1e1e',
+	'--wpds-color-bg-interactive-neutral-strong-disabled': '#e2e2e2',
+	'--wpds-color-bg-interactive-neutral-weak': '#00000000',
+	'--wpds-color-bg-interactive-neutral-weak-active': '#eaeaea',
+	'--wpds-color-bg-interactive-neutral-weak-disabled': '#00000000',
+	'--wpds-color-bg-surface-brand':
+		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)',
+	'--wpds-color-bg-surface-caution': '#fee994',
+	'--wpds-color-bg-surface-caution-weak': '#fff9c9',
+	'--wpds-color-bg-surface-error': '#f6e6e3',
+	'--wpds-color-bg-surface-error-weak': '#fff6f4',
+	'--wpds-color-bg-surface-info': '#deebfa',
+	'--wpds-color-bg-surface-info-weak': '#f2f9ff',
+	'--wpds-color-bg-surface-neutral': '#f8f8f8',
+	'--wpds-color-bg-surface-neutral-strong': '#ffffff',
+	'--wpds-color-bg-surface-neutral-weak': '#f0f0f0',
+	'--wpds-color-bg-surface-success': '#c5f7cc',
+	'--wpds-color-bg-surface-success-weak': '#eaffed',
+	'--wpds-color-bg-surface-warning': '#fde6bd',
+	'--wpds-color-bg-surface-warning-weak': '#fff7e0',
+	'--wpds-color-bg-thumb-brand': 'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-bg-thumb-brand-active':
+		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-bg-thumb-neutral-disabled': '#d8d8d8',
+	'--wpds-color-bg-thumb-neutral-weak': '#8a8a8a',
+	'--wpds-color-bg-thumb-neutral-weak-active': '#6c6c6c',
+	'--wpds-color-bg-track-neutral': '#d8d8d8',
+	'--wpds-color-bg-track-neutral-weak': '#e0e0e0',
+	'--wpds-color-fg-content-caution': '#281d00',
+	'--wpds-color-fg-content-caution-weak': '#826a00',
+	'--wpds-color-fg-content-error': '#470000',
+	'--wpds-color-fg-content-error-weak': '#cc1818',
+	'--wpds-color-fg-content-info': '#001b4f',
+	'--wpds-color-fg-content-info-weak': '#006bd7',
+	'--wpds-color-fg-content-neutral': '#1e1e1e',
+	'--wpds-color-fg-content-neutral-weak': '#6d6d6d',
+	'--wpds-color-fg-content-success': '#002900',
+	'--wpds-color-fg-content-success-weak': '#007f30',
+	'--wpds-color-fg-content-warning': '#2e1900',
+	'--wpds-color-fg-content-warning-weak': '#926300',
+	'--wpds-color-fg-interactive-brand': 'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-fg-interactive-brand-active':
+		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-fg-interactive-brand-strong': '#fff',
+	'--wpds-color-fg-interactive-brand-strong-active': '#fff',
+	'--wpds-color-fg-interactive-error': '#cc1818',
+	'--wpds-color-fg-interactive-error-active': '#cc1818',
+	'--wpds-color-fg-interactive-error-strong': '#f2efef',
+	'--wpds-color-fg-interactive-error-strong-active': '#f2efef',
+	'--wpds-color-fg-interactive-neutral': '#1e1e1e',
+	'--wpds-color-fg-interactive-neutral-active': '#1e1e1e',
+	'--wpds-color-fg-interactive-neutral-disabled': '#8a8a8a',
+	'--wpds-color-fg-interactive-neutral-strong': '#f0f0f0',
+	'--wpds-color-fg-interactive-neutral-strong-active': '#f0f0f0',
+	'--wpds-color-fg-interactive-neutral-strong-disabled': '#8a8a8a',
+	'--wpds-color-fg-interactive-neutral-weak': '#6d6d6d',
+	'--wpds-color-fg-interactive-neutral-weak-disabled': '#8a8a8a',
+	'--wpds-color-stroke-focus-brand': 'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-stroke-interactive-brand':
+		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-stroke-interactive-brand-active':
+		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',
+	'--wpds-color-stroke-interactive-error': '#cc1818',
+	'--wpds-color-stroke-interactive-error-active': '#9d0000',
+	'--wpds-color-stroke-interactive-error-strong': '#cc1818',
+	'--wpds-color-stroke-interactive-neutral': '#8a8a8a',
+	'--wpds-color-stroke-interactive-neutral-active': '#6c6c6c',
+	'--wpds-color-stroke-interactive-neutral-disabled': '#d8d8d8',
+	'--wpds-color-stroke-interactive-neutral-strong': '#6c6c6c',
+	'--wpds-color-stroke-surface-brand':
+		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white)',
+	'--wpds-color-stroke-surface-brand-strong':
+		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-stroke-surface-error': '#daa39b',
+	'--wpds-color-stroke-surface-error-strong': '#cc1818',
+	'--wpds-color-stroke-surface-info': '#9fbcdc',
+	'--wpds-color-stroke-surface-info-strong': '#006bd7',
+	'--wpds-color-stroke-surface-neutral': '#d8d8d8',
+	'--wpds-color-stroke-surface-neutral-strong': '#8a8a8a',
+	'--wpds-color-stroke-surface-neutral-weak': '#e0e0e0',
+	'--wpds-color-stroke-surface-success': '#8ac894',
+	'--wpds-color-stroke-surface-success-strong': '#007f30',
+	'--wpds-color-stroke-surface-warning': '#d0b381',
+	'--wpds-color-stroke-surface-warning-strong': '#926300',
+	'--wpds-cursor-control': 'default',
+	'--wpds-dimension-base': '4px',
+	'--wpds-dimension-gap-2xl': '32px',
+	'--wpds-dimension-gap-3xl': '40px',
+	'--wpds-dimension-gap-lg': '16px',
+	'--wpds-dimension-gap-md': '12px',
+	'--wpds-dimension-gap-sm': '8px',
+	'--wpds-dimension-gap-xl': '24px',
+	'--wpds-dimension-gap-xs': '4px',
+	'--wpds-dimension-padding-2xl': '24px',
+	'--wpds-dimension-padding-3xl': '32px',
+	'--wpds-dimension-padding-lg': '16px',
+	'--wpds-dimension-padding-md': '12px',
+	'--wpds-dimension-padding-sm': '8px',
+	'--wpds-dimension-padding-xl': '20px',
+	'--wpds-dimension-padding-xs': '4px',
+	'--wpds-elevation-lg':
+		'0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005',
+	'--wpds-elevation-md':
+		'0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005',
+	'--wpds-elevation-sm':
+		'0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005',
+	'--wpds-elevation-xs':
+		'0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003',
+	'--wpds-font-family-body':
+		'-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
+	'--wpds-font-family-heading':
+		'-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif',
+	'--wpds-font-family-mono': '"Menlo", "Consolas", monaco, monospace',
+	'--wpds-font-line-height-2xl': '40px',
+	'--wpds-font-line-height-lg': '28px',
+	'--wpds-font-line-height-md': '24px',
+	'--wpds-font-line-height-sm': '20px',
+	'--wpds-font-line-height-xl': '32px',
+	'--wpds-font-line-height-xs': '16px',
+	'--wpds-font-size-2xl': '32px',
+	'--wpds-font-size-lg': '15px',
+	'--wpds-font-size-md': '13px',
+	'--wpds-font-size-sm': '12px',
+	'--wpds-font-size-xl': '20px',
+	'--wpds-font-size-xs': '11px',
+	'--wpds-font-weight-medium': '499',
+	'--wpds-font-weight-regular': '400',
+};

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

@@ -101,6 +101,7 @@ export default [
 	'--wpds-color-stroke-interactive-error-active',
 	'--wpds-color-stroke-interactive-error-strong',
 	'--wpds-color-stroke-focus-brand',
+	'--wpds-cursor-control',
 	'--wpds-dimension-base',
 	'--wpds-dimension-padding-xs',
 	'--wpds-dimension-padding-sm',

package/src/vite-plugins/vite-ds-token-fallbacks.d.mts

@@ -0,0 +1,2 @@
+declare const plugin: () => import('vite').Plugin;
+export default plugin;

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

@@ -0,0 +1,28 @@
+import { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';
+
+/**
+ * Vite plugin that injects design-system token fallbacks into JS/TS files.
+ *
+ * Replaces bare `var(--wpds-*)` references in string literals with
+ * `var(--wpds-*, <fallback>)` so components render correctly without
+ * a ThemeProvider.
+ */
+const plugin = () => ( {
+	name: 'ds-token-fallbacks-js',
+	transform( code, id ) {
+		if ( ! /\.[mc]?[jt]sx?$/.test( id ) ) {
+			return null;
+		}
+		if ( id.includes( 'node_modules' ) ) {
+			return null;
+		}
+		if ( ! code.includes( '--wpds-' ) ) {
+			return null;
+		}
+		// Sourcemap omitted: replacements are small, inline substitutions
+		// that preserve line structure, so the debugging impact is negligible.
+		return { code: addFallbackToVar( code ), map: null };
+	},
+} );
+
+export default plugin;

package/src/style.scss

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