@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/live-tokens/data/tokens.generated.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --badge-trait-text-font-family: var(--font-sans);
13
13
  --badge-trait-text-font-size: var(--font-size-sm);
14
14
  --badge-trait-text-font-weight: var(--font-weight-light);
15
- --badge-trait-text-line-height: var(--line-height-xs);
15
+ --badge-trait-text-line-height: var(--line-height-none);
16
16
  --badge-trait-border: var(--border-brand-medium);
17
17
  --badge-trait-border-width: var(--border-width-1);
18
18
  --badge-trait-radius: var(--radius-full);
@@ -23,14 +23,14 @@
23
23
  --sectiondivider-title-font-family: var(--font-display);
24
24
  --sectiondivider-title-font-size: var(--font-size-5xl);
25
25
  --sectiondivider-title-font-weight: var(--font-weight-normal);
26
- --sectiondivider-title-line-height: var(--line-height-xs);
26
+ --sectiondivider-title-line-height: var(--line-height-none);
27
27
  --sectiondivider-title-border-width: var(--border-width-4);
28
28
  --sectiondivider-title-stroke-color: var(--surface-canvas-lowest);
29
29
  --sectiondivider-description: var(--text-secondary);
30
30
  --sectiondivider-description-font-family: var(--font-sans);
31
31
  --sectiondivider-description-font-size: var(--font-size-md);
32
32
  --sectiondivider-description-font-weight: var(--font-weight-normal);
33
- --sectiondivider-description-line-height: var(--line-height-md);
33
+ --sectiondivider-description-line-height: var(--line-height-normal);
34
34
  --dialog-primary-default-surface: var(--surface-neutral-high);
35
35
  --dialog-primary-default-text: var(--text-primary);
36
36
  --dialog-primary-default-border: var(--border-neutral-medium);
@@ -69,96 +69,10 @@
69
69
  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
70
70
  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
71
71
  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
72
- --color-neutral-100: #dde6ed;
73
- --color-neutral-200: #c4cdd4;
74
- --color-neutral-300: #a8b0b7;
75
- --color-neutral-400: #8c949a;
76
- --color-neutral-500: #70787e;
77
- --color-neutral-600: #565d63;
78
- --color-neutral-700: #3d4449;
79
- --color-neutral-800: #252c31;
80
- --color-neutral-850: #10161b;
81
- --color-neutral-900: #020407;
82
- --color-neutral-950: #000000;
83
- --surface-neutral-lowest: #040c13;
84
- --surface-neutral-lower: #162027;
85
- --surface-neutral-low: #2c353c;
86
- --surface-neutral: #434c52;
87
- --surface-neutral-high: #5c6369;
88
- --surface-neutral-higher: #767c81;
89
- --surface-neutral-highest: #91969a;
90
- --border-neutral-faint: #1c2327;
91
- --border-neutral-subtle: #3a4146;
92
- --border-neutral: #5a6267;
93
- --border-neutral-medium: #7c848b;
94
- --border-neutral-strong: #a0a9af;
95
- --text-primary: #ffffff;
96
- --text-secondary: #c2cacf;
97
- --text-tertiary: #7e8285;
98
- --text-muted: #4e4f50;
99
- --text-disabled: #383838;
100
- --color-alternate-100: #eae3e0;
101
- --color-alternate-200: #d2cbc8;
102
- --color-alternate-300: #b7b1ad;
103
- --color-alternate-400: #9c9693;
104
- --color-alternate-500: #817b78;
105
- --color-alternate-600: #68625f;
106
- --color-alternate-700: #4f4947;
107
- --color-alternate-800: #383330;
108
- --color-alternate-850: #221d1b;
109
- --color-alternate-900: #0f0b08;
110
- --color-alternate-950: #030101;
111
- --surface-alternate-lowest: #100907;
112
- --surface-alternate-lower: #231d19;
113
- --surface-alternate-low: #39322f;
114
- --surface-alternate: #4f4946;
115
- --surface-alternate-high: #66615e;
116
- --surface-alternate-higher: #7f7a78;
117
- --surface-alternate-highest: #989492;
118
- --border-alternate-faint: #25201e;
119
- --border-alternate-subtle: #443e3c;
120
- --border-alternate: #655f5c;
121
- --border-alternate-medium: #88827f;
122
- --border-alternate-strong: #aca6a3;
123
- --text-alternate: #ffffff;
124
- --text-alternate-secondary: #d6d0ce;
125
- --text-alternate-tertiary: #8a8786;
126
- --text-alternate-muted: #545352;
127
- --text-alternate-disabled: #3b3b3b;
128
- --color-canvas-100: #cecfe5;
129
- --color-canvas-200: #abacc2;
130
- --color-canvas-300: #8d8da4;
131
- --color-canvas-400: #727289;
132
- --color-canvas-500: #5a5a72;
133
- --color-canvas-600: #45455c;
134
- --color-canvas-700: #33324a;
135
- --color-canvas-800: #232239;
136
- --color-canvas-850: #15142b;
137
- --color-canvas-900: #0b081f;
138
- --color-canvas-950: #040215;
139
- --surface-canvas-lowest: #0a0523;
140
- --surface-canvas-lower: #1c1a37;
141
- --surface-canvas-low: #31304c;
142
- --surface-canvas: #474761;
143
- --surface-canvas-high: #5f6077;
144
- --surface-canvas-higher: #79798e;
145
- --surface-canvas-highest: #9393a5;
146
- --border-canvas-faint: #1f1f34;
147
- --border-canvas-subtle: #3d3d54;
148
- --border-canvas: #5d5e76;
149
- --border-canvas-medium: #80809b;
150
- --border-canvas-strong: #a4a5c0;
151
- --text-canvas: #9595c6;
152
- --text-canvas-secondary: #6b6b89;
153
- --text-canvas-tertiary: #4e4f5e;
154
- --text-canvas-muted: #3c3c41;
155
- --text-canvas-disabled: #343435;
156
- --page-bg: #15142b;
157
- --page-bg-attachment: scroll;
158
72
  --color-brand-100: #ffbad3;
