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

package/README.md

@@ -9,35 +9,95 @@ A theming package that's part of the WordPress Design System. It has two parts:
 
 In the **[Design Tokens Reference](docs/ds-tokens.md)** document there is a complete reference of all available design tokens including colors, spacing, typography, and more.
 
+### Color Tokens
+
+The design system defines color tokens using the following naming scheme:
+
+```
+--wpds-<element>-<tone>[-<emphasis>][-<state>]
+```
+
+**Element** specifies what the color is applied to.
+
+| Value                | Description                                                                                 |
+| -------------------- | ------------------------------------------------------------------------------------------- |
+| `bg-surface`         | Backgrounds of layout or container surfaces.                                                |
+| `bg-interactive`     | Backgrounds of interactive elements such as buttons, inputs, and toggles.                   |
+| `bg-track`           | Backgrounds of track components like scrollbars and slider tracks.                          |
+| `bg-thumb`           | Backgrounds of thumb components like scrollbar thumbs and slider thumbs.                    |
+| `fg-content`         | Foreground color for text and icons in static content.                                      |
+| `fg-interactive`     | Foreground color for text and icons in interactive elements such as links and buttons.      |
+| `stroke-surface`     | Decorative borders and dividers for non-interactive surfaces.                               |
+| `stroke-interactive` | Accessible borders for interactive controls.                                                |
+| `stroke-focus`       | Stroke color specifically for focus rings.                                                  |
+
+**Tone** defines the semantic intent of the color.
+
+| Value     | Description                                                                              |
+| --------- | ---------------------------------------------------------------------------------------- |
+| `neutral` | Neutrally toned UI elements.                                                             |
+| `brand`   | Brand-accented or primary action colors.                                                 |
+| `success` | Positive or completed states.                                                            |
+| `info`    | Informational or system-generated context.                                               |
+| `caution` | Heads-up or low-severity issues; “proceed carefully.”                                    |
+| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors. |
+| `error`   | Blocking issues, validation failures, or destructive actions.                            |
+
+> [!NOTE]
+> `caution` and `warning` represent two escalation levels of non-error severity.
+> Use **`caution`** for guidance or minor risks, and **`warning`** when the user must act to prevent an error.
+
+**Emphasis** adjusts color strength relative to the base tone, if specified. The default is a normal emphasis.
+
+| Value                | Description                                 |
+| -------------------- | ------------------------------------------- |
+| `strong`             | Higher contrast and/or elevated emphasis.   |
+| `weak`               | Subtle variant for secondary or muted elements. |
+
+**State** represents the interactive state of the element, if specified. The default is an idle state.
+
+| Value      | Description                              |
+| ---------- | ---------------------------------------- |
+| `active`   | Hovered, pressed, or selected state.     |
+| `disabled` | Unavailable or inoperable state.         |
+
 ## Theme Provider
 
-The `ThemeProvider` is a React component that should wrap your application to provide design tokens and theme context to the child UI components.
+The `ThemeProvider` is a React component that should wrap your application to provide design tokens and theme context to the child UI components. It accepts a set of customizable seed values and automatically generates a set of design tokens, which are exposed as CSS custom properties for use throughout the application.
 
 ```tsx
 import { ThemeProvider } from '@wordpress/theme';
 
 function App() {
 	return (
-		<ThemeProvider color={ { scheme: 'light', accent: 'blue' } }>
+		<ThemeProvider color={ { primary: 'blue' } }>
 			{ /* Your app content */ }
 		</ThemeProvider>
 	);
 }
 ```
 
+The `color` prop accepts an object with the following optional properties:
+
+-   `primary`: The primary/accent seed color (default: `'#3858e9'`)
+-   `bg`: The background seed color (default: `'#f8f8f8'`)
+
+Both properties accept any valid CSS color value. The theme system automatically generates appropriate color ramps and determines light/dark mode based on these seed colors.
+
+### Nesting Providers
+
 The provider can be used recursively to override or modify the theme for a specific subtree.
 
 ```tsx
-<ThemeProvider>
-	{ /* system-themed UI components */ }
-	<ThemeProvider color={ { scheme: 'dark' } }>
+<ThemeProvider color={ { bg: 'white' } }>
+	{ /* light-themed UI components */ }
+	<ThemeProvider color={ { bg: '#1e1e1e' } }>
 		{ /* dark-themed UI components */ }
-		<ThemeProvider color={ { scheme: 'light' } }>
-			{ /* light-themed UI components */ }
+		<ThemeProvider color={ { primary: 'red' } }>
+			{ /* dark-themed with red accent */ }
 		</ThemeProvider>
-		{ /* dark-themed UI components */ }
 	</ThemeProvider>
-	{ /* system-themed UI components */ }
+	{ /* light-themed UI components */ }
 </ThemeProvider>
 ```
 

