@trackunit/ui-design-tokens 0.0.43 → 0.0.45

package/tokens/tokens.d.ts

@@ -1,10 +1,8 @@
-import { Colors } from "./colors";
 import { Elevation } from "./elevation";
 import { Size } from "./size";
 import { FontSize, FontWeight } from "./typography";
 import { ZIndex } from "./zIndex";
 export interface Tokens {
-    colors: Colors;
     size: Size;
     fontSize: FontSize;
     fontWeight: FontWeight;

package/tokens/utils/colorVariableToCss.d.ts

@@ -0,0 +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
+ * @returns Full css for using the color
+ * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
+ */
+export declare function colorVariableToCss(variable: string): string;

package/tokens/{getHEX.d.ts → utils/getHEX.d.ts}

@@ -2,7 +2,7 @@
  * 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: getHEX(theme.colors.B50) -> #3b82f6
+ *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
  *
  * @param variable A color from the `colors` object of the Theme
  * @returns HEX color

package/tokens/{getValues.d.ts → utils/getValuesFromDesignToken.d.ts}

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

package/tokens/colors.d.ts

@@ -1,163 +0,0 @@
-/**
- * The values assigned are loosely based on the hue/neutral's
- * respective relative luminance, where 0% is black and 100% is white.
- * However, it is slightly adjusted to be in reverse, where X0 will
- * always represent the lightest version, while X100 will present the
- * darkest version of a hue/neutral.
- */
-export declare function getColorValue(variable: string): string;
-export declare const black = "#1a1b1c";
-export declare const white = "#fff";
-export declare const neutral: {
-    readonly N5: string;
-    readonly N10: string;
-    readonly N20: string;
-    readonly N30: string;
-    readonly N40: string;
-    readonly N50: string;
-    readonly N60: string;
-    readonly N70: string;
-    readonly N80: string;
-    readonly N90: string;
-};
-export declare const blue: {
-    readonly B5: string;
-    readonly B10: string;
-    readonly B20: string;
-    readonly B30: string;
-    readonly B40: string;
-    readonly B50: string;
-    readonly B60: string;
-    readonly B70: string;
-    readonly B80: string;
-    readonly B90: string;
-};
-export declare const green: {
-    readonly G5: string;
-    readonly G10: string;
-    readonly G20: string;
-    readonly G30: string;
-    readonly G40: string;
-    readonly G50: string;
-    readonly G60: string;
-    readonly G70: string;
-    readonly G80: string;
-    readonly G90: string;
-};
-export declare const red: {
-    readonly R5: string;
-    readonly R10: string;
-    readonly R20: string;
-    readonly R30: string;
-    readonly R40: string;
-    readonly R50: string;
-    readonly R60: string;
-    readonly R70: string;
-    readonly R80: string;
-    readonly R90: string;
-};
-export declare const orange: {
-    readonly O5: string;
-    readonly O10: string;
-    readonly O20: string;
-    readonly O30: string;
-    readonly O40: string;
-    readonly O50: string;
-    readonly O60: string;
-    readonly O70: string;
-    readonly O80: string;
-    readonly O90: string;
-};
-export declare const purple: {
-    readonly P5: string;
-    readonly P10: string;
-    readonly P20: string;
-    readonly P30: string;
-    readonly P40: string;
-    readonly P50: string;
-    readonly P60: string;
-    readonly P70: string;
-    readonly P80: string;
-    readonly P90: string;
-};
-export declare const utilization: {
-    working: string;
-    moving: string;
-    idling: string;
-    stopped: string;
-    active: string;
-    operating: string;
-};
-export declare const colors: {
-    readonly utilization: {
-        working: string;
-        moving: string;
-        idling: string;
-        stopped: string;
-        active: string;
-        operating: string;
-    };
-    readonly black: "#1a1b1c";
-    readonly white: "#fff";
-    readonly P5: string;
-    readonly P10: string;
-    readonly P20: string;
-    readonly P30: string;
-    readonly P40: string;
-    readonly P50: string;
-    readonly P60: string;
-    readonly P70: string;
-    readonly P80: string;
-    readonly P90: string;
-    readonly O5: string;
-    readonly O10: string;
-    readonly O20: string;
-    readonly O30: string;
-    readonly O40: string;
-    readonly O50: string;
-    readonly O60: string;
-    readonly O70: string;
-    readonly O80: string;
-    readonly O90: string;
-    readonly R5: string;
-    readonly R10: string;
-    readonly R20: string;
-    readonly R30: string;
-    readonly R40: string;
-    readonly R50: string;
-    readonly R60: string;
-    readonly R70: string;
-    readonly R80: string;
-    readonly R90: string;
-    readonly G5: string;
-    readonly G10: string;
-    readonly G20: string;
-    readonly G30: string;
-    readonly G40: string;
-    readonly G50: string;
-    readonly G60: string;
-    readonly G70: string;
-    readonly G80: string;
-    readonly G90: string;
-    readonly B5: string;
-    readonly B10: string;
-    readonly B20: string;
-    readonly B30: string;
-    readonly B40: string;
-    readonly B50: string;
-    readonly B60: string;
-    readonly B70: string;
-    readonly B80: string;
-    readonly B90: string;
-    readonly N5: string;
-    readonly N10: string;
-    readonly N20: string;
-    readonly N30: string;
-    readonly N40: string;
-    readonly N50: string;
-    readonly N60: string;
-    readonly N70: string;
-    readonly N80: string;
-    readonly N90: string;
-};
-export declare type Colors = typeof colors;

package/tokens/mediaQuery.d.ts

@@ -1,40 +0,0 @@
-export declare const breakpoints: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    xxl: number;
-    xxxl: number;
-};
-export declare type Breakpoint = keyof typeof breakpoints;
-/**
- * Track units media queries.
- */
-export declare const mediaQuery: import("styled-media-query").MediaGenerator<{
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-    xxxl: string;
-}, any>;
-export declare const windowWidth: {
-    lessThan: (size: keyof typeof breakpoints) => boolean;
-    greaterThan: (size: keyof typeof breakpoints) => boolean;
-    between: (first: keyof typeof breakpoints, second: keyof typeof breakpoints) => boolean;
-};
-/**
---------
-BOOTSTRAP
---------
- grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
- */