@trackunit/css-tailwind 0.0.69 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-tailwind",
-  "version": "0.0.69",
+  "version": "0.0.72",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -10,10 +10,10 @@
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@trackunit/css-component-tokens": "0.0.30",
-    "@trackunit/css-core": "0.0.86",
-    "@trackunit/css-tailwind-custom-properties-plugin": "0.0.22",
-    "@trackunit/ui-design-tokens": "0.0.70"
+    "@trackunit/css-component-tokens": "0.0.31",
+    "@trackunit/css-core": "0.0.88",
+    "@trackunit/css-tailwind-custom-properties-plugin": "0.0.23",
+    "@trackunit/ui-design-tokens": "0.0.72"
   },
   "peerDependencies": {}
 }

package/src/lib/animations.d.ts

@@ -1,6 +1,6 @@
-import { Config } from "tailwindcss";
-/**
- * A Partial tailwind config object to hold our custom animations.
- * If you want a custom animation that should be available in the Manager as well as Iris Apps add it here.
- */
-export declare const animations: Config["theme"];
+import { Config } from "tailwindcss";
+/**
+ * A Partial tailwind config object to hold our custom animations.
+ * If you want a custom animation that should be available in the Manager as well as Iris Apps add it here.
+ */
+export declare const animations: Config["theme"];

package/src/lib/containers.d.ts

@@ -1,6 +1,6 @@
-import { Config } from "tailwindcss";
-/**
- * A Partial tailwind config object to hold our custom containers.
- * If you want a custom extension of containers that should be available in the Manager as well as Iris Apps add it here.
- */
-export declare const containers: Config["theme"];
+import { Config } from "tailwindcss";
+/**
+ * A Partial tailwind config object to hold our custom containers.
+ * If you want a custom extension of containers that should be available in the Manager as well as Iris Apps add it here.
+ */
+export declare const containers: Config["theme"];

package/src/lib/grids.d.ts

@@ -1,6 +1,6 @@
-import { Config } from "tailwindcss";
-/**
- * A Partial tailwind config object to hold our custom grids.
- * If you want a custom grid that should be available in the Manager as well as Iris Apps add it here.
- */
-export declare const grids: Config["theme"];
+import { Config } from "tailwindcss";
+/**
+ * A Partial tailwind config object to hold our custom grids.
+ * If you want a custom grid that should be available in the Manager as well as Iris Apps add it here.
+ */
+export declare const grids: Config["theme"];

package/src/lib/plugin/layouts.d.ts

@@ -1,4 +1,4 @@
-export declare const LayoutsPlugin: {
-    handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss").Config> | undefined;
-};
+export declare const LayoutsPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};

package/src/lib/tailwind-base.d.ts

@@ -1,3 +1,3 @@
-import { Config } from "tailwindcss";
-declare const tailwindBaseConfig: Config;
-export default tailwindBaseConfig;
+import { Config } from "tailwindcss";
+declare const tailwindBaseConfig: Config;
+export default tailwindBaseConfig;

package/src/lib/utilities/designTokensToTailwindConfig.d.ts

