@motion-proto/live-tokens 0.40.0 → 0.41.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 (89) hide show
  1. package/CHANGELOG.md +115 -0
  2. package/dist-plugin/{chunk-D77VD4Z6.js → chunk-H4TRUINI.js} +102 -13
  3. package/dist-plugin/index.cjs +288 -67
  4. package/dist-plugin/index.js +171 -55
  5. package/dist-plugin/tokensCssMigrations/index.cjs +102 -13
  6. package/dist-plugin/tokensCssMigrations/index.js +1 -1
  7. package/package.json +3 -2
  8. package/src/app/site.css +97 -20
  9. package/src/editor/core/palettes/colorHarmony.ts +228 -0
  10. package/src/editor/core/palettes/contrast.ts +128 -0
  11. package/src/editor/core/palettes/oklch.ts +8 -0
  12. package/src/editor/core/palettes/paletteDerivation.ts +267 -72
  13. package/src/editor/core/palettes/recommendText.ts +216 -0
  14. package/src/editor/core/palettes/solveTextContrast.ts +251 -0
  15. package/src/editor/core/store/editorCore.ts +2 -1
  16. package/src/editor/core/store/editorPersistence.ts +18 -1
  17. package/src/editor/core/store/editorStore.ts +20 -1
  18. package/src/editor/core/store/editorTypes.ts +4 -0
  19. package/src/editor/core/store/editorViewStore.ts +7 -3
  20. package/src/editor/core/themes/migrations/2026-06-05-palette-unification.ts +11 -9
  21. package/src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts +51 -0
  22. package/src/editor/core/themes/migrations/2026-07-24-base-anchor-placement.ts +37 -0
  23. package/src/editor/core/themes/migrations/2026-07-25-background-spot-to-base.ts +40 -0
  24. package/src/editor/core/themes/themeTypes.ts +23 -3
  25. package/src/editor/docs/CodeBlock.svelte +1 -1
  26. package/src/editor/docs/Docs.svelte +30 -13
  27. package/src/editor/pages/EditorShell.svelte +31 -3
  28. package/src/editor/ui/ColorEditPanel.svelte +22 -16
  29. package/src/editor/ui/EditorViewSwitcher.svelte +43 -9
  30. package/src/editor/ui/FontStackEditor.svelte +0 -1
  31. package/src/editor/ui/PaletteEditor.svelte +117 -155
  32. package/src/editor/ui/ProjectFontsSection.svelte +0 -3
  33. package/src/editor/ui/TextStylesSection.svelte +173 -0
  34. package/src/editor/ui/UILineHeightSelector.svelte +6 -5
  35. package/src/editor/ui/UIPaletteSelector.svelte +6 -1
  36. package/src/editor/ui/UITextTransformSelector.svelte +106 -0
  37. package/src/editor/ui/VariablesTab.svelte +23 -10
  38. package/src/editor/ui/colors/ColorReadouts.svelte +123 -0
  39. package/src/editor/ui/colors/ColorStory.svelte +375 -0
  40. package/src/editor/ui/colors/ColorWheel.svelte +740 -0
  41. package/src/editor/ui/colors/ColorsTab.svelte +508 -0
  42. package/src/editor/ui/colors/HarmonyAxesList.svelte +320 -0
  43. package/src/editor/ui/colors/LightnessBar.svelte +261 -0
  44. package/src/editor/ui/colors/PaletteStepStrip.svelte +142 -0
  45. package/src/editor/ui/colors/colorWheelMath.ts +9 -0
  46. package/src/editor/ui/colors/harmony-icons/analogous.svg +13 -0
  47. package/src/editor/ui/colors/harmony-icons/complementary.svg +10 -0
  48. package/src/editor/ui/colors/harmony-icons/compound.svg +15 -0
  49. package/src/editor/ui/colors/harmony-icons/custom.svg +10 -0
  50. package/src/editor/ui/colors/harmony-icons/monochromatic.svg +11 -0
  51. package/src/editor/ui/colors/harmony-icons/shades.svg +9 -0
  52. package/src/editor/ui/colors/harmony-icons/split-complementary.svg +13 -0
  53. package/src/editor/ui/colors/harmony-icons/square.svg +13 -0
  54. package/src/editor/ui/colors/harmony-icons/tetradic.svg +15 -0
  55. package/src/editor/ui/colors/harmony-icons/triadic.svg +13 -0
  56. package/src/editor/ui/colors/harmonyModeIcons.ts +23 -0
  57. package/src/editor/ui/colors/paletteBaseColor.ts +214 -0
  58. package/src/editor/ui/index.ts +0 -1
  59. package/src/editor/ui/palette/OverridesPanel.svelte +6 -3
  60. package/src/editor/ui/palette/PaletteBase.svelte +16 -8
  61. package/src/editor/ui/palette/dockMagnify.ts +22 -0
  62. package/src/editor/ui/palette/paletteEditorState.ts +5 -4
  63. package/src/editor/ui/palette/paletteMath.ts +93 -181
  64. package/src/editor/ui/sections/textStyles.ts +82 -0
  65. package/src/editor/ui/sections/tokenScales.ts +3 -3
  66. package/src/live-tokens/data/themes/default.json +3 -3
  67. package/src/live-tokens/data/tokens.generated.css +96 -95
  68. package/src/system/components/Badge.svelte +11 -11
  69. package/src/system/components/Button.svelte +7 -7
  70. package/src/system/components/Callout.svelte +8 -8
  71. package/src/system/components/Card.svelte +2 -2
  72. package/src/system/components/CodeSnippet.svelte +1 -1
  73. package/src/system/components/CollapsibleSection.svelte +7 -7
  74. package/src/system/components/CornerBadge.svelte +1 -1
  75. package/src/system/components/Dialog.svelte +2 -2
  76. package/src/system/components/FloatingTokenTags.css +6 -5
  77. package/src/system/components/Input.svelte +6 -6
  78. package/src/system/components/MenuSelect.svelte +4 -4
  79. package/src/system/components/Notification.svelte +8 -8
  80. package/src/system/components/ProgressBar.svelte +2 -2
  81. package/src/system/components/RadioButton.svelte +4 -4
  82. package/src/system/components/SectionDivider.svelte +6 -6
  83. package/src/system/components/SegmentedControl.svelte +5 -5
  84. package/src/system/components/SideNavigation.svelte +12 -12
  85. package/src/system/components/TabBar.svelte +4 -4
  86. package/src/system/components/Table.svelte +2 -2
  87. package/src/system/components/Tooltip.svelte +1 -1
  88. package/src/system/styles/tokens.css +59 -6
  89. package/src/editor/ui/TextTab.svelte +0 -203
