@motion-proto/live-tokens 0.21.2 → 0.22.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 (10) hide show
  1. package/package.json +4 -2
  2. package/src/system/components/Badge.svelte +20 -20
  3. package/src/system/components/CollapsibleSection.svelte +11 -11
  4. package/src/system/components/CornerBadge.svelte +1 -1
  5. package/src/system/components/MenuSelect.svelte +2 -2
  6. package/src/system/components/Notification.svelte +8 -8
  7. package/src/system/components/ProgressBar.svelte +8 -8
  8. package/src/system/components/SectionDivider.svelte +43 -43
  9. package/src/system/components/SegmentedControl.svelte +10 -10
  10. package/template/_gitignore +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motion-proto/live-tokens",
3
- "version": "0.21.2",
3
+ "version": "0.22.0",
4
4
  "type": "module",
5
5
  "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
6
6
  "keywords": [
@@ -90,9 +90,11 @@
90
90
  "deploy:local": "bash scripts/deploy-local.sh",
91
91
  "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
92
92
  "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
93
+ "check:component-defaults": "node scripts/sync-component-defaults.mjs --check",
94
+ "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
93
95
  "check:smoke-install": "bash scripts/smoke-install.sh",
94
96
  "check:smoke-create": "bash scripts/smoke-create.sh",
95
- "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run build:lib && npm run check:smoke-install && npm run check:smoke-create"
97
+ "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run check:component-defaults && npm run build:lib && npm run check:smoke-install && npm run check:smoke-create"
96
98
  },