159
73
  --color-brand-200: #ff7fb5;
160
74
  --color-brand-300: #ff49a1;
161
- --color-brand-400: #fb3199;
75
+ --color-brand-400: #fa3199;
162
76
  --color-brand-500: #fb2898;
163
77
  --color-brand-600: #df0083;
164
78
  --color-brand-700: #930055;
@@ -205,12 +119,99 @@
205
119
  --border-accent-subtle: #004a48;
206
120
  --border-accent: #006f6d;
207
121
  --border-accent-medium: #259592;
208
- --border-accent-strong: #54bbb7;
122
+ --border-accent-strong: #53bbb7;
209
123
  --text-accent: #62efea;
210
124
  --text-accent-secondary: #5baba8;
211
- --text-accent-tertiary: #4d7371;
125
+ --text-accent-tertiary: #4d7271;
212
126
  --text-accent-muted: #3c4847;
213
127
  --text-accent-disabled: #313232;
128
+ --color-canvas-100: #cecfe5;
129
+ --color-canvas-200: #abacc2;
130
+ --color-canvas-300: #8d8da4;
131
+ --color-canvas-400: #727289;
132
+ --color-canvas-500: #5a5a72;
133
+ --color-canvas-600: #45455c;
134
+ --color-canvas-700: #33324a;
135
+ --color-canvas-800: #232239;
136
+ --color-canvas-850: #15142b;
137
+ --color-canvas-900: #0b081f;
138
+ --color-canvas-950: #040215;
139
+ --surface-canvas-lowest: #0a0523;
140
+ --surface-canvas-lower: #1c1a37;
141
+ --surface-canvas-low: #31304c;
142
+ --surface-canvas: #474761;
143
+ --surface-canvas-high: #5f6077;
144
+ --surface-canvas-higher: #79798e;
145
+ --surface-canvas-highest: #9393a5;
146
+ --border-canvas-faint: #1f1f34;
147
+ --border-canvas-subtle: #3d3d54;
148
+ --border-canvas: #5d5e76;
149
+ --border-canvas-medium: #80809b;
150
+ --border-canvas-strong: #a4a5c0;
151
+ --text-canvas: #9595c6;
152
+ --text-canvas-secondary: #6b6b89;
153
+ --text-canvas-tertiary: #4e4f5e;
154
+ --text-canvas-muted: #3c3c41;
155
+ --text-canvas-disabled: #343435;
156
+ --page-bg: #3c3c53;
157
+ --page-bg-attachment: scroll;
158
+ --color-neutral-100: #dde6ed;
159
+ --color-neutral-200: #c4cdd4;
160
+ --color-neutral-300: #a8b0b7;
161
+ --color-neutral-400: #8c949a;
162
+ --color-neutral-500: #70787e;
163
+ --color-neutral-600: #565d63;
164
+ --color-neutral-700: #3d4449;
165
+ --color-neutral-800: #252c31;
166
+ --color-neutral-850: #10161b;
167
+ --color-neutral-900: #020407;
168
+ --color-neutral-950: #000000;
169
+ --surface-neutral-lowest: #040c13;
170
+ --surface-neutral-lower: #162027;
171
+ --surface-neutral-low: #2c353c;
172
+ --surface-neutral: #434c52;
173
+ --surface-neutral-high: #5c6369;
174
+ --surface-neutral-higher: #767c81;
175
+ --surface-neutral-highest: #91969a;
176
+ --border-neutral-faint: #1c2327;
177
+ --border-neutral-subtle: #3a4146;
178
+ --border-neutral: #5a6267;
179
+ --border-neutral-medium: #7c848b;
180
+ --border-neutral-strong: #a0a9af;
181
+ --text-primary: #ffffff;
182
+ --text-secondary: #c2cacf;
183
+ --text-tertiary: #7e8285;
184
+ --text-muted: #4e4f50;
185
+ --text-disabled: #383838;
186
+ --text-inverted: #0f0f0f;
187
+ --color-alternate-100: #eae3e0;
188
+ --color-alternate-200: #d2cbc8;
189
+ --color-alternate-300: #b7b1ad;
190
+ --color-alternate-400: #9c9693;
191
+ --color-alternate-500: #817b78;
192
+ --color-alternate-600: #68625f;
193
+ --color-alternate-700: #4f4947;
194
+ --color-alternate-800: #383330;
195
+ --color-alternate-850: #221d1b;
196
+ --color-alternate-900: #0f0b08;
197
+ --color-alternate-950: #030101;
198
+ --surface-alternate-lowest: #100907;
199
+ --surface-alternate-lower: #241d19;
200
+ --surface-alternate-low: #39322f;
201
+ --surface-alternate: #4f4946;
202
+ --surface-alternate-high: #66615e;
203
+ --surface-alternate-higher: #7f7a78;
204
+ --surface-alternate-highest: #989492;
205
+ --border-alternate-faint: #25201e;
206
+ --border-alternate-subtle: #443e3c;
207
+ --border-alternate: #655f5c;
208
+ --border-alternate-medium: #88827f;
209
+ --border-alternate-strong: #ada6a3;
210
+ --text-alternate: #ffffff;
211
+ --text-alternate-secondary: #d6d0cd;
212
+ --text-alternate-tertiary: #8a8786;
213
+ --text-alternate-muted: #545352;
214
+ --text-alternate-disabled: #3b3b3b;
214
215
  --color-special-100: #d2c8ff;
