@trackunit/ui-design-tokens 0.0.67-alpha-47c0e3bbca.0 → 0.0.67

package/index.cjs

@@ -2,6 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/**
+ * A collection of all the tokens related to border radius in the theme.
+ */
+const themeBorderRadius = {
+    none: "0",
+    sm: "0.125rem",
+    DEFAULT: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+
 const DEFAULT_CHART_COLORS = [
     "#2580C7",
     "#36A2DA",
@@ -559,64 +574,180 @@ function color(ColorKey, arg2, arg3) {
 const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
 const isValidVariant = (availableVariants, something) => Boolean(availableVariants[something]);
 
+/**
+ * A collection of all the tokens related to elevation in the theme.
+ */
+const themeBoxShadow = {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none",
+    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).
  */
 const elevation = {
-    E05: "var(--box-shadow-sm)",
-    E10: "var(--box-shadow-DEFAULT)",
-    E10A: "var(--box-shadow-md)",
-    E20: "var(--box-shadow-lg)",
-    E30: "var(--box-shadow-xl)",
-    E40: "var(--box-shadow-2xl)",
+    E05: `var(${themeBoxShadow.sm})`,
+    E10: `var(${themeBoxShadow.DEFAULT})`,
+    E10A: `var(${themeBoxShadow.md})`,
+    E20: `var(${themeBoxShadow.lg})`,
+    E30: `var(${themeBoxShadow.xl})`,
+    E40: `var(${themeBoxShadow["2xl"]})`,
 };
 
+/**
+ * A collection of all the tokens related to screen size in the theme.
+ */
+const themeScreenSize = {
+    xs: "0px",
+    sm: "480px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1200px",
+    "2xl": "1600px",
+    "3xl": "1900px",
+};
+
+/**
+ * A collection of all the tokens related to sizes in the theme.
+ */
+const themeSpacing = {
+    px: "1px",
+    "0": "0px",
+    "0.5": "0.125rem",
+    "1": "0.25rem",
+    "1.5": "0.375rem",
+    "2": "0.5rem",
+    "2.5": "0.625rem",
+    "3": "0.75rem",
+    "3.5": "0.875rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
+    "11": "2.75rem",
+    "12": "3rem",
+    "14": "3.5rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "28": "7rem",
+    "32": "8rem",
+    "36": "9rem",
+    "40": "10rem",
+    "44": "11rem",
+    "48": "12rem",
+    "52": "13rem",
+    "56": "14rem",
+    "60": "15rem",
+    "64": "16rem",
+    "72": "18rem",
+    "80": "20rem",
+    "96": "24rem",
+};
 const size = {
-    /** --spacing-0: 0px; */
-    none: "var(--spacing-0)",
-    /** --spacing-1: 0.25rem; */
-    tiny: "var(--spacing-1)",
-    /** --spacing-2: 0.5rem; */
-    mini: "var(--spacing-2)",
-    /** --spacing-3: 0.75rem; */
-    small: "var(--spacing-3)",
-    /** --spacing-4: 1rem; */
-    medium: "var(--spacing-4)",
-    /** --spacing-6: 1.5rem; */
-    large: "var(--spacing-6)",
-    /** --spacing-8: 2rem; */
-    giant: "var(--spacing-8)",
-    /** --spacing-10: 2.5rem; */
-    enormous: "var(--spacing-10)",
+    none: `var(${themeSpacing[0]})`,
+    tiny: `var(${themeSpacing[1]})`,
+    mini: `var(${themeSpacing[2]})`,
+    small: `var(${themeSpacing[3]})`,
+    medium: `var(${themeSpacing[4]})`,
+    large: `var(${themeSpacing[6]})`,
+    giant: `var(${themeSpacing[8]})`,
+    enormous: `var(${themeSpacing[10]})`,
 };
 
+/**
+ * A collection of all the tokens related to typography in the theme.
+ */
+const themeFontSize = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+};
+const themeLineHeight = {
+    xs: "1rem",
+    sm: "1.25rem",
+    base: "1.5rem",
+    lg: "1.75rem",
+    xl: "1.75rem",
+    "2xl": "2rem",
+    "3xl": "2.25rem",
+    "4xl": "2.5rem",
+    "5xl": "2.75rem",
+    "6xl": "3rem",
+    "7xl": "3.25rem",
+    "8xl": "3.5rem",
+    "9xl": "3.75rem",
+};
+const themeFontWeight = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    bold: 600,
+    extrabold: 700,
+    black: 800,
+};
 /**
  * Based on a root size of 16px.
  */
 const fontSize = {
-    primary: "var( --font-size-3xl)",
-    secondary: "var(--font-size-lg)",
-    tertiary: "var(--font-size-base)",
-    subtitle: "var(--font-size-base)",
-    body: "var(--font-size-sm)",
-    small: "var(--font-size-xs)", // 12px
+    primary: `var(${themeFontSize["3xl"]})`,
+    secondary: `var(${themeFontSize.lg})`,
+    tertiary: `var(${themeFontSize.base})`,
+    subtitle: `var(${themeFontSize.base})`,
+    body: `var(${themeFontSize.sm})`,
+    small: `var(${themeFontSize.xs})`, // 12px
 };
 /**
  * Primary font weights.
  */
 const fontWeight = {
-    normal: 400,
-    bold: 600,
+    thin: themeFontWeight.thin,
+    extralight: themeFontWeight.extralight,
+    light: themeFontWeight.light,
+    normal: themeFontWeight.normal,
+    medium: themeFontWeight.medium,
+    bold: themeFontWeight.bold,
+    extrabold: themeFontWeight.extrabold,
+    black: themeFontWeight.black,
 };
 
-const zIndex = {
+const themeZIndex = {
     hidden: -1,
     default: 1,
     top: 5,
     overlay: 10,
     popover: 20,
     toast: 100,
+};
+const zIndex = {
+    hidden: themeZIndex.hidden,
+    default: themeZIndex.default,
+    top: themeZIndex.top,
+    overlay: themeZIndex.overlay,
+    popover: themeZIndex.popover,
+    toast: themeZIndex.toast,
 };
 
 const tokens = {
@@ -641,8 +772,18 @@ exports.groupedPalettes = groupedPalettes;
 exports.intentPalette = intentPalette;
 exports.rentalStatusPalette = rentalStatusPalette;
 exports.sitesPalette = sitesPalette;
+exports.size = size;
 exports.tailwindPalette = tailwindPalette;
+exports.themeBorderRadius = themeBorderRadius;
+exports.themeBoxShadow = themeBoxShadow;
 exports.themeColors = themeColors;
+exports.themeFontSize = themeFontSize;
+exports.themeFontWeight = themeFontWeight;
+exports.themeLineHeight = themeLineHeight;
+exports.themeScreenSize = themeScreenSize;
+exports.themeSpacing = themeSpacing;
+exports.themeZIndex = themeZIndex;
 exports.tokens = tokens;
 exports.trackunitPalette = trackunitPalette;
 exports.utilizationPalette = utilizationPalette;
+exports.zIndex = zIndex;

package/index.js

@@ -1,3 +1,18 @@
+/**
+ * A collection of all the tokens related to border radius in the theme.
+ */
+const themeBorderRadius = {
+    none: "0",
+    sm: "0.125rem",
+    DEFAULT: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+
 const DEFAULT_CHART_COLORS = [
     "#2580C7",
     "#36A2DA",
@@ -555,64 +570,180 @@ function color(ColorKey, arg2, arg3) {
 const isOutputOption = (something) => typeof something === "string" && outputOptions.includes(something);
 const isValidVariant = (availableVariants, something) => Boolean(availableVariants[something]);
 
+/**
+ * A collection of all the tokens related to elevation in the theme.
+ */
+const themeBoxShadow = {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none",
+    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).
  */
 const elevation = {
-    E05: "var(--box-shadow-sm)",
-    E10: "var(--box-shadow-DEFAULT)",
-    E10A: "var(--box-shadow-md)",
-    E20: "var(--box-shadow-lg)",
-    E30: "var(--box-shadow-xl)",
-    E40: "var(--box-shadow-2xl)",
+    E05: `var(${themeBoxShadow.sm})`,
+    E10: `var(${themeBoxShadow.DEFAULT})`,
+    E10A: `var(${themeBoxShadow.md})`,
+    E20: `var(${themeBoxShadow.lg})`,
+    E30: `var(${themeBoxShadow.xl})`,
+    E40: `var(${themeBoxShadow["2xl"]})`,
 };
 
+/**
+ * A collection of all the tokens related to screen size in the theme.
+ */
+const themeScreenSize = {
+    xs: "0px",
+    sm: "480px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1200px",
+    "2xl": "1600px",
+    "3xl": "1900px",
+};
+
+/**
+ * A collection of all the tokens related to sizes in the theme.
+ */
+const themeSpacing = {
+    px: "1px",
+    "0": "0px",
+    "0.5": "0.125rem",
+    "1": "0.25rem",
+    "1.5": "0.375rem",
+    "2": "0.5rem",
+    "2.5": "0.625rem",
+    "3": "0.75rem",
+    "3.5": "0.875rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
+    "11": "2.75rem",
+    "12": "3rem",
+    "14": "3.5rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "28": "7rem",
+    "32": "8rem",
+    "36": "9rem",
+    "40": "10rem",
+    "44": "11rem",
+    "48": "12rem",
+    "52": "13rem",
+    "56": "14rem",
+    "60": "15rem",
+    "64": "16rem",
+    "72": "18rem",
+    "80": "20rem",
+    "96": "24rem",
+};
 const size = {
-    /** --spacing-0: 0px; */
-    none: "var(--spacing-0)",
-    /** --spacing-1: 0.25rem; */
-    tiny: "var(--spacing-1)",
-    /** --spacing-2: 0.5rem; */
-    mini: "var(--spacing-2)",
-    /** --spacing-3: 0.75rem; */
-    small: "var(--spacing-3)",
-    /** --spacing-4: 1rem; */
-    medium: "var(--spacing-4)",
-    /** --spacing-6: 1.5rem; */
-    large: "var(--spacing-6)",
-    /** --spacing-8: 2rem; */
-    giant: "var(--spacing-8)",
-    /** --spacing-10: 2.5rem; */
-    enormous: "var(--spacing-10)",
+    none: `var(${themeSpacing[0]})`,
+    tiny: `var(${themeSpacing[1]})`,
+    mini: `var(${themeSpacing[2]})`,
+    small: `var(${themeSpacing[3]})`,
+    medium: `var(${themeSpacing[4]})`,
+    large: `var(${themeSpacing[6]})`,
+    giant: `var(${themeSpacing[8]})`,
+    enormous: `var(${themeSpacing[10]})`,
 };
 
+/**
+ * A collection of all the tokens related to typography in the theme.
+ */
+const themeFontSize = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+};
+const themeLineHeight = {
+    xs: "1rem",
+    sm: "1.25rem",
+    base: "1.5rem",
+    lg: "1.75rem",
+    xl: "1.75rem",
+    "2xl": "2rem",
+    "3xl": "2.25rem",
+    "4xl": "2.5rem",
+    "5xl": "2.75rem",
+    "6xl": "3rem",
+    "7xl": "3.25rem",
+    "8xl": "3.5rem",
+    "9xl": "3.75rem",
+};
+const themeFontWeight = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    bold: 600,
+    extrabold: 700,
+    black: 800,
+};
 /**
  * Based on a root size of 16px.
  */
 const fontSize = {
-    primary: "var( --font-size-3xl)",
-    secondary: "var(--font-size-lg)",
-    tertiary: "var(--font-size-base)",
-    subtitle: "var(--font-size-base)",
-    body: "var(--font-size-sm)",
-    small: "var(--font-size-xs)", // 12px
+    primary: `var(${themeFontSize["3xl"]})`,
+    secondary: `var(${themeFontSize.lg})`,
+    tertiary: `var(${themeFontSize.base})`,
+    subtitle: `var(${themeFontSize.base})`,
+    body: `var(${themeFontSize.sm})`,
+    small: `var(${themeFontSize.xs})`, // 12px
 };
 /**
  * Primary font weights.
  */
 const fontWeight = {
-    normal: 400,
-    bold: 600,
+    thin: themeFontWeight.thin,
+    extralight: themeFontWeight.extralight,
+    light: themeFontWeight.light,
+    normal: themeFontWeight.normal,
+    medium: themeFontWeight.medium,
+    bold: themeFontWeight.bold,
+    extrabold: themeFontWeight.extrabold,
+    black: themeFontWeight.black,
 };
 
-const zIndex = {
+const themeZIndex = {
     hidden: -1,
     default: 1,
     top: 5,
     overlay: 10,
     popover: 20,
     toast: 100,
+};
+const zIndex = {
+    hidden: themeZIndex.hidden,
+    default: themeZIndex.default,
+    top: themeZIndex.top,
+    overlay: themeZIndex.overlay,
+    popover: themeZIndex.popover,
+    toast: themeZIndex.toast,
 };
 
 const tokens = {
@@ -624,4 +755,4 @@ const tokens = {
     fontFamily: `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
 };
 
-export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, sitesPalette, tailwindPalette, themeColors, tokens, trackunitPalette, utilizationPalette };
+export { DEFAULT_CHART_COLORS, activityPalette, color, criticalityPalette, elevation, fontSize, fontWeight, generalPalette, getReorderedChartColors, groupedPalettes, intentPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeSpacing, themeZIndex, tokens, trackunitPalette, utilizationPalette, zIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/ui-design-tokens",
-  "version": "0.0.67-alpha-47c0e3bbca.0",
+  "version": "0.0.67",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",

package/src/index.d.ts

@@ -1,5 +1,9 @@
+export * from "./tokens/borderRadius";
 export * from "./tokens/chartColorsDefault";
 export * from "./tokens/colors/index";
 export * from "./tokens/elevation";
+export * from "./tokens/screenSize";
+export * from "./tokens/size";
 export * from "./tokens/tokens";
 export * from "./tokens/typography";
+export * from "./tokens/zIndex";

package/src/tokens/borderRadius.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A collection of all the tokens related to border radius in the theme.
+ */
+export declare const themeBorderRadius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly DEFAULT: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly "2xl": "1rem";
+    readonly "3xl": "1.5rem";
+    readonly full: "9999px";
+};

package/src/tokens/elevation.d.ts

@@ -1,13 +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: "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)";
+    readonly E05: "var(0 1px 2px 0 rgb(0 0 0 / 0.05))";
+    readonly E10: "var(0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))";
+    readonly E10A: "var(0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))";
+    readonly E20: "var(0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))";
+    readonly E30: "var(0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))";
+    readonly E40: "var(0 25px 50px -12px rgb(0 0 0 / 0.25))";
 };
 export type Elevation = typeof elevation;

package/src/tokens/screenSize.d.ts

@@ -0,0 +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";
+};

package/src/tokens/size.d.ts

@@ -1,19 +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: {
-    /** --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)";
+    readonly none: "var(0px)";
+    readonly tiny: "var(0.25rem)";
+    readonly mini: "var(0.5rem)";
+    readonly small: "var(0.75rem)";
+    readonly medium: "var(1rem)";
+    readonly large: "var(1.5rem)";
+    readonly giant: "var(2rem)";
+    readonly enormous: "var(2.5rem)";
 };
 export type Size = typeof size;

package/src/tokens/typography.d.ts

@@ -1,20 +1,59 @@
+/**
+ * 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: "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)";
+    readonly primary: "var(1.875rem)";
+    readonly secondary: "var(1.125rem)";
+    readonly tertiary: "var(1rem)";
+    readonly subtitle: "var(1rem)";
+    readonly body: "var(0.875rem)";
+    readonly small: "var(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;

package/src/tokens/zIndex.d.ts

@@ -1,3 +1,11 @@
+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;