@trackunit/react-components 1.7.13 → 1.7.15

package/index.cjs.js

@@ -69,6 +69,7 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
             transfer: "text-transfer-300",
             in_repair: "text-in_repair-400",
             other_rental_status: "text-other_rental_status-500",
+            primary_contrasted: "text-primary_contrasted",
         },
         size: {
             small: "w-4",
@@ -121,6 +122,7 @@ const iconPalette = {
     ...uiDesignTokens.utilizationPalette,
     ...uiDesignTokens.sitesPalette,
     ...uiDesignTokens.rentalStatusPalette,
+    ...uiDesignTokens.contrastedPalette,
 };
 const iconColorNames = sharedUtils.objectKeys(iconPalette).map(key => stringTs.snakeCase(key));
 const isSafari = () => {
@@ -484,7 +486,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
     variants: {
         variant: {
             primary: [
-                "text-white",
+                "text-primary_contrasted",
                 "bg-primary-600",
                 "hover:bg-primary-700",
                 "active:bg-primary-800",
@@ -561,13 +563,11 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             filled: [
                 "group",
                 "bg-primary-100",
-                "text-primary-600",
+                "text-primary_contrasted",
                 "hover:bg-primary-200",
                 "hover:text-primary-700",
                 "active:bg-primary-200",
-                "active:text-primary-700",
                 "focus:bg-primary-100",
-                "focus:text-primary-600",
                 "disabled:bg-transparent",
                 "disabled:text-secondary-300",
             ],
@@ -614,7 +614,13 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         disabled: {
-            true: ["cursor-not-allowed", "pointer-events-none", "bg-secondary-200", "hover:bg-secondary-200", "text-secondary-400"],
+            true: [
+                "cursor-not-allowed",
+                "pointer-events-none",
+                "bg-secondary-200",
+                "hover:bg-secondary-200",
+                "text-secondary-400",
+            ],
             false: [],
         },
         loading: {

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues } from '@trackunit/shared-utils';
-import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
+import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, contrastedPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
@@ -67,6 +67,7 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
             transfer: "text-transfer-300",
             in_repair: "text-in_repair-400",
             other_rental_status: "text-other_rental_status-500",
+            primary_contrasted: "text-primary_contrasted",
         },
         size: {
             small: "w-4",
@@ -119,6 +120,7 @@ const iconPalette = {
     ...utilizationPalette,
     ...sitesPalette,
     ...rentalStatusPalette,
+    ...contrastedPalette,
 };
 const iconColorNames = objectKeys(iconPalette).map(key => snakeCase(key));
 const isSafari = () => {
@@ -482,7 +484,7 @@ const cvaButton = cvaMerge([
     variants: {
         variant: {
             primary: [
-                "text-white",
+                "text-primary_contrasted",
                 "bg-primary-600",
                 "hover:bg-primary-700",
                 "active:bg-primary-800",
@@ -559,13 +561,11 @@ const cvaButton = cvaMerge([
             filled: [
                 "group",
                 "bg-primary-100",
-                "text-primary-600",
+                "text-primary_contrasted",
                 "hover:bg-primary-200",
                 "hover:text-primary-700",
                 "active:bg-primary-200",
-                "active:text-primary-700",
                 "focus:bg-primary-100",
-                "focus:text-primary-600",
                 "disabled:bg-transparent",
                 "disabled:text-secondary-300",
             ],
@@ -612,7 +612,13 @@ const cvaButton = cvaMerge([
             false: "",
         },
         disabled: {
-            true: ["cursor-not-allowed", "pointer-events-none", "bg-secondary-200", "hover:bg-secondary-200", "text-secondary-400"],
+            true: [
+                "cursor-not-allowed",
+                "pointer-events-none",
+                "bg-secondary-200",
+                "hover:bg-secondary-200",
+                "text-secondary-400",
+            ],
             false: [],
         },
         loading: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.11",
-    "@trackunit/css-class-variance-utilities": "1.6.11",
-    "@trackunit/shared-utils": "1.8.11",
-    "@trackunit/ui-icons": "1.6.10",
-    "@trackunit/react-table-pagination": "1.6.10",
-    "@trackunit/react-test-setup": "1.3.11",
+    "@trackunit/ui-design-tokens": "1.6.13",
+    "@trackunit/css-class-variance-utilities": "1.6.12",
+    "@trackunit/shared-utils": "1.8.12",
+    "@trackunit/ui-icons": "1.6.11",
+    "@trackunit/react-table-pagination": "1.6.11",
+    "@trackunit/react-test-setup": "1.3.12",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

package/src/components/Icon/Icon.d.ts

@@ -1,10 +1,13 @@
-import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
+import { ActivityColors, ContrastedPaletteColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
 import { CSSProperties } from "react";
 import { CommonProps, Size } from "../../common";
 import { AriaProps } from "../../common/AriaProps";
-export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
+export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors | ContrastedPaletteColors;
 export declare const iconPalette: {
+    PRIMARY_CONTRASTED: {
+        DEFAULT: string;
+    };
     ON_RENT: {
         readonly 100: "219 234 254";
         readonly 400: "96 165 250";
@@ -251,7 +254,7 @@ export declare const iconPalette: {
         readonly 900: "127 29 29";
     };
 };
-export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "excessive_usage" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
+export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "excessive_usage" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | "primary_contrasted")[];
 type IconPropsSmall = {
     size?: "small";
     type?: "solid";

package/src/components/Icon/Icon.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const cvaIcon: (props?: ({
-    color?: "default" | "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | "primary_contrasted" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     fontSize?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;