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

package/build/theme-provider.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,25 +14,30 @@ 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/theme-provider.tsx
 var theme_provider_exports = {};
 __export(theme_provider_exports, {
   ThemeProvider: () => ThemeProvider
 });
 module.exports = __toCommonJS(theme_provider_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_element = require("@wordpress/element");
 var import_context = require("./context");
 var import_use_theme_provider_styles = require("./use-theme-provider-styles");
-var import_style = __toESM(require("./style.module.css"));
+
+// packages/theme/src/style.module.css
+var css = `.style-module__root__26kw6 {
+	display: contents;
+}
+`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_default = {
+  "root": "style-module__root__26kw6"
+};
+
+// packages/theme/src/theme-provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 function cssObjectToText(values) {
   return Object.entries(values).map(([key, value]) => `${key}: ${value};`).join("");
 }
@@ -48,13 +50,13 @@ function generateCSSSelector({
   const selectors = [];
   if (isRoot) {
     selectors.push(
-      `:root:has(.${import_style.default.root}${rootSel}${instanceIdSel})`
+      `:root:has(.${style_default.root}${rootSel}${instanceIdSel})`
     );
   }
-  selectors.push(`.${import_style.default.root}.${import_style.default.root}${instanceIdSel}`);
+  selectors.push(`.${style_default.root}.${style_default.root}${instanceIdSel}`);
   return selectors.join(",");
 }
-const ThemeProvider = ({
+var ThemeProvider = ({
   children,
   color = {},
   isRoot = false
@@ -79,7 +81,7 @@ const ThemeProvider = ({
       {
         "data-wpds-theme-provider-id": instanceId,
         "data-wpds-root-provider": isRoot,
-        className: import_style.default.root,
+        className: style_default.root,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ThemeContext.Provider, { value: contextValue, children })
       }
     )

package/build/theme-provider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/theme-provider.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEE;AA1DF,qBAA+B;AAK/B,qBAA6B;AAC7B,uCAAuC;AAEvC,mBAAmB;AAEnB,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,aAAAA,QAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,aAAAA,QAAO,IAAK,IAAK,aAAAA,QAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,MAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,SAAS;AACV,MAA2B;AAC1B,QAAM,iBAAa,sBAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,QAAI,yDAAwB;AAAA,IACzE;AAAA,EACD,CAAE;AAEF,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,4EACG;AAAA,0BACD,4CAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,WAAY,aAAAA,QAAO;AAAA,QAEnB,sDAAC,4BAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
-  "names": ["styles"]
+  "sources": ["../src/theme-provider.tsx", "../src/style.module.css"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useId } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport { useThemeProviderStyles } from './use-theme-provider-styles';\nimport { type ThemeProviderProps } from './types';\nimport styles from './style.module.css';\n\nfunction cssObjectToText( values: CSSProperties ) {\n\treturn Object.entries( values )\n\t\t.map( ( [ key, value ] ) => `${ key }: ${ value };` )\n\t\t.join( '' );\n}\n\nfunction generateCSSSelector( {\n\tinstanceId,\n\tisRoot,\n}: {\n\tinstanceId: string;\n\tisRoot: boolean;\n} ) {\n\tconst rootSel = `[data-wpds-root-provider=\"true\"]`;\n\tconst instanceIdSel = `[data-wpds-theme-provider-id=\"${ instanceId }\"]`;\n\n\tconst selectors = [];\n\n\tif ( isRoot ) {\n\t\tselectors.push(\n\t\t\t`:root:has(.${ styles.root }${ rootSel }${ instanceIdSel })`\n\t\t);\n\t}\n\n\tselectors.push( `.${ styles.root }.${ styles.root }${ instanceIdSel }` );\n\n\treturn selectors.join( ',' );\n}\n\nexport const ThemeProvider = ( {\n\tchildren,\n\tcolor = {},\n\tisRoot = false,\n}: ThemeProviderProps ) => {\n\tconst instanceId = useId();\n\n\tconst { themeProviderStyles, resolvedSettings } = useThemeProviderStyles( {\n\t\tcolor,\n\t} );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tresolvedSettings,\n\t\t} ),\n\t\t[ resolvedSettings ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ themeProviderStyles ? (\n\t\t\t\t<style>\n\t\t\t\t\t{ `${ generateCSSSelector( {\n\t\t\t\t\t\tinstanceId,\n\t\t\t\t\t\tisRoot,\n\t\t\t\t\t} ) } {${ cssObjectToText( themeProviderStyles ) }}` }\n\t\t\t\t</style>\n\t\t\t) : null }\n\t\t\t<div\n\t\t\t\tdata-wpds-theme-provider-id={ instanceId }\n\t\t\t\tdata-wpds-root-provider={ isRoot }\n\t\t\t\tclassName={ styles.root }\n\t\t\t>\n\t\t\t\t<ThemeContext.Provider value={ contextValue }>\n\t\t\t\t\t{ children }\n\t\t\t\t</ThemeContext.Provider>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n", "const css = `.style-module__root__26kw6 {\n\tdisplay: contents;\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"root\": \"style-module__root__26kw6\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+B;AAK/B,qBAA6B;AAC7B,uCAAuC;;;ACdvC,IAAM,MAAM;AAAA;AAAA;AAAA;AAIZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,QAAQ;AACV;;;ADwDE;AAhDF,SAAS,gBAAiB,QAAwB;AACjD,SAAO,OAAO,QAAS,MAAO,EAC5B,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO,GAAI,GAAI,KAAM,KAAM,GAAI,EACnD,KAAM,EAAG;AACZ;AAEA,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AACD,GAGI;AACH,QAAM,UAAU;AAChB,QAAM,gBAAgB,iCAAkC,UAAW;AAEnE,QAAM,YAAY,CAAC;AAEnB,MAAK,QAAS;AACb,cAAU;AAAA,MACT,cAAe,cAAO,IAAK,GAAI,OAAQ,GAAI,aAAc;AAAA,IAC1D;AAAA,EACD;AAEA,YAAU,KAAM,IAAK,cAAO,IAAK,IAAK,cAAO,IAAK,GAAI,aAAc,EAAG;AAEvE,SAAO,UAAU,KAAM,GAAI;AAC5B;AAEO,IAAM,gBAAgB,CAAE;AAAA,EAC9B;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,SAAS;AACV,MAA2B;AAC1B,QAAM,iBAAa,sBAAM;AAEzB,QAAM,EAAE,qBAAqB,iBAAiB,QAAI,yDAAwB;AAAA,IACzE;AAAA,EACD,CAAE;AAEF,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAE,gBAAiB;AAAA,EACpB;AAEA,SACC,4EACG;AAAA,0BACD,4CAAC,WACE,aAAI,oBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD,CAAE,CAAE,KAAM,gBAAiB,mBAAoB,CAAE,KAClD,IACG;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACA,+BAA8B;AAAA,QAC9B,2BAA0B;AAAA,QAC1B,WAAY,cAAO;AAAA,QAEnB,sDAAC,4BAAa,UAAb,EAAsB,OAAQ,cAC5B,UACH;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "names": []
 }

package/build/types/css-modules.d.js

@@ -1,2 +1 @@
-"use strict";
 //# sourceMappingURL=css-modules.d.js.map

package/build/types.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -12,6 +11,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
 //# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/types.ts"],
   "sourcesContent": ["/**\n * External dependencies\n */\nimport { type ReactNode } from 'react';\n\nexport interface ThemeProviderSettings {\n\t/**\n\t * The set of color options to apply to the theme.\n\t */\n\tcolor?: {\n\t\t/**\n\t\t * The primary seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tprimary?: string;\n\t\t/**\n\t\t * The background seed color to use for the theme.\n\t\t *\n\t\t * By default, it inherits from parent `ThemeProvider`,\n\t\t * and fallbacks to statically built CSS.\n\t\t */\n\t\tbg?: string;\n\t};\n}\n\nexport interface ThemeProviderProps extends ThemeProviderSettings {\n\t/**\n\t * The children to render.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * When a ThemeProvider is the root provider, it will apply its theming\n\t * settings also to the root document element (e.g. the html element).\n\t * This is useful, for example, to make sure that the `html` element can\n\t * consume the right background color, or that overlays rendered inside a\n\t * portal can inherit the correct color scheme.\n\t *\n\t * @default false\n\t */\n\tisRoot?: boolean;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build/use-theme-provider-styles.js

@@ -1,4 +1,3 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -9,13 +8,13 @@ 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
@@ -26,17 +25,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/use-theme-provider-styles.ts
 var use_theme_provider_styles_exports = {};
 __export(use_theme_provider_styles_exports, {
   useThemeProviderStyles: () => useThemeProviderStyles
 });
 module.exports = __toCommonJS(use_theme_provider_styles_exports);
-var import_colorjs = __toESM(require("colorjs.io"));
+var import_fn = require("colorjs.io/fn");
+var import_memize = __toESM(require("memize"));
 var import_element = require("@wordpress/element");
+var import_register_color_spaces = require("./color-ramps/lib/register-color-spaces");
 var import_context = require("./context");
 var import_design_tokens = __toESM(require("./prebuilt/ts/design-tokens"));
 var import_color_ramps = require("./color-ramps");
-const legacyWpComponentsOverridesCSS = [
+var getCachedBgRamp = (0, import_memize.default)(import_color_ramps.buildBgRamp, { maxSize: 10 });
+var getCachedAccentRamp = (0, import_memize.default)(import_color_ramps.buildAccentRamp, { maxSize: 10 });
+var legacyWpComponentsOverridesCSS = [
   ["--wp-components-color-accent", "var(--wp-admin-theme-color)"],
   [
     "--wp-components-color-accent-darker-10",
@@ -92,37 +97,49 @@ const legacyWpComponentsOverridesCSS = [
   ]
 ];
 function customRgbFormat(color) {
-  const rgb = color.to("srgb");
-  return [rgb.r, rgb.g, rgb.b].map((n) => Math.round(n * 255)).join(", ");
+  const rgb = (0, import_fn.to)(color, import_fn.sRGB);
+  return [(0, import_fn.get)(rgb, "srgb.r"), (0, import_fn.get)(rgb, "srgb.g"), (0, import_fn.get)(rgb, "srgb.b")].map((n) => Math.round(n * 255)).join(", ");
 }
 function legacyWpAdminThemeOverridesCSS(accent) {
-  const parsedAccent = new import_colorjs.default(accent).to("hsl");
-  const hsl = parsedAccent.coords;
-  const darker10 = new import_colorjs.default("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 import_colorjs.default("hsl", [
-    hsl[0],
-    // h
-    hsl[1],
-    // s
-    Math.max(0, Math.min(100, hsl[2] - 10))
-    // l (reduced by 10%)
-  ]).to("srgb");
+  const parsedAccent = (0, import_fn.to)((0, import_fn.parse)(accent), import_fn.HSL);
+  const coords = parsedAccent.coords;
+  const darker10 = (0, import_fn.to)(
+    {
+      space: import_fn.HSL,
+      coords: [
+        coords[0],
+        // h
+        coords[1],
+        // s
+        Math.max(0, Math.min(100, coords[2] - 5))
+        // l (reduced by 5%)
+      ]
+    },
+    import_fn.sRGB
+  );
+  const darker20 = (0, import_fn.to)(
+    {
+      space: import_fn.HSL,
+      coords: [
+        coords[0],
+        // h
+        coords[1],
+        // s
+        Math.max(0, Math.min(100, coords[2] - 10))
+        // l (reduced by 10%)
+      ]
+    },
+    import_fn.sRGB
+  );
   return [
     [
       "--wp-admin-theme-color",
-      parsedAccent.to("srgb").toString({ format: "hex" })
+      (0, import_fn.serialize)((0, import_fn.to)(parsedAccent, import_fn.sRGB), { format: "hex" })
     ],
     ["--wp-admin-theme-color--rgb", customRgbFormat(parsedAccent)],
     [
       "--wp-admin-theme-color-darker-10",
-      darker10.toString({ format: "hex" })
+      (0, import_fn.serialize)(darker10, { format: "hex" })
     ],
     [
       "--wp-admin-theme-color-darker-10--rgb",
@@ -130,7 +147,7 @@ function legacyWpAdminThemeOverridesCSS(accent) {
     ],
     [
       "--wp-admin-theme-color-darker-20",
-      darker20.toString({ format: "hex" })
+      (0, import_fn.serialize)(darker20, { format: "hex" })
     ],
     [
       "--wp-admin-theme-color-darker-20--rgb",
@@ -144,7 +161,7 @@ function semanticTokensCSS(filterFn = () => true) {
     modesAndValues["."]
   ]);
 }
-const toKebabCase = (str) => str.replace(
+var toKebabCase = (str) => str.replace(
   /[A-Z]+(?![a-z])|[A-Z]/g,
   ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()
 );
@@ -199,17 +216,14 @@ function useThemeProviderStyles({
       primary
     };
     const computedColorRamps = /* @__PURE__ */ new Map();
-    const bgRamp = (0, import_color_ramps.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,
-          (0, import_color_ramps.buildAccentRamp)({
-            seed,
-            bgRamp
-          })
+          getCachedAccentRamp(seed, bgRamp)
         );
       }
     });

package/build/use-theme-provider-styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/use-theme-provider-styles.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport Color from 'colorjs.io';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ThemeContext } from './context';\nimport semanticVariables from './prebuilt/ts/design-tokens';\nimport {\n\tbuildBgRamp,\n\tbuildAccentRamp,\n\tDEFAULT_SEED_COLORS,\n\ttype RampResult,\n} from './color-ramps';\nimport type { ThemeProviderProps } from './types';\n\ntype Entry = [ string, string ];\n\nconst legacyWpComponentsOverridesCSS: Entry[] = [\n\t[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],\n\t[\n\t\t'--wp-components-color-accent-darker-10',\n\t\t'var(--wp-admin-theme-color-darker-10)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-darker-20',\n\t\t'var(--wp-admin-theme-color-darker-20)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-inverted',\n\t\t'var(--wpds-color-fg-interactive-brand-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n];\n\nfunction customRgbFormat( color: Color ) {\n\tconst rgb = color.to( 'srgb' );\n\treturn [ rgb.r, rgb.g, rgb.b ]\n\t\t.map( ( n ) => Math.round( n * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = new Color( accent ).to( 'hsl' );\n\n\tconst hsl = parsedAccent.coords;\n\tconst darker10 = new Color( 'hsl', [\n\t\thsl[ 0 ], // h\n\t\thsl[ 1 ], // s\n\t\tMath.max( 0, Math.min( 100, hsl[ 2 ] - 5 ) ), // l (reduced by 5%)\n\t] ).to( 'srgb' );\n\tconst darker20 = new Color( 'hsl', [\n\t\thsl[ 0 ], // h\n\t\thsl[ 1 ], // s\n\t\tMath.max( 0, Math.min( 100, hsl[ 2 ] - 10 ) ), // l (reduced by 10%)\n\t] ).to( 'srgb' );\n\n\treturn [\n\t\t[\n\t\t\t'--wp-admin-theme-color',\n\t\t\tparsedAccent.to( 'srgb' ).toString( { format: 'hex' } ),\n\t\t],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10',\n\t\t\tdarker10.toString( { format: 'hex' } ),\n\t\t],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10--rgb',\n\t\t\tcustomRgbFormat( darker10 ),\n\t\t],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20',\n\t\t\tdarker20.toString( { format: 'hex' } ),\n\t\t],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20--rgb',\n\t\t\tcustomRgbFormat( darker20 ),\n\t\t],\n\t];\n}\n\nfunction semanticTokensCSS(\n\tfilterFn: ( entry: [ string, Record< string, string > ] ) => boolean = () =>\n\t\ttrue\n): Entry[] {\n\treturn Object.entries( semanticVariables )\n\t\t.filter( filterFn )\n\t\t.map( ( [ variableName, modesAndValues ] ) => [\n\t\t\tvariableName,\n\t\t\tmodesAndValues[ '.' ],\n\t\t] );\n}\n\nconst toKebabCase = ( str: string ) =>\n\tstr.replace(\n\t\t/[A-Z]+(?![a-z])|[A-Z]/g,\n\t\t( $, ofs ) => ( ofs ? '-' : '' ) + $.toLowerCase()\n\t);\n\nfunction colorRampCSS( ramp: RampResult, prefix: string ): Entry[] {\n\treturn [ ...Object.entries( ramp.ramp ) ].map(\n\t\t( [ tokenName, tokenValue ] ) => [\n\t\t\t`${ prefix }${ toKebabCase( tokenName ) }`,\n\t\t\ttokenValue.color,\n\t\t]\n\t);\n}\n\nfunction generateStyles( {\n\tprimary,\n\tcomputedColorRamps,\n}: {\n\tprimary: string;\n\tcomputedColorRamps: Map< string, RampResult >;\n} ): CSSProperties {\n\treturn Object.fromEntries(\n\t\t[\n\t\t\t// Primitive tokens\n\t\t\tArray.from( computedColorRamps )\n\t\t\t\t.map( ( [ rampName, computedColorRamp ] ) => [\n\t\t\t\t\tcolorRampCSS(\n\t\t\t\t\t\tcomputedColorRamp,\n\t\t\t\t\t\t`--wpds-color-private-${ rampName }-`\n\t\t\t\t\t),\n\t\t\t\t] )\n\t\t\t\t.flat( 2 ),\n\t\t\t// Semantic color tokens (other semantic tokens for now are static)\n\t\t\tsemanticTokensCSS( ( [ key ] ) => /color/.test( key ) ),\n\t\t\t// Legacy overrides\n\t\t\tlegacyWpAdminThemeOverridesCSS( primary ),\n\t\t\tlegacyWpComponentsOverridesCSS,\n\t\t].flat()\n\t);\n}\n\nexport function useThemeProviderStyles( {\n\tcolor = {},\n}: {\n\tcolor?: ThemeProviderProps[ 'color' ];\n} = {} ) {\n\tconst { resolvedSettings: inheritedSettings } = useContext( ThemeContext );\n\n\t// Compute settings:\n\t// - used provided prop value;\n\t// - otherwise, use inherited value from parent instance;\n\t// - otherwise, use fallback value (where applicable).\n\tconst primary =\n\t\tcolor.primary ??\n\t\tinheritedSettings.color?.primary ??\n\t\tDEFAULT_SEED_COLORS.primary;\n\tconst bg =\n\t\tcolor.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;\n\n\tconst resolvedSettings = useMemo(\n\t\t() => ( {\n\t\t\tcolor: {\n\t\t\t\tprimary,\n\t\t\t\tbg,\n\t\t\t},\n\t\t} ),\n\t\t[ primary, bg ]\n\t);\n\n\tconst themeProviderStyles = useMemo( () => {\n\t\t// Determine which seeds are needed for generating ramps.\n\t\tconst seeds = {\n\t\t\t...DEFAULT_SEED_COLORS,\n\t\t\tbg,\n\t\t\tprimary,\n\t\t};\n\n\t\t// Generate ramps.\n\t\tconst computedColorRamps = new Map< string, RampResult >();\n\t\tconst bgRamp = buildBgRamp( { seed: seeds.bg } );\n\t\tObject.entries( seeds ).forEach( ( [ rampName, seed ] ) => {\n\t\t\tif ( rampName === 'bg' ) {\n\t\t\t\tcomputedColorRamps.set( rampName, bgRamp );\n\t\t\t} else {\n\t\t\t\tcomputedColorRamps.set(\n\t\t\t\t\trampName,\n\t\t\t\t\tbuildAccentRamp( {\n\t\t\t\t\t\tseed,\n\t\t\t\t\t\tbgRamp,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn generateStyles( {\n\t\t\tprimary: seeds.primary,\n\t\t\tcomputedColorRamps,\n\t\t} );\n\t}, [ primary, bg ] );\n\n\treturn {\n\t\tresolvedSettings,\n\t\tthemeProviderStyles,\n\t};\n}\n"],
-  "mappings": "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",
-  "names": ["Color", "semanticVariables"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\nimport {\n\tparse,\n\tto,\n\tget,\n\tserialize,\n\tsRGB,\n\tHSL,\n\ttype ColorTypes,\n} from 'colorjs.io/fn';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport './color-ramps/lib/register-color-spaces';\nimport { ThemeContext } from './context';\nimport semanticVariables from './prebuilt/ts/design-tokens';\nimport {\n\tbuildBgRamp,\n\tbuildAccentRamp,\n\tDEFAULT_SEED_COLORS,\n\ttype RampResult,\n} from './color-ramps';\nimport type { ThemeProviderProps } from './types';\n\ntype Entry = [ string, string ];\n\nconst getCachedBgRamp = memoize( buildBgRamp, { maxSize: 10 } );\nconst getCachedAccentRamp = memoize( buildAccentRamp, { maxSize: 10 } );\n\nconst legacyWpComponentsOverridesCSS: Entry[] = [\n\t[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],\n\t[\n\t\t'--wp-components-color-accent-darker-10',\n\t\t'var(--wp-admin-theme-color-darker-10)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-darker-20',\n\t\t'var(--wp-admin-theme-color-darker-20)',\n\t],\n\t[\n\t\t'--wp-components-color-accent-inverted',\n\t\t'var(--wpds-color-fg-interactive-brand-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-background',\n\t\t'var(--wpds-color-bg-surface-neutral-strong)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-foreground-inverted',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-100',\n\t\t'var(--wpds-color-bg-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-200',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-300',\n\t\t'var(--wpds-color-stroke-surface-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-400',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-600',\n\t\t'var(--wpds-color-stroke-interactive-neutral)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-700',\n\t\t'var(--wpds-color-fg-content-neutral-weak)',\n\t],\n\t[\n\t\t'--wp-components-color-gray-800',\n\t\t'var(--wpds-color-fg-content-neutral)',\n\t],\n];\n\nfunction customRgbFormat( color: ColorTypes ) {\n\tconst rgb = to( color, sRGB );\n\treturn [ get( rgb, 'srgb.r' ), get( rgb, 'srgb.g' ), get( rgb, 'srgb.b' ) ]\n\t\t.map( ( n ) => Math.round( n * 255 ) )\n\t\t.join( ', ' );\n}\n\nfunction legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {\n\tconst parsedAccent = to( parse( accent ), HSL );\n\n\tconst coords = parsedAccent.coords;\n\tconst darker10 = to(\n\t\t{\n\t\t\tspace: HSL,\n\t\t\tcoords: [\n\t\t\t\tcoords[ 0 ], // h\n\t\t\t\tcoords[ 1 ], // s\n\t\t\t\tMath.max( 0, Math.min( 100, coords[ 2 ] - 5 ) ), // l (reduced by 5%)\n\t\t\t],\n\t\t},\n\t\tsRGB\n\t);\n\tconst darker20 = to(\n\t\t{\n\t\t\tspace: HSL,\n\t\t\tcoords: [\n\t\t\t\tcoords[ 0 ], // h\n\t\t\t\tcoords[ 1 ], // s\n\t\t\t\tMath.max( 0, Math.min( 100, coords[ 2 ] - 10 ) ), // l (reduced by 10%)\n\t\t\t],\n\t\t},\n\t\tsRGB\n\t);\n\n\treturn [\n\t\t[\n\t\t\t'--wp-admin-theme-color',\n\t\t\tserialize( to( parsedAccent, sRGB ), { format: 'hex' } ),\n\t\t],\n\t\t[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10',\n\t\t\tserialize( darker10, { format: 'hex' } ),\n\t\t],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-10--rgb',\n\t\t\tcustomRgbFormat( darker10 ),\n\t\t],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20',\n\t\t\tserialize( darker20, { format: 'hex' } ),\n\t\t],\n\t\t[\n\t\t\t'--wp-admin-theme-color-darker-20--rgb',\n\t\t\tcustomRgbFormat( darker20 ),\n\t\t],\n\t];\n}\n\nfunction semanticTokensCSS(\n\tfilterFn: ( entry: [ string, Record< string, string > ] ) => boolean = () =>\n\t\ttrue\n): Entry[] {\n\treturn Object.entries( semanticVariables )\n\t\t.filter( filterFn )\n\t\t.map( ( [ variableName, modesAndValues ] ) => [\n\t\t\tvariableName,\n\t\t\tmodesAndValues[ '.' ],\n\t\t] );\n}\n\nconst toKebabCase = ( str: string ) =>\n\tstr.replace(\n\t\t/[A-Z]+(?![a-z])|[A-Z]/g,\n\t\t( $, ofs ) => ( ofs ? '-' : '' ) + $.toLowerCase()\n\t);\n\nfunction colorRampCSS( ramp: RampResult, prefix: string ): Entry[] {\n\treturn [ ...Object.entries( ramp.ramp ) ].map(\n\t\t( [ tokenName, tokenValue ] ) => [\n\t\t\t`${ prefix }${ toKebabCase( tokenName ) }`,\n\t\t\ttokenValue.color,\n\t\t]\n\t);\n}\n\nfunction generateStyles( {\n\tprimary,\n\tcomputedColorRamps,\n}: {\n\tprimary: string;\n\tcomputedColorRamps: Map< string, RampResult >;\n} ): CSSProperties {\n\treturn Object.fromEntries(\n\t\t[\n\t\t\t// Primitive tokens\n\t\t\tArray.from( computedColorRamps )\n\t\t\t\t.map( ( [ rampName, computedColorRamp ] ) => [\n\t\t\t\t\tcolorRampCSS(\n\t\t\t\t\t\tcomputedColorRamp,\n\t\t\t\t\t\t`--wpds-color-private-${ rampName }-`\n\t\t\t\t\t),\n\t\t\t\t] )\n\t\t\t\t.flat( 2 ),\n\t\t\t// Semantic color tokens (other semantic tokens for now are static)\n\t\t\tsemanticTokensCSS( ( [ key ] ) => /color/.test( key ) ),\n\t\t\t// Legacy overrides\n\t\t\tlegacyWpAdminThemeOverridesCSS( primary ),\n\t\t\tlegacyWpComponentsOverridesCSS,\n\t\t].flat()\n\t);\n}\n\nexport function useThemeProviderStyles( {\n\tcolor = {},\n}: {\n\tcolor?: ThemeProviderProps[ 'color' ];\n} = {} ) {\n\tconst { resolvedSettings: inheritedSettings } = useContext( ThemeContext );\n\n\t// Compute settings:\n\t// - used provided prop value;\n\t// - otherwise, use inherited value from parent instance;\n\t// - otherwise, use fallback value (where applicable).\n\tconst primary =\n\t\tcolor.primary ??\n\t\tinheritedSettings.color?.primary ??\n\t\tDEFAULT_SEED_COLORS.primary;\n\tconst bg =\n\t\tcolor.bg ?? inheritedSettings.color?.bg ?? DEFAULT_SEED_COLORS.bg;\n\n\tconst resolvedSettings = useMemo(\n\t\t() => ( {\n\t\t\tcolor: {\n\t\t\t\tprimary,\n\t\t\t\tbg,\n\t\t\t},\n\t\t} ),\n\t\t[ primary, bg ]\n\t);\n\n\tconst themeProviderStyles = useMemo( () => {\n\t\t// Determine which seeds are needed for generating ramps.\n\t\tconst seeds = {\n\t\t\t...DEFAULT_SEED_COLORS,\n\t\t\tbg,\n\t\t\tprimary,\n\t\t};\n\n\t\t// Generate ramps.\n\t\tconst computedColorRamps = new Map< string, RampResult >();\n\t\tconst bgRamp = getCachedBgRamp( seeds.bg );\n\t\tObject.entries( seeds ).forEach( ( [ rampName, seed ] ) => {\n\t\t\tif ( rampName === 'bg' ) {\n\t\t\t\tcomputedColorRamps.set( rampName, bgRamp );\n\t\t\t} else {\n\t\t\t\tcomputedColorRamps.set(\n\t\t\t\t\trampName,\n\t\t\t\t\tgetCachedAccentRamp( seed, bgRamp )\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn generateStyles( {\n\t\t\tprimary: seeds.primary,\n\t\t\tcomputedColorRamps,\n\t\t} );\n\t}, [ primary, bg ] );\n\n\treturn {\n\t\tresolvedSettings,\n\t\tthemeProviderStyles,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": ["memoize", "semanticVariables"]
 }

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

@@ -1,45 +1,37 @@
-import Color from "colorjs.io";
+// packages/theme/src/color-ramps/index.ts
+import { get, OKLCH, parse, serialize } from "colorjs.io/fn";
+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";
-import { getCachedContrast } from "./lib/cache-utils";
+import { getContrast } from "./lib/color-utils";
 import { CONTRAST_COMBINATIONS } from "./lib/constants";
 import { DEFAULT_SEED_COLORS } from "./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 buildRamp(seed, BG_RAMP_CONFIG, { debug });
+  return buildRamp(seed, 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: clampAccentScaleReferenceLightness(
-        new Color(ramp.ramp[STEP_TO_PIN].color).oklch.l,
+        get(parse(ramp.ramp[STEP_TO_PIN].color), [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 buildRamp(seed, ACCENT_RAMP_CONFIG, {
-    ...bgRampInfo,
-    debug
-  });
+  return buildRamp(seed, ACCENT_RAMP_CONFIG, bgRampInfo);
 }
 function checkAccessibleCombinations({
   bgRamp,
@@ -50,14 +42,14 @@ 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
             });
           }
@@ -69,14 +61,14 @@ 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/build-module/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": "AAGA,OAAO,WAAW;AAKlB,SAAS,iBAAiB;AAC1B,SAAS,0CAA0C;AACnD,SAAS,gBAAgB,0BAA0B;AAMnD,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;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,SAAO,UAAW,MAAM,gBAAgB,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,OAAO;AAAA,QACN,IAAI,MAAO,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,SAAO,UAAW,MAAM,oBAAoB;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,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,IAAI,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,gBAAM,UAAU,IAAI,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,cAAK,kBAAmB,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,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,IAAI,MAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AACnD,gBAAM,UAAU,IAAI,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,cAAK,kBAAmB,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;",
+  "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": ";AAGA,SAAS,KAAK,OAAO,OAAO,iBAAiB;AAK7C,OAAO;AACP,SAAS,iBAAiB;AAC1B,SAAS,0CAA0C;AACnD,SAAS,gBAAgB,0BAA0B;AAMnD,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,SAAO,UAAW,MAAM,cAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,OAAO;AAAA,QACN,IAAK,MAAO,KAAK,KAAM,WAAY,EAAE,KAAM,GAAG,CAAE,OAAO,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,SAAO,UAAW,MAAM,oBAAoB,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,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,cAAK,YAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,SAAS,UAAW,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,0BAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,UAAU,MAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AAC/C,gBAAM,UAAU,MAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,cAAK,YAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,SAAS,UAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
   "names": []
 }

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

@@ -0,0 +1,19 @@
+// packages/theme/src/color-ramps/lib/color-utils.ts
+import {
+  to,
+  serialize,
+  contrastWCAG21,
+  sRGB
+} from "colorjs.io/fn";
+import "./register-color-spaces";
+function getColorString(color) {
+  return serialize(to(color, sRGB), { format: "hex", inGamut: true });
+}
+function getContrast(colorA, colorB) {
+  return contrastWCAG21(colorA, colorB);
+}
+export {
+  getColorString,
+  getContrast
+};
+//# sourceMappingURL=color-utils.js.map

package/build-module/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": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AAKP,OAAO;AAOA,SAAS,eAAgB,OAA4B;AAC3D,SAAO,UAAW,GAAI,OAAO,IAAK,GAAG,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACvE;AAQO,SAAS,YAAa,QAAoB,QAA6B;AAC7E,SAAO,eAAgB,QAAQ,MAAO;AACvC;",
+  "names": []
+}

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

@@ -1,15 +1,17 @@
-import Color from "colorjs.io";
-const WHITE = new Color("#fff").to("oklch");
-const BLACK = new Color("#000").to("oklch");
-const UNIVERSAL_CONTRAST_TOPUP = 0.05;
-const WHITE_TEXT_CONTRAST_MARGIN = 3.1;
-const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
+// packages/theme/src/color-ramps/lib/constants.ts
+import { to, OKLCH } from "colorjs.io/fn";
+import "./register-color-spaces";
+var WHITE = to("white", OKLCH);
+var BLACK = to("black", 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"],
@@ -41,11 +43,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-module/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": "AAGA,OAAO,WAAW;AAOX,MAAM,QAAQ,IAAI,MAAO,MAAO,EAAE,GAAI,OAAQ;AAC9C,MAAM,QAAQ,IAAI,MAAO,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;",
+  "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": ";AAGA,SAAS,IAAI,aAAa;AAK1B,OAAO;AAGA,IAAM,QAAQ,GAAI,SAAS,KAAM;AACjC,IAAM,QAAQ,GAAI,SAAS,KAAM;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": []
 }