@trackunit/ui-design-tokens 1.3.71 → 1.3.73

package/index.cjs.js

@@ -15,56 +15,6 @@ const themeBorderRadius = {
     full: "9999px",
 };
 
-const DEFAULT_CHART_COLORS = [
-    "#2580C7",
-    "#36A2DA",
-    "#3FBCEA",
-    "#06708D",
-    "#01B7A9",
-    "#A2DEDA",
-    "#F9E9A0",
-    "#FDD008",
-    "#FBB385",
-    "#FF7373",
-    "#E6BCF3",
-    "#9D96F5",
-    "#8378EA",
-    "#96BFFF",
-    "#979A9A",
-    "#0065E5",
-    "#FF5A5A",
-    "#00A658",
-    "#5AC8fA",
-    "#5E5CE6",
-    "#2066FF",
-    "#FF9500",
-    "#E2E8F0",
-];
-/**
- * Re-ordered chart colors to ensure that adjacent colors are visually different.
- *
- * @returns {string[]} The reordered chart colors.
- */
-const getReorderedChartColors = () => [
-    // DO NOT reorder the colors, or add new colors in the middle of the array until you verify that adjacent colors are visually different.
-    // If you want to add a new color, you should almost always add it at the end of the array.
-    DEFAULT_CHART_COLORS[0],
-    DEFAULT_CHART_COLORS[4],
-    DEFAULT_CHART_COLORS[7],
-    DEFAULT_CHART_COLORS[9],
-    DEFAULT_CHART_COLORS[12],
-    DEFAULT_CHART_COLORS[5],
-    DEFAULT_CHART_COLORS[6],
-    DEFAULT_CHART_COLORS[8],
-    DEFAULT_CHART_COLORS[10],
-    DEFAULT_CHART_COLORS[1],
-    DEFAULT_CHART_COLORS[11],
-    DEFAULT_CHART_COLORS[3],
-    DEFAULT_CHART_COLORS[2],
-    DEFAULT_CHART_COLORS[13],
-    DEFAULT_CHART_COLORS[22],
-];
-
 /**
  * Convert a css custom property from our design tokens to a useable css string.
  *
@@ -93,6 +43,26 @@ function rgbToHex(r, g, b) {
     }
     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";
+};
 /**
  * Returns the HEX color based on a Color from the theme.
  *  Reads the RGB value from the underlying CSS variable and convert to HEX.
@@ -646,6 +616,26 @@ function color(ColorKey, arg2, arg3) {
 const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
 const isValidVariant = (availableVariants, something) => Boolean(availableVariants[something]);
 
+const DEFAULT_CHART_OTHER = rgbStringToHex(tailwindPalette.gray[400]);
+// https://www.figma.com/design/rKXIGyQNzplUJNB51EJY19/Widgets-Library?node-id=4634-13353&t=E95Ey1UXtgTWs17D-0
+const DEFAULT_CHART_COLORS = [
+    rgbStringToHex(tailwindPalette.blue[500]),
+    rgbStringToHex(tailwindPalette.teal[500]),
+    rgbStringToHex(tailwindPalette.yellow[400]),
+    rgbStringToHex(tailwindPalette.violet[400]),
+    rgbStringToHex(tailwindPalette.orange[500]),
+    rgbStringToHex(tailwindPalette.lime[400]),
+];
+const { CRITICAL, LOW, GOOD, WORKING, IDLE, STOPPED } = themeColors;
+const CHART_STATUS_COLORS = {
+    CRITICAL: rgbStringToHex(CRITICAL.variants[500]),
+    LOW: rgbStringToHex(LOW.variants[500]),
+    GOOD: rgbStringToHex(GOOD.variants[500]),
+    WORKING: rgbStringToHex(WORKING.variants[500]),
+    IDLE: rgbStringToHex(IDLE.variants[500]),
+    STOPPED: rgbStringToHex(STOPPED.variants[500]),
+};
+
 /**
  * A collection of all the tokens related to elevation in the theme.
  */
@@ -836,7 +826,9 @@ const zIndex = {
     toast: themeZIndex.toast,
 };
 
+exports.CHART_STATUS_COLORS = CHART_STATUS_COLORS;
 exports.DEFAULT_CHART_COLORS = DEFAULT_CHART_COLORS;
+exports.DEFAULT_CHART_OTHER = DEFAULT_CHART_OTHER;
 exports.activityPalette = activityPalette;
 exports.color = color;
 exports.criticalityPalette = criticalityPalette;
@@ -845,7 +837,6 @@ exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
 exports.fontWeight = fontWeight;
 exports.generalPalette = generalPalette;
-exports.getReorderedChartColors = getReorderedChartColors;
 exports.groupedPalettes = groupedPalettes;
 exports.intentPalette = intentPalette;
 exports.otherPalette = otherPalette;

package/index.esm.js

@@ -13,56 +13,6 @@ const themeBorderRadius = {
     full: "9999px",
 };
 
-const DEFAULT_CHART_COLORS = [
-    "#2580C7",
-    "#36A2DA",
-    "#3FBCEA",
-    "#06708D",
-    "#01B7A9",
-    "#A2DEDA",
-    "#F9E9A0",
-    "#FDD008",
-    "#FBB385",
-    "#FF7373",
-    "#E6BCF3",
-    "#9D96F5",
-    "#8378EA",
-    "#96BFFF",
-    "#979A9A",
-    "#0065E5",
-    "#FF5A5A",
-    "#00A658",
-    "#5AC8fA",
-    "#5E5CE6",
-    "#2066FF",
-    "#FF9500",
-    "#E2E8F0",
-];
-/**
- * Re-ordered chart colors to ensure that adjacent colors are visually different.
- *
- * @returns {string[]} The reordered chart colors.
- */
-const getReorderedChartColors = () => [
-    // DO NOT reorder the colors, or add new colors in the middle of the array until you verify that adjacent colors are visually different.
-    // If you want to add a new color, you should almost always add it at the end of the array.
-    DEFAULT_CHART_COLORS[0],
-    DEFAULT_CHART_COLORS[4],
-    DEFAULT_CHART_COLORS[7],
-    DEFAULT_CHART_COLORS[9],
-    DEFAULT_CHART_COLORS[12],
-    DEFAULT_CHART_COLORS[5],
-    DEFAULT_CHART_COLORS[6],
-    DEFAULT_CHART_COLORS[8],
-    DEFAULT_CHART_COLORS[10],
-    DEFAULT_CHART_COLORS[1],
-    DEFAULT_CHART_COLORS[11],
-    DEFAULT_CHART_COLORS[3],
-    DEFAULT_CHART_COLORS[2],
-    DEFAULT_CHART_COLORS[13],
-    DEFAULT_CHART_COLORS[22],
-];
-
 /**
  * Convert a css custom property from our design tokens to a useable css string.
  *
@@ -91,6 +41,26 @@ function rgbToHex(r, g, b) {
     }
     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";
+};
 /**
  * Returns the HEX color based on a Color from the theme.
  *  Reads the RGB value from the underlying CSS variable and convert to HEX.
@@ -644,6 +614,26 @@ function color(ColorKey, arg2, arg3) {
 const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
 const isValidVariant = (availableVariants, something) => Boolean(availableVariants[something]);
 
+const DEFAULT_CHART_OTHER = rgbStringToHex(tailwindPalette.gray[400]);
+// https://www.figma.com/design/rKXIGyQNzplUJNB51EJY19/Widgets-Library?node-id=4634-13353&t=E95Ey1UXtgTWs17D-0
+const DEFAULT_CHART_COLORS = [
+    rgbStringToHex(tailwindPalette.blue[500]),
+    rgbStringToHex(tailwindPalette.teal[500]),
+    rgbStringToHex(tailwindPalette.yellow[400]),
+    rgbStringToHex(tailwindPalette.violet[400]),
+    rgbStringToHex(tailwindPalette.orange[500]),
+    rgbStringToHex(tailwindPalette.lime[400]),
+];
+const { CRITICAL, LOW, GOOD, WORKING, IDLE, STOPPED } = themeColors;
+const CHART_STATUS_COLORS = {
+    CRITICAL: rgbStringToHex(CRITICAL.variants[500]),
+    LOW: rgbStringToHex(LOW.variants[500]),
+    GOOD: rgbStringToHex(GOOD.variants[500]),
+    WORKING: rgbStringToHex(WORKING.variants[500]),
+    IDLE: rgbStringToHex(IDLE.variants[500]),
+    STOPPED: rgbStringToHex(STOPPED.variants[500]),
+};
+
 /**
  * A collection of all the tokens related to elevation in the theme.
  */
@@ -834,4 +824,4 @@ const zIndex = {
     toast: themeZIndex.toast,
 };
 
-export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, otherPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeScreenSizeAsNumber, themeSpacing, themeZIndex, themedPalette, trackunitPalette, utilizationPalette, zIndex };
+export { CHART_STATUS_COLORS, DEFAULT_CHART_COLORS, DEFAULT_CHART_OTHER, activityPalette, color, criticalityPalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, groupedPalettes, intentPalette, otherPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeScreenSizeAsNumber, themeSpacing, themeZIndex, themedPalette, trackunitPalette, utilizationPalette, zIndex };

package/package.json

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

package/src/tokens/chartColorsDefault.d.ts

@@ -1,7 +1,13 @@
-export declare const DEFAULT_CHART_COLORS: ["#2580C7", "#36A2DA", "#3FBCEA", "#06708D", "#01B7A9", "#A2DEDA", "#F9E9A0", "#FDD008", "#FBB385", "#FF7373", "#E6BCF3", "#9D96F5", "#8378EA", "#96BFFF", "#979A9A", "#0065E5", "#FF5A5A", "#00A658", "#5AC8fA", "#5E5CE6", "#2066FF", "#FF9500", "#E2E8F0"];
-/**
- * Re-ordered chart colors to ensure that adjacent colors are visually different.
- *
- * @returns {string[]} The reordered chart colors.
- */
-export declare const getReorderedChartColors: () => ("#2580C7" | "#36A2DA" | "#3FBCEA" | "#06708D" | "#01B7A9" | "#A2DEDA" | "#F9E9A0" | "#FDD008" | "#FBB385" | "#FF7373" | "#E6BCF3" | "#9D96F5" | "#8378EA" | "#96BFFF" | "#E2E8F0")[];
+declare type ColorString = string;
+export declare const DEFAULT_CHART_OTHER: ColorString;
+export declare const DEFAULT_CHART_COLORS: [string, string, string, string, string, string];
+export type ChartStatus = "CRITICAL" | "LOW" | "GOOD" | "WORKING" | "IDLE" | "STOPPED";
+export declare const CHART_STATUS_COLORS: {
+    readonly CRITICAL: string;
+    readonly LOW: string;
+    readonly GOOD: string;
+    readonly WORKING: string;
+    readonly IDLE: string;
+    readonly STOPPED: string;
+};
+export {};

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

@@ -1,3 +1,10 @@
+/**
+ * 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
+ */
+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.