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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.1.0",
+	"version": "0.1.1-next.2f1c7c01b.0",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,17 +32,24 @@
 		},
 		"./design-tokens.css": "./src/prebuilt/css/design-tokens.css",
 		"./design-tokens.js": "./src/prebuilt/js/design-tokens.js",
-		"./package.json": "./package.json",
-		"./build-style/": "./build-style/"
+		"./package.json": "./package.json"
 	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
-	"sideEffects": false,
+	"sideEffects": [
+		"src/color-ramps/lib/register-color-spaces.ts",
+		"build/color-ramps/lib/register-color-spaces.js",
+		"build-module/color-ramps/lib/register-color-spaces.js"
+	],
 	"dependencies": {
-		"@wordpress/element": "^6.34.0",
-		"@wordpress/private-apis": "^1.34.0",
-		"colorjs.io": "^0.5.2"
+		"@wordpress/element": "^6.34.1-next.2f1c7c01b.0",
+		"@wordpress/private-apis": "^1.34.1-next.2f1c7c01b.0",
+		"colorjs.io": "^0.5.2",
+		"memize": "^2.1.0"
+	},
+	"devDependencies": {
+		"esbuild-esm-loader": "0.3.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -52,7 +59,10 @@
 		"access": "public"
 	},
 	"scripts": {
-		"build": "rimraf src/prebuilt docs && node bin/build-tokens.js && prettier --write tokens/color.json src/prebuilt docs"
+		"build:default-ramps": "node --import=esbuild-esm-loader/register bin/generate-default-ramps/index.ts",
+		"build:tokens": "node --import=esbuild-esm-loader/register bin/generate-primitive-tokens/index.ts && cross-env NODE_OPTIONS=--import=esbuild-esm-loader/register tz build --config terrazzo.config.ts",
+		"build": "npm run build:tokens && npm run build:default-ramps",
+		"postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	},
-	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
+	"gitHead": "c6ddcdf455bc02567a2c9e03de6862a2061b85e8"
 }

package/src/color-ramps/index.ts

@@ -1,11 +1,12 @@
 /**
  * External dependencies
  */
-import Color from 'colorjs.io';
+import { get, OKLCH, parse, serialize } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import './lib/register-color-spaces';
 import { buildRamp } from './lib/index';
 import { clampAccentScaleReferenceLightness } from './lib/utils';
 import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';
@@ -14,28 +15,20 @@ import type {
 	RampDirection,
 	Ramp,
 } from './lib/types';
-import { getCachedContrast } from './lib/cache-utils';
+import { getContrast } from './lib/color-utils';
 import { CONTRAST_COMBINATIONS } from './lib/constants';
 export { DEFAULT_SEED_COLORS } from './lib/constants';
 
 /**
  * Creates a background ramp.
- * @param params
- * @param params.seed
- * @param params.debug
+ * @param seed The seed color for the background ramp.
  */