97
99
  "peerDependencies": {
98
100
  "@sveltejs/vite-plugin-svelte": "^7.0",
package/src/system/components/Badge.svelte CHANGED
@@ -65,8 +65,8 @@
65
65
  --badge-primary-text: var(--text-brand);
66
66
  --badge-primary-border: var(--border-brand);
67
67
  --badge-primary-text-font-family: var(--font-sans);
68
- --badge-primary-text-font-size: var(--font-size-sm);
69
- --badge-primary-text-font-weight: var(--font-weight-light);
68
+ --badge-primary-text-font-size: var(--font-size-md);
69
+ --badge-primary-text-font-weight: var(--font-weight-normal);
70
70
  --badge-primary-text-line-height: var(--line-height-xs);
71
71
  --badge-primary-border-width: var(--border-width-1);
72
72
  --badge-primary-radius: var(--radius-full);
@@ -80,8 +80,8 @@
80
80
  --badge-accent-text: var(--text-accent);
81
81
  --badge-accent-border: var(--border-accent);
82
82
  --badge-accent-text-font-family: var(--font-sans);
83
- --badge-accent-text-font-size: var(--font-size-sm);
84
- --badge-accent-text-font-weight: var(--font-weight-light);
83
+ --badge-accent-text-font-size: var(--font-size-md);
84
+ --badge-accent-text-font-weight: var(--font-weight-normal);
85
85
  --badge-accent-text-line-height: var(--line-height-xs);
86
86
  --badge-accent-border-width: var(--border-width-1);
87
87
  --badge-accent-radius: var(--radius-full);
@@ -95,8 +95,8 @@
95
95
  --badge-neutral-text: var(--text-primary);
96
96
  --badge-neutral-border: var(--border-neutral);
97
97
  --badge-neutral-text-font-family: var(--font-sans);
98
- --badge-neutral-text-font-size: var(--font-size-sm);
99
- --badge-neutral-text-font-weight: var(--font-weight-light);
98
+ --badge-neutral-text-font-size: var(--font-size-md);
99
+ --badge-neutral-text-font-weight: var(--font-weight-normal);
100
100
  --badge-neutral-text-line-height: var(--line-height-xs);
101
101
  --badge-neutral-border-width: var(--border-width-1);
102
102
  --badge-neutral-radius: var(--radius-full);
@@ -110,8 +110,8 @@
110
110
  --badge-alternate-text: var(--text-alternate);
111
111
  --badge-alternate-border: var(--border-alternate);
112
112
  --badge-alternate-text-font-family: var(--font-sans);
113
- --badge-alternate-text-font-size: var(--font-size-sm);
114
- --badge-alternate-text-font-weight: var(--font-weight-light);
113
+ --badge-alternate-text-font-size: var(--font-size-md);
114
+ --badge-alternate-text-font-weight: var(--font-weight-normal);
115
115
  --badge-alternate-text-line-height: var(--line-height-xs);
116
116
  --badge-alternate-border-width: var(--border-width-1);
117
117
  --badge-alternate-radius: var(--radius-full);
@@ -125,8 +125,8 @@
125
125
  --badge-canvas-text: var(--text-canvas);
126
126
  --badge-canvas-border: var(--border-canvas);
127
127
  --badge-canvas-text-font-family: var(--font-sans);
128
- --badge-canvas-text-font-size: var(--font-size-sm);
129
- --badge-canvas-text-font-weight: var(--font-weight-light);
128
+ --badge-canvas-text-font-size: var(--font-size-md);
129
+ --badge-canvas-text-font-weight: var(--font-weight-normal);
130
130
  --badge-canvas-text-line-height: var(--line-height-xs);
131
131
  --badge-canvas-border-width: var(--border-width-1);
132
132
  --badge-canvas-radius: var(--radius-full);
@@ -140,8 +140,8 @@
140
140
  --badge-special-text: var(--text-special);
141
141
  --badge-special-border: var(--border-special);
142
142
  --badge-special-text-font-family: var(--font-sans);
143
- --badge-special-text-font-size: var(--font-size-sm);
144
- --badge-special-text-font-weight: var(--font-weight-light);
143
+ --badge-special-text-font-size: var(--font-size-md);
144
+ --badge-special-text-font-weight: var(--font-weight-normal);
145
145
  --badge-special-text-line-height: var(--line-height-xs);
146
146
  --badge-special-border-width: var(--border-width-1);
147
147
  --badge-special-radius: var(--radius-full);
@@ -155,8 +155,8 @@
155
155
  --badge-success-text: var(--text-success);
156
156
  --badge-success-border: var(--border-success);
157
157
  --badge-success-text-font-family: var(--font-sans);
158
- --badge-success-text-font-size: var(--font-size-sm);
159
- --badge-success-text-font-weight: var(--font-weight-light);
158
+ --badge-success-text-font-size: var(--font-size-md);
159
+ --badge-success-text-font-weight: var(--font-weight-normal);
160
160
  --badge-success-text-line-height: var(--line-height-xs);
161
161
  --badge-success-border-width: var(--border-width-1);
162
162
  --badge-success-radius: var(--radius-full);
@@ -170,8 +170,8 @@
170
170
  --badge-warning-text: var(--text-warning);
171
171
  --badge-warning-border: var(--border-warning);
172
172
  --badge-warning-text-font-family: var(--font-sans);
173
- --badge-warning-text-font-size: var(--font-size-sm);
174
- --badge-warning-text-font-weight: var(--font-weight-light);
173
+ --badge-warning-text-font-size: var(--font-size-md);
174
+ --badge-warning-text-font-weight: var(--font-weight-normal);
175
175
  --badge-warning-text-line-height: var(--line-height-xs);
176
176
  --badge-warning-border-width: var(--border-width-1);
177
177
  --badge-warning-radius: var(--radius-full);
@@ -185,8 +185,8 @@
185
185
  --badge-danger-text: var(--text-danger);
186
186
  --badge-danger-border: var(--border-danger);
187
187
  --badge-danger-text-font-family: var(--font-sans);
188
- --badge-danger-text-font-size: var(--font-size-sm);
189
- --badge-danger-text-font-weight: var(--font-weight-light);
188
+ --badge-danger-text-font-size: var(--font-size-md);
189
+ --badge-danger-text-font-weight: var(--font-weight-normal);
190
190
  --badge-danger-text-line-height: var(--line-height-xs);
191
191
  --badge-danger-border-width: var(--border-width-1);
192
192
  --badge-danger-radius: var(--radius-full);
@@ -200,8 +200,8 @@
200
200
  --badge-info-text: var(--text-info);
201
201
  --badge-info-border: var(--border-info);
202
202
  --badge-info-text-font-family: var(--font-sans);
203
- --badge-info-text-font-size: var(--font-size-sm);
204
- --badge-info-text-font-weight: var(--font-weight-light);
203
+ --badge-info-text-font-size: var(--font-size-md);
204
+ --badge-info-text-font-weight: var(--font-weight-normal);
205
205
  --badge-info-text-line-height: var(--line-height-xs);
206
206
  --badge-info-border-width: var(--border-width-1);
207
207
  --badge-info-radius: var(--radius-full);
package/src/system/components/CollapsibleSection.svelte CHANGED
@@ -85,7 +85,7 @@
85
85
  --collapsiblesection-chromeless-default-label-font-size: var(--font-size-md);
86
86
  --collapsiblesection-chromeless-default-label-font-weight: var(--font-weight-normal);
87
87
  --collapsiblesection-chromeless-default-label-line-height: var(--line-height-md);
88
- --collapsiblesection-chromeless-default-icon: var(--text-muted);
88
+ --collapsiblesection-chromeless-default-icon: var(--text-primary);
89
89
  --collapsiblesection-chromeless-default-icon-size: var(--icon-size-xs);
90
90
  /* Chromeless — hover */
91
91
  --collapsiblesection-chromeless-hover-surface: var(--color-transparent);
@@ -102,7 +102,7 @@
102
102
 
103
103
  /* Divider — default */
104
104
  --collapsiblesection-divider-default-surface: var(--color-transparent);
105
- --collapsiblesection-divider-default-border: var(--border-neutral-faint);
105
+ --collapsiblesection-divider-default-border: var(--border-brand);
106
106
  --collapsiblesection-divider-default-border-width: var(--border-width-1);
107
107
  --collapsiblesection-divider-default-padding: var(--space-4);
108
108
  --collapsiblesection-divider-default-label: var(--text-primary);
@@ -110,7 +110,7 @@
110
110
  --collapsiblesection-divider-default-label-font-size: var(--font-size-md);
111
111
  --collapsiblesection-divider-default-label-font-weight: var(--font-weight-normal);
112
112
  --collapsiblesection-divider-default-label-line-height: var(--line-height-md);
113
- --collapsiblesection-divider-default-icon: var(--text-muted);
113
+ --collapsiblesection-divider-default-icon: var(--text-primary);
114
114
  --collapsiblesection-divider-default-icon-size: var(--icon-size-xs);
115
115
  /* Divider — hover */
116
116
  --collapsiblesection-divider-hover-surface: var(--color-transparent);
@@ -128,31 +128,31 @@
128
128
  --collapsiblesection-divider-expanded-padding: var(--space-4);
129
129
 
130
130
  /* Container — frame (always-on outer chrome) */
131
- --collapsiblesection-container-frame-border: var(--color-transparent);
132
- --collapsiblesection-container-frame-border-width: var(--border-width-3);
133
- --collapsiblesection-container-frame-radius: var(--radius-none);
131
+ --collapsiblesection-container-frame-border: var(--border-neutral);
132
+ --collapsiblesection-container-frame-border-width: var(--border-width-1);
133
+ --collapsiblesection-container-frame-radius: var(--radius-md);
134
134
  /* Container — default header strip */
135
- --collapsiblesection-container-default-surface: var(--surface-canvas);
135
+ --collapsiblesection-container-default-surface: var(--surface-neutral);
136
136
  --collapsiblesection-container-default-padding: var(--space-4);
137
137
  --collapsiblesection-container-default-label: var(--text-primary);
138
138
  --collapsiblesection-container-default-label-font-family: var(--font-sans);
139
139
  --collapsiblesection-container-default-label-font-size: var(--font-size-md);
140
140
  --collapsiblesection-container-default-label-font-weight: var(--font-weight-normal);
141
141
  --collapsiblesection-container-default-label-line-height: var(--line-height-md);
142
- --collapsiblesection-container-default-icon: var(--text-muted);
142
+ --collapsiblesection-container-default-icon: var(--text-primary);
143
143
  --collapsiblesection-container-default-icon-size: var(--icon-size-xs);
144
144
  /* Container — hover header strip */
145
- --collapsiblesection-container-hover-surface: var(--surface-canvas);
145
+ --collapsiblesection-container-hover-surface: var(--surface-neutral-high);
146
146
  --collapsiblesection-container-hover-padding: var(--space-4);
147
147
  --collapsiblesection-container-hover-label: var(--text-primary);
148
148
  --collapsiblesection-container-hover-label-font-family: var(--font-sans);
149
149
  --collapsiblesection-container-hover-label-font-size: var(--font-size-md);
150
150
  --collapsiblesection-container-hover-label-font-weight: var(--font-weight-normal);
151
151
  --collapsiblesection-container-hover-label-line-height: var(--line-height-md);
152
- --collapsiblesection-container-hover-icon: var(--text-muted);
152
+ --collapsiblesection-container-hover-icon: var(--text-primary);
153
153
  --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
154
154
  /* Container — expanded content area */
155
- --collapsiblesection-container-expanded-surface: var(--surface-canvas-low);
155
+ --collapsiblesection-container-expanded-surface: var(--surface-neutral-higher);
156
156
  --collapsiblesection-container-expanded-padding: var(--space-4);
157
157
  }