package/bin/generate-default-ramps/index.ts

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_SEED_COLORS,
+	buildBgRamp,
+	buildAccentRamp,
+} from '../../src/color-ramps/index.ts';
+
+const __dirname = dirname( fileURLToPath( import.meta.url ) );
+
+const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
+const accentRamps = Object.fromEntries(
+	[ ...Object.entries( DEFAULT_SEED_COLORS ) ]
+		.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
+		.map( ( [ scaleName, seed ] ) => [
+			scaleName,
+			buildAccentRamp( seed, bgRamp ),
+		] )
+);
+
+const ramps = { bg: bgRamp, ...accentRamps };
+
+const outputPath = join(
+	__dirname,
+	'../../src/color-ramps/lib/default-ramps.ts'
+);
+
+const content = `
+/**
+ * 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
+> = ${ JSON.stringify( ramps ) };
+`;
+
+await writeFile( outputPath, content );

package/bin/generate-primitive-tokens/index.ts

@@ -4,11 +4,19 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import Color from 'colorjs.io';
+import {
+	parse,
+	to,
+	serialize,
+	OKLCH,
+	sRGB,
+	type PlainColorObject,
+} from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import '../../src/color-ramps/lib/register-color-spaces';
 import {
 	DEFAULT_SEED_COLORS,
 	buildBgRamp,
@@ -23,9 +31,9 @@ const colorJsonPath = path.join( __dirname, '../../tokens/color.json' );
 
 const transformColorStringToDTCGValue = ( color: string ) => {
 	if ( /oklch|p3/.test( color ) ) {
-		let parsed: Color;
+		let parsed: PlainColorObject;
 		try {
-			parsed = new Color( color ).to( 'oklch' );
+			parsed = to( parse( color ), OKLCH );
 		} catch {
 			return color;
 		}
@@ -39,7 +47,7 @@ const transformColorStringToDTCGValue = ( color: string ) => {
 				isNaN( coords[ 2 ] ) ? 0 : coords[ 2 ], // h
 			],
 			...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
-			hex: parsed.to( 'srgb' ).toString( { format: 'hex' } ),
+			hex: serialize( to( parsed, sRGB ), { format: 'hex' } ),
 		};
 	}
 
@@ -58,15 +66,12 @@ function generatePrimitiveColorTokens() {
 		);
 
 		// Build the ramps
-		const bgRamp = buildBgRamp( { seed: DEFAULT_SEED_COLORS.bg } );
+		const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
 		const accentRamps = [ ...Object.entries( DEFAULT_SEED_COLORS ) ]
 			.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
 			.map( ( [ scaleName, seed ] ) => ( {
 				scaleName,
-				ramp: buildAccentRamp( {
-					seed,
-					bgRamp,
-				} ),
+				ramp: buildAccentRamp( seed, bgRamp ),
 			} ) );
 
 		// Convert the ramp values in a DTCG compatible format

package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts

@@ -3,11 +3,18 @@
  */
 import type { Plugin, TokenNormalized } from '@terrazzo/parser';
 import { transformCSSValue } from '@terrazzo/token-tools/css';
-import Color from 'colorjs.io';
+import {
+	parse,
+	to,
+	serialize,
+	sRGB,
+	type ColorConstructor,
+} from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import '../../src/color-ramps/lib/register-color-spaces';
 import { FORMAT_JSON_ID } from './lib';
 
 function titleCase( str: string ) {
@@ -113,15 +120,15 @@ function transformColorToken(
 
 	// Always convert to hex
 	// (easier to convert to Figma RGB, and includes clamping)
-	let convertedColor: Color;
+	let convertedColor: ColorConstructor;
 	try {
-		convertedColor = new Color( cssColorValue );
+		convertedColor = parse( cssColorValue );
 	} catch {
 		console.warn( 'Unexpected: could not convert token value to Color' );
 		return;
 	}
 
-	return convertedColor.to( 'srgb' ).toString( { format: 'hex' } );
+	return serialize( to( convertedColor, sRGB ), { format: 'hex' } );
 }
 
 export default function pluginFigmaDsTokenManager( {

package/build/color-ramps/index.js

@@ -1,9 +1,6 @@
-"use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,15 +14,9 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/color-ramps/index.ts
 var color_ramps_exports = {};
 __export(color_ramps_exports, {
   DEFAULT_SEED_COLORS: () => import_constants2.DEFAULT_SEED_COLORS,
@@ -34,48 +25,39 @@ __export(color_ramps_exports, {
   checkAccessibleCombinations: () => checkAccessibleCombinations
 });
 module.exports = __toCommonJS(color_ramps_exports);
-var import_colorjs = __toESM(require("colorjs.io"));
+var import_fn = require("colorjs.io/fn");
+var import_register_color_spaces = require("./lib/register-color-spaces");
 var import_lib = require("./lib/index");
 var import_utils = require("./lib/utils");
 var import_ramp_configs = require("./lib/ramp-configs");
-var import_cache_utils = require("./lib/cache-utils");
+var import_color_utils = require("./lib/color-utils");
 var import_constants = require("./lib/constants");
 var import_constants2 = require("./lib/constants");
-function buildBgRamp({
-  seed,
-  debug
-}) {
+function buildBgRamp(seed) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");
   }
-  return (0, import_lib.buildRamp)(seed, import_ramp_configs.BG_RAMP_CONFIG, { debug });
+  return (0, import_lib.buildRamp)(seed, import_ramp_configs.BG_RAMP_CONFIG);
 }
-const STEP_TO_PIN = "surface2";
+var STEP_TO_PIN = "surface2";
 function getBgRampInfo(ramp) {
   return {
     mainDirection: ramp.direction,
     pinLightness: {
       stepName: STEP_TO_PIN,
       value: (0, import_utils.clampAccentScaleReferenceLightness)(
-        new import_colorjs.default(ramp.ramp[STEP_TO_PIN].color).oklch.l,
+        (0, import_fn.get)((0, import_fn.parse)(ramp.ramp[STEP_TO_PIN].color), [import_fn.OKLCH, "l"]),
         ramp.direction
       )
     }
   };
 }
-function buildAccentRamp({
-  seed,
-  bgRamp,
-  debug
-}) {
+function buildAccentRamp(seed, bgRamp) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");
   }
   const bgRampInfo = bgRamp ? getBgRampInfo(bgRamp) : void 0;
-  return (0, import_lib.buildRamp)(seed, import_ramp_configs.ACCENT_RAMP_CONFIG, {
-    ...bgRampInfo,
-    debug
-  });
+  return (0, import_lib.buildRamp)(seed, import_ramp_configs.ACCENT_RAMP_CONFIG, bgRampInfo);
 }
 function checkAccessibleCombinations({
   bgRamp,
@@ -86,14 +68,14 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = new import_colorjs.default(ramp.ramp[bg].color);
-          const fgColor = new import_colorjs.default(ramp.ramp[fg].color);
-          if ((0, import_cache_utils.getCachedContrast)(bgColor, fgColor) < target) {
+          const bgColor = (0, import_fn.parse)(ramp.ramp[bg].color);
+          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
+          if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: bgColor.toString(),
+              bgColor: (0, import_fn.serialize)(bgColor),
               fgName: fg,
-              fgColor: fgColor.toString(),
+              fgColor: (0, import_fn.serialize)(fgColor),
               unmetContrast: target
             });
           }
@@ -105,14 +87,14 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = new import_colorjs.default(bgRamp.ramp[bg].color);
-          const fgColor = new import_colorjs.default(ramp.ramp[fg].color);
-          if ((0, import_cache_utils.getCachedContrast)(bgColor, fgColor) < target) {
+          const bgColor = (0, import_fn.parse)(bgRamp.ramp[bg].color);
+          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
+          if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: bgColor.toString(),
+              bgColor: (0, import_fn.serialize)(bgColor),
               fgName: fg,
-              fgColor: fgColor.toString(),
+              fgColor: (0, import_fn.serialize)(fgColor),
               unmetContrast: target
             });
           }

package/build/color-ramps/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-ramps/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport Color from 'colorjs.io';\n\n/**\n * Internal dependencies\n */\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getCachedContrast } from './lib/cache-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param params\n * @param params.seed\n * @param params.debug\n */\nexport function buildBgRamp( {\n\tseed,\n\tdebug,\n}: {\n\tseed: string;\n\tdebug?: boolean;\n} ): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG, { debug } );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tnew Color( ramp.ramp[ STEP_TO_PIN ].color ).oklch.l,\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param params\n * @param params.seed\n * @param params.bgRamp\n * @param params.debug\n */\nexport function buildAccentRamp( {\n\tseed,\n\tbgRamp,\n\tdebug,\n}: {\n\tseed: string;\n\tbgRamp?: InternalRampResult;\n\tdebug?: boolean;\n} ): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, {\n\t\t...bgRampInfo,\n\t\tdebug,\n\t} );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = new Color( ramp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = new Color( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getCachedContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: bgColor.toString(),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: fgColor.toString(),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = new Color( bgRamp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = new Color( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getCachedContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: bgColor.toString(),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: fgColor.toString(),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkB;AAKlB,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAAkC;AAClC,uBAAsC;AACtC,IAAAA,oBAAoC;AAQ7B,SAAS,YAAa;AAAA,EAC5B;AAAA,EACA;AACD,GAGwB;AACvB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,oCAAgB,EAAE,MAAM,CAAE;AACnD;AAEA,MAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,QACN,IAAI,eAAAC,QAAO,KAAK,KAAM,WAAY,EAAE,KAAM,EAAE,MAAM;AAAA,QAClD,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAUO,SAAS,gBAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAIwB;AACvB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB;AAAA,IAC3C,GAAG;AAAA,IACH;AAAA,EACD,CAAE;AACH;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAMA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,IAAI,eAAAA,QAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,gBAAM,UAAU,IAAI,eAAAA,QAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,kBAAK,sCAAmB,SAAS,OAAQ,IAAI,QAAS;AACrD,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,IAAI,eAAAA,QAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AACnD,gBAAM,UAAU,IAAI,eAAAA,QAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,kBAAK,sCAAmB,SAAS,OAAQ,IAAI,QAAS;AACrD,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
-  "names": ["import_constants", "Color"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse, serialize } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( ramp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( bgRamp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA6C;AAK7C,mCAAO;AACP,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAA4B;AAC5B,uBAAsC;AACtC,IAAAA,oBAAoC;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,kCAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,YACN,mBAAK,iBAAO,KAAK,KAAM,WAAY,EAAE,KAAM,GAAG,CAAE,iBAAO,GAAI,CAAE;AAAA,QAC7D,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAMA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AAC/C,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
+  "names": ["import_constants"]
 }

package/build/color-ramps/lib/color-utils.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to2, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to2, key) && key !== except)
+        __defProp(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to2;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/color-ramps/lib/color-utils.ts
+var color_utils_exports = {};
+__export(color_utils_exports, {
+  getColorString: () => getColorString,
+  getContrast: () => getContrast
+});
+module.exports = __toCommonJS(color_utils_exports);
+var import_fn = require("colorjs.io/fn");
+var import_register_color_spaces = require("./register-color-spaces");
+function getColorString(color) {
+  return (0, import_fn.serialize)((0, import_fn.to)(color, import_fn.sRGB), { format: "hex", inGamut: true });
+}
+function getContrast(colorA, colorB) {
+  return (0, import_fn.contrastWCAG21)(colorA, colorB);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getColorString,
+  getContrast
+});
+//# sourceMappingURL=color-utils.js.map