215
216
  --color-special-200: #b19cff;
216
217
  --color-special-300: #9673f5;
@@ -288,10 +289,10 @@
288
289
  --border-success-faint: #002a0d;
289
290
  --border-success-subtle: #004e1f;
290
291
  --border-success: #007532;
291
- --border-success-medium: #069e46;
292
+ --border-success-medium: #059e46;
292
293
  --border-success-strong: #47c46b;
293
294
  --text-success: #88f2a0;
294
- --text-success-secondary: #2f974e;
295
+ --text-success-secondary: #2e974e;
295
296
  --text-success-tertiary: #31673e;
296
297
  --text-success-muted: #2c4530;
297
298
  --text-success-disabled: #263429;
@@ -336,7 +337,7 @@
336
337
  --color-danger-950: #110000;
337
338
  --surface-danger-lowest: #1f0001;
338
339
  --surface-danger-lower: #410004;
339
- --surface-danger-low: #67000b;
340
+ --surface-danger-low: #67000c;
340
341
  --surface-danger: #8f0014;
341
342
  --surface-danger-high: #ba001e;
342
343
  --surface-danger-higher: #cf4443;
package/src/system/components/Badge.svelte CHANGED
@@ -67,7 +67,7 @@
67
67
  --badge-primary-text-font-family: var(--font-sans);
68
68
  --badge-primary-text-font-size: var(--font-size-md);
69
69
  --badge-primary-text-font-weight: var(--font-weight-normal);
70
- --badge-primary-text-line-height: var(--line-height-xs);
70
+ --badge-primary-text-line-height: var(--line-height-none);
71
71
  --badge-primary-border-width: var(--border-width-1);
72
72
  --badge-primary-radius: var(--radius-full);
73
73
  --badge-primary-padding: var(--space-6);
@@ -82,7 +82,7 @@
82
82
  --badge-accent-text-font-family: var(--font-sans);
83
83
  --badge-accent-text-font-size: var(--font-size-md);
84
84
  --badge-accent-text-font-weight: var(--font-weight-normal);
85
- --badge-accent-text-line-height: var(--line-height-xs);
85
+ --badge-accent-text-line-height: var(--line-height-none);
86
86
  --badge-accent-border-width: var(--border-width-1);
87
87
  --badge-accent-radius: var(--radius-full);
88
88
  --badge-accent-padding: var(--space-6);
@@ -97,7 +97,7 @@
97
97
  --badge-neutral-text-font-family: var(--font-sans);
98
98
  --badge-neutral-text-font-size: var(--font-size-md);
99
99
  --badge-neutral-text-font-weight: var(--font-weight-normal);
100
- --badge-neutral-text-line-height: var(--line-height-xs);
100
+ --badge-neutral-text-line-height: var(--line-height-none);
101
101
  --badge-neutral-border-width: var(--border-width-1);
