@godxjp/ui 28.8.0 → 28.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (271) hide show
  1. package/agent/START-HERE.md +193 -0
  2. package/agent/anti-ai-tells.json +158 -0
  3. package/agent/components/Accordion.json +60 -0
  4. package/agent/components/AccountChip.json +59 -0
  5. package/agent/components/Actions.json +78 -0
  6. package/agent/components/Activity.json +80 -0
  7. package/agent/components/Affix.json +78 -0
  8. package/agent/components/Alert.json +65 -0
  9. package/agent/components/AlertDialog.json +109 -0
  10. package/agent/components/AlertDialogRoot.json +52 -0
  11. package/agent/components/Anchor.json +119 -0
  12. package/agent/components/AppLauncher.json +95 -0
  13. package/agent/components/AppProvider.json +105 -0
  14. package/agent/components/AppSettingPicker.json +88 -0
  15. package/agent/components/AppSettingToggle.json +70 -0
  16. package/agent/components/AppShell.json +159 -0
  17. package/agent/components/AreaChart.json +105 -0
  18. package/agent/components/AspectRatio.json +38 -0
  19. package/agent/components/Attachments.json +76 -0
  20. package/agent/components/AuthAccountSummary.json +64 -0
  21. package/agent/components/AuthDivider.json +35 -0
  22. package/agent/components/AuthFooter.json +48 -0
  23. package/agent/components/AuthIdentity.json +42 -0
  24. package/agent/components/AuthShell.json +108 -0
  25. package/agent/components/AuthStack.json +21 -0
  26. package/agent/components/Avatar.json +89 -0
  27. package/agent/components/Badge.json +96 -0
  28. package/agent/components/Banner.json +48 -0
  29. package/agent/components/BarChart.json +108 -0
  30. package/agent/components/BranchScopePicker.json +89 -0
  31. package/agent/components/Breadcrumb.json +54 -0
  32. package/agent/components/Button.json +133 -0
  33. package/agent/components/Calendar.json +259 -0
  34. package/agent/components/Callout.json +46 -0
  35. package/agent/components/Card.json +112 -0
  36. package/agent/components/CardBar.json +49 -0
  37. package/agent/components/CardContent.json +51 -0
  38. package/agent/components/Carousel.json +50 -0
  39. package/agent/components/Cascader.json +209 -0
  40. package/agent/components/CenteredShell.json +66 -0
  41. package/agent/components/ChatBubble.json +100 -0
  42. package/agent/components/ChatBubbleList.json +64 -0
  43. package/agent/components/ChatComposer.json +160 -0
  44. package/agent/components/ChatSuggestion.json +86 -0
  45. package/agent/components/Checkbox.json +68 -0
  46. package/agent/components/CheckboxGroup.json +96 -0
  47. package/agent/components/CodeBlock.json +64 -0
  48. package/agent/components/Collapsible.json +74 -0
  49. package/agent/components/ColorPicker.json +87 -0
  50. package/agent/components/Command.json +168 -0
  51. package/agent/components/CommandPalette.json +84 -0
  52. package/agent/components/CompactBarTrend.json +101 -0
  53. package/agent/components/Conversations.json +82 -0
  54. package/agent/components/CredentialReveal.json +93 -0
  55. package/agent/components/DataState.json +79 -0
  56. package/agent/components/DataTable.json +268 -0
  57. package/agent/components/DatePicker.json +275 -0
  58. package/agent/components/Descriptions.json +67 -0
  59. package/agent/components/Dialog.json +78 -0
  60. package/agent/components/DraggablePanel.json +106 -0
  61. package/agent/components/DropdownMenu.json +102 -0
  62. package/agent/components/EmptyState.json +83 -0
  63. package/agent/components/ErrorSurface.json +128 -0
  64. package/agent/components/FeatureList.json +43 -0
  65. package/agent/components/Field.json +64 -0
  66. package/agent/components/FilterBar.json +99 -0
  67. package/agent/components/Flex.json +153 -0
  68. package/agent/components/FloatButton.json +91 -0
  69. package/agent/components/Form.json +87 -0
  70. package/agent/components/FormErrors.json +51 -0
  71. package/agent/components/FormField.json +137 -0
  72. package/agent/components/FormFieldArray.json +39 -0
  73. package/agent/components/FormFieldControl.json +129 -0
  74. package/agent/components/FormRoot.json +122 -0
  75. package/agent/components/Heading.json +61 -0
  76. package/agent/components/HoverCard.json +55 -0
  77. package/agent/components/Icon.json +60 -0
  78. package/agent/components/InfiniteQueryState.json +58 -0
  79. package/agent/components/Input.json +122 -0
  80. package/agent/components/InputOTP.json +106 -0
  81. package/agent/components/Label.json +43 -0
  82. package/agent/components/LegalDocumentShell.json +102 -0
  83. package/agent/components/Legend.json +42 -0
  84. package/agent/components/LineChart.json +103 -0
  85. package/agent/components/Link.json +41 -0
  86. package/agent/components/ListRow.json +92 -0
  87. package/agent/components/Logo.json +85 -0
  88. package/agent/components/Marquee.json +91 -0
  89. package/agent/components/Masonry.json +82 -0
  90. package/agent/components/MasterDetail.json +95 -0
  91. package/agent/components/MegaMenu.json +120 -0
  92. package/agent/components/MobileShell.json +73 -0
  93. package/agent/components/NavList.json +63 -0
  94. package/agent/components/NumberInput.json +158 -0
  95. package/agent/components/OrgSwitcher.json +89 -0
  96. package/agent/components/OverlayPortalProvider.json +42 -0
  97. package/agent/components/PageContainer.json +181 -0
  98. package/agent/components/Pagination.json +132 -0
  99. package/agent/components/Paragraph.json +40 -0
  100. package/agent/components/PasswordInput.json +79 -0
  101. package/agent/components/PasswordStrength.json +51 -0
  102. package/agent/components/PermissionMatrix.json +81 -0
  103. package/agent/components/PieChart.json +99 -0
  104. package/agent/components/Popover.json +110 -0
  105. package/agent/components/PrefetchLink.json +65 -0
  106. package/agent/components/Progress.json +79 -0
  107. package/agent/components/Prose.json +57 -0
  108. package/agent/components/QrCode.json +62 -0
  109. package/agent/components/Radio.json +98 -0
  110. package/agent/components/RadioGroup.json +91 -0
  111. package/agent/components/RangeTimeline.json +80 -0
  112. package/agent/components/Rating.json +92 -0
  113. package/agent/components/ResizablePanel.json +69 -0
  114. package/agent/components/ResponsiveGrid.json +77 -0
  115. package/agent/components/Reveal.json +70 -0
  116. package/agent/components/ScrollArea.json +104 -0
  117. package/agent/components/SearchInput.json +98 -0
  118. package/agent/components/Segmented.json +96 -0
  119. package/agent/components/Select.json +397 -0
  120. package/agent/components/Separator.json +86 -0
  121. package/agent/components/ServiceCatalogCta.json +46 -0
  122. package/agent/components/ServiceLauncherCard.json +86 -0
  123. package/agent/components/ServiceRolePanel.json +83 -0
  124. package/agent/components/Sheet.json +85 -0
  125. package/agent/components/Sidebar.json +118 -0
  126. package/agent/components/Skeleton.json +57 -0
  127. package/agent/components/SkeletonArticle.json +71 -0
  128. package/agent/components/SkeletonAvatar.json +50 -0
  129. package/agent/components/SkeletonButton.json +57 -0
  130. package/agent/components/SkeletonForm.json +52 -0
  131. package/agent/components/SkeletonImage.json +37 -0
  132. package/agent/components/SkeletonInput.json +51 -0
  133. package/agent/components/SkeletonNode.json +42 -0
  134. package/agent/components/SkeletonRows.json +49 -0
  135. package/agent/components/SkeletonTable.json +45 -0
  136. package/agent/components/Slider.json +160 -0
  137. package/agent/components/SplitPane.json +66 -0
  138. package/agent/components/StatCard.json +83 -0
  139. package/agent/components/Steps.json +95 -0
  140. package/agent/components/Swatch.json +41 -0
  141. package/agent/components/Switch.json +81 -0
  142. package/agent/components/Table.json +112 -0
  143. package/agent/components/Tabs.json +158 -0
  144. package/agent/components/TagInput.json +105 -0
  145. package/agent/components/Text.json +201 -0
  146. package/agent/components/Textarea.json +126 -0
  147. package/agent/components/ThoughtChain.json +76 -0
  148. package/agent/components/Thumbnail.json +70 -0
  149. package/agent/components/TimePicker.json +200 -0
  150. package/agent/components/TimeRangePicker.json +90 -0
  151. package/agent/components/Timeline.json +47 -0
  152. package/agent/components/TimelineGrid.json +92 -0
  153. package/agent/components/Title.json +67 -0
  154. package/agent/components/Toaster.json +42 -0
  155. package/agent/components/Toggle.json +90 -0
  156. package/agent/components/ToggleGroup.json +102 -0
  157. package/agent/components/Toolbar.json +120 -0
  158. package/agent/components/Tooltip.json +110 -0
  159. package/agent/components/Topbar.json +83 -0
  160. package/agent/components/TopbarItem.json +79 -0
  161. package/agent/components/Transfer.json +141 -0
  162. package/agent/components/Tree.json +185 -0
  163. package/agent/components/TreeSelect.json +232 -0
  164. package/agent/components/TwoFactorSetup.json +79 -0
  165. package/agent/components/Typography.json +42 -0
  166. package/agent/components/Upload.json +221 -0
  167. package/agent/components/UploadCropDialog.json +60 -0
  168. package/agent/components/VisuallyHidden.json +20 -0
  169. package/agent/components/Welcome.json +65 -0
  170. package/agent/components/formatDate.json +46 -0
  171. package/agent/components/inertiaUpload.json +32 -0
  172. package/agent/components/useZodForm.json +39 -0
  173. package/agent/components-index.json +884 -0
  174. package/agent/components.json +15507 -0
  175. package/agent/index.json +56 -0
  176. package/agent/llms.txt +32 -0
  177. package/agent/patterns/account-recovery-settings.json +19 -0
  178. package/agent/patterns/async-data-state.json +20 -0
  179. package/agent/patterns/auth-recovery-panels.json +29 -0
  180. package/agent/patterns/badge-coloring.json +14 -0
  181. package/agent/patterns/common-fixes.json +16 -0
  182. package/agent/patterns/confirm-destructive.json +11 -0
  183. package/agent/patterns/data-table-page.json +18 -0
  184. package/agent/patterns/deferred-loading.json +12 -0
  185. package/agent/patterns/error-pages.json +28 -0
  186. package/agent/patterns/inertia-detail-page.json +13 -0
  187. package/agent/patterns/inertia-list-page.json +15 -0
  188. package/agent/patterns/inertia-persistent-layout.json +14 -0
  189. package/agent/patterns/organization-memberships.json +19 -0
  190. package/agent/patterns/page-sections.json +18 -0
  191. package/agent/patterns/settings-page-responsive.json +18 -0
  192. package/agent/patterns/settings-section-rows.json +23 -0
  193. package/agent/patterns/signup-form.json +13 -0
  194. package/agent/patterns/topbar-account-chip.json +18 -0
  195. package/agent/patterns/transactional-email.json +22 -0
  196. package/agent/patterns-index.json +323 -0
  197. package/agent/patterns.json +342 -0
  198. package/agent/rules.json +237 -0
  199. package/agent/tokens.json +8422 -0
  200. package/agent/vocabulary.json +198 -0
  201. package/dist/components/data-entry/input.js +8 -1
  202. package/dist/components/layout/flex.d.ts +2 -2
  203. package/dist/components/layout/flex.js +2 -0
  204. package/dist/components/ui/tag-input.d.ts +10 -0
  205. package/dist/components/ui/tag-input.js +35 -2
  206. package/dist/contracts/measurement.json +1 -1
  207. package/dist/i18n/messages/en.json +23 -1
  208. package/dist/i18n/messages/ja.json +21 -1
  209. package/dist/i18n/messages/vi.json +21 -1
  210. package/dist/lib/variants.js +4 -1
  211. package/dist/props/components/data-entry.prop.d.ts +21 -2
  212. package/dist/props/components/layout.prop.d.ts +42 -0
  213. package/dist/props/registry.d.ts +9 -0
  214. package/dist/props/registry.js +6 -0
  215. package/dist/props/vocabulary/layout.prop.d.ts +1 -1
  216. package/dist/styles/base.css +47 -14
  217. package/dist/styles/card-layout.css +6 -6
  218. package/dist/styles/chart-layout.css +6 -6
  219. package/dist/styles/control.css +41 -6
  220. package/dist/styles/data-display-layout.css +21 -6
  221. package/dist/styles/density.css +2 -0
  222. package/dist/styles/dialog-layout.css +4 -1
  223. package/dist/styles/focus-ring.css +4 -1
  224. package/dist/styles/layout.css +30 -3
  225. package/dist/styles/navigation-layout.css +3 -1
  226. package/dist/styles/shell-layout.css +27 -21
  227. package/dist/styles/table-layout.css +50 -9
  228. package/dist/styles/text-layout.css +94 -23
  229. package/dist/tokens/components/activity.css +13 -4
  230. package/dist/tokens/components/attachments.css +1 -1
  231. package/dist/tokens/components/badge.css +1 -1
  232. package/dist/tokens/components/card.css +28 -7
  233. package/dist/tokens/components/chart.css +4 -1
  234. package/dist/tokens/components/chat-composer.css +4 -1
  235. package/dist/tokens/components/control.css +69 -30
  236. package/dist/tokens/components/conversations.css +4 -1
  237. package/dist/tokens/components/data-display.css +42 -15
  238. package/dist/tokens/components/data-entry.css +8 -2
  239. package/dist/tokens/components/descriptions.css +1 -1
  240. package/dist/tokens/components/feedback.css +8 -5
  241. package/dist/tokens/components/float-button.css +8 -2
  242. package/dist/tokens/components/legal-document.css +12 -3
  243. package/dist/tokens/components/logo.css +15 -6
  244. package/dist/tokens/components/mega-menu.css +14 -5
  245. package/dist/tokens/components/navigation.css +37 -13
  246. package/dist/tokens/components/segmented.css +9 -2
  247. package/dist/tokens/components/separator.css +4 -1
  248. package/dist/tokens/components/shell.css +96 -31
  249. package/dist/tokens/components/table.css +13 -6
  250. package/dist/tokens/components/thought-chain.css +4 -1
  251. package/dist/tokens/components/toggle.css +4 -1
  252. package/dist/tokens/components/tree.css +1 -1
  253. package/dist/tokens/components/upload.css +21 -9
  254. package/dist/tokens/foundation.css +24 -30
  255. package/dist/tokens/semantic/layout.css +19 -5
  256. package/docs/COMPOSITION-VS-COMPONENT.md +41 -0
  257. package/docs/DESIGN-AUTHORITY.md +14 -0
  258. package/docs/DEVELOPMENT.md +81 -6
  259. package/docs/TOKENS.md +16 -1
  260. package/docs/data-entry/tag-input.tsx +37 -0
  261. package/docs/layout/flex.tsx +40 -0
  262. package/docs/roadmap/website-components.md +34 -0
  263. package/docs/showcase/case4-login.tsx +10 -2
  264. package/docs/showcase/case5-shift-calendar.tsx +1 -1
  265. package/docs/showcase/case6-agency-handy.tsx +6 -6
  266. package/docs/showcase/futurelastic-web.tsx +7 -9
  267. package/docs/showcase/marketing-page.tsx +61 -52
  268. package/docs/showcase/table-expandable-rows.tsx +4 -1
  269. package/docs/showcase/table-pagination.tsx +88 -18
  270. package/docs/showcase/theme-customization.tsx +25 -2
  271. package/package.json +8 -5
