@wordpress/theme 0.1.0 → 0.2.0

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,19 +1,22 @@
 /**
  * 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.
-export const UNIVERSAL_CONTRAST_TOPUP = 0.05;
+// Margin added to target contrasts to counter for algorithm approximations and rounding errors.
+// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.
+// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.
+// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.
+export const UNIVERSAL_CONTRAST_TOPUP = 0.012;
 
 // When enabling "lighter direction" bias, this is the amount by which
 // black text contrast needs to be greater than white text contrast.
@@ -32,10 +35,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;
+// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.
+export const CONTRAST_EPSILON = 4e-3;
 
-export const MAX_BISECTION_ITERATIONS = 25;
+export const MAX_BISECTION_ITERATIONS = 10;
 
 export const CONTRAST_COMBINATIONS: {
 	bgs: ( keyof Ramp )[];
@@ -80,6 +83,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: '#494949', warning: false },
+			surface6: { color: '#d3d3d3', warning: false },
+			surface5: { color: '#e3e3e3', warning: false },
+			surface4: { color: '#eaeaea', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#1e1e1e', warning: false },
+			fgSurface3: { color: '#6e6e6e', warning: false },
+			fgSurface2: { color: '#8b8b8b', warning: false },
+			fgSurface1: { color: '#ababab', warning: false },
+			stroke3: { color: '#8b8b8b', warning: false },
+			stroke4: { color: '#6d6d6d', warning: false },
+			stroke2: { color: '#adadad', warning: false },
+			stroke1: { color: '#cfcfcf', warning: false },
+			bgFillDark: { color: '#1e1e1e', warning: false },
+			fgFillDark: { color: '#f0f0f0', warning: false },
+			bgFillInverted2: { color: '#1e1e1e', warning: false },
+			bgFillInverted1: { color: '#2d2d2d', 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: '#2e49da', warning: false },
+			surface2: { color: '#f6f8fc', warning: false },
+			surface6: { color: '#c7d3ef', warning: false },
+			surface5: { color: '#dce3f5', warning: false },
+			surface4: { color: '#e5ebf7', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#080071', warning: false },
+			fgSurface3: { color: '#3858e9', warning: false },
+			fgSurface2: { color: '#5881ff', warning: false },
+			fgSurface1: { color: '#84a9ff', warning: false },
+			stroke3: { color: '#3858e9', warning: false },
+			stroke4: { color: '#2337c8', warning: false },
+			stroke2: { color: '#6d83bf', warning: false },
+			stroke1: { color: '#91a2cf', warning: false },
+			bgFillDark: { color: '#1b1e26', warning: false },
+			fgFillDark: { color: '#eff0f2', warning: false },
+			bgFillInverted2: { color: '#1b1e26', warning: false },
+			bgFillInverted1: { color: '#12009f', warning: false },
+			fgFillInverted: { color: '#eff0f2', warning: false },
+			surface1: { color: '#edf0fa', warning: false },
+		},
+		direction: 'darker',
+	},
+	info: {
+		ramp: {
+			bgFill1: { color: '#0090ff', warning: false },
+			fgFill: { color: '#1b1e23', warning: false },
+			bgFill2: { color: '#0081ef', warning: false },
+			surface2: { color: '#f5f9fd', warning: false },
+			surface6: { color: '#bed6f1', warning: false },
+			surface5: { color: '#d5e5f6', warning: false },
+			surface4: { color: '#e0ebf8', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#001758', warning: false },
+			fgSurface3: { color: '#006dd9', warning: false },
+			fgSurface2: { color: '#008cfb', warning: false },
+			fgSurface1: { color: '#53b1ff', warning: false },
+			stroke3: { color: '#006dd9', warning: false },
+			stroke4: { color: '#004eb8', warning: false },
+			stroke2: { color: '#5d8fc6', warning: false },
+			stroke1: { color: '#8aaed6', warning: false },
+			bgFillDark: { color: '#1b1e23', warning: false },
+			fgFillDark: { color: '#eff0f2', warning: false },
+			bgFillInverted2: { color: '#1b1e23', warning: false },
+			bgFillInverted1: { color: '#002675', warning: false },
+			fgFillInverted: { color: '#eff0f2', warning: false },
+			surface1: { color: '#eaf1fa', warning: false },
+		},
+		direction: 'darker',
+	},
+	success: {
+		ramp: {
+			bgFill1: { color: '#4ab866', warning: false },
+			fgFill: { color: '#1b1f1c', warning: false },
+			bgFill2: { color: '#37a857', warning: false },
+			surface2: { color: '#f0fcf2', warning: false },
+			surface6: { color: '#7eea95', warning: false },
+			surface5: { color: '#b7f2c1', warning: false },
+			surface4: { color: '#cdf5d3', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#002b00', warning: false },
+			fgSurface3: { color: '#008031', warning: false },
+			fgSurface2: { color: '#2c9f4e', warning: false },
+			fgSurface1: { color: '#54c16f', warning: false },
+			stroke3: { color: '#008031', warning: false },
+			stroke4: { color: '#006314', warning: false },
+			stroke2: { color: '#61986b', warning: false },
+			stroke1: { color: '#77ba84', warning: false },
+			bgFillDark: { color: '#1b1f1c', warning: false },
+			fgFillDark: { color: '#edf2ed', warning: false },
+			bgFillInverted2: { color: '#1b1f1c', warning: false },
+			bgFillInverted1: { color: '#003800', warning: false },
+			fgFillInverted: { color: '#edf2ed', warning: false },
+			surface1: { color: '#ddf8e1', warning: false },
+		},
+		direction: 'darker',
+	},
+	caution: {
+		ramp: {
+			bgFill1: { color: '#f0d149', warning: false },
+			fgFill: { color: '#1f1e1b', warning: false },
+			bgFill2: { color: '#ddbe30', warning: false },
+			surface2: { color: '#fdf9e7', warning: false },
+			surface6: { color: '#ecd367', warning: false },
+			surface5: { color: '#f5e399', warning: false },
+			surface4: { color: '#f8ebb5', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#291d00', warning: false },
+			fgSurface3: { color: '#876b00', warning: false },
+			fgSurface2: { color: '#a78900', warning: false },
+			fgSurface1: { color: '#c9aa00', warning: false },
+			stroke3: { color: '#876b00', warning: false },
+			stroke4: { color: '#675000', warning: false },
+			stroke2: { color: '#978c60', warning: false },
+			stroke1: { color: '#b8ab75', warning: false },
+			bgFillDark: { color: '#1f1e1b', warning: false },
+			fgFillDark: { color: '#f6f1da', warning: false },
+			bgFillInverted2: { color: '#1f1e1b', warning: false },
+			bgFillInverted1: { color: '#3a2b00', warning: false },
+			fgFillInverted: { color: '#f6f1da', warning: false },
+			surface1: { color: '#faf1cd', warning: false },
+		},
+		direction: 'darker',
+	},
+	warning: {
+		ramp: {
+			bgFill1: { color: '#f0b849', warning: false },
+			fgFill: { color: '#1f1e1b', warning: false },
+			bgFill2: { color: '#dea633', warning: false },
+			surface2: { color: '#fdf7ee', warning: false },
+			surface6: { color: '#f1ce90', warning: false },
+			surface5: { color: '#f6e0bb', warning: false },
+			surface4: { color: '#f8e9cd', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#2f1800', warning: false },
+			fgSurface3: { color: '#976300', warning: false },
+			fgSurface2: { color: '#b78100', warning: false },
+			fgSurface1: { color: '#d9a22e', warning: false },
+			stroke3: { color: '#976300', warning: false },
+			stroke4: { color: '#754900', warning: false },
+			stroke2: { color: '#9f8860', warning: false },
+			stroke1: { color: '#c2a776', warning: false },
+			bgFillDark: { color: '#1f1e1b', warning: false },
+			fgFillDark: { color: '#f3f0e9', warning: false },
+			bgFillInverted2: { color: '#1f1e1b', warning: false },
+			bgFillInverted1: { color: '#432600', warning: false },
+			fgFillInverted: { color: '#f3f0e9', warning: false },
+			surface1: { color: '#faefdc', warning: false },
+		},
+		direction: 'darker',
+	},
+	error: {
+		ramp: {
+			bgFill1: { color: '#cc1818', warning: false },
+			fgFill: { color: '#f2efef', warning: false },
+			bgFill2: { color: '#bc0001', warning: false },
+			surface2: { color: '#fdf6f5', warning: false },
+			surface6: { color: '#f5c9c2', warning: false },
+			surface5: { color: '#f9dcd8', warning: false },
+			surface4: { color: '#fae5e2', warning: false },
+			surface3: { color: '#fff', warning: false },
+			fgSurface4: { color: '#4a0000', warning: false },
+			fgSurface3: { color: '#cc1818', warning: false },
+			fgSurface2: { color: '#f84d41', warning: false },
+			fgSurface1: { color: '#ff8373', warning: false },
+			stroke3: { color: '#cc1818', warning: false },
+			stroke4: { color: '#a70000', warning: false },
+			stroke2: { color: '#ca675c', warning: false },
+			stroke1: { color: '#dc8e83', warning: false },
+			bgFillDark: { color: '#231c1b', warning: false },
+			fgFillDark: { color: '#f2efef', warning: false },
+			bgFillInverted2: { color: '#231c1b', warning: false },
+			bgFillInverted1: { color: '#680000', warning: false },
+			fgFillInverted: { color: '#f2efef', warning: false },
+			surface1: { color: '#fcedea', warning: false },
+		},
+		direction: 'darker',
+	},
+};