@godxjp/ui 28.8.0 → 28.10.0

package/dist/styles/table-layout.css

@@ -88,12 +88,14 @@
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
     border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
-    padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
+    padding-inline-start: calc(
+      var(--table-cell-space-x, var(--space-section-active)) - var(--table-row-tone-rail-width)
+    );
   }
 
   [data-slot="table-head"] {
     height: var(--table-row-height);
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: middle;
     background: var(--table-header-background, hsl(var(--muted)));
@@ -113,7 +115,7 @@
   }
 
   [data-slot="table-cell"] {
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     vertical-align: middle;
 
     white-space: nowrap;
@@ -146,7 +148,7 @@
 
   [data-slot="table-cell"][data-indent] {
     padding-inline-start: calc(
-      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
+      var(--table-cell-space-x, var(--space-section-active)) + var(--table-cell-indent-level, 0) *
         var(--table-cell-indent-space-step)
     );
   }
@@ -207,7 +209,10 @@
     justify-content: flex-end;
     gap: var(--space-inline-sm);
     padding-block: var(--table-pagination-padding-y, var(--space-stack-sm));
-    padding-inline: var(--table-pagination-padding-x, var(--table-cell-space-x));
+    padding-inline: var(
+      --table-pagination-padding-x,
+      var(--table-cell-space-x, var(--space-section-active))
+    );
   }
 
   .ui-data-table-pagination--numbered {
@@ -634,7 +639,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="sm"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="sm"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -664,7 +678,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="md"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="md"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -694,7 +717,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="lg"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="lg"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -724,7 +756,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="xl"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="xl"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor

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);

package/dist/tokens/components/attachments.css

@@ -7,7 +7,7 @@
   --attachments-placeholder-space-inset: var(--upload-dropzone-space-inset);
   --attachments-placeholder-radius: var(--upload-dropzone-radius);
   --attachments-placeholder-icon-size: var(--upload-dropzone-icon-size);
-  --attachments-placeholder-title-font-size: var(--font-size-sm);
+  --attachments-placeholder-title-font-size: var(--font-size-sm, var(--font-size-base));
   --attachments-placeholder-description-font-size: var(--upload-dropzone-meta-font-size);
   --attachments-placeholder-gap: var(--space-2);
   --attachments-drop-overlay-background: initial;

package/dist/tokens/components/badge.css

@@ -6,7 +6,7 @@
   --badge-space-y: var(--space-1);
 
   --badge-radius: var(--radius-md);
-  --badge-font-size: var(--font-size-xs);
+  --badge-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --badge-line-height: calc(1 / 0.75);
 

package/dist/tokens/components/card.css

@@ -20,7 +20,7 @@
   --card-title-font-size: var(--font-size-base);
   --card-title-line-height: var(--line-height-tight);
   --card-title-font-weight: var(--font-weight-semibold);
-  --card-description-font-size: var(--font-size-sm);
+  --card-description-font-size: var(--font-size-sm, var(--font-size-base));
   --card-description-line-height: var(--line-height-normal);
 
   --card-background: initial;
@@ -47,13 +47,25 @@
 
   --card-featured-border-color: initial;
   --card-featured-ring-width: var(--stroke-hairline);
-  --stat-card-label-font-size: var(--font-size-xs);
+  --stat-card-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --stat-card-label-font-weight: var(--font-weight-medium);
   --stat-card-label-letter-spacing: 0.04em;
-  --stat-card-value-font-size: var(--font-size-2xl);
+  --stat-card-value-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)
+    )
+  );
   --stat-card-value-line-height: 1.1;
   --stat-card-value-font-weight: var(--font-weight-semibold);
-  --stat-card-hint-font-size: var(--font-size-xs);
+  --stat-card-hint-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --stat-card-gap: var(--space-stack-xs);
   --stat-card-icon-size: var(--icon-size-2xl);
   --stat-card-icon-glyph-size: var(--icon-size-lg);
@@ -61,7 +73,10 @@
 
   --stat-card-icon-background: initial;
   --stat-card-icon-foreground: initial;
-  --stat-card-delta-font-size: var(--font-size-xs);
+  --stat-card-delta-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --card-service-launcher-space-gap: var(--space-stack-sm);
 
@@ -75,10 +90,16 @@
   --card-service-launcher-unavailable-icon-background: initial;
   --card-service-launcher-unavailable-icon-foreground: initial;
 
-  --card-service-launcher-description-font-size: var(--font-size-xs);
+  --card-service-launcher-description-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --card-service-launcher-description-line-height: var(--line-height-body);
 
-  --card-service-launcher-metadata-font-size: var(--font-size-xs);
+  --card-service-launcher-metadata-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --card-service-launcher-metadata-line-height: var(--line-height-normal);
 
   --card-service-launcher-cta-min-height: calc(var(--control-height-lg) * 4);

