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

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

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-// Not sure why ESLint is erroring.
-// eslint-disable-next-line import/no-extraneous-dependencies
-import Color from 'colorjs.io';
+import { parse, to, serialize, sRGB } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import '../lib/register-color-spaces';
 import { buildRamp } from '../lib';
 import { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from '../lib/ramp-configs';
 import { DEFAULT_SEED_COLORS } from '../lib/constants';
@@ -24,12 +23,17 @@ describe( 'buildRamps', () => {
 		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 } );
+				const seedOriginal = serialize( to( parse( bg ), sRGB ), {
+					format: 'hex',
+					inGamut: true,
+				} );
+				const seedComputed = serialize(
+					to( parse( ramp.ramp.surface2.color ), sRGB ),
+					{
+						format: 'hex',
+						inGamut: true,
+					}
+				);
 
 				return {
 					input: {
@@ -71,12 +75,20 @@ describe( 'buildRamps', () => {
 			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 } );
+					const seedOriginal = serialize(
+						to( parse( primary ), sRGB ),
+						{
+							format: 'hex',
+							inGamut: true,
+						}
+					);
+					const seedComputed = serialize(
+						to( parse( ramp.ramp.bgFill1.color ), sRGB ),
+						{
+							format: 'hex',
+							inGamut: true,
+						}
+					);
 
 					return {
 						input: {

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

@@ -57,6 +57,12 @@
 	--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-caution: var(
+		--wpds-color-private-caution-surface4
+	); /* Background color for surfaces with caution tone and normal emphasis. */
+	--wpds-color-bg-surface-caution-weak: var(
+		--wpds-color-private-caution-surface2
+	); /* Background color for surfaces with caution tone and weak emphasis. */
 	--wpds-color-bg-surface-error: var(
 		--wpds-color-private-error-surface4
 	); /* Background color for surfaces with error tone and normal emphasis. */
@@ -111,12 +117,42 @@
 	--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-caution: var(
+		--wpds-color-private-caution-fg-surface4
+	); /* Foreground color for content like text with caution tone and normal emphasis. */
+	--wpds-color-fg-content-caution-weak: var(
+		--wpds-color-private-caution-fg-surface3
+	); /* Foreground color for content like text with caution tone and weak emphasis. */
+	--wpds-color-fg-content-error: var(
+		--wpds-color-private-error-fg-surface4
+	); /* Foreground color for content like text with error tone and normal emphasis. */
+	--wpds-color-fg-content-error-weak: var(
+		--wpds-color-private-error-fg-surface3
+	); /* Foreground color for content like text with error tone and weak emphasis. */
+	--wpds-color-fg-content-info: var(
+		--wpds-color-private-info-fg-surface4
+	); /* Foreground color for content like text with info tone and normal emphasis. */
+	--wpds-color-fg-content-info-weak: var(
+		--wpds-color-private-info-fg-surface3
+	); /* Foreground color for content like text with info tone and weak emphasis. */
 	--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-content-success: var(
+		--wpds-color-private-success-fg-surface4
+	); /* Foreground color for content like text with success tone and normal emphasis. */
+	--wpds-color-fg-content-success-weak: var(
+		--wpds-color-private-success-fg-surface3
+	); /* Foreground color for content like text with success tone and weak emphasis. */
+	--wpds-color-fg-content-warning: var(
+		--wpds-color-private-warning-fg-surface4
+	); /* Foreground color for content like text with warning tone and normal emphasis. */
+	--wpds-color-fg-content-warning-weak: var(
+		--wpds-color-private-warning-fg-surface3
+	); /* Foreground color for content like text with warning tone and 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. */
@@ -169,18 +205,40 @@
 	--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-surface3: #6d6d6d;
 	--wpds-color-private-bg-fg-surface4: #1e1e1e;
 	--wpds-color-private-bg-stroke1: #d0d0d0;
-	--wpds-color-private-bg-stroke2: #aeaeae;
+	--wpds-color-private-bg-stroke2: #adadad;
 	--wpds-color-private-bg-stroke3: #898989;
 	--wpds-color-private-bg-stroke4: #6a6a6a;
-	--wpds-color-private-bg-surface1: #efefef;
+	--wpds-color-private-bg-surface1: #f0f0f0;
 	--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-caution-bg-fill-dark: #1f1e1b;
+	--wpds-color-private-caution-bg-fill-inverted1: #3d2d00;
+	--wpds-color-private-caution-bg-fill-inverted2: #1f1e1b;
+	--wpds-color-private-caution-bg-fill1: #f0d149;
+	--wpds-color-private-caution-bg-fill2: #dabb2b;
+	--wpds-color-private-caution-fg-fill: #1f1e1b;
+	--wpds-color-private-caution-fg-fill-dark: #f6f1da;
+	--wpds-color-private-caution-fg-fill-inverted: #f6f1da;
+	--wpds-color-private-caution-fg-surface1: #c6a800;
+	--wpds-color-private-caution-fg-surface2: #a58700;
+	--wpds-color-private-caution-fg-surface3: #866a00;
+	--wpds-color-private-caution-fg-surface4: #291d00;
+	--wpds-color-private-caution-stroke1: #b8ab76;
+	--wpds-color-private-caution-stroke2: #988d60;
+	--wpds-color-private-caution-stroke3: #866a00;
+	--wpds-color-private-caution-stroke4: #644e00;
+	--wpds-color-private-caution-surface1: #faf1cb;
+	--wpds-color-private-caution-surface2: #fdf9e7;
+	--wpds-color-private-caution-surface3: #ffffff;
+	--wpds-color-private-caution-surface4: #f8ebb6;
+	--wpds-color-private-caution-surface5: #f4e08c;
+	--wpds-color-private-caution-surface6: #e7d070;
 	--wpds-color-private-error-bg-fill-dark: #231c1b;
 	--wpds-color-private-error-bg-fill-inverted1: #6d0000;
 	--wpds-color-private-error-bg-fill-inverted2: #231c1b;
@@ -196,15 +254,15 @@
 	--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-stroke4: #a40000;
+	--wpds-color-private-error-surface1: #fcecea;
 	--wpds-color-private-error-surface2: #fdf6f5;
 	--wpds-color-private-error-surface3: #ffffff;
-	--wpds-color-private-error-surface4: #fae5e2;
+	--wpds-color-private-error-surface4: #fae6e2;
 	--wpds-color-private-error-surface5: #f8d8d3;
-	--wpds-color-private-error-surface6: #f5c5bd;
+	--wpds-color-private-error-surface6: #f5c5be;
 	--wpds-color-private-info-bg-fill-dark: #1b1e23;
-	--wpds-color-private-info-bg-fill-inverted1: #00297b;
+	--wpds-color-private-info-bg-fill-inverted1: #00297a;
 	--wpds-color-private-info-bg-fill-inverted2: #1b1e23;
 	--wpds-color-private-info-bg-fill1: #0090ff;
 	--wpds-color-private-info-bg-fill2: #007eec;
@@ -212,43 +270,43 @@
 	--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-surface2: #008bfa;
 	--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-stroke2: #5e90c7;
 	--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-info-surface4: #e1ecf8;
+	--wpds-color-private-info-surface5: #d1e1f5;
+	--wpds-color-private-info-surface6: #bad3f0;
 	--wpds-color-private-primary-bg-fill-dark: #1b1e26;
-	--wpds-color-private-primary-bg-fill-inverted1: #1401a5;
+	--wpds-color-private-primary-bg-fill-inverted1: #1401a4;
 	--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-surface1: #81a7ff;
+	--wpds-color-private-primary-fg-surface2: #5780ff;
 	--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-stroke1: #92a4cf;
+	--wpds-color-private-primary-stroke2: #6f85c0;
 	--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-surface5: #d8e0f3;
 	--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-inverted1: #003a00;
 	--wpds-color-private-success-bg-fill-inverted2: #1b1f1c;
 	--wpds-color-private-success-bg-fill1: #4ab866;
 	--wpds-color-private-success-bg-fill2: #34a554;
@@ -259,21 +317,21 @@
 	--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-stroke1: #78ba84;
+	--wpds-color-private-success-stroke2: #62996c;
 	--wpds-color-private-success-stroke3: #008030;
-	--wpds-color-private-success-stroke4: #006013;
-	--wpds-color-private-success-surface1: #ddf8e1;
+	--wpds-color-private-success-stroke4: #006113;
+	--wpds-color-private-success-surface1: #ddf8e0;
 	--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-surface4: #cdf5d3;
+	--wpds-color-private-success-surface5: #acf0b7;
 	--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-bg-fill2: #dba430;
 	--wpds-color-private-warning-fg-fill: #1f1e1b;
 	--wpds-color-private-warning-fg-fill-dark: #f3f0e9;
 	--wpds-color-private-warning-fg-fill-inverted: #f3f0e9;
@@ -281,15 +339,15 @@
 	--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-stroke1: #c2a777;
+	--wpds-color-private-warning-stroke2: #a08961;
 	--wpds-color-private-warning-stroke3: #966200;
 	--wpds-color-private-warning-stroke4: #724700;
-	--wpds-color-private-warning-surface1: #faefdc;
+	--wpds-color-private-warning-surface1: #faefdb;
 	--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-surface4: #f8e9cd;
+	--wpds-color-private-warning-surface5: #f5ddb2;
 	--wpds-color-private-warning-surface6: #f0cb89;
 	--wpds-color-stroke-focus-brand: var(
 		--wpds-color-private-primary-stroke3

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

@@ -19,6 +19,8 @@ export default [
 	'--wpds-color-bg-surface-info-weak',
 	'--wpds-color-bg-surface-warning',
 	'--wpds-color-bg-surface-warning-weak',
+	'--wpds-color-bg-surface-caution',
+	'--wpds-color-bg-surface-caution-weak',
 	'--wpds-color-bg-surface-error',
 	'--wpds-color-bg-surface-error-weak',
 	'--wpds-color-bg-interactive-neutral',
@@ -48,6 +50,16 @@ export default [
 	'--wpds-color-bg-thumb-brand-disabled',
 	'--wpds-color-fg-content-neutral',
 	'--wpds-color-fg-content-neutral-weak',
+	'--wpds-color-fg-content-success',
+	'--wpds-color-fg-content-success-weak',
+	'--wpds-color-fg-content-info',
+	'--wpds-color-fg-content-info-weak',
+	'--wpds-color-fg-content-warning',
+	'--wpds-color-fg-content-warning-weak',
+	'--wpds-color-fg-content-caution',
+	'--wpds-color-fg-content-caution-weak',
+	'--wpds-color-fg-content-error',
+	'--wpds-color-fg-content-error-weak',
 	'--wpds-color-fg-interactive-neutral',
 	'--wpds-color-fg-interactive-neutral-active',
 	'--wpds-color-fg-interactive-neutral-disabled',