colorizr 3.0.2 → 3.0.4

package/dist/index.mjs

@@ -1163,9 +1163,15 @@ function textColor(input, options = {}) {
   const { darkColor = "#000000", lightColor = "#ffffff", threshold = 128 } = options;
   invariant(isString(input), MESSAGES.inputString);
   invariant(threshold >= 0 && threshold <= 255, MESSAGES.threshold);
-  const { r, g, b } = hex2rgb(parseCSS(input, "hex"));
-  const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
-  return yiq >= threshold ? darkColor : lightColor;
+  try {
+    const { r, g, b } = hex2rgb(parseCSS(input, "hex"));
+    const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
+    return yiq >= threshold ? darkColor : lightColor;
+  } catch (error) {
+    console.warn(`Invalid color input: ${input}`);
+    console.warn(error);
+    return darkColor;
+  }
 }
 
 // src/transparentize.ts
@@ -1366,24 +1372,19 @@ function palette(input, options = {}) {
   invariant(isPlainObject(options), MESSAGES.options);
   const { format, lightness, saturation, size = 6, type } = options;
   const hsl = parseCSS(input, "hsl");
-  const output = [];
   const colorFormat = isHex(input) || isNamedColor(input) ? "hex" : extractColorParts(input).model;
-  switch (type) {
-    case "monochromatic": {
-      const step = 80 / size;
-      for (let index = size; index > 0; index--) {
-        output.push(hsl2hex({ ...hsl, l: step * index }));
-      }
-      break;
+  const output = [];
+  if (type === "monochromatic") {
+    const step = 80 / size;
+    for (let index = size; index > 0; index--) {
+      output.push(hsl2hex({ ...hsl, l: step * index }));
     }
-    default: {
-      const step = 360 / size;
-      output.push(hsl2hex({ ...hsl, l: lightness ?? hsl.l, s: saturation ?? hsl.s }));
-      for (let index = 1; index < size; index++) {
-        const color = rotate(input, hsl.h + step * index, "hex");
-        output.push(hsl2hex({ ...hex2hsl(color), l: lightness ?? hsl.l, s: saturation ?? hsl.s }));
-      }
-      break;
+  } else {
+    const step = 360 / size;
+    output.push(hsl2hex({ ...hsl, l: lightness ?? hsl.l, s: saturation ?? hsl.s }));
+    for (let index = 1; index < size; index++) {
+      const color = rotate(input, hsl.h + step * index, "hex");
+      output.push(hsl2hex({ ...hex2hsl(color), l: lightness ?? hsl.l, s: saturation ?? hsl.s }));
     }
   }
   return output.map((color) => convert(color, format ?? colorFormat));
@@ -1490,51 +1491,72 @@ function scheme(input, typeOrOptions) {
 }
 
 // src/swatch.ts
-var MIN_LIGHTNESS = 21;
-var MAX_LIGHTNESS = 97;
-function shadeColorDynamic(input, lightnessTuningFactor, chromaTuningFactor = 0) {
+var MIN_LIGHTNESS = 5;
+var MAX_LIGHTNESS = 95;
+function shadeColorDynamic(input, lightnessTuningFactor, chromaFactor = 0) {
   if (lightnessTuningFactor === 0) {
-    return rgb2hex(oklch2rgb({ ...input, l: input.l / 100 }));
+    const { l } = input;
+    return rgb2hex(oklch2rgb({ ...input, l: l / 100 }));
   }
-  return shadeColor(input, input.l + lightnessTuningFactor, chromaTuningFactor);
+  return shadeColor(input, input.l + lightnessTuningFactor, chromaFactor);
 }
-function shadeColor(input, lightness, chromaTuningFactor = 0) {
+function shadeColor(input, lightness, chromaFactor = 0) {
   const { c, h } = input;
-  return oklch2hex({ l: lightness / 100, c: clamp(c + chromaTuningFactor, 0, 0.4), h });
+  const adjustedChroma = clamp(c + chromaFactor, 0, 0.4);
+  return oklch2hex({ l: lightness / 100, c: adjustedChroma, h });
 }
 function swatch(input, options = {}) {
   invariant(isString(input), MESSAGES.inputString);
-  const { format, scale = "dynamic" } = options;
+  const { format, monochromatic = false, scale = "dynamic", mode, variant = "base" } = options;
   const lch = parseCSS(input, "oklch");
+  const chromaScale = {
+    base: 1,
+    deep: 0.8,
+    neutral: 0.5,
+    pastel: 0.3,
+    subtle: 0.2,
+    vibrant: 1.25
+  }[variant];
   lch.l = 50;
+  lch.c *= chromaScale;
+  if (variant === "deep") {
+    lch.l *= 0.7;
+  }
   const colorFormat = isHex(input) || isNamedColor(input) ? "hex" : extractColorParts(input).model;
   const currentLightness = lch.l;
-  const safeMaxLightness = currentLightness >= 88.5 ? 99.5 : MAX_LIGHTNESS;
-  const safeMinLightness = currentLightness <= 33 ? 0 : MIN_LIGHTNESS;
-  const lightBase = (safeMaxLightness - currentLightness) / 5;
-  const darkBase = -1 * (currentLightness - safeMinLightness) / 8;
+  let lightSteps = 5;
+  let darkSteps = 8;
+  if (mode) {
+    lightSteps *= mode === "light" ? 0.75 : 1.25;
+    darkSteps *= mode === "light" ? 1.25 : 0.75;
+  }
+  const lightStepSize = (MAX_LIGHTNESS - currentLightness) / lightSteps;
+  const darkStepSize = -1 * (currentLightness - MIN_LIGHTNESS) / darkSteps;
+  const getChromaFactor = (value) => {
+    return monochromatic ? 0 : value;
+  };
   const output = scale === "linear" ? {
-    50: shadeColor(lch, 95, -375e-5),
-    100: shadeColor(lch, 90, -375e-5),
-    200: shadeColor(lch, 80, -375e-5),
-    300: shadeColor(lch, 70, -375e-5),
-    400: shadeColor(lch, 60, -375e-5),
+    50: shadeColor(lch, 95, getChromaFactor(-375e-5)),
+    100: shadeColor(lch, 90, getChromaFactor(-375e-5)),
+    200: shadeColor(lch, 80, getChromaFactor(-375e-5)),
+    300: shadeColor(lch, 70, getChromaFactor(-375e-5)),
+    400: shadeColor(lch, 60, getChromaFactor(-375e-5)),
     500: shadeColor(lch, 50),
-    600: shadeColor(lch, 40, 0.025),
-    700: shadeColor(lch, 30, 0.05),
-    800: shadeColor(lch, 20, 0.075),
-    900: shadeColor(lch, 10, 0.1)
+    600: shadeColor(lch, 40, getChromaFactor(0.025)),
+    700: shadeColor(lch, 30, getChromaFactor(0.05)),
+    800: shadeColor(lch, 20, getChromaFactor(0.075)),
+    900: shadeColor(lch, 10, getChromaFactor(0.1))
   } : {
-    50: shadeColorDynamic(lch, 5 * lightBase, -375e-5),
-    100: shadeColorDynamic(lch, 4 * lightBase, -375e-5),
-    200: shadeColorDynamic(lch, 3 * lightBase, -375e-5),
-    300: shadeColorDynamic(lch, 2 * lightBase, -375e-5),
-    400: shadeColorDynamic(lch, lightBase, -375e-5),
+    50: shadeColorDynamic(lch, 5 * lightStepSize, getChromaFactor(-375e-5)),
+    100: shadeColorDynamic(lch, 4 * lightStepSize, getChromaFactor(-375e-5)),
+    200: shadeColorDynamic(lch, 3 * lightStepSize, getChromaFactor(-375e-5)),
+    300: shadeColorDynamic(lch, 2 * lightStepSize, getChromaFactor(-375e-5)),
+    400: shadeColorDynamic(lch, lightStepSize, getChromaFactor(-375e-5)),
     500: shadeColorDynamic(lch, 0),
-    600: shadeColorDynamic(lch, 1.6 * darkBase, 0.025),
-    700: shadeColorDynamic(lch, 1.875 * 2 * darkBase, 0.05),
-    800: shadeColorDynamic(lch, 3 * 2 * darkBase, 0.075),
-    900: shadeColorDynamic(lch, 4 * 2 * darkBase, 0.1)
+    600: shadeColorDynamic(lch, 1.6 * darkStepSize, getChromaFactor(0.025)),
+    700: shadeColorDynamic(lch, 3.2 * darkStepSize, getChromaFactor(0.05)),
+    800: shadeColorDynamic(lch, 4.8 * darkStepSize, getChromaFactor(0.075)),
+    900: shadeColorDynamic(lch, 6.4 * darkStepSize, getChromaFactor(0.1))
   };
   return Object.entries(output).reduce((acc, [key, value]) => {
     return {
@@ -1545,7 +1567,7 @@ function swatch(input, options = {}) {
 }
 
 // src/index.ts
-var src_default = Colorizr;
+var index_default = Colorizr;
 export {
   addAlphaToHex,
   brightnessDifference,
@@ -1556,7 +1578,7 @@ export {
   convert,
   convertAlphaToHex,
   darken,
-  src_default as default,
+  index_default as default,
   desaturate,
   extractAlphaFromHex,
   extractColorParts,