@cryptlex/web-components 1.2.2 → 1.3.0

package/tailwind.preset.ts

@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 const tokenRamps = (paletteName: string) => {
-  const ramps = {};
+  const ramps: Record<number, string> = {};
   for (let i = 1; i <= 10; i++) {
     ramps[i] = `oklch(var(--${paletteName}-${i}) / <alpha-value>)`
   }
@@ -18,6 +18,69 @@ export default {
       md: 'calc(var(--radius) - 2px)',
       sm: 'calc(var(--radius) - 4px)',
     },
+    fontSize: {
+      // text-caption
+      caption: [
+        "var(--font-sm)",
+        {
+          lineHeight: "1.5"
+        },
+      ],
+      // text-body
+      body: [
+        "var(--font-base)",
+        {
+          lineHeight: "1.6",
+        },
+      ],
+      // text-heading-6
+      "heading-6": [
+        "var(--font-base)",
+        {
+          lineHeight: "1.2",
+          fontWeight: 700
+        },
+      ],
+      // text-heading-5
+      "heading-5": [
+        "var(--font-md)",
+        {
+          lineHeight: "1.2"
+        },
+      ],
+      // text-heading-4
+      "heading-4": [
+        "var(--font-lg)",
+        {
+          lineHeight: "1.2",
+          fontWeight: 500
+        },
+      ],
+      // text-heading-3
+      "heading-3": [
+        "var(--font-xl)",
+        {
+          lineHeight: "1.3",
+          fontWeight: 500
+        },
+      ],
+
+      // text-heading-2
+      "heading-2": [
+        "var(--font-2xl)",
+        {
+          lineHeight: "1.3",
+        },
+      ],
+
+      // text-heading-1
+      "heading-1": [
+        "var(--font-3xl)",
+        {
+          lineHeight: "1",
+        },
+      ],
+    },
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
@@ -88,6 +151,9 @@ export default {
       },
     },
     extend: {
+      gridTemplateColumns: {
+        'fluid': "repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))"
+      },
       keyframes: {
         'accordion-down': {
           from: {
@@ -110,82 +176,7 @@ export default {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out'
       },
-      spacing: {
-        'v1': 'var(--vspace-1)',
-        'v2': 'var(--vspace-2)',
-        'v3': 'var(--vspace-3)',
-        'v4': 'var(--vspace-4)',
-        'v5': 'var(--vspace-5)',
-      },
-      fontSize: {
-        // text-caption
-        caption: [
-          "0.7708em",
-          {
-            lineHeight: "16px",
-            fontWeight: "400",
-          },
-        ],
-        // text-body
-        body: [
-          "14px",
-          {
-            lineHeight: "20px",
-            fontWeight: "400",
-          },
-        ],
-        // text-heading-6
-        "heading-6": [
-          "1em",
-          {
-            lineHeight: "var(--vspace-1)",
-            letterSpacing: "0em"
-          },
-        ],
-        // text-heading-5
-        "heading-5": [
-          "1.1667em",
-          {
-            lineHeight: "var(--vspace-1)"
-          },
-        ],
-        // text-heading-4
-        "heading-4": [
-          "1.3333em",
-          {
-            lineHeight: "var(--vspace-1)"
-          },
-        ],
-        // text-heading-3
-        "heading-3": [
-          "1.75em",
-          {
-            lineHeight: "1em",
-            fontWeight: "500",
-          },
-        ],
-
-        // text-heading-2
-        "heading-2": [
-          "2.6458em",
-          {
-            lineHeight: "1em",
-            fontWeight: "300",
-          },
-        ],
-
-        // text-heading-1
-        "heading-1": [
-          "5.2917em",
-          {
-            lineHeight: "calc(5.2917/var(--space) * var(--vspace-1))",
-            fontWeight: "400",
-          },
-        ],
-      },
     }
   },
   plugins: [require('tailwindcss-animate')], // Include any plugins you need
-} satisfies Config;
-
-// export default tailwindPreset;
+} satisfies Config;