@godxjp/ui 28.8.0 → 28.9.0

package/dist/tokens/components/navigation.css

@@ -7,7 +7,7 @@
   --pagination-size-width: 5.5rem;
 
   --pagination-page-padding-x: var(--space-1);
-  --pagination-total-font-size: var(--font-size-sm);
+  --pagination-total-font-size: var(--font-size-sm, var(--font-size-base));
 
   --pagination-icon-size: var(--control-icon-size);
 
@@ -18,12 +18,18 @@
   --pagination-jumper-font-size: var(--pagination-total-font-size);
   --filter-bar-gap: var(--space-3);
   --filter-bar-padding-y: var(--space-2);
-  --filter-label-font-size: var(--font-size-xs);
+  --filter-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --filter-picker-width-sm: 11rem;
   --filter-picker-width-md: 14rem;
   --steps-inline-gap: var(--space-2);
   --steps-inline-item-gap: var(--space-1);
-  --steps-inline-font-size: var(--font-size-xs);
+  --steps-inline-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --steps-inline-separator-size: var(--control-icon-size-sm);
 
   --steps-inline-index-font-weight: var(--font-weight-bold);
@@ -33,11 +39,17 @@
   --app-setting-picker-compact-control-height: var(--control-height-sm);
   --app-setting-picker-compact-padding-x: var(--space-2);
   --app-setting-picker-compact-gap: var(--space-1);
-  --app-setting-picker-compact-font-size: var(--font-size-xs);
-  --breadcrumb-font-size: var(--font-size-xs);
+  --app-setting-picker-compact-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --breadcrumb-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
-  --menu-shortcut-font-size: var(--font-size-xs);
+  --menu-shortcut-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
@@ -64,9 +76,15 @@
   --tabs-trigger-height-sm: var(--band-height-sm);
   --tabs-trigger-height-md: var(--band-height-md);
   --tabs-trigger-height-lg: var(--band-height-lg);
-  --tabs-trigger-font-size-sm: var(--font-size-xs);
+  --tabs-trigger-font-size-sm: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --tabs-trigger-font-size-md: var(--font-size-base);
-  --tabs-trigger-font-size-lg: var(--font-size-lg);
+  --tabs-trigger-font-size-lg: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
   --tabs-trigger-padding-x-sm: var(--space-2);
   --tabs-trigger-padding-x-md: var(--space-3);
   --tabs-trigger-padding-x-lg: var(--space-4);
@@ -86,7 +104,7 @@
   --tabs-count-min-width: var(--space-4);
   --tabs-count-space-inline: var(--space-1);
   --tabs-count-gap: var(--space-1);
-  --tabs-count-font-size: var(--font-size-xs);
+  --tabs-count-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   --tabs-count-radius: var(--radius-pill);
   --tabs-count-background: initial;
 
@@ -153,12 +171,18 @@
   --steps-dot-size: 0.625rem;
   --steps-dot-process-ring-width: var(--stroke-xl);
   --steps-marker-border-width: var(--stroke-md);
-  --steps-marker-font-size: var(--font-size-sm);
+  --steps-marker-font-size: var(--font-size-sm, var(--font-size-base));
   --steps-marker-icon-size: var(--icon-size-md);
   --steps-wait-icon-size: var(--icon-size-xs);
-  --steps-title-font-size: var(--font-size-sm);
-  --steps-title-font-size-compact: var(--font-size-xs);
-  --steps-subtitle-font-size: var(--font-size-xs);
+  --steps-title-font-size: var(--font-size-sm, var(--font-size-base));
+  --steps-title-font-size-compact: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --steps-subtitle-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --steps-vertical-space-gap: var(--space-3);
   --steps-vertical-space-block-end: var(--space-8);

package/dist/tokens/components/segmented.css

@@ -11,7 +11,10 @@
 
   --segmented-item-padding-inline: calc(var(--control-padding-x) - 1px);
 
-  --segmented-xs-font-size: var(--font-size-xs);
+  --segmented-xs-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --segmented-xs-item-padding-inline: calc(var(--control-padding-x-compact) - 1px);
 

package/dist/tokens/components/separator.css

@@ -9,7 +9,10 @@
 
   --separator-label-inset: initial;
 
-  --separator-label-font-size: var(--font-size-xs);
+  --separator-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --separator-label-line-height: var(--line-height-normal);
   --separator-label-font-weight: var(--font-weight-medium);
 

package/dist/tokens/components/shell.css

@@ -2,9 +2,18 @@
 
 :root {
   --responsive-grid-column-width: 20rem;
-  --sidebar-section-label-font-size: var(--font-size-2xs);
-  --sidebar-product-tenant-font-size: var(--font-size-2xs);
-  --sidebar-badge-font-size: var(--font-size-2xs);
+  --sidebar-section-label-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-product-tenant-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-badge-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
   --sidebar-badge-background: initial;
   --sidebar-badge-foreground: initial;
@@ -23,15 +32,39 @@
 
   --topbar-icon-focus-ring-alpha: 1;
 
-  --sidebar-user-role-font-size: var(--font-size-2xs);
+  --sidebar-user-role-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --org-switcher-meta-foreground: var(--muted-foreground);
-  --sidebar-nav-sub-font-size: var(--font-size-xs);
-  --sidebar-flyout-title-font-size: var(--font-size-xs);
-  --topbar-chip-icon-font-size: var(--font-size-2xs);
-  --kbd-font-size: var(--font-size-2xs);
-  --sidebar-logo-mark-font-size: var(--font-size-xs);
-  --sidebar-avatar-font-size: var(--font-size-2xs);
-  --sidebar-user-name-font-size: var(--font-size-xs);
+  --sidebar-nav-sub-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --sidebar-flyout-title-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --topbar-chip-icon-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --kbd-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-logo-mark-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --sidebar-avatar-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --sidebar-user-name-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --sidebar-gradient: none;
   --topbar-gradient: none;
@@ -78,7 +111,10 @@
   --sidebar-brand-mark-size: 1.375rem;
   --sidebar-nav-item-height: var(--band-height-md);
 
-  --sidebar-nav-item-font-size: var(--font-size-xs);
+  --sidebar-nav-item-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --sidebar-nav-item-line-height: 1.5;
 
@@ -124,7 +160,10 @@
   --topbar-item-badge-offset-inline: var(--space-1);
   --topbar-item-badge-size: 1rem;
   --topbar-item-badge-padding-inline: var(--space-1);
-  --topbar-item-badge-font-size: var(--font-size-2xs);
+  --topbar-item-badge-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --topbar-item-badge-background: initial;
   --topbar-item-badge-foreground: initial;
   --topbar-item-badge-destructive-background: initial;
@@ -143,7 +182,10 @@
   --org-switcher-list-offset: 0px;
 
   --org-switcher-legend-space-gap: var(--space-4);
-  --org-switcher-legend-font-size: var(--font-size-2xs);
+  --org-switcher-legend-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --org-switcher-hint-space-gap: var(--space-1);
 
   --org-switcher-dialog-width: 26rem;
@@ -172,14 +214,20 @@
   --app-launcher-mark-radius: var(--radius);
   --app-launcher-mark-background: var(--secondary);
   --app-launcher-mark-foreground: var(--secondary-foreground);
-  --app-launcher-mark-font-size: var(--font-size-sm);
-  --app-launcher-name-font-size: var(--font-size-2xs);
-  --app-launcher-group-label-font-size: var(--font-size-2xs);
+  --app-launcher-mark-font-size: var(--font-size-sm, var(--font-size-base));
+  --app-launcher-name-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --app-launcher-group-label-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --app-launcher-group-label-color: var(--muted-foreground);
   --app-launcher-state-min-height: 8rem;
 
   --app-launcher-launchpad-backdrop-background: initial;
-  --app-launcher-launchpad-backdrop-blur-size: 16px;
+  --app-launcher-launchpad-backdrop-blur-size: var(--blur-lg);
   --app-launcher-launchpad-backdrop-alpha: 55%;
 
   --app-launcher-launchpad-backdrop-color-saturate: 180%;
@@ -201,20 +249,22 @@
   --app-launcher-launchpad-mark-size: 4rem;
   --app-launcher-launchpad-mark-radius: var(--radius-lg);
 
-  --app-launcher-launchpad-mark-background: color-mix(
-    in srgb,
-    hsl(var(--card)) 78%,
-    transparent
-  );
+  --app-launcher-launchpad-mark-background: color-mix(in srgb, hsl(var(--card)) 78%, transparent);
   --app-launcher-launchpad-mark-border-color: color-mix(
     in srgb,
     hsl(var(--foreground)) 14%,
     transparent
   );
-  --app-launcher-launchpad-mark-font-size: var(--font-size-lg);
+  --app-launcher-launchpad-mark-font-size: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
   --app-launcher-launchpad-mark-shadow: var(--shadow-lg);
-  --app-launcher-launchpad-name-font-size: var(--font-size-sm);
-  --app-launcher-launchpad-title-font-size: var(--font-size-2xs);
+  --app-launcher-launchpad-name-font-size: var(--font-size-sm, var(--font-size-base));
+  --app-launcher-launchpad-title-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --app-launcher-launchpad-title-letter-spacing: 0.08em;
   --app-launcher-launchpad-close-space-padding: var(--space-2);
 
@@ -227,7 +277,13 @@
   --sidebar-item-active-background-alpha: 12%;
 
   --auth-shell-control-height: var(--control-height-comfortable);
-  --auth-shell-heading-size: var(--font-size-2xl);
+  --auth-shell-heading-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)
+    )
+  );
   --auth-shell-card-max-width: 24rem;
   --auth-shell-bar-padding: var(--space-5) var(--space-6);
   --auth-shell-main-padding: var(--space-6);
@@ -296,7 +352,10 @@
   --auth-shell-registration-identity-slot-block-size: 7rem;
 
   --auth-shell-divider-gap: 0.625rem;
-  --auth-shell-divider-label-font-size: var(--font-size-2xs);
+  --auth-shell-divider-label-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --auth-shell-divider-label-line-height: calc(19 / 11);
   --auth-shell-divider-rule-color: var(--border);
   --auth-shell-divider-label-color: var(--muted-foreground);
@@ -310,10 +369,13 @@
   --auth-account-summary-identity-min-width: 12rem;
   --auth-account-summary-avatar-size: var(--control-height-sm);
   --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
-  --auth-account-summary-email-font-size: var(--font-size-sm);
+  --auth-account-summary-email-font-size: var(--font-size-sm, var(--font-size-base));
   --auth-footer-content-gap: 0.375rem;
 
-  --auth-footer-text-font-size: var(--font-size-2xs);
+  --auth-footer-text-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
   --auth-footer-target-min-size: var(--touch-target-min);
   --auth-stack-gap: var(--space-3);
@@ -350,7 +412,10 @@
   --centered-shell-landing-card-shadow: none;
 
   --centered-shell-landing-heading-size: var(--font-size-display);
-  --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
+  --centered-shell-landing-heading-size-compact: var(
+    --font-size-3xl,
+    calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio))
+  );
 
   --centered-shell-landing-background: initial;
 }

package/dist/tokens/components/table.css

@@ -15,7 +15,7 @@
   --table-pagination-padding-x: initial;
 
   --table-surface-min-inline-size: 640px;
-  --table-head-font-size: var(--font-size-xs);
+  --table-head-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --table-head-font-weight: var(--font-weight-medium);
 
@@ -59,7 +59,10 @@
   --table-action-collection-meta-width-floor: 5rem;
 
   --table-action-collection-flex-width-floor: 5rem;
-  --table-action-collection-font-size-compact: var(--font-size-xs);
+  --table-action-collection-font-size-compact: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --table-action-collection-cell-space-x-compact: var(--space-2);
   --table-action-collection-cell-padding-y-compact: var(--space-2);
   --table-action-collection-row-height-compact: var(--table-row-height-compact);
@@ -72,13 +75,16 @@
   --table-stacked-collection-card-padding-x: var(--space-inline-md);
   --table-stacked-collection-card-gap: var(--space-stack-sm);
   --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
-  --table-stacked-collection-label-font-size: var(--font-size-xs);
+  --table-stacked-collection-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --table-select-column-width: 2.5rem;
   --table-sort-icon-size: var(--icon-size-xs);
   --table-toolbar-icon-size: var(--icon-size-md);
   --table-pagination-icon-size: var(--icon-size-md);
-  --table-pagination-font-size: var(--font-size-sm);
+  --table-pagination-font-size: var(--font-size-sm, var(--font-size-base));
 
   --table-skeleton-check-size: 1rem;
 
@@ -86,7 +92,7 @@
   --table-skeleton-line-height: var(--table-skeleton-line-block-size);
   --table-skeleton-radius: var(--radius-sm);
 
-  --table-font-size: var(--font-size-sm);
+  --table-font-size: var(--font-size-sm, var(--font-size-base));
 
   --table-line-height: calc(1.25 / 0.875);
 

package/dist/tokens/components/thought-chain.css

@@ -7,7 +7,10 @@
   --thought-chain-body-gap: var(--space-1);
 
   --thought-chain-icon-size: var(--band-height-sm);
-  --thought-chain-icon-font-size: var(--font-size-xs);
+  --thought-chain-icon-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --thought-chain-icon-radius: var(--radius-pill);
 
   --thought-chain-icon-background: initial;

package/dist/tokens/components/toggle.css

@@ -3,7 +3,10 @@
 
   --toggle-count-min-width: var(--space-4);
   --toggle-count-space-inline: var(--space-1);
-  --toggle-count-font-size: var(--font-size-xs);
+  --toggle-count-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --toggle-count-radius: var(--radius-pill);
 
   --toggle-count-gap: 0;

package/dist/tokens/components/tree.css

@@ -9,7 +9,7 @@
   --tree-node-padding-inline: var(--space-2);
   --tree-node-gap: var(--space-2);
   --tree-node-radius: var(--radius-sm);
-  --tree-node-font-size: var(--font-size-sm);
+  --tree-node-font-size: var(--font-size-sm, var(--font-size-base));
 
   --tree-switcher-size: 1.25rem;
 

package/dist/tokens/components/upload.css

@@ -7,17 +7,26 @@
   --upload-dropzone-border-width: var(--stroke-md);
   --upload-dropzone-icon-size: var(--icon-size-3xl);
   --upload-dropzone-hint-space-block-start: var(--space-3);
-  --upload-dropzone-hint-font-size: var(--font-size-sm);
+  --upload-dropzone-hint-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-dropzone-meta-space-block-start: var(--space-1);
-  --upload-dropzone-meta-font-size: var(--font-size-xs);
+  --upload-dropzone-meta-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --upload-tile-size: 6rem;
   --upload-tile-radius: var(--radius-md);
   --upload-tile-space-gap: var(--space-3);
   --upload-tile-icon-size: var(--icon-size-xl);
   --upload-tile-label-space-block-start: var(--space-1);
-  --upload-tile-label-font-size: var(--font-size-xs);
-  --upload-tile-overlay-font-size: var(--font-size-xs);
+  --upload-tile-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --upload-tile-overlay-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --upload-overlay-background: initial;
   --upload-overlay-alpha: 70%;
@@ -33,14 +42,17 @@
 
   --upload-picture-icon-size: var(--icon-size-2xl);
   --upload-picture-empty-label-space-block-start: var(--space-2);
-  --upload-picture-empty-label-font-size: var(--font-size-sm);
-  --upload-picture-overlay-font-size: var(--font-size-sm);
+  --upload-picture-empty-label-font-size: var(--font-size-sm, var(--font-size-base));
+  --upload-picture-overlay-font-size: var(--font-size-sm, var(--font-size-base));
 
   --upload-picture-badge-radius: var(--radius-md);
   --upload-picture-badge-offset: var(--space-2);
   --upload-picture-badge-space-inline: var(--space-2);
   --upload-picture-badge-space-block: 0.125rem;
-  --upload-picture-badge-font-size: var(--font-size-xs);
+  --upload-picture-badge-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --upload-avatar-size: 6rem;
 
@@ -57,14 +69,14 @@
   --upload-draft-space-block: var(--space-2);
   --upload-draft-space-gap: var(--space-2);
   --upload-draft-radius: var(--radius-md);
-  --upload-draft-font-size: var(--font-size-sm);
+  --upload-draft-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-draft-icon-size: var(--icon-size-sm);
 
   --upload-row-space-inline: var(--space-3);
   --upload-row-space-block: var(--space-2);
   --upload-row-space-gap: var(--space-3);
   --upload-row-radius: var(--radius-md);
-  --upload-row-font-size: var(--font-size-sm);
+  --upload-row-font-size: var(--font-size-sm, var(--font-size-base));
   --upload-row-icon-size: var(--icon-size-md);
 
   --upload-crop-dialog-max-width: 24rem;

package/dist/tokens/foundation.css

@@ -146,37 +146,27 @@
 
   --font-size-base: 0.875rem;
   --font-size-ratio: 1.1227;
-  --font-size-2xs: calc(
-    var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)
-  );
-  --font-size-xs: calc(var(--font-size-base) / var(--font-size-ratio));
-  --font-size-sm: var(--font-size-base);
-  --font-size-lg: calc(
-    var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)
-  );
-  --font-size-xl: calc(var(--font-size-lg) * var(--font-size-ratio));
-  --font-size-2xl: calc(var(--font-size-xl) * var(--font-size-ratio));
-
-  --font-size-display: 3.375rem;
+
+  --font-size-2xs: initial;
+  --font-size-xs: initial;
+  --font-size-sm: initial;
+  --font-size-lg: initial;
+  --font-size-xl: initial;
+  --font-size-2xl: initial;
+
+  --font-size-display: clamp(2rem, 1.5rem + 2.5vw, 3.375rem);
   --font-size-display-ratio: 1.28;
-  --font-size-3xl: calc(
-    var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
-  );
-  --font-size-4xl: calc(
-    var(--font-size-display) / var(--font-size-display-ratio)
-  );
-  --font-size-5xl: var(--font-size-display);
-
-  --heading-h1: calc(
-    var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio)
-  );
-  --heading-h2: calc(
-    var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)
-  );
-  --heading-h3: var(--font-size-base);
-  --heading-h4: var(--font-size-xs);
-
-  --heading-h5: var(--font-size-2xs);
+
+  --font-size-3xl: initial;
+  --font-size-4xl: initial;
+  --font-size-5xl: initial;
+
+  --heading-h1: initial;
+  --heading-h2: initial;
+  --heading-h3: initial;
+  --heading-h4: initial;
+
+  --heading-h5: initial;
 
   --font-weight-normal: 400;
   --font-weight-medium: 500;
@@ -225,6 +215,10 @@
   --stroke-xl: 4px;
   --stroke-2xl: 6px;
 
+  --blur-sm: 4px;
+  --blur-md: 8px;
+  --blur-lg: 16px;
+
   --band-height-xs: 1.5rem;
   --band-height-sm: 1.75rem;
   --band-height-md: 2rem;

package/dist/tokens/semantic/layout.css

@@ -18,6 +18,8 @@
   --space-inline-md: var(--space-3);
   --space-inline-lg: var(--space-4);
 
+  --space-inline-xl: var(--space-6);
+
   --overlay-z-index: 50;
 
   --sticky-z-index: 20;
@@ -71,14 +73,26 @@
 
   --page-measure-wide: 72rem;
 
-  --page-title-font-size: var(--heading-h1);
-  --page-title-font-size-compact: var(--heading-h2);
+  --page-title-font-size: var(
+    --heading-h1,
+    calc(
+      var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
+        var(--font-size-ratio)
+    )
+  );
+  --page-title-font-size-compact: var(
+    --heading-h2,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
   --page-subtitle-font-size: var(--font-size-base);
-  --page-subtitle-font-size-compact: var(--font-size-sm);
+  --page-subtitle-font-size-compact: var(--font-size-sm, var(--font-size-base));
 
-  --page-title-font-size-chrome: var(--heading-h3);
+  --page-title-font-size-chrome: var(--heading-h3, var(--font-size-base));
 
-  --page-subtitle-font-size-chrome: var(--font-size-2xs);
+  --page-subtitle-font-size-chrome: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
   --page-pad-block-start-chrome: 0px;
 

package/docs/TOKENS.md

@@ -297,7 +297,22 @@ Instead, declare the knob `initial` (a real, catalogued, guaranteed-invalid decl
 }
 ```
 
-The same rule applies to `@theme inline` (utilities re-resolve scoped roles) and to any `:root`-declared **composite** that wraps a role (e.g. a focus-ring box-shadow): read the role **directly** at the call site, never through a frozen `:root` intermediate. Pure non-colour knobs (spacing, radius, font-size) don't need this — they aren't scope-retinted — but any colour/fill/ border/shadow knob whose default is a role token does.
+The same rule applies to `@theme inline` (utilities re-resolve scoped roles) and to any `:root`-declared **composite** that wraps a role (e.g. a focus-ring box-shadow): read the role **directly** at the call site, never through a frozen `:root` intermediate. Pure non-colour knobs (spacing, radius, font-size) don't need this **as long as nothing re-scopes what they read** — see the two paragraphs below, which is where that qualifier cost a release.
+
+**A DERIVED TIER FREEZES ON ITS OWN SEED — the `--font-size-*` ramp (gh#834).** The type scale is one base and one ratio, and every step used to be written `--font-size-5xl: var(--font-size-display)` / `--font-size-lg: calc(var(--font-size-base) * …)` on `:root`. Those substitute on `<html>`, so a `[data-tenant]` that re-seeds the base — the route level 3 of `docs/CUSTOMER-THEMING.md` documents, and which level 1 calls a seed — moved `text-base` and **nothing else**. Measured with `--font-size-base: 24px; --font-size-display: 80px` on a scope: 2xs/xs/sm/lg/xl/2xl/3xl/4xl/5xl all sat exactly where `:root` had left them, and a showcase whose comment read "80px hero via text-5xl" painted 54.
+
+So every **derived** step is now an `initial` knob and the formula lives at the call site, spelled in terms of the un-derived knobs only (`--font-size-base`, `--font-size-ratio`, `--font-size-display`, `--font-size-display-ratio`) — an `initial` knob cannot be chained through, so `xl` reads `base × ratio³` rather than `lg × ratio`:
+
+```css
+:root {
+  --font-size-5xl: initial;
+} /* documented default = var(--font-size-display) */
+[data-slot="text"][data-size="5xl"] {
+  font-size: var(--font-size-5xl, var(--font-size-display));
+}
+```
+
+**Every reader must carry the fallback**: a bare `var(--font-size-xs)` on an `initial` knob resolves to nothing, and the failure is silent and total. `check:frame-token-scope` is the gate that measures both halves — it fails on a step that stops following a scoped seed, and on a bare read of an empty knob.
 
 **The same freeze bites any knob whose default is a RE-SCOPED tier, colour or not.** `--control-height` is re-scoped by `.ui-auth-shell` (44px comfortable) and by `.ui-auth-shell[data-variant="canonical"]` (36px), so a knob that mirrors it must follow the same `initial` + call-site-fallback shape:
 

package/docs/showcase/case4-login.tsx

@@ -283,11 +283,19 @@ export default function LoginShowcase() {
 
               <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">
                 ログインすると{" "}
-                <Button variant="link" size="sm" className="text-[length:var(--font-size-2xs)]">
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
+                >
                   利用規約
                 </Button>{" "}
                 ·{" "}
-                <Button variant="link" size="sm" className="text-[length:var(--font-size-2xs)]">
+                <Button
+                  variant="link"
+                  size="sm"
+                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
+                >
                   プライバシーポリシー
                 </Button>{" "}
                 に同意したものとみなされます。

package/docs/showcase/case5-shift-calendar.tsx

@@ -588,7 +588,7 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                                 tone="destructive"
                                 variant="outline"
                                 shape="sharp"
-                                className="text-[length:var(--font-size-2xs)]"
+                                className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))]"
                               >
                                 祝
                               </Badge>