@weasel-js/labkit 0.7.2 → 1.0.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 (75) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +11 -3
  3. package/dist/_dts/{DrawCommand-CEvS5AdV.d.ts → DrawCommand-BwRCZYuo.d.ts} +106 -52
  4. package/dist/_dts/{useExperimentState-eSvpwV_P.d.ts → useExperimentState-CJn2hHzd.d.ts} +6 -4
  5. package/dist/{chunk-SSMHPMDV.js → chunk-53XSBIUK.js} +12 -11
  6. package/dist/chunk-53XSBIUK.js.map +1 -0
  7. package/dist/{chunk-BG6NLMOL.js → chunk-FP5LYDVX.js} +1229 -1227
  8. package/dist/chunk-FP5LYDVX.js.map +1 -0
  9. package/dist/{chunk-ERZQAU4N.js → chunk-HNXVLKBG.js} +3 -3
  10. package/dist/{chunk-ERZQAU4N.js.map → chunk-HNXVLKBG.js.map} +1 -1
  11. package/dist/{chunk-5XDFILHZ.js → chunk-XVBXYKFJ.js} +1675 -670
  12. package/dist/chunk-XVBXYKFJ.js.map +1 -0
  13. package/dist/fonts/inter-latin.woff2 +0 -0
  14. package/dist/fonts/oswald-latin-variable.woff2 +0 -0
  15. package/dist/index.d.ts +37 -13
  16. package/dist/index.js +776 -27
  17. package/dist/index.js.map +1 -1
  18. package/dist/passthrough/weasel-canvas.d.ts +1 -1
  19. package/dist/passthrough/weasel-canvas.js +1 -1
  20. package/dist/passthrough/weasel-ui.d.ts +332 -189
  21. package/dist/passthrough/weasel-ui.js +2 -2
  22. package/dist/state/index.d.ts +2 -2
  23. package/dist/state/index.js +2 -2
  24. package/dist/styles.css +229 -288
  25. package/dist/ui/layers/index.js +3 -3
  26. package/package.json +5 -6
  27. package/src/canvas/CanvasStack.less +1 -1
  28. package/src/controls/ControlPanel.less +12 -12
  29. package/src/dragdrop/DragGhost.less +2 -2
  30. package/src/dragdrop/Palette.less +6 -6
  31. package/src/index.ts +2 -0
  32. package/src/lab/Lab.test.tsx +20 -15
  33. package/src/lab/Lab.tsx +33 -32
  34. package/src/lab/LabContext.ts +3 -3
  35. package/src/lab/LabShell.less +14 -14
  36. package/src/lab/LabShell.test.tsx +7 -20
  37. package/src/lab/LabShell.tsx +22 -13
  38. package/src/lab/WorkspaceGrid.less +1 -1
  39. package/src/lab/WorkspaceGrid.stories.tsx +4 -4
  40. package/src/lab/index.ts +1 -1
  41. package/src/lab/useSystemMode.ts +30 -0
  42. package/src/layers/LayerList.less +9 -9
  43. package/src/primitives/FpsMeter.less +5 -5
  44. package/src/primitives/ScaleIndicator.less +7 -7
  45. package/src/primitives/Sidebar.less +12 -12
  46. package/src/primitives/StatusBar.less +10 -10
  47. package/src/primitives/Toolbar.less +16 -16
  48. package/src/state/store.test.ts +17 -9
  49. package/src/state/store.ts +13 -10
  50. package/src/state/types.ts +5 -2
  51. package/src/theme/Interstellar.stories.less +20 -20
  52. package/src/theme/Interstellar.stories.tsx +44 -59
  53. package/src/theme/base.less +29 -28
  54. package/src/theme/interstellar.test.ts +30 -0
  55. package/src/theme/interstellar.tokens.json +57 -0
  56. package/src/theme/interstellar.ts +9 -0
  57. package/src/ui/layers/LayerStack.less +21 -21
  58. package/src/ui/properties/CurveField.less +5 -5
  59. package/src/ui/properties/EffectCard.tsx +2 -2
  60. package/src/ui/properties/PropertyGroup.less +6 -6
  61. package/src/ui/properties/PropertyPanel.less +70 -70
  62. package/src/ui/properties/SpeechBalloonPanels.stories.tsx +1 -1
  63. package/src/ui/properties/storyLayouts.tsx +1 -1
  64. package/src/workspace/Workspace.less +14 -14
  65. package/src/workspace/Workspace.stories.tsx +2 -2
  66. package/src/workspace/Workspace.test.tsx +2 -2
  67. package/dist/chunk-5XDFILHZ.js.map +0 -1
  68. package/dist/chunk-BG6NLMOL.js.map +0 -1
  69. package/dist/chunk-SSMHPMDV.js.map +0 -1
  70. package/dist/theme-interstellar.css +0 -25
  71. package/dist/theme-light.css +0 -13
  72. package/src/fonts/oswald-latin-variable.woff2 +0 -0
  73. package/src/theme/interstellar.less +0 -34
  74. package/src/theme/light.less +0 -14
  75. package/src/theme/tokens.less +0 -85
package/dist/styles.css CHANGED
@@ -1,76 +1,17 @@
1
- :root {
2
- --lk-bg: #0a0a14;
3
- --lk-bg-elevated: rgba(20, 20, 36, 0.55);
4
- --lk-bg-canvas: #02020a;
5
- --lk-border: rgba(255, 255, 255, 0.14);
6
- --lk-divider: rgba(255, 255, 255, 0.08);
7
- --lk-glass-blur: 12px;
8
- --lk-text: #e8e8f0;
9
- --lk-text-muted: #a8a8c0;
10
- --lk-text-disabled: #5a5a78;
11
- --lk-accent: #b08adb;
12
- --lk-accent-hover: #c6a3ee;
13
- --lk-focus-ring: rgba(176, 138, 219, 0.45);
14
- --lk-swatch-green: #2fdd18;
15
- --lk-swatch-pink: #ff5885;
16
- --lk-swatch-cyan: #00dfff;
17
- --lk-swatch-gold: #dcb700;
18
- --lk-swatch-amber: #ff8c00;
19
- --lk-swatch-violet: #a497ff;
20
- --lk-swatch-mint: #00e7af;
21
- --lk-swatch-sky: #00b8ff;
22
- --lk-swatch-orange: #ff6b00;
23
- --lk-swatch-magenta: #ff6eff;
24
- --lk-space-nebula: radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%);
25
- --lk-radius: 6px;
26
- --lk-radius-sm: 3px;
27
- --lk-radius-lg: 14px;
28
- --lk-control-height: 28px;
29
- --lk-spacing-xs: 4px;
30
- --lk-spacing-sm: 8px;
31
- --lk-spacing-md: 12px;
32
- --lk-spacing-lg: 16px;
33
- --lk-font: 'Oswald', system-ui, -apple-system, sans-serif;
34
- --lk-font-mono: ui-monospace, SFMono-Regular, monospace;
35
- --lk-font-display: 'Oswald', system-ui, sans-serif;
36
- --lk-font-size: 13px;
37
- --lk-font-size-sm: 11px;
38
- --lk-font-weight-light: 300;
39
- --lk-font-weight-medium: 500;
40
- --lk-font-weight-bold: 700;
41
- --lk-z-toolbar: 10;
42
- --lk-z-overlay: 20;
43
- --lk-z-modal: 30;
44
- }
45
- @media (prefers-color-scheme: light) {
46
- :root {
47
- --lk-bg: #fafaf7;
48
- --lk-bg-elevated: #ffffff;
49
- --lk-bg-canvas: #f0ebe2;
50
- --lk-border: #c9bba5;
51
- --lk-divider: rgba(0, 0, 0, 0.08);
52
- --lk-text: #2a2018;
53
- --lk-text-muted: #6b5c4a;
54
- --lk-text-disabled: #a89b85;
55
- --lk-accent: #a86f3c;
56
- --lk-accent-hover: #c2854f;
57
- --lk-focus-ring: rgba(168, 111, 60, 0.35);
58
- }
59
- }
60
1
  @font-face {
61
2
  font-family: 'Oswald';
62
3
  font-style: normal;
63
- font-weight: 100 900;
4
+ font-weight: 200 700;
64
5
  font-display: swap;
65
6
  src: url('./fonts/oswald-latin-variable.woff2') format('woff2');
66
7
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
67
8
  }
68
9
  .lk-root {
69
- font-family: var(--lk-font);
70
- font-size: var(--lk-font-size);
71
- font-weight: var(--lk-font-weight-light, 300);
72
- color: var(--lk-text);
73
- background: var(--lk-bg);
10
+ font-family: var(--wzl-font-ui);
11
+ font-size: var(--wzl-font-size);
12
+ font-weight: var(--wzl-font-weight-light);
13
+ color: var(--wzl-fg);
14
+ background: var(--wzl-surface);
74
15
  line-height: 1.4;
75
16
  }
76
17
  .lk-root *,
@@ -81,34 +22,35 @@
81
22
  .lk-root button {
82
23
  font: inherit;
83
24
  color: inherit;
84
- background: var(--lk-bg-elevated);
85
- border: 1px solid var(--lk-border);
86
- border-radius: var(--lk-radius);
87
- height: var(--lk-control-height);
88
- padding: 0 var(--lk-spacing-md);
25
+ background: var(--wzl-surface-raised);
26
+ border: 1px solid var(--wzl-border);
27
+ border-radius: var(--wzl-radius-md);
28
+ height: var(--wzl-control-h);
29
+ padding: 0 var(--wzl-space-md);
89
30
  cursor: pointer;
90
- backdrop-filter: blur(var(--lk-glass-blur, 0));
91
- -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
31
+ backdrop-filter: blur(var(--wzl-glass-blur));
32
+ -webkit-backdrop-filter: blur(var(--wzl-glass-blur));
92
33
  }
93
34
  .lk-root button:hover {
94
- border-color: var(--lk-accent);
95
- color: var(--lk-accent);
35
+ border-color: var(--wzl-accent);
36
+ color: var(--wzl-accent);
96
37
  }
97
38
  .lk-root button:focus-visible {
98
- outline: 2px solid var(--lk-focus-ring);
39
+ outline: 2px solid var(--wzl-focus-ring);
99
40
  outline-offset: 1px;
100
41
  }
101
42
  .lk-root button:disabled {
102
- color: var(--lk-text-disabled);
43
+ color: var(--wzl-fg-subtle);
103
44
  cursor: not-allowed;
104
45
  }
105
46
  .lk-root input[type="range"] {
106
- accent-color: var(--lk-accent);
47
+ accent-color: var(--wzl-accent);
107
48
  }
108
49
  .lk-lab {
109
50
  position: relative;
110
51
  isolation: isolate;
111
- background: var(--lk-space-nebula, var(--lk-bg));
52
+ background-color: var(--wzl-surface);
53
+ background-image: var(--wzl-backdrop);
112
54
  background-attachment: fixed;
113
55
  }
114
56
  .lk-lab::before {
@@ -120,18 +62,17 @@
120
62
  background-image: radial-gradient(1.2px 1.2px at 4% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 9% 64%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 14% 36%, #fff, transparent 60%), radial-gradient(1px 1px at 19% 82%, #cce, transparent 60%), radial-gradient(0.8px 0.8px at 23% 28%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 28% 55%, #fff, transparent 60%), radial-gradient(1px 1px at 33% 12%, #ffe, transparent 60%), radial-gradient(1.2px 1.2px at 37% 70%, #fff, transparent 60%), radial-gradient(0.7px 0.7px at 42% 40%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 47% 88%, #fff, transparent 60%), radial-gradient(1px 1px at 52% 22%, #cef, transparent 60%), radial-gradient(1.3px 1.3px at 57% 60%, #fff, transparent 60%), radial-gradient(0.9px 0.9px at 62% 35%, #fff, transparent 60%), radial-gradient(1.1px 1.1px at 66% 75%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 71% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 76% 50%, #fff, transparent 60%), radial-gradient(0.8px 0.8px at 81% 80%, #ffe, transparent 60%), radial-gradient(1.3px 1.3px at 85% 25%, #fff, transparent 60%), radial-gradient(1px 1px at 89% 62%, #cce, transparent 60%), radial-gradient(1.5px 1.5px at 93% 38%, #fff, transparent 60%), radial-gradient(0.9px 0.9px at 97% 78%, #fff, transparent 60%);
121
63
  background-repeat: no-repeat;
122
64
  }
123
- .lk-theme-light.lk-lab {
124
- background: var(--lk-bg);
65
+ .lk-lab[data-wzl-mode='light'] {
125
66
  background-attachment: scroll;
126
67
  }
127
- .lk-theme-light.lk-lab::before {
68
+ .lk-lab[data-wzl-mode='light']::before {
128
69
  display: none;
129
70
  }
130
71
  .lk-lab h1,
131
72
  .lk-lab h2,
132
73
  .lk-lab h3 {
133
- font-family: var(--lk-font-display);
134
- font-weight: var(--lk-font-weight-light, 300);
74
+ font-family: var(--wzl-font-display);
75
+ font-weight: var(--wzl-font-weight-light);
135
76
  letter-spacing: 0.01em;
136
77
  line-height: 1.2;
137
78
  }
@@ -139,7 +80,7 @@
139
80
  display: grid;
140
81
  grid-template-columns: repeat(var(--lk-grid-cols, 1), 1fr);
141
82
  grid-template-rows: repeat(var(--lk-grid-rows, 1), 1fr);
142
- gap: var(--lk-spacing-md);
83
+ gap: var(--wzl-space-md);
143
84
  width: 100%;
144
85
  height: 100%;
145
86
  }
@@ -148,86 +89,86 @@
148
89
  flex-direction: column;
149
90
  width: 100%;
150
91
  height: 100vh;
151
- background: var(--lk-bg);
92
+ background: var(--wzl-surface);
152
93
  }
153
94
  .lk-shell-header {
154
95
  display: flex;
155
96
  align-items: center;
156
- gap: var(--lk-spacing-md);
157
- padding: var(--lk-spacing-sm) var(--lk-spacing-md);
158
- background: var(--lk-bg-elevated);
159
- border-bottom: 1px solid var(--lk-border);
160
- z-index: var(--lk-z-toolbar);
97
+ gap: var(--wzl-space-md);
98
+ padding: var(--wzl-space-sm) var(--wzl-space-md);
99
+ background: var(--wzl-surface-raised);
100
+ border-bottom: 1px solid var(--wzl-border);
101
+ z-index: var(--wzl-z-toolbar);
161
102
  }
162
103
  .lk-shell-title {
163
104
  margin: 0;
164
105
  font-size: 16px;
165
106
  font-weight: 600;
166
- color: var(--lk-text);
107
+ color: var(--wzl-fg);
167
108
  }
168
109
  .lk-shell-header-actions {
169
110
  margin-left: auto;
170
111
  display: flex;
171
- gap: var(--lk-spacing-sm);
112
+ gap: var(--wzl-space-sm);
172
113
  }
173
114
  .lk-shell-body {
174
115
  flex: 1;
175
116
  min-height: 0;
176
117
  overflow: auto;
177
- padding: var(--lk-spacing-md);
118
+ padding: var(--wzl-space-md);
178
119
  }
179
120
  .lk-shell-footer {
180
- border-top: 1px solid var(--lk-border);
181
- padding: var(--lk-spacing-xs) var(--lk-spacing-md);
182
- background: var(--lk-bg-elevated);
183
- color: var(--lk-text-muted);
184
- font-size: var(--lk-font-size-sm);
121
+ border-top: 1px solid var(--wzl-border);
122
+ padding: var(--wzl-space-xs) var(--wzl-space-md);
123
+ background: var(--wzl-surface-raised);
124
+ color: var(--wzl-fg-muted);
125
+ font-size: var(--wzl-font-size-sm);
185
126
  }
186
127
  .lk-toolbar {
187
128
  display: flex;
188
129
  align-items: center;
189
- gap: var(--lk-spacing-sm);
190
- padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
191
- background: var(--lk-bg-elevated);
192
- border-bottom: 1px solid var(--lk-border);
193
- min-height: calc(var(--lk-control-height) + 2 * var(--lk-spacing-xs));
130
+ gap: var(--wzl-space-sm);
131
+ padding: var(--wzl-space-xs) var(--wzl-space-sm);
132
+ background: var(--wzl-surface-raised);
133
+ border-bottom: 1px solid var(--wzl-border);
134
+ min-height: calc(var(--wzl-control-h) + 2 * var(--wzl-space-xs));
194
135
  }
195
136
  .lk-toolbar-title {
196
137
  font-weight: 600;
197
- color: var(--lk-text);
198
- margin-right: var(--lk-spacing-sm);
138
+ color: var(--wzl-fg);
139
+ margin-right: var(--wzl-space-sm);
199
140
  }
200
141
  .lk-toolbar-spacer {
201
142
  flex: 1;
202
143
  }
203
144
  .lk-toolbar-button {
204
- height: var(--lk-control-height);
205
- padding: 0 var(--lk-spacing-sm);
206
- font-size: var(--lk-font-size);
207
- color: var(--lk-text);
145
+ height: var(--wzl-control-h);
146
+ padding: 0 var(--wzl-space-sm);
147
+ font-size: var(--wzl-font-size);
148
+ color: var(--wzl-fg);
208
149
  background: transparent;
209
150
  border: 1px solid transparent;
210
- border-radius: var(--lk-radius);
151
+ border-radius: var(--wzl-radius-md);
211
152
  cursor: pointer;
212
153
  }
213
154
  .lk-toolbar-button:hover:not(:disabled) {
214
- background: var(--lk-bg);
215
- border-color: var(--lk-border);
155
+ background: var(--wzl-surface);
156
+ border-color: var(--wzl-border);
216
157
  }
217
158
  .lk-toolbar-button:focus-visible {
218
- outline: 2px solid var(--lk-focus-ring);
159
+ outline: 2px solid var(--wzl-focus-ring);
219
160
  outline-offset: 1px;
220
161
  }
221
162
  .lk-toolbar-button:disabled {
222
- color: var(--lk-text-disabled);
163
+ color: var(--wzl-fg-subtle);
223
164
  cursor: not-allowed;
224
165
  }
225
166
  .lk-sidebar {
226
167
  display: flex;
227
168
  flex-direction: column;
228
169
  width: 280px;
229
- background: var(--lk-bg-elevated);
230
- border-left: 1px solid var(--lk-border);
170
+ background: var(--wzl-surface-raised);
171
+ border-left: 1px solid var(--wzl-border);
231
172
  transition: width 150ms ease;
232
173
  }
233
174
  .lk-sidebar--collapsed {
@@ -236,15 +177,15 @@
236
177
  .lk-sidebar-header {
237
178
  display: flex;
238
179
  align-items: center;
239
- padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
240
- border-bottom: 1px solid var(--lk-divider);
241
- min-height: var(--lk-control-height);
180
+ padding: var(--wzl-space-xs) var(--wzl-space-sm);
181
+ border-bottom: 1px solid var(--wzl-line-subtle);
182
+ min-height: var(--wzl-control-h);
242
183
  }
243
184
  .lk-sidebar-title {
244
185
  flex: 1;
245
186
  font-weight: 600;
246
- color: var(--lk-text);
247
- font-size: var(--lk-font-size);
187
+ color: var(--wzl-fg);
188
+ font-size: var(--wzl-font-size);
248
189
  }
249
190
  .lk-sidebar--collapsed .lk-sidebar-title {
250
191
  display: none;
@@ -255,18 +196,18 @@
255
196
  padding: 0;
256
197
  background: transparent;
257
198
  border: 1px solid transparent;
258
- border-radius: var(--lk-radius-sm);
259
- color: var(--lk-text-muted);
199
+ border-radius: var(--wzl-radius-sm);
200
+ color: var(--wzl-fg-muted);
260
201
  cursor: pointer;
261
202
  }
262
203
  .lk-sidebar-toggle:hover {
263
- background: var(--lk-bg);
264
- color: var(--lk-text);
204
+ background: var(--wzl-surface);
205
+ color: var(--wzl-fg);
265
206
  }
266
207
  .lk-sidebar-body {
267
208
  flex: 1;
268
209
  overflow: auto;
269
- padding: var(--lk-spacing-sm);
210
+ padding: var(--wzl-space-sm);
270
211
  }
271
212
  .lk-sidebar--collapsed .lk-sidebar-body {
272
213
  display: none;
@@ -274,20 +215,20 @@
274
215
  .lk-status-bar {
275
216
  display: flex;
276
217
  align-items: center;
277
- gap: var(--lk-spacing-md);
278
- padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
279
- background: var(--lk-bg-elevated);
280
- border-top: 1px solid var(--lk-border);
281
- font-size: var(--lk-font-size-sm);
282
- color: var(--lk-text-muted);
283
- font-family: var(--lk-font-mono);
218
+ gap: var(--wzl-space-md);
219
+ padding: var(--wzl-space-xs) var(--wzl-space-sm);
220
+ background: var(--wzl-surface-raised);
221
+ border-top: 1px solid var(--wzl-border);
222
+ font-size: var(--wzl-font-size-sm);
223
+ color: var(--wzl-fg-muted);
224
+ font-family: var(--wzl-font-mono);
284
225
  }
285
226
  .lk-status-bar-section {
286
227
  display: inline-flex;
287
228
  align-items: center;
288
- gap: var(--lk-spacing-xs);
289
- padding: 0 var(--lk-spacing-xs);
290
- border-right: 1px solid var(--lk-divider);
229
+ gap: var(--wzl-space-xs);
230
+ padding: 0 var(--wzl-space-xs);
231
+ border-right: 1px solid var(--wzl-line-subtle);
291
232
  }
292
233
  .lk-status-bar-section:last-child {
293
234
  border-right: none;
@@ -295,29 +236,29 @@
295
236
  .lk-fps-meter {
296
237
  display: inline-flex;
297
238
  align-items: center;
298
- gap: var(--lk-spacing-xs);
299
- font-family: var(--lk-font-mono);
300
- font-size: var(--lk-font-size-sm);
301
- color: var(--lk-text-muted);
239
+ gap: var(--wzl-space-xs);
240
+ font-family: var(--wzl-font-mono);
241
+ font-size: var(--wzl-font-size-sm);
242
+ color: var(--wzl-fg-muted);
302
243
  }
303
244
  .lk-fps-meter-value {
304
- color: var(--lk-text);
245
+ color: var(--wzl-fg);
305
246
  min-width: 2.5ch;
306
247
  text-align: right;
307
248
  }
308
249
  .lk-scale-indicator {
309
250
  display: inline-flex;
310
251
  align-items: center;
311
- gap: var(--lk-spacing-xs);
312
- font-family: var(--lk-font-mono);
313
- font-size: var(--lk-font-size-sm);
314
- color: var(--lk-text-muted);
252
+ gap: var(--wzl-space-xs);
253
+ font-family: var(--wzl-font-mono);
254
+ font-size: var(--wzl-font-size-sm);
255
+ color: var(--wzl-fg-muted);
315
256
  }
316
257
  .lk-scale-indicator-bar {
317
258
  height: 6px;
318
- border: 1px solid var(--lk-text-muted);
259
+ border: 1px solid var(--wzl-fg-muted);
319
260
  border-top: none;
320
- background: linear-gradient(to right, var(--lk-text-muted) 1px, transparent 1px, transparent calc(100% - 1px), var(--lk-text-muted) calc(100% - 1px));
261
+ background: linear-gradient(to right, var(--wzl-fg-muted) 1px, transparent 1px, transparent calc(100% - 1px), var(--wzl-fg-muted) calc(100% - 1px));
321
262
  }
322
263
  .lk-scale-indicator-label {
323
264
  white-space: nowrap;
@@ -329,9 +270,9 @@
329
270
  display: flex;
330
271
  flex-direction: column;
331
272
  height: 100%;
332
- background: var(--lk-bg);
333
- border: 1px solid var(--lk-border);
334
- border-radius: var(--lk-radius);
273
+ background: var(--wzl-surface);
274
+ border: 1px solid var(--wzl-border);
275
+ border-radius: var(--wzl-radius-md);
335
276
  overflow: hidden;
336
277
  }
337
278
  .lk-workspace__body {
@@ -348,57 +289,57 @@
348
289
  }
349
290
  .lk-workspace__toolbar {
350
291
  flex-shrink: 0;
351
- border-bottom: 1px solid var(--lk-divider);
292
+ border-bottom: 1px solid var(--wzl-line-subtle);
352
293
  }
353
294
  .lk-workspace__status {
354
295
  flex-shrink: 0;
355
- border-top: 1px solid var(--lk-divider);
296
+ border-top: 1px solid var(--wzl-line-subtle);
356
297
  }
357
298
  .lk-workspace--unknown {
358
299
  display: flex;
359
300
  align-items: center;
360
301
  justify-content: center;
361
- color: var(--lk-text-muted);
362
- font-size: var(--lk-font-size-sm);
302
+ color: var(--wzl-fg-muted);
303
+ font-size: var(--wzl-font-size-sm);
363
304
  }
364
305
  .lk-toolbar__zoom-label {
365
- font-size: var(--lk-font-size-sm);
366
- color: var(--lk-text-muted);
367
- padding: 0 var(--lk-space-2);
306
+ font-size: var(--wzl-font-size-sm);
307
+ color: var(--wzl-fg-muted);
308
+ padding: 0 var(--wzl-space-sm);
368
309
  }
369
310
  .lk-toolbar__load-select {
370
- font-size: var(--lk-font-size-sm);
311
+ font-size: var(--wzl-font-size-sm);
371
312
  }
372
313
  .lk-sidebar__placeholder {
373
- padding: var(--lk-space-2);
374
- color: var(--lk-text-muted);
375
- font-size: var(--lk-font-size-sm);
314
+ padding: var(--wzl-space-sm);
315
+ color: var(--wzl-fg-muted);
316
+ font-size: var(--wzl-font-size-sm);
376
317
  }
377
318
  .lk-control-panel {
378
319
  display: flex;
379
320
  flex-direction: column;
380
- gap: var(--lk-spacing-sm, 8px);
381
- padding: var(--lk-spacing-sm, 8px);
321
+ gap: var(--wzl-space-sm);
322
+ padding: var(--wzl-space-sm);
382
323
  }
383
324
  .lk-control-row {
384
325
  display: flex;
385
326
  flex-direction: column;
386
- gap: var(--lk-spacing-xs, 4px);
327
+ gap: var(--wzl-space-xs);
387
328
  }
388
329
  .lk-control-row--inline {
389
330
  flex-direction: row;
390
331
  align-items: center;
391
- gap: var(--lk-spacing-sm, 8px);
332
+ gap: var(--wzl-space-sm);
392
333
  }
393
334
  .lk-control-label {
394
- font-size: var(--lk-font-size-sm, 12px);
395
- color: var(--lk-color-text, #222);
335
+ font-size: var(--wzl-font-size-sm);
336
+ color: var(--wzl-fg);
396
337
  }
397
338
  .lk-control-input {
398
339
  width: 100%;
399
- background: var(--lk-color-surface, #fff);
400
- color: var(--lk-color-text, #222);
401
- border: 1px solid var(--lk-color-border, #ccc);
340
+ background: var(--wzl-surface-raised);
341
+ color: var(--wzl-fg);
342
+ border: 1px solid var(--wzl-border);
402
343
  border-radius: 4px;
403
344
  padding: 2px 6px;
404
345
  }
@@ -415,21 +356,21 @@
415
356
  padding: 0;
416
357
  }
417
358
  .lk-control-slider-value {
418
- font-size: var(--lk-font-size-sm, 12px);
359
+ font-size: var(--wzl-font-size-sm);
419
360
  font-variant-numeric: tabular-nums;
420
- color: var(--lk-color-text-muted, #666);
361
+ color: var(--wzl-fg-muted);
421
362
  min-width: 3ch;
422
363
  text-align: right;
423
364
  }
424
365
  .lk-control-slider-row {
425
366
  display: flex;
426
367
  align-items: center;
427
- gap: var(--lk-spacing-sm, 8px);
368
+ gap: var(--wzl-space-sm);
428
369
  }
429
370
  .lk-canvas-stack {
430
371
  position: relative;
431
372
  overflow: hidden;
432
- background: var(--lk-color-canvas-bg, #f6f6f6);
373
+ background: var(--wzl-surface-sunken);
433
374
  touch-action: none;
434
375
  }
435
376
  .lk-canvas-stack__canvas {
@@ -449,26 +390,26 @@
449
390
  display: flex;
450
391
  flex-direction: column;
451
392
  gap: 2px;
452
- padding: var(--lk-spacing-sm, 8px);
393
+ padding: var(--wzl-space-sm);
453
394
  }
454
395
  .lk-layer-list__empty {
455
- color: var(--lk-color-text-muted, #888);
456
- font-size: var(--lk-font-size-sm, 12px);
396
+ color: var(--wzl-fg-muted);
397
+ font-size: var(--wzl-font-size-sm);
457
398
  font-style: italic;
458
399
  }
459
400
  .lk-layer-list__row {
460
401
  display: flex;
461
402
  align-items: center;
462
- gap: var(--lk-spacing-sm, 8px);
403
+ gap: var(--wzl-space-sm);
463
404
  padding: 4px 6px;
464
405
  border-radius: 3px;
465
406
  user-select: none;
466
407
  }
467
408
  .lk-layer-list__row:hover {
468
- background: var(--lk-color-hover, rgba(0, 0, 0, 0.04));
409
+ background: var(--wzl-surface-hover);
469
410
  }
470
411
  .lk-layer-list__row--dragging {
471
- background: var(--lk-color-active, rgba(0, 0, 0, 0.08));
412
+ background: var(--wzl-surface-pressed);
472
413
  opacity: 0.7;
473
414
  }
474
415
  .lk-layer-list__row--pinned {
@@ -476,33 +417,33 @@
476
417
  }
477
418
  .lk-layer-list__handle {
478
419
  cursor: grab;
479
- color: var(--lk-color-text-muted, #888);
420
+ color: var(--wzl-fg-muted);
480
421
  font-family: monospace;
481
422
  }
482
423
  .lk-layer-list__handle:active {
483
424
  cursor: grabbing;
484
425
  }
485
426
  .lk-layer-list__lock {
486
- color: var(--lk-color-text-muted, #888);
427
+ color: var(--wzl-fg-muted);
487
428
  }
488
429
  .lk-layer-list__label {
489
430
  flex: 1;
490
- font-size: var(--lk-font-size-sm, 12px);
431
+ font-size: var(--wzl-font-size-sm);
491
432
  }
492
433
  .lk-palette {
493
434
  display: grid;
494
435
  grid-template-columns: repeat(2, 1fr);
495
- gap: var(--lk-spacing-sm, 8px);
496
- padding: var(--lk-spacing-sm, 8px);
436
+ gap: var(--wzl-space-sm);
437
+ padding: var(--wzl-space-sm);
497
438
  }
498
439
  .lk-palette__item {
499
440
  display: flex;
500
441
  align-items: center;
501
442
  justify-content: center;
502
443
  min-height: 48px;
503
- padding: var(--lk-spacing-sm, 8px);
504
- background: var(--lk-color-surface, #fff);
505
- border: 1px solid var(--lk-color-border, #d0d0d0);
444
+ padding: var(--wzl-space-sm);
445
+ background: var(--wzl-surface-raised);
446
+ border: 1px solid var(--wzl-border);
506
447
  border-radius: 4px;
507
448
  cursor: grab;
508
449
  font: inherit;
@@ -511,7 +452,7 @@
511
452
  touch-action: none;
512
453
  }
513
454
  .lk-palette__item:hover {
514
- background: var(--lk-color-surface-hover, #f4f4f4);
455
+ background: var(--wzl-surface-hover);
515
456
  }
516
457
  .lk-palette__item:active {
517
458
  cursor: grabbing;
@@ -524,8 +465,8 @@
524
465
  pointer-events: none;
525
466
  z-index: 9999;
526
467
  padding: 4px 8px;
527
- background: var(--lk-color-surface, #fff);
528
- border: 1px solid var(--lk-color-border, #999);
468
+ background: var(--wzl-surface-raised);
469
+ border: 1px solid var(--wzl-border);
529
470
  border-radius: 4px;
530
471
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
531
472
  font: inherit;
@@ -536,20 +477,20 @@
536
477
  white-space: nowrap;
537
478
  }
538
479
  .lk-property-panel {
539
- background: var(--lk-bg-elevated);
540
- border: 1px solid var(--lk-border);
541
- border-radius: var(--lk-radius-lg, 14px);
480
+ background: var(--wzl-surface-raised);
481
+ border: 1px solid var(--wzl-border);
482
+ border-radius: var(--wzl-radius-lg);
542
483
  padding: 14px 16px;
543
- backdrop-filter: blur(var(--lk-glass-blur, 0));
544
- -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
484
+ backdrop-filter: blur(var(--wzl-glass-blur));
485
+ -webkit-backdrop-filter: blur(var(--wzl-glass-blur));
545
486
  }
546
487
  .lk-property-panel__title {
547
- font-family: var(--lk-font-display);
548
- font-weight: var(--lk-font-weight-light, 300);
488
+ font-family: var(--wzl-font-display);
489
+ font-weight: var(--wzl-font-weight-light);
549
490
  font-size: 1.05rem;
550
491
  line-height: 1.2;
551
492
  letter-spacing: 0.01em;
552
- color: var(--lk-text);
493
+ color: var(--wzl-fg);
553
494
  margin: 0 0 12px;
554
495
  }
555
496
  .lk-property-list {
@@ -589,11 +530,11 @@
589
530
  margin-top: auto;
590
531
  }
591
532
  .lk-property-row__label {
592
- font-family: var(--lk-font-display);
593
- font-weight: var(--lk-font-weight-light, 300);
533
+ font-family: var(--wzl-font-display);
534
+ font-weight: var(--wzl-font-weight-light);
594
535
  font-size: 0.78rem;
595
536
  line-height: 1.2;
596
- color: var(--lk-text-muted);
537
+ color: var(--wzl-fg-muted);
597
538
  text-transform: uppercase;
598
539
  letter-spacing: 0.05em;
599
540
  display: flex;
@@ -602,15 +543,15 @@
602
543
  }
603
544
  .lk-property-row__readout {
604
545
  font-style: normal;
605
- font-weight: var(--lk-font-weight-medium, 500);
606
- color: var(--lk-accent);
546
+ font-weight: var(--wzl-font-weight-medium);
547
+ color: var(--wzl-accent);
607
548
  margin-left: auto;
608
549
  }
609
550
  .lk-property-row__readout-input {
610
551
  font: inherit;
611
- font-weight: var(--lk-font-weight-medium, 500);
552
+ font-weight: var(--wzl-font-weight-medium);
612
553
  line-height: 1;
613
- color: var(--lk-accent);
554
+ color: var(--wzl-accent);
614
555
  background: transparent;
615
556
  border: 1px solid transparent;
616
557
  border-radius: 3px;
@@ -628,7 +569,7 @@
628
569
  }
629
570
  .lk-property-row__readout-input:focus {
630
571
  background: rgba(0, 0, 0, 0.4);
631
- border-color: var(--lk-accent);
572
+ border-color: var(--wzl-accent);
632
573
  }
633
574
  .lk-property-row__readout-input::-webkit-inner-spin-button,
634
575
  .lk-property-row__readout-input::-webkit-outer-spin-button {
@@ -640,13 +581,13 @@
640
581
  white-space: nowrap;
641
582
  }
642
583
  .lk-property-row__readout-unit {
643
- color: var(--lk-text-muted);
584
+ color: var(--wzl-fg-muted);
644
585
  font-size: 0.78em;
645
586
  line-height: 1;
646
587
  pointer-events: none;
647
588
  }
648
589
  .lk-property-row__readout-group sup {
649
- color: var(--lk-text-muted);
590
+ color: var(--wzl-fg-muted);
650
591
  font-size: 0.7em;
651
592
  pointer-events: none;
652
593
  }
@@ -663,12 +604,12 @@
663
604
  .lk-property-row input[type='range']::-webkit-slider-runnable-track {
664
605
  height: 4px;
665
606
  border-radius: 2px;
666
- background: color-mix(in srgb, var(--lk-accent) 18%, transparent);
607
+ background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);
667
608
  }
668
609
  .lk-property-row input[type='range']::-moz-range-track {
669
610
  height: 4px;
670
611
  border-radius: 2px;
671
- background: color-mix(in srgb, var(--lk-accent) 18%, transparent);
612
+ background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);
672
613
  }
673
614
  .lk-property-row input[type='range']::-webkit-slider-thumb {
674
615
  -webkit-appearance: none;
@@ -676,7 +617,7 @@
676
617
  width: 8px;
677
618
  height: 8px;
678
619
  border-radius: 50%;
679
- background: color-mix(in srgb, var(--lk-accent) 70%, transparent);
620
+ background: color-mix(in srgb, var(--wzl-accent) 70%, transparent);
680
621
  border: none;
681
622
  margin-top: -2px;
682
623
  }
@@ -684,7 +625,7 @@
684
625
  width: 8px;
685
626
  height: 8px;
686
627
  border-radius: 50%;
687
- background: color-mix(in srgb, var(--lk-accent) 70%, transparent);
628
+ background: color-mix(in srgb, var(--wzl-accent) 70%, transparent);
688
629
  border: none;
689
630
  }
690
631
  .lk-property-row--inline {
@@ -707,27 +648,27 @@
707
648
  .lk-property-row input[type='text']:not(.lk-property-row__readout-input),
708
649
  .lk-property-row input[type='number'] {
709
650
  background: rgba(0, 0, 0, 0.35);
710
- color: var(--lk-text);
711
- border: 1px solid var(--lk-border);
712
- border-radius: var(--lk-radius-sm);
651
+ color: var(--wzl-fg);
652
+ border: 1px solid var(--wzl-border);
653
+ border-radius: var(--wzl-radius-sm);
713
654
  padding: 6px 8px;
714
- font: 400 0.85rem/1 var(--lk-font);
655
+ font: 400 0.85rem/1 var(--wzl-font-ui);
715
656
  }
716
657
  .lk-property-row input[type='text']:not(.lk-property-row__readout-input):focus,
717
658
  .lk-property-row input[type='number']:focus {
718
- outline: 1px solid var(--lk-accent);
659
+ outline: 1px solid var(--wzl-accent);
719
660
  }
720
661
  .lk-property-row select {
721
662
  background: transparent;
722
- color: var(--lk-text);
663
+ color: var(--wzl-fg);
723
664
  border: 0;
724
665
  border-radius: 0;
725
666
  padding: 2px 0;
726
- font: 400 0.85rem/1 var(--lk-font);
667
+ font: 400 0.85rem/1 var(--wzl-font-ui);
727
668
  cursor: pointer;
728
669
  }
729
670
  .lk-property-row select:focus {
730
- outline: 1px solid var(--lk-accent);
671
+ outline: 1px solid var(--wzl-accent);
731
672
  outline-offset: 2px;
732
673
  }
733
674
  .lk-property-row--color {
@@ -755,7 +696,7 @@
755
696
  height: 18px;
756
697
  background: transparent;
757
698
  border: 0;
758
- border-radius: var(--lk-radius-sm);
699
+ border-radius: var(--wzl-radius-sm);
759
700
  padding: 0;
760
701
  cursor: pointer;
761
702
  flex-shrink: 0;
@@ -768,10 +709,10 @@
768
709
  margin: 0;
769
710
  }
770
711
  .lk-property-row--color input[type='range'].lk-property-row__alpha::-webkit-slider-runnable-track {
771
- background: color-mix(in srgb, var(--lk-accent) 10%, transparent);
712
+ background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);
772
713
  }
773
714
  .lk-property-row--color input[type='range'].lk-property-row__alpha::-moz-range-track {
774
- background: color-mix(in srgb, var(--lk-accent) 10%, transparent);
715
+ background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);
775
716
  }
776
717
  .lk-property-row--color.lk-property-row--alpha-disabled input[type='range'].lk-property-row__alpha {
777
718
  cursor: not-allowed;
@@ -799,11 +740,11 @@
799
740
  text-transform: none;
800
741
  letter-spacing: normal;
801
742
  font-size: 0.85rem;
802
- color: var(--lk-text);
743
+ color: var(--wzl-fg);
803
744
  order: 1;
804
745
  }
805
746
  .lk-property-row--checkbox input[type='checkbox'] {
806
- accent-color: var(--lk-accent);
747
+ accent-color: var(--wzl-accent);
807
748
  width: 14px;
808
749
  height: 14px;
809
750
  cursor: pointer;
@@ -811,8 +752,8 @@
811
752
  .lk-property-row__toggle {
812
753
  display: flex;
813
754
  width: 100%;
814
- border: 1px solid var(--lk-border);
815
- border-radius: var(--lk-radius-sm);
755
+ border: 1px solid var(--wzl-border);
756
+ border-radius: var(--wzl-radius-sm);
816
757
  overflow: hidden;
817
758
  }
818
759
  .lk-property-row__toggle-button {
@@ -820,25 +761,25 @@
820
761
  height: 26px;
821
762
  padding: 0 8px;
822
763
  background: rgba(0, 0, 0, 0.25);
823
- color: var(--lk-text-muted);
764
+ color: var(--wzl-fg-muted);
824
765
  border: 0;
825
766
  border-radius: 0;
826
- font: 400 0.78rem/1 var(--lk-font);
767
+ font: 400 0.78rem/1 var(--wzl-font-ui);
827
768
  cursor: pointer;
828
769
  backdrop-filter: none;
829
770
  -webkit-backdrop-filter: none;
830
771
  }
831
772
  .lk-property-row__toggle-button + .lk-property-row__toggle-button {
832
- border-left: 1px solid var(--lk-border);
773
+ border-left: 1px solid var(--wzl-border);
833
774
  }
834
775
  .lk-property-row__toggle-button:hover {
835
- color: var(--lk-text);
836
- border-color: var(--lk-border);
776
+ color: var(--wzl-fg);
777
+ border-color: var(--wzl-border);
837
778
  }
838
779
  .lk-property-row__toggle-button--selected {
839
- background: var(--lk-accent);
780
+ background: var(--wzl-accent);
840
781
  color: #0a0a14;
841
- font-weight: var(--lk-font-weight-medium, 500);
782
+ font-weight: var(--wzl-font-weight-medium);
842
783
  }
843
784
  .lk-property-row__toggle-button--selected:hover {
844
785
  color: #0a0a14;
@@ -862,11 +803,11 @@
862
803
  grid-column: 1 / -1;
863
804
  }
864
805
  .lk-subpanel__title {
865
- font-family: var(--lk-font-display);
806
+ font-family: var(--wzl-font-display);
866
807
  font-weight: 400;
867
808
  font-size: 0.72rem;
868
809
  line-height: 1;
869
- color: var(--lk-text);
810
+ color: var(--wzl-fg);
870
811
  text-transform: uppercase;
871
812
  letter-spacing: 0.08em;
872
813
  margin: 0;
@@ -886,8 +827,8 @@
886
827
  }
887
828
  .lk-effect-card {
888
829
  background: rgba(0, 0, 0, 0.25);
889
- border: 1px solid var(--lk-border);
890
- border-radius: var(--lk-radius-sm);
830
+ border: 1px solid var(--wzl-border);
831
+ border-radius: var(--wzl-radius-sm);
891
832
  display: flex;
892
833
  flex-direction: column;
893
834
  overflow: hidden;
@@ -900,9 +841,9 @@
900
841
  background: rgba(0, 0, 0, 0.3);
901
842
  }
902
843
  .lk-effect-card.has-accent {
903
- --lk-accent: var(--lk-panel-accent);
844
+ --wzl-accent: var(--lk-panel-accent);
904
845
  background: color-mix(in srgb, var(--lk-panel-accent) 4%, rgba(0, 0, 0, 0.28));
905
- border-color: color-mix(in srgb, var(--lk-panel-accent) 28%, var(--lk-border));
846
+ border-color: color-mix(in srgb, var(--lk-panel-accent) 28%, var(--wzl-border));
906
847
  border-left-width: 4px;
907
848
  border-left-color: var(--lk-panel-accent);
908
849
  }
@@ -930,7 +871,7 @@
930
871
  display: inline-flex;
931
872
  align-items: center;
932
873
  justify-content: center;
933
- color: var(--lk-text-muted);
874
+ color: var(--wzl-fg-muted);
934
875
  cursor: grab;
935
876
  padding: 0 2px;
936
877
  }
@@ -946,27 +887,27 @@
946
887
  justify-content: center;
947
888
  min-width: 14px;
948
889
  padding: 0 2px;
949
- color: var(--lk-panel-accent, var(--lk-text-muted));
890
+ color: var(--lk-panel-accent, var(--wzl-fg-muted));
950
891
  font-size: 14px;
951
892
  font-weight: 700;
952
893
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
953
894
  line-height: 1;
954
895
  }
955
896
  .lk-effect-card__title {
956
- font-family: var(--lk-font-display);
897
+ font-family: var(--wzl-font-display);
957
898
  font-weight: 500;
958
899
  font-size: 0.9rem;
959
900
  line-height: 1;
960
- color: var(--lk-text);
901
+ color: var(--wzl-fg);
961
902
  text-transform: uppercase;
962
903
  letter-spacing: 0.04em;
963
904
  }
964
905
  .lk-effect-card__primary {
965
- font: 400 0.75rem/1 var(--lk-font);
966
- color: var(--lk-text);
906
+ font: 400 0.75rem/1 var(--wzl-font-ui);
907
+ color: var(--wzl-fg);
967
908
  background: rgba(0, 0, 0, 0.3);
968
- border: 1px solid var(--lk-border);
969
- border-radius: var(--lk-radius-sm);
909
+ border: 1px solid var(--wzl-border);
910
+ border-radius: var(--wzl-radius-sm);
970
911
  padding: 2px 6px;
971
912
  margin-left: auto;
972
913
  }
@@ -979,7 +920,7 @@
979
920
  }
980
921
  .lk-effect-card__remove {
981
922
  background: transparent;
982
- color: var(--lk-text-muted);
923
+ color: var(--wzl-fg-muted);
983
924
  border: 1px solid transparent;
984
925
  border-radius: 4px;
985
926
  width: 22px;
@@ -997,7 +938,7 @@
997
938
  }
998
939
  .lk-effect-card__body {
999
940
  padding: 4px 12px 12px;
1000
- border-top: 1px solid var(--lk-border);
941
+ border-top: 1px solid var(--wzl-border);
1001
942
  }
1002
943
  .lk-effect-card-list {
1003
944
  display: flex;
@@ -1009,23 +950,23 @@
1009
950
  }
1010
951
  .lk-effect-card-list__drop-hint {
1011
952
  height: 0;
1012
- border-top: 2px solid var(--lk-accent);
953
+ border-top: 2px solid var(--wzl-accent);
1013
954
  border-radius: 2px;
1014
955
  margin: 2px 0;
1015
- box-shadow: 0 0 6px color-mix(in srgb, var(--lk-accent) 60%, transparent);
956
+ box-shadow: 0 0 6px color-mix(in srgb, var(--wzl-accent) 60%, transparent);
1016
957
  }
1017
958
  .lk-effect-card-list__empty {
1018
- font: var(--lk-font-weight-light, 300) 0.78rem/1.4 var(--lk-font-display);
1019
- color: var(--lk-text-muted);
959
+ font: var(--wzl-font-weight-light) 0.78rem/1.4 var(--wzl-font-display);
960
+ color: var(--wzl-fg-muted);
1020
961
  text-align: center;
1021
962
  padding: 16px 12px;
1022
- border: 1px dashed var(--lk-border);
1023
- border-radius: var(--lk-radius-sm);
963
+ border: 1px dashed var(--wzl-border);
964
+ border-radius: var(--wzl-radius-sm);
1024
965
  }
1025
966
  .lk-property-group {
1026
967
  grid-column: 1 / -1;
1027
- background: var(--lk-bg-sunken, rgba(0, 0, 0, 0.18));
1028
- border-radius: var(--lk-radius-md, 8px);
968
+ background: var(--wzl-surface-sunken);
969
+ border-radius: var(--wzl-radius-md);
1029
970
  padding: 10px 12px 12px;
1030
971
  }
1031
972
  .lk-property-group__title {
@@ -1034,16 +975,16 @@
1034
975
  align-items: center;
1035
976
  gap: 10px;
1036
977
  margin: 0 0 8px;
1037
- font-family: var(--lk-font-display);
1038
- font-weight: var(--lk-font-weight-light, 300);
978
+ font-family: var(--wzl-font-display);
979
+ font-weight: var(--wzl-font-weight-light);
1039
980
  font-size: 0.78rem;
1040
981
  letter-spacing: 0.08em;
1041
982
  text-transform: uppercase;
1042
- color: var(--lk-text-dim);
983
+ color: var(--wzl-fg-subtle);
1043
984
  }
1044
985
  .lk-property-group__title hr {
1045
986
  border: 0;
1046
- border-top: 1px solid var(--lk-border);
987
+ border-top: 1px solid var(--wzl-border);
1047
988
  margin: 0;
1048
989
  }
1049
990
  .lk-property-group__body {
@@ -1082,7 +1023,7 @@
1082
1023
  justify-content: space-between;
1083
1024
  font-variant-numeric: tabular-nums;
1084
1025
  font-size: 0.85rem;
1085
- color: var(--lk-text-dim);
1026
+ color: var(--wzl-fg-subtle);
1086
1027
  }
1087
1028
  .lk-curve-field__readout {
1088
1029
  font-style: normal;
@@ -1094,15 +1035,15 @@
1094
1035
  }
1095
1036
  .lk-curve-field__action {
1096
1037
  background: transparent;
1097
- border: 1px solid var(--lk-border);
1098
- border-radius: var(--lk-radius-sm, 6px);
1099
- color: var(--lk-text);
1038
+ border: 1px solid var(--wzl-border);
1039
+ border-radius: var(--wzl-radius-sm);
1040
+ color: var(--wzl-fg);
1100
1041
  padding: 4px 10px;
1101
1042
  font-size: 0.78rem;
1102
1043
  cursor: pointer;
1103
1044
  }
1104
1045
  .lk-curve-field__action:hover {
1105
- background: var(--lk-bg-elevated);
1046
+ background: var(--wzl-surface-raised);
1106
1047
  }
1107
1048
  .lk-layer-stack {
1108
1049
  display: grid;
@@ -1116,10 +1057,10 @@
1116
1057
  }
1117
1058
  .lk-layer-stack__title {
1118
1059
  margin: 0;
1119
- font-family: var(--lk-font-display);
1120
- font-weight: var(--lk-font-weight-light, 300);
1060
+ font-family: var(--wzl-font-display);
1061
+ font-weight: var(--wzl-font-weight-light);
1121
1062
  font-size: 1rem;
1122
- color: var(--lk-text);
1063
+ color: var(--wzl-fg);
1123
1064
  }
1124
1065
  .lk-layer-stack__palette {
1125
1066
  display: flex;
@@ -1127,16 +1068,16 @@
1127
1068
  }
1128
1069
  .lk-layer-stack__add {
1129
1070
  background: transparent;
1130
- border: 1px dashed var(--lk-border);
1131
- border-radius: var(--lk-radius-sm, 6px);
1071
+ border: 1px dashed var(--wzl-border);
1072
+ border-radius: var(--wzl-radius-sm);
1132
1073
  padding: 2px 8px;
1133
1074
  font-size: 0.78rem;
1134
- color: var(--lk-text-dim);
1075
+ color: var(--wzl-fg-subtle);
1135
1076
  cursor: pointer;
1136
1077
  }
1137
1078
  .lk-layer-stack__add:hover {
1138
- background: var(--lk-bg-elevated);
1139
- color: var(--lk-text);
1079
+ background: var(--wzl-surface-raised);
1080
+ color: var(--wzl-fg);
1140
1081
  }
1141
1082
  .lk-layer-stack__list {
1142
1083
  display: grid;
@@ -1144,23 +1085,23 @@
1144
1085
  }
1145
1086
  .lk-layer-stack__drop-hint {
1146
1087
  height: 2px;
1147
- background: var(--lk-accent, #6cf);
1088
+ background: var(--wzl-accent);
1148
1089
  border-radius: 1px;
1149
1090
  }
1150
1091
  .lk-layer-stack__empty {
1151
- color: var(--lk-text-dim);
1092
+ color: var(--wzl-fg-subtle);
1152
1093
  font-size: 0.85rem;
1153
1094
  padding: 8px;
1154
1095
  text-align: center;
1155
1096
  }
1156
1097
  .lk-layer-card {
1157
- background: var(--lk-bg-elevated);
1158
- border: 1px solid var(--lk-border);
1159
- border-radius: var(--lk-radius-md, 8px);
1098
+ background: var(--wzl-surface-raised);
1099
+ border: 1px solid var(--wzl-border);
1100
+ border-radius: var(--wzl-radius-md);
1160
1101
  overflow: hidden;
1161
1102
  }
1162
1103
  .lk-layer-card.has-accent {
1163
- --lk-accent: var(--lk-layer-card-accent);
1104
+ --wzl-accent: var(--lk-layer-card-accent);
1164
1105
  border-left: 3px solid var(--lk-layer-card-accent);
1165
1106
  }
1166
1107
  .lk-layer-card.is-dragging {
@@ -1175,7 +1116,7 @@
1175
1116
  .lk-root .lk-layer-card__handle {
1176
1117
  background: transparent;
1177
1118
  border: 0;
1178
- color: var(--lk-text-dim);
1119
+ color: var(--wzl-fg-subtle);
1179
1120
  padding: 2px 4px;
1180
1121
  cursor: grab;
1181
1122
  display: inline-flex;
@@ -1183,7 +1124,7 @@
1183
1124
  justify-content: center;
1184
1125
  min-width: 22px;
1185
1126
  height: 22px;
1186
- border-radius: var(--lk-radius-sm, 6px);
1127
+ border-radius: var(--wzl-radius-sm);
1187
1128
  font-weight: 600;
1188
1129
  font-size: 0.85rem;
1189
1130
  }
@@ -1202,7 +1143,7 @@
1202
1143
  .lk-layer-card__primary {
1203
1144
  background: transparent;
1204
1145
  border: 0;
1205
- color: var(--lk-text);
1146
+ color: var(--wzl-fg);
1206
1147
  font: inherit;
1207
1148
  text-transform: uppercase;
1208
1149
  letter-spacing: 0.06em;
@@ -1210,15 +1151,15 @@
1210
1151
  .lk-root .lk-layer-card__remove {
1211
1152
  background: transparent;
1212
1153
  border: 0;
1213
- color: var(--lk-text-dim);
1154
+ color: var(--wzl-fg-subtle);
1214
1155
  font-size: 1rem;
1215
1156
  cursor: pointer;
1216
1157
  padding: 2px 6px;
1217
1158
  }
1218
1159
  .lk-layer-card__remove:hover {
1219
- color: var(--lk-text);
1160
+ color: var(--wzl-fg);
1220
1161
  }
1221
1162
  .lk-layer-card__body {
1222
1163
  padding: 8px;
1223
- border-top: 1px solid var(--lk-border);
1164
+ border-top: 1px solid var(--wzl-border);
1224
1165
  }