package/src/system/components/MenuSelect.svelte CHANGED
@@ -90,7 +90,7 @@
90
90
  --menuselect-default-text-font-family: var(--font-sans);
91
91
  --menuselect-default-text-font-size: var(--font-size-sm);
92
92
  --menuselect-default-text-font-weight: var(--font-weight-normal);
93
- --menuselect-default-text-line-height: var(--line-height-sm);
93
+ --menuselect-default-text-line-height: var(--line-height-tighter);
94
94
  --menuselect-default-icon: var(--text-tertiary);
95
95
  --menuselect-default-icon-size: var(--icon-size-sm);
96
96
 
@@ -100,7 +100,7 @@
100
100
  --menuselect-hover-text-font-family: var(--font-sans);
101
101
  --menuselect-hover-text-font-size: var(--font-size-sm);
102
102
  --menuselect-hover-text-font-weight: var(--font-weight-normal);
103
- --menuselect-hover-text-line-height: var(--line-height-sm);
103
+ --menuselect-hover-text-line-height: var(--line-height-tighter);
104
104
  --menuselect-hover-icon: var(--text-primary);
105
105
  --menuselect-hover-icon-size: var(--icon-size-sm);
106
106
 
@@ -110,7 +110,7 @@
110
110
  --menuselect-selected-text-font-family: var(--font-sans);
111
111
  --menuselect-selected-text-font-size: var(--font-size-sm);
112
112
  --menuselect-selected-text-font-weight: var(--font-weight-semibold);
113
- --menuselect-selected-text-line-height: var(--line-height-sm);
113
+ --menuselect-selected-text-line-height: var(--line-height-tighter);
114
114
  --menuselect-selected-icon: var(--text-brand);
115
115
  --menuselect-selected-icon-size: var(--icon-size-sm);
116
116
  --menuselect-selected-indicator: var(--text-brand);
@@ -121,7 +121,7 @@
121
121
  --menuselect-disabled-text-font-family: var(--font-sans);
122
122
  --menuselect-disabled-text-font-size: var(--font-size-sm);
123
123
  --menuselect-disabled-text-font-weight: var(--font-weight-normal);
124
- --menuselect-disabled-text-line-height: var(--line-height-sm);
124
+ --menuselect-disabled-text-line-height: var(--line-height-tighter);
125
125
  --menuselect-disabled-icon: var(--text-tertiary);
126
126
  --menuselect-disabled-icon-size: var(--icon-size-sm);
127
127
  }
package/src/system/components/Notification.svelte CHANGED
@@ -124,12 +124,12 @@
124
124
  --notification-info-title-font-family: var(--font-sans);
125
125
  --notification-info-title-font-size: var(--font-size-lg);
126
126
  --notification-info-title-font-weight: var(--font-weight-bold);
127
- --notification-info-title-line-height: var(--line-height-sm);
127
+ --notification-info-title-line-height: var(--line-height-tighter);
128
128
  --notification-info-text: var(--text-primary);