package/dist/tokens/components/chart.css

@@ -24,7 +24,10 @@
 
   --chart-trend-baseline-border: initial;
   --chart-trend-tick-gap: var(--space-1);
-  --chart-trend-tick-font-size: var(--font-size-xs);
+  --chart-trend-tick-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --chart-trend-footer-gap: var(--space-2);
 }

package/dist/tokens/components/chat-composer.css

@@ -15,5 +15,8 @@
 
   --chat-composer-header-border: initial;
 
-  --chat-composer-footer-font-size: var(--font-size-xs);
+  --chat-composer-footer-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 }

package/dist/tokens/components/control.css

@@ -37,7 +37,7 @@
   --control-variant-filled-background: var(--muted);
   --control-variant-filled-hover-background: initial;
 
-  --control-count-font-size: var(--font-size-sm);
+  --control-count-font-size: var(--font-size-sm, var(--font-size-base));
   --control-count-color: var(--muted-foreground);
 
   --control-count-exceeded-color: initial;
@@ -49,11 +49,17 @@
   --input-addon-color: var(--muted-foreground);
   --input-addon-padding-inline: var(--control-padding-x);
 
-  --switch-content-font-size: var(--font-size-xs);
+  --switch-content-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --switch-content-space-inline: var(--space-1);
   --switch-spinner-size: calc(var(--switch-thumb-size) - var(--space-1));
 
-  --slider-mark-font-size: var(--font-size-xs);
+  --slider-mark-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --slider-mark-color: var(--muted-foreground);
   --slider-mark-space-block-start: var(--space-2);
   --slider-dot-size: var(--slider-track-height);
@@ -62,7 +68,10 @@
   --slider-dot-active-border-color: initial;
   --slider-tooltip-background: var(--popover);
   --slider-tooltip-color: var(--popover-foreground);
-  --slider-tooltip-font-size: var(--font-size-xs);
+  --slider-tooltip-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --slider-tooltip-radius: var(--radius-sm);
   --slider-tooltip-padding-inline: var(--space-2);
   --slider-tooltip-offset-block: var(--space-2);
@@ -161,14 +170,29 @@
     var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
   );
 
