@godxjp/ui 28.7.0 → 28.9.0

package/dist/styles/text-layout.css

@@ -6,25 +6,67 @@
   }
 
   [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"],
+  [data-slot="text"][data-size="4xl"],
+  [data-slot="text"][data-size="5xl"] {
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+  [data-slot="text"][data-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,
+      calc(var(--font-size-display) / var(--font-size-display-ratio))
+    );
+  }
+  [data-slot="text"][data-size="5xl"] {
+    font-size: var(--font-size-5xl, var(--font-size-display));
   }
 
   [data-slot="text"][data-weight="regular"],
@@ -116,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] {
@@ -154,24 +197,100 @@
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-tight);
   }
-  [data-slot="heading"][data-level="1"] {
-    font-size: var(--heading-h1);
+
+  [data-slot="heading"][data-level="1"]:not([data-size]) {
+    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,
+      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, var(--font-size-base));
   }
-  [data-slot="heading"][data-level="2"] {
-    font-size: var(--heading-h2);
+  [data-slot="heading"][data-level="4"]:not([data-size]) {
+    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,
+      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, calc(var(--font-size-base) / var(--font-size-ratio)));
+  }
+  [data-slot="heading"][data-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,
+      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
+    );
   }
-  [data-slot="heading"][data-level="3"] {
-    font-size: var(--heading-h3);
+  [data-slot="heading"][data-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-level="4"] {
-    font-size: var(--heading-h4);
+  [data-slot="heading"][data-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,
+      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,
+      calc(var(--font-size-display) / var(--font-size-display-ratio))
+    );
+  }
+  [data-slot="heading"][data-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/base.css

@@ -44,3 +44,8 @@
 @import "./components/conversations.css";
 @import "./components/float-button.css";
 @import "./components/draggable-panel.css";
+@import "./components/masonry.css";
+@import "./components/mega-menu.css";
+@import "./components/marquee.css";
+@import "./components/affix.css";
+@import "./components/anchor.css";

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/affix.css

@@ -0,0 +1,7 @@
+
+:root {
+
+  --affix-inset-block-start: 0px;
+
+  --affix-inset-block-end: 0px;
+}

package/dist/tokens/components/anchor.css

@@ -0,0 +1,17 @@
+
+:root {
+
+  --anchor-ink-width: 2px;
+
+  --anchor-ink-color: initial;
+
+  --anchor-track-color: initial;
+
+  --anchor-item-padding-block: var(--space-1);
+
+  --anchor-item-padding-inline: var(--space-3);
+
+  --anchor-nested-padding-inline: var(--space-4);
+
+  --anchor-gap: var(--space-inline-lg);
+}

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);
 
@@ -377,11 +416,11 @@
 
   --control-label-disabled-alpha: 0.7;
 
-  --control-surface-border-color: hsl(var(--input));
-  --control-surface-background: hsl(var(--background));
+  --control-surface-border-color: initial;
+  --control-surface-background: initial;
 
   --control-filled-border-color: transparent;
-  --control-filled-background: hsl(var(--muted));
+  --control-filled-background: initial;
   --control-filled-shadow: none;
 
   --control-borderless-border-color: transparent;

package/dist/tokens/components/conversations.css

@@ -9,7 +9,10 @@
   --conversations-item-gap: var(--space-inline-sm);
   --conversations-item-padding-inline: var(--space-inline-sm);
   --conversations-item-radius: var(--radius);
-  --conversations-item-font-size: var(--font-size-xs);
+  --conversations-item-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
 
   --conversations-item-color: initial;
   --conversations-item-active-background: initial;