@@ -9,7 +9,10 @@
9
9
  --conversations-item-gap: var(--space-inline-sm);
10
10
  --conversations-item-padding-inline: var(--space-inline-sm);
11
11
  --conversations-item-radius: var(--radius);
12
- --conversations-item-font-size: var(--font-size-xs);
12
+ --conversations-item-font-size: var(
13
+ --font-size-xs,
14
+ calc(var(--font-size-base) / var(--font-size-ratio))
15
+ );
13
16
 
14
17
  --conversations-item-color: initial;
15
18
  --conversations-item-active-background: initial;
@@ -7,10 +7,16 @@
7
7
 
8
8
  --accordion-focus-ring-offset: 2px;
9
9
  --carousel-dot-focus-ring-offset: 2px;
10
- --progress-label-font-size: var(--font-size-xs);
11
-
12
- --code-block-font-size: var(--font-size-sm);
13
- --code-block-font-size-xs: var(--font-size-xs);
10
+ --progress-label-font-size: var(
11
+ --font-size-xs,
12
+ calc(var(--font-size-base) / var(--font-size-ratio))
13
+ );
14
+
15
+ --code-block-font-size: var(--font-size-sm, var(--font-size-base));
16
+ --code-block-font-size-xs: var(
17
+ --font-size-xs,
18
+ calc(var(--font-size-base) / var(--font-size-ratio))
19
+ );
14
20
  --code-block-line-height: var(--line-height-normal);
