@trackunit/ui-design-tokens 0.0.1-alpha-afcc978985.0

package/tokens/elevation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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: "var(--box-shadow-sm)";
+    readonly E10: "var(--box-shadow-DEFAULT)";
+    readonly E10A: "var(--box-shadow-md)";
+    readonly E20: "var(--box-shadow-lg)";
+    readonly E30: "var(--box-shadow-xl)";
+    readonly E40: "var(--box-shadow-2xl)";
+};
+export declare type Elevation = typeof elevation;

package/tokens/size.d.ts

@@ -0,0 +1,19 @@
+export declare const size: {
+    /** --spacing-0: 0px; */
+    readonly none: "var(--spacing-0)";
+    /** --spacing-1: 0.25rem; */
+    readonly tiny: "var(--spacing-1)";
+    /** --spacing-2: 0.5rem; */
+    readonly mini: "var(--spacing-2)";
+    /** --spacing-3: 0.75rem; */
+    readonly small: "var(--spacing-3)";
+    /** --spacing-4: 1rem; */
+    readonly medium: "var(--spacing-4)";
+    /** --spacing-6: 1.5rem; */
+    readonly large: "var(--spacing-6)";
+    /** --spacing-8: 2rem; */
+    readonly giant: "var(--spacing-8)";
+    /** --spacing-10: 2.5rem; */
+    readonly enormous: "var(--spacing-10)";
+};
+export declare type Size = typeof size;

package/tokens/tokens.d.ts

@@ -0,0 +1,13 @@
+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;

package/tokens/typography.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Based on a root size of 16px.
+ */
+export declare const fontSize: {
+    readonly primary: "var( --font-size-3xl)";
+    readonly secondary: "var(--font-size-lg)";
+    readonly tertiary: "var(--font-size-base)";
+    readonly subtitle: "var(--font-size-base)";
+    readonly body: "var(--font-size-sm)";
+    readonly small: "var(--font-size-xs)";
+};
+export declare type FontSize = typeof fontSize;
+/**
+ * Primary font weights.
+ */
+export declare const fontWeight: {
+    readonly normal: 400;
+    readonly bold: 600;
+};
+export declare type FontWeight = typeof 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/utils/getHEX.d.ts

@@ -0,0 +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 HEX color
+ */
+export declare const getHEX: (variable: string) => string;

package/tokens/utils/getValuesFromDesignToken.d.ts

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

package/tokens/zIndex.d.ts

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