@trackunit/ui-design-tokens 0.0.54 → 0.0.56

package/index.js

@@ -404,6 +404,15 @@ const activityPalette = {
     MOVING: { DEFAULT: "230 144 177" },
     ACTIVE: { DEFAULT: "63 219 147" },
 };
+/**
+ * The Utilization color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+const utilizationPalette = {
+    UNUSED: { 300: tailwindPalette.red["300"], 400: tailwindPalette.red["400"] },
+    UTILIZED: { 400: tailwindPalette.blue["400"], 600: tailwindPalette.blue["600"] },
+    HEAVILY_UTILIZED: { 300: tailwindPalette.amber["300"], 500: tailwindPalette.amber["500"] },
+};
 /**
  * The Rental status color palette
  * Should be available in any component that could be used to display the rental status of an asset
@@ -429,13 +438,15 @@ const groupedPalettes = {
     CRITICALITY: criticalityPalette,
     // Activity
     ACTIVITY: activityPalette,
+    // Utilization
+    UTILIZATION: utilizationPalette,
     // 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);
+const trackunitPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalPalette), intentPalette), criticalityPalette), activityPalette), utilizationPalette), rentalStatusPalette);
 
 /**
  * A collection of all the tokens related to the named colors in the default theme.
@@ -465,6 +476,9 @@ const themeColors = {
     MOVING: { name: "moving", variants: trackunitPalette.MOVING, defaultVariant: "DEFAULT" },
     UNKNOWN: { name: "unknown", variants: trackunitPalette.UNKNOWN },
     AVAILABLE: { name: "available", variants: trackunitPalette.AVAILABLE },
+    UNUSED: { name: "unused", variants: trackunitPalette.UNUSED },
+    UTILIZED: { name: "utilized", variants: trackunitPalette.UTILIZED },
+    HEAVILY_UTILIZED: { name: "heavily_utilized", variants: trackunitPalette.HEAVILY_UTILIZED },
     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 },
@@ -573,4 +587,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, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, tailwindPalette, themeColors, tokens, trackunitPalette };
+export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, tailwindPalette, themeColors, tokens, trackunitPalette, utilizationPalette };

package/package.json

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

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

@@ -138,10 +138,7 @@ export declare const criticalityPalette: {
         readonly 500: "16 185 129";
         readonly 600: "5 150 105";
         readonly 700: "4 120 87";
-        readonly 800: "6 95 70"; /**
-         * The Rental status color palette
-         * Should be available in any component that could be used to display the rental status of an asset
-         */
+        readonly 800: "6 95 70";
         readonly 900: "6 78 59";
     };
     readonly LOW: {
@@ -241,6 +238,30 @@ export declare const activityPalette: {
  */
 export type ActivityColorKeys = keyof typeof activityPalette;
 export type ActivityColors = `${Lowercase<ActivityColorKeys>}`;
+/**
+ * The Utilization color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+export declare const utilizationPalette: {
+    readonly UNUSED: {
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+    };
+    readonly UTILIZED: {
+        readonly 400: "96 165 250";
+        readonly 600: "37 99 235";
+    };
+    readonly HEAVILY_UTILIZED: {
+        readonly 300: "252 211 77";
+        readonly 500: "245 158 11";
+    };
+};
+/**
+ * The Utilization color palette
+ * Should be available in any component that could be used to display the Activity state of an asset
+ */
+export type UtilizationColorKeys = keyof typeof utilizationPalette;
+export type UtilizationColors = `${Lowercase<UtilizationColorKeys>}`;
 /**
  * The Rental status color palette
  * Should be available in any component that could be used to display the rental status of an asset
@@ -401,10 +422,7 @@ export declare const groupedPalettes: {
             readonly 500: "16 185 129";
             readonly 600: "5 150 105";
             readonly 700: "4 120 87";
-            readonly 800: "6 95 70"; /**
-             * The Rental status color palette
-             * Should be available in any component that could be used to display the rental status of an asset
-             */
+            readonly 800: "6 95 70";
             readonly 900: "6 78 59";
         };
         readonly LOW: {
@@ -488,6 +506,20 @@ export declare const groupedPalettes: {
             readonly DEFAULT: "63 219 147";
         };
     };
+    readonly UTILIZATION: {
+        readonly UNUSED: {
+            readonly 300: "252 165 165";
+            readonly 400: "248 113 113";
+        };
+        readonly UTILIZED: {
+            readonly 400: "96 165 250";
+            readonly 600: "37 99 235";
+        };
+        readonly HEAVILY_UTILIZED: {
+            readonly 300: "252 211 77";
+            readonly 500: "245 158 11";
+        };
+    };
     readonly RENTAL: {
         readonly ON_RENT: {
             readonly 100: "223 244 254";
@@ -551,6 +583,18 @@ export declare const trackunitPalette: {
         readonly 100: "238 239 239";
         readonly 600: "151 154 154";
     };
+    readonly UNUSED: {
+        readonly 300: "252 165 165";
+        readonly 400: "248 113 113";
+    };
+    readonly UTILIZED: {
+        readonly 400: "96 165 250";
+        readonly 600: "37 99 235";
+    };
+    readonly HEAVILY_UTILIZED: {
+        readonly 300: "252 211 77";
+        readonly 500: "245 158 11";
+    };
     readonly WORKING: {
         readonly 50: "239 246 255";
         readonly 100: "219 234 254";
@@ -614,10 +658,7 @@ export declare const trackunitPalette: {
         readonly 500: "16 185 129";
         readonly 600: "5 150 105";
         readonly 700: "4 120 87";
-        readonly 800: "6 95 70"; /**
-         * The Rental status color palette
-         * Should be available in any component that could be used to display the rental status of an asset
-         */
+        readonly 800: "6 95 70";
         readonly 900: "6 78 59";
     };
     readonly LOW: {

package/src/scripts/generate-css.d.ts

@@ -1 +0,0 @@
-export declare const generateCSS: () => string;