129
129
  --notification-info-text-font-family: var(--font-sans);
130
130
  --notification-info-text-font-size: var(--font-size-md);
131
131
  --notification-info-text-font-weight: var(--font-weight-normal);
132
- --notification-info-text-line-height: var(--line-height-md);
132
+ --notification-info-text-line-height: var(--line-height-normal);
133
133
 
134
134
  /* Success */
135
135
  --notification-success-surface: var(--surface-success);
@@ -144,12 +144,12 @@
144
144
  --notification-success-title-font-family: var(--font-sans);
145
145
  --notification-success-title-font-size: var(--font-size-lg);
146
146
  --notification-success-title-font-weight: var(--font-weight-bold);
147
- --notification-success-title-line-height: var(--line-height-sm);
147
+ --notification-success-title-line-height: var(--line-height-tighter);
148
148
  --notification-success-text: var(--text-primary);
149
149
  --notification-success-text-font-family: var(--font-sans);
150
150
  --notification-success-text-font-size: var(--font-size-md);
151
151
  --notification-success-text-font-weight: var(--font-weight-normal);
152
- --notification-success-text-line-height: var(--line-height-md);
152
+ --notification-success-text-line-height: var(--line-height-normal);
153
153
 
154
154
  /* Warning */
155
155
  --notification-warning-surface: var(--surface-warning);
@@ -164,12 +164,12 @@
164
164
  --notification-warning-title-font-family: var(--font-sans);
165
165
  --notification-warning-title-font-size: var(--font-size-lg);
166
166
  --notification-warning-title-font-weight: var(--font-weight-bold);
167
- --notification-warning-title-line-height: var(--line-height-sm);
167
+ --notification-warning-title-line-height: var(--line-height-tighter);
168
168
  --notification-warning-text: var(--text-primary);
169
169
  --notification-warning-text-font-family: var(--font-sans);
170
170
  --notification-warning-text-font-size: var(--font-size-md);
171
171
  --notification-warning-text-font-weight: var(--font-weight-normal);
172
- --notification-warning-text-line-height: var(--line-height-md);
172
+ --notification-warning-text-line-height: var(--line-height-normal);
173
173
 
174
174
  /* Danger */
175
175
  --notification-danger-surface: var(--surface-danger);
@@ -184,12 +184,12 @@
184
184
  --notification-danger-title-font-family: var(--font-sans);
185
185
  --notification-danger-title-font-size: var(--font-size-lg);
186
186
  --notification-danger-title-font-weight: var(--font-weight-bold);
187
- --notification-danger-title-line-height: var(--line-height-sm);
187
+ --notification-danger-title-line-height: var(--line-height-tighter);
188
188
  --notification-danger-text: var(--text-primary);
189
189
  --notification-danger-text-font-family: var(--font-sans);
190
190
  --notification-danger-text-font-size: var(--font-size-md);
191
191
  --notification-danger-text-font-weight: var(--font-weight-normal);
192
- --notification-danger-text-line-height: var(--line-height-md);
192
+ --notification-danger-text-line-height: var(--line-height-normal);
193
193
  }
194
194
 
195
195
  .notification {
package/src/system/components/ProgressBar.svelte CHANGED
@@ -58,12 +58,12 @@
58
58
  --progressbar-label-font-family: var(--font-sans);
59
59
  --progressbar-label-font-size: var(--font-size-md);
60
60
  --progressbar-label-font-weight: var(--font-weight-normal);
61
- --progressbar-label-line-height: var(--line-height-md);
61
+ --progressbar-label-line-height: var(--line-height-normal);
62
62
  --progressbar-value: var(--text-tertiary);
63
63
  --progressbar-value-font-family: var(--font-mono);
64
64
  --progressbar-value-font-size: var(--font-size-md);
65
65
  --progressbar-value-font-weight: var(--font-weight-normal);
66
- --progressbar-value-line-height: var(--line-height-md);
66
+ --progressbar-value-line-height: var(--line-height-normal);
67
67
  }
68
68
 
