@wordpress/theme 0.1.0

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

@@ -0,0 +1,230 @@
+"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) => {
+  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 });
+  }
+  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);
+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_element = require("@wordpress/element");
+var import_context = require("./context");
+var import_design_tokens = __toESM(require("./prebuilt/ts/design-tokens"));
+var import_color_ramps = require("./color-ramps");
+const legacyWpComponentsOverridesCSS = [
+  ["--wp-components-color-accent", "var(--wp-admin-theme-color)"],
+  [
+    "--wp-components-color-accent-darker-10",
+    "var(--wp-admin-theme-color-darker-10)"
+  ],
+  [
+    "--wp-components-color-accent-darker-20",
+    "var(--wp-admin-theme-color-darker-20)"
+  ],
+  [
+    "--wp-components-color-accent-inverted",
+    "var(--wpds-color-fg-interactive-brand-strong)"
+  ],
+  [
+    "--wp-components-color-background",
+    "var(--wpds-color-bg-surface-neutral-strong)"
+  ],
+  [
+    "--wp-components-color-foreground",
+    "var(--wpds-color-fg-content-neutral)"
+  ],
+  [
+    "--wp-components-color-foreground-inverted",
+    "var(--wpds-color-bg-surface-neutral)"
+  ],
+  [
+    "--wp-components-color-gray-100",
+    "var(--wpds-color-bg-surface-neutral)"
+  ],
+  [
+    "--wp-components-color-gray-200",
+    "var(--wpds-color-stroke-surface-neutral)"
+  ],
+  [
+    "--wp-components-color-gray-300",
+    "var(--wpds-color-stroke-surface-neutral)"
+  ],
+  [
+    "--wp-components-color-gray-400",
+    "var(--wpds-color-stroke-interactive-neutral)"
+  ],
+  [
+    "--wp-components-color-gray-600",
+    "var(--wpds-color-stroke-interactive-neutral)"
+  ],
+  [
+    "--wp-components-color-gray-700",
+    "var(--wpds-color-fg-content-neutral-weak)"
+  ],
+  [
+    "--wp-components-color-gray-800",
+    "var(--wpds-color-fg-content-neutral)"
+  ]
+];
+function customRgbFormat(color) {
+  const rgb = color.to("srgb");
+  return [rgb.r, rgb.g, rgb.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");
+  return [
+    [
+      "--wp-admin-theme-color",
+      parsedAccent.to("srgb").toString({ format: "hex" })
+    ],
+    ["--wp-admin-theme-color--rgb", customRgbFormat(parsedAccent)],
+    [
+      "--wp-admin-theme-color-darker-10",
+      darker10.toString({ format: "hex" })
+    ],
+    [
+      "--wp-admin-theme-color-darker-10--rgb",
+      customRgbFormat(darker10)
+    ],
+    [
+      "--wp-admin-theme-color-darker-20",
+      darker20.toString({ format: "hex" })
+    ],
+    [
+      "--wp-admin-theme-color-darker-20--rgb",
+      customRgbFormat(darker20)
+    ]
+  ];
+}
+function semanticTokensCSS(filterFn = () => true) {
+  return Object.entries(import_design_tokens.default).filter(filterFn).map(([variableName, modesAndValues]) => [
+    variableName,
+    modesAndValues["."]
+  ]);
+}
+const toKebabCase = (str) => str.replace(
+  /[A-Z]+(?![a-z])|[A-Z]/g,
+  ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()
+);
+function colorRampCSS(ramp, prefix) {
+  return [...Object.entries(ramp.ramp)].map(
+    ([tokenName, tokenValue]) => [
+      `${prefix}${toKebabCase(tokenName)}`,
+      tokenValue.color
+    ]
+  );
+}
+function generateStyles({
+  primary,
+  computedColorRamps
+}) {
+  return Object.fromEntries(
+    [
+      // Primitive tokens
+      Array.from(computedColorRamps).map(([rampName, computedColorRamp]) => [
+        colorRampCSS(
+          computedColorRamp,
+          `--wpds-color-private-${rampName}-`
+        )
+      ]).flat(2),
+      // Semantic color tokens (other semantic tokens for now are static)
+      semanticTokensCSS(([key]) => /color/.test(key)),
+      // Legacy overrides
+      legacyWpAdminThemeOverridesCSS(primary),
+      legacyWpComponentsOverridesCSS
+    ].flat()
+  );
+}
+function useThemeProviderStyles({
+  color = {}
+} = {}) {
+  const { resolvedSettings: inheritedSettings } = (0, import_element.useContext)(import_context.ThemeContext);
+  const primary = color.primary ?? inheritedSettings.color?.primary ?? import_color_ramps.DEFAULT_SEED_COLORS.primary;
+  const bg = color.bg ?? inheritedSettings.color?.bg ?? import_color_ramps.DEFAULT_SEED_COLORS.bg;
+  const resolvedSettings = (0, import_element.useMemo)(
+    () => ({
+      color: {
+        primary,
+        bg
+      }
+    }),
+    [primary, bg]
+  );
+  const themeProviderStyles = (0, import_element.useMemo)(() => {
+    const seeds = {
+      ...import_color_ramps.DEFAULT_SEED_COLORS,
+      bg,
+      primary
+    };
+    const computedColorRamps = /* @__PURE__ */ new Map();
+    const bgRamp = (0, import_color_ramps.buildBgRamp)({ seed: 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
+          })
+        );
+      }
+    });
+    return generateStyles({
+      primary: seeds.primary,
+      computedColorRamps
+    });
+  }, [primary, bg]);
+  return {
+    resolvedSettings,
+    themeProviderStyles
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useThemeProviderStyles
+});
+//# sourceMappingURL=use-theme-provider-styles.js.map

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

