@vaneui/md 0.9.0-alpha.20260105192120.1be78c6 → 0.9.0-alpha.20260106191130.bc0ea5f

package/dist/styles/index.css

@@ -166,7 +166,8 @@
 }
 @layer base {
     [data-size] {
-        /* Breakpoint vars default to base unit */
+        /* Default: breakpoint-specific unit vars inherit from base unit vars.
+           Responsive components override these with specific numeric values. */
         --py-unit-desktop: var(--py-unit);
         --py-unit-tablet: var(--py-unit);
         --py-unit-mobile: var(--py-unit);
@@ -177,14 +178,27 @@
         --fs-unit-tablet: var(--fs-unit);
         --fs-unit-mobile: var(--fs-unit);
 
-        /* Single formulas - unit vars are switched via Tailwind classes */
-        --py: calc(var(--py-unit) * var(--spacing));
-        --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
-        --gap: calc(var(--gap-unit) * var(--spacing));
-        --fs: calc(var(--fs-unit) * var(--fs-base));
+        /* Breakpoint-specific computed variables */
+        --py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
+        --py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
+        --py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
+
+        --px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
+        --px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
+        --px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
+
+        --gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
+        --gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
+        --gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
+
+        --fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
+        --fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
+        --fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
+
+        /* Non-breakpoint computed variables */
+        --pl: calc(var(--py-unit) * var(--spacing));
         --size: calc(var(--size-unit) * var(--spacing));
         --br: calc(var(--br-unit) * var(--br-base));
-        --pl: calc(var(--py-unit) * var(--spacing));
     }
 }
 @layer components {
@@ -260,7 +274,9 @@
     .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
 
     /* Label */
-    .vane-label { --lh: var(--lh-base); }
+    .vane-label {
+        --lh: var(--lh-base);
+    }
     .vane-label[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
     .vane-label[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
     .vane-label[data-size="md"] { --fs-unit: var(--fs-unit-md); }
@@ -1291,6 +1307,9 @@
   .gap-\(--gap\) {
     gap: var(--gap);
   }
+  .gap-\(--gap-desktop\) {
+    gap: var(--gap-desktop);
+  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
@@ -1568,6 +1587,9 @@
   .px-\(--px\) {
     padding-inline: var(--px);
   }
+  .px-\(--px-desktop\) {
+    padding-inline: var(--px-desktop);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1583,6 +1605,9 @@
   .py-\(--py\) {
     padding-block: var(--py);
   }
+  .py-\(--py-desktop\) {
+    padding-block: var(--py-desktop);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1651,6 +1676,9 @@
   .text-\(length\:--fs\) {
     font-size: var(--fs);
   }
+  .text-\(length\:--fs-desktop\) {
+    font-size: var(--fs-desktop);
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -1930,15 +1958,9 @@
   .\[--fs-unit\:15\] {
     --fs-unit: 15;
   }
-  .\[--fs-unit\:var\(--fs-unit-desktop\)\] {
-    --fs-unit: var(--fs-unit-desktop);
-  }
   .\[--gap-unit\:2\] {
     --gap-unit: 2;
   }
-  .\[--gap-unit\:var\(--gap-unit-desktop\)\] {
-    --gap-unit: var(--gap-unit-desktop);
-  }
   .\[--lh\:1\.3\] {
     --lh: 1.3;
   }
@@ -1960,9 +1982,6 @@
   .\[--py-unit\:3\] {
     --py-unit: 3;
   }
-  .\[--py-unit\:var\(--py-unit-desktop\)\] {
-    --py-unit: var(--py-unit-desktop);
-  }
   .\[--size-unit\:4\] {
     --size-unit: 4;
   }
@@ -2201,24 +2220,29 @@
       flex-direction: column;
     }
   }
-  .max-tablet\:\[--fs-unit\:9\] {
+  .max-tablet\:gap-\(--gap-tablet\) {
     @media (width < 64rem) {
-      --fs-unit: 9;
+      gap: var(--gap-tablet);
     }
   }
-  .max-tablet\:\[--fs-unit\:var\(--fs-unit-tablet\)\] {
+  .max-tablet\:px-\(--px-tablet\) {
     @media (width < 64rem) {
-      --fs-unit: var(--fs-unit-tablet);
+      padding-inline: var(--px-tablet);
     }
   }
-  .max-tablet\:\[--gap-unit\:var\(--gap-unit-tablet\)\] {
+  .max-tablet\:py-\(--py-tablet\) {
     @media (width < 64rem) {
-      --gap-unit: var(--gap-unit-tablet);
+      padding-block: var(--py-tablet);
     }
   }
-  .max-tablet\:\[--py-unit\:var\(--py-unit-tablet\)\] {
+  .max-tablet\:text-\(length\:--fs-tablet\) {
     @media (width < 64rem) {
-      --py-unit: var(--py-unit-tablet);
+      font-size: var(--fs-tablet);
+    }
+  }
+  .max-tablet\:\[--fs-unit\:12\] {
+    @media (width < 64rem) {
+      --fs-unit: 12;
     }
   }
   .max-mobile\:hidden {
@@ -2231,19 +2255,29 @@
       flex-direction: column;
     }
   }
-  .max-mobile\:\[--fs-unit\:var\(--fs-unit-mobile\)\] {
+  .max-mobile\:gap-\(--gap-mobile\) {
+    @media (width < 48rem) {
+      gap: var(--gap-mobile);
+    }
+  }
+  .max-mobile\:px-\(--px-mobile\) {
     @media (width < 48rem) {
-      --fs-unit: var(--fs-unit-mobile);
+      padding-inline: var(--px-mobile);
     }
   }
-  .max-mobile\:\[--gap-unit\:var\(--gap-unit-mobile\)\] {
+  .max-mobile\:py-\(--py-mobile\) {
     @media (width < 48rem) {
-      --gap-unit: var(--gap-unit-mobile);
+      padding-block: var(--py-mobile);
     }
   }
-  .max-mobile\:\[--py-unit\:var\(--py-unit-mobile\)\] {
+  .max-mobile\:text-\(length\:--fs-mobile\) {
     @media (width < 48rem) {
-      --py-unit: var(--py-unit-mobile);
+      font-size: var(--fs-mobile);
+    }
+  }
+  .max-mobile\:\[--fs-unit\:9\] {
+    @media (width < 48rem) {
+      --fs-unit: 9;
     }
   }
   .sm\:grid-cols-2 {
@@ -2294,13 +2328,21 @@
       --fs-unit-desktop: var(--fs-unit);
       --fs-unit-tablet: var(--fs-unit);
       --fs-unit-mobile: var(--fs-unit);
-      --py: calc(var(--py-unit) * var(--spacing));
-      --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
-      --gap: calc(var(--gap-unit) * var(--spacing));
-      --fs: calc(var(--fs-unit) * var(--fs-base));
+      --py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
+      --py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
+      --py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
+      --px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
+      --px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
+      --px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
+      --gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
+      --gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
+      --gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
+      --fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
+      --fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
+      --fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
+      --pl: calc(var(--py-unit) * var(--spacing));
       --size: calc(var(--size-unit) * var(--spacing));
       --br: calc(var(--br-unit) * var(--br-base));
-      --pl: calc(var(--py-unit) * var(--spacing));
     }
   }
   @layer components {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/md",
-  "version": "0.9.0-alpha.20260105192120.1be78c6",
+  "version": "0.9.0-alpha.20260106191130.bc0ea5f",
   "description": "Markdown component for VaneUI - A React component that renders markdown using @vaneui/ui components",
   "author": "",
   "license": "ISC",
@@ -62,7 +62,7 @@
     "@types/jest": "^29.5.14",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "@vaneui/ui": "^0.9.0-alpha.20260105191526.b49b458",
+    "@vaneui/ui": "^0.9.0-alpha.20260106184406.602ce72",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.4",
     "jsdom": "^26.1.0",