-export function buildBgRamp( {
-	seed,
-	debug,
-}: {
-	seed: string;
-	debug?: boolean;
-} ): InternalRampResult {
+export function buildBgRamp( seed: string ) {
 	if ( typeof seed !== 'string' || seed.trim() === '' ) {
 		throw new Error( 'Seed color must be a non-empty string' );
 	}
 
-	return buildRamp( seed, BG_RAMP_CONFIG, { debug } );
+	return buildRamp( seed, BG_RAMP_CONFIG );
 }
 
 const STEP_TO_PIN = 'surface2';
@@ -51,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
 		pinLightness: {
 			stepName: STEP_TO_PIN,
 			value: clampAccentScaleReferenceLightness(
-				new Color( ramp.ramp[ STEP_TO_PIN ].color ).oklch.l,
+				get( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),
 				ramp.direction
 			),
 		},
@@ -61,29 +54,19 @@ function getBgRampInfo( ramp: InternalRampResult ): {
 /**
  * Creates an accent ramp (ie used by primary, success, info, warning and error
  * ramps).
- * @param params
- * @param params.seed
- * @param params.bgRamp
- * @param params.debug
+ * @param seed   The seed color for the accent ramp.
+ * @param bgRamp The ramp of the background on which the accent is shown.
  */
-export function buildAccentRamp( {
-	seed,
-	bgRamp,
-	debug,
-}: {
-	seed: string;
-	bgRamp?: InternalRampResult;
-	debug?: boolean;
-} ): InternalRampResult {
+export function buildAccentRamp(
+	seed: string,
+	bgRamp?: InternalRampResult
+): InternalRampResult {
 	if ( typeof seed !== 'string' || seed.trim() === '' ) {
 		throw new Error( 'Seed color must be a non-empty string' );
 	}
 
 	const bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;
-	return buildRamp( seed, ACCENT_RAMP_CONFIG, {
-		...bgRampInfo,
-		debug,
-	} );
+	return buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );
 }
 
 /**
@@ -113,14 +96,14 @@ export function checkAccessibleCombinations( {
 		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
 			for ( const bg of bgs ) {
 				for ( const fg of fgs ) {
-					const bgColor = new Color( ramp.ramp[ bg ].color );
-					const fgColor = new Color( ramp.ramp[ fg ].color );
-					if ( getCachedContrast( bgColor, fgColor ) < target ) {
+					const bgColor = parse( ramp.ramp[ bg ].color );
+					const fgColor = parse( ramp.ramp[ fg ].color );
+					if ( getContrast( bgColor, fgColor ) < target ) {
 						unmetTargets.push( {
 							bgName: bg,
-							bgColor: bgColor.toString(),
+							bgColor: serialize( bgColor ),
 							fgName: fg,
-							fgColor: fgColor.toString(),
+							fgColor: serialize( fgColor ),
 							unmetContrast: target,
 						} );
 					}
@@ -133,14 +116,14 @@ export function checkAccessibleCombinations( {
 		CONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {
 			for ( const bg of bgs ) {
 				for ( const fg of fgs ) {
-					const bgColor = new Color( bgRamp.ramp[ bg ].color );
-					const fgColor = new Color( ramp.ramp[ fg ].color );
-					if ( getCachedContrast( bgColor, fgColor ) < target ) {
+					const bgColor = parse( bgRamp.ramp[ bg ].color );
+					const fgColor = parse( ramp.ramp[ fg ].color );
+					if ( getContrast( bgColor, fgColor ) < target ) {
 						unmetTargets.push( {
 							bgName: bg,
-							bgColor: bgColor.toString(),
+							bgColor: serialize( bgColor ),
 							fgName: fg,
-							fgColor: fgColor.toString(),
+							fgColor: serialize( fgColor ),
 							unmetContrast: target,
 						} );
 					}

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

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import {
+	to,
+	serialize,
+	contrastWCAG21,
+	sRGB,
+	type ColorTypes,
+} from 'colorjs.io/fn';
+
+/**
+ * Internal dependencies
+ */
+import './register-color-spaces';
+
+/**
+ * Get string representation of a color
+ * @param color Color object to stringify
+ * @return String representation
+ */
+export function getColorString( color: ColorTypes ): string {
+	return serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );
+}
+
+/**
+ * Get contrast value between two colors
+ * @param colorA First color
+ * @param colorB Second color
+ * @return WCAG 2.1 contrast ratio
+ */
+export function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {
+	return contrastWCAG21( colorA, colorB );
+}

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

@@ -1,15 +1,16 @@
 /**
  * External dependencies
  */
-import Color from 'colorjs.io';
+import { to, OKLCH } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import './register-color-spaces';
 import type { Ramp } from './types';
 
-export const WHITE = new Color( '#fff' ).to( 'oklch' );
-export const BLACK = new Color( '#000' ).to( 'oklch' );
+export const WHITE = to( 'white', OKLCH );
+export const BLACK = to( 'black', OKLCH );
 
 // Margin added to target contrasts to counter for algorithm approximations
 // and rounding errors.
@@ -32,10 +33,10 @@ export const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
 	darker: { min: 0.75, max: 0.98 },
 } as const;
 
-// Minimum lightness difference noticed by the algorithm.
-export const LIGHTNESS_EPSILON = 1e-3;
+// Lightness precision we aim for. Approximately 1/256, resolution of an 8-bit number.
+export const LIGHTNESS_EPSILON = 4e-3;
 