-  --choice-description-font-size: var(--font-size-xs);
-  --color-picker-hex-font-size: var(--font-size-xs);
-  --command-group-heading-font-size: var(--font-size-xs);
-  --search-input-label-font-size: var(--font-size-xs);
-  --tag-input-chip-font-size: var(--font-size-xs);
-  --toggle-sm-font-size: var(--font-size-xs);
-  --toggle-xs-font-size: var(--font-size-xs);
-  --button-sm-font-size: var(--font-size-xs);
+  --choice-description-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --color-picker-hex-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --command-group-heading-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --search-input-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --tag-input-chip-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --toggle-sm-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+  --toggle-xs-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+  --button-sm-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 }
 
 :root {
@@ -207,7 +231,7 @@
   --control-composite-field-space-gap: var(--space-2);
 
   --input-file-button-height: var(--band-height-sm);
-  --input-file-button-font-size: var(--font-size-sm);
+  --input-file-button-font-size: var(--font-size-sm, var(--font-size-base));
 
   --search-select-panel-max-width: 32rem;
 
@@ -218,13 +242,16 @@
   --search-select-list-max-height: none;
   --search-select-footer-space-inset: var(--space-1);
   --search-select-option-space-gap: var(--space-2);
-  --search-select-option-font-size: var(--font-size-sm);
-  --search-select-option-sublabel-font-size: var(--font-size-xs);
+  --search-select-option-font-size: var(--font-size-sm, var(--font-size-base));
+  --search-select-option-sublabel-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --search-select-status-space-inline: var(--space-2);
   --search-select-status-space-block: var(--space-3);
 
   --search-select-placeholder-space-block: var(--space-6);
-  --search-select-status-font-size: var(--font-size-sm);
+  --search-select-status-font-size: var(--font-size-sm, var(--font-size-base));
   --search-select-spinner-size: 1rem;
 
   --cascader-column-min-width: 9rem;
@@ -234,7 +261,7 @@
   --cascader-option-space-inline: var(--space-3);
   --cascader-option-space-block: var(--space-2);
   --cascader-option-space-gap: var(--space-1);
-  --cascader-option-font-size: var(--font-size-sm);
+  --cascader-option-font-size: var(--font-size-sm, var(--font-size-base));
   --cascader-option-icon-size: var(--icon-size-md);
 
   --cascader-result-space-inline: var(--space-2);
@@ -258,11 +285,14 @@
   --time-picker-panel-width-12h: 13rem;
   --time-picker-heading-space-inline: var(--space-1);
   --time-picker-heading-space-block: 0.375rem;
-  --time-picker-heading-font-size: var(--font-size-xs);
+  --time-picker-heading-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --time-picker-column-space-inset: var(--space-1);
   --time-picker-option-space-block: 0.375rem;
   --time-picker-option-radius: var(--radius-md);
-  --time-picker-option-font-size: var(--font-size-sm);
+  --time-picker-option-font-size: var(--font-size-sm, var(--font-size-base));
   --time-picker-footer-space-inset: var(--space-2);
   --time-picker-footer-space-gap: var(--space-2);
 
@@ -272,7 +302,7 @@
   --tree-select-row-space-block: 0.375rem;
   --tree-select-row-space-inline-end: var(--space-2);
   --tree-select-row-radius: var(--radius-sm);
-  --tree-select-row-font-size: var(--font-size-sm);
+  --tree-select-row-font-size: var(--font-size-sm, var(--font-size-base));
 
   --tree-select-depth-space-base: var(--space-2);
   --tree-select-depth-space-step: 1.25rem;
@@ -285,7 +315,7 @@
 
   --calendar-month-space-gap: var(--space-4);
   --calendar-caption-space-inline: var(--space-8);
-  --calendar-caption-font-size: var(--font-size-sm);
+  --calendar-caption-font-size: var(--font-size-sm, var(--font-size-base));
   --calendar-nav-space-block-start: var(--space-3);
 
   --calendar-nav-space-inline: var(--calendar-space-inset);
@@ -294,9 +324,12 @@
 
   --calendar-grid-space-block-start: var(--space-3);
   --calendar-week-space-block-start: var(--space-2);
-  --calendar-weekday-font-size: var(--font-size-xs);
+  --calendar-weekday-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --calendar-weekday-radius: var(--radius-md);
-  --calendar-day-font-size: var(--font-size-sm);
+  --calendar-day-font-size: var(--font-size-sm, var(--font-size-base));
   --calendar-day-radius: var(--radius-md);
   --calendar-chevron-size: var(--icon-size-md);
   --calendar-footer-space-gap: var(--space-2);
@@ -312,7 +345,7 @@
   --transfer-panes-space-gap: var(--space-3);
   --transfer-header-space-inline: var(--space-3);
   --transfer-header-space-block: var(--space-2);
-  --transfer-header-font-size: var(--font-size-sm);
+  --transfer-header-font-size: var(--font-size-sm, var(--font-size-base));
   --transfer-header-space-gap: var(--space-2);
   --transfer-search-space-inset: var(--space-2);
   --transfer-list-space-inset: var(--space-1);
@@ -320,10 +353,13 @@
   --transfer-row-space-block: var(--space-2);
   --transfer-row-space-gap: var(--space-2);
   --transfer-row-radius: var(--radius-sm);
-  --transfer-row-font-size: var(--font-size-sm);
+  --transfer-row-font-size: var(--font-size-sm, var(--font-size-base));
 
   --transfer-row-check-space-block-start: 0.125rem;
-  --transfer-row-description-font-size: var(--font-size-xs);
+  --transfer-row-description-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --transfer-empty-space-block: var(--space-8);
   --transfer-actions-space-gap: var(--space-2);
   --transfer-action-icon-size: var(--icon-size-md);
@@ -332,7 +368,7 @@
   --month-picker-grid-space-block-start: var(--space-3);
   --month-picker-grid-space-gap: var(--space-1);
   --month-picker-cell-space-inline: var(--space-4);
-  --month-picker-nav-font-size: var(--font-size-sm);
+  --month-picker-nav-font-size: var(--font-size-sm, var(--font-size-base));
 
   --month-picker-nav-rest-alpha: var(--calendar-nav-rest-alpha);
   --month-picker-icon-size: var(--icon-size-md);
@@ -343,7 +379,7 @@
   --button-bare-target-size: initial;
   --button-xs-space-inline: var(--space-2);
   --button-xs-space-gap: var(--space-1);
-  --button-xs-font-size: var(--font-size-xs);
+  --button-xs-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   --button-xs-icon-size: var(--icon-size-xs);
 
   --button-icon-space-inline-md: var(--space-3);
@@ -358,7 +394,10 @@
 
   --button-count-min-width: var(--space-4);
   --button-count-space-inline: var(--space-1);
-  --button-count-font-size: var(--font-size-xs);
+  --button-count-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --button-count-background: initial;
   --button-count-color: initial;
@@ -369,7 +408,7 @@
   --button-count-secondary-background: initial;
   --button-count-secondary-color: initial;
 
-  --control-label-font-size: var(--font-size-sm);
+  --control-label-font-size: var(--font-size-sm, var(--font-size-base));
 
   --control-label-line-height: var(--line-height-normal);