102
102
  --badge-neutral-radius: var(--radius-full);
103
103
  --badge-neutral-padding: var(--space-6);
@@ -112,7 +112,7 @@
112
112
  --badge-alternate-text-font-family: var(--font-sans);
113
113
  --badge-alternate-text-font-size: var(--font-size-md);
114
114
  --badge-alternate-text-font-weight: var(--font-weight-normal);
115
- --badge-alternate-text-line-height: var(--line-height-xs);
115
+ --badge-alternate-text-line-height: var(--line-height-none);
116
116
  --badge-alternate-border-width: var(--border-width-1);
117
117
  --badge-alternate-radius: var(--radius-full);
118
118
  --badge-alternate-padding: var(--space-6);
@@ -127,7 +127,7 @@
127
127
  --badge-canvas-text-font-family: var(--font-sans);
128
128
  --badge-canvas-text-font-size: var(--font-size-md);
129
129
  --badge-canvas-text-font-weight: var(--font-weight-normal);
130
- --badge-canvas-text-line-height: var(--line-height-xs);
130
+ --badge-canvas-text-line-height: var(--line-height-none);
131
131
  --badge-canvas-border-width: var(--border-width-1);
132
132
  --badge-canvas-radius: var(--radius-full);
133
133
  --badge-canvas-padding: var(--space-6);
@@ -142,7 +142,7 @@
142
142
  --badge-special-text-font-family: var(--font-sans);
143
143
  --badge-special-text-font-size: var(--font-size-md);
144
144
  --badge-special-text-font-weight: var(--font-weight-normal);
145
- --badge-special-text-line-height: var(--line-height-xs);
145
+ --badge-special-text-line-height: var(--line-height-none);
146
146
  --badge-special-border-width: var(--border-width-1);
147
147
  --badge-special-radius: var(--radius-full);
148
148
  --badge-special-padding: var(--space-6);
@@ -157,7 +157,7 @@
157
157
  --badge-success-text-font-family: var(--font-sans);
158
158
  --badge-success-text-font-size: var(--font-size-md);
159
159
  --badge-success-text-font-weight: var(--font-weight-normal);
160
- --badge-success-text-line-height: var(--line-height-xs);
160
+ --badge-success-text-line-height: var(--line-height-none);
161
161
  --badge-success-border-width: var(--border-width-1);
162
162
  --badge-success-radius: var(--radius-full);
163
163
  --badge-success-padding: var(--space-6);
@@ -172,7 +172,7 @@
172
172
  --badge-warning-text-font-family: var(--font-sans);
173
173
  --badge-warning-text-font-size: var(--font-size-md);
174
174
  --badge-warning-text-font-weight: var(--font-weight-normal);
175
- --badge-warning-text-line-height: var(--line-height-xs);
175
+ --badge-warning-text-line-height: var(--line-height-none);
176
176
  --badge-warning-border-width: var(--border-width-1);
177
177
  --badge-warning-radius: var(--radius-full);
178
178
  --badge-warning-padding: var(--space-6);
@@ -187,7 +187,7 @@
187
187
  --badge-danger-text-font-family: var(--font-sans);
188
188
  --badge-danger-text-font-size: var(--font-size-md);
189
189
  --badge-danger-text-font-weight: var(--font-weight-normal);
190
- --badge-danger-text-line-height: var(--line-height-xs);
190
+ --badge-danger-text-line-height: var(--line-height-none);
191
191
  --badge-danger-border-width: var(--border-width-1);
192
192
  --badge-danger-radius: var(--radius-full);
193
193
  --badge-danger-padding: var(--space-6);
@@ -202,7 +202,7 @@
202
202
  --badge-info-text-font-family: var(--font-sans);
203
203
  --badge-info-text-font-size: var(--font-size-md);
204
204
  --badge-info-text-font-weight: var(--font-weight-normal);
205
- --badge-info-text-line-height: var(--line-height-xs);
205
+ --badge-info-text-line-height: var(--line-height-none);
206
206
  --badge-info-border-width: var(--border-width-1);
207
207
  --badge-info-radius: var(--radius-full);
208
208
  --badge-info-padding: var(--space-6);
@@ -215,7 +215,7 @@
215
215
  display: inline-flex;
216
216
  align-items: center;
217
217
  gap: var(--space-6);
218
- line-height: var(--line-height-xs);
218
+ line-height: var(--line-height-none);
219
219
  white-space: nowrap;
220
220
  backdrop-filter: blur(var(--badge-blur, 0));
221
221
  -webkit-backdrop-filter: blur(var(--badge-blur, 0));
package/src/system/components/Button.svelte CHANGED
@@ -79,7 +79,7 @@
79
79
  --button-primary-text-font-family: var(--font-sans);
80
80
  --button-primary-text-font-size: var(--font-size-lg);
