@godxjp/ui 28.8.0 → 28.9.0

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.8.0",
+  "version": "28.9.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/lib/variants.js

@@ -39,7 +39,10 @@ const flexGapClass = {
   6: "ui-flex-gap-6",
   8: "ui-flex-gap-8",
   10: "ui-flex-gap-10",
-  12: "ui-flex-gap-12"
+  12: "ui-flex-gap-12",
+  // Bậc BAND của trang marketing (gh#839) — xem GapStepProp.
+  20: "ui-flex-gap-20",
+  24: "ui-flex-gap-24"
 };
 function padStepToken(step) {
   if (step === "none" || step === 0) {

package/dist/props/vocabulary/layout.prop.d.ts

@@ -84,7 +84,7 @@ export type GapNameProp = "none" | "xs" | "sm" | "md" | "lg" | "xl";
  * tên mang ý ĐỊNH ("cách nhau vừa phải, tuỳ trục"), số mang GIÁ TRỊ ("đúng
  * 12px"). Trộn hai nghĩa vào một thang là lý do thang cũ vừa thô vừa khó đoán.
  */
-export type GapStepProp = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+export type GapStepProp = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 20 | 24;
 export type GapProp = GapNameProp | GapStepProp;
 /**
  * Đệm TRONG của một primitive bố cục.

package/dist/styles/base.css

@@ -130,17 +130,38 @@
   --color-wa-sumi: var(--wa-sumi);
   --color-wa-nezu: var(--wa-nezu);
 
-  --text-2xs: var(--font-size-2xs);
-  --text-xs: var(--font-size-xs);
-  --text-sm: var(--font-size-sm);
+  --text-2xs: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --text-xs: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+  --text-sm: var(--font-size-sm, var(--font-size-base));
   --text-base: var(--font-size-base);
-  --text-lg: var(--font-size-lg);
-  --text-xl: var(--font-size-xl);
-  --text-2xl: var(--font-size-2xl);
+  --text-lg: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
+  --text-xl: var(
+    --font-size-xl,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio)
+    )
+  );
+  --text-2xl: var(
+    --font-size-2xl,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio) * var(--font-size-ratio)
+    )
+  );
 
-  --text-3xl: var(--font-size-3xl);
-  --text-4xl: var(--font-size-4xl);
-  --text-5xl: var(--font-size-5xl);
+  --text-3xl: var(
+    --font-size-3xl,
+    calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio))
+  );
+  --text-4xl: var(--font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)));
+  --text-5xl: var(--font-size-5xl, var(--font-size-display));
 }
 
 @layer base {
@@ -175,32 +196,44 @@
   }
 
   h1 {
-    font-size: var(--heading-h1);
+    font-size: var(
+      --heading-h1,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h2 {
-    font-size: var(--heading-h2);
+    font-size: var(
+      --heading-h2,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h3 {
-    font-size: var(--heading-h3);
+    font-size: var(--heading-h3, var(--font-size-base));
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h4 {
-    font-size: var(--heading-h4);
+    font-size: var(
+      --heading-h4,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }
 
   h5,
   h6 {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-tight);
   }

package/dist/styles/card-layout.css

@@ -666,7 +666,7 @@
 
   [data-slot="service-launcher-skeleton-status"] {
     width: var(--card-service-launcher-skeleton-status-width);
-    height: var(--font-size-xs);
+    height: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
     margin-inline-start: auto;
   }
 
@@ -674,7 +674,7 @@
   [data-slot="service-launcher-skeleton-metadata"],
   [data-slot="service-launcher-skeleton-action"] {
     width: 100%;
-    height: var(--font-size-xs);
+    height: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
   [data-slot="service-launcher-skeleton-action"] {

package/dist/styles/chart-layout.css

@@ -10,7 +10,7 @@
 }
 
 .ui-chart-title {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-sm, var(--font-size-base));
   font-weight: var(--font-weight-medium);
   color: hsl(var(--foreground));
 }
@@ -22,7 +22,7 @@
 
 .ui-chart .recharts-text,
 .ui-chart .recharts-legend-item-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   fill: hsl(var(--muted-foreground));
   color: hsl(var(--muted-foreground));
 }
@@ -36,12 +36,12 @@
   border: 1px solid hsl(var(--border)) !important;
   background: hsl(var(--popover)) !important;
   color: hsl(var(--popover-foreground));
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 }
 
 .ui-chart-footer {
   margin-block-start: var(--chart-trend-footer-gap);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   color: hsl(var(--muted-foreground));
 }
 
@@ -118,7 +118,7 @@
   overflow: hidden;
   font-size: var(--chart-trend-tick-font-size);
 
-    line-height: var(--line-height-normal);
+  line-height: var(--line-height-normal);
   color: hsl(var(--muted-foreground));
   text-align: center;
   text-overflow: ellipsis;
@@ -131,7 +131,7 @@
   inset-inline-start: 0;
   visibility: hidden;
   margin-inline-end: var(--chart-category-axis-gap);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   white-space: nowrap;
   pointer-events: none;
 }

package/dist/styles/control.css

@@ -100,7 +100,7 @@
 
   .ui-button {
     flex-shrink: 0;
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm, var(--font-size-base));
     outline: none;
   }
 
@@ -859,7 +859,7 @@
   .ui-command-palette-meta {
     margin-inline-start: auto;
     color: hsl(var(--muted-foreground));
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
   .ui-command-palette-state {
@@ -878,7 +878,7 @@
     padding: var(--command-palette-hint-padding-y) var(--command-palette-hint-padding-x);
     color: hsl(var(--muted-foreground));
     font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
 
   .ui-search-input {
@@ -2959,7 +2959,13 @@
   }
 
   .ui-slider[data-has-marks="true"]:not([data-orientation="vertical"]) {
-    margin-block-end: calc(var(--slider-mark-space-block-start) + var(--font-size-lg));
+    margin-block-end: calc(
+      var(--slider-mark-space-block-start) +
+        var(
+          --font-size-lg,
+          calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+        )
+    );
   }
 
   .ui-slider-marks {

package/dist/styles/data-display-layout.css

@@ -1159,19 +1159,31 @@
   }
 
   .ui-prose h1 {
-    font-size: var(--heading-h1);
+    font-size: var(
+      --heading-h1,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
   }
 
   .ui-prose h2 {
-    font-size: var(--heading-h2);
+    font-size: var(
+      --heading-h2,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
   }
 
   .ui-prose h3 {
-    font-size: var(--heading-h3);
+    font-size: var(--heading-h3, var(--font-size-base));
   }
 
   .ui-prose h4 {
-    font-size: var(--heading-h4);
+    font-size: var(
+      --heading-h4,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
   }
 
   .ui-prose :is(ul, ol) {
@@ -2059,7 +2071,10 @@
 
   .ui-tree[data-size="xs"] {
     --tree-node-height: var(--control-height-xs);
-    --tree-node-font-size: var(--font-size-xs);
+    --tree-node-font-size: var(
+      --font-size-xs,
+      calc(var(--font-size-base) / var(--font-size-ratio))
+    );
   }
 
   .ui-tree[data-size="sm"] {

package/dist/styles/density.css

@@ -61,6 +61,8 @@
   --space-inline-sm: var(--space-2);
   --space-inline-md: var(--space-3);
   --space-inline-lg: var(--space-4);
+
+  --space-inline-xl: var(--space-6);
   --space-chrome-x: var(--space-6);
   --space-chrome-y: var(--space-4);
   --space-chrome-gap: var(--space-2);

package/dist/styles/dialog-layout.css

@@ -163,7 +163,10 @@
   }
 
   [data-slot="dialog-title"] {
-    font-size: var(--font-size-lg);
+    font-size: var(
+      --font-size-lg,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);

package/dist/styles/focus-ring.css

@@ -56,7 +56,10 @@
   .ui-otp-slot[data-active="true"],
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
     outline: var(--focus-ring-width) solid
-      hsl(var(--focus-outline-color, var(--focus-ring-color, var(--ring))) / var(--focus-ring-opacity, 1));
+      hsl(
+        var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
+          var(--focus-ring-opacity, 1)
+      );
     outline-offset: var(--focus-ring-offset);
 
     transition:

package/dist/styles/layout.css

@@ -218,6 +218,13 @@
     gap: var(--space-12);
   }
 
+  .ui-flex-gap-20 {
+    gap: var(--space-20);
+  }
+  .ui-flex-gap-24 {
+    gap: var(--space-24);
+  }
+
   .ui-flex[data-direction="row"].ui-flex-gap-xs {
     gap: var(--space-inline-xs);
   }
@@ -1693,13 +1700,16 @@
     }
   }
   .ui-separator[data-label-size="2xs"] .ui-separator-label {
-    font-size: var(--font-size-2xs);
+    font-size: var(
+      --font-size-2xs,
+      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+    );
   }
   .ui-separator[data-label-size="xs"] .ui-separator-label {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
   .ui-separator[data-label-size="sm"] .ui-separator-label {
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm, var(--font-size-base));
   }
   .ui-separator[data-label-size="md"] .ui-separator-label {
     font-size: var(--font-size-base);

package/dist/styles/shell-layout.css

@@ -853,14 +853,18 @@
       grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
       grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
       grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
     }
     .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"] {
       grid-template-columns: minmax(0, 1fr) var(--app-shell-nav-rail-width);
       grid-template-areas: "topbar navrail" "main navrail" "footer navrail";
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
       grid-template-areas: "topbar topbar" "main navrail" "footer navrail";
     }
 
@@ -873,12 +877,12 @@
         minmax(0, 1fr)
         auto;
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
       grid-template-areas: "navrail" "topbar" "main" "footer";
     }
-    .app-root:where([data-sidebar="none"])[data-nav-rail]:is(
-        [data-nav-rail-position="bottom"]
-      ) {
+    .app-root:where([data-sidebar="none"])[data-nav-rail]:is([data-nav-rail-position="bottom"]) {
       grid-template-columns: minmax(0, 1fr);
       grid-template-areas: "topbar" "main" "footer" "navrail";
       grid-template-rows:
@@ -888,7 +892,9 @@
         var(--app-shell-nav-rail-height);
     }
 
-    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
+    .app-root:where(
+        [data-sidebar="none"]
+      )[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
       grid-template-areas: "topbar" "main" "footer" "navrail";
     }
   }
@@ -908,10 +914,7 @@
       display: none;
     }
 
-    .app-root[data-nav-rail]:is(
-        [data-nav-rail-position="top"],
-        [data-nav-rail-position="bottom"]
-      ) {
+    .app-root[data-nav-rail]:is([data-nav-rail-position="top"], [data-nav-rail-position="bottom"]) {
       grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;
     }
 
@@ -1325,16 +1328,11 @@
   }
 
   .ui-app-launcher-launchpad .ui-app-launcher-grid {
-    grid-template-columns: repeat(
-      auto-fit,
-      var(--app-launcher-launchpad-tile-inline-size)
-    );
+    grid-template-columns: repeat(auto-fit, var(--app-launcher-launchpad-tile-inline-size));
     max-width: calc(
       var(--app-launcher-columns) *
-        (
-          var(--app-launcher-launchpad-tile-inline-size) +
-            var(--app-launcher-launchpad-grid-gap)
-        ) - var(--app-launcher-launchpad-grid-gap)
+        (var(--app-launcher-launchpad-tile-inline-size) + var(--app-launcher-launchpad-grid-gap)) -
+        var(--app-launcher-launchpad-grid-gap)
     );
     justify-content: start;
     gap: var(--app-launcher-launchpad-grid-gap);
@@ -1664,7 +1662,10 @@
         transparent
       )
     );
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
+    color: var(
+      --sidebar-item-active-foreground,
+      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
+    );
     font-weight: var(--font-weight-medium);
   }
 
@@ -1781,7 +1782,10 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-foreground, hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels))));
+    color: var(
+      --sidebar-item-active-foreground,
+      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
+    );
     font-weight: var(--font-weight-medium);
   }
 

package/dist/styles/text-layout.css

@@ -6,25 +6,43 @@
   }
 
   [data-slot="text"][data-size="2xs"] {
-    font-size: var(--font-size-2xs);
+    font-size: var(
+      --font-size-2xs,
+      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+    );
   }
   [data-slot="text"][data-size="xs"] {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
   [data-slot="text"][data-size="sm"] {
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm, var(--font-size-base));
   }
   [data-slot="text"][data-size="md"] {
     font-size: var(--font-size-base);
   }
   [data-slot="text"][data-size="lg"] {
-    font-size: var(--font-size-lg);
+    font-size: var(
+      --font-size-lg,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
   }
   [data-slot="text"][data-size="xl"] {
-    font-size: var(--font-size-xl);
+    font-size: var(
+      --font-size-xl,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
   }
   [data-slot="text"][data-size="2xl"] {
-    font-size: var(--font-size-2xl);
+    font-size: var(
+      --font-size-2xl,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio) * var(--font-size-ratio)
+      )
+    );
   }
 
   [data-slot="text"][data-size="3xl"],
@@ -34,13 +52,21 @@
     letter-spacing: var(--letter-spacing-tight);
   }
   [data-slot="text"][data-size="3xl"] {
-    font-size: var(--font-size-3xl);
+    font-size: var(
+      --font-size-3xl,
+      calc(
+        var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
+      )
+    );
   }
   [data-slot="text"][data-size="4xl"] {
-    font-size: var(--font-size-4xl);
+    font-size: var(
+      --font-size-4xl,
+      calc(var(--font-size-display) / var(--font-size-display-ratio))
+    );
   }
   [data-slot="text"][data-size="5xl"] {
-    font-size: var(--font-size-5xl);
+    font-size: var(--font-size-5xl, var(--font-size-display));
   }
 
   [data-slot="text"][data-weight="regular"],
@@ -132,6 +158,7 @@
   [data-slot="text"][data-whitespace="pre-wrap"] {
     white-space: pre-wrap;
     overflow-wrap: break-word;
+    min-inline-size: 0;
   }
 
   [data-slot="text"][data-clamp] {
@@ -172,54 +199,98 @@
   }
 
   [data-slot="heading"][data-level="1"]:not([data-size]) {
-    font-size: var(--heading-h1);
+    font-size: var(
+      --heading-h1,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
   }
   [data-slot="heading"][data-level="2"]:not([data-size]) {
-    font-size: var(--heading-h2);
+    font-size: var(
+      --heading-h2,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
   }
   [data-slot="heading"][data-level="3"]:not([data-size]) {
-    font-size: var(--heading-h3);
+    font-size: var(--heading-h3, var(--font-size-base));
   }
   [data-slot="heading"][data-level="4"]:not([data-size]) {
-    font-size: var(--heading-h4);
+    font-size: var(
+      --heading-h4,
+      var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))
+    );
   }
 
   [data-slot="heading"][data-size="2xs"] {
-    font-size: var(--font-size-2xs);
+    font-size: var(
+      --font-size-2xs,
+      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+    );
   }
   [data-slot="heading"][data-size="xs"] {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   }
   [data-slot="heading"][data-size="sm"] {
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm, var(--font-size-base));
   }
   [data-slot="heading"][data-size="md"] {
     font-size: var(--font-size-base);
   }
   [data-slot="heading"][data-size="lg"] {
-    font-size: var(--font-size-lg);
+    font-size: var(
+      --font-size-lg,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
   }
   [data-slot="heading"][data-size="xl"] {
-    font-size: var(--font-size-xl);
+    font-size: var(
+      --font-size-xl,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio)
+      )
+    );
   }
   [data-slot="heading"][data-size="2xl"] {
-    font-size: var(--font-size-2xl);
+    font-size: var(
+      --font-size-2xl,
+      calc(
+        var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+          var(--font-size-ratio) * var(--font-size-ratio)
+      )
+    );
   }
   [data-slot="heading"][data-size="3xl"] {
-    font-size: var(--font-size-3xl);
+    font-size: var(
+      --font-size-3xl,
+      calc(
+        var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
+      )
+    );
   }
   [data-slot="heading"][data-size="4xl"] {
-    font-size: var(--font-size-4xl);
+    font-size: var(
+      --font-size-4xl,
+      calc(var(--font-size-display) / var(--font-size-display-ratio))
+    );
   }
   [data-slot="heading"][data-size="5xl"] {
-    font-size: var(--font-size-5xl);
+    font-size: var(--font-size-5xl, var(--font-size-display));
   }
 }
 
 @layer components {
 
   [data-slot="heading"][data-level="5"] {
-    font-size: var(--heading-h5);
+    font-size: var(
+      --heading-h5,
+      var(
+        --font-size-2xs,
+        calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+      )
+    );
   }
 
   [data-slot="text"][data-disabled],

package/dist/tokens/components/activity.css

@@ -12,10 +12,19 @@
 
   --activity-gap: var(--space-1);
 
-  --activity-font-size-xs: var(--font-size-2xs);
-  --activity-font-size-sm: var(--font-size-xs);
-  --activity-font-size-md: var(--font-size-sm);
-  --activity-font-size-lg: var(--font-size-lg);
+  --activity-font-size-xs: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --activity-font-size-sm: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --activity-font-size-md: var(--font-size-sm, var(--font-size-base));
+  --activity-font-size-lg: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
 
   --activity-bar-width: 4rem;
   --activity-bar-radius: var(--radius-pill);