@wordpress/theme 0.1.0 → 0.1.1-next.2f1c7c01b.0

package/src/prebuilt/json/figma.json

@@ -57,7 +57,7 @@
 	},
 	"Color/_Primitives/Primary/surface5": {
 		"value": {
-			".": "#d7dff3"
+			".": "#d8e0f3"
 		}
 	},
 	"Color/_Primitives/Primary/surface4": {
@@ -82,12 +82,12 @@
 	},
 	"Color/_Primitives/Primary/fgSurface2": {
 		"value": {
-			".": "#577fff"
+			".": "#5780ff"
 		}
 	},
 	"Color/_Primitives/Primary/fgSurface1": {
 		"value": {
-			".": "#81a6ff"
+			".": "#81a7ff"
 		}
 	},
 	"Color/_Primitives/Primary/stroke3": {
@@ -102,12 +102,12 @@
 	},
 	"Color/_Primitives/Primary/stroke2": {
 		"value": {
-			".": "#7085c0"
+			".": "#6f85c0"
 		}
 	},
 	"Color/_Primitives/Primary/stroke1": {
 		"value": {
-			".": "#93a4d0"
+			".": "#92a4cf"
 		}
 	},
 	"Color/_Primitives/Primary/bgFillDark": {
@@ -127,7 +127,7 @@
 	},
 	"Color/_Primitives/Primary/bgFillInverted1": {
 		"value": {
-			".": "#1401a5"
+			".": "#1401a4"
 		}
 	},
 	"Color/_Primitives/Primary/fgFillInverted": {
@@ -162,17 +162,17 @@
 	},
 	"Color/_Primitives/Info/surface6": {
 		"value": {
-			".": "#b9d3f0"
+			".": "#bad3f0"
 		}
 	},
 	"Color/_Primitives/Info/surface5": {
 		"value": {
-			".": "#d0e1f5"
+			".": "#d1e1f5"
 		}
 	},
 	"Color/_Primitives/Info/surface4": {
 		"value": {
-			".": "#e0ecf8"
+			".": "#e1ecf8"
 		}
 	},
 	"Color/_Primitives/Info/surface3": {
@@ -192,7 +192,7 @@
 	},
 	"Color/_Primitives/Info/fgSurface2": {
 		"value": {
-			".": "#008bf9"
+			".": "#008bfa"
 		}
 	},
 	"Color/_Primitives/Info/fgSurface1": {
@@ -212,7 +212,7 @@
 	},
 	"Color/_Primitives/Info/stroke2": {
 		"value": {
-			".": "#5c90c9"
+			".": "#5e90c7"
 		}
 	},
 	"Color/_Primitives/Info/stroke1": {
@@ -237,7 +237,7 @@
 	},
 	"Color/_Primitives/Info/bgFillInverted1": {
 		"value": {
-			".": "#00297b"
+			".": "#00297a"
 		}
 	},
 	"Color/_Primitives/Info/fgFillInverted": {
@@ -277,12 +277,12 @@
 	},
 	"Color/_Primitives/Success/surface5": {
 		"value": {
-			".": "#abf0b7"
+			".": "#acf0b7"
 		}
 	},
 	"Color/_Primitives/Success/surface4": {
 		"value": {
-			".": "#cdf5d2"
+			".": "#cdf5d3"
 		}
 	},
 	"Color/_Primitives/Success/surface3": {
@@ -317,17 +317,17 @@
 	},
 	"Color/_Primitives/Success/stroke4": {
 		"value": {
-			".": "#006013"
+			".": "#006113"
 		}
 	},
 	"Color/_Primitives/Success/stroke2": {
 		"value": {
-			".": "#629a6c"
+			".": "#62996c"
 		}
 	},
 	"Color/_Primitives/Success/stroke1": {
 		"value": {
-			".": "#78bb84"
+			".": "#78ba84"
 		}
 	},
 	"Color/_Primitives/Success/bgFillDark": {
@@ -347,7 +347,7 @@
 	},
 	"Color/_Primitives/Success/bgFillInverted1": {
 		"value": {
-			".": "#003b00"
+			".": "#003a00"
 		}
 	},
 	"Color/_Primitives/Success/fgFillInverted": {
@@ -357,7 +357,7 @@
 	},
 	"Color/_Primitives/Success/surface1": {
 		"value": {
-			".": "#ddf8e1"
+			".": "#ddf8e0"
 		}
 	},
 	"Color/_Primitives/Warning/bgFill1": {
@@ -372,7 +372,7 @@
 	},
 	"Color/_Primitives/Warning/bgFill2": {
 		"value": {
-			".": "#dba32f"
+			".": "#dba430"
 		}
 	},
 	"Color/_Primitives/Warning/surface2": {
@@ -387,12 +387,12 @@
 	},
 	"Color/_Primitives/Warning/surface5": {
 		"value": {
-			".": "#f5dcb2"
+			".": "#f5ddb2"
 		}
 	},
 	"Color/_Primitives/Warning/surface4": {
 		"value": {
-			".": "#f8e8cd"
+			".": "#f8e9cd"
 		}
 	},
 	"Color/_Primitives/Warning/surface3": {
@@ -432,12 +432,12 @@
 	},
 	"Color/_Primitives/Warning/stroke2": {
 		"value": {
-			".": "#a18a61"
+			".": "#a08961"
 		}
 	},
 	"Color/_Primitives/Warning/stroke1": {
 		"value": {
-			".": "#c3a777"
+			".": "#c2a777"
 		}
 	},
 	"Color/_Primitives/Warning/bgFillDark": {
@@ -467,7 +467,7 @@
 	},
 	"Color/_Primitives/Warning/surface1": {
 		"value": {
-			".": "#faefdc"
+			".": "#faefdb"
 		}
 	},
 	"Color/_Primitives/Error/bgFill1": {
@@ -492,7 +492,7 @@
 	},
 	"Color/_Primitives/Error/surface6": {
 		"value": {
-			".": "#f5c5bd"
+			".": "#f5c5be"
 		}
 	},
 	"Color/_Primitives/Error/surface5": {
@@ -502,7 +502,7 @@
 	},
 	"Color/_Primitives/Error/surface4": {
 		"value": {
-			".": "#fae5e2"
+			".": "#fae6e2"
 		}
 	},
 	"Color/_Primitives/Error/surface3": {
@@ -537,7 +537,7 @@
 	},
 	"Color/_Primitives/Error/stroke4": {
 		"value": {
-			".": "#a30000"
+			".": "#a40000"
 		}
 	},
 	"Color/_Primitives/Error/stroke2": {
@@ -577,7 +577,7 @@
 	},
 	"Color/_Primitives/Error/surface1": {
 		"value": {
-			".": "#fcedea"
+			".": "#fcecea"
 		}
 	},
 	"Color/_Primitives/Bg/surface2": {
@@ -627,7 +627,7 @@
 	},
 	"Color/_Primitives/Bg/fgSurface3": {
 		"value": {
-			".": "#6c6c6c"
+			".": "#6d6d6d"
 		}
 	},
 	"Color/_Primitives/Bg/fgSurface2": {
@@ -652,7 +652,7 @@
 	},
 	"Color/_Primitives/Bg/stroke2": {
 		"value": {
-			".": "#aeaeae"
+			".": "#adadad"
 		}
 	},
 	"Color/_Primitives/Bg/stroke1": {
@@ -687,7 +687,117 @@
 	},
 	"Color/_Primitives/Bg/surface1": {
 		"value": {
-			".": "#efefef"
+			".": "#f0f0f0"
+		}
+	},
+	"Color/_Primitives/Caution/bgFill1": {
+		"value": {
+			".": "#f0d149"
+		}
+	},
+	"Color/_Primitives/Caution/fgFill": {
+		"value": {
+			".": "#1f1e1b"
+		}
+	},
+	"Color/_Primitives/Caution/bgFill2": {
+		"value": {
+			".": "#dabb2b"
+		}
+	},
+	"Color/_Primitives/Caution/surface2": {
+		"value": {
+			".": "#fdf9e7"
+		}
+	},
+	"Color/_Primitives/Caution/surface6": {
+		"value": {
+			".": "#e7d070"
+		}
+	},
+	"Color/_Primitives/Caution/surface5": {
+		"value": {
+			".": "#f4e08c"
+		}
+	},
+	"Color/_Primitives/Caution/surface4": {
+		"value": {
+			".": "#f8ebb6"
+		}
+	},
+	"Color/_Primitives/Caution/surface3": {
+		"value": {
+			".": "#fff"
+		}
+	},
+	"Color/_Primitives/Caution/fgSurface4": {
+		"value": {
+			".": "#291d00"
+		}
+	},
+	"Color/_Primitives/Caution/fgSurface3": {
+		"value": {
+			".": "#866a00"
+		}
+	},
+	"Color/_Primitives/Caution/fgSurface2": {
+		"value": {
+			".": "#a58700"
+		}
+	},
+	"Color/_Primitives/Caution/fgSurface1": {
+		"value": {
+			".": "#c6a800"
+		}
+	},
+	"Color/_Primitives/Caution/stroke3": {
+		"value": {
+			".": "#866a00"
+		}
+	},
+	"Color/_Primitives/Caution/stroke4": {
+		"value": {
+			".": "#644e00"
+		}
+	},
+	"Color/_Primitives/Caution/stroke2": {
+		"value": {
+			".": "#988d60"
+		}
+	},
+	"Color/_Primitives/Caution/stroke1": {
+		"value": {
+			".": "#b8ab76"
+		}
+	},
+	"Color/_Primitives/Caution/bgFillDark": {
+		"value": {
+			".": "#1f1e1b"
+		}
+	},
+	"Color/_Primitives/Caution/fgFillDark": {
+		"value": {
+			".": "#f6f1da"
+		}
+	},
+	"Color/_Primitives/Caution/bgFillInverted2": {
+		"value": {
+			".": "#1f1e1b"
+		}
+	},
+	"Color/_Primitives/Caution/bgFillInverted1": {
+		"value": {
+			".": "#3d2d00"
+		}
+	},
+	"Color/_Primitives/Caution/fgFillInverted": {
+		"value": {
+			".": "#f6f1da"
+		}
+	},
+	"Color/_Primitives/Caution/surface1": {
+		"value": {
+			".": "#faf1cb"
 		}
 	},
 	"Color/Semantic/Background/Neutral/bgSur-neutral": {
@@ -750,6 +860,18 @@
 		},
 		"description": "Background color for surfaces with warning tone and weak emphasis."
 	},