@@ -0,0 +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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qBAAkB;AAKlB,qBAAoC;AAKpC,qBAA6B;AAC7B,2BAA8B;AAC9B,yBAKO;AAKP,MAAM,iCAA0C;AAAA,EAC/C,CAAE,gCAAgC,6BAA8B;AAAA,EAChE;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,EACD;AACD;AAEA,SAAS,gBAAiB,OAAe;AACxC,QAAM,MAAM,MAAM,GAAI,MAAO;AAC7B,SAAO,CAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAE,EAC3B,IAAK,CAAE,MAAO,KAAK,MAAO,IAAI,GAAI,CAAE,EACpC,KAAM,IAAK;AACd;AAEA,SAAS,+BAAgC,QAA0B;AAClE,QAAM,eAAe,IAAI,eAAAA,QAAO,MAAO,EAAE,GAAI,KAAM;AAEnD,QAAM,MAAM,aAAa;AACzB,QAAM,WAAW,IAAI,eAAAA,QAAO,OAAO;AAAA,IAClC,IAAK,CAAE;AAAA;AAAA,IACP,IAAK,CAAE;AAAA;AAAA,IACP,KAAK,IAAK,GAAG,KAAK,IAAK,KAAK,IAAK,CAAE,IAAI,CAAE,CAAE;AAAA;AAAA,EAC5C,CAAE,EAAE,GAAI,MAAO;AACf,QAAM,WAAW,IAAI,eAAAA,QAAO,OAAO;AAAA,IAClC,IAAK,CAAE;AAAA;AAAA,IACP,IAAK,CAAE;AAAA;AAAA,IACP,KAAK,IAAK,GAAG,KAAK,IAAK,KAAK,IAAK,CAAE,IAAI,EAAG,CAAE;AAAA;AAAA,EAC7C,CAAE,EAAE,GAAI,MAAO;AAEf,SAAO;AAAA,IACN;AAAA,MACC;AAAA,MACA,aAAa,GAAI,MAAO,EAAE,SAAU,EAAE,QAAQ,MAAM,CAAE;AAAA,IACvD;AAAA,IACA,CAAE,+BAA+B,gBAAiB,YAAa,CAAE;AAAA,IACjE;AAAA,MACC;AAAA,MACA,SAAS,SAAU,EAAE,QAAQ,MAAM,CAAE;AAAA,IACtC;AAAA,IACA;AAAA,MACC;AAAA,MACA,gBAAiB,QAAS;AAAA,IAC3B;AAAA,IACA;AAAA,MACC;AAAA,MACA,SAAS,SAAU,EAAE,QAAQ,MAAM,CAAE;AAAA,IACtC;AAAA,IACA;AAAA,MACC;AAAA,MACA,gBAAiB,QAAS;AAAA,IAC3B;AAAA,EACD;AACD;AAEA,SAAS,kBACR,WAAuE,MACtE,MACS;AACV,SAAO,OAAO,QAAS,qBAAAC,OAAkB,EACvC,OAAQ,QAAS,EACjB,IAAK,CAAE,CAAE,cAAc,cAAe,MAAO;AAAA,IAC7C;AAAA,IACA,eAAgB,GAAI;AAAA,EACrB,CAAE;AACJ;AAEA,MAAM,cAAc,CAAE,QACrB,IAAI;AAAA,EACH;AAAA,EACA,CAAE,GAAG,SAAW,MAAM,MAAM,MAAO,EAAE,YAAY;AAClD;AAED,SAAS,aAAc,MAAkB,QAA0B;AAClE,SAAO,CAAE,GAAG,OAAO,QAAS,KAAK,IAAK,CAAE,EAAE;AAAA,IACzC,CAAE,CAAE,WAAW,UAAW,MAAO;AAAA,MAChC,GAAI,MAAO,GAAI,YAAa,SAAU,CAAE;AAAA,MACxC,WAAW;AAAA,IACZ;AAAA,EACD;AACD;AAEA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AACD,GAGmB;AAClB,SAAO,OAAO;AAAA,IACb;AAAA;AAAA,MAEC,MAAM,KAAM,kBAAmB,EAC7B,IAAK,CAAE,CAAE,UAAU,iBAAkB,MAAO;AAAA,QAC5C;AAAA,UACC;AAAA,UACA,wBAAyB,QAAS;AAAA,QACnC;AAAA,MACD,CAAE,EACD,KAAM,CAAE;AAAA;AAAA,MAEV,kBAAmB,CAAE,CAAE,GAAI,MAAO,QAAQ,KAAM,GAAI,CAAE;AAAA;AAAA,MAEtD,+BAAgC,OAAQ;AAAA,MACxC;AAAA,IACD,EAAE,KAAK;AAAA,EACR;AACD;AAEO,SAAS,uBAAwB;AAAA,EACvC,QAAQ,CAAC;AACV,IAEI,CAAC,GAAI;AACR,QAAM,EAAE,kBAAkB,kBAAkB,QAAI,2BAAY,2BAAa;AAMzE,QAAM,UACL,MAAM,WACN,kBAAkB,OAAO,WACzB,uCAAoB;AACrB,QAAM,KACL,MAAM,MAAM,kBAAkB,OAAO,MAAM,uCAAoB;AAEhE,QAAM,uBAAmB;AAAA,IACxB,OAAQ;AAAA,MACP,OAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,SAAS,EAAG;AAAA,EACf;AAEA,QAAM,0BAAsB,wBAAS,MAAM;AAE1C,UAAM,QAAQ;AAAA,MACb,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACD;AAGA,UAAM,qBAAqB,oBAAI,IAA0B;AACzD,UAAM,aAAS,gCAAa,EAAE,MAAM,MAAM,GAAG,CAAE;AAC/C,WAAO,QAAS,KAAM,EAAE,QAAS,CAAE,CAAE,UAAU,IAAK,MAAO;AAC1D,UAAK,aAAa,MAAO;AACxB,2BAAmB,IAAK,UAAU,MAAO;AAAA,MAC1C,OAAO;AACN,2BAAmB;AAAA,UAClB;AAAA,cACA,oCAAiB;AAAA,YAChB;AAAA,YACA;AAAA,UACD,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,eAAgB;AAAA,MACtB,SAAS,MAAM;AAAA,MACf;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,SAAS,EAAG,CAAE;AAEnB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
+  "names": ["Color", "semanticVariables"]
+}

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

