@trackunit/ui-design-tokens 0.0.69 → 0.0.72

package/src/tokens/elevation.d.ts

@@ -1,27 +1,27 @@
-/**
- * A collection of all the tokens related to elevation in the theme.
- */
-export declare const themeBoxShadow: {
-    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
-    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
-    readonly none: "none";
-    readonly active: "0px 0px 1px 1px rgba(26, 27, 28, 0.13), 0px 1px 1px rgba(26, 27, 28, 0.15)";
-};
-/**
- * Elevation is based on N100 with an alpha channel. E(X)A variants
- * are for active versions(e.g. hover).
- */
-export declare const elevation: {
-    readonly E05: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-    readonly E10: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
-    readonly E10A: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
-    readonly E20: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
-    readonly E30: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
-    readonly E40: "0 25px 50px -12px rgb(0 0 0 / 0.25)";
-};
-export type Elevation = typeof elevation;
+/**
+ * A collection of all the tokens related to elevation in the theme.
+ */
+export declare const themeBoxShadow: {
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+    readonly none: "none";
+    readonly active: "0px 0px 1px 1px rgba(26, 27, 28, 0.13), 0px 1px 1px rgba(26, 27, 28, 0.15)";
+};
+/**
+ * Elevation is based on N100 with an alpha channel. E(X)A variants
+ * are for active versions(e.g. hover).
+ */
+export declare const elevation: {
+    readonly E05: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly E10: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly E10A: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly E20: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly E30: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly E40: "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+};
+export type Elevation = typeof elevation;

package/src/tokens/screenSize.d.ts

@@ -1,12 +1,12 @@
-/**
- * A collection of all the tokens related to screen size in the theme.
- */
-export declare const themeScreenSize: {
-    readonly xs: "0px";
-    readonly sm: "480px";
-    readonly md: "768px";
-    readonly lg: "1024px";
-    readonly xl: "1200px";
-    readonly "2xl": "1600px";
-    readonly "3xl": "1900px";
-};
+/**
+ * A collection of all the tokens related to screen size in the theme.
+ */
+export declare const themeScreenSize: {
+    readonly xs: "0px";
+    readonly sm: "480px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1200px";
+    readonly "2xl": "1600px";
+    readonly "3xl": "1900px";
+};

package/src/tokens/size.d.ts

@@ -1,51 +1,51 @@
-/**
- * A collection of all the tokens related to sizes in the theme.
- */
-export declare const themeSpacing: {
-    readonly px: "1px";
-    readonly "0": "0px";
-    readonly "0.5": "0.125rem";
-    readonly "1": "0.25rem";
-    readonly "1.5": "0.375rem";
-    readonly "2": "0.5rem";
-    readonly "2.5": "0.625rem";
-    readonly "3": "0.75rem";
-    readonly "3.5": "0.875rem";
-    readonly "4": "1rem";
-    readonly "5": "1.25rem";
-    readonly "6": "1.5rem";
-    readonly "7": "1.75rem";
-    readonly "8": "2rem";
-    readonly "9": "2.25rem";
-    readonly "10": "2.5rem";
-    readonly "11": "2.75rem";
-    readonly "12": "3rem";
-    readonly "14": "3.5rem";
-    readonly "16": "4rem";
-    readonly "20": "5rem";
-    readonly "24": "6rem";
-    readonly "28": "7rem";
-    readonly "32": "8rem";
-    readonly "36": "9rem";
-    readonly "40": "10rem";
-    readonly "44": "11rem";
-    readonly "48": "12rem";
-    readonly "52": "13rem";
-    readonly "56": "14rem";
-    readonly "60": "15rem";
-    readonly "64": "16rem";
-    readonly "72": "18rem";
-    readonly "80": "20rem";
-    readonly "96": "24rem";
-};
-export declare const size: {
-    readonly none: "0px";
-    readonly tiny: "0.25rem";
-    readonly mini: "0.5rem";
-    readonly small: "0.75rem";
-    readonly medium: "1rem";
-    readonly large: "1.5rem";
-    readonly giant: "2rem";
-    readonly enormous: "2.5rem";
-};
-export type Size = typeof size;
+/**
+ * A collection of all the tokens related to sizes in the theme.
+ */
+export declare const themeSpacing: {
+    readonly px: "1px";
+    readonly "0": "0px";
+    readonly "0.5": "0.125rem";
+    readonly "1": "0.25rem";
+    readonly "1.5": "0.375rem";
+    readonly "2": "0.5rem";
+    readonly "2.5": "0.625rem";
+    readonly "3": "0.75rem";
+    readonly "3.5": "0.875rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+};
+export declare const size: {
+    readonly none: "0px";
+    readonly tiny: "0.25rem";
+    readonly mini: "0.5rem";
+    readonly small: "0.75rem";
+    readonly medium: "1rem";
+    readonly large: "1.5rem";
+    readonly giant: "2rem";
+    readonly enormous: "2.5rem";
+};
+export type Size = typeof size;

package/src/tokens/typography.d.ts

@@ -1,59 +1,60 @@
-/**
- * A collection of all the tokens related to typography in the theme.
- */
-export declare const themeFontSize: {
-    readonly xs: "0.75rem";
-    readonly sm: "0.875rem";
-    readonly base: "1rem";
-    readonly lg: "1.125rem";
-    readonly xl: "1.25rem";
-    readonly "2xl": "1.5rem";
-    readonly "3xl": "1.875rem";
-    readonly "4xl": "2.25rem";
-    readonly "5xl": "3rem";
-    readonly "6xl": "3.75rem";
-    readonly "7xl": "4.5rem";
-    readonly "8xl": "6rem";
-    readonly "9xl": "8rem";
-};
-export type ThemeFontSize = typeof themeFontSize;
-export type fontSizeKeys = keyof typeof themeFontSize;
-export declare const themeLineHeight: {
-    [key in fontSizeKeys]: string;
-};
-export declare const themeFontWeight: {
-    readonly thin: 100;
-    readonly extralight: 200;
-    readonly light: 300;
-    readonly normal: 400;
-    readonly medium: 500;
-    readonly bold: 600;
-    readonly extrabold: 700;
-    readonly black: 800;
-};
-/**
- * Based on a root size of 16px.
- */
-export declare const fontSize: {
-    readonly primary: "1.875rem";
-    readonly secondary: "1.125rem";
-    readonly tertiary: "1rem";
-    readonly subtitle: "1rem";
-    readonly body: "0.875rem";
-    readonly small: "0.75rem";
-};
-export type FontSize = typeof fontSize;
-/**
- * Primary font weights.
- */
-export declare const fontWeight: {
-    readonly thin: 100;
-    readonly extralight: 200;
-    readonly light: 300;
-    readonly normal: 400;
-    readonly medium: 500;
-    readonly bold: 600;
-    readonly extrabold: 700;
-    readonly black: 800;
-};
-export type FontWeight = typeof fontWeight;
+/**
+ * A collection of all the tokens related to typography in the theme.
+ */
+export declare const themeFontSize: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly base: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+    readonly "2xl": "1.5rem";
+    readonly "3xl": "1.875rem";
+    readonly "4xl": "2.25rem";
+    readonly "5xl": "3rem";
+    readonly "6xl": "3.75rem";
+    readonly "7xl": "4.5rem";
+    readonly "8xl": "6rem";
+    readonly "9xl": "8rem";
+};
+export type ThemeFontSize = typeof themeFontSize;
+export type fontSizeKeys = keyof typeof themeFontSize;
+export declare const themeLineHeight: {
+    [key in fontSizeKeys]: string;
+};
+export declare const themeFontWeight: {
+    readonly thin: 100;
+    readonly extralight: 200;
+    readonly light: 300;
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly bold: 600;
+    readonly extrabold: 700;
+    readonly black: 800;
+};
+/**
+ * Based on a root size of 16px.
+ */
+export declare const fontSize: {
+    readonly primary: "1.875rem";
+    readonly secondary: "1.125rem";
+    readonly tertiary: "1rem";
+    readonly subtitle: "1rem";
+    readonly body: "0.875rem";
+    readonly small: "0.75rem";
+};
+export type FontSize = typeof fontSize;
+/**
+ * Primary font weights.
+ */
+export declare const fontWeight: {
+    readonly thin: 100;
+    readonly extralight: 200;
+    readonly light: 300;
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly bold: 600;
+    readonly extrabold: 700;
+    readonly black: 800;
+};
+export type FontWeight = typeof fontWeight;
+export declare const fontFamily = "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif";

package/src/tokens/utils/colorVariableToCss.d.ts

@@ -1,12 +1,12 @@
-/**
- * Convert a css custom property from our design tokens to a useable css string.
- *
- * Our custom properties are saved as "rrr ggg bbb" rather than a full css color.
- *
- * This allows us to modify them with opacity values and more.
- *
- * @param variable CSS custom property for color
- * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
- * @returns {string} Full css for using the color
- */
-export declare function colorVariableToCss(variable: string): string;
+/**
+ * Convert a css custom property from our design tokens to a useable css string.
+ *
+ * Our custom properties are saved as "rrr ggg bbb" rather than a full css color.
+ *
+ * This allows us to modify them with opacity values and more.
+ *
+ * @param variable CSS custom property for color
+ * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
+ * @returns {string} Full css for using the color
+ */
+export declare function colorVariableToCss(variable: string): string;

package/src/tokens/utils/getHEX.d.ts

@@ -1,10 +1,10 @@
-/**
- * Returns the HEX color based on a Color from the theme.
- *  Reads the RGB value from the underlying CSS variable and convert to HEX.
- *
- *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
- *
- * @param variable A color from the `colors` object of the Theme
- * @returns {string} HEX color
- */
-export declare const getHEX: (variable: string) => string;
+/**
+ * Returns the HEX color based on a Color from the theme.
+ *  Reads the RGB value from the underlying CSS variable and convert to HEX.
+ *
+ *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
+ *
+ * @param variable A color from the `colors` object of the Theme
+ * @returns {string} HEX color
+ */
+export declare const getHEX: (variable: string) => string;

package/src/tokens/utils/getValuesFromDesignToken.d.ts

@@ -1,5 +1,5 @@
-/**
- * Reads the value of the CSS custom Property.
- * ATTENTION: For colors use getHEX
- */
-export declare function getValuesFromDesignToken(designToken: string | number): string | number;
+/**
+ * Reads the value of the CSS custom Property.
+ * ATTENTION: For colors use getHEX
+ */
+export declare function getValuesFromDesignToken(designToken: string | number): string | number;

package/src/tokens/zIndex.d.ts

@@ -1,17 +1,17 @@
-export declare const themeZIndex: {
-    readonly hidden: -1;
-    readonly default: 1;
-    readonly top: 5;
-    readonly overlay: 10;
-    readonly popover: 20;
-    readonly toast: 100;
-};
-export declare const zIndex: {
-    readonly hidden: -1;
-    readonly default: 1;
-    readonly top: 5;
-    readonly overlay: 10;
-    readonly popover: 20;
-    readonly toast: 100;
-};
-export type ZIndex = typeof zIndex;
+export declare const themeZIndex: {
+    readonly hidden: -1;
+    readonly default: 1;
+    readonly top: 5;
+    readonly overlay: 10;
+    readonly popover: 20;
+    readonly toast: 100;
+};
+export declare const zIndex: {
+    readonly hidden: -1;
+    readonly default: 1;
+    readonly top: 5;
+    readonly overlay: 10;
+    readonly popover: 20;
+    readonly toast: 100;
+};
+export type ZIndex = typeof zIndex;

package/src/tokens/tokens.d.ts

@@ -1,13 +0,0 @@
-import { Elevation } from "./elevation";
-import { Size } from "./size";
-import { FontSize, FontWeight } from "./typography";
-import { ZIndex } from "./zIndex";
-export interface Tokens {
-    size: Size;
-    fontSize: FontSize;
-    fontWeight: FontWeight;
-    fontFamily: string;
-    elevation: Elevation;
-    zIndex: ZIndex;
-}
-export declare const tokens: Tokens;