69
69
  .progress {
package/src/system/components/RadioButton.svelte CHANGED
@@ -48,7 +48,7 @@
48
48
  --radiobutton-default-label-font-family: var(--font-sans);
49
49
  --radiobutton-default-label-font-size: var(--font-size-md);
50
50
  --radiobutton-default-label-font-weight: var(--font-weight-semibold);
51
- --radiobutton-default-label-line-height: var(--line-height-xs);
51
+ --radiobutton-default-label-line-height: var(--line-height-none);
52
52
 
53
53
  /* Hover */
54
54
  --radiobutton-hover-dot-border-color: var(--border-neutral);
@@ -59,7 +59,7 @@
59
59
  --radiobutton-hover-label-font-family: var(--font-sans);
60
60
  --radiobutton-hover-label-font-size: var(--font-size-md);
61
61
  --radiobutton-hover-label-font-weight: var(--font-weight-semibold);
62
- --radiobutton-hover-label-line-height: var(--line-height-xs);
62
+ --radiobutton-hover-label-line-height: var(--line-height-none);
63
63
 
64
64
  /* Active */
65
65
  --radiobutton-active-dot-border-color: var(--border-neutral);
@@ -70,7 +70,7 @@
70
70
  --radiobutton-active-label-font-family: var(--font-sans);
71
71
  --radiobutton-active-label-font-size: var(--font-size-md);
72
72
  --radiobutton-active-label-font-weight: var(--font-weight-semibold);
73
- --radiobutton-active-label-line-height: var(--line-height-xs);
73
+ --radiobutton-active-label-line-height: var(--line-height-none);
74
74
  }
75
75
 
