@trackunit/ui-design-tokens 1.14.10 → 1.15.2

package/index.cjs.js

@@ -740,62 +740,31 @@ const themeColors = {
     AM_UNSUPPORTED: { name: "am_unsupported", variants: trackunitPalette.AM_UNSUPPORTED, defaultVariant: 500 },
 };
 
-function componentToHex(c) {
-    if (c === null || c === undefined) {
-        return "00";
-    }
-    const hex = c.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-}
-function rgbToHex(r, g, b) {
-    if (isNaN(r) || isNaN(g) || isNaN(b)) {
-        return "#000000";
-    }
-    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
-}
-/**
- * Convert a string to a HEX color.
- *
- * @param colorString - The string to convert to a HEX color. defaults to "#000000" if the string is not a valid RGB color.
- * @returns {string} HEX color
- */
-const rgbStringToHex = (colorString) => {
-    if (colorString.split(" ").length === 3) {
-        const [r, g, b] = colorString.split(" ").map(Number);
-        //check if the values are valid numbers
-        if (typeof r !== "number" || typeof g !== "number" || typeof b !== "number") {
-            return "#000000";
-        }
-        if (isNaN(r) || isNaN(g) || isNaN(b)) {
-            return "#000000";
-        }
-        return rgbToHex(r, g, b);
-    }
-    return "#000000";
+const WRAPPED_CSS_VARIABLE = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/;
+const BLACK = "#000000";
+const isRgbTriple = (values) => values.length === 3 && values.every(value => !Number.isNaN(value));
+const parseRgbChannels = (value) => {
+    const channels = value
+        .trim()
+        .replace(/^rgb\(/, "")
+        .split("/")[0]
+        ?.replace(/\)+$/, "")
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    return channels !== undefined && isRgbTriple(channels) ? channels : null;
 };
-/**
- * Returns the HEX color based on a Color from the theme.
- *  Reads the RGB value from the underlying CSS variable and convert to HEX.
- *
- *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
- *
- * @param variable A color from the `colors` object of the Theme
- * @returns {string} HEX color
- */
+const channelToHex = (channel) => Math.round(Math.min(255, Math.max(0, channel)))
+    .toString(16)
+    .padStart(2, "0");
+const channelsToHex = (channels) => channels === null ? BLACK : `#${channels.map(channelToHex).join("")}`;
+/** Convert a palette or rgb() string to HEX. Returns `#000000` when parsing fails. */
+const rgbStringToHex = (colorString) => channelsToHex(parseRgbChannels(colorString));
+/** Read a theme CSS variable from the document and convert it to HEX. */
 const getHEX = (variable) => {
-    const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
-    const root = document.documentElement;
-    const match = regex.exec(variable);
-    const colorValue = getComputedStyle(root).getPropertyValue(match?.[1]?.trim() ?? variable);
-    let onlyRgb = colorValue.replace("rgb(", "");
-    if (onlyRgb.indexOf("/") !== -1) {
-        onlyRgb = onlyRgb.substring(0, onlyRgb.indexOf("/")).trim();
-    }
-    if (onlyRgb.indexOf(")") !== -1) {
-        onlyRgb = onlyRgb.substring(0, onlyRgb.indexOf(")")).trim();
-    }
-    const RGB = onlyRgb.split(" ").map(channel => Number(channel));
-    return rgbToHex(RGB[0] ?? NaN, RGB[1] ?? NaN, RGB[2] ?? NaN);
+    const variableName = WRAPPED_CSS_VARIABLE.exec(variable)?.[1]?.trim() ?? variable;
+    const cssValue = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+    return channelsToHex(parseRgbChannels(cssValue));
 };
 
 const DEFAULT_CHART_OTHER = rgbStringToHex(tailwindPalette.gray[400]);

package/index.esm.js

@@ -738,62 +738,31 @@ const themeColors = {
     AM_UNSUPPORTED: { name: "am_unsupported", variants: trackunitPalette.AM_UNSUPPORTED, defaultVariant: 500 },
 };
 
-function componentToHex(c) {
-    if (c === null || c === undefined) {
-        return "00";
-    }
-    const hex = c.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-}
-function rgbToHex(r, g, b) {
-    if (isNaN(r) || isNaN(g) || isNaN(b)) {
-        return "#000000";
-    }
-    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
-}
-/**
- * Convert a string to a HEX color.
- *
- * @param colorString - The string to convert to a HEX color. defaults to "#000000" if the string is not a valid RGB color.
- * @returns {string} HEX color
- */
-const rgbStringToHex = (colorString) => {
-    if (colorString.split(" ").length === 3) {
-        const [r, g, b] = colorString.split(" ").map(Number);
-        //check if the values are valid numbers
-        if (typeof r !== "number" || typeof g !== "number" || typeof b !== "number") {
-            return "#000000";
-        }
-        if (isNaN(r) || isNaN(g) || isNaN(b)) {
-            return "#000000";
-        }
-        return rgbToHex(r, g, b);
-    }
-    return "#000000";
+const WRAPPED_CSS_VARIABLE = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/;
+const BLACK = "#000000";
+const isRgbTriple = (values) => values.length === 3 && values.every(value => !Number.isNaN(value));
+const parseRgbChannels = (value) => {
+    const channels = value
+        .trim()
+        .replace(/^rgb\(/, "")
+        .split("/")[0]
+        ?.replace(/\)+$/, "")
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    return channels !== undefined && isRgbTriple(channels) ? channels : null;
 };
-/**
- * Returns the HEX color based on a Color from the theme.
- *  Reads the RGB value from the underlying CSS variable and convert to HEX.
- *
- *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
- *
- * @param variable A color from the `colors` object of the Theme
- * @returns {string} HEX color
- */
+const channelToHex = (channel) => Math.round(Math.min(255, Math.max(0, channel)))
+    .toString(16)
+    .padStart(2, "0");
+const channelsToHex = (channels) => channels === null ? BLACK : `#${channels.map(channelToHex).join("")}`;
+/** Convert a palette or rgb() string to HEX. Returns `#000000` when parsing fails. */
+const rgbStringToHex = (colorString) => channelsToHex(parseRgbChannels(colorString));
+/** Read a theme CSS variable from the document and convert it to HEX. */
 const getHEX = (variable) => {
-    const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
-    const root = document.documentElement;
-    const match = regex.exec(variable);
-    const colorValue = getComputedStyle(root).getPropertyValue(match?.[1]?.trim() ?? variable);
-    let onlyRgb = colorValue.replace("rgb(", "");
-    if (onlyRgb.indexOf("/") !== -1) {
-        onlyRgb = onlyRgb.substring(0, onlyRgb.indexOf("/")).trim();
-    }
-    if (onlyRgb.indexOf(")") !== -1) {
-        onlyRgb = onlyRgb.substring(0, onlyRgb.indexOf(")")).trim();
-    }
-    const RGB = onlyRgb.split(" ").map(channel => Number(channel));
-    return rgbToHex(RGB[0] ?? NaN, RGB[1] ?? NaN, RGB[2] ?? NaN);
+    const variableName = WRAPPED_CSS_VARIABLE.exec(variable)?.[1]?.trim() ?? variable;
+    const cssValue = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+    return channelsToHex(parseRgbChannels(cssValue));
 };
 
 const DEFAULT_CHART_OTHER = rgbStringToHex(tailwindPalette.gray[400]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/ui-design-tokens",
-  "version": "1.14.10",
+  "version": "1.15.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/tokens/utils/getHEX.d.ts

@@ -1,17 +1,4 @@
-/**
- * Convert a string to a HEX color.
- *
- * @param colorString - The string to convert to a HEX color. defaults to "#000000" if the string is not a valid RGB color.
- * @returns {string} HEX color
- */
+/** Convert a palette or rgb() string to HEX. Returns `#000000` when parsing fails. */
 export declare const rgbStringToHex: (colorString: string) => string;
-/**
- * Returns the HEX color based on a Color from the theme.
- *  Reads the RGB value from the underlying CSS variable and convert to HEX.
- *
- *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
- *
- * @param variable A color from the `colors` object of the Theme
- * @returns {string} HEX color
- */
+/** Read a theme CSS variable from the document and convert it to HEX. */
 export declare const getHEX: (variable: string) => string;