158
158
 
package/src/system/components/CornerBadge.svelte CHANGED
@@ -52,7 +52,7 @@
52
52
  --corner-badge-padding: var(--space-6);
53
53
  --corner-badge-text-font-family: var(--font-sans);
54
54
  --corner-badge-text-font-size: var(--font-size-sm);
55
- --corner-badge-text-font-weight: var(--font-weight-light);
55
+ --corner-badge-text-font-weight: var(--font-weight-medium);
56
56
  --corner-badge-text-line-height: var(--line-height-xs);
57
57
 
58
58
  /* Per-variant color overrides. Default = inherit the same family/level the
package/src/system/components/MenuSelect.svelte CHANGED
@@ -72,8 +72,8 @@
72
72
 
73
73
  :global(:root) {
74
74
  /* Menu panel */
75
- --menuselect-menu-surface: var(--surface-neutral-lower);
76
- --menuselect-menu-border: var(--border-neutral-faint);
75
+ --menuselect-menu-surface: color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent);
76
+ --menuselect-menu-border: var(--border-neutral-medium);
77
77
  --menuselect-menu-border-width: var(--border-width-1);
78
78
  --menuselect-menu-radius: var(--radius-md);
79
79
  --menuselect-menu-padding: var(--space-4);
package/src/system/components/Notification.svelte CHANGED
@@ -123,12 +123,12 @@
123
123
  --notification-info-title: var(--text-info);
