@trackunit/ui-design-tokens 0.0.96 → 0.0.97

package/index.cjs.js

@@ -431,6 +431,23 @@ const activityPalette = {
     MOVING: { DEFAULT: "230 144 177" },
     ACTIVE: { DEFAULT: "63 219 147" },
 };
+/**
+ * The Themed color palette
+ * This is only for theming of the main menu in manager
+ */
+const themedPalette = {
+    MAIN_MENU_BACKGROUND: { DEFAULT: tailwindPalette.neutral["800"] },
+    MAIN_MENU_NAV_ITEM_BACKGROUND: {
+        DEFAULT: tailwindPalette.neutral["800"],
+        hover: tailwindPalette.neutral["700"],
+        active: tailwindPalette.neutral["700"],
+    },
+    MAIN_MENU_NAV_ITEM_FOREGROUND: {
+        DEFAULT: tailwindPalette.neutral["300"],
+        hover: generalPalette.WHITE.DEFAULT,
+        active: generalPalette.WHITE.DEFAULT,
+    },
+};
 /**
  * The Utilization color palette
  * Should be available in any component that could be used to display the Activity state of an asset
@@ -501,11 +518,13 @@ const groupedPalettes = {
     RENTAL: rentalStatusPalette,
     // Sites
     SITES: sitesPalette,
+    // Themed
+    THEMED: themedPalette,
 };
 /**
  * The full theme color palette (flattened)
  */
-const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), utilizationPalette), rentalStatusPalette), customerTypePalette), sitesPalette);
+const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), utilizationPalette), rentalStatusPalette), customerTypePalette), sitesPalette), themedPalette);
 
 /**
  * A collection of all the tokens related to the named colors in the default theme.
@@ -553,6 +572,15 @@ const themeColors = {
     RENTAL: { name: "rental", variants: trackunitPalette.RENTAL },
     SERVICE: { name: "service", variants: trackunitPalette.SERVICE },
     OTHER_CUSTOMER_TYPE: { name: "other_customer_type", variants: trackunitPalette.OTHER_CUSTOMER_TYPE },
+    MAIN_MENU_BACKGROUND: { name: "main_menu_background", variants: trackunitPalette.MAIN_MENU_BACKGROUND },
+    MAIN_MENU_NAV_ITEM_BACKGROUND: {
+        name: "main_menu_nav_item_background",
+        variants: trackunitPalette.MAIN_MENU_NAV_ITEM_BACKGROUND,
+    },
+    MAIN_MENU_NAV_ITEM_FOREGROUND: {
+        name: "main_menu_nav_item_foreground",
+        variants: trackunitPalette.MAIN_MENU_NAV_ITEM_FOREGROUND,
+    },
 };
 
 const outputOptions = ["HEX", "CSS"];
@@ -801,6 +829,7 @@ exports.themeLineHeight = themeLineHeight;
 exports.themeScreenSize = themeScreenSize;
 exports.themeSpacing = themeSpacing;
 exports.themeZIndex = themeZIndex;
+exports.themedPalette = themedPalette;
 exports.trackunitPalette = trackunitPalette;
 exports.utilizationPalette = utilizationPalette;
 exports.zIndex = zIndex;

package/index.esm.js

@@ -427,6 +427,23 @@ const activityPalette = {
     MOVING: { DEFAULT: "230 144 177" },
     ACTIVE: { DEFAULT: "63 219 147" },
 };
+/**
+ * The Themed color palette
+ * This is only for theming of the main menu in manager
+ */
+const themedPalette = {
+    MAIN_MENU_BACKGROUND: { DEFAULT: tailwindPalette.neutral["800"] },
+    MAIN_MENU_NAV_ITEM_BACKGROUND: {
+        DEFAULT: tailwindPalette.neutral["800"],
+        hover: tailwindPalette.neutral["700"],
+        active: tailwindPalette.neutral["700"],
+    },
+    MAIN_MENU_NAV_ITEM_FOREGROUND: {
+        DEFAULT: tailwindPalette.neutral["300"],
+        hover: generalPalette.WHITE.DEFAULT,
+        active: generalPalette.WHITE.DEFAULT,
+    },
+};
 /**
  * The Utilization color palette
  * Should be available in any component that could be used to display the Activity state of an asset
@@ -497,11 +514,13 @@ const groupedPalettes = {
     RENTAL: rentalStatusPalette,
     // Sites
     SITES: sitesPalette,
+    // Themed
+    THEMED: themedPalette,
 };
 /**
  * The full theme color palette (flattened)
  */
