@trackunit/react-map-color-utils 0.0.2

package/index.cjs.js

@@ -0,0 +1,139 @@
+'use strict';
+
+/**
+ * Browser-backed color mixing via CSS `color-mix()`.
+ *
+ * Uses a hidden DOM element + `getComputedStyle` to resolve expressions,
+ * cached so each unique expression is computed at most once.
+ */
+const colorCache = new Map();
+/**
+ * Modern browsers return CSS Color Level 4 `color(srgb r g b)` from
+ * `getComputedStyle`, but Mapbox GL JS only accepts classic formats
+ * (hex, rgb, rgba, hsl, hsla). Convert to `rgb()`/`rgba()`.
+ */
+const normalizeComputedColor = (color) => {
+    const m = color.match(/^color\(srgb\s+([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)(?:\s*\/\s*([\d.e+-]+))?\)$/);
+    if (!m)
+        return color;
+    const r = Math.round(parseFloat(m[1] ?? "0") * 255);
+    const g = Math.round(parseFloat(m[2] ?? "0") * 255);
+    const b = Math.round(parseFloat(m[3] ?? "0") * 255);
+    if (m[4] !== undefined) {
+        return `rgba(${r}, ${g}, ${b}, ${parseFloat(m[4])})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+};
+let probeElement = null;
+const getProbeElement = () => {
+    if (probeElement) {
+        return probeElement;
+    }
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const el = document.createElement("span");
+    el.style.display = "none";
+    document.body.appendChild(el);
+    probeElement = el;
+    return el;
+};
+const resolveColorMix = (expression, fallback) => {
+    const cached = colorCache.get(expression);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const el = getProbeElement();
+    if (!el) {
+        return fallback;
+    }
+    el.style.color = "";
+    el.style.color = expression;
+    if (!el.style.color) {
+        return fallback;
+    }
+    const computed = getComputedStyle(el).color;
+    if (!computed) {
+        return fallback;
+    }
+    const normalized = normalizeComputedColor(computed);
+    colorCache.set(expression, normalized);
+    return normalized;
+};
+/**
+ * Mix two CSS colors using the browser's `color-mix(in srgb)` function.
+ *
+ * @param color1 - First color (any valid CSS color string)
+ * @param color2 - Second color (any valid CSS color string)
+ * @param percentage - Percentage of `color1` in the mix (0–100)
+ * @returns {string} Resolved color as an `rgb()` string, or `color1` if resolution fails
+ */
+const mixColor = (color1, color2, percentage) => {
+    const expression = `color-mix(in srgb, ${color1} ${percentage}%, ${color2})`;
+    return resolveColorMix(expression, color1);
+};
+/**
+ * Darken a CSS color by mixing it with black.
+ *
+ * @param color - Any valid CSS color string
+ * @param amount - Darkening intensity from 0 (no change) to 100 (pure black)
+ */
+const darkenColor = (color, amount) => mixColor(color, "black", 100 - amount);
+/**
+ * Lighten a CSS color by mixing it with white.
+ *
+ * @param color - Any valid CSS color string
+ * @param amount - Lightening intensity from 0 (no change) to 100 (pure white)
+ */
+const lightenColor = (color, amount) => mixColor(color, "white", 100 - amount);
+/**
+ * Resolve a CSS color and apply an opacity multiplier to its alpha channel.
+ *
+ * Unlike setting `element.style.opacity`, this only affects the individual
+ * color value — useful when fill and stroke need independent opacity.
+ *
+ * @param color - Any valid CSS color string
+ * @param opacity - Opacity multiplier from 0 to 1 (multiplied with existing alpha)
+ * @returns {string} `rgba()` string with the combined alpha, or the original color if resolution fails
+ */
+const colorWithOpacity = (color, opacity) => {
+    if (opacity >= 1)
+        return color;
+    const cacheKey = `${color}@${opacity}`;
+    const cached = colorCache.get(cacheKey);
+    if (cached !== undefined)
+        return cached;
+    const el = getProbeElement();
+    if (!el)
+        return color;
+    el.style.color = "";
+    el.style.color = color;
+    const computed = getComputedStyle(el).color;
+    if (!computed)
+        return color;
+    const normalized = normalizeComputedColor(computed);
+    const rgbaMatch = normalized.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
+    if (!rgbaMatch)
+        return color;
+    const existingAlpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;
+    const result = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${existingAlpha * opacity})`;
+    colorCache.set(cacheKey, result);
+    return result;
+};
+/**
+ * Clear the resolved-color cache and detach the probe element.
+ * Exposed for test teardown only — not part of the public API.
+ */
+const resetColorUtilsForTesting = () => {
+    colorCache.clear();
+    if (probeElement) {
+        probeElement.remove();
+        probeElement = null;
+    }
+};
+
+exports.colorWithOpacity = colorWithOpacity;
+exports.darkenColor = darkenColor;
+exports.lightenColor = lightenColor;
+exports.mixColor = mixColor;
+exports.resetColorUtilsForTesting = resetColorUtilsForTesting;

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.esm.js

@@ -0,0 +1,133 @@
+/**
+ * Browser-backed color mixing via CSS `color-mix()`.
+ *
+ * Uses a hidden DOM element + `getComputedStyle` to resolve expressions,
+ * cached so each unique expression is computed at most once.
+ */
+const colorCache = new Map();
+/**
+ * Modern browsers return CSS Color Level 4 `color(srgb r g b)` from
+ * `getComputedStyle`, but Mapbox GL JS only accepts classic formats
+ * (hex, rgb, rgba, hsl, hsla). Convert to `rgb()`/`rgba()`.
+ */
+const normalizeComputedColor = (color) => {
+    const m = color.match(/^color\(srgb\s+([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)(?:\s*\/\s*([\d.e+-]+))?\)$/);
+    if (!m)
+        return color;
+    const r = Math.round(parseFloat(m[1] ?? "0") * 255);
+    const g = Math.round(parseFloat(m[2] ?? "0") * 255);
+    const b = Math.round(parseFloat(m[3] ?? "0") * 255);
+    if (m[4] !== undefined) {
+        return `rgba(${r}, ${g}, ${b}, ${parseFloat(m[4])})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+};
+let probeElement = null;
+const getProbeElement = () => {
+    if (probeElement) {
+        return probeElement;
+    }
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const el = document.createElement("span");
+    el.style.display = "none";
+    document.body.appendChild(el);
+    probeElement = el;
+    return el;
+};
+const resolveColorMix = (expression, fallback) => {
+    const cached = colorCache.get(expression);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const el = getProbeElement();
+    if (!el) {
+        return fallback;
+    }
+    el.style.color = "";
+    el.style.color = expression;
+    if (!el.style.color) {
+        return fallback;
+    }
+    const computed = getComputedStyle(el).color;
+    if (!computed) {
+        return fallback;
+    }
+    const normalized = normalizeComputedColor(computed);
+    colorCache.set(expression, normalized);
+    return normalized;
+};
+/**
+ * Mix two CSS colors using the browser's `color-mix(in srgb)` function.
+ *
+ * @param color1 - First color (any valid CSS color string)
+ * @param color2 - Second color (any valid CSS color string)
+ * @param percentage - Percentage of `color1` in the mix (0–100)
+ * @returns {string} Resolved color as an `rgb()` string, or `color1` if resolution fails
+ */
+const mixColor = (color1, color2, percentage) => {
+    const expression = `color-mix(in srgb, ${color1} ${percentage}%, ${color2})`;
+    return resolveColorMix(expression, color1);
+};
+/**
+ * Darken a CSS color by mixing it with black.
+ *
+ * @param color - Any valid CSS color string
+ * @param amount - Darkening intensity from 0 (no change) to 100 (pure black)
+ */
+const darkenColor = (color, amount) => mixColor(color, "black", 100 - amount);
+/**
+ * Lighten a CSS color by mixing it with white.
+ *
+ * @param color - Any valid CSS color string
+ * @param amount - Lightening intensity from 0 (no change) to 100 (pure white)
+ */
+const lightenColor = (color, amount) => mixColor(color, "white", 100 - amount);
+/**
+ * Resolve a CSS color and apply an opacity multiplier to its alpha channel.
+ *
+ * Unlike setting `element.style.opacity`, this only affects the individual
+ * color value — useful when fill and stroke need independent opacity.
+ *
+ * @param color - Any valid CSS color string
+ * @param opacity - Opacity multiplier from 0 to 1 (multiplied with existing alpha)
+ * @returns {string} `rgba()` string with the combined alpha, or the original color if resolution fails
+ */
+const colorWithOpacity = (color, opacity) => {
+    if (opacity >= 1)
+        return color;
+    const cacheKey = `${color}@${opacity}`;
+    const cached = colorCache.get(cacheKey);
+    if (cached !== undefined)
+        return cached;
+    const el = getProbeElement();
+    if (!el)
+        return color;
+    el.style.color = "";
+    el.style.color = color;
+    const computed = getComputedStyle(el).color;
+    if (!computed)
+        return color;
+    const normalized = normalizeComputedColor(computed);
+    const rgbaMatch = normalized.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
+    if (!rgbaMatch)
+        return color;
+    const existingAlpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;
+    const result = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${existingAlpha * opacity})`;
+    colorCache.set(cacheKey, result);
+    return result;
+};
+/**
+ * Clear the resolved-color cache and detach the probe element.
+ * Exposed for test teardown only — not part of the public API.
+ */
+const resetColorUtilsForTesting = () => {
+    colorCache.clear();
+    if (probeElement) {
+        probeElement.remove();
+        probeElement = null;
+    }
+};
+
+export { colorWithOpacity, darkenColor, lightenColor, mixColor, resetColorUtilsForTesting };

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@trackunit/react-map-color-utils",
+  "version": "0.0.2",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "engines": {
+    "node": ">=24.x"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "types": "./index.d.ts"
+}

package/src/colorUtils.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Browser-backed color mixing via CSS `color-mix()`.
+ *
+ * Uses a hidden DOM element + `getComputedStyle` to resolve expressions,
+ * cached so each unique expression is computed at most once.
+ */
+/**
+ * Mix two CSS colors using the browser's `color-mix(in srgb)` function.
+ *
+ * @param color1 - First color (any valid CSS color string)
+ * @param color2 - Second color (any valid CSS color string)
+ * @param percentage - Percentage of `color1` in the mix (0–100)
+ * @returns {string} Resolved color as an `rgb()` string, or `color1` if resolution fails
+ */
+export declare const mixColor: (color1: string, color2: string, percentage: number) => string;
+/**
+ * Darken a CSS color by mixing it with black.
+ *
+ * @param color - Any valid CSS color string
+ * @param amount - Darkening intensity from 0 (no change) to 100 (pure black)
+ */
+export declare const darkenColor: (color: string, amount: number) => string;
+/**
+ * Lighten a CSS color by mixing it with white.
+ *
+ * @param color - Any valid CSS color string
+ * @param amount - Lightening intensity from 0 (no change) to 100 (pure white)
+ */
+export declare const lightenColor: (color: string, amount: number) => string;
+/**
+ * Resolve a CSS color and apply an opacity multiplier to its alpha channel.
+ *
+ * Unlike setting `element.style.opacity`, this only affects the individual
+ * color value — useful when fill and stroke need independent opacity.
+ *
+ * @param color - Any valid CSS color string
+ * @param opacity - Opacity multiplier from 0 to 1 (multiplied with existing alpha)
+ * @returns {string} `rgba()` string with the combined alpha, or the original color if resolution fails
+ */
+export declare const colorWithOpacity: (color: string, opacity: number) => string;
+/**
+ * Clear the resolved-color cache and detach the probe element.
+ * Exposed for test teardown only — not part of the public API.
+ */
+export declare const resetColorUtilsForTesting: () => void;

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./colorUtils";