@@ -0,0 +1,95 @@
+import Color from "colorjs.io";
+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 { CONTRAST_COMBINATIONS } from "./lib/constants";
+import { DEFAULT_SEED_COLORS } from "./lib/constants";
+function buildBgRamp({
+  seed,
+  debug
+}) {
+  if (typeof seed !== "string" || seed.trim() === "") {
+    throw new Error("Seed color must be a non-empty string");
+  }
+  return buildRamp(seed, BG_RAMP_CONFIG, { debug });
+}
+const 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,
+        ramp.direction
+      )
+    }
+  };
+}
+function buildAccentRamp({
+  seed,
+  bgRamp,
+  debug
+}) {
+  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
+  });
+}
+function checkAccessibleCombinations({
+  bgRamp,
+  accentRamps = []
+}) {
+  const unmetTargets = [];
+  [bgRamp, ...accentRamps].forEach((ramp) => {
+    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) {
+            unmetTargets.push({
+              bgName: bg,
+              bgColor: bgColor.toString(),
+              fgName: fg,
+              fgColor: fgColor.toString(),
+              unmetContrast: target
+            });
+          }
+        }
+      }
+    });
+  });
+  accentRamps.forEach((ramp) => {
+    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) {
+            unmetTargets.push({
+              bgName: bg,
+              bgColor: bgColor.toString(),
+              fgName: fg,
+              fgColor: fgColor.toString(),
+              unmetContrast: target
+            });
+          }
+        }
+      }
+    });
+  });
+  return unmetTargets;
+}
+export {
+  DEFAULT_SEED_COLORS,
+  buildAccentRamp,
+  buildBgRamp,
+  checkAccessibleCombinations
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,31 @@
+const contrastCache = /* @__PURE__ */ new Map();
+const colorStringCache = /* @__PURE__ */ new Map();
+function getColorString(color) {
+  let str = colorStringCache.get(color);
+  if (str === void 0) {
+    str = color.to("srgb").toString({ format: "hex", inGamut: true });
+    colorStringCache.set(color, str);
+  }
+  return str;
+}
+function getCachedContrast(colorA, colorB) {
+  const keyA = getColorString(colorA);
+  const keyB = getColorString(colorB);
+  const cacheKey = keyA < keyB ? `${keyA}|${keyB}` : `${keyB}|${keyA}`;
+  let contrast = contrastCache.get(cacheKey);
+  if (contrast === void 0) {
+    contrast = colorA.contrastWCAG21(colorB);
+    contrastCache.set(cacheKey, contrast);
+  }
+  return contrast;
+}
+function clearCaches() {
+  contrastCache.clear();
+  colorStringCache.clear();
+}
+export {
+  clearCaches,
+  getCachedContrast,
+  getColorString
+};
+//# sourceMappingURL=cache-utils.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/color-ramps/lib/cache-utils.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type Color from 'colorjs.io';\n\n/**\n * Cache for WCAG contrast calculations\n */\nconst contrastCache = new Map< string, number >();\n\n/**\n * Cache for color string representations\n */\nconst colorStringCache = new Map< Color, string >();\n\n/**\n * Get cached string representation of a color\n * @param color - Color object to stringify\n * @return Cached string representation\n */\nexport function getColorString( color: Color ): string {\n\tlet str = colorStringCache.get( color );\n\tif ( str === undefined ) {\n\t\tstr = color.to( 'srgb' ).toString( { format: 'hex', inGamut: true } );\n\t\tcolorStringCache.set( color, str );\n\t}\n\treturn str;\n}\n\n/**\n * Get cached contrast calculation between two colors\n * @param colorA - First color\n * @param colorB - Second color\n * @return WCAG 2.1 contrast ratio\n */\nexport function getCachedContrast( colorA: Color, colorB: Color ): number {\n\tconst keyA = getColorString( colorA );\n\tconst keyB = getColorString( colorB );\n\tconst cacheKey =\n\t\tkeyA < keyB ? `${ keyA }|${ keyB }` : `${ keyB }|${ keyA }`;\n\n\tlet contrast = contrastCache.get( cacheKey );\n\tif ( contrast === undefined ) {\n\t\tcontrast = colorA.contrastWCAG21( colorB );\n\t\tcontrastCache.set( cacheKey, contrast );\n\t}\n\treturn contrast;\n}\n\n/**\n * Clear all caches - useful for memory management or testing\n */\nexport function clearCaches(): void {\n\tcontrastCache.clear();\n\tcolorStringCache.clear();\n}\n"],
+  "mappings": "AAQA,MAAM,gBAAgB,oBAAI,IAAsB;AAKhD,MAAM,mBAAmB,oBAAI,IAAqB;AAO3C,SAAS,eAAgB,OAAuB;AACtD,MAAI,MAAM,iBAAiB,IAAK,KAAM;AACtC,MAAK,QAAQ,QAAY;AACxB,UAAM,MAAM,GAAI,MAAO,EAAE,SAAU,EAAE,QAAQ,OAAO,SAAS,KAAK,CAAE;AACpE,qBAAiB,IAAK,OAAO,GAAI;AAAA,EAClC;AACA,SAAO;AACR;AAQO,SAAS,kBAAmB,QAAe,QAAwB;AACzE,QAAM,OAAO,eAAgB,MAAO;AACpC,QAAM,OAAO,eAAgB,MAAO;AACpC,QAAM,WACL,OAAO,OAAO,GAAI,IAAK,IAAK,IAAK,KAAK,GAAI,IAAK,IAAK,IAAK;AAE1D,MAAI,WAAW,cAAc,IAAK,QAAS;AAC3C,MAAK,aAAa,QAAY;AAC7B,eAAW,OAAO,eAAgB,MAAO;AACzC,kBAAc,IAAK,UAAU,QAAS;AAAA,EACvC;AACA,SAAO;AACR;AAKO,SAAS,cAAoB;AACnC,gBAAc,MAAM;AACpB,mBAAiB,MAAM;AACxB;",
+  "names": []
+}

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

