@trackunit/ui-design-tokens 0.0.43 → 0.0.45

package/index.js

@@ -1,119 +1,21 @@
-import { generateMedia } from 'styled-media-query';
-
 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]];
 
 /**
- * The values assigned are loosely based on the hue/neutral's
- * respective relative luminance, where 0% is black and 100% is white.
- * However, it is slightly adjusted to be in reverse, where X0 will
- * always represent the lightest version, while X100 will present the
- * darkest version of a hue/neutral.
+ * Convert a css custom property from our design tokens to a useable css string.
+ *
+ * Our custom properties are saved as "rrr ggg bbb" rather than a full css color.
+ *
+ * This allows us to modify them with opacity values and more.
+ *
+ * @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 getColorValue(variable) {
+function colorVariableToCss(variable) {
   return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
 }
-const black = "#1a1b1c";
-const white = "#fff";
-const neutral = {
-  N5: getColorValue("--color-neutral-50"),
-  N10: getColorValue("--color-neutral-100"),
-  N20: getColorValue("--color-neutral-200"),
-  N30: getColorValue("--color-neutral-300"),
-  N40: getColorValue("--color-neutral-400"),
-  N50: getColorValue("--color-neutral-500"),
-  N60: getColorValue("--color-neutral-600"),
-  N70: getColorValue("--color-neutral-700"),
-  N80: getColorValue("--color-neutral-800"),
-  N90: getColorValue("--color-neutral-900")
-};
-const blue = {
-  B5: getColorValue("--color-blue-50"),
-  B10: getColorValue("--color-blue-100"),
-  B20: getColorValue("--color-blue-200"),
-  B30: getColorValue("--color-blue-300"),
-  B40: getColorValue("--color-blue-400"),
-  B50: getColorValue("--color-blue-500"),
-  B60: getColorValue("--color-blue-600"),
-  B70: getColorValue("--color-blue-700"),
-  B80: getColorValue("--color-blue-800"),
-  B90: getColorValue("--color-blue-900")
-};
-const green = {
-  G5: getColorValue("--color-green-50"),
-  G10: getColorValue("--color-green-100"),
-  G20: getColorValue("--color-green-200"),
-  G30: getColorValue("--color-green-300"),
-  G40: getColorValue("--color-green-400"),
-  G50: getColorValue("--color-green-500"),
-  G60: getColorValue("--color-green-600"),
-  G70: getColorValue("--color-green-700"),
-  G80: getColorValue("--color-green-800"),
-  G90: getColorValue("--color-green-900")
-};
-const red = {
-  R5: getColorValue("--color-red-50"),
-  R10: getColorValue("--color-red-100"),
-  R20: getColorValue("--color-red-200"),
-  R30: getColorValue("--color-red-300"),
-  R40: getColorValue("--color-red-400"),
-  R50: getColorValue("--color-red-500"),
-  R60: getColorValue("--color-red-600"),
-  R70: getColorValue("--color-red-700"),
-  R80: getColorValue("--color-red-800"),
-  R90: getColorValue("--color-red-900")
-};
-const orange = {
-  O5: getColorValue("--color-amber-50"),
-  O10: getColorValue("--color-amber-100"),
-  O20: getColorValue("--color-amber-200"),
-  O30: getColorValue("--color-amber-300"),
-  O40: getColorValue("--color-amber-400"),
-  O50: getColorValue("--color-amber-500"),
-  O60: getColorValue("--color-amber-600"),
-  O70: getColorValue("--color-amber-700"),
-  O80: getColorValue("--color-amber-800"),
-  O90: getColorValue("--color-amber-900")
-};
-const purple = {
-  P5: getColorValue("--color-violet-50"),
-  P10: getColorValue("--color-violet-100"),
-  P20: getColorValue("--color-violet-200"),
-  P30: getColorValue("--color-violet-300"),
-  P40: getColorValue("--color-violet-400"),
-  P50: getColorValue("--color-violet-500"),
-  P60: getColorValue("--color-violet-600"),
-  P70: getColorValue("--color-violet-700"),
-  P80: getColorValue("--color-violet-800"),
-  P90: getColorValue("--color-violet-900")
-};
-const utilization = {
-  working: "#2EC5E9",
-  moving: "#E690B1",
-  idling: "#FDDD0E",
-  stopped: "#6577DB",
-  active: "#3FDB93",
-  operating: "#65ACDB"
-};
-const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, neutral), blue), green), red), orange), purple), {
-  utilization,
-  black,
-  white
-});
-
-/**
- * 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)"
-};
 
 function componentToHex(c) {
   if (c === null || c === undefined) {
@@ -135,7 +37,7 @@ function rgbToHex(r, g, 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.
  *
- *  Example: getHEX(theme.colors.B50) -> #3b82f6
+ *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
  *
  * @param variable A color from the `colors` object of the Theme
  * @returns HEX color
@@ -154,94 +56,558 @@ const getHEX = variable => {
 };
 
 /**
- * Reads the value of the CSS custom Property connected to the design torken.
- * ATTENTION: For colors use getHEX
+ * 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"
+  }
+};
+
+/**
+ * The general color palette
+ * Should be available in most if not all colored components
  */