124
124
  --notification-info-title-font-family: var(--font-sans);
125
125
  --notification-info-title-font-size: var(--font-size-lg);
126
- --notification-info-title-font-weight: var(--font-weight-normal);
126
+ --notification-info-title-font-weight: var(--font-weight-bold);
127
127
  --notification-info-title-line-height: var(--line-height-sm);
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
- --notification-info-text-font-weight: var(--font-weight-extralight);
131
+ --notification-info-text-font-weight: var(--font-weight-normal);
132
132
  --notification-info-text-line-height: var(--line-height-md);
133
133
 
134
134
  /* Success */
@@ -143,12 +143,12 @@
143
143
  --notification-success-title: var(--text-success);
144
144
  --notification-success-title-font-family: var(--font-sans);
145
145
  --notification-success-title-font-size: var(--font-size-lg);
146
- --notification-success-title-font-weight: var(--font-weight-normal);
146
+ --notification-success-title-font-weight: var(--font-weight-bold);
147
147
  --notification-success-title-line-height: var(--line-height-sm);
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
- --notification-success-text-font-weight: var(--font-weight-extralight);
151
+ --notification-success-text-font-weight: var(--font-weight-normal);
152
152
  --notification-success-text-line-height: var(--line-height-md);
153
153
 
154
154
  /* Warning */
@@ -163,12 +163,12 @@
163
163
  --notification-warning-title: var(--text-warning);
164
164
  --notification-warning-title-font-family: var(--font-sans);
165
165
  --notification-warning-title-font-size: var(--font-size-lg);