-const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), utilizationPalette), rentalStatusPalette), customerTypePalette), sitesPalette);
+const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), utilizationPalette), rentalStatusPalette), customerTypePalette), sitesPalette), themedPalette);
 
 /**
  * A collection of all the tokens related to the named colors in the default theme.
@@ -549,6 +568,15 @@ const themeColors = {
     RENTAL: { name: "rental", variants: trackunitPalette.RENTAL },
     SERVICE: { name: "service", variants: trackunitPalette.SERVICE },
     OTHER_CUSTOMER_TYPE: { name: "other_customer_type", variants: trackunitPalette.OTHER_CUSTOMER_TYPE },
+    MAIN_MENU_BACKGROUND: { name: "main_menu_background", variants: trackunitPalette.MAIN_MENU_BACKGROUND },
+    MAIN_MENU_NAV_ITEM_BACKGROUND: {
+        name: "main_menu_nav_item_background",
+        variants: trackunitPalette.MAIN_MENU_NAV_ITEM_BACKGROUND,
+    },
+    MAIN_MENU_NAV_ITEM_FOREGROUND: {
+        name: "main_menu_nav_item_foreground",
+        variants: trackunitPalette.MAIN_MENU_NAV_ITEM_FOREGROUND,
+    },
 };
 
 const outputOptions = ["HEX", "CSS"];
@@ -771,4 +799,4 @@ const zIndex = {
     toast: themeZIndex.toast,
 };
 
-export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, customerTypePalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeSpacing, themeZIndex, trackunitPalette, utilizationPalette, zIndex };
+export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, customerTypePalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeSpacing, themeZIndex, themedPalette, trackunitPalette, utilizationPalette, zIndex };

package/package.json

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

package/src/tokens/colors/trackunitPalette.d.ts

@@ -238,6 +238,31 @@ export declare const activityPalette: {
  */
 export type ActivityColorKeys = keyof typeof activityPalette;
 export type ActivityColors = `${Lowercase<ActivityColorKeys>}`;
+/**
+ * The Themed color palette
+ * This is only for theming of the main menu in manager
+ */
+export declare const themedPalette: {
+    readonly MAIN_MENU_BACKGROUND: {
+        readonly DEFAULT: "38 38 38";
+    };
+    readonly MAIN_MENU_NAV_ITEM_BACKGROUND: {
+        readonly DEFAULT: "38 38 38";
+        readonly hover: "64 64 64";
+        readonly active: "64 64 64";
+    };
+    readonly MAIN_MENU_NAV_ITEM_FOREGROUND: {
+        readonly DEFAULT: "212 212 212";
+        readonly hover: "255 255 255";
+        readonly active: "255 255 255";
+    };
+};
+/**
+ * The Themed color palette
+ * This is only for theming of the main menu in manager
+ */
+export type ThemedPaletteKeys = keyof typeof activityPalette;
+export type ThemedPalette = `${Lowercase<ThemedPaletteKeys>}`;
 /**
  * The Utilization color palette
  * Should be available in any component that could be used to display the Activity state of an asset
@@ -683,11 +708,39 @@ export declare const groupedPalettes: {
             readonly UNKNOWN: "115 115 115";
         };
     };
+    readonly THEMED: {
+        readonly MAIN_MENU_BACKGROUND: {
+            readonly DEFAULT: "38 38 38";
+        };
+        readonly MAIN_MENU_NAV_ITEM_BACKGROUND: {
+            readonly DEFAULT: "38 38 38";
+            readonly hover: "64 64 64";
+            readonly active: "64 64 64";
+        };
+        readonly MAIN_MENU_NAV_ITEM_FOREGROUND: {
+            readonly DEFAULT: "212 212 212";
+            readonly hover: "255 255 255";
+            readonly active: "255 255 255";
+        };
+    };
 };
 /**
  * The full theme color palette (flattened)
  */
 export declare const trackunitPalette: {
+    readonly MAIN_MENU_BACKGROUND: {
+        readonly DEFAULT: "38 38 38";
+    };
+    readonly MAIN_MENU_NAV_ITEM_BACKGROUND: {
+        readonly DEFAULT: "38 38 38";
+        readonly hover: "64 64 64";
+        readonly active: "64 64 64";
+    };
+    readonly MAIN_MENU_NAV_ITEM_FOREGROUND: {
+        readonly DEFAULT: "212 212 212";
+        readonly hover: "255 255 255";
+        readonly active: "255 255 255";
+    };
     readonly SITE: {
         readonly AREA: "37 99 235";
         readonly CLASSIC_POI: "115 115 115";