package/build/color-ramps/lib/color-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/color-ramps/lib/color-utils.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tto,\n\tserialize,\n\tcontrastWCAG21,\n\tsRGB,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\n\n/**\n * Get string representation of a color\n * @param color Color object to stringify\n * @return String representation\n */\nexport function getColorString( color: ColorTypes ): string {\n\treturn serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );\n}\n\n/**\n * Get contrast value between two colors\n * @param colorA First color\n * @param colorB Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getContrast( colorA: ColorTypes, colorB: ColorTypes ): number {\n\treturn contrastWCAG21( colorA, colorB );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAMO;AAKP,mCAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,aAAO,yBAAW,cAAI,OAAO,cAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,aAAO,0BAAgB,QAAQ,MAAO;AACvC;",
+  "names": []
+}

package/build/color-ramps/lib/constants.js

@@ -1,31 +1,22 @@
-"use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __copyProps = (to, from, except, desc) => {
+var __copyProps = (to2, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+      if (!__hasOwnProp.call(to2, key) && key !== except)
+        __defProp(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return to;
+  return to2;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/color-ramps/lib/constants.ts
 var constants_exports = {};
 __export(constants_exports, {
   ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS: () => ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,
@@ -39,18 +30,19 @@ __export(constants_exports, {
   WHITE_TEXT_CONTRAST_MARGIN: () => WHITE_TEXT_CONTRAST_MARGIN
 });
 module.exports = __toCommonJS(constants_exports);
-var import_colorjs = __toESM(require("colorjs.io"));
-const WHITE = new import_colorjs.default("#fff").to("oklch");
-const BLACK = new import_colorjs.default("#000").to("oklch");
-const UNIVERSAL_CONTRAST_TOPUP = 0.05;
-const WHITE_TEXT_CONTRAST_MARGIN = 3.1;
-const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
+var import_fn = require("colorjs.io/fn");
+var import_register_color_spaces = require("./register-color-spaces");
+var WHITE = (0, import_fn.to)("white", import_fn.OKLCH);
+var BLACK = (0, import_fn.to)("black", import_fn.OKLCH);
+var UNIVERSAL_CONTRAST_TOPUP = 0.05;
+var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
+var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
   lighter: { min: 0.2, max: 0.4 },
   darker: { min: 0.75, max: 0.98 }
 };
-const LIGHTNESS_EPSILON = 1e-3;
-const MAX_BISECTION_ITERATIONS = 25;
-const CONTRAST_COMBINATIONS = [
+var LIGHTNESS_EPSILON = 4e-3;
+var MAX_BISECTION_ITERATIONS = 10;
+var CONTRAST_COMBINATIONS = [
   {
     bgs: ["surface1", "surface2", "surface3"],
     fgs: ["fgSurface3", "fgSurface4"],
@@ -82,11 +74,12 @@ const CONTRAST_COMBINATIONS = [
     target: 3
   }
 ];
-const DEFAULT_SEED_COLORS = {
+var DEFAULT_SEED_COLORS = {
   bg: "#f8f8f8",
   primary: "#3858e9",
   info: "#0090ff",
   success: "#4ab866",
+  caution: "#f0d149",
   warning: "#f0b849",
   error: "#cc1818"
 };

package/build/color-ramps/lib/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/constants.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport Color from 'colorjs.io';\n\n/**\n * Internal dependencies\n */\nimport type { Ramp } from './types';\n\nexport const WHITE = new Color( '#fff' ).to( 'oklch' );\nexport const BLACK = new Color( '#000' ).to( 'oklch' );\n\n// Margin added to target contrasts to counter for algorithm approximations\n// and rounding errors.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.05;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Minimum lightness difference noticed by the algorithm.\nexport const LIGHTNESS_EPSILON = 1e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 25;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkB;AAOX,MAAM,QAAQ,IAAI,eAAAA,QAAO,MAAO,EAAE,GAAI,OAAQ;AAC9C,MAAM,QAAQ,IAAI,eAAAA,QAAO,MAAO,EAAE,GAAI,OAAQ;AAI9C,MAAM,2BAA2B;AAOjC,MAAM,6BAA6B;AAOnC,MAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,MAAM,oBAAoB;AAE1B,MAAM,2BAA2B;AAEjC,MAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,MAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
-  "names": ["Color"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations\n// and rounding errors.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.05;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Lightness precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const LIGHTNESS_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA0B;AAK1B,mCAAO;AAGA,IAAM,YAAQ,cAAI,SAAS,eAAM;AACjC,IAAM,YAAQ,cAAI,SAAS,eAAM;AAIjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,oBAAoB;AAE1B,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
+  "names": []
 }