81
81
  --button-primary-text-font-weight: var(--font-weight-semibold);
82
- --button-primary-text-line-height: var(--line-height-sm);
82
+ --button-primary-text-line-height: var(--line-height-tighter);
83
83
  --button-primary-border: var(--border-brand);
84
84
  --button-primary-border-width: var(--border-width-1);
85
85
  --button-primary-radius: var(--radius-xl);
@@ -98,7 +98,7 @@
98
98
  --button-secondary-text-font-family: var(--font-sans);
99
99
  --button-secondary-text-font-size: var(--font-size-lg);
100
100
  --button-secondary-text-font-weight: var(--font-weight-semibold);
101
- --button-secondary-text-line-height: var(--line-height-sm);
101
+ --button-secondary-text-line-height: var(--line-height-tighter);
102
102
  --button-secondary-border: var(--border-neutral);
103
103
  --button-secondary-border-width: var(--border-width-1);
104
104
  --button-secondary-radius: var(--radius-xl);
@@ -117,7 +117,7 @@
117
117
  --button-outline-text-font-family: var(--font-sans);
118
118
  --button-outline-text-font-size: var(--font-size-lg);
119
119
  --button-outline-text-font-weight: var(--font-weight-semibold);
120
- --button-outline-text-line-height: var(--line-height-sm);
120
+ --button-outline-text-line-height: var(--line-height-tighter);
121
121
  --button-outline-border: var(--border-neutral);
122
122
  --button-outline-border-width: var(--border-width-1);
123
123
  --button-outline-radius: var(--radius-xl);
@@ -137,7 +137,7 @@
137
137
  --button-success-text-font-family: var(--font-sans);
138
138
  --button-success-text-font-size: var(--font-size-lg);
139
139
  --button-success-text-font-weight: var(--font-weight-semibold);
140
- --button-success-text-line-height: var(--line-height-sm);
140
+ --button-success-text-line-height: var(--line-height-tighter);
141
141
  --button-success-border: var(--border-success);
142
142
  --button-success-border-width: var(--border-width-1);
143
143
  --button-success-radius: var(--radius-xl);
@@ -156,7 +156,7 @@
156
156
  --button-danger-text-font-family: var(--font-sans);
157
157
  --button-danger-text-font-size: var(--font-size-lg);
158
158
  --button-danger-text-font-weight: var(--font-weight-semibold);
159
- --button-danger-text-line-height: var(--line-height-sm);
159
+ --button-danger-text-line-height: var(--line-height-tighter);
160
160
  --button-danger-border: var(--border-danger);
161
161
  --button-danger-border-width: var(--border-width-1);
162
162
  --button-danger-radius: var(--radius-xl);
@@ -175,7 +175,7 @@
175
175
  --button-warning-text-font-family: var(--font-sans);
176
176
  --button-warning-text-font-size: var(--font-size-lg);
177
177
  --button-warning-text-font-weight: var(--font-weight-semibold);
178
- --button-warning-text-line-height: var(--line-height-sm);
178
+ --button-warning-text-line-height: var(--line-height-tighter);
179
179
  --button-warning-border: var(--border-warning);
180
180
  --button-warning-border-width: var(--border-width-1);
181
181
  --button-warning-radius: var(--radius-xl);
@@ -195,7 +195,7 @@
195
195
  --button-small-padding: var(--space-6);
196
196
  --button-small-text-font-size: var(--font-size-sm);
197
197
  --button-small-text-font-weight: var(--font-weight-normal);
198
- --button-small-text-line-height: var(--line-height-sm);
198
+ --button-small-text-line-height: var(--line-height-tighter);
199
199
  --button-small-icon-size: var(--font-size-xs);
200
200
  }
201
201
 
package/src/system/components/Callout.svelte CHANGED
@@ -36,12 +36,12 @@
36
36
  --callout-info-label-font-family: var(--font-sans);
37
37
  --callout-info-label-font-size: var(--font-size-lg);
38
38
  --callout-info-label-font-weight: var(--font-weight-bold);
39
- --callout-info-label-line-height: var(--line-height-md);
39
+ --callout-info-label-line-height: var(--line-height-normal);
40
40
  --callout-info-text: var(--text-info);
41
41
  --callout-info-text-font-family: var(--font-sans);
42
42
  --callout-info-text-font-size: var(--font-size-lg);
43
43
  --callout-info-text-font-weight: var(--font-weight-normal);
44
- --callout-info-text-line-height: var(--line-height-md);
44
+ --callout-info-text-line-height: var(--line-height-normal);
45
45
 
46
46
  /* Success */
47
47
  --callout-success-surface: var(--surface-success-lowest);
@@ -54,12 +54,12 @@
54
54
  --callout-success-label-font-family: var(--font-sans);