166
- --notification-warning-title-font-weight: var(--font-weight-normal);
166
+ --notification-warning-title-font-weight: var(--font-weight-bold);
167
167
  --notification-warning-title-line-height: var(--line-height-sm);
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
- --notification-warning-text-font-weight: var(--font-weight-extralight);
171
+ --notification-warning-text-font-weight: var(--font-weight-normal);
172
172
  --notification-warning-text-line-height: var(--line-height-md);
173
173
 
174
174
  /* Danger */
@@ -183,12 +183,12 @@
183
183
  --notification-danger-title: var(--text-danger);
184
184
  --notification-danger-title-font-family: var(--font-sans);
185
185
  --notification-danger-title-font-size: var(--font-size-lg);
186
- --notification-danger-title-font-weight: var(--font-weight-normal);
186
+ --notification-danger-title-font-weight: var(--font-weight-bold);
187
187
  --notification-danger-title-line-height: var(--line-height-sm);
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
- --notification-danger-text-font-weight: var(--font-weight-extralight);
191
+ --notification-danger-text-font-weight: var(--font-weight-normal);
192
192
  --notification-danger-text-line-height: var(--line-height-md);
193
193
  }
194
194
 
package/src/system/components/ProgressBar.svelte CHANGED
@@ -47,22 +47,22 @@
47
47
 
48
48
  <style>
49
49
  :global(:root) {
50
- --progressbar-track-surface: var(--surface-neutral-low);
51
- --progressbar-track-border: var(--border-neutral-faint);
50
+ --progressbar-track-surface: var(--surface-neutral-lowest);
51
+ --progressbar-track-border: var(--border-neutral-subtle);
52
52
  --progressbar-track-border-width: var(--border-width-1);
53
- --progressbar-track-height: var(--space-8);
53
+ --progressbar-track-height: var(--space-16);
54
54
  --progressbar-radius: var(--radius-full);
55
- --progressbar-fill: var(--gradient-1);
55
+ --progressbar-fill: var(--surface-special-highest);
56
56
  --progressbar-label-gap: var(--space-6);
57
57
  --progressbar-label: var(--text-secondary);
58
58
  --progressbar-label-font-family: var(--font-sans);
59
- --progressbar-label-font-size: var(--font-size-sm);
60
- --progressbar-label-font-weight: var(--font-weight-light);
59
+ --progressbar-label-font-size: var(--font-size-md);
60
+ --progressbar-label-font-weight: var(--font-weight-normal);
61
61
  --progressbar-label-line-height: var(--line-height-md);
62
62
  --progressbar-value: var(--text-tertiary);
63
63
  --progressbar-value-font-family: var(--font-mono);
64
- --progressbar-value-font-size: var(--font-size-xs);
65
- --progressbar-value-font-weight: var(--font-weight-light);
64
+ --progressbar-value-font-size: var(--font-size-md);
65
+ --progressbar-value-font-weight: var(--font-weight-normal);
66
66
  --progressbar-value-line-height: var(--line-height-md);
67
67
  }
68
68
 
package/src/system/components/SectionDivider.svelte CHANGED
@@ -200,113 +200,113 @@
200
200
  :global(:root) {
201
201
  /* Large */
202
202
  --sectiondivider-lg-title-font-family: var(--font-display);
203
- --sectiondivider-lg-title-font-weight: var(--font-weight-normal);
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-xs);
205
+ --sectiondivider-lg-title-line-height: var(--line-height-md);
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
- --sectiondivider-lg-description-font-weight: var(--font-weight-normal);
209
+ --sectiondivider-lg-description-font-weight: var(--font-weight-medium);
210
210
  --sectiondivider-lg-description-font-size: var(--font-size-lg);
211
211
  --sectiondivider-lg-description-line-height: var(--line-height-md);
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);
215
215
  --sectiondivider-lg-eyebrow-letter-spacing: var(--letter-spacing-wide);
216
- --sectiondivider-lg-padding: var(--space-16);
217
- --sectiondivider-lg-title-padding: var(--space-0);
216
+ --sectiondivider-lg-padding: var(--space-4);
217
+ --sectiondivider-lg-title-padding: var(--space-2);
218
218
  --sectiondivider-lg-description-padding: var(--space-0);
219
219
  --sectiondivider-lg-eyebrow-padding: var(--space-0);
