@trackunit/ui-design-tokens 0.0.53 → 0.0.55

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.53",
+  "version": "0.0.55",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",

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

@@ -1,7 +1,7 @@
 import { ColorVariants } from "./colors";
 import { ThemeColorKeys } from "./trackunitPalette";
 declare const outputOptions: readonly ["HEX", "CSS"];
-declare type OutputOptions = typeof outputOptions[number];
+type OutputOptions = typeof outputOptions[number];
 /**
  * Typesafe function to get css variable or hex value of our colors.
  *

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

@@ -3,7 +3,7 @@
  */
 import { ThemeColorKeys, trackunitPalette } from "./trackunitPalette";
 /** Type used for available variants for a given ColorName */
-export declare type ColorVariants<ColorName extends ThemeColorKeys> = keyof typeof themeColors[ColorName]["variants"];
+export type ColorVariants<ColorName extends ThemeColorKeys> = keyof typeof themeColors[ColorName]["variants"];
 export interface ThemeColorObject<T extends ThemeColorKeys> {
     name: Lowercase<T>;
     variants: {
@@ -11,7 +11,7 @@ export interface ThemeColorObject<T extends ThemeColorKeys> {
     };
     defaultVariant?: keyof typeof trackunitPalette[T];
 }
-export declare type ThemeColorsObject = {
+export type ThemeColorsObject = {
     [key in ThemeColorKeys]: ThemeColorObject<key>;
 };
 /**

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

@@ -62,8 +62,8 @@ export declare const generalPalette: {
  * The general color palette
  * Should be available in most if not all colored components
  */
-export declare type GeneralColorKeys = keyof typeof generalPalette;
-export declare type GeneralColors = `${Lowercase<GeneralColorKeys>}`;
+export type GeneralColorKeys = keyof typeof generalPalette;
+export type GeneralColors = `${Lowercase<GeneralColorKeys>}`;
 /**
  * The intent color palette
  * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
@@ -122,8 +122,8 @@ export declare const intentPalette: {
  * The intent color palette
  * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
  */
-export declare type IntentColorKeys = keyof typeof intentPalette;
-export declare type IntentColors = `${Lowercase<IntentColorKeys>}`;
+export type IntentColorKeys = keyof typeof intentPalette;
+export type IntentColors = `${Lowercase<IntentColorKeys>}`;
 /**
  * The Criticality color palette
  * Should be available in any component that could be used to display the criticality of an asset or event
@@ -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: {
@@ -173,8 +170,8 @@ export declare const criticalityPalette: {
  * The Criticality color palette
  * Should be available in any component that could be used to display the criticality of an asset or event
  */
-export declare type CriticalityColorKeys = keyof typeof criticalityPalette;
-export declare type CriticalityColors = `${Lowercase<CriticalityColorKeys>}`;
+export type CriticalityColorKeys = keyof typeof criticalityPalette;
+export type CriticalityColors = `${Lowercase<CriticalityColorKeys>}`;
 /**
  * The Activity color palette
  * Should be available in any component that could be used to display the Activity state of an asset
@@ -239,8 +236,32 @@ export declare const activityPalette: {
  * The Activity color palette
  * Should be available in any component that could be used to display the Activity state of an asset
  */
-export declare type ActivityColorKeys = keyof typeof activityPalette;
-export declare type ActivityColors = `${Lowercase<ActivityColorKeys>}`;
+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
@@ -279,8 +300,8 @@ export declare const rentalStatusPalette: {
  * The Rental status color palette
  * Should be available in any component that could be used to display the rental status of an asset
  */
-export declare type RentalStatusColorKeys = keyof typeof rentalStatusPalette;
-export declare type RentalStatusColors = `${Lowercase<RentalStatusColorKeys>}`;
+export type RentalStatusColorKeys = keyof typeof rentalStatusPalette;
+export type RentalStatusColors = `${Lowercase<RentalStatusColorKeys>}`;
 /**
  * Grouped Theme Colors
  */
@@ -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: {
@@ -750,5 +791,5 @@ export declare const trackunitPalette: {
 /**
  * The full theme color palette (flattened)
  */
-export declare type ThemeColorKeys = keyof typeof trackunitPalette;
-export declare type ThemeColors = `${Lowercase<ThemeColorKeys>}`;
+export type ThemeColorKeys = keyof typeof trackunitPalette;
+export type ThemeColors = `${Lowercase<ThemeColorKeys>}`;

package/src/tokens/elevation.d.ts

@@ -10,4 +10,4 @@ export declare const elevation: {
     readonly E30: "var(--box-shadow-xl)";
     readonly E40: "var(--box-shadow-2xl)";
 };
-export declare type Elevation = typeof elevation;
+export type Elevation = typeof elevation;

package/src/tokens/size.d.ts

@@ -16,4 +16,4 @@ export declare const size: {
     /** --spacing-10: 2.5rem; */
     readonly enormous: "var(--spacing-10)";
 };
-export declare type Size = typeof size;
+export type Size = typeof size;

package/src/tokens/typography.d.ts

@@ -9,7 +9,7 @@ export declare const fontSize: {
     readonly body: "var(--font-size-sm)";
     readonly small: "var(--font-size-xs)";
 };
-export declare type FontSize = typeof fontSize;
+export type FontSize = typeof fontSize;
 /**
  * Primary font weights.
  */
@@ -17,4 +17,4 @@ export declare const fontWeight: {
     readonly normal: 400;
     readonly bold: 600;
 };
-export declare type FontWeight = typeof fontWeight;
+export type FontWeight = typeof fontWeight;

package/src/tokens/zIndex.d.ts

@@ -6,4 +6,4 @@ export declare const zIndex: {
     readonly popover: 20;
     readonly toast: 100;
 };
-export declare type ZIndex = typeof zIndex;
+export type ZIndex = typeof zIndex;