@@ -0,0 +1,63 @@
+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 = {
+  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 = [
+  {
+    bgs: ["surface1", "surface2", "surface3"],
+    fgs: ["fgSurface3", "fgSurface4"],
+    target: 4.5
+  },
+  {
+    bgs: ["surface4", "surface5"],
+    fgs: ["fgSurface4"],
+    target: 4.5
+  },
+  {
+    bgs: ["bgFill1"],
+    fgs: ["fgFill"],
+    target: 4.5
+  },
+  {
+    bgs: ["bgFillInverted1"],
+    fgs: ["fgFillInverted"],
+    target: 4.5
+  },
+  {
+    bgs: ["bgFillInverted1"],
+    fgs: ["fgFillInverted"],
+    target: 4.5
+  },
+  {
+    bgs: ["surface1", "surface2", "surface3"],
+    fgs: ["stroke3"],
+    target: 3
+  }
+];
+const DEFAULT_SEED_COLORS = {
+  bg: "#f8f8f8",
+  primary: "#3858e9",
+  info: "#0090ff",
+  success: "#4ab866",
+  warning: "#f0b849",
+  error: "#cc1818"
+};
+export {
+  ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,
+  BLACK,
+  CONTRAST_COMBINATIONS,
+  DEFAULT_SEED_COLORS,
+  LIGHTNESS_EPSILON,
+  MAX_BISECTION_ITERATIONS,
+  UNIVERSAL_CONTRAST_TOPUP,
+  WHITE,
+  WHITE_TEXT_CONTRAST_MARGIN
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

package/build-module/color-ramps/lib/find-color-with-constraints.js

@@ -0,0 +1,112 @@
+import Color from "colorjs.io";
+import { clampToGamut } from "./utils";
+import {
+  WHITE,
+  BLACK,
+  LIGHTNESS_EPSILON,
+  MAX_BISECTION_ITERATIONS
+} from "./constants";
+import { getCachedContrast } from "./cache-utils";
+import { taperChroma } from "./taper-chroma";
+function findColorMeetingRequirements(reference, seed, target, direction, {
+  lightnessConstraint,
+  taperChromaOptions,
+  strict = true,
+  debug = false
+} = {}) {
+  if (target <= 1) {
+    return { color: seed.clone(), reached: true, achieved: 1 };
+  }
+  if (lightnessConstraint) {
+    let newL = lightnessConstraint.value;
+    let newC = seed.oklch.c;
+    if (taperChromaOptions) {
+      ({ l: newL, c: newC } = taperChroma(
+        seed,
+        newL,
+        taperChromaOptions
+      ));
+    }
+    const colorWithExactL = clampToGamut(
+      new Color("oklch", [newL, newC, seed.oklch.h])
+    );
+    const exactLContrast = getCachedContrast(reference, colorWithExactL);
+    if (debug) {
+      console.log(
+        `Succeeded with ${lightnessConstraint.type} lightness`,
+        lightnessConstraint.value,
+        colorWithExactL.oklch.l
+      );
+    }
+    if (lightnessConstraint.type === "force" || exactLContrast >= target) {
+      return {
+        color: colorWithExactL,
+        reached: exactLContrast >= target,
+        achieved: exactLContrast
+      };
+    }
+  }
+  const mostContrastingL = direction === "lighter" ? 1 : 0;
+  const mostContrastingColor = direction === "lighter" ? WHITE : BLACK;
+  const highestPossibleContrast = getCachedContrast(
+    reference,
+    mostContrastingColor
+  );
+  if (highestPossibleContrast < target) {
+    if (strict) {
+      throw new Error(
+        `Contrast target ${target.toFixed(
+          2
+        )}:1 unreachable in ${direction} direction against ${mostContrastingColor.toString()}(boundary achieves ${highestPossibleContrast.toFixed(
+          3
+        )}:1).`
+      );
+    }
+    if (debug) {
+      console.log(
+        "Did not succeeded because it reached the limit",
+        mostContrastingL
+      );
+    }
+    return {
+      color: mostContrastingColor,
+      reached: false,
+      achieved: highestPossibleContrast
+    };
+  }
+  let worseL = reference.oklch.l;
+  let betterL = mostContrastingL;
+  let bestContrastFound = highestPossibleContrast;
+  let resultingColor = mostContrastingColor;
+  for (let i = 0; i < MAX_BISECTION_ITERATIONS && Math.abs(betterL - worseL) > LIGHTNESS_EPSILON; i++) {
+    let newL = (worseL + betterL) / 2;
+    let newC = seed.oklch.c;
+    if (taperChromaOptions) {
+      ({ l: newL, c: newC } = taperChroma(
+        seed,
+        newL,
+        taperChromaOptions
+      ));
+    }
+    const newColor = clampToGamut(
+      new Color("oklch", [newL, newC, seed.oklch.h])
+    );
+    const newContrast = getCachedContrast(reference, newColor);
+    if (newContrast >= target) {
+      betterL = newL;
+      bestContrastFound = newContrast;
+      resultingColor = newColor;
+    } else {
+      worseL = newL;
+    }
+  }
+  return {
+    color: resultingColor,
+    reached: true,
+    achieved: bestContrastFound
+  };
+}
+export {
+  findColorMeetingRequirements
+};
+//# sourceMappingURL=find-color-with-constraints.js.map

package/build-module/color-ramps/lib/find-color-with-constraints.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/color-ramps/lib/find-color-with-constraints.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport Color from 'colorjs.io';\n\n/**\n * Internal dependencies\n */\nimport { clampToGamut } from './utils';\nimport {\n\tWHITE,\n\tBLACK,\n\tLIGHTNESS_EPSILON,\n\tMAX_BISECTION_ITERATIONS,\n} from './constants';\nimport { getCachedContrast } from './cache-utils';\nimport { type TaperChromaOptions, taperChroma } from './taper-chroma';\n\n/**\n * Solve for L such that:\n *  - the L applied to the seed meets the contrast target against the reference\n *  - the search is performed in one direction (ie lighter / darker)\n *  - more constraints can be applied around lightness\n *  - chroma could be tapered\n * @param reference\n * @param seed\n * @param target\n * @param direction\n * @param options\n * @param options.strict\n * @param options.debug\n * @param options.lightnessConstraint\n * @param options.lightnessConstraint.type\n * @param options.lightnessConstraint.value\n * @param options.taperChromaOptions\n */\nexport function findColorMeetingRequirements(\n\treference: Color,\n\tseed: Color,\n\ttarget: number,\n\tdirection: 'lighter' | 'darker',\n\t{\n\t\tlightnessConstraint,\n\t\ttaperChromaOptions,\n\t\tstrict = true,\n\t\tdebug = false,\n\t}: {\n\t\tlightnessConstraint?: {\n\t\t\ttype: 'force' | 'onlyIfSucceeds';\n\t\t\tvalue: number;\n\t\t};\n\t\ttaperChromaOptions?: TaperChromaOptions;\n\t\tstrict?: boolean;\n\t\tdebug?: boolean;\n\t} = {}\n): { color: Color; reached: boolean; achieved: number } {\n\t// A target of 1 means same color.\n\t// A target lower than 1 doesn't make sense.\n\tif ( target <= 1 ) {\n\t\treturn { color: seed.clone(), reached: true, achieved: 1 };\n\t}\n\n\tif ( lightnessConstraint ) {\n\t\t// Apply a specific L value.\n\t\t// Useful when pinning a step to a specific lightness, of to specify\n\t\t// min/max L values.\n\t\tlet newL = lightnessConstraint.value;\n\t\tlet newC = seed.oklch.c;\n\n\t\tif ( taperChromaOptions ) {\n\t\t\t( { l: newL, c: newC } = taperChroma(\n\t\t\t\tseed,\n\t\t\t\tnewL,\n\t\t\t\ttaperChromaOptions\n\t\t\t) );\n\t\t}\n\n\t\tconst colorWithExactL = clampToGamut(\n\t\t\tnew Color( 'oklch', [ newL, newC, seed.oklch.h ] )\n\t\t);\n\t\tconst exactLContrast = getCachedContrast( reference, colorWithExactL );\n\n\t\tif ( debug ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log(\n\t\t\t\t`Succeeded with ${ lightnessConstraint.type } lightness`,\n\t\t\t\tlightnessConstraint.value,\n\t\t\t\tcolorWithExactL.oklch.l\n\t\t\t);\n\t\t}\n\n\t\t// If the L constraint is of \"force\" type, apply it even when it doesn't\n\t\t// meet the contrast target.\n\t\tif (\n\t\t\tlightnessConstraint.type === 'force' ||\n\t\t\texactLContrast >= target\n\t\t) {\n\t\t\treturn {\n\t\t\t\tcolor: colorWithExactL,\n\t\t\t\treached: exactLContrast >= target,\n\t\t\t\tachieved: exactLContrast,\n\t\t\t};\n\t\t}\n\t}\n\n\t// Set the boundary based on the direction.\n\tconst mostContrastingL = direction === 'lighter' ? 1 : 0;\n\tconst mostContrastingColor = direction === 'lighter' ? WHITE : BLACK;\n\tconst highestPossibleContrast = getCachedContrast(\n\t\treference,\n\t\tmostContrastingColor\n\t);\n\n\t// If even the most contrasting color can't reach the target,\n\t// the target is unreachable.\n\tif ( highestPossibleContrast < target ) {\n\t\tif ( strict ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Contrast target ${ target.toFixed(\n\t\t\t\t\t2\n\t\t\t\t) }:1 unreachable in ${ direction } direction against ${ mostContrastingColor.toString() }` +\n\t\t\t\t\t`(boundary achieves ${ highestPossibleContrast.toFixed(\n\t\t\t\t\t\t3\n\t\t\t\t\t) }:1).`\n\t\t\t);\n\t\t}\n\n\t\tif ( debug ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.log(\n\t\t\t\t'Did not succeeded because it reached the limit',\n\t\t\t\tmostContrastingL\n\t\t\t);\n\t\t}\n\t\treturn {\n\t\t\tcolor: mostContrastingColor,\n\t\t\treached: false,\n\t\t\tachieved: highestPossibleContrast,\n\t\t};\n\t}\n\n\t// Bracket: low fails, high meets.\n\t// Originally this was seed.oklch.l \u2014 although it's an assumption that works\n\t// only when we know for sure the direction of the search.\n\t// TODO: can we bring this back to seed.oklch.l ?\n\tlet worseL = reference.oklch.l;\n\tlet betterL = mostContrastingL;\n\n\tlet bestContrastFound = highestPossibleContrast;\n\tlet resultingColor = mostContrastingColor;\n\n\tfor (\n\t\tlet i = 0;\n\t\ti < MAX_BISECTION_ITERATIONS &&\n\t\tMath.abs( betterL - worseL ) > LIGHTNESS_EPSILON;\n\t\ti++\n\t) {\n\t\tlet newL = ( worseL + betterL ) / 2;\n\t\tlet newC = seed.oklch.c;\n\n\t\tif ( taperChromaOptions ) {\n\t\t\t( { l: newL, c: newC } = taperChroma(\n\t\t\t\tseed,\n\t\t\t\tnewL,\n\t\t\t\ttaperChromaOptions\n\t\t\t) );\n\t\t}\n\n\t\tconst newColor = clampToGamut(\n\t\t\tnew Color( 'oklch', [ newL, newC, seed.oklch.h ] )\n\t\t);\n\t\tconst newContrast = getCachedContrast( reference, newColor );\n\n\t\tif ( newContrast >= target ) {\n\t\t\tbetterL = newL;\n\t\t\t// Only update the resulting color when the target is met, this ensuring\n\t\t\t// at the end of the search the target is always met.\n\t\t\tbestContrastFound = newContrast;\n\t\t\tresultingColor = newColor;\n\t\t} else {\n\t\t\tworseL = newL;\n\t\t}\n\t}\n\n\treturn {\n\t\tcolor: resultingColor,\n\t\treached: true,\n\t\tachieved: bestContrastFound,\n\t};\n}\n"],
+  "mappings": "AAGA,OAAO,WAAW;AAKlB,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,yBAAyB;AAClC,SAAkC,mBAAmB;AAoB9C,SAAS,6BACf,WACA,MACA,QACA,WACA;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AACT,IAQI,CAAC,GACkD;AAGvD,MAAK,UAAU,GAAI;AAClB,WAAO,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,MAAM,UAAU,EAAE;AAAA,EAC1D;AAEA,MAAK,qBAAsB;AAI1B,QAAI,OAAO,oBAAoB;AAC/B,QAAI,OAAO,KAAK,MAAM;AAEtB,QAAK,oBAAqB;AACzB,OAAE,EAAE,GAAG,MAAM,GAAG,KAAK,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAEA,UAAM,kBAAkB;AAAA,MACvB,IAAI,MAAO,SAAS,CAAE,MAAM,MAAM,KAAK,MAAM,CAAE,CAAE;AAAA,IAClD;AACA,UAAM,iBAAiB,kBAAmB,WAAW,eAAgB;AAErE,QAAK,OAAQ;AAEZ,cAAQ;AAAA,QACP,kBAAmB,oBAAoB,IAAK;AAAA,QAC5C,oBAAoB;AAAA,QACpB,gBAAgB,MAAM;AAAA,MACvB;AAAA,IACD;AAIA,QACC,oBAAoB,SAAS,WAC7B,kBAAkB,QACjB;AACD,aAAO;AAAA,QACN,OAAO;AAAA,QACP,SAAS,kBAAkB;AAAA,QAC3B,UAAU;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAGA,QAAM,mBAAmB,cAAc,YAAY,IAAI;AACvD,QAAM,uBAAuB,cAAc,YAAY,QAAQ;AAC/D,QAAM,0BAA0B;AAAA,IAC/B;AAAA,IACA;AAAA,EACD;AAIA,MAAK,0BAA0B,QAAS;AACvC,QAAK,QAAS;AACb,YAAM,IAAI;AAAA,QACT,mBAAoB,OAAO;AAAA,UAC1B;AAAA,QACD,CAAE,qBAAsB,SAAU,sBAAuB,qBAAqB,SAAS,CAAE,sBACjE,wBAAwB;AAAA,UAC9C;AAAA,QACD,CAAE;AAAA,MACJ;AAAA,IACD;AAEA,QAAK,OAAQ;AAEZ,cAAQ;AAAA,QACP;AAAA,QACA;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,IACX;AAAA,EACD;AAMA,MAAI,SAAS,UAAU,MAAM;AAC7B,MAAI,UAAU;AAEd,MAAI,oBAAoB;AACxB,MAAI,iBAAiB;AAErB,WACK,IAAI,GACR,IAAI,4BACJ,KAAK,IAAK,UAAU,MAAO,IAAI,mBAC/B,KACC;AACD,QAAI,QAAS,SAAS,WAAY;AAClC,QAAI,OAAO,KAAK,MAAM;AAEtB,QAAK,oBAAqB;AACzB,OAAE,EAAE,GAAG,MAAM,GAAG,KAAK,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAEA,UAAM,WAAW;AAAA,MAChB,IAAI,MAAO,SAAS,CAAE,MAAM,MAAM,KAAK,MAAM,CAAE,CAAE;AAAA,IAClD;AACA,UAAM,cAAc,kBAAmB,WAAW,QAAS;AAE3D,QAAK,eAAe,QAAS;AAC5B,gBAAU;AAGV,0BAAoB;AACpB,uBAAiB;AAAA,IAClB,OAAO;AACN,eAAS;AAAA,IACV;AAAA,EACD;AAEA,SAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,EACX;AACD;",
+  "names": []
+}