@@ -1,73 +1,73 @@
-import { fontSizeKeys, themeFontSize } from "@trackunit/ui-design-tokens";
-/**
- * Generates the Tailwind config object for a given Design token object.
- *
- * @example
- * Input: {
- *   "1": "0.25rem",
- *    "2": "0.5rem",
- *  }
- *
- * Output: {
- *  "1": "var(--spacing-1)",
- *  "2": "var(--spacing-2)"
- * }
- */
-export declare const designTokensToTailwindConfig: (name: string, designTokens: object) => {
-    [key: string]: string;
-};
-/**
- * Converts a string to a css variable.
- *
- * @example valueInVar("--my-var-name") // var(--my-var-name)
- */
-export declare const valueInVar: <T extends string>(value: T) => `var(${T})`;
-/**
- * If passed value includes "rem" the returned value will include the px value
- */
-export declare const remToPx: (value: string, fontSize?: number) => string;
-/**
- * Uses the fontSize object to generate a Tailwind font configuration.
- * **ATT: This relies on a set of line-height css variables matching the Font size keys**
- */
-export declare const designTokensToFontSizeTailwindConfig: (fontSizes: typeof themeFontSize) => {
-    xs: [string, {
-        lineHeight: string;
-    }];
-    sm: [string, {
-        lineHeight: string;
-    }];
-    base: [string, {
-        lineHeight: string;
-    }];
-    lg: [string, {
-        lineHeight: string;
-    }];
-    xl: [string, {
-        lineHeight: string;
-    }];
-    "2xl": [string, {
-        lineHeight: string;
-    }];
-    "3xl": [string, {
-        lineHeight: string;
-    }];
-    "4xl": [string, {
-        lineHeight: string;
-    }];
-    "5xl": [string, {
-        lineHeight: string;
-    }];
-    "6xl": [string, {
-        lineHeight: string;
-    }];
-    "7xl": [string, {
-        lineHeight: string;
-    }];
-    "8xl": [string, {
-        lineHeight: string;
-    }];
-    "9xl": [string, {
-        lineHeight: string;
-    }];
-};
+import { fontSizeKeys, themeFontSize } from "@trackunit/ui-design-tokens";
+/**
+ * Generates the Tailwind config object for a given Design token object.
+ *
+ * @example
+ * Input: {
+ *   "1": "0.25rem",
+ *    "2": "0.5rem",
+ *  }
+ *
+ * Output: {
+ *  "1": "var(--spacing-1)",
+ *  "2": "var(--spacing-2)"
+ * }
+ */
+export declare const designTokensToTailwindConfig: (name: string, designTokens: object) => {
+    [key: string]: string;
+};
+/**
+ * Converts a string to a css variable.
+ *
+ * @example valueInVar("--my-var-name") // var(--my-var-name)
+ */
+export declare const valueInVar: <T extends string>(value: T) => `var(${T})`;
+/**
+ * If passed value includes "rem" the returned value will include the px value
+ */
+export declare const remToPx: (value: string, fontSize?: number) => string;
+/**
+ * Uses the fontSize object to generate a Tailwind font configuration.
+ * **ATT: This relies on a set of line-height css variables matching the Font size keys**
+ */
+export declare const designTokensToFontSizeTailwindConfig: (fontSizes: typeof themeFontSize) => {
+    xs: [string, {
+        lineHeight: string;
+    }];
+    sm: [string, {
+        lineHeight: string;
+    }];
+    base: [string, {
+        lineHeight: string;
+    }];
+    lg: [string, {
+        lineHeight: string;
+    }];
+    xl: [string, {
+        lineHeight: string;
+    }];
+    "2xl": [string, {
+        lineHeight: string;
+    }];
+    "3xl": [string, {
+        lineHeight: string;
+    }];
+    "4xl": [string, {
+        lineHeight: string;
+    }];
+    "5xl": [string, {
+        lineHeight: string;
+    }];
+    "6xl": [string, {
+        lineHeight: string;
+    }];
+    "7xl": [string, {
+        lineHeight: string;
+    }];
+    "8xl": [string, {
+        lineHeight: string;
+    }];
+    "9xl": [string, {
+        lineHeight: string;
+    }];
+};

package/src/lib/utilities/themeColorsToVariableObjectDefinition.d.ts