55
55
  --callout-success-label-font-size: var(--font-size-lg);
56
56
  --callout-success-label-font-weight: var(--font-weight-bold);
57
- --callout-success-label-line-height: var(--line-height-md);
57
+ --callout-success-label-line-height: var(--line-height-normal);
58
58
  --callout-success-text: var(--text-success);
59
59
  --callout-success-text-font-family: var(--font-sans);
60
60
  --callout-success-text-font-size: var(--font-size-lg);
61
61
  --callout-success-text-font-weight: var(--font-weight-normal);
62
- --callout-success-text-line-height: var(--line-height-md);
62
+ --callout-success-text-line-height: var(--line-height-normal);
63
63
 
64
64
  /* Warning */
65
65
  --callout-warning-surface: var(--surface-warning-lowest);
@@ -72,12 +72,12 @@
72
72
  --callout-warning-label-font-family: var(--font-sans);
73
73
  --callout-warning-label-font-size: var(--font-size-lg);
74
74
  --callout-warning-label-font-weight: var(--font-weight-bold);
75
- --callout-warning-label-line-height: var(--line-height-md);
75
+ --callout-warning-label-line-height: var(--line-height-normal);
76
76
  --callout-warning-text: var(--text-warning);
77
77
  --callout-warning-text-font-family: var(--font-sans);
78
78
  --callout-warning-text-font-size: var(--font-size-lg);
79
79
  --callout-warning-text-font-weight: var(--font-weight-normal);
80
- --callout-warning-text-line-height: var(--line-height-md);
80
+ --callout-warning-text-line-height: var(--line-height-normal);
81
81
 
82
82
  /* Danger */
83
83
  --callout-danger-surface: var(--surface-danger-lowest);
@@ -90,12 +90,12 @@
90
90
  --callout-danger-label-font-family: var(--font-sans);
91
91
  --callout-danger-label-font-size: var(--font-size-lg);
92
92
  --callout-danger-label-font-weight: var(--font-weight-bold);
93
- --callout-danger-label-line-height: var(--line-height-md);
93
+ --callout-danger-label-line-height: var(--line-height-normal);
94
94
  --callout-danger-text: var(--text-danger);
95
95
  --callout-danger-text-font-family: var(--font-sans);
96
96
  --callout-danger-text-font-size: var(--font-size-lg);
97
97
  --callout-danger-text-font-weight: var(--font-weight-normal);
98
- --callout-danger-text-line-height: var(--line-height-md);
98
+ --callout-danger-text-line-height: var(--line-height-normal);
99
99
  }
100
100
 
101
101
  .callout {
package/src/system/components/Card.svelte CHANGED
@@ -83,7 +83,7 @@
83
83
  --card-default-title-font-family: var(--font-sans);
84
84
  --card-default-title-font-size: var(--font-size-2xl);
85
85
  --card-default-title-font-weight: var(--font-weight-medium);
86
- --card-default-title-line-height: var(--line-height-md);
86
+ --card-default-title-line-height: var(--line-height-normal);
87
87
 
88
88
  --card-default-icon-size: var(--icon-size-2xl);
89
89
 
@@ -91,7 +91,7 @@
91
91
  --card-default-body-font-family: var(--font-sans);
92
92
  --card-default-body-font-size: var(--font-size-xl);
93
93
  --card-default-body-font-weight: var(--font-weight-normal);
94
- --card-default-body-line-height: var(--line-height-md);
94
+ --card-default-body-line-height: var(--line-height-normal);
95
95
 
96
96
  --card-hover-border: var(--border-neutral-strong);
97
97
  --card-hover-shadow: var(--shadow-md);
package/src/system/components/CodeSnippet.svelte CHANGED
@@ -65,7 +65,7 @@
65
65
  --codesnippet-code-font-family: var(--font-mono);
66
66
  --codesnippet-code-font-size: var(--font-size-md);
67
67
  --codesnippet-code-font-weight: var(--font-weight-normal);
68
- --codesnippet-code-line-height: var(--line-height-md);
68
+ --codesnippet-code-line-height: var(--line-height-normal);
69
69
 
70
70
  /* Copy icon (default + hover). */
71
71
  --codesnippet-icon: var(--text-secondary);
package/src/system/components/CollapsibleSection.svelte CHANGED
@@ -88,7 +88,7 @@
88
88
  --collapsiblesection-chromeless-default-label-font-family: var(--font-sans);
89
89
  --collapsiblesection-chromeless-default-label-font-size: var(--font-size-md);
90
90
  --collapsiblesection-chromeless-default-label-font-weight: var(--font-weight-normal);
91
- --collapsiblesection-chromeless-default-label-line-height: var(--line-height-md);
91
+ --collapsiblesection-chromeless-default-label-line-height: var(--line-height-normal);
92
92
  --collapsiblesection-chromeless-default-icon: var(--text-primary);
93
93
  --collapsiblesection-chromeless-default-icon-size: var(--icon-size-xs);
94
94
  /* Chromeless — hover */
@@ -98,7 +98,7 @@
98
98
  --collapsiblesection-chromeless-hover-label-font-family: var(--font-sans);
99
99
  --collapsiblesection-chromeless-hover-label-font-size: var(--font-size-md);
100
100
  --collapsiblesection-chromeless-hover-label-font-weight: var(--font-weight-normal);
101
- --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-md);
101
+ --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-normal);
102
102
  --collapsiblesection-chromeless-hover-icon: var(--text-primary);
