@godxjp/ui 28.7.0 → 28.9.0

package/dist/tokens/components/data-display.css

@@ -7,10 +7,16 @@
 
   --accordion-focus-ring-offset: 2px;
   --carousel-dot-focus-ring-offset: 2px;
-  --progress-label-font-size: var(--font-size-xs);
-
-  --code-block-font-size: var(--font-size-sm);
-  --code-block-font-size-xs: var(--font-size-xs);
+  --progress-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+
+  --code-block-font-size: var(--font-size-sm, var(--font-size-base));
+  --code-block-font-size-xs: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --code-block-line-height: var(--line-height-normal);
   --code-block-space-inset: var(--space-3);
   --code-block-radius: var(--radius-md);
@@ -34,7 +40,7 @@
   --code-block-token-changed-color: initial;
 
   --prose-font-size: var(--font-size-base);
-  --prose-font-size-sm: var(--font-size-xs);
+  --prose-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
   --prose-line-height: var(--line-height-body);
   --prose-space-block: var(--space-3);
   --prose-heading-space-block-start: var(--space-6);
@@ -50,7 +56,10 @@
 
   --prose-link-decoration-line: underline;
   --prose-image-radius: var(--radius-md);
-  --timeline-note-font-size: var(--font-size-xs);
+  --timeline-note-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --avatar-background: initial;
 
@@ -66,11 +75,17 @@
 
   --avatar-font-size: var(--font-size-base);
 
-  --avatar-font-size-xs: var(--font-size-2xs);
+  --avatar-font-size-xs: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
 
-  --avatar-font-size-sm: var(--font-size-xs);
+  --avatar-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
-  --avatar-font-size-lg: var(--font-size-lg);
+  --avatar-font-size-lg: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
 
   --avatar-glyph-size-xs: calc(var(--icon-size-xs) * var(--scaling));
 
@@ -120,7 +135,7 @@
   --legend-item-gap: 0.3125rem;
   --legend-swatch-size: 0.625rem;
   --legend-swatch-radius: 0.125rem;
-  --legend-font-size: var(--font-size-xs);
+  --legend-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --legend-color: initial;
 
@@ -136,8 +151,11 @@
   --feature-list-space-gap: var(--space-stack-sm);
 
   --feature-list-space-inline: var(--space-inline-sm);
-  --feature-list-font-size: var(--font-size-sm);
-  --feature-list-description-font-size: var(--font-size-xs);
+  --feature-list-font-size: var(--font-size-sm, var(--font-size-base));
+  --feature-list-description-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --feature-list-mark-icon-size: var(--icon-size-md);
 
@@ -166,9 +184,18 @@
   --timeline-grid-column-min-width: 6rem;
 
   --timeline-grid-event-min-height-minutes: 36;
-  --timeline-grid-axis-font-size: var(--font-size-2xs);
-  --timeline-grid-head-font-size: var(--font-size-xs);
-  --timeline-grid-event-font-size: var(--font-size-2xs);
+  --timeline-grid-axis-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --timeline-grid-head-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --timeline-grid-event-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --timeline-grid-event-gap: var(--space-1);
   --timeline-grid-event-space-inset: var(--space-1);
   --timeline-grid-event-radius: var(--radius-sm);

package/dist/tokens/components/data-entry.css