220
220
  --sectiondivider-lg-radius: var(--radius-lg);
221
- --sectiondivider-lg-border-width: var(--border-width-0);
221
+ --sectiondivider-lg-border-width: var(--border-width-1);
222
222
  --sectiondivider-lg-shadow: var(--shadow-none);
223
223
  --sectiondivider-lg-hairline-thickness: var(--border-width-1);
224
- --sectiondivider-lg-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
224
+ --sectiondivider-lg-background: var(--color-transparent);
225
225
  --sectiondivider-lg-title: var(--text-primary);
226
- --sectiondivider-lg-description: var(--text-secondary);
227
- --sectiondivider-lg-eyebrow: var(--text-tertiary);
226
+ --sectiondivider-lg-description: var(--text-alternate);
227
+ --sectiondivider-lg-eyebrow: var(--text-brand);
228
228
  --sectiondivider-lg-border: var(--color-transparent);
229
229
  --sectiondivider-lg-title-outline-color: var(--surface-canvas-lowest);
230
- --sectiondivider-lg-hairline-color: var(--border-canvas-medium);
230
+ --sectiondivider-lg-hairline-color: var(--border-brand-medium);
231
231
 
232
232
  /* Medium */
233
233
  --sectiondivider-md-title-font-family: var(--font-display);
234
- --sectiondivider-md-title-font-weight: var(--font-weight-normal);
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-xs);
236
+ --sectiondivider-md-title-line-height: var(--line-height-md);
237
237
  --sectiondivider-md-title-letter-spacing: var(--letter-spacing-normal);
238
- --sectiondivider-md-title-outline-width: var(--border-width-3);
238
+ --sectiondivider-md-title-outline-width: var(--border-width-4);
239
239
  --sectiondivider-md-description-font-family: var(--font-sans);
240
- --sectiondivider-md-description-font-weight: var(--font-weight-normal);
241
- --sectiondivider-md-description-font-size: var(--font-size-md);
240
+ --sectiondivider-md-description-font-weight: var(--font-weight-medium);
241
+ --sectiondivider-md-description-font-size: var(--font-size-lg);
242
242
  --sectiondivider-md-description-line-height: var(--line-height-md);
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);
246
246
  --sectiondivider-md-eyebrow-letter-spacing: var(--letter-spacing-wide);
247
- --sectiondivider-md-padding: var(--space-12);
248
- --sectiondivider-md-title-padding: var(--space-0);
247
+ --sectiondivider-md-padding: var(--space-4);
248
+ --sectiondivider-md-title-padding: var(--space-2);
249
249
  --sectiondivider-md-description-padding: var(--space-0);
250
250
  --sectiondivider-md-eyebrow-padding: var(--space-0);
251
- --sectiondivider-md-radius: var(--radius-md);
252
- --sectiondivider-md-border-width: var(--border-width-0);
251
+ --sectiondivider-md-radius: var(--radius-lg);
252
+ --sectiondivider-md-border-width: var(--border-width-1);
253
253
  --sectiondivider-md-shadow: var(--shadow-none);
254
254
  --sectiondivider-md-hairline-thickness: var(--border-width-1);
255
- --sectiondivider-md-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
255
+ --sectiondivider-md-background: var(--color-transparent);
256
256
  --sectiondivider-md-title: var(--text-primary);
257
257
  --sectiondivider-md-description: var(--text-secondary);
258
258
  --sectiondivider-md-eyebrow: var(--text-tertiary);
259
259
  --sectiondivider-md-border: var(--color-transparent);
260
- --sectiondivider-md-title-outline-color: var(--surface-canvas-lowest);
261
- --sectiondivider-md-hairline-color: var(--border-canvas-medium);
260
+ --sectiondivider-md-title-outline-color: var(--surface-accent-lowest);
261
+ --sectiondivider-md-hairline-color: var(--border-brand-medium);
262
262
 
263
263
  /* Small */
264
264
  --sectiondivider-sm-title-font-family: var(--font-display);