@@ -1,231 +1,231 @@
-import { ThemeColorsObject } from "@trackunit/ui-design-tokens";
-/**
- * Converts the theme colors object to a variable object definition.
- * This is used to generate the css custom properties for the theme colors.
- *
- * Remember to place it in the `variables` and `color` section of the tailwind config.
- *
- * @example ```js
- * variables: {
- *  DEFAULT: {
- *      color: {
- *          ...themeColorsToVariableObjectDefinition(themeColors),
- *        },
- *     },
- * }
- * ```
- */
-export declare function themeColorsToVariableObjectDefinition(themeColors: ThemeColorsObject): {
-    [k: string]: {
-        readonly AREA: string;
-        readonly CLASSIC_POI: string;
-        readonly CLASSIC_ZONE: string;
-        readonly DEPOT: string;
-        readonly WORK_PLACE: string;
-        readonly CONSTRUCTION_SITE: string;
-        readonly UNKNOWN: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 100: string;
-        readonly 600: string;
-    } | {
-        readonly 300: string;
-        readonly 400: string;
-    } | {
-        readonly 400: string;
-        readonly 600: string;
-    } | {
-        readonly 300: string;
-        readonly 500: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly DEFAULT: string;
-    } | {
-        readonly DEFAULT: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly 50: string;
-        readonly 100: string;
-        readonly 200: string;
-        readonly 300: string;
-        readonly 400: string;
-        readonly 500: string;
-        readonly 600: string;
-        readonly 700: string;
-        readonly 800: string;
-        readonly 900: string;
-    } | {
-        readonly DEFAULT: string;
-    } | {
-        readonly DEFAULT: string;
-    };
-};
+import { ThemeColorsObject } from "@trackunit/ui-design-tokens";
+/**
+ * Converts the theme colors object to a variable object definition.
+ * This is used to generate the css custom properties for the theme colors.
+ *
+ * Remember to place it in the `variables` and `color` section of the tailwind config.
+ *
+ * @example ```js
+ * variables: {
+ *  DEFAULT: {
+ *      color: {
+ *          ...themeColorsToVariableObjectDefinition(themeColors),
+ *        },
+ *     },
+ * }
+ * ```
+ */
+export declare function themeColorsToVariableObjectDefinition(themeColors: ThemeColorsObject): {
+    [k: string]: {
+        readonly AREA: string;
+        readonly CLASSIC_POI: string;
+        readonly CLASSIC_ZONE: string;
+        readonly DEPOT: string;
+        readonly WORK_PLACE: string;
+        readonly CONSTRUCTION_SITE: string;
+        readonly UNKNOWN: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 100: string;
+        readonly 600: string;
+    } | {
+        readonly 300: string;
+        readonly 400: string;
+    } | {
+        readonly 400: string;
+        readonly 600: string;
+    } | {
+        readonly 300: string;
+        readonly 500: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly DEFAULT: string;
+    } | {
+        readonly DEFAULT: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly 50: string;
+        readonly 100: string;
+        readonly 200: string;
+        readonly 300: string;
+        readonly 400: string;
+        readonly 500: string;
+        readonly 600: string;
+        readonly 700: string;
+        readonly 800: string;
+        readonly 900: string;
+    } | {
+        readonly DEFAULT: string;
+    } | {
+        readonly DEFAULT: string;
+    };
+};

package/src/lib/utilities/utilities.d.ts