103
103
  --collapsiblesection-chromeless-hover-icon-size: var(--icon-size-xs);
104
104
  /* Chromeless — expanded */
@@ -113,7 +113,7 @@
113
113
  --collapsiblesection-divider-default-label-font-family: var(--font-sans);
114
114
  --collapsiblesection-divider-default-label-font-size: var(--font-size-md);
115
115
  --collapsiblesection-divider-default-label-font-weight: var(--font-weight-normal);
116
- --collapsiblesection-divider-default-label-line-height: var(--line-height-md);
116
+ --collapsiblesection-divider-default-label-line-height: var(--line-height-normal);
117
117
  --collapsiblesection-divider-default-icon: var(--text-primary);
118
118
  --collapsiblesection-divider-default-icon-size: var(--icon-size-xs);
119
119
  /* Divider — hover */
@@ -125,7 +125,7 @@
125
125
  --collapsiblesection-divider-hover-label-font-family: var(--font-sans);
126
126
  --collapsiblesection-divider-hover-label-font-size: var(--font-size-md);
127
127
  --collapsiblesection-divider-hover-label-font-weight: var(--font-weight-normal);
128
- --collapsiblesection-divider-hover-label-line-height: var(--line-height-md);
128
+ --collapsiblesection-divider-hover-label-line-height: var(--line-height-normal);
129
129
  --collapsiblesection-divider-hover-icon: var(--text-primary);
130
130
  --collapsiblesection-divider-hover-icon-size: var(--icon-size-xs);
131
131
  /* Divider — expanded */
@@ -142,7 +142,7 @@
142
142
  --collapsiblesection-container-default-label-font-family: var(--font-sans);
143
143
  --collapsiblesection-container-default-label-font-size: var(--font-size-md);
144
144
  --collapsiblesection-container-default-label-font-weight: var(--font-weight-normal);
145
- --collapsiblesection-container-default-label-line-height: var(--line-height-md);
145
+ --collapsiblesection-container-default-label-line-height: var(--line-height-normal);
146
146
  --collapsiblesection-container-default-icon: var(--text-primary);
147
147
  --collapsiblesection-container-default-icon-size: var(--icon-size-xs);
148
148
  /* Container — hover header strip */
@@ -152,7 +152,7 @@
152
152
  --collapsiblesection-container-hover-label-font-family: var(--font-sans);
153
153
  --collapsiblesection-container-hover-label-font-size: var(--font-size-md);
154
154
  --collapsiblesection-container-hover-label-font-weight: var(--font-weight-normal);
155
- --collapsiblesection-container-hover-label-line-height: var(--line-height-md);
155
+ --collapsiblesection-container-hover-label-line-height: var(--line-height-normal);
156
156
  --collapsiblesection-container-hover-icon: var(--text-primary);
157
157
  --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
158
158
  /* Container — expanded content area */
@@ -288,7 +288,7 @@
288
288
  .section-content {
289
289
  color: var(--text-secondary);
290
290
  font-size: var(--font-size-md);
291
- line-height: var(--line-height-md);
291
+ line-height: var(--line-height-normal);
292
292
 
293
293
  @include slot-prose;
294
294
  }
package/src/system/components/CornerBadge.svelte CHANGED
@@ -53,7 +53,7 @@
53
53
  --corner-badge-text-font-family: var(--font-sans);
54
54
  --corner-badge-text-font-size: var(--font-size-sm);
55
55
  --corner-badge-text-font-weight: var(--font-weight-medium);
56
- --corner-badge-text-line-height: var(--line-height-xs);
56
+ --corner-badge-text-line-height: var(--line-height-none);
57
57
 
58
58
  /* Per-variant color overrides. Default = inherit the same family/level the
59
59
  inner Badge uses; author can swap to a different level (e.g. -low) to
package/src/system/components/Dialog.svelte CHANGED
@@ -188,7 +188,7 @@
188
188
  --dialog-title-font-family: var(--font-sans);
189
189
  --dialog-title-font-size: var(--font-size-2xl);
190
190
  --dialog-title-font-weight: var(--font-weight-normal);
191
- --dialog-title-line-height: var(--line-height-sm);
191
+ --dialog-title-line-height: var(--line-height-tighter);
192
192
 
193
193
  /* Close icon */