265
- --sectiondivider-sm-title-font-weight: var(--font-weight-normal);
266
- --sectiondivider-sm-title-font-size: var(--font-size-3xl);
267
- --sectiondivider-sm-title-line-height: var(--line-height-xs);
265
+ --sectiondivider-sm-title-font-weight: var(--font-weight-bold);
266
+ --sectiondivider-sm-title-font-size: var(--font-size-2xl);
267
+ --sectiondivider-sm-title-line-height: var(--line-height-md);
268
268
  --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
269
- --sectiondivider-sm-title-outline-width: var(--border-width-2);
269
+ --sectiondivider-sm-title-outline-width: var(--border-width-4);
270
270
  --sectiondivider-sm-description-font-family: var(--font-sans);
271
- --sectiondivider-sm-description-font-weight: var(--font-weight-normal);
272
- --sectiondivider-sm-description-font-size: var(--font-size-sm);
271
+ --sectiondivider-sm-description-font-weight: var(--font-weight-medium);
272
+ --sectiondivider-sm-description-font-size: var(--font-size-5xl);
273
273
  --sectiondivider-sm-description-line-height: var(--line-height-md);
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);
277
277
  --sectiondivider-sm-eyebrow-letter-spacing: var(--letter-spacing-wide);
278
- --sectiondivider-sm-padding: var(--space-8);
279
- --sectiondivider-sm-title-padding: var(--space-0);
278
+ --sectiondivider-sm-padding: var(--space-4);
279
+ --sectiondivider-sm-title-padding: var(--space-2);
280
280
  --sectiondivider-sm-description-padding: var(--space-0);
281
281
  --sectiondivider-sm-eyebrow-padding: var(--space-0);
282
- --sectiondivider-sm-radius: var(--radius-sm);
283
- --sectiondivider-sm-border-width: var(--border-width-0);
282
+ --sectiondivider-sm-radius: var(--radius-lg);
283
+ --sectiondivider-sm-border-width: var(--border-width-1);
284
284
  --sectiondivider-sm-shadow: var(--shadow-none);
285
285
  --sectiondivider-sm-hairline-thickness: var(--border-width-1);
286
- --sectiondivider-sm-background: linear-gradient(135deg, var(--surface-canvas-highest) 0%, var(--surface-canvas-higher) 50%, var(--surface-canvas) 100%);
286
+ --sectiondivider-sm-background: var(--color-transparent);
287
287
  --sectiondivider-sm-title: var(--text-primary);
288
288
  --sectiondivider-sm-description: var(--text-secondary);
289
289
  --sectiondivider-sm-eyebrow: var(--text-tertiary);
290
290
  --sectiondivider-sm-border: var(--color-transparent);
291
291
  --sectiondivider-sm-title-outline-color: var(--surface-canvas-lowest);
292
- --sectiondivider-sm-hairline-color: var(--border-canvas-medium);
292
+ --sectiondivider-sm-hairline-color: var(--border-brand-medium);
293
293
 
294
294
  /* Intrinsic defaults. These keys cascade to `:root` via the editor's
295
295
  alias bucket; un-edited variants fall back to these. The defaults
296
296
  match the legacy "config bucket" semantics: center alignment, hidden
297
297
  eyebrow, visible description, hidden hairline, normal-case eyebrow. */
298
- --sectiondivider-lg-align: center;
299
- --sectiondivider-md-align: center;
300
- --sectiondivider-sm-align: center;
301
- --sectiondivider-lg-eyebrow-display: none;
298
+ --sectiondivider-lg-align: start;
299
+ --sectiondivider-md-align: start;
300
+ --sectiondivider-sm-align: start;
301
+ --sectiondivider-lg-eyebrow-display: block;
302
302
  --sectiondivider-md-eyebrow-display: none;
303
303
  --sectiondivider-sm-eyebrow-display: none;
304
304
  --sectiondivider-lg-description-display: flex;
305
- --sectiondivider-md-description-display: flex;
306
- --sectiondivider-sm-description-display: flex;
307
- --sectiondivider-lg-hairline: none;
308
- --sectiondivider-md-hairline: none;
309
- --sectiondivider-sm-hairline: none;
305
+ --sectiondivider-md-description-display: none;
306
+ --sectiondivider-sm-description-display: none;
307
+ --sectiondivider-lg-hairline: below-description;
308
+ --sectiondivider-md-hairline: below-label;
309
+ --sectiondivider-sm-hairline: below-label;
310
310
  --sectiondivider-lg-eyebrow-text-transform: none;