15
21
  --code-block-space-inset: var(--space-3);
16
22
  --code-block-radius: var(--radius-md);
@@ -34,7 +40,7 @@
34
40
  --code-block-token-changed-color: initial;
35
41
 
36
42
  --prose-font-size: var(--font-size-base);
37
- --prose-font-size-sm: var(--font-size-xs);
43
+ --prose-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
38
44
  --prose-line-height: var(--line-height-body);
39
45
  --prose-space-block: var(--space-3);
40
46
  --prose-heading-space-block-start: var(--space-6);
@@ -50,7 +56,10 @@
50
56
 
51
57
  --prose-link-decoration-line: underline;
52
58
  --prose-image-radius: var(--radius-md);
53
- --timeline-note-font-size: var(--font-size-xs);
59
+ --timeline-note-font-size: var(
60
+ --font-size-xs,
61
+ calc(var(--font-size-base) / var(--font-size-ratio))
62
+ );
54
63
 
55
64
  --avatar-background: initial;
56
65
 
@@ -66,11 +75,17 @@
66
75
 
67
76
  --avatar-font-size: var(--font-size-base);
68
77
 
69
- --avatar-font-size-xs: var(--font-size-2xs);
78
+ --avatar-font-size-xs: var(
79
+ --font-size-2xs,
80
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
81
+ );
70
82
 