76
76
  .radio-button {
@@ -82,7 +82,7 @@
82
82
  border: none;
83
83
  cursor: pointer;
84
84
  transition: all var(--duration-200);
85
- line-height: var(--line-height-xs);
85
+ line-height: var(--line-height-none);
86
86
 
87
87
  &:hover,
88
88
  &.force-hover {
package/src/system/components/SectionDivider.svelte CHANGED
@@ -202,13 +202,13 @@
202
202
  --sectiondivider-lg-title-font-family: var(--font-display);
203
203
  --sectiondivider-lg-title-font-weight: var(--font-weight-bold);
204
204
  --sectiondivider-lg-title-font-size: var(--font-size-5xl);
205
- --sectiondivider-lg-title-line-height: var(--line-height-md);
205
+ --sectiondivider-lg-title-line-height: var(--line-height-normal);
206
206
  --sectiondivider-lg-title-letter-spacing: var(--letter-spacing-normal);
207
207
  --sectiondivider-lg-title-outline-width: var(--border-width-4);
208
208
  --sectiondivider-lg-description-font-family: var(--font-sans);
209
209
  --sectiondivider-lg-description-font-weight: var(--font-weight-medium);
210
210
  --sectiondivider-lg-description-font-size: var(--font-size-lg);
211
- --sectiondivider-lg-description-line-height: var(--line-height-md);
211
+ --sectiondivider-lg-description-line-height: var(--line-height-normal);
212
212
  --sectiondivider-lg-eyebrow-font-family: var(--font-sans);
213
213
  --sectiondivider-lg-eyebrow-font-weight: var(--font-weight-medium);
214
214
  --sectiondivider-lg-eyebrow-font-size: var(--font-size-md);
@@ -233,13 +233,13 @@
233
233
  --sectiondivider-md-title-font-family: var(--font-display);
234
234
  --sectiondivider-md-title-font-weight: var(--font-weight-bold);
235
235
  --sectiondivider-md-title-font-size: var(--font-size-4xl);
236
- --sectiondivider-md-title-line-height: var(--line-height-md);
236
+ --sectiondivider-md-title-line-height: var(--line-height-normal);
237
237
  --sectiondivider-md-title-letter-spacing: var(--letter-spacing-normal);
238
238
  --sectiondivider-md-title-outline-width: var(--border-width-4);
239
239
  --sectiondivider-md-description-font-family: var(--font-sans);
240
240
  --sectiondivider-md-description-font-weight: var(--font-weight-medium);
241
241
  --sectiondivider-md-description-font-size: var(--font-size-lg);
242
- --sectiondivider-md-description-line-height: var(--line-height-md);
242
+ --sectiondivider-md-description-line-height: var(--line-height-normal);
243
243
  --sectiondivider-md-eyebrow-font-family: var(--font-sans);
244
244
  --sectiondivider-md-eyebrow-font-weight: var(--font-weight-medium);
245
245
  --sectiondivider-md-eyebrow-font-size: var(--font-size-sm);
@@ -264,13 +264,13 @@
264
264
  --sectiondivider-sm-title-font-family: var(--font-display);
265
265
  --sectiondivider-sm-title-font-weight: var(--font-weight-medium);
266
266
  --sectiondivider-sm-title-font-size: var(--font-size-3xl);
267
- --sectiondivider-sm-title-line-height: var(--line-height-md);
267
+ --sectiondivider-sm-title-line-height: var(--line-height-normal);
268
268
  --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
269
269
  --sectiondivider-sm-title-outline-width: var(--border-width-4);
270
270
  --sectiondivider-sm-description-font-family: var(--font-sans);
271
271
  --sectiondivider-sm-description-font-weight: var(--font-weight-medium);
272
272
  --sectiondivider-sm-description-font-size: var(--font-size-5xl);
273
- --sectiondivider-sm-description-line-height: var(--line-height-md);
273
+ --sectiondivider-sm-description-line-height: var(--line-height-normal);
274
274
  --sectiondivider-sm-eyebrow-font-family: var(--font-sans);
275
275
  --sectiondivider-sm-eyebrow-font-weight: var(--font-weight-medium);
276
276
  --sectiondivider-sm-eyebrow-font-size: var(--font-size-xs);
package/src/system/components/SegmentedControl.svelte CHANGED
@@ -87,7 +87,7 @@
87
87
  --segmentedcontrol-option-text-font-family: var(--font-sans);
88
88
  --segmentedcontrol-option-text-font-size: var(--font-size-md);
89
89
  --segmentedcontrol-option-text-font-weight: var(--font-weight-normal);
90
- --segmentedcontrol-option-text-line-height: var(--line-height-md);
90
+ --segmentedcontrol-option-text-line-height: var(--line-height-normal);
91
91
  --segmentedcontrol-option-icon: var(--text-secondary);
92
92
  --segmentedcontrol-option-icon-size: var(--icon-size-md);
93
93
 
@@ -97,7 +97,7 @@
97
97
  --segmentedcontrol-option-hover-text-font-family: var(--font-sans);
98
98
  --segmentedcontrol-option-hover-text-font-size: var(--font-size-md);
99
99
  --segmentedcontrol-option-hover-text-font-weight: var(--font-weight-normal);
100
- --segmentedcontrol-option-hover-text-line-height: var(--line-height-md);
100
+ --segmentedcontrol-option-hover-text-line-height: var(--line-height-normal);
101
101
  --segmentedcontrol-option-hover-icon: var(--text-primary);
102
102
 
103
103
  /* Selected (inner pill) — looks the same hovered or not */
@@ -106,7 +106,7 @@
106
106
  --segmentedcontrol-selected-text-font-family: var(--font-sans);
107
107
  --segmentedcontrol-selected-text-font-size: var(--font-size-md);
108
108
  --segmentedcontrol-selected-text-font-weight: var(--font-weight-normal);
109
- --segmentedcontrol-selected-text-line-height: var(--line-height-md);
109
+ --segmentedcontrol-selected-text-line-height: var(--line-height-normal);
110
110
  --segmentedcontrol-selected-icon: var(--text-secondary);
111
111
  --segmentedcontrol-selected-border: var(--border-brand);
112
112
  --segmentedcontrol-selected-border-width: var(--border-width-1);
@@ -118,7 +118,7 @@
118
118
  --segmentedcontrol-disabled-text-font-family: var(--font-sans);
119
119
  --segmentedcontrol-disabled-text-font-size: var(--font-size-md);
120
120
  --segmentedcontrol-disabled-text-font-weight: var(--font-weight-normal);
121
- --segmentedcontrol-disabled-text-line-height: var(--line-height-md);
121
+ --segmentedcontrol-disabled-text-line-height: var(--line-height-normal);
122
122
  --segmentedcontrol-disabled-icon: var(--text-secondary);
123
123
 
124
124
  /* Small size — overrides for geometry + typography. Per-state colors and
@@ -133,7 +133,7 @@
133
133
  --segmentedcontrol-option-small-gap: var(--space-6);
134
134
  --segmentedcontrol-option-small-icon-size: var(--icon-size-sm);
135
135
  --segmentedcontrol-option-small-text-font-size: var(--font-size-sm);
136
- --segmentedcontrol-option-small-text-line-height: var(--line-height-sm);
136
+ --segmentedcontrol-option-small-text-line-height: var(--line-height-tighter);
137
137
  --segmentedcontrol-selected-small-radius: var(--radius-sm);
138
138
  }
139
139
 
package/src/system/components/SideNavigation.svelte CHANGED
@@ -283,7 +283,7 @@
283
283
  --sidenavigation-title-default-label-font-family: var(--font-display);
284
284
  --sidenavigation-title-default-label-font-size: var(--font-size-2xl);
285
285
  --sidenavigation-title-default-label-font-weight: var(--font-weight-bold);
286
- --sidenavigation-title-default-label-line-height: var(--line-height-sm);
286
+ --sidenavigation-title-default-label-line-height: var(--line-height-tighter);
287
287
 
288
288
  /* Title — hover */
289
289
  --sidenavigation-title-hover-surface: var(--color-transparent);
@@ -296,7 +296,7 @@
296
296
  --sidenavigation-title-hover-label-font-family: var(--font-display);
297
297
  --sidenavigation-title-hover-label-font-size: var(--font-size-2xl);
298
298
  --sidenavigation-title-hover-label-font-weight: var(--font-weight-bold);
299
- --sidenavigation-title-hover-label-line-height: var(--line-height-sm);
299
+ --sidenavigation-title-hover-label-line-height: var(--line-height-tighter);
300
300
 
301
301
  /* Title — active */
302
302
  --sidenavigation-title-active-surface: var(--surface-canvas-low);
@@ -309,7 +309,7 @@
309
309
  --sidenavigation-title-active-label-font-family: var(--font-display);
310
310
  --sidenavigation-title-active-label-font-size: var(--font-size-2xl);
311
311
  --sidenavigation-title-active-label-font-weight: var(--font-weight-bold);
312
- --sidenavigation-title-active-label-line-height: var(--line-height-sm);
312
+ --sidenavigation-title-active-label-line-height: var(--line-height-tighter);
313
313
 
314
314
  /* Toggle — default */
315
315
  --sidenavigation-toggle-default-surface: var(--color-transparent);
@@ -341,7 +341,7 @@
341
341
  --sidenavigation-section-default-text-font-family: var(--font-sans);
342
342
  --sidenavigation-section-default-text-font-size: var(--font-size-lg);
343
343
  --sidenavigation-section-default-text-font-weight: var(--font-weight-medium);
344
- --sidenavigation-section-default-text-line-height: var(--line-height-md);
344
+ --sidenavigation-section-default-text-line-height: var(--line-height-normal);
345
345
 
346
346
  /* Section header — hover */
347
347
  --sidenavigation-section-hover-surface: var(--surface-canvas);
@@ -351,7 +351,7 @@
351
351
  --sidenavigation-section-hover-text-font-family: var(--font-sans);
352
352
  --sidenavigation-section-hover-text-font-size: var(--font-size-lg);
353
353
  --sidenavigation-section-hover-text-font-weight: var(--font-weight-medium);
354
- --sidenavigation-section-hover-text-line-height: var(--line-height-md);
354
+ --sidenavigation-section-hover-text-line-height: var(--line-height-normal);
355
355
 
356
356
  /* Section header — active (this section's page is the current route) */
357
357
  --sidenavigation-section-active-surface: var(--surface-canvas-low);
@@ -361,7 +361,7 @@
361
361
  --sidenavigation-section-active-text-font-family: var(--font-sans);
362
362
  --sidenavigation-section-active-text-font-size: var(--font-size-lg);
363
363
  --sidenavigation-section-active-text-font-weight: var(--font-weight-medium);
364
- --sidenavigation-section-active-text-line-height: var(--line-height-md);
364
+ --sidenavigation-section-active-text-line-height: var(--line-height-normal);
365
365
 
366
366
  /* Item — default */
367
367
  --sidenavigation-item-default-surface: var(--color-transparent);
@@ -372,7 +372,7 @@
372
372
  --sidenavigation-item-default-text-font-family: var(--font-sans);
373
373
  --sidenavigation-item-default-text-font-size: var(--font-size-md);
374
374
  --sidenavigation-item-default-text-font-weight: var(--font-weight-semibold);
375
- --sidenavigation-item-default-text-line-height: var(--line-height-md);
375
+ --sidenavigation-item-default-text-line-height: var(--line-height-normal);
376
376
 
377
377
  /* Item — hover */
378
378
  --sidenavigation-item-hover-surface: var(--surface-canvas);
@@ -383,7 +383,7 @@
383
383
  --sidenavigation-item-hover-text-font-family: var(--font-sans);
384
384
  --sidenavigation-item-hover-text-font-size: var(--font-size-md);
385
385
  --sidenavigation-item-hover-text-font-weight: var(--font-weight-light);
386
- --sidenavigation-item-hover-text-line-height: var(--line-height-md);
386
+ --sidenavigation-item-hover-text-line-height: var(--line-height-normal);
387
387
 
388
388
  /* Item — active */
389
389
  --sidenavigation-item-active-surface: var(--surface-canvas-low);
@@ -394,7 +394,7 @@
394
394
  --sidenavigation-item-active-text-font-family: var(--font-sans);
395
395
  --sidenavigation-item-active-text-font-size: var(--font-size-md);
396
396
  --sidenavigation-item-active-text-font-weight: var(--font-weight-normal);
397
- --sidenavigation-item-active-text-line-height: var(--line-height-md);
397
+ --sidenavigation-item-active-text-line-height: var(--line-height-normal);
398
398
 
399
399
  /* Footer — default */
400
400
  --sidenavigation-footer-default-surface: var(--color-transparent);
@@ -408,7 +408,7 @@
408
408
  --sidenavigation-footer-default-text-font-family: var(--font-sans);
409
409
  --sidenavigation-footer-default-text-font-size: var(--font-size-sm);
410
410
  --sidenavigation-footer-default-text-font-weight: var(--font-weight-light);
411
- --sidenavigation-footer-default-text-line-height: var(--line-height-md);
411
+ --sidenavigation-footer-default-text-line-height: var(--line-height-normal);
412
412
 
413
413
  /* Footer — hover */
414
414
  --sidenavigation-footer-hover-surface: var(--surface-canvas);
@@ -422,7 +422,7 @@
422
422
  --sidenavigation-footer-hover-text-font-family: var(--font-sans);
423
423
  --sidenavigation-footer-hover-text-font-size: var(--font-size-sm);
424
424
  --sidenavigation-footer-hover-text-font-weight: var(--font-weight-light);
425
- --sidenavigation-footer-hover-text-line-height: var(--line-height-md);
425
+ --sidenavigation-footer-hover-text-line-height: var(--line-height-normal);
426
426
 
427
427
  /* Footer — active */
428
428
  --sidenavigation-footer-active-surface: var(--surface-canvas-low);
@@ -436,7 +436,7 @@
436
436
  --sidenavigation-footer-active-text-font-family: var(--font-sans);
437
437
  --sidenavigation-footer-active-text-font-size: var(--font-size-sm);
438
438
  --sidenavigation-footer-active-text-font-weight: var(--font-weight-normal);
439
- --sidenavigation-footer-active-text-line-height: var(--line-height-md);
439
+ --sidenavigation-footer-active-text-line-height: var(--line-height-normal);
440
440
  }
441
441
 
442
442
  .sidenavigation {
package/src/system/components/TabBar.svelte CHANGED
@@ -74,7 +74,7 @@
74
74
  --tabbar-default-text-font-family: var(--font-sans);
75
75
  --tabbar-default-text-font-size: var(--font-size-md);
76
76
  --tabbar-default-text-font-weight: var(--font-weight-light);
77
- --tabbar-default-text-line-height: var(--line-height-md);
77
+ --tabbar-default-text-line-height: var(--line-height-normal);
78
78
  --tabbar-default-icon-size: var(--icon-size-md);
79
79
  --tabbar-default-padding: var(--space-8);
80
80
  --tabbar-default-border: var(--color-transparent);
@@ -91,7 +91,7 @@
91
91
  --tabbar-hover-text-font-family: var(--font-sans);
92
92
  --tabbar-hover-text-font-size: var(--font-size-md);
93
93
  --tabbar-hover-text-font-weight: var(--font-weight-light);
94
- --tabbar-hover-text-line-height: var(--line-height-md);
94
+ --tabbar-hover-text-line-height: var(--line-height-normal);
95
95
  --tabbar-hover-icon-size: var(--icon-size-md);
96
96
  --tabbar-hover-padding: var(--space-8);
97
97
  --tabbar-hover-border: var(--color-transparent);
@@ -108,7 +108,7 @@
108
108
  --tabbar-active-text-font-family: var(--font-sans);
109
109
  --tabbar-active-text-font-size: var(--font-size-md);
110
110
  --tabbar-active-text-font-weight: var(--font-weight-light);
111
- --tabbar-active-text-line-height: var(--line-height-md);
111
+ --tabbar-active-text-line-height: var(--line-height-normal);
112
112
  --tabbar-active-icon-size: var(--icon-size-md);
113
113
  --tabbar-active-padding: var(--space-8);
114
114
  --tabbar-active-tab-border-color: var(--color-transparent);
@@ -122,7 +122,7 @@
122
122
  --tabbar-disabled-text-font-family: var(--font-sans);
123
123
  --tabbar-disabled-text-font-size: var(--font-size-md);
124
124
  --tabbar-disabled-text-font-weight: var(--font-weight-light);
125
- --tabbar-disabled-text-line-height: var(--line-height-md);
125
+ --tabbar-disabled-text-line-height: var(--line-height-normal);
126
126
  --tabbar-disabled-icon-size: var(--icon-size-md);
127
127
  --tabbar-disabled-padding: var(--space-8);
128
128
  --tabbar-disabled-border: var(--color-transparent);
package/src/system/components/Table.svelte CHANGED
@@ -27,7 +27,7 @@
27
27
  --table-default-header-font-family: var(--font-sans);
28
28
  --table-default-header-font-size: var(--font-size-lg);
29
29
  --table-default-header-font-weight: var(--font-weight-semibold);
30
- --table-default-header-line-height: var(--line-height-xs);
30
+ --table-default-header-line-height: var(--line-height-none);
31
31
  --table-default-header-padding: var(--space-12);
32
32
  --table-default-header-border: var(--border-neutral);
33
33
  --table-default-header-border-width: var(--border-width-1);
@@ -37,7 +37,7 @@
37
37
  --table-default-cell-font-family: var(--font-sans);
38
38
  --table-default-cell-font-size: var(--font-size-md);
39
39
  --table-default-cell-font-weight: var(--font-weight-medium);
40
- --table-default-cell-line-height: var(--line-height-md);
40
+ --table-default-cell-line-height: var(--line-height-normal);
41
41
  --table-default-cell-padding: var(--space-8);
42
42
 
43
43
  /* Row */
package/src/system/components/Tooltip.svelte CHANGED
@@ -32,7 +32,7 @@
32
32
  --tooltip-text-font-family: var(--font-sans);
33
33
  --tooltip-text-font-size: var(--font-size-sm);
34
34
  --tooltip-text-font-weight: var(--font-weight-normal);
35
- --tooltip-text-line-height: var(--line-height-md);
35
+ --tooltip-text-line-height: var(--line-height-normal);
36
36
  --tooltip-border: var(--border-neutral);
37
37
  --tooltip-border-width: var(--border-width-1);
38
38
  --tooltip-radius: var(--radius-md);
package/src/system/styles/tokens.css CHANGED
@@ -595,12 +595,13 @@
595
595
  --z-popover: 1200;
596
596
  --z-tooltip: 1300;
597
597
 
598
- /* Line Heights */
599
- --line-height-xs: 1;
600
- --line-height-sm: 1.25;
601
- --line-height-md: 1.5;
602
- --line-height-lg: 1.75;
603
- --line-height-xl: 2;
598
+ /* Line Heights — leading vocabulary (ratios), named by effect. */
599
+ --line-height-none: 1;
600
+ --line-height-tightest: 1.1;
601
+ --line-height-tighter: 1.25;
602
+ --line-height-tight: 1.35;
603
+ --line-height-normal: 1.5;
604
+ --line-height-relaxed: 1.75;
604
605
 
605
606
  /* Letter Spacing — 5-point, symmetric around normal (0). */
606
607
  --letter-spacing-tighter: -0.04em;
@@ -609,6 +610,58 @@
609
610
  --letter-spacing-wide: 0.04em;
610
611
  --letter-spacing-wider: 0.08em;
611
612
 
613
+ /* Text styles — semantic typography roles. Bundles of aliases into the
614
+ primitive scales; site.css maps elements to styles. */
615
+ --heading-xl-font-family: var(--font-display);
616
+ --heading-xl-font-size: var(--font-size-4xl);
617
+ --heading-xl-font-weight: var(--font-weight-semibold);
618
+ --heading-xl-line-height: var(--line-height-tightest);
619
+ --heading-xl-letter-spacing: var(--letter-spacing-normal);
620
+
621
+ --heading-lg-font-family: var(--font-display);
622
+ --heading-lg-font-size: var(--font-size-2xl);
623
+ --heading-lg-font-weight: var(--font-weight-semibold);
624
+ --heading-lg-line-height: var(--line-height-tightest);
625
+ --heading-lg-letter-spacing: var(--letter-spacing-normal);
626
+
627
+ --heading-md-font-family: var(--font-display);
628
+ --heading-md-font-size: var(--font-size-xl);
629
+ --heading-md-font-weight: var(--font-weight-semibold);
630
+ --heading-md-line-height: var(--line-height-tighter);
631
+ --heading-md-letter-spacing: var(--letter-spacing-normal);
632
+
633
+ --heading-sm-font-family: var(--font-sans);
634
+ --heading-sm-font-size: var(--font-size-lg);
635
+ --heading-sm-font-weight: var(--font-weight-semibold);
636
+ --heading-sm-line-height: var(--line-height-tighter);
637
+ --heading-sm-letter-spacing: var(--letter-spacing-normal);
638
+
639
+ --body-md-font-family: var(--font-sans);
640
+ --body-md-font-size: var(--font-size-md);
641
+ --body-md-font-weight: var(--font-weight-normal);
642
+ --body-md-line-height: var(--line-height-normal);
643
+ --body-md-letter-spacing: var(--letter-spacing-normal);
644
+
645
+ --body-sm-font-family: var(--font-sans);
646
+ --body-sm-font-size: var(--font-size-sm);
647
+ --body-sm-font-weight: var(--font-weight-normal);
648
+ --body-sm-line-height: var(--line-height-tight);
649
+ --body-sm-letter-spacing: var(--letter-spacing-normal);
650
+
651
+ --code-font-family: var(--font-mono);
652
+ --code-font-size: var(--font-size-sm);
653
+ --code-font-weight: var(--font-weight-normal);
654
+ --code-line-height: var(--line-height-normal);
655
+ --code-letter-spacing: var(--letter-spacing-normal);
656
+
657
+ /* Eyebrow — values track the existing .eyebrow class in src/app/Home.svelte. */
658
+ --eyebrow-font-family: var(--font-sans);
659
+ --eyebrow-font-size: var(--font-size-sm);
660
+ --eyebrow-font-weight: var(--font-weight-normal);
661
+ --eyebrow-line-height: var(--line-height-normal);
662
+ --eyebrow-letter-spacing: var(--letter-spacing-normal);
663
+ --eyebrow-text-transform: none;
664
+
612
665
  /* Text alternate */
613
666
  --text-alternate: #ffffff;
614
667
  --text-alternate-secondary: #d6d0ce;