@motion-proto/live-tokens 0.21.1 → 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 (11) hide show
  1. package/bin/create.mjs +10 -0
  2. package/package.json +5 -2
  3. package/src/system/components/Badge.svelte +20 -20
  4. package/src/system/components/CollapsibleSection.svelte +11 -11
  5. package/src/system/components/CornerBadge.svelte +1 -1
  6. package/src/system/components/MenuSelect.svelte +2 -2
  7. package/src/system/components/Notification.svelte +8 -8
  8. package/src/system/components/ProgressBar.svelte +8 -8
  9. package/src/system/components/SectionDivider.svelte +43 -43
  10. package/src/system/components/SegmentedControl.svelte +10 -10
  11. package/template/_gitignore +1 -0
package/bin/create.mjs CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  writeFileSync,
12
12
  } from 'node:fs';
13
13
  import { dirname, join, resolve } from 'node:path';
14
+ import { fileURLToPath } from 'node:url';
14
15
 
15
16
  // npm strips dotfiles from published tarballs, so the template ships them
16
17
  // renamed; `create` restores the leading dot on scaffold.
@@ -87,3 +88,12 @@ export function formatCreateResult({ appName, targetDir }, targetArg) {
87
88
  `Then open http://localhost:5173 and edit src/pages/Home.svelte.`,
88
89
  ].join('\n');
89
90
  }
91
+
92
+ // Entry point for the `@motion-proto/create-live-tokens` initializer: it
93
+ // derives pkgRoot from this module's own location (i.e. wherever this package
94
+ // is installed), so the template + seed CSS always come from this exact
95
+ // version. The initializer stays a thin shim with no template of its own.
96
+ export function createApp({ targetDir, force = false } = {}) {
97
+ const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
98
+ return runCreate({ targetDir, pkgRoot, force });
99
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motion-proto/live-tokens",
3
- "version": "0.21.1",
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": [
@@ -42,6 +42,7 @@
42
42
  "types": "./src/editor/index.ts",
43
43
  "default": "./src/editor/index.ts"
44
44
  },
45
+ "./create": "./bin/create.mjs",
45
46
  "./component-editor": {
46
47
  "svelte": "./src/editor/component-editor/index.ts",
47
48
  "types": "./src/editor/component-editor/index.ts",
@@ -89,9 +90,11 @@
89
90
  "deploy:local": "bash scripts/deploy-local.sh",
90
91
  "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
91
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",
92
95
  "check:smoke-install": "bash scripts/smoke-install.sh",
93
96
  "check:smoke-create": "bash scripts/smoke-create.sh",
94
- "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"
95
98
  },
96
99
  "peerDependencies": {
97
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/