-export const MAX_BISECTION_ITERATIONS = 25;
+export const MAX_BISECTION_ITERATIONS = 10;
 
 export const CONTRAST_COMBINATIONS: {
 	bgs: ( keyof Ramp )[];
@@ -80,6 +81,7 @@ export const DEFAULT_SEED_COLORS = {
 	primary: '#3858e9',
 	info: '#0090ff',
 	success: '#4ab866',
+	caution: '#f0d149',
 	warning: '#f0b849',
 	error: '#cc1818',
 };

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

@@ -0,0 +1,200 @@
+/**
+ * Internal dependencies
+ */
+import type { RampResult } from './types';
+import type { DEFAULT_SEED_COLORS } from './constants';
+
+export const DEFAULT_RAMPS: Record<
+	keyof typeof DEFAULT_SEED_COLORS,
+	RampResult
+> = {
+	bg: {
+		ramp: {
+			surface2: { color: '#f8f8f8', warning: false },
+			bgFill1: { color: '#555', warning: false },
+			fgFill: { color: '#f0f0f0', warning: false },
+			bgFill2: { color: '#474747', warning: false },
+			surface6: { color: '#d0d0d0', warning: false },
+			surface5: { color: '#dfdfdf', warning: false },
+			surface4: { color: '#eaeaea', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#1e1e1e', warning: false },
+			fgSurface3: { color: '#6d6d6d', warning: false },
+			fgSurface2: { color: '#898989', warning: false },
+			fgSurface1: { color: '#a9a9a9', warning: false },
+			stroke3: { color: '#898989', warning: false },
+			stroke4: { color: '#6a6a6a', warning: false },
+			stroke2: { color: '#adadad', warning: false },
+			stroke1: { color: '#d0d0d0', warning: false },
+			bgFillDark: { color: '#1e1e1e', warning: false },
+			fgFillDark: { color: '#f0f0f0', warning: false },
+			bgFillInverted2: { color: '#1e1e1e', warning: false },
+			bgFillInverted1: { color: '#2f2f2f', warning: false },
+			fgFillInverted: { color: '#f0f0f0', warning: false },
+			surface1: { color: '#f0f0f0', warning: false },
+		},
+		direction: 'darker',
+	},
+	primary: {
+		ramp: {
+			bgFill1: { color: '#3858e9', warning: false },
+			fgFill: { color: '#eff0f2', warning: false },
+			bgFill2: { color: '#2c47d7', warning: false },
+			surface2: { color: '#f6f8fc', warning: false },
+			surface6: { color: '#c4d0ee', warning: false },
+			surface5: { color: '#d8e0f3', warning: false },
+			surface4: { color: '#e5eaf7', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#080071', warning: false },
+			fgSurface3: { color: '#3858e9', warning: false },
+			fgSurface2: { color: '#5780ff', warning: false },
+			fgSurface1: { color: '#81a7ff', warning: false },
+			stroke3: { color: '#3858e9', warning: false },
+			stroke4: { color: '#2236c7', warning: false },
+			stroke2: { color: '#6f85c0', warning: false },
+			stroke1: { color: '#92a4cf', warning: false },
+			bgFillDark: { color: '#1b1e26', warning: false },
+			fgFillDark: { color: '#eff0f2', warning: false },
+			bgFillInverted2: { color: '#1b1e26', warning: false },
+			bgFillInverted1: { color: '#1401a4', warning: false },
+			fgFillInverted: { color: '#eff0f2', warning: false },
+			surface1: { color: '#ecf0f9', warning: false },
+		},
+		direction: 'darker',
+	},
+	info: {
+		ramp: {
+			bgFill1: { color: '#0090ff', warning: false },
+			fgFill: { color: '#1b1e23', warning: false },
+			bgFill2: { color: '#007eec', warning: false },
+			surface2: { color: '#f5f9fd', warning: false },
+			surface6: { color: '#bad3f0', warning: false },
+			surface5: { color: '#d1e1f5', warning: false },
+			surface4: { color: '#e1ecf8', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#001758', warning: false },
+			fgSurface3: { color: '#006cd8', warning: false },
+			fgSurface2: { color: '#008bfa', warning: false },
+			fgSurface1: { color: '#4dafff', warning: false },
+			stroke3: { color: '#006cd8', warning: false },
+			stroke4: { color: '#004bb5', warning: false },
+			stroke2: { color: '#5e90c7', warning: false },
+			stroke1: { color: '#8baed6', warning: false },
+			bgFillDark: { color: '#1b1e23', warning: false },
+			fgFillDark: { color: '#eff0f2', warning: false },
+			bgFillInverted2: { color: '#1b1e23', warning: false },
+			bgFillInverted1: { color: '#00297a', warning: false },
+			fgFillInverted: { color: '#eff0f2', warning: false },
+			surface1: { color: '#e9f1fa', warning: false },
+		},
+		direction: 'darker',
+	},
+	success: {
+		ramp: {
+			bgFill1: { color: '#4ab866', warning: false },
+			fgFill: { color: '#1b1f1c', warning: false },
+			bgFill2: { color: '#34a554', warning: false },
+			surface2: { color: '#f0fcf2', warning: false },
+			surface6: { color: '#7be792', warning: false },
+			surface5: { color: '#acf0b7', warning: false },
+			surface4: { color: '#cdf5d3', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#002b00', warning: false },
+			fgSurface3: { color: '#008030', warning: false },
+			fgSurface2: { color: '#2a9e4d', warning: false },
+			fgSurface1: { color: '#52bf6d', warning: false },
+			stroke3: { color: '#008030', warning: false },
+			stroke4: { color: '#006113', warning: false },
+			stroke2: { color: '#62996c', warning: false },
+			stroke1: { color: '#78ba84', warning: false },
+			bgFillDark: { color: '#1b1f1c', warning: false },
+			fgFillDark: { color: '#edf2ed', warning: false },
+			bgFillInverted2: { color: '#1b1f1c', warning: false },
+			bgFillInverted1: { color: '#003a00', warning: false },
+			fgFillInverted: { color: '#edf2ed', warning: false },
+			surface1: { color: '#ddf8e0', warning: false },
+		},
+		direction: 'darker',
+	},
+	caution: {
+		ramp: {
+			bgFill1: { color: '#f0d149', warning: false },
+			fgFill: { color: '#1f1e1b', warning: false },
+			bgFill2: { color: '#dabb2b', warning: false },
+			surface2: { color: '#fdf9e7', warning: false },
+			surface6: { color: '#e7d070', warning: false },
+			surface5: { color: '#f4e08c', warning: false },
+			surface4: { color: '#f8ebb6', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#291d00', warning: false },
+			fgSurface3: { color: '#866a00', warning: false },
+			fgSurface2: { color: '#a58700', warning: false },
+			fgSurface1: { color: '#c6a800', warning: false },
+			stroke3: { color: '#866a00', warning: false },
+			stroke4: { color: '#644e00', warning: false },
+			stroke2: { color: '#988d60', warning: false },
+			stroke1: { color: '#b8ab76', warning: false },
+			bgFillDark: { color: '#1f1e1b', warning: false },
+			fgFillDark: { color: '#f6f1da', warning: false },
+			bgFillInverted2: { color: '#1f1e1b', warning: false },
+			bgFillInverted1: { color: '#3d2d00', warning: false },
+			fgFillInverted: { color: '#f6f1da', warning: false },
+			surface1: { color: '#faf1cb', warning: false },
+		},
+		direction: 'darker',
+	},
+	warning: {
+		ramp: {
+			bgFill1: { color: '#f0b849', warning: false },
+			fgFill: { color: '#1f1e1b', warning: false },
+			bgFill2: { color: '#dba430', warning: false },
+			surface2: { color: '#fdf7ee', warning: false },
+			surface6: { color: '#f0cb89', warning: false },
+			surface5: { color: '#f5ddb2', warning: false },
+			surface4: { color: '#f8e9cd', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#2f1800', warning: false },
+			fgSurface3: { color: '#966200', warning: false },
+			fgSurface2: { color: '#b58000', warning: false },
+			fgSurface1: { color: '#d7a02b', warning: false },
+			stroke3: { color: '#966200', warning: false },
+			stroke4: { color: '#724700', warning: false },
+			stroke2: { color: '#a08961', warning: false },
+			stroke1: { color: '#c2a777', warning: false },
+			bgFillDark: { color: '#1f1e1b', warning: false },
+			fgFillDark: { color: '#f3f0e9', warning: false },
+			bgFillInverted2: { color: '#1f1e1b', warning: false },
+			bgFillInverted1: { color: '#472900', warning: false },
+			fgFillInverted: { color: '#f3f0e9', warning: false },
+			surface1: { color: '#faefdb', warning: false },
+		},
+		direction: 'darker',
+	},
+	error: {
+		ramp: {
+			bgFill1: { color: '#cc1818', warning: false },
+			fgFill: { color: '#f2efef', warning: false },
+			bgFill2: { color: '#b90000', warning: false },
+			surface2: { color: '#fdf6f5', warning: false },
+			surface6: { color: '#f5c5be', warning: false },
+			surface5: { color: '#f8d8d3', warning: false },
+			surface4: { color: '#fae6e2', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#4a0000', warning: false },
+			fgSurface3: { color: '#cc1818', warning: false },
+			fgSurface2: { color: '#f64b40', warning: false },
+			fgSurface1: { color: '#ff8070', warning: false },
+			stroke3: { color: '#cc1818', warning: false },
+			stroke4: { color: '#a40000', warning: false },
+			stroke2: { color: '#cd695d', warning: false },
+			stroke1: { color: '#dc9085', warning: false },
+			bgFillDark: { color: '#231c1b', warning: false },
+			fgFillDark: { color: '#f2efef', warning: false },
+			bgFillInverted2: { color: '#231c1b', warning: false },
+			bgFillInverted1: { color: '#6d0000', warning: false },
+			fgFillInverted: { color: '#f2efef', warning: false },
+			surface1: { color: '#fcecea', warning: false },
+		},
+		direction: 'darker',
+	},
+};