71
- --avatar-font-size-sm: var(--font-size-xs);
83
+ --avatar-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
72
84
 
73
- --avatar-font-size-lg: var(--font-size-lg);
85
+ --avatar-font-size-lg: var(
86
+ --font-size-lg,
87
+ calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
88
+ );
74
89
 
75
90
  --avatar-glyph-size-xs: calc(var(--icon-size-xs) * var(--scaling));
76
91
 
@@ -120,7 +135,7 @@
120
135
  --legend-item-gap: 0.3125rem;
121
136
  --legend-swatch-size: 0.625rem;
122
137
  --legend-swatch-radius: 0.125rem;
123
- --legend-font-size: var(--font-size-xs);
138
+ --legend-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
124
139
 
125
140
  --legend-color: initial;
126
141
 
@@ -136,8 +151,11 @@
136
151
  --feature-list-space-gap: var(--space-stack-sm);
137
152
 
138
153
  --feature-list-space-inline: var(--space-inline-sm);
139
- --feature-list-font-size: var(--font-size-sm);
140
- --feature-list-description-font-size: var(--font-size-xs);
154
+ --feature-list-font-size: var(--font-size-sm, var(--font-size-base));
155
+ --feature-list-description-font-size: var(
156
+ --font-size-xs,
157
+ calc(var(--font-size-base) / var(--font-size-ratio))
158
+ );
141
159
 
142
160
  --feature-list-mark-icon-size: var(--icon-size-md);
143
161
 
@@ -166,9 +184,18 @@
166
184
  --timeline-grid-column-min-width: 6rem;
167
185
 
168
186
  --timeline-grid-event-min-height-minutes: 36;
169
- --timeline-grid-axis-font-size: var(--font-size-2xs);
170
- --timeline-grid-head-font-size: var(--font-size-xs);
171
- --timeline-grid-event-font-size: var(--font-size-2xs);
187
+ --timeline-grid-axis-font-size: var(
188
+ --font-size-2xs,
189
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
190
+ );
191
+ --timeline-grid-head-font-size: var(
192
+ --font-size-xs,
193
+ calc(var(--font-size-base) / var(--font-size-ratio))
194
+ );
195
+ --timeline-grid-event-font-size: var(
196
+ --font-size-2xs,
197
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
198
+ );
172
199
  --timeline-grid-event-gap: var(--space-1);
173
200
  --timeline-grid-event-space-inset: var(--space-1);
174
201
  --timeline-grid-event-radius: var(--radius-sm);
@@ -1,8 +1,14 @@
1
1
 
2
2
 