+	"Color/Semantic/Background/Caution/bgSur-caution": {
+		"value": {
+			".": "{Color/_Primitives/Caution/surface4}"
+		},
+		"description": "Background color for surfaces with caution tone and normal emphasis."
+	},
+	"Color/Semantic/Background/Caution/bgSur-caution-weak": {
+		"value": {
+			".": "{Color/_Primitives/Caution/surface2}"
+		},
+		"description": "Background color for surfaces with caution tone and weak emphasis."
+	},
 	"Color/Semantic/Background/Error/bgSur-error": {
 		"value": {
 			".": "{Color/_Primitives/Error/surface4}"
@@ -924,6 +1046,66 @@
 		},
 		"description": "Foreground color for content like text with weak emphasis."
 	},
+	"Color/Semantic/Foreground/Success/fgCon-success": {
+		"value": {
+			".": "{Color/_Primitives/Success/fgSurface4}"
+		},
+		"description": "Foreground color for content like text with success tone and normal emphasis."
+	},
+	"Color/Semantic/Foreground/Success/fgCon-success-weak": {
+		"value": {
+			".": "{Color/_Primitives/Success/fgSurface3}"
+		},
+		"description": "Foreground color for content like text with success tone and weak emphasis."
+	},
+	"Color/Semantic/Foreground/Info/fgCon-info": {
+		"value": {
+			".": "{Color/_Primitives/Info/fgSurface4}"
+		},
+		"description": "Foreground color for content like text with info tone and normal emphasis."
+	},
+	"Color/Semantic/Foreground/Info/fgCon-info-weak": {
+		"value": {
+			".": "{Color/_Primitives/Info/fgSurface3}"
+		},
+		"description": "Foreground color for content like text with info tone and weak emphasis."
+	},
+	"Color/Semantic/Foreground/Warning/fgCon-warning": {
+		"value": {
+			".": "{Color/_Primitives/Warning/fgSurface4}"
+		},
+		"description": "Foreground color for content like text with warning tone and normal emphasis."
+	},
+	"Color/Semantic/Foreground/Warning/fgCon-warning-weak": {
+		"value": {
+			".": "{Color/_Primitives/Warning/fgSurface3}"
+		},
+		"description": "Foreground color for content like text with warning tone and weak emphasis."
+	},
+	"Color/Semantic/Foreground/Caution/fgCon-caution": {
+		"value": {
+			".": "{Color/_Primitives/Caution/fgSurface4}"
+		},
+		"description": "Foreground color for content like text with caution tone and normal emphasis."
+	},
+	"Color/Semantic/Foreground/Caution/fgCon-caution-weak": {
+		"value": {
+			".": "{Color/_Primitives/Caution/fgSurface3}"
+		},
+		"description": "Foreground color for content like text with caution tone and weak emphasis."
+	},
+	"Color/Semantic/Foreground/Error/fgCon-error": {
+		"value": {
+			".": "{Color/_Primitives/Error/fgSurface4}"
+		},
+		"description": "Foreground color for content like text with error tone and normal emphasis."
+	},
+	"Color/Semantic/Foreground/Error/fgCon-error-weak": {
+		"value": {
+			".": "{Color/_Primitives/Error/fgSurface3}"
+		},
+		"description": "Foreground color for content like text with error tone and weak emphasis."
+	},
 	"Color/Semantic/Foreground/Neutral/fgInt-neutral": {
 		"value": {
 			".": "{Color/_Primitives/Bg/fgSurface4}"

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

@@ -50,6 +50,12 @@ export default {
 	'--wpds-color-bg-surface-warning-weak': {
 		'.': 'var(--wpds-color-private-warning-surface2)',
 	},
+	'--wpds-color-bg-surface-caution': {
+		'.': 'var(--wpds-color-private-caution-surface4)',
+	},
+	'--wpds-color-bg-surface-caution-weak': {
+		'.': 'var(--wpds-color-private-caution-surface2)',
+	},
 	'--wpds-color-bg-surface-error': {
 		'.': 'var(--wpds-color-private-error-surface4)',
 	},
@@ -137,6 +143,36 @@ export default {
 	'--wpds-color-fg-content-neutral-weak': {
 		'.': 'var(--wpds-color-private-bg-fg-surface3)',
 	},
+	'--wpds-color-fg-content-success': {
+		'.': 'var(--wpds-color-private-success-fg-surface4)',
+	},
+	'--wpds-color-fg-content-success-weak': {
+		'.': 'var(--wpds-color-private-success-fg-surface3)',
+	},
+	'--wpds-color-fg-content-info': {
+		'.': 'var(--wpds-color-private-info-fg-surface4)',
+	},
+	'--wpds-color-fg-content-info-weak': {
+		'.': 'var(--wpds-color-private-info-fg-surface3)',
+	},
+	'--wpds-color-fg-content-warning': {
+		'.': 'var(--wpds-color-private-warning-fg-surface4)',
+	},
+	'--wpds-color-fg-content-warning-weak': {
+		'.': 'var(--wpds-color-private-warning-fg-surface3)',
+	},
+	'--wpds-color-fg-content-caution': {
+		'.': 'var(--wpds-color-private-caution-fg-surface4)',
+	},
+	'--wpds-color-fg-content-caution-weak': {
+		'.': 'var(--wpds-color-private-caution-fg-surface3)',
+	},
+	'--wpds-color-fg-content-error': {
+		'.': 'var(--wpds-color-private-error-fg-surface4)',
+	},
+	'--wpds-color-fg-content-error-weak': {
+		'.': 'var(--wpds-color-private-error-fg-surface3)',
+	},
 	'--wpds-color-fg-interactive-neutral': {
 		'.': 'var(--wpds-color-private-bg-fg-surface4)',
 	},

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

@@ -2,7 +2,16 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import Color from 'colorjs.io';
+import {
+	parse,
+	to,
+	get,
+	serialize,
+	sRGB,
+	HSL,
+	type ColorTypes,
+} from 'colorjs.io/fn';
+import memoize from 'memize';
 
 /**
  * WordPress dependencies
@@ -12,6 +21,7 @@ import { useMemo, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import './color-ramps/lib/register-color-spaces';
 import { ThemeContext } from './context';
 import semanticVariables from './prebuilt/ts/design-tokens';
 import {
@@ -24,6 +34,9 @@ import type { ThemeProviderProps } from './types';
 
 type Entry = [ string, string ];
 
+const getCachedBgRamp = memoize( buildBgRamp, { maxSize: 10 } );
+const getCachedAccentRamp = memoize( buildAccentRamp, { maxSize: 10 } );
+
 const legacyWpComponentsOverridesCSS: Entry[] = [
 	[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],
 	[
@@ -80,37 +93,49 @@ const legacyWpComponentsOverridesCSS: Entry[] = [
 	],
 ];
 
-function customRgbFormat( color: Color ) {
-	const rgb = color.to( 'srgb' );
-	return [ rgb.r, rgb.g, rgb.b ]
+function customRgbFormat( color: ColorTypes ) {
+	const rgb = to( color, sRGB );
+	return [ get( rgb, 'srgb.r' ), get( rgb, 'srgb.g' ), get( rgb, 'srgb.b' ) ]
 		.map( ( n ) => Math.round( n * 255 ) )
 		.join( ', ' );
 }
 
 function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
-	const parsedAccent = new Color( accent ).to( 'hsl' );
-
-	const hsl = parsedAccent.coords;
-	const darker10 = new Color( 'hsl', [
-		hsl[ 0 ], // h
-		hsl[ 1 ], // s
-		Math.max( 0, Math.min( 100, hsl[ 2 ] - 5 ) ), // l (reduced by 5%)
-	] ).to( 'srgb' );
-	const darker20 = new Color( 'hsl', [
-		hsl[ 0 ], // h
-		hsl[ 1 ], // s
-		Math.max( 0, Math.min( 100, hsl[ 2 ] - 10 ) ), // l (reduced by 10%)
-	] ).to( 'srgb' );
+	const parsedAccent = to( parse( accent ), HSL );
+
+	const coords = parsedAccent.coords;
+	const darker10 = to(
+		{
+			space: HSL,
+			coords: [
+				coords[ 0 ], // h
+				coords[ 1 ], // s
+				Math.max( 0, Math.min( 100, coords[ 2 ] - 5 ) ), // l (reduced by 5%)
+			],
+		},
+		sRGB
+	);
+	const darker20 = to(
+		{
+			space: HSL,
+			coords: [
+				coords[ 0 ], // h
+				coords[ 1 ], // s
+				Math.max( 0, Math.min( 100, coords[ 2 ] - 10 ) ), // l (reduced by 10%)
+			],
+		},
+		sRGB
+	);
 
 	return [
 		[
 			'--wp-admin-theme-color',
-			parsedAccent.to( 'srgb' ).toString( { format: 'hex' } ),
+			serialize( to( parsedAccent, sRGB ), { format: 'hex' } ),
 		],
 		[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],
 		[
 			'--wp-admin-theme-color-darker-10',
-			darker10.toString( { format: 'hex' } ),
+			serialize( darker10, { format: 'hex' } ),
 		],
 		[
 			'--wp-admin-theme-color-darker-10--rgb',
@@ -118,7 +143,7 @@ function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
 		],
 		[
 			'--wp-admin-theme-color-darker-20',
-			darker20.toString( { format: 'hex' } ),
+			serialize( darker20, { format: 'hex' } ),
 		],
 		[
 			'--wp-admin-theme-color-darker-20--rgb',
@@ -219,17 +244,14 @@ export function useThemeProviderStyles( {
 
 		// Generate ramps.
 		const computedColorRamps = new Map< string, RampResult >();
-		const bgRamp = buildBgRamp( { seed: seeds.bg } );
+		const bgRamp = getCachedBgRamp( seeds.bg );
 		Object.entries( seeds ).forEach( ( [ rampName, seed ] ) => {
 			if ( rampName === 'bg' ) {
 				computedColorRamps.set( rampName, bgRamp );
 			} else {
 				computedColorRamps.set(
 					rampName,
-					buildAccentRamp( {
-						seed,
-						bgRamp,
-					} )
+					getCachedAccentRamp( seed, bgRamp )
 				);
 			}
 		} );