194
194
  --dialog-close-icon: var(--text-secondary);
@@ -200,7 +200,7 @@
200
200
  --dialog-body-font-family: var(--font-sans);
201
201
  --dialog-body-font-size: var(--font-size-md);
202
202
  --dialog-body-font-weight: var(--font-weight-normal);
203
- --dialog-body-line-height: var(--line-height-md);
203
+ --dialog-body-line-height: var(--line-height-normal);
204
204
 
205
205
  /* Footer */
206
206
  --dialog-footer-border: var(--border-neutral-subtle);
package/src/system/components/FloatingTokenTags.css CHANGED
@@ -165,7 +165,7 @@
165
165
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
166
166
  font-size: 0.875rem;
167
167
  font-weight: 700;
168
- color: #ff8eeb;
168
+ color: var(--text-secondary);
169
169
  white-space: nowrap;
170
170
  }
171
171
 
@@ -176,12 +176,13 @@
176
176
  align-items: center;
177
177
  gap: 0.25rem;
178
178
  padding: 0.375rem 0.75rem;
179
+ /* Darkest stop stays ≥ #8f9090 so black text keeps ~6:1 AA contrast. */
179
180
  background: linear-gradient(
180
181
  135deg,
181
- #cccdcd 0%,
182
- #7c7d7d 38%,
183
- #b1b2b2 62%,
184
- #626363 100%
182
+ #e4e5e5 0%,
183
+ #a2a3a3 38%,
184
+ #cdcece 62%,
185
+ #8f9090 100%
185
186
  );
186
187
  color: #000;
187
188
  border: 1px solid rgba(255, 255, 255, 0.55);
package/src/system/components/Input.svelte CHANGED
@@ -153,7 +153,7 @@
153
153
  --input-default-text-font-family: var(--font-sans);
154
154
  --input-default-text-font-size: var(--font-size-sm);
155
155
  --input-default-text-font-weight: var(--font-weight-normal);
156
- --input-default-text-line-height: var(--line-height-sm);
156
+ --input-default-text-line-height: var(--line-height-tighter);
157
157
  --input-default-icon: var(--text-tertiary);
158
158
  --input-default-icon-size: var(--icon-size-sm);
159
159
  --input-default-placeholder: var(--text-tertiary);
@@ -166,7 +166,7 @@
166
166
  --input-focused-text-font-family: var(--font-sans);
167
167
  --input-focused-text-font-size: var(--font-size-sm);
168
168
  --input-focused-text-font-weight: var(--font-weight-normal);
169
- --input-focused-text-line-height: var(--line-height-sm);
169
+ --input-focused-text-line-height: var(--line-height-tighter);
170
170
  --input-focused-icon: var(--text-secondary);
171
171
  --input-focused-icon-size: var(--icon-size-sm);
172
172
 
@@ -177,7 +177,7 @@
177
177
  --input-disabled-text-font-family: var(--font-sans);
178
178
  --input-disabled-text-font-size: var(--font-size-sm);
179
179
  --input-disabled-text-font-weight: var(--font-weight-normal);
180
- --input-disabled-text-line-height: var(--line-height-sm);
180
+ --input-disabled-text-line-height: var(--line-height-tighter);
181
181
  --input-disabled-icon: var(--text-tertiary);
182
182
  --input-disabled-icon-size: var(--icon-size-sm);
183
183
 
@@ -186,14 +186,14 @@
186
186
  --input-label-font-family: var(--font-sans);
187
187
  --input-label-font-size: var(--font-size-sm);
188
188
  --input-label-font-weight: var(--font-weight-semibold);
189
- --input-label-line-height: var(--line-height-sm);
189
+ --input-label-line-height: var(--line-height-tighter);
190
190
 
191
191
  /* Hint */
192
192
  --input-hint: var(--text-tertiary);
193
193
  --input-hint-font-family: var(--font-sans);
194
194
  --input-hint-font-size: var(--font-size-xs);
195
195
  --input-hint-font-weight: var(--font-weight-normal);
196
- --input-hint-line-height: var(--line-height-sm);
196
+ --input-hint-line-height: var(--line-height-tighter);
197
197
 
198
198
  /* Error — outline mirrors the focused state so width changes don't reflow the field */
199
199
  --input-error-border: var(--border-danger);
@@ -202,7 +202,7 @@
202
202
  --input-error-font-family: var(--font-sans);
203
203
  --input-error-font-size: var(--font-size-xs);
204
204
  --input-error-font-weight: var(--font-weight-medium);
205
- --input-error-line-height: var(--line-height-sm);
205
+ --input-error-line-height: var(--line-height-tighter);
206
206
  }
207
207
 
208
208
  .input-field {