@@ -1,44 +1,44 @@
-import "@trackunit/css-core";
-/**
- * Gets the value of a color from the css custom properties TailwindCSS theme.
- * Looks in `theme.css` and `tailwind-custom-properties.css`.
- *
- * @param {string} customProperty The property name
- * @returns {string} The value of the color "RRR GGG BBB" or "unknown value" if the color is not found.
- */
-export declare function getColorValueFromCSSVariable(customProperty: string): string;
-/**
- * A function to handle the tailwind opacity value for custom colors.
- * Source: https://tailwindcss.com/docs/customizing-colors#using-css-variables
- *
- * @param {string} variable - The name of the css custom property.
- * @returns {string} RGB color value and a comment with the actual value for the TailwindCSS Extension.
- */
-export declare function withOpacityValue(variable: string): ({ opacityValue }: {
-    opacityValue?: string | undefined;
-}) => string;
-/**
- * Returns an object with the color values for the TailwindCSS configuration.
- *
- * @param {string} colorName the name of the color
- * @param {string} keys Default: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
- * @returns {*} An object with each of the keys and the corresponding color css custom property.
- */
-export declare function fullColorSchemeFromColorName(colorName: string, keys?: string[]): {};
-/**
- * Get the value of a custom property from a css file.
- *
- * @param customProperty - The name of the css custom property.
- * @param file A string representing the file contents of the css file.
- * @returns {string} A string representing the value of the css custom property or "unknown value" if the custom property is not found.
- */
-export declare function getValueOfCSSCustomProperty(customProperty: string, file: string): string;
-/**
- * Returns the css custom property with a comment containing the actual value of the custom property.
- *
- * @param {string} customProperty - The name of the css custom property.
- * @param {string} [append=""] - A string to append to the comment.
- * @param {*} [file=tailwindTheme] Default: tailwind-custom-properties.css
- * @returns {string} A string representing the css custom property with a comment containing the actual value of the custom property.
- */
-export declare function withCustomPropertyValueAsComment(customProperty: string, append?: string, file?: string): string;
+import "@trackunit/css-core";
+/**
+ * Gets the value of a color from the css custom properties TailwindCSS theme.
+ * Looks in `theme.css` and `tailwind-custom-properties.css`.
+ *
+ * @param {string} customProperty The property name
+ * @returns {string} The value of the color "RRR GGG BBB" or "unknown value" if the color is not found.
+ */
+export declare function getColorValueFromCSSVariable(customProperty: string): string;
+/**
+ * A function to handle the tailwind opacity value for custom colors.
+ * Source: https://tailwindcss.com/docs/customizing-colors#using-css-variables
+ *
+ * @param {string} variable - The name of the css custom property.
+ * @returns {string} RGB color value and a comment with the actual value for the TailwindCSS Extension.
+ */
+export declare function withOpacityValue(variable: string): ({ opacityValue }: {
+    opacityValue?: string | undefined;
+}) => string;
+/**
+ * Returns an object with the color values for the TailwindCSS configuration.
+ *
+ * @param {string} colorName the name of the color
+ * @param {string} keys Default: ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
+ * @returns {*} An object with each of the keys and the corresponding color css custom property.
+ */
+export declare function fullColorSchemeFromColorName(colorName: string, keys?: string[]): Record<string, Function>;
+/**
+ * Get the value of a custom property from a css file.
+ *
+ * @param customProperty - The name of the css custom property.
+ * @param file A string representing the file contents of the css file.
+ * @returns {string} A string representing the value of the css custom property or "unknown value" if the custom property is not found.
+ */
+export declare function getValueOfCSSCustomProperty(customProperty: string, file: string): string;
+/**
+ * Returns the css custom property with a comment containing the actual value of the custom property.
+ *
+ * @param {string} customProperty - The name of the css custom property.
+ * @param {string} [append=""] - A string to append to the comment.
+ * @param {*} [file=tailwindTheme] Default: tailwind-custom-properties.css
+ * @returns {string} A string representing the css custom property with a comment containing the actual value of the custom property.
+ */
+export declare function withCustomPropertyValueAsComment(customProperty: string, append?: string, file?: string): string;

package/tailwind-base.generated.js

@@ -926,9 +926,17 @@ var animations = {
     "slide-in-bottom": "slideInBottom 0.2s ease-in-out forwards",
     "ping-sm": "pingSm 1s cubic-bezier(0, 0, 0.2, 1) infinite",
     "bg-scroll-br": "bgScrollBR 10s ease infinite",
+    "modal-fade": "modalFade 0.3s ease-in-out 1 forwards",
     "fade-in-rising": "fadeInRising 0.2s ease-in"
   },
   keyframes: {
+    modalFade: {
+      from: {
+        opacity: "0",
+        visibility: "hidden"
+      },
+      to: { opacity: "1", visibility: "visible" }
+    },
     copy: {
       from: {
         color: "green",