-function getValuesFromDesignToken(designToken) {
-  var _a;
-
-  if (typeof designToken === "string" && designToken.includes("var(")) {
-    const regex = /var\((.*?)\)/g;
-    const root = document.documentElement;
-    const match = regex.exec(designToken);
-    const tokenValue = getComputedStyle(root).getPropertyValue((_a = match === null || match === void 0 ? void 0 : match[1]) !== null && _a !== void 0 ? _a : designToken);
-    return tokenValue;
+
+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"
+ */
 
-  return designToken;
-}
+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
+};
+/**
+ * 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"
+  }
+};
+/**
+ * The Rental status color palette
+ * Should be available in any component that could be used to display the rental status of an asset
+ */
 
-const breakpoints = {
-  xs: 0,
-  sm: 480,
-  md: 768,
-  lg: 1024,
-  xl: 1200,
-  xxl: 1600,
-  xxxl: 1900 // full HD
+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
 };
 /**
- * Track units media queries.
+ * 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 mediaQuery = generateMedia({
-  xs: breakpoints.xs + "px",
-  sm: breakpoints.sm + "px",
-  md: breakpoints.md + "px",
-  lg: breakpoints.lg + "px",
-  xl: breakpoints.xl + "px",
-  xxl: breakpoints.xxl + "px",
-  xxxl: breakpoints.xxxl + "px" // full HD
-
-});
-const windowWidth = {
-  lessThan: size => {
-    return window.innerWidth < breakpoints[size];
-  },
-  greaterThan: size => {
-    return window.innerWidth > breakpoints[size];
-  },
-  between: (first, second) => {
-    return window.innerWidth < breakpoints[first] && window.innerWidth < breakpoints[second];
+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
   }
 };
-/*
---------
-TAILWIND
---------
-sm	640px	@media (min-width: 640px) { ... }
-md	768px	@media (min-width: 768px) { ... }
-lg	1024px	@media (min-width: 1024px) { ... }
-xl	1280px	@media (min-width: 1280px) { ... }
-2xl	1536px	@media (min-width: 1536px) { ... }
-*/
-
-/*
---------
-FLUENTUI
---------
-small	320px - 479px
-medium	480px - 639px
-large	640px - 1023px
-extra large	1024px - 1365px
-extra extra large	1366px - 1919px
-extra extra extra large	1920px and up
-*/
+
+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]);
 
 /**
---------
-BOOTSTRAP
---------
- grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
+ * 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 size = {
   /** --spacing-0: 0px; */
@@ -300,7 +666,6 @@ const zIndex = {
 };
 
 const tokens = {
-  colors,
   size,
   fontSize,
   fontWeight,
@@ -309,4 +674,4 @@ const tokens = {
   fontFamily: `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
 };
 
-export { DEFAULT_CHART_COLORS, black, blue, breakpoints, colors, elevation, fontSize, fontWeight, getColorValue, getHEX, getReorderedChartColors, getValuesFromDesignToken, green, mediaQuery, neutral, orange, purple, red, size, tokens, utilization, white, windowWidth, zIndex };
+export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, tailwindPalette, themeColors, tokens, trackunitPalette };