3
3
  :root {
4
- --password-strength-score-font-size: var(--font-size-xs);
5
- --password-strength-checklist-font-size: var(--font-size-xs);
4
+ --password-strength-score-font-size: var(
5
+ --font-size-xs,
6
+ calc(var(--font-size-base) / var(--font-size-ratio))
7
+ );
8
+ --password-strength-checklist-font-size: var(
9
+ --font-size-xs,
10
+ calc(var(--font-size-base) / var(--font-size-ratio))
11
+ );
6
12
 
7
13
  --branch-scope-picker-gap: 0.75rem;
8
14
 
@@ -10,7 +10,7 @@
10
10
 
11
11
  --descriptions-label-gap: 0.75rem;
12
12
 
13
- --descriptions-value-font-size: var(--font-size-sm);
13
+ --descriptions-value-font-size: var(--font-size-sm, var(--font-size-base));
14
14
 
15
15
  --descriptions-value-line-height: calc(1.25 / 0.875);
16
16
 
@@ -12,8 +12,11 @@
12
12
  --sheet-title-row-space-gap: var(--space-3);
13
13
  --sheet-extra-space-gap: var(--space-2);
14
14
  --sheet-footer-space-gap: var(--space-2);
15
- --sheet-title-font-size: var(--font-size-lg);
16
- --sheet-description-font-size: var(--font-size-sm);
15
+ --sheet-title-font-size: var(
16
+ --font-size-lg,
17
+ calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
18
+ );
19
+ --sheet-description-font-size: var(--font-size-sm, var(--font-size-base));
17
20
 
18
21
  --sheet-body-space-block: var(--space-1);
19
22
 
@@ -45,7 +48,7 @@
45
48
 
46
49
  --dialog-close-size: var(--touch-target-min);
47
50
 
48
- --dialog-step-up-error-font-size: var(--font-size-sm);
51
+ --dialog-step-up-error-font-size: var(--font-size-sm, var(--font-size-base));
49
52
 
50
53
  --alert-radius: var(--card-radius);
51
54
  --alert-space-inset: var(--space-section-active);
@@ -124,7 +127,7 @@
124
127
  --tooltip-space-inline: var(--space-2);
125
128
  --tooltip-space-block: var(--space-1);
126
129
  --tooltip-radius: var(--radius);
127
- --tooltip-font-size: var(--font-size-xs);
130
+ --tooltip-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
128
131
 
129
132
  --tooltip-shadow: var(--shadow-md);
130
133
 
@@ -137,7 +140,7 @@
137
140
  --popover-radius: var(--radius);
138
141
  --popover-shadow: var(--shadow-md);
139
142
  --popover-header-space-gap: var(--space-1);
140
- --popover-header-font-size: var(--font-size-sm);
143
+ --popover-header-font-size: var(--font-size-sm, var(--font-size-base));
141
144
 
142
145
  --popover-surface-background: initial;
143
146
  --popover-surface-foreground: initial;
@@ -13,7 +13,10 @@
13
13
 
14
14
  --float-button-icon-size: var(--icon-size-md);
15
15
 
16
- --float-button-content-font-size: var(--font-size-2xs);
16
+ --float-button-content-font-size: var(
17
+ --font-size-2xs,
18
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
19
+ );
17
20
  --float-button-content-line-height: var(--line-height-tight);
18
21
 
19
22
  --float-button-shadow: var(--shadow-lg);
@@ -25,7 +28,10 @@
25
28
  --float-button-badge-foreground: hsl(var(--destructive-foreground));
26
29
  --float-button-badge-size: var(--space-4);
27
30
  --float-button-badge-padding-inline: var(--space-1);
28
- --float-button-badge-font-size: var(--font-size-2xs);
31
+ --float-button-badge-font-size: var(
32
+ --font-size-2xs,
33
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
34
+ );
29
35
  --float-button-badge-inset-block-start: calc(var(--space-1) * -1);
30
36
  --float-button-badge-inset-inline-end: calc(var(--space-1) * -1);
31
37
  --float-button-badge-dot-size: var(--space-2);
@@ -14,15 +14,24 @@
14
14
  --legal-document-toc-gap: var(--space-1);
15
15
  --legal-document-toc-item-padding: var(--space-1) var(--space-2);
16
16
  --legal-document-toc-item-radius: var(--radius);
17
- --legal-document-toc-title-font-size: var(--font-size-2xs);
18
- --legal-document-toc-font-size: var(--font-size-xs);
17
+ --legal-document-toc-title-font-size: var(
18
+ --font-size-2xs,
19
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
20
+ );
21
+ --legal-document-toc-font-size: var(
22
+ --font-size-xs,
23
+ calc(var(--font-size-base) / var(--font-size-ratio))
24
+ );
19
25
 
20
26
  --legal-document-toc-marker-width: var(--stroke-md);
21
27
 
22
28
  --legal-document-nav-gap: var(--space-4);
23
29
  --legal-document-header-gap: var(--space-2);
24
30
  --legal-document-meta-gap: var(--space-2);
25
- --legal-document-meta-font-size: var(--font-size-xs);
31
+ --legal-document-meta-font-size: var(
32
+ --font-size-xs,
33
+ calc(var(--font-size-base) / var(--font-size-ratio))
34
+ );
26
35
  --legal-document-section-gap: var(--space-10);
27
36
  --legal-document-section-title-gap: var(--space-3);
28
37
 
@@ -5,9 +5,12 @@
5
5
  --logo-size-sm: 1.5rem;
6
6
  --logo-size-md: 1.75rem;
7
7
  --logo-size-lg: 2.25rem;
8
- --logo-font-size-xs: var(--font-size-2xs);
9
- --logo-font-size-sm: var(--font-size-xs);
10
- --logo-font-size-md: var(--font-size-sm);
8
+ --logo-font-size-xs: var(
9
+ --font-size-2xs,
10
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
11
+ );
12
+ --logo-font-size-sm: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
13
+ --logo-font-size-md: var(--font-size-sm, var(--font-size-base));
11
14
  --logo-font-size-lg: var(--font-size-base);
12
15
 
13
16
  --logo-success-background: initial;
@@ -38,10 +41,16 @@
38
41
  --logo-godx-size: initial;
39
42
 
40
43
  --logo-wordmark-gap: var(--space-2);
41
- --logo-wordmark-font-size-xs: var(--font-size-xs);
42
- --logo-wordmark-font-size-sm: var(--font-size-sm);
44
+ --logo-wordmark-font-size-xs: var(
45
+ --font-size-xs,
46
+ calc(var(--font-size-base) / var(--font-size-ratio))
47
+ );
48
+ --logo-wordmark-font-size-sm: var(--font-size-sm, var(--font-size-base));
43
49
  --logo-wordmark-font-size-md: var(--font-size-base);
44
- --logo-wordmark-font-size-lg: var(--font-size-lg);
50
+ --logo-wordmark-font-size-lg: var(
51
+ --font-size-lg,
52
+ calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
53
+ );
45
54
  --logo-wordmark-font-weight: 700;
46
55
  --logo-wordmark-letter-spacing: -0.01em;
47
56
  --logo-wordmark-font-family: initial;
@@ -7,7 +7,7 @@
7
7
  --mega-menu-trigger-padding-x: var(--space-3);
8
8
  --mega-menu-trigger-gap: var(--space-inline-sm);
9
9
  --mega-menu-trigger-radius: var(--radius-sm);
10
- --mega-menu-trigger-font-size: var(--font-size-sm);
10
+ --mega-menu-trigger-font-size: var(--font-size-sm, var(--font-size-base));
11
11
  --mega-menu-trigger-foreground: hsl(var(--foreground));
12
12
  --mega-menu-trigger-background: transparent;
13
13
 
@@ -36,9 +36,15 @@
36
36
  --mega-menu-group-gap: var(--space-inline-sm);
37
37
 
38
38
  --mega-menu-group-min-width: 12rem;
39
- --mega-menu-group-label-font-size: var(--font-size-xs);
39
+ --mega-menu-group-label-font-size: var(
40
+ --font-size-xs,
41
+ calc(var(--font-size-base) / var(--font-size-ratio))
42
+ );
40
43
  --mega-menu-group-label-foreground: hsl(var(--muted-foreground));
41
- --mega-menu-group-description-font-size: var(--font-size-xs);
44
+ --mega-menu-group-description-font-size: var(
45
+ --font-size-xs,
46
+ calc(var(--font-size-base) / var(--font-size-ratio))
47
+ );
42
48
  --mega-menu-group-description-foreground: hsl(var(--muted-foreground));
43
49
  --mega-menu-group-icon-size: var(--control-icon-size-sm);
44
50
 
@@ -46,12 +52,15 @@
46
52
  --mega-menu-link-padding-x: var(--space-2);
47
53
  --mega-menu-link-padding-y: var(--space-2);
48
54
  --mega-menu-link-radius: var(--radius-sm);
49
- --mega-menu-link-font-size: var(--font-size-sm);
55
+ --mega-menu-link-font-size: var(--font-size-sm, var(--font-size-base));
50
56
  --mega-menu-link-foreground: hsl(var(--foreground));
51
57
  --mega-menu-link-hover-background: initial;
52
58
  --mega-menu-link-hover-foreground: initial;
53
59
  --mega-menu-link-current-foreground: initial;
54
- --mega-menu-link-description-font-size: var(--font-size-xs);
60
+ --mega-menu-link-description-font-size: var(
61
+ --font-size-xs,
62
+ calc(var(--font-size-base) / var(--font-size-ratio))
63
+ );
55
64
  --mega-menu-link-description-foreground: hsl(var(--muted-foreground));
56
65
  --mega-menu-link-icon-size: var(--control-icon-size-sm);
57
66
 
@@ -7,7 +7,7 @@
7
7
  --pagination-size-width: 5.5rem;
8
8
 
9
9
  --pagination-page-padding-x: var(--space-1);
10
- --pagination-total-font-size: var(--font-size-sm);
10
+ --pagination-total-font-size: var(--font-size-sm, var(--font-size-base));
11
11
 
12
12
  --pagination-icon-size: var(--control-icon-size);
13
13
 
@@ -18,12 +18,18 @@
18
18
  --pagination-jumper-font-size: var(--pagination-total-font-size);
19
19
  --filter-bar-gap: var(--space-3);
20
20
  --filter-bar-padding-y: var(--space-2);
21
- --filter-label-font-size: var(--font-size-xs);
21
+ --filter-label-font-size: var(
22
+ --font-size-xs,
23
+ calc(var(--font-size-base) / var(--font-size-ratio))
24
+ );
22
25
  --filter-picker-width-sm: 11rem;
23
26
  --filter-picker-width-md: 14rem;
24
27
  --steps-inline-gap: var(--space-2);
25
28
  --steps-inline-item-gap: var(--space-1);
26
- --steps-inline-font-size: var(--font-size-xs);
29
+ --steps-inline-font-size: var(
30
+ --font-size-xs,
31
+ calc(var(--font-size-base) / var(--font-size-ratio))
32
+ );
27
33
  --steps-inline-separator-size: var(--control-icon-size-sm);
28
34
 
29
35
  --steps-inline-index-font-weight: var(--font-weight-bold);
@@ -33,11 +39,17 @@
33
39
  --app-setting-picker-compact-control-height: var(--control-height-sm);
34
40
  --app-setting-picker-compact-padding-x: var(--space-2);
35
41
  --app-setting-picker-compact-gap: var(--space-1);
36
- --app-setting-picker-compact-font-size: var(--font-size-xs);
37
- --breadcrumb-font-size: var(--font-size-xs);
42
+ --app-setting-picker-compact-font-size: var(
43
+ --font-size-xs,
44
+ calc(var(--font-size-base) / var(--font-size-ratio))
45
+ );
46
+ --breadcrumb-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
38
47
 
39
48
  --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
40
- --menu-shortcut-font-size: var(--font-size-xs);
49
+ --menu-shortcut-font-size: var(
50
+ --font-size-xs,
51
+ calc(var(--font-size-base) / var(--font-size-ratio))
52
+ );
41
53
  --tabs-list-max-inline-size: 100%;
42
54
  --tabs-list-overflow: auto;
43
55
 
@@ -64,9 +76,15 @@
64
76
  --tabs-trigger-height-sm: var(--band-height-sm);
65
77
  --tabs-trigger-height-md: var(--band-height-md);
66
78
  --tabs-trigger-height-lg: var(--band-height-lg);
67
- --tabs-trigger-font-size-sm: var(--font-size-xs);
79
+ --tabs-trigger-font-size-sm: var(
80
+ --font-size-xs,
81
+ calc(var(--font-size-base) / var(--font-size-ratio))
82
+ );
68
83
  --tabs-trigger-font-size-md: var(--font-size-base);
69
- --tabs-trigger-font-size-lg: var(--font-size-lg);
84
+ --tabs-trigger-font-size-lg: var(
85
+ --font-size-lg,
86
+ calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
87
+ );
70
88
  --tabs-trigger-padding-x-sm: var(--space-2);
71
89
  --tabs-trigger-padding-x-md: var(--space-3);
72
90
  --tabs-trigger-padding-x-lg: var(--space-4);
@@ -86,7 +104,7 @@
86
104
  --tabs-count-min-width: var(--space-4);
87
105
  --tabs-count-space-inline: var(--space-1);
88
106
  --tabs-count-gap: var(--space-1);
89
- --tabs-count-font-size: var(--font-size-xs);
107
+ --tabs-count-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
90
108
  --tabs-count-radius: var(--radius-pill);
91
109
  --tabs-count-background: initial;
92
110
 
@@ -153,12 +171,18 @@
153
171
  --steps-dot-size: 0.625rem;
154
172
  --steps-dot-process-ring-width: var(--stroke-xl);
155
173
  --steps-marker-border-width: var(--stroke-md);
156
- --steps-marker-font-size: var(--font-size-sm);
174
+ --steps-marker-font-size: var(--font-size-sm, var(--font-size-base));
157
175
  --steps-marker-icon-size: var(--icon-size-md);
158
176
  --steps-wait-icon-size: var(--icon-size-xs);
159
- --steps-title-font-size: var(--font-size-sm);
160
- --steps-title-font-size-compact: var(--font-size-xs);
161
- --steps-subtitle-font-size: var(--font-size-xs);
177
+ --steps-title-font-size: var(--font-size-sm, var(--font-size-base));
178
+ --steps-title-font-size-compact: var(
179
+ --font-size-xs,
180
+ calc(var(--font-size-base) / var(--font-size-ratio))
181
+ );
182
+ --steps-subtitle-font-size: var(
183
+ --font-size-xs,
184
+ calc(var(--font-size-base) / var(--font-size-ratio))
185
+ );
162
186
 
163
187
  --steps-vertical-space-gap: var(--space-3);
164
188
  --steps-vertical-space-block-end: var(--space-8);
@@ -11,7 +11,10 @@
11
11
 
12
12
  --segmented-item-padding-inline: calc(var(--control-padding-x) - 1px);
13
13
 
14
- --segmented-xs-font-size: var(--font-size-xs);
14
+ --segmented-xs-font-size: var(
15
+ --font-size-xs,
16
+ calc(var(--font-size-base) / var(--font-size-ratio))
17
+ );
15
18
 
16
19
  --segmented-xs-item-padding-inline: calc(var(--control-padding-x-compact) - 1px);
17
20
 
@@ -25,7 +28,11 @@
25
28
  --segmented-item-active-background: var(--secondary);
26
29
 
27
30
  --segmented-item-selected-background: var(--background);
28
- --segmented-item-selected-shadow: var(--shadow-sm);
31
+ --segmented-item-selected-shadow: var(--shadow-md);
32
+
33
+ --segmented-item-selected-font-weight: var(--font-weight-medium);
34
+
35
+ --segmented-item-selected-border-color: initial;
29
36
 
30
37
  --segmented-count-min-width: var(--button-count-min-width);
31
38
  --segmented-count-space-inline: var(--button-count-space-inline);
@@ -9,7 +9,10 @@
9
9
 
10
10
  --separator-label-inset: initial;
11
11
 
12
- --separator-label-font-size: var(--font-size-xs);
12
+ --separator-label-font-size: var(
13
+ --font-size-xs,
14
+ calc(var(--font-size-base) / var(--font-size-ratio))
15
+ );
13
16
  --separator-label-line-height: var(--line-height-normal);
14
17
  --separator-label-font-weight: var(--font-weight-medium);
15
18
 
@@ -2,9 +2,18 @@
2
2
 
3
3
  :root {
4
4
  --responsive-grid-column-width: 20rem;
5
- --sidebar-section-label-font-size: var(--font-size-2xs);
6
- --sidebar-product-tenant-font-size: var(--font-size-2xs);
7
- --sidebar-badge-font-size: var(--font-size-2xs);
5
+ --sidebar-section-label-font-size: var(
6
+ --font-size-2xs,
7
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
8
+ );
9
+ --sidebar-product-tenant-font-size: var(
10
+ --font-size-2xs,
11
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
12
+ );
13
+ --sidebar-badge-font-size: var(
14
+ --font-size-2xs,
15
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
16
+ );
8
17
 
9
18
  --sidebar-badge-background: initial;
10
19
  --sidebar-badge-foreground: initial;
@@ -23,15 +32,39 @@
23
32
 
24
33
  --topbar-icon-focus-ring-alpha: 1;
25
34
 
26
- --sidebar-user-role-font-size: var(--font-size-2xs);
35
+ --sidebar-user-role-font-size: var(
36
+ --font-size-2xs,
37
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
38
+ );
27
39
  --org-switcher-meta-foreground: var(--muted-foreground);
28
- --sidebar-nav-sub-font-size: var(--font-size-xs);
29
- --sidebar-flyout-title-font-size: var(--font-size-xs);
30
- --topbar-chip-icon-font-size: var(--font-size-2xs);
31
- --kbd-font-size: var(--font-size-2xs);
32
- --sidebar-logo-mark-font-size: var(--font-size-xs);
33
- --sidebar-avatar-font-size: var(--font-size-2xs);
34
- --sidebar-user-name-font-size: var(--font-size-xs);
40
+ --sidebar-nav-sub-font-size: var(
41
+ --font-size-xs,
42
+ calc(var(--font-size-base) / var(--font-size-ratio))
43
+ );
44
+ --sidebar-flyout-title-font-size: var(
45
+ --font-size-xs,
46
+ calc(var(--font-size-base) / var(--font-size-ratio))
47
+ );
48
+ --topbar-chip-icon-font-size: var(
49
+ --font-size-2xs,
50
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
51
+ );
52
+ --kbd-font-size: var(
53
+ --font-size-2xs,
54
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
55
+ );
56
+ --sidebar-logo-mark-font-size: var(
57
+ --font-size-xs,
58
+ calc(var(--font-size-base) / var(--font-size-ratio))
59
+ );
60
+ --sidebar-avatar-font-size: var(
61
+ --font-size-2xs,
62
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
63
+ );
64
+ --sidebar-user-name-font-size: var(
65
+ --font-size-xs,
66
+ calc(var(--font-size-base) / var(--font-size-ratio))
67
+ );
35
68
 
36
69
  --sidebar-gradient: none;
37
70
  --topbar-gradient: none;
@@ -78,7 +111,10 @@
78
111
  --sidebar-brand-mark-size: 1.375rem;
79
112
  --sidebar-nav-item-height: var(--band-height-md);
80
113
 
81
- --sidebar-nav-item-font-size: var(--font-size-xs);
114
+ --sidebar-nav-item-font-size: var(
115
+ --font-size-xs,
116
+ calc(var(--font-size-base) / var(--font-size-ratio))
117
+ );
82
118
 
83
119
  --sidebar-nav-item-line-height: 1.5;
84
120
 
@@ -124,7 +160,10 @@
124
160
  --topbar-item-badge-offset-inline: var(--space-1);
125
161
  --topbar-item-badge-size: 1rem;
126
162
  --topbar-item-badge-padding-inline: var(--space-1);
127
- --topbar-item-badge-font-size: var(--font-size-2xs);
163
+ --topbar-item-badge-font-size: var(
164
+ --font-size-2xs,
165
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
166
+ );
128
167
  --topbar-item-badge-background: initial;
129
168
  --topbar-item-badge-foreground: initial;
130
169
  --topbar-item-badge-destructive-background: initial;
@@ -143,7 +182,10 @@
143
182
  --org-switcher-list-offset: 0px;
144
183
 
145
184
  --org-switcher-legend-space-gap: var(--space-4);
146
- --org-switcher-legend-font-size: var(--font-size-2xs);
185
+ --org-switcher-legend-font-size: var(
186
+ --font-size-2xs,
187
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
188
+ );
147
189
  --org-switcher-hint-space-gap: var(--space-1);
148
190
 
149
191
  --org-switcher-dialog-width: 26rem;
@@ -172,14 +214,20 @@
172
214
  --app-launcher-mark-radius: var(--radius);
173
215
  --app-launcher-mark-background: var(--secondary);
174
216
  --app-launcher-mark-foreground: var(--secondary-foreground);
175
- --app-launcher-mark-font-size: var(--font-size-sm);
176
- --app-launcher-name-font-size: var(--font-size-2xs);
177
- --app-launcher-group-label-font-size: var(--font-size-2xs);
217
+ --app-launcher-mark-font-size: var(--font-size-sm, var(--font-size-base));
218
+ --app-launcher-name-font-size: var(
219
+ --font-size-2xs,
220
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
221
+ );
222
+ --app-launcher-group-label-font-size: var(
223
+ --font-size-2xs,
224
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
225
+ );
178
226
  --app-launcher-group-label-color: var(--muted-foreground);
179
227
  --app-launcher-state-min-height: 8rem;
180
228
 
181
229
  --app-launcher-launchpad-backdrop-background: initial;
182
- --app-launcher-launchpad-backdrop-blur-size: 16px;
230
+ --app-launcher-launchpad-backdrop-blur-size: var(--blur-lg);
183
231
  --app-launcher-launchpad-backdrop-alpha: 55%;
184
232
 
185
233
  --app-launcher-launchpad-backdrop-color-saturate: 180%;
@@ -201,20 +249,22 @@
201
249
  --app-launcher-launchpad-mark-size: 4rem;
202
250
  --app-launcher-launchpad-mark-radius: var(--radius-lg);
203
251
 
204
- --app-launcher-launchpad-mark-background: color-mix(
205
- in srgb,
206
- hsl(var(--card)) 78%,
207
- transparent
208
- );
252
+ --app-launcher-launchpad-mark-background: color-mix(in srgb, hsl(var(--card)) 78%, transparent);
209
253
  --app-launcher-launchpad-mark-border-color: color-mix(
210
254
  in srgb,
211
255
  hsl(var(--foreground)) 14%,
212
256
  transparent
213
257
  );
214
- --app-launcher-launchpad-mark-font-size: var(--font-size-lg);
258
+ --app-launcher-launchpad-mark-font-size: var(
259
+ --font-size-lg,
260
+ calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
261
+ );
215
262
  --app-launcher-launchpad-mark-shadow: var(--shadow-lg);
216
- --app-launcher-launchpad-name-font-size: var(--font-size-sm);
217
- --app-launcher-launchpad-title-font-size: var(--font-size-2xs);
263
+ --app-launcher-launchpad-name-font-size: var(--font-size-sm, var(--font-size-base));
264
+ --app-launcher-launchpad-title-font-size: var(
265
+ --font-size-2xs,
266
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
267
+ );
218
268
  --app-launcher-launchpad-title-letter-spacing: 0.08em;
219
269
  --app-launcher-launchpad-close-space-padding: var(--space-2);
220
270
 
@@ -227,7 +277,13 @@
227
277
  --sidebar-item-active-background-alpha: 12%;
228
278
 
229
279
  --auth-shell-control-height: var(--control-height-comfortable);
230
- --auth-shell-heading-size: var(--font-size-2xl);
280
+ --auth-shell-heading-size: var(
281
+ --font-size-2xl,
282
+ calc(
283
+ var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
284
+ var(--font-size-ratio) * var(--font-size-ratio)
285
+ )
286
+ );
231
287
  --auth-shell-card-max-width: 24rem;
232
288
  --auth-shell-bar-padding: var(--space-5) var(--space-6);
233
289
  --auth-shell-main-padding: var(--space-6);
@@ -296,7 +352,10 @@
296
352
  --auth-shell-registration-identity-slot-block-size: 7rem;
297
353
 
298
354
  --auth-shell-divider-gap: 0.625rem;
299
- --auth-shell-divider-label-font-size: var(--font-size-2xs);
355
+ --auth-shell-divider-label-font-size: var(
356
+ --font-size-2xs,
357
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
358
+ );
300
359
  --auth-shell-divider-label-line-height: calc(19 / 11);
301
360
  --auth-shell-divider-rule-color: var(--border);
302
361
  --auth-shell-divider-label-color: var(--muted-foreground);
@@ -310,10 +369,13 @@
310
369
  --auth-account-summary-identity-min-width: 12rem;
311
370
  --auth-account-summary-avatar-size: var(--control-height-sm);
312
371
  --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
313
- --auth-account-summary-email-font-size: var(--font-size-sm);
372
+ --auth-account-summary-email-font-size: var(--font-size-sm, var(--font-size-base));
314
373
  --auth-footer-content-gap: 0.375rem;
315
374
 
316
- --auth-footer-text-font-size: var(--font-size-2xs);
375
+ --auth-footer-text-font-size: var(
376
+ --font-size-2xs,
377
+ calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
378
+ );
317
379
 
318
380
  --auth-footer-target-min-size: var(--touch-target-min);
319
381
  --auth-stack-gap: var(--space-3);
@@ -350,7 +412,10 @@
350
412
  --centered-shell-landing-card-shadow: none;
351
413
 
352
414
  --centered-shell-landing-heading-size: var(--font-size-display);
353
- --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
415
+ --centered-shell-landing-heading-size-compact: var(
416
+ --font-size-3xl,
417
+ calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio))
418
+ );
354
419
 
355
420
  --centered-shell-landing-background: initial;
356
421
  }