311
311
  --sectiondivider-md-eyebrow-text-transform: none;
312
312
  --sectiondivider-sm-eyebrow-text-transform: none;
package/src/system/components/SegmentedControl.svelte CHANGED
@@ -65,7 +65,7 @@
65
65
 
66
66
  :global(:root) {
67
67
  /* Bar (outer wrapper) */
68
- --segmentedcontrol-bar-surface: var(--surface-neutral-high);
68
+ --segmentedcontrol-bar-surface: color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent);
69
69
  --segmentedcontrol-bar-border: var(--border-neutral);
70
70
  --segmentedcontrol-bar-border-width: var(--border-width-1);
71
71
  --segmentedcontrol-bar-radius: var(--radius-lg);
@@ -92,34 +92,34 @@
92
92
  --segmentedcontrol-option-icon-size: var(--icon-size-md);
93
93
 
94
94
  /* Option — hover */
95
- --segmentedcontrol-option-hover-surface: var(--surface-neutral-higher);
95
+ --segmentedcontrol-option-hover-surface: var(--surface-neutral);
96
96
  --segmentedcontrol-option-hover-text: var(--text-primary);
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
100
  --segmentedcontrol-option-hover-text-line-height: var(--line-height-md);
101
- --segmentedcontrol-option-hover-icon: var(--text-secondary);
101
+ --segmentedcontrol-option-hover-icon: var(--text-primary);
102
102
 
103
103
  /* Selected (inner pill) — looks the same hovered or not */
104
- --segmentedcontrol-selected-surface: var(--surface-success-high);
104
+ --segmentedcontrol-selected-surface: var(--surface-brand);
105
105
  --segmentedcontrol-selected-text: var(--text-primary);
106
106
  --segmentedcontrol-selected-text-font-family: var(--font-sans);
107
107
  --segmentedcontrol-selected-text-font-size: var(--font-size-md);
108
- --segmentedcontrol-selected-text-font-weight: var(--font-weight-semibold);
108
+ --segmentedcontrol-selected-text-font-weight: var(--font-weight-normal);
109
109
  --segmentedcontrol-selected-text-line-height: var(--line-height-md);
110
110
  --segmentedcontrol-selected-icon: var(--text-secondary);
111
- --segmentedcontrol-selected-border: var(--border-success);
111
+ --segmentedcontrol-selected-border: var(--border-brand);
112
112
  --segmentedcontrol-selected-border-width: var(--border-width-1);
113
113
  --segmentedcontrol-selected-radius: var(--radius-md);
114
114
 
115
115
  /* Disabled (whole component state — overrides both option and selected styling) */
116
- --segmentedcontrol-disabled-surface: var(--surface-neutral-high);
117
- --segmentedcontrol-disabled-text: var(--text-tertiary);
116
+ --segmentedcontrol-disabled-surface: var(--color-transparent);
117
+ --segmentedcontrol-disabled-text: var(--text-secondary);
118
118
  --segmentedcontrol-disabled-text-font-family: var(--font-sans);
119
119
  --segmentedcontrol-disabled-text-font-size: var(--font-size-md);
120
- --segmentedcontrol-disabled-text-font-weight: var(--font-weight-light);
120
+ --segmentedcontrol-disabled-text-font-weight: var(--font-weight-normal);
121
121
  --segmentedcontrol-disabled-text-line-height: var(--line-height-md);
122
- --segmentedcontrol-disabled-icon: var(--text-tertiary);
122
+ --segmentedcontrol-disabled-icon: var(--text-secondary);
123
123
 
124
124
  /* Small size — overrides for geometry + typography. Per-state colors and
125
125
  font-weight stay shared with default; only the size-driven properties
package/template/_gitignore CHANGED
@@ -3,6 +3,7 @@ dist
3
3
  dist-ssr
4
4
  *.local
5
5
  *.log
6
+ .npmrc
6
7
 
7
8
  # Editor-written backups stay local to each machine; the live JSON/CSS commit.
8
9
  src/live-tokens/data/themes/_backups/