@trackunit/css-tailwind 0.0.60 → 0.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-tailwind",
-  "version": "0.0.60",
+  "version": "0.0.64",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -8,9 +8,9 @@
   "types": "./src/index.d.ts",
   "dependencies": {
     "@trackunit/css-component-tokens": "0.0.29",
-    "@trackunit/css-core": "0.0.82",
+    "@trackunit/css-core": "0.0.84",
     "@trackunit/css-tailwind-custom-properties-plugin": "0.0.21",
-    "@trackunit/ui-design-tokens": "0.0.66"
+    "@trackunit/ui-design-tokens": "0.0.68"
   },
   "peerDependencies": {}
 }

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

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

package/tailwind-base.generated.css

@@ -7,89 +7,6 @@
 /* node_modules/tailwindcss/utilities.css */
 @tailwind utilities;
 
-/* libs/css/core/src/lib/theme/tailwind-custom-properties.css */
-:root {
-  --spacing-px: 1px;
-  --spacing-0: 0px;
-  --spacing-0-5: 0.125rem;
-  --spacing-1: 0.25rem;
-  --spacing-1-5: 0.375rem;
-  --spacing-2: 0.5rem;
-  --spacing-2-5: 0.625rem;
-  --spacing-3: 0.75rem;
-  --spacing-3-5: 0.875rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-14: 3.5rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-28: 7rem;
-  --spacing-32: 8rem;
-  --spacing-36: 9rem;
-  --spacing-40: 10rem;
-  --spacing-44: 11rem;
-  --spacing-48: 12rem;
-  --spacing-52: 13rem;
-  --spacing-56: 14rem;
-  --spacing-60: 15rem;
-  --spacing-64: 16rem;
-  --spacing-72: 18rem;
-  --spacing-80: 20rem;
-  --spacing-96: 24rem;
-  --border-radius-none: 0px;
-  --border-radius-sm: 0.125rem;
-  --border-radius-DEFAULT: 0.25rem;
-  --border-radius-md: 0.375rem;
-  --border-radius-lg: 0.5rem;
-  --border-radius-xl: 0.75rem;
-  --border-radius-2xl: 1rem;
-  --border-radius-3xl: 1.5rem;
-  --border-radius-full: 9999px;
-  --box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --box-shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --box-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --box-shadow-none: none;
-  --box-shadow-popover: 0px 0px 1px 1px rgba(26, 27, 28, 0.13), 0px 1px 1px rgba(26, 27, 28, 0.15);
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
-  --font-size-6xl: 3.75rem;
-  --font-size-7xl: 4.5rem;
-  --font-size-8xl: 6rem;
-  --font-size-9xl: 8rem;
-  --line-height-xs: 1rem;
-  --line-height-sm: 1.25rem;
-  --line-height-base: 1.5rem;
-  --line-height-lg: 1.75rem;
-  --line-height-xl: 1.75rem;
-  --line-height-2xl: 2rem;
-  --line-height-3xl: 2.25rem;
-  --line-height-4xl: 2.5rem;
-  --line-height-5xl: 1;
-  --line-height-6xl: 1;
-  --line-height-7xl: 1;
-  --line-height-8xl: 1;
-  --line-height-9xl: 1;
-}
-
 /* libs/css/core/src/lib/theme/custom-properties.css */
 :root {
   --z-hidden: -1;

package/tailwind-base.generated.js

@@ -378,6 +378,19 @@ var ComponentTokensPlugin = (0, import_plugin2.default)(function({ addComponents
 // libs/css/component-tokens/src/index.ts
 var src_default = ComponentTokensPlugin;
 
+// libs/ui/design-tokens/src/tokens/borderRadius.ts
+var 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"
+};
+
 // libs/ui/design-tokens/src/tokens/colors/tailwindPalette.ts
 var tailwindPalette = {
   slate: {
@@ -735,6 +748,171 @@ var themeColors = {
   SITE: { name: "site", variants: trackunitPalette.SITE }
 };
 
+// libs/ui/design-tokens/src/tokens/elevation.ts
+var 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)"
+};
+var elevation = {
+  E05: themeBoxShadow.sm,
+  E10: themeBoxShadow.DEFAULT,
+  E10A: themeBoxShadow.md,
+  E20: themeBoxShadow.lg,
+  E30: themeBoxShadow.xl,
+  E40: themeBoxShadow["2xl"]
+};
+
+// libs/ui/design-tokens/src/tokens/screenSize.ts
+var themeScreenSize = {
+  xs: "0px",
+  sm: "480px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1200px",
+  "2xl": "1600px",
+  "3xl": "1900px"
+};
+
+// libs/ui/design-tokens/src/tokens/size.ts
+var 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"
+};
+var size = {
+  none: themeSpacing[0],
+  tiny: themeSpacing[1],
+  mini: themeSpacing[2],
+  small: themeSpacing[3],
+  medium: themeSpacing[4],
+  large: themeSpacing[6],
+  giant: themeSpacing[8],
+  enormous: themeSpacing[10]
+};
+
+// libs/ui/design-tokens/src/tokens/typography.ts
+var 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"
+};
+var 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"
+};
+var themeFontWeight = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  bold: 600,
+  extrabold: 700,
+  black: 800
+};
+var fontSize = {
+  primary: themeFontSize["3xl"],
+  // 30px
+  secondary: themeFontSize.lg,
+  // 18px
+  tertiary: themeFontSize.base,
+  // 16px
+  subtitle: themeFontSize.base,
+  // 16px
+  body: themeFontSize.sm,
+  // 14px
+  small: themeFontSize.xs
+  // 12px
+};
+var fontWeight = {
+  thin: themeFontWeight.thin,
+  extralight: themeFontWeight.extralight,
+  light: themeFontWeight.light,
+  normal: themeFontWeight.normal,
+  medium: themeFontWeight.medium,
+  bold: themeFontWeight.bold,
+  extrabold: themeFontWeight.extrabold,
+  black: themeFontWeight.black
+};
+
+// libs/ui/design-tokens/src/tokens/zIndex.ts
+var themeZIndex = {
+  hidden: -1,
+  default: 1,
+  top: 5,
+  overlay: 10,
+  popover: 20,
+  toast: 100
+};
+var zIndex = {
+  hidden: themeZIndex.hidden,
+  default: themeZIndex.default,
+  top: themeZIndex.top,
+  overlay: themeZIndex.overlay,
+  popover: themeZIndex.popover,
+  toast: themeZIndex.toast
+};
+
 // libs/css/tailwind/src/lib/animations.ts
 var animations = {
   animation: {
@@ -818,6 +996,34 @@ var grids = {
   }
 };
 
+// libs/css/tailwind/src/lib/utilities/designTokensToTailwindConfig.ts
+var designTokensToTailwindConfig = (name, designTokens) => {
+  const entries = Object.entries(designTokens).map(([key, value]) => [
+    key,
+    `/* ${remToPx(value)} */ ${valueInVar(keysToCssVariableName([name, key]))}`
+  ]);
+  return Object.fromEntries(entries);
+};
+var valueInVar = (value) => `var(${value})`;
+var remToPx = (value, fontSize2 = 16) => {
+  try {
+    if (value && typeof value === "string" && value.includes("rem")) {
+      return `${value} / ${parseFloat(value) * fontSize2}px`;
+    } else {
+      return value;
+    }
+  } catch (e) {
+    return value;
+  }
+};
+var designTokensToFontSizeTailwindConfig = (fontSizes) => {
+  const entries = Object.keys(fontSizes).map((key) => [
+    key,
+    [valueInVar(`--font-size-${key}`), { lineHeight: valueInVar(`--line-height-${key}`) }]
+  ]);
+  return Object.fromEntries(entries);
+};
+
 // libs/css/tailwind/src/lib/utilities/themeColorsToVariableObjectDefinition.ts
 function themeColorsToVariableObjectDefinition(themeColors2) {
   return Object.fromEntries(
@@ -880,15 +1086,7 @@ var tailwindBaseConfig = {
     files: []
   },
   theme: {
-    screens: {
-      xs: "0px",
-      sm: "480px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1200px",
-      "2xl": "1600px",
-      "3xl": "1900px"
-    },
+    screens: themeScreenSize,
     colors: ({ colors }) => {
       const customColors = Object.fromEntries(
         Object.entries(themeColors).map(([_, value]) => {
@@ -910,129 +1108,14 @@ var tailwindBaseConfig = {
         transparent: colors.transparent
       }, tailwindDefaults), customColors);
     },
-    spacing: {
-      px: withCustomPropertyValueAsComment("--spacing-px"),
-      0: withCustomPropertyValueAsComment("--spacing-0"),
-      0.5: withCustomPropertyValueAsComment("--spacing-0-5"),
-      1: withCustomPropertyValueAsComment("--spacing-1"),
-      1.5: withCustomPropertyValueAsComment("--spacing-1-5"),
-      2: withCustomPropertyValueAsComment("--spacing-2"),
-      2.5: withCustomPropertyValueAsComment("--spacing-2-5"),
-      3: withCustomPropertyValueAsComment("--spacing-3"),
-      3.5: withCustomPropertyValueAsComment("--spacing-3-5"),
-      4: withCustomPropertyValueAsComment("--spacing-4"),
-      5: withCustomPropertyValueAsComment("--spacing-5"),
-      6: withCustomPropertyValueAsComment("--spacing-6"),
-      7: withCustomPropertyValueAsComment("--spacing-7"),
-      8: withCustomPropertyValueAsComment("--spacing-8"),
-      9: withCustomPropertyValueAsComment("--spacing-9"),
-      10: withCustomPropertyValueAsComment("--spacing-10"),
-      11: withCustomPropertyValueAsComment("--spacing-11"),
-      12: withCustomPropertyValueAsComment("--spacing-12"),
-      14: withCustomPropertyValueAsComment("--spacing-14"),
-      16: withCustomPropertyValueAsComment("--spacing-16"),
-      20: withCustomPropertyValueAsComment("--spacing-20"),
-      24: withCustomPropertyValueAsComment("--spacing-24"),
-      28: withCustomPropertyValueAsComment("--spacing-28"),
-      32: withCustomPropertyValueAsComment("--spacing-32"),
-      36: withCustomPropertyValueAsComment("--spacing-36"),
-      40: withCustomPropertyValueAsComment("--spacing-40"),
-      44: withCustomPropertyValueAsComment("--spacing-44"),
-      48: withCustomPropertyValueAsComment("--spacing-48"),
-      52: withCustomPropertyValueAsComment("--spacing-52"),
-      56: withCustomPropertyValueAsComment("--spacing-56"),
-      60: withCustomPropertyValueAsComment("--spacing-60"),
-      64: withCustomPropertyValueAsComment("--spacing-64"),
-      72: withCustomPropertyValueAsComment("--spacing-72"),
-      80: withCustomPropertyValueAsComment("--spacing-80"),
-      96: withCustomPropertyValueAsComment("--spacing-96"),
+    spacing: __spreadProps(__spreadValues({}, designTokensToTailwindConfig("spacing", themeSpacing)), {
       "responsive-space": withCustomPropertyValueAsComment("--spacing-responsive-space")
-    },
-    borderRadius: {
-      none: withCustomPropertyValueAsComment("--border-radius-none"),
-      sm: withCustomPropertyValueAsComment("--border-radius-sm"),
-      DEFAULT: withCustomPropertyValueAsComment("--border-radius-DEFAULT"),
-      md: withCustomPropertyValueAsComment("--border-radius-md"),
-      lg: withCustomPropertyValueAsComment("--border-radius-lg"),
-      xl: withCustomPropertyValueAsComment("--border-radius-xl"),
-      "2xl": withCustomPropertyValueAsComment("--border-radius-2xl"),
-      "3xl": withCustomPropertyValueAsComment("--border-radius-3xl"),
-      full: withCustomPropertyValueAsComment("--border-radius-full")
-    },
-    boxShadow: {
-      sm: withCustomPropertyValueAsComment("--box-shadow-sm"),
-      DEFAULT: withCustomPropertyValueAsComment("--box-shadow-DEFAULT"),
-      md: withCustomPropertyValueAsComment("--box-shadow-md"),
-      lg: withCustomPropertyValueAsComment("--box-shadow-lg"),
-      xl: withCustomPropertyValueAsComment("--box-shadow-xl"),
-      "2xl": withCustomPropertyValueAsComment("--box-shadow-2xl"),
-      inner: withCustomPropertyValueAsComment("--box-shadow-inner"),
-      none: withCustomPropertyValueAsComment("--box-shadow-none"),
-      active: withCustomPropertyValueAsComment("--box-shadow-active")
-    },
-    fontSize: {
-      xs: [
-        withCustomPropertyValueAsComment("--font-size-xs"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-xs") }
-      ],
-      sm: [
-        withCustomPropertyValueAsComment("--font-size-sm"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-sm") }
-      ],
-      base: [
-        withCustomPropertyValueAsComment("--font-size-base"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-base") }
-      ],
-      lg: [
-        withCustomPropertyValueAsComment("--font-size-lg"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-lg") }
-      ],
-      xl: [
-        withCustomPropertyValueAsComment("--font-size-xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-xl") }
-      ],
-      "2xl": [
-        withCustomPropertyValueAsComment("--font-size-2xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-2xl") }
-      ],
-      "3xl": [
-        withCustomPropertyValueAsComment("--font-size-3xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-3xl") }
-      ],
-      "4xl": [
-        withCustomPropertyValueAsComment("--font-size-4xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-4xl") }
-      ],
-      "5xl": [
-        withCustomPropertyValueAsComment("--font-size-5xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-5xl") }
-      ],
-      "6xl": [
-        withCustomPropertyValueAsComment("--font-size-6xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-6xl") }
-      ],
-      "7xl": [
-        withCustomPropertyValueAsComment("--font-size-7xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-7xl") }
-      ],
-      "8xl": [
-        withCustomPropertyValueAsComment("--font-size-8xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-8xl") }
-      ],
-      "9xl": [
-        withCustomPropertyValueAsComment("--font-size-9xl"),
-        { lineHeight: withCustomPropertyValueAsComment("--line-height-9xl") }
-      ]
-    },
+    }),
+    borderRadius: designTokensToTailwindConfig("border-radius", themeBorderRadius),
+    boxShadow: designTokensToTailwindConfig("box-shadow", themeBoxShadow),
+    fontSize: designTokensToFontSizeTailwindConfig(themeFontSize),
     extend: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, animations), grids), containers), {
-      zIndex: {
-        hidden: withCustomPropertyValueAsComment("--z-hidden"),
-        default: withCustomPropertyValueAsComment("--z-default"),
-        top: withCustomPropertyValueAsComment("--z-top"),
-        overlay: withCustomPropertyValueAsComment("--z-overlay"),
-        popover: withCustomPropertyValueAsComment("--z-popover"),
-        toast: withCustomPropertyValueAsComment("--z-toast")
-      }
+      zIndex: designTokensToTailwindConfig("z", themeZIndex)
     }),
     variables: {
       "theme-marketing": {
@@ -1088,7 +1171,13 @@ var tailwindBaseConfig = {
         })
       },
       DEFAULT: {
-        color: __spreadValues(__spreadValues({}, tailwindPalette), themeColorsToVariableObjectDefinition(themeColors))
+        "border-radius": themeBorderRadius,
+        "box-shadow": themeBoxShadow,
+        color: __spreadValues(__spreadValues({}, tailwindPalette), themeColorsToVariableObjectDefinition(themeColors)),
+        "font-size": themeFontSize,
+        "line-height": themeLineHeight,
+        spacing: themeSpacing,
+        z: themeZIndex
       }
     }
   },