@@ -1,8 +1,14 @@
 
 
 :root {
-  --password-strength-score-font-size: var(--font-size-xs);
-  --password-strength-checklist-font-size: var(--font-size-xs);
+  --password-strength-score-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --password-strength-checklist-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --branch-scope-picker-gap: 0.75rem;
 

package/dist/tokens/components/descriptions.css

@@ -10,7 +10,7 @@
 
   --descriptions-label-gap: 0.75rem;
 
-  --descriptions-value-font-size: var(--font-size-sm);
+  --descriptions-value-font-size: var(--font-size-sm, var(--font-size-base));
 
   --descriptions-value-line-height: calc(1.25 / 0.875);
 

package/dist/tokens/components/feedback.css

@@ -12,8 +12,11 @@
   --sheet-title-row-space-gap: var(--space-3);
   --sheet-extra-space-gap: var(--space-2);
   --sheet-footer-space-gap: var(--space-2);
-  --sheet-title-font-size: var(--font-size-lg);
-  --sheet-description-font-size: var(--font-size-sm);
+  --sheet-title-font-size: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
+  --sheet-description-font-size: var(--font-size-sm, var(--font-size-base));
 
   --sheet-body-space-block: var(--space-1);
 
@@ -45,7 +48,7 @@
 
   --dialog-close-size: var(--touch-target-min);
 
-  --dialog-step-up-error-font-size: var(--font-size-sm);
+  --dialog-step-up-error-font-size: var(--font-size-sm, var(--font-size-base));
 
   --alert-radius: var(--card-radius);
   --alert-space-inset: var(--space-section-active);
@@ -124,7 +127,7 @@
   --tooltip-space-inline: var(--space-2);
   --tooltip-space-block: var(--space-1);
   --tooltip-radius: var(--radius);
-  --tooltip-font-size: var(--font-size-xs);
+  --tooltip-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --tooltip-shadow: var(--shadow-md);
 
@@ -137,7 +140,7 @@
   --popover-radius: var(--radius);
   --popover-shadow: var(--shadow-md);
   --popover-header-space-gap: var(--space-1);
-  --popover-header-font-size: var(--font-size-sm);
+  --popover-header-font-size: var(--font-size-sm, var(--font-size-base));
 
   --popover-surface-background: initial;
   --popover-surface-foreground: initial;

package/dist/tokens/components/float-button.css

@@ -13,7 +13,10 @@
 
   --float-button-icon-size: var(--icon-size-md);
 
-  --float-button-content-font-size: var(--font-size-2xs);
+  --float-button-content-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --float-button-content-line-height: var(--line-height-tight);
 
   --float-button-shadow: var(--shadow-lg);
@@ -25,7 +28,10 @@
   --float-button-badge-foreground: hsl(var(--destructive-foreground));
   --float-button-badge-size: var(--space-4);
   --float-button-badge-padding-inline: var(--space-1);
-  --float-button-badge-font-size: var(--font-size-2xs);
+  --float-button-badge-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
   --float-button-badge-inset-block-start: calc(var(--space-1) * -1);
   --float-button-badge-inset-inline-end: calc(var(--space-1) * -1);
   --float-button-badge-dot-size: var(--space-2);

package/dist/tokens/components/form.css

@@ -6,7 +6,7 @@
 
   --form-label-gap: var(--space-4);
 
-  --form-label-font-size: var(--text-sm);
+  --form-label-font-size: var(--control-label-font-size, var(--text-sm));
 
   --form-block-gap: var(--space-4);
 

package/dist/tokens/components/legal-document.css

@@ -14,15 +14,24 @@
   --legal-document-toc-gap: var(--space-1);
   --legal-document-toc-item-padding: var(--space-1) var(--space-2);
   --legal-document-toc-item-radius: var(--radius);
-  --legal-document-toc-title-font-size: var(--font-size-2xs);
-  --legal-document-toc-font-size: var(--font-size-xs);
+  --legal-document-toc-title-font-size: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --legal-document-toc-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --legal-document-toc-marker-width: var(--stroke-md);
 
   --legal-document-nav-gap: var(--space-4);
   --legal-document-header-gap: var(--space-2);
   --legal-document-meta-gap: var(--space-2);
-  --legal-document-meta-font-size: var(--font-size-xs);
+  --legal-document-meta-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --legal-document-section-gap: var(--space-10);
   --legal-document-section-title-gap: var(--space-3);
 

package/dist/tokens/components/logo.css

@@ -5,9 +5,12 @@
   --logo-size-sm: 1.5rem;
   --logo-size-md: 1.75rem;
   --logo-size-lg: 2.25rem;
-  --logo-font-size-xs: var(--font-size-2xs);
-  --logo-font-size-sm: var(--font-size-xs);
-  --logo-font-size-md: var(--font-size-sm);
+  --logo-font-size-xs: var(
+    --font-size-2xs,
+    calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+  );
+  --logo-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
+  --logo-font-size-md: var(--font-size-sm, var(--font-size-base));
   --logo-font-size-lg: var(--font-size-base);
 
   --logo-success-background: initial;
@@ -38,10 +41,16 @@
   --logo-godx-size: initial;
 
   --logo-wordmark-gap: var(--space-2);
-  --logo-wordmark-font-size-xs: var(--font-size-xs);
-  --logo-wordmark-font-size-sm: var(--font-size-sm);
+  --logo-wordmark-font-size-xs: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --logo-wordmark-font-size-sm: var(--font-size-sm, var(--font-size-base));
   --logo-wordmark-font-size-md: var(--font-size-base);
-  --logo-wordmark-font-size-lg: var(--font-size-lg);
+  --logo-wordmark-font-size-lg: var(
+    --font-size-lg,
+    calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+  );
   --logo-wordmark-font-weight: 700;
   --logo-wordmark-letter-spacing: -0.01em;
   --logo-wordmark-font-family: initial;

package/dist/tokens/components/marquee.css

@@ -0,0 +1,7 @@
+
+:root {
+
+  --marquee-gap-inline: var(--space-inline-lg);
+
+  --marquee-mask-width: var(--space-10);
+}

package/dist/tokens/components/masonry.css

@@ -0,0 +1,6 @@
+
+:root {
+
+  --masonry-gap-inline: 0px;
+  --masonry-gap-block: 0px;
+}

package/dist/tokens/components/mega-menu.css

@@ -0,0 +1,71 @@
+
+
+:root {
+
+  --mega-menu-bar-gap: var(--space-inline-xs);
+  --mega-menu-trigger-height: var(--control-height);
+  --mega-menu-trigger-padding-x: var(--space-3);
+  --mega-menu-trigger-gap: var(--space-inline-sm);
+  --mega-menu-trigger-radius: var(--radius-sm);
+  --mega-menu-trigger-font-size: var(--font-size-sm, var(--font-size-base));
+  --mega-menu-trigger-foreground: hsl(var(--foreground));
+  --mega-menu-trigger-background: transparent;
+
+  --mega-menu-trigger-hover-background: initial;
+  --mega-menu-trigger-hover-foreground: initial;
+  --mega-menu-trigger-open-background: initial;
+  --mega-menu-trigger-open-foreground: initial;
+  --mega-menu-trigger-current-foreground: initial;
+  --mega-menu-trigger-disabled-alpha: 0.5;
+  --mega-menu-expand-icon-size: var(--control-icon-size-sm);
+
+  --mega-menu-panel-background: hsl(var(--popover));
+  --mega-menu-panel-foreground: hsl(var(--popover-foreground));
+  --mega-menu-panel-border-color: hsl(var(--border));
+  --mega-menu-panel-border-width: 1px;
+  --mega-menu-panel-radius: var(--radius-md);
+  --mega-menu-panel-padding: var(--space-6);
+  --mega-menu-panel-shadow: var(--shadow-md);
+  --mega-menu-panel-offset: 0px;
+
+  --mega-menu-panel-max-height: 70vh;
+
+  --mega-menu-panel-translate: var(--space-1);
+
+  --mega-menu-groups-gap: var(--space-6);
+  --mega-menu-group-gap: var(--space-inline-sm);
+
+  --mega-menu-group-min-width: 12rem;
+  --mega-menu-group-label-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --mega-menu-group-label-foreground: hsl(var(--muted-foreground));
+  --mega-menu-group-description-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --mega-menu-group-description-foreground: hsl(var(--muted-foreground));
+  --mega-menu-group-icon-size: var(--control-icon-size-sm);
+
+  --mega-menu-link-gap: var(--space-inline-sm);
+  --mega-menu-link-padding-x: var(--space-2);
+  --mega-menu-link-padding-y: var(--space-2);
+  --mega-menu-link-radius: var(--radius-sm);
+  --mega-menu-link-font-size: var(--font-size-sm, var(--font-size-base));
+  --mega-menu-link-foreground: hsl(var(--foreground));
+  --mega-menu-link-hover-background: initial;
+  --mega-menu-link-hover-foreground: initial;
+  --mega-menu-link-current-foreground: initial;
+  --mega-menu-link-description-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
+  --mega-menu-link-description-foreground: hsl(var(--muted-foreground));
+  --mega-menu-link-icon-size: var(--control-icon-size-sm);
+
+  --mega-menu-link-min-height: var(--touch-target-min);
+
+  --mega-menu-panel-footer-gap: var(--space-4);
+  --mega-menu-panel-footer-border-color: hsl(var(--border));
+}

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