@trackunit/ui-design-tokens 0.0.52 → 0.0.53

package/index.js

@@ -1,7 +1,44 @@
-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"];
-const getReorderedChartColors = () => [
-// re-ordered to make the first ones more visually different
-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]];
+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",
+];
+const getReorderedChartColors = () => [
+    // re-ordered to make the first ones more visually different
+    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],
+];
 
 /**
  * Convert a css custom property from our design tokens to a useable css string.
@@ -13,24 +50,24 @@ DEFAULT_CHART_COLORS[0], DEFAULT_CHART_COLORS[4], DEFAULT_CHART_COLORS[7], DEFAU
  * @param variable CSS custom property for color
  * @returns Full css for using the color
  * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
- */
-function colorVariableToCss(variable) {
-  return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
+ */
+function colorVariableToCss(variable) {
+    return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
 }
 
-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);
-}
+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);
+}
 /**
  * Returns the HEX color based on a Color from the theme.
  *  Reads the RGB value from the underlying CSS variable and convert to HEX.
@@ -39,608 +76,501 @@ function rgbToHex(r, g, b) {
  *
  * @param variable A color from the `colors` object of the Theme
  * @returns HEX color
- */
-const getHEX = variable => {
-  var _a, _b;
-  const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
-  const root = document.documentElement;
-  const match = regex.exec(variable);
-  const colorValue = getComputedStyle(root).getPropertyValue((_b = (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : variable);
-  const RGB = colorValue.trim().split(" ").map(channel => Number(channel));
-  return rgbToHex(RGB[0], RGB[1], RGB[2]);
+ */
+const getHEX = (variable) => {
+    var _a, _b;
+    const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
+    const root = document.documentElement;
+    const match = regex.exec(variable);
+    const colorValue = getComputedStyle(root).getPropertyValue((_b = (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : variable);
+    const RGB = colorValue
+        .trim()
+        .split(" ")
+        .map(channel => Number(channel));
+    return rgbToHex(RGB[0], RGB[1], RGB[2]);
 };
 
 /**
  * The Tailwind color palette.
  * Contains the full tailwind default color theme.
- */
-const tailwindPalette = {
-  slate: {
-    50: "248 250 252",
-    100: "241 245 249",
-    200: "226 232 240",
-    300: "203 213 225",
-    400: "148 163 184",
-    500: "100 116 139",
-    600: "71 85 105",
-    700: "51 65 85",
-    800: "30 41 59",
-    900: "15 23 42"
-  },
-  gray: {
-    50: "249 250 251",
-    100: "243 244 246",
-    200: "229 231 235",
-    300: "209 213 219",
-    400: "156 163 175",
-    500: "107 114 128",
-    600: "75 85 99",
-    700: "55 65 81",
-    800: "31 41 55",
-    900: "17 24 39"
-  },
-  zinc: {
-    50: "250 250 250",
-    100: "244 244 245",
-    200: "228 228 231",
-    300: "212 212 216",
-    400: "161 161 170",
-    500: "113 113 122",
-    600: "82 82 91",
-    700: "63 63 70",
-    800: "39 39 42",
-    900: "24 24 27"
-  },
-  neutral: {
-    50: "250 250 250",
-    100: "245 245 245",
-    200: "229 229 229",
-    300: "212 212 212",
-    400: "163 163 163",
-    500: "115 115 115",
-    600: "82 82 82",
-    700: "64 64 64",
-    800: "38 38 38",
-    900: "23 23 23"
-  },
-  stone: {
-    50: "250 250 249",
-    100: "245 245 244",
-    200: "231 229 228",
-    300: "214 211 209",
-    400: "168 162 158",
-    500: "120 113 108",
-    600: "87 83 78",
-    700: "68 64 60",
-    800: "41 37 36",
-    900: "28 25 23"
-  },
-  red: {
-    50: "254 242 242",
-    100: "254 226 226",
-    200: "254 202 202",
-    300: "252 165 165",
-    400: "248 113 113",
-    500: "239 68 68",
-    600: "220 38 38",
-    700: "185 28 28",
-    800: "153 27 27",
-    900: "127 29 29"
-  },
-  orange: {
-    50: "255 247 237",
-    100: "255 237 213",
-    200: "254 215 170",
-    300: "253 186 116",
-    400: "251 146 60",
-    500: "249 115 22",
-    600: "234 88 12",
-    700: "194 65 12",
-    800: "154 52 18",
-    900: "124 45 18"
-  },
-  amber: {
-    50: "255 251 235",
-    100: "254 243 199",
-    200: "253 230 138",
-    300: "252 211 77",
-    400: "251 191 36",
-    500: "245 158 11",
-    600: "217 119 6",
-    700: "180 83 9",
-    800: "146 64 14",
-    900: "120 53 15"
-  },
-  yellow: {
-    50: "254 252 232",
-    100: "254 249 195",
-    200: "254 240 138",
-    300: "253 224 71",
-    400: "250 204 21",
-    500: "234 179 8",
-    600: "202 138 4",
-    700: "161 98 7",
-    800: "133 77 14",
-    900: "113 63 18"
-  },
-  lime: {
-    50: "247 254 231",
-    100: "236 252 203",
-    200: "217 249 157",
-    300: "190 242 100",
-    400: "163 230 53",
-    500: "132 204 22",
-    600: "101 163 13",
-    700: "77 124 15",
-    800: "63 98 18",
-    900: "54 83 20"
-  },
-  green: {
-    50: "240 253 244",
-    100: "220 252 231",
-    200: "187 247 208",
-    300: "134 239 172",
-    400: "74 222 128",
-    500: "34 197 94",
-    600: "22 163 74",
-    700: "21 128 61",
-    800: "22 101 52",
-    900: "20 83 45"
-  },
-  emerald: {
-    50: "236 253 245",
-    100: "209 250 229",
-    200: "167 243 208",
-    300: "110 231 183",
-    400: "52 211 153",
-    500: "16 185 129",
-    600: "5 150 105",
-    700: "4 120 87",
-    800: "6 95 70",
-    900: "6 78 59"
-  },
-  teal: {
-    50: "240 253 250",
-    100: "204 251 241",
-    200: "153 246 228",
-    300: "94 234 212",
-    400: "45 212 191",
-    500: "20 184 166",
-    600: "13 148 136",
-    700: "15 118 110",
-    800: "17 94 89",
-    900: "19 78 74"
-  },
-  cyan: {
-    50: "236 254 255",
-    100: "207 250 254",
-    200: "165 243 252",
-    300: "103 232 249",
-    400: "34 211 238",
-    500: "6 182 212",
-    600: "8 145 178",
-    700: "14 116 144",
-    800: "21 94 117",
-    900: "22 78 99"
-  },
-  sky: {
-    50: "240 249 255",
-    100: "224 242 254",
-    200: "186 230 253",
-    300: "125 211 252",
-    400: "56 189 248",
-    500: "14 165 233",
-    600: "2 132 199",
-    700: "3 105 161",
-    800: "7 89 133",
-    900: "12 74 110"
-  },
-  blue: {
-    50: "239 246 255",
-    100: "219 234 254",
-    200: "191 219 254",
-    300: "147 197 253",
-    400: "96 165 250",
-    500: "59 130 246",
-    600: "37 99 235",
-    700: "29 78 216",
-    800: "30 64 175",
-    900: "30 58 138"
-  },
-  indigo: {
-    50: "238 242 255",
-    100: "224 231 255",
-    200: "199 210 254",
-    300: "165 180 252",
-    400: "129 140 248",
-    500: "99 102 241",
-    600: "79 70 229",
-    700: "67 56 202",
-    800: "55 48 163",
-    900: "49 46 129"
-  },
-  violet: {
-    50: "245 243 255",
-    100: "237 233 254",
-    200: "221 214 254",
-    300: "196 181 253",
-    400: "167 139 250",
-    500: "139 92 246",
-    600: "124 58 237",
-    700: "109 40 217",
-    800: "91 33 182",
-    900: "76 29 149"
-  },
-  purple: {
-    50: "250 245 255",
-    100: "243 232 255",
-    200: "233 213 255",
-    300: "216 180 254",
-    400: "192 132 252",
-    500: "168 85 247",
-    600: "147 51 234",
-    700: "126 34 206",
-    800: "107 33 168",
-    900: "88 28 135"
-  },
-  fuchsia: {
-    50: "253 244 255",
-    100: "250 232 255",
-    200: "245 208 254",
-    300: "240 171 252",
-    400: "232 121 249",
-    500: "217 70 239",
-    600: "192 38 211",
-    700: "162 28 175",
-    800: "134 25 143",
-    900: "112 26 117"
-  },
-  pink: {
-    50: "253 242 248",
-    100: "252 231 243",
-    200: "251 207 232",
-    300: "249 168 212",
-    400: "244 114 182",
-    500: "236 72 153",
-    600: "219 39 119",
-    700: "190 24 93",
-    800: "157 23 77",
-    900: "131 24 67"
-  },
-  rose: {
-    50: "255 241 242",
-    100: "255 228 230",
-    200: "254 205 211",
-    300: "253 164 175",
-    400: "251 113 133",
-    500: "244 63 94",
-    600: "225 29 72",
-    700: "190 18 60",
-    800: "159 18 57",
-    900: "136 19 55"
-  }
+ */
+const tailwindPalette = {
+    slate: {
+        50: "248 250 252",
+        100: "241 245 249",
+        200: "226 232 240",
+        300: "203 213 225",
+        400: "148 163 184",
+        500: "100 116 139",
+        600: "71 85 105",
+        700: "51 65 85",
+        800: "30 41 59",
+        900: "15 23 42",
+    },
+    gray: {
+        50: "249 250 251",
+        100: "243 244 246",
+        200: "229 231 235",
+        300: "209 213 219",
+        400: "156 163 175",
+        500: "107 114 128",
+        600: "75 85 99",
+        700: "55 65 81",
+        800: "31 41 55",
+        900: "17 24 39",
+    },
+    zinc: {
+        50: "250 250 250",
+        100: "244 244 245",
+        200: "228 228 231",
+        300: "212 212 216",
+        400: "161 161 170",
+        500: "113 113 122",
+        600: "82 82 91",
+        700: "63 63 70",
+        800: "39 39 42",
+        900: "24 24 27",
+    },
+    neutral: {
+        50: "250 250 250",
+        100: "245 245 245",
+        200: "229 229 229",
+        300: "212 212 212",
+        400: "163 163 163",
+        500: "115 115 115",
+        600: "82 82 82",
+        700: "64 64 64",
+        800: "38 38 38",
+        900: "23 23 23",
+    },
+    stone: {
+        50: "250 250 249",
+        100: "245 245 244",
+        200: "231 229 228",
+        300: "214 211 209",
+        400: "168 162 158",
+        500: "120 113 108",
+        600: "87 83 78",
+        700: "68 64 60",
+        800: "41 37 36",
+        900: "28 25 23",
+    },
+    red: {
+        50: "254 242 242",
+        100: "254 226 226",
+        200: "254 202 202",
+        300: "252 165 165",
+        400: "248 113 113",
+        500: "239 68 68",
+        600: "220 38 38",
+        700: "185 28 28",
+        800: "153 27 27",
+        900: "127 29 29",
+    },
+    orange: {
+        50: "255 247 237",
+        100: "255 237 213",
+        200: "254 215 170",
+        300: "253 186 116",
+        400: "251 146 60",
+        500: "249 115 22",
+        600: "234 88 12",
+        700: "194 65 12",
+        800: "154 52 18",
+        900: "124 45 18",
+    },
+    amber: {
+        50: "255 251 235",
+        100: "254 243 199",
+        200: "253 230 138",
+        300: "252 211 77",
+        400: "251 191 36",
+        500: "245 158 11",
+        600: "217 119 6",
+        700: "180 83 9",
+        800: "146 64 14",
+        900: "120 53 15",
+    },
+    yellow: {
+        50: "254 252 232",
+        100: "254 249 195",
+        200: "254 240 138",
+        300: "253 224 71",
+        400: "250 204 21",
+        500: "234 179 8",
+        600: "202 138 4",
+        700: "161 98 7",
+        800: "133 77 14",
+        900: "113 63 18",
+    },
+    lime: {
+        50: "247 254 231",
+        100: "236 252 203",
+        200: "217 249 157",
+        300: "190 242 100",
+        400: "163 230 53",
+        500: "132 204 22",
+        600: "101 163 13",
+        700: "77 124 15",
+        800: "63 98 18",
+        900: "54 83 20",
+    },
+    green: {
+        50: "240 253 244",
+        100: "220 252 231",
+        200: "187 247 208",
+        300: "134 239 172",
+        400: "74 222 128",
+        500: "34 197 94",
+        600: "22 163 74",
+        700: "21 128 61",
+        800: "22 101 52",
+        900: "20 83 45",
+    },
+    emerald: {
+        50: "236 253 245",
+        100: "209 250 229",
+        200: "167 243 208",
+        300: "110 231 183",
+        400: "52 211 153",
+        500: "16 185 129",
+        600: "5 150 105",
+        700: "4 120 87",
+        800: "6 95 70",
+        900: "6 78 59",
+    },
+    teal: {
+        50: "240 253 250",
+        100: "204 251 241",
+        200: "153 246 228",
+        300: "94 234 212",
+        400: "45 212 191",
+        500: "20 184 166",
+        600: "13 148 136",
+        700: "15 118 110",
+        800: "17 94 89",
+        900: "19 78 74",
+    },
+    cyan: {
+        50: "236 254 255",
+        100: "207 250 254",
+        200: "165 243 252",
+        300: "103 232 249",
+        400: "34 211 238",
+        500: "6 182 212",
+        600: "8 145 178",
+        700: "14 116 144",
+        800: "21 94 117",
+        900: "22 78 99",
+    },
+    sky: {
+        50: "240 249 255",
+        100: "224 242 254",
+        200: "186 230 253",
+        300: "125 211 252",
+        400: "56 189 248",
+        500: "14 165 233",
+        600: "2 132 199",
+        700: "3 105 161",
+        800: "7 89 133",
+        900: "12 74 110",
+    },
+    blue: {
+        50: "239 246 255",
+        100: "219 234 254",
+        200: "191 219 254",
+        300: "147 197 253",
+        400: "96 165 250",
+        500: "59 130 246",
+        600: "37 99 235",
+        700: "29 78 216",
+        800: "30 64 175",
+        900: "30 58 138",
+    },
+    indigo: {
+        50: "238 242 255",
+        100: "224 231 255",
+        200: "199 210 254",
+        300: "165 180 252",
+        400: "129 140 248",
+        500: "99 102 241",
+        600: "79 70 229",
+        700: "67 56 202",
+        800: "55 48 163",
+        900: "49 46 129",
+    },
+    violet: {
+        50: "245 243 255",
+        100: "237 233 254",
+        200: "221 214 254",
+        300: "196 181 253",
+        400: "167 139 250",
+        500: "139 92 246",
+        600: "124 58 237",
+        700: "109 40 217",
+        800: "91 33 182",
+        900: "76 29 149",
+    },
+    purple: {
+        50: "250 245 255",
+        100: "243 232 255",
+        200: "233 213 255",
+        300: "216 180 254",
+        400: "192 132 252",
+        500: "168 85 247",
+        600: "147 51 234",
+        700: "126 34 206",
+        800: "107 33 168",
+        900: "88 28 135",
+    },
+    fuchsia: {
+        50: "253 244 255",
+        100: "250 232 255",
+        200: "245 208 254",
+        300: "240 171 252",
+        400: "232 121 249",
+        500: "217 70 239",
+        600: "192 38 211",
+        700: "162 28 175",
+        800: "134 25 143",
+        900: "112 26 117",
+    },
+    pink: {
+        50: "253 242 248",
+        100: "252 231 243",
+        200: "251 207 232",
+        300: "249 168 212",
+        400: "244 114 182",
+        500: "236 72 153",
+        600: "219 39 119",
+        700: "190 24 93",
+        800: "157 23 77",
+        900: "131 24 67",
+    },
+    rose: {
+        50: "255 241 242",
+        100: "255 228 230",
+        200: "254 205 211",
+        300: "253 164 175",
+        400: "251 113 133",
+        500: "244 63 94",
+        600: "225 29 72",
+        700: "190 18 60",
+        800: "159 18 57",
+        900: "136 19 55",
+    },
 };
 
 /**
  * The general color palette
  * Should be available in most if not all colored components
- */
-const generalPalette = {
-  PRIMARY: tailwindPalette.blue,
-  SECONDARY: tailwindPalette.slate,
-  ACCENT: tailwindPalette.cyan,
-  NEUTRAL: tailwindPalette.neutral,
-  BLACK: {
-    DEFAULT: "26 27 28"
-  },
-  WHITE: {
-    DEFAULT: "255 255 255"
-  }
-};
+ */
+const generalPalette = {
+    PRIMARY: tailwindPalette.blue,
+    SECONDARY: tailwindPalette.slate,
+    ACCENT: tailwindPalette.cyan,
+    NEUTRAL: tailwindPalette.neutral,
+    BLACK: { DEFAULT: "26 27 28" },
+    WHITE: { DEFAULT: "255 255 255" },
+};
 /**
  * The intent color palette
  * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
- */
-const intentPalette = {
-  INFO: tailwindPalette.blue,
-  SUCCESS: tailwindPalette.green,
-  WARNING: tailwindPalette.amber,
-  DANGER: tailwindPalette.red
-};
+ */
+const intentPalette = {
+    INFO: tailwindPalette.blue,
+    SUCCESS: tailwindPalette.green,
+    WARNING: tailwindPalette.amber,
+    DANGER: tailwindPalette.red,
+};
 /**
  * The Criticality color palette
  * Should be available in any component that could be used to display the criticality of an asset or event
- */
-const criticalityPalette = {
-  GOOD: tailwindPalette.emerald,
-  LOW: tailwindPalette.amber,
-  CRITICAL: tailwindPalette.red
-};
+ */
+const criticalityPalette = {
+    GOOD: tailwindPalette.emerald,
+    LOW: tailwindPalette.amber,
+    CRITICAL: tailwindPalette.red,
+};
 /**
  * The Activity color palette
  * Should be available in any component that could be used to display the Activity state of an asset
- */
-const activityPalette = {
-  WORKING: tailwindPalette.blue,
-  IDLE: tailwindPalette.orange,
-  STOPPED: tailwindPalette.violet,
-  UNKNOWN: tailwindPalette.neutral,
-  MOVING: {
-    DEFAULT: "230 144 177"
-  },
-  ACTIVE: {
-    DEFAULT: "63 219 147"
-  }
-};
+ */
+const activityPalette = {
+    WORKING: tailwindPalette.blue,
+    IDLE: tailwindPalette.orange,
+    STOPPED: tailwindPalette.violet,
+    UNKNOWN: tailwindPalette.neutral,
+    MOVING: { DEFAULT: "230 144 177" },
+    ACTIVE: { DEFAULT: "63 219 147" },
+};
 /**
  * The Rental status color palette
  * Should be available in any component that could be used to display the rental status of an asset
- */
-const rentalStatusPalette = {
-  ON_RENT: {
-    100: "223 244 254",
-    600: "90 200 250"
-  },
-  RETURNED: {
-    100: "230 202 255",
-    600: "176 90 255"
-  },
-  AVAILABLE: {
-    100: "206 255 232",
-    600: "0 166 88"
-  },
-  PICKUP_READY: {
-    100: "255 236 209",
-    600: "255 149 0"
-  },
-  TRANSFER: {
-    100: "255 248 217",
-    600: "253 208 8"
-  },
-  IN_REPAIR: {
-    100: "255 233 233",
-    600: "255 90 90"
-  },
-  OTHER_RENTAL_STATUS: {
-    100: "238 239 239",
-    600: "151 154 154"
-  }
-};
+ */
+const rentalStatusPalette = {
+    ON_RENT: { 100: "223 244 254", 600: "90 200 250" },
+    RETURNED: { 100: "230 202 255", 600: "176 90 255" },
+    AVAILABLE: { 100: "206 255 232", 600: "0 166 88" },
+    PICKUP_READY: { 100: "255 236 209", 600: "255 149 0" },
+    TRANSFER: { 100: "255 248 217", 600: "253 208 8" },
+    IN_REPAIR: { 100: "255 233 233", 600: "255 90 90" },
+    OTHER_RENTAL_STATUS: { 100: "238 239 239", 600: "151 154 154" },
+};
 /**
  * Grouped Theme Colors
- */
-const groupedPalettes = {
-  // General
-  GENERAL: generalPalette,
-  // UI Intent
-  INTENT: intentPalette,
-  // Asset Criticality
-  CRITICALITY: criticalityPalette,
-  // Activity
-  ACTIVITY: activityPalette,
-  // Rental
-  RENTAL: rentalStatusPalette
-};
+ */
+const groupedPalettes = {
+    // General
+    GENERAL: generalPalette,
+    // UI Intent
+    INTENT: intentPalette,
+    // Asset Criticality
+    CRITICALITY: criticalityPalette,
+    // Activity
+    ACTIVITY: activityPalette,
+    // Rental
+    RENTAL: rentalStatusPalette,
+};
 /**
  * The full theme color palette (flattened)
- */
+ */
 const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), rentalStatusPalette);
 
 /**
  * A collection of all the tokens related to the named colors in the default theme.
- */
+ */
 /**
  * An object of all the Trackunit Theme colors and their available variants.
  * These colors does not include the default tailwind colors.
- */
-const themeColors = {
-  PRIMARY: {
-    name: "primary",
-    variants: trackunitPalette.PRIMARY
-  },
-  SECONDARY: {
-    name: "secondary",
-    variants: trackunitPalette.SECONDARY
-  },
-  ACCENT: {
-    name: "accent",
-    variants: trackunitPalette.ACCENT
-  },
-  NEUTRAL: {
-    name: "neutral",
-    variants: trackunitPalette.NEUTRAL
-  },
-  BLACK: {
-    name: "black",
-    variants: trackunitPalette.BLACK,
-    defaultVariant: "DEFAULT"
-  },
-  WHITE: {
-    name: "white",
-    variants: trackunitPalette.WHITE,
-    defaultVariant: "DEFAULT"
-  },
-  INFO: {
-    name: "info",
-    variants: trackunitPalette.INFO
-  },
-  SUCCESS: {
-    name: "success",
-    variants: trackunitPalette.SUCCESS
-  },
-  WARNING: {
-    name: "warning",
-    variants: trackunitPalette.WARNING
-  },
-  DANGER: {
-    name: "danger",
-    variants: trackunitPalette.DANGER
-  },
-  GOOD: {
-    name: "good",
-    variants: trackunitPalette.GOOD
-  },
-  LOW: {
-    name: "low",
-    variants: trackunitPalette.LOW
-  },
-  CRITICAL: {
-    name: "critical",
-    variants: trackunitPalette.CRITICAL
-  },
-  WORKING: {
-    name: "working",
-    variants: trackunitPalette.WORKING
-  },
-  IDLE: {
-    name: "idle",
-    variants: trackunitPalette.IDLE
-  },
-  STOPPED: {
-    name: "stopped",
-    variants: trackunitPalette.STOPPED
-  },
-  ACTIVE: {
-    name: "active",
-    variants: trackunitPalette.ACTIVE,
-    defaultVariant: "DEFAULT"
-  },
-  MOVING: {
-    name: "moving",
-    variants: trackunitPalette.MOVING,
-    defaultVariant: "DEFAULT"
-  },
-  UNKNOWN: {
-    name: "unknown",
-    variants: trackunitPalette.UNKNOWN
-  },
-  AVAILABLE: {
-    name: "available",
-    variants: trackunitPalette.AVAILABLE
-  },
-  IN_REPAIR: {
-    name: "in_repair",
-    variants: trackunitPalette.IN_REPAIR
-  },
-  ON_RENT: {
-    name: "on_rent",
-    variants: trackunitPalette.ON_RENT
-  },
-  OTHER_RENTAL_STATUS: {
-    name: "other_rental_status",
-    variants: trackunitPalette.OTHER_RENTAL_STATUS
-  },
-  PICKUP_READY: {
-    name: "pickup_ready",
-    variants: trackunitPalette.PICKUP_READY
-  },
-  RETURNED: {
-    name: "returned",
-    variants: trackunitPalette.RETURNED
-  },
-  TRANSFER: {
-    name: "transfer",
-    variants: trackunitPalette.TRANSFER
-  }
+ */
+const themeColors = {
+    PRIMARY: { name: "primary", variants: trackunitPalette.PRIMARY },
+    SECONDARY: { name: "secondary", variants: trackunitPalette.SECONDARY },
+    ACCENT: { name: "accent", variants: trackunitPalette.ACCENT },
+    NEUTRAL: { name: "neutral", variants: trackunitPalette.NEUTRAL },
+    BLACK: { name: "black", variants: trackunitPalette.BLACK, defaultVariant: "DEFAULT" },
+    WHITE: { name: "white", variants: trackunitPalette.WHITE, defaultVariant: "DEFAULT" },
+    INFO: { name: "info", variants: trackunitPalette.INFO },
+    SUCCESS: { name: "success", variants: trackunitPalette.SUCCESS },
+    WARNING: { name: "warning", variants: trackunitPalette.WARNING },
+    DANGER: { name: "danger", variants: trackunitPalette.DANGER },
+    GOOD: { name: "good", variants: trackunitPalette.GOOD },
+    LOW: { name: "low", variants: trackunitPalette.LOW },
+    CRITICAL: { name: "critical", variants: trackunitPalette.CRITICAL },
+    WORKING: { name: "working", variants: trackunitPalette.WORKING },
+    IDLE: { name: "idle", variants: trackunitPalette.IDLE },
+    STOPPED: { name: "stopped", variants: trackunitPalette.STOPPED },
+    ACTIVE: { name: "active", variants: trackunitPalette.ACTIVE, defaultVariant: "DEFAULT" },
+    MOVING: { name: "moving", variants: trackunitPalette.MOVING, defaultVariant: "DEFAULT" },
+    UNKNOWN: { name: "unknown", variants: trackunitPalette.UNKNOWN },
+    AVAILABLE: { name: "available", variants: trackunitPalette.AVAILABLE },
+    IN_REPAIR: { name: "in_repair", variants: trackunitPalette.IN_REPAIR },
+    ON_RENT: { name: "on_rent", variants: trackunitPalette.ON_RENT },
+    OTHER_RENTAL_STATUS: { name: "other_rental_status", variants: trackunitPalette.OTHER_RENTAL_STATUS },
+    PICKUP_READY: { name: "pickup_ready", variants: trackunitPalette.PICKUP_READY },
+    RETURNED: { name: "returned", variants: trackunitPalette.RETURNED },
+    TRANSFER: { name: "transfer", variants: trackunitPalette.TRANSFER },
 };
 
-const outputOptions = ["HEX", "CSS"];
-function color(ColorKey, arg2, arg3) {
-  var _a, _b;
-  const colorName = themeColors[ColorKey].name;
-  const colorVariants = themeColors[ColorKey].variants;
-  // defaultVariant or 600 or the "middel" value available.
-  const defaultVariant = (_b = (_a = themeColors[ColorKey].defaultVariant) !== null && _a !== void 0 ? _a : colorVariants[600] && 600) !== null && _b !== void 0 ? _b : Object.keys(colorVariants)[Math.floor(Object.keys(colorVariants).length / 2)];
-  let variant = defaultVariant;
-  let output = "CSS";
-  if (isOutputOption(arg2)) {
-    output = arg2;
-  } else {
-    if (isOutputOption(arg3)) {
-      output = arg3;
-    }
-    if (isValidVariant(colorVariants, arg2)) {
-      variant = arg2;
-    }
-  }
-  if (output === "CSS") {
-    return colorVariableToCss(`--color-${colorName}-${String(variant)}`);
-  }
-  if (output === "HEX") {
-    return getHEX(`--color-${colorName}-${String(variant)}`);
-  }
-  return colorName;
-}
-const isOutputOption = something => typeof something === "string" && outputOptions.includes(something);
+const outputOptions = ["HEX", "CSS"];
+function color(ColorKey, arg2, arg3) {
+    var _a, _b;
+    const colorName = themeColors[ColorKey].name;
+    const colorVariants = themeColors[ColorKey].variants;
+    // defaultVariant or 600 or the "middel" value available.
+    const defaultVariant = (_b = (_a = themeColors[ColorKey].defaultVariant) !== null && _a !== void 0 ? _a : (colorVariants[600] && 600)) !== null && _b !== void 0 ? _b : Object.keys(colorVariants)[Math.floor(Object.keys(colorVariants).length / 2)];
+    let variant = defaultVariant;
+    let output = "CSS";
+    if (isOutputOption(arg2)) {
+        output = arg2;
+    }
+    else {
+        if (isOutputOption(arg3)) {
+            output = arg3;
+        }
+        if (isValidVariant(colorVariants, arg2)) {
+            variant = arg2;
+        }
+    }
+    if (output === "CSS") {
+        return colorVariableToCss(`--color-${colorName}-${String(variant)}`);
+    }
+    if (output === "HEX") {
+        return getHEX(`--color-${colorName}-${String(variant)}`);
+    }
+    return colorName;
+}
+const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
 const isValidVariant = (availableVariants, something) => Boolean(availableVariants[something]);
 
 /**
  * Elevation is based on N100 with an alpha channel. E(X)A variants
  * are for active versions(e.g. hover).
- */
-const elevation = {
-  E05: "var(--box-shadow-sm)",
-  E10: "var(--box-shadow-DEFAULT)",
-  E10A: "var(--box-shadow-md)",
-  E20: "var(--box-shadow-lg)",
-  E30: "var(--box-shadow-xl)",
-  E40: "var(--box-shadow-2xl)"
+ */
+const elevation = {
+    E05: "var(--box-shadow-sm)",
+    E10: "var(--box-shadow-DEFAULT)",
+    E10A: "var(--box-shadow-md)",
+    E20: "var(--box-shadow-lg)",
+    E30: "var(--box-shadow-xl)",
+    E40: "var(--box-shadow-2xl)",
 };
 
-const size = {
-  /** --spacing-0: 0px; */
-  none: "var(--spacing-0)",
-  /** --spacing-1: 0.25rem; */
-  tiny: "var(--spacing-1)",
-  /** --spacing-2: 0.5rem; */
-  mini: "var(--spacing-2)",
-  /** --spacing-3: 0.75rem; */
-  small: "var(--spacing-3)",
-  /** --spacing-4: 1rem; */
-  medium: "var(--spacing-4)",
-  /** --spacing-6: 1.5rem; */
-  large: "var(--spacing-6)",
-  /** --spacing-8: 2rem; */
-  giant: "var(--spacing-8)",
-  /** --spacing-10: 2.5rem; */
-  enormous: "var(--spacing-10)"
+const size = {
+    /** --spacing-0: 0px; */
+    none: "var(--spacing-0)",
+    /** --spacing-1: 0.25rem; */
+    tiny: "var(--spacing-1)",
+    /** --spacing-2: 0.5rem; */
+    mini: "var(--spacing-2)",
+    /** --spacing-3: 0.75rem; */
+    small: "var(--spacing-3)",
+    /** --spacing-4: 1rem; */
+    medium: "var(--spacing-4)",
+    /** --spacing-6: 1.5rem; */
+    large: "var(--spacing-6)",
+    /** --spacing-8: 2rem; */
+    giant: "var(--spacing-8)",
+    /** --spacing-10: 2.5rem; */
+    enormous: "var(--spacing-10)",
 };
 
 /**
  * Based on a root size of 16px.
- */
-const fontSize = {
-  primary: "var( --font-size-3xl)",
-  secondary: "var(--font-size-lg)",
-  tertiary: "var(--font-size-base)",
-  subtitle: "var(--font-size-base)",
-  body: "var(--font-size-sm)",
-  small: "var(--font-size-xs)" // 12px
-};
+ */
+const fontSize = {
+    primary: "var( --font-size-3xl)",
+    secondary: "var(--font-size-lg)",
+    tertiary: "var(--font-size-base)",
+    subtitle: "var(--font-size-base)",
+    body: "var(--font-size-sm)",
+    small: "var(--font-size-xs)", // 12px
+};
 /**
  * Primary font weights.
- */
-const fontWeight = {
-  normal: 400,
-  bold: 600
+ */
+const fontWeight = {
+    normal: 400,
+    bold: 600,
 };
 
-const zIndex = {
-  hidden: -1,
-  default: 1,
-  top: 5,
-  overlay: 10,
-  popover: 20,
-  toast: 100
+const zIndex = {
+    hidden: -1,
+    default: 1,
+    top: 5,
+    overlay: 10,
+    popover: 20,
+    toast: 100,
 };
 
-const tokens = {
-  size,
-  fontSize,
-  fontWeight,
-  elevation,
-  zIndex,
-  fontFamily: `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
+const tokens = {
+    size,
+    fontSize,
+    fontWeight,
+    elevation,
+    zIndex,
+    fontFamily: `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
 };
 
 export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, tailwindPalette, themeColors, tokens, trackunitPalette };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/ui-design-tokens",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",