@aviala-design/spiral 2.6.0 → 2.6.2

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 (7) hide show
  1. package/dist/component-changelogs.json +108 -8
  2. package/dist/index.cjs +370 -121
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +386 -137
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +231 -187
  7. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -114,41 +114,73 @@
114
114
 
115
115
  :root {
116
116
  /* ALD semantic colors → runtime aviala palette steps (set by generateTheme / applyTheme) */
117
- --control-control-theme-background: var(--aviala-primary-primary-8, #ff856b);
118
- --control-control-theme-lightbackground: var(--aviala-primary-primary-2, #fff9f8);
119
- --box-box-theme-secondarybackground: var(--aviala-primary-primary-4, #ffe9e5);
120
- --box-box-theme-lightbackground: var(--aviala-primary-primary-2, #fff9f8);
121
- --text-text-theme-primary-black: var(--aviala-primary-primary-10, #bf2300);
122
- --text-text-theme-secondary-black: var(--aviala-primary-primary-7, #ffab98);
123
- --text-text-theme-light-black: var(--aviala-primary-primary-5, #ffd6cd);
124
- --border-border-theme-light: var(--border-border-normal-light, #f5f3f3);
125
- --border-border-theme-primary: var(--aviala-primary-primary-8, #ff856b);
126
- --border-border-normal-light: #f5f3f3;
127
- --border-border-normal-primary: #e2e0e0;
128
- --control-control-fail-background: var(--aviala-error-error-8, #ff646f);
117
+ --control-control-theme-background: var(--aviala-primary-primary-8, #ff5532);
118
+ --control-control-theme-lightbackground: var(--aviala-primary-primary-2, #ffe9e3);
119
+ --box-box-theme-secondarybackground: var(--aviala-primary-primary-4, #ffc6b6);
120
+ --box-box-theme-lightbackground: var(--aviala-primary-primary-2, #ffe9e3);
121
+ --text-text-theme-primary-black: var(--aviala-primary-primary-10, #cd3923);
122
+ --text-text-theme-secondary-black: var(--aviala-primary-primary-7, #ff7b5b);
123
+ --text-text-theme-light-black: var(--aviala-primary-primary-5, #ffb19b);
124
+ --border-border-theme-light: var(--border-border-normal-1, #f9f8f8);
125
+ --border-border-theme-primary: var(--aviala-primary-primary-8, #ff5532);
126
+ --border-border-normal-1: #f9f8f8;
127
+ --border-border-normal-2: #f0efef;
128
+ --border-border-normal-3: #d6d5d4;
129
+ --control-control-fail-background: var(--aviala-error-error-8, #ff1d4e);
130
+ --control-control-normal-lightbackground-1: #f0efef;
131
+ --control-control-normal-lightbackground-2: #e5e4e3;
132
+ --control-control-normal-background-3: #d6d5d4;
133
+ --control-control-normal-background-whiteonly: #ffffff;
129
134
 
130
135
  /* Neutral text series (body copy, labels, icons) */
131
- --text-text-normal-text-black: #343333;
132
- --text-text-normal-text-caption-black: #858484;
133
- --text-text-normal-text-white: #fefcfc;
134
- --text-text-normal-text-caption-white: #fefcfc;
136
+ --text-text-normal-text-black: #262525;
137
+ --text-text-normal-text-caption-black: #616060;
138
+ --text-text-normal-text-white: #fefdfd;
139
+ --text-text-normal-text-caption-white: #fefdfd;
140
+
141
+ /* Shared elevation — BasicShadow-Level4WithLine */
142
+ --aviala-shadow-level4-with-line:
143
+ 0 0 1px 0 rgba(0, 0, 0, 0.45),
144
+ 0 6px 18px 0 rgba(0, 0, 0, 0.08);
145
+
146
+ /* Shared interaction surfaces — Figma Components 1909:28593 matrix */
147
+ --aviala-interaction-ghost-hover: var(
148
+ --aviala-neutral-neutral-3,
149
+ var(--box-box-normal-lightbackground-white, #f9f8f8)
150
+ );
151
+ --aviala-interaction-ghost-active: var(
152
+ --control-control-normal-lightbackground-1,
153
+ #f0efef
154
+ );
155
+ --aviala-interaction-filled-default: var(
156
+ --control-control-normal-lightbackground-1,
157
+ #f0efef
158
+ );
159
+ --aviala-interaction-filled-hover: var(
160
+ --control-control-normal-lightbackground-2,
161
+ #e5e4e3
162
+ );
163
+ --aviala-interaction-filled-active: var(
164
+ --control-control-normal-background-3,
165
+ #d6d5d4
166
+ );
135
167
 
136
168
  /* shadcn semantic aliases — default typography/surfaces use neutral tokens, not theme tint */
137
- --background: var(--normal-background-theme, #faf8f8);
138
- --foreground: var(--text-text-normal-text-black, #343333);
139
- --primary: var(--control-control-theme-background, #ff856b);
169
+ --background: var(--normal-background-theme, #f9f8f8);
170
+ --foreground: var(--text-text-normal-text-black, #262525);
171
+ --primary: var(--control-control-theme-background, #ff5532);
140
172
  --primary-foreground: #ffffff;
141
- --secondary: var(--control-control-normal-lightbackground-deep, #fdfbfb);
142
- --secondary-foreground: var(--text-text-normal-text-black, #343333);
143
- --muted: var(--control-control-normal-lightbackground-light, #f5f3f3);
144
- --muted-foreground: var(--text-text-normal-text-caption-black, #858484);
145
- --accent: var(--control-control-normal-lightbackground-light, #f5f3f3);
146
- --accent-foreground: var(--text-text-normal-text-black, #343333);
147
- --destructive: var(--control-control-fail-background, #ff646f);
173
+ --secondary: var(--control-control-normal-lightbackground-2, #e5e4e3);
174
+ --secondary-foreground: var(--text-text-normal-text-black, #262525);
175
+ --muted: var(--control-control-normal-lightbackground-1, #f0efef);
176
+ --muted-foreground: var(--text-text-normal-text-caption-black, #616060);
177
+ --accent: var(--control-control-normal-lightbackground-1, #f0efef);
178
+ --accent-foreground: var(--text-text-normal-text-black, #262525);
179
+ --destructive: var(--control-control-fail-background, #ff1d4e);
148
180
  --destructive-foreground: #ffffff;
149
- --border: var(--border-border-normal-light, #f5f3f3);
150
- --input: var(--border-border-normal-light, #f5f3f3);
151
- --ring: var(--border-border-theme-primary, #ff856b);
181
+ --border: var(--border-border-normal-1, #f9f8f8);
182
+ --input: var(--border-border-normal-1, #f9f8f8);
183
+ --ring: var(--border-border-theme-primary, #ff5532);
152
184
  --card: #ffffff;
153
185
  --card-foreground: var(--foreground);
154
186
  --popover: var(--card);
@@ -157,22 +189,27 @@
157
189
  }
158
190
 
159
191
  [data-mode="dark"] {
160
- --background: #1a1a1a;
161
- --foreground: var(--text-text-normal-text-white, #e8e8e8);
162
- --muted-foreground: var(--text-text-normal-text-caption-black, #a8a8a8);
163
- --secondary-foreground: var(--text-text-normal-text-white, #e8e8e8);
164
- --accent-foreground: var(--text-text-normal-text-white, #e8e8e8);
165
- --card: #242424;
192
+ --background: #090909;
193
+ --foreground: var(--text-text-normal-text-white, #d5d5d5);
194
+ --muted-foreground: var(--text-text-normal-text-caption-black, #8e8e8e);
195
+ --secondary-foreground: var(--text-text-normal-text-white, #d5d5d5);
196
+ --accent-foreground: var(--text-text-normal-text-white, #d5d5d5);
197
+ --card: #000000;
166
198
  --card-foreground: var(--foreground);
167
199
  --popover: var(--card);
168
200
  /* Override light :root neutrals — fallbacks alone never win once :root defines the var */
169
- --border-border-normal-light: #3d3d3d;
170
- --border-border-normal-primary: #2c2c2c;
171
- --border-border-theme-light: var(--border-border-normal-light);
172
- --border: var(--border-border-normal-light);
201
+ --border-border-normal-1: #090909;
202
+ --border-border-normal-2: #121212;
203
+ --border-border-normal-3: #252525;
204
+ --border-border-theme-light: var(--border-border-normal-1);
205
+ --border: var(--border-border-normal-1);
173
206
  --input: var(--border);
174
- --muted: var(--control-control-normal-lightbackground-light, #2a2a2a);
175
- --accent: var(--control-control-normal-lightbackground-light, #2a2a2a);
207
+ --control-control-normal-lightbackground-1: #121212;
208
+ --control-control-normal-lightbackground-2: #1a1a1a;
209
+ --control-control-normal-background-3: #252525;
210
+ --muted: var(--control-control-normal-lightbackground-1, #121212);
211
+ --accent: var(--control-control-normal-lightbackground-1, #121212);
212
+ --secondary: var(--control-control-normal-lightbackground-2, #1a1a1a);
176
213
  }
177
214
 
178
215
  :root {
@@ -186,7 +223,7 @@
186
223
  --control-control-theme-background,
187
224
  var(--aviala-primary-primary-8, #ff856b)
188
225
  );
189
- --button-primary-fg: var(--primary-foreground, #fefcfc);
226
+ --button-primary-fg: var(--primary-foreground, #ffffff);
190
227
  --button-second-bg: var(
191
228
  --box-box-theme-secondarybackground,
192
229
  var(--aviala-primary-primary-4, #ffe9e5)
@@ -195,12 +232,12 @@
195
232
  --text-text-theme-primary-black,
196
233
  var(--aviala-primary-primary-10, #bf2300)
197
234
  );
198
- --button-default-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
235
+ --button-default-bg: var(--control-control-normal-lightbackground-1, #f0efef);
199
236
  --button-default-fg: var(
200
237
  --text-text-theme-primary-black,
201
238
  var(--aviala-primary-primary-10, #bf2300)
202
239
  );
203
- --button-default-custom-fg: var(--text-text-normal-text-black, #343333);
240
+ --button-default-custom-fg: var(--text-text-normal-text-black, #262525);
204
241
  --button-no-bg-fg: var(
205
242
  --text-text-theme-primary-black,
206
243
  var(--aviala-primary-primary-10, #bf2300)
@@ -209,31 +246,31 @@
209
246
  --control-control-fail-background,
210
247
  var(--aviala-error-error-8, #ff646f)
211
248
  );
212
- --button-destructive-fg: var(--destructive-foreground, #fefcfc);
249
+ --button-destructive-fg: var(--destructive-foreground, #ffffff);
213
250
 
214
- /* Button hover/active — ALD palette steps (primary-7 hover, primary-9 press) */
215
- --button-primary-bg-hover: var(--aviala-primary-primary-7, #ffab98);
216
- --button-primary-bg-active: var(--aviala-primary-primary-9, #e92d00);
251
+ /* Button hover/active — Figma matrix: primary hover darker / active lighter */
252
+ --button-primary-bg-hover: var(--aviala-primary-primary-9, #e92d00);
253
+ --button-primary-bg-active: var(--aviala-primary-primary-7, #ff7b5b);
254
+ --button-destructive-bg-hover: var(--aviala-error-error-9, #e0003d);
255
+ --button-destructive-bg-active: var(--aviala-error-error-7, #ff6b8a);
217
256
  --button-hover-brightness: 1.05;
218
257
  --button-active-brightness: 0.95;
219
258
  --button-second-bg-hover: var(--aviala-primary-primary-5, #ffc5b9);
220
- --button-default-bg-hover: var(--aviala-neutral-neutral-6, #edebeb);
221
- /* noBackground — theme palette -2 hover, -5 press */
222
- --button-no-bg-hover: var(
223
- --control-control-theme-lightbackground,
224
- var(--aviala-primary-primary-2, #fff9f8)
225
- );
226
- --button-no-bg-active: var(--aviala-primary-primary-5, #ffc5b9);
227
- /* noBackgroundCustom — neutral-4 hover, neutral-5 press */
228
- --button-no-bg-custom-hover: var(--aviala-neutral-neutral-4, #faf8f8);
229
- --button-no-bg-custom-active: var(--aviala-neutral-neutral-5, #f5f3f3);
259
+ --button-second-bg-active: var(--aviala-primary-primary-6, #ffab98);
260
+ --button-default-bg-hover: var(--aviala-interaction-filled-hover, #e5e4e3);
261
+ --button-default-bg-active: var(--aviala-interaction-filled-hover, #e5e4e3);
262
+ /* Ghost / outline — Figma: neutral-3 hover, lightBackground-1 active */
263
+ --button-no-bg-hover: var(--aviala-interaction-ghost-hover, #f9f8f8);
264
+ --button-no-bg-active: var(--aviala-interaction-ghost-active, #f0efef);
265
+ --button-no-bg-custom-hover: var(--aviala-interaction-ghost-hover, #f9f8f8);
266
+ --button-no-bg-custom-active: var(--aviala-interaction-ghost-active, #f0efef);
230
267
  /* outline / outlineCustom — Figma Mode=Outline(-Custom); 1px outside stroke */
231
- --button-outline-border: var(--border-border-normal-primary, #e2e0e0);
268
+ --button-outline-border: var(--border-border-normal-3, #d6d5d4);
232
269
  --button-outline-fg: var(
233
270
  --text-text-theme-primary-black,
234
271
  var(--aviala-primary-primary-10, #bf2300)
235
272
  );
236
- --button-outline-custom-fg: var(--text-text-normal-text-black, #343333);
273
+ --button-outline-custom-fg: var(--text-text-normal-text-black, #262525);
237
274
  --button-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
238
275
  --button-icon-slot-height: var(--line-height-regular, 1.125rem);
239
276
 
@@ -296,9 +333,9 @@
296
333
  --icon-size-caption: var(--size-small, 0.75rem);
297
334
  --icon-size-caption-bigger: var(--size-regular, 0.875rem);
298
335
 
299
- --input-bg-default: var(--control-control-normal-lightbackground-light, #f5f3f3);
300
- --input-bg-hover: var(--control-control-normal-background-deep, #e2e0e0);
301
- --input-bg-activated: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
336
+ --input-bg-default: var(--aviala-interaction-filled-default, #f0efef);
337
+ --input-bg-hover: var(--aviala-interaction-filled-hover, #e5e4e3);
338
+ --input-bg-activated: var(--control-control-normal-background-whiteonly, #ffffff);
302
339
  --input-border-activated: var(--border-border-theme-primary, var(--primary));
303
340
  --input-fg: var(--text-text-normal-text-black, var(--foreground));
304
341
  --input-placeholder-opacity: var(--transparency-placeholder, 0.6);
@@ -325,30 +362,30 @@
325
362
  --textarea-min-height-big: 70px;
326
363
  --textarea-min-width: var(--button-min-width, 46px);
327
364
  --textarea-radius: var(--border-radius-small, 8px);
328
- --textarea-controller-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
329
- --textarea-counter-fg: var(--text-text-normal-text-caption-black, #858484);
365
+ --textarea-controller-bg: var(--control-control-normal-lightbackground-1, #f0efef);
366
+ --textarea-counter-fg: var(--text-text-normal-text-caption-black, #616060);
330
367
 
331
368
  --radio-size: var(--size-big, 1.25rem);
332
369
  --radio-indicator-size: 0.5rem;
333
- --radio-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
334
- --radio-border-unchecked: var(--border-border-normal-light, #e8e6e6);
370
+ --radio-bg-unchecked: var(--control-control-normal-background-whiteonly, #ffffff);
371
+ --radio-border-unchecked: var(--border-border-normal-1, #e8e6e6);
335
372
  --radio-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
336
- --radio-indicator-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
373
+ --radio-indicator-bg: var(--control-control-normal-background-whiteonly, #ffffff);
337
374
  --radio-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
338
375
  --radio-input-gap: var(--gap-component-space, 8px);
339
376
  --radio-group-gap: var(--gap-content-space, 10px);
340
- --radio-label-fg: var(--text-text-normal-text-black, #343333);
341
- --radio-caption-fg: var(--text-text-normal-text-caption-black, #858484);
377
+ --radio-label-fg: var(--text-text-normal-text-black, #262525);
378
+ --radio-caption-fg: var(--text-text-normal-text-caption-black, #616060);
342
379
  --radio-card-border-selected: var(--border-border-theme-primary, #ff5532);
343
- --radio-card-hover-bg: var(--aviala-neutral-neutral-4, #faf8f8);
344
- --radio-card-press-bg: var(--aviala-neutral-neutral-6, #edebeb);
380
+ --radio-card-hover-bg: var(--aviala-interaction-filled-hover, #e5e4e3);
381
+ --radio-card-press-bg: var(--aviala-interaction-filled-active, #d6d5d4);
345
382
  --radio-disabled-opacity: var(--input-disabled-opacity, 0.55);
346
383
 
347
- --select-menu-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
348
- --select-menu-border: var(--border-border-normal-light, #f5f3f3);
384
+ --select-menu-bg: var(--control-control-normal-background-whiteonly, #ffffff);
385
+ --select-menu-border: var(--border-border-normal-1, #f0efef);
349
386
  --select-menu-radius: var(--border-radius-middle, 10px);
350
- --select-menu-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
351
- --select-item-highlight-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
387
+ --select-menu-shadow: var(--aviala-shadow-level4-with-line);
388
+ --select-item-highlight-bg: var(--aviala-interaction-filled-hover, #e5e4e3);
352
389
  --select-item-selected-bg: var(--box-box-theme-secondarybackground, #ffdad2);
353
390
  --select-item-selected-fg: var(--text-text-theme-primary-black, #bf2300);
354
391
  --select-item-checked-bg: var(--box-box-theme-lightbackground, #fff3f0);
@@ -357,14 +394,14 @@
357
394
  --select-item-subtitle-fg: var(--select-label-fg);
358
395
  --select-item-subtitle-font-size: var(--select-label-font-size);
359
396
  --select-item-subtitle-line-height: var(--select-label-line-height);
360
- --select-label-fg: var(--text-text-normal-text-caption-black, #858484);
397
+ --select-label-fg: var(--text-text-normal-text-caption-black, #616060);
361
398
  --select-menu-py: var(--gap-inside-space, 6px);
362
399
  --select-group-gap: var(--gap-inside, 4px);
363
400
  --select-group-px: var(--gap-inside-space, 6px);
364
401
  --select-slot-gap: var(--gap-inside, 4px);
365
402
  --select-item-font-size: var(--input-font-size);
366
403
  --select-item-line-height: var(--input-line-height);
367
- --select-item-fg: var(--text-text-normal-text-black, #343333);
404
+ --select-item-fg: var(--text-text-normal-text-black, #262525);
368
405
  --select-item-gap: var(--gap-component-space, 8px);
369
406
  --select-item-px: var(--padding-default, 8px);
370
407
  --select-item-py: var(--padding-tiny, 4px);
@@ -434,25 +471,27 @@
434
471
  --checkbox-check-duration: 300ms;
435
472
  --checkbox-check-easing: cubic-bezier(0.873, 0, 0, 1);
436
473
  --checkbox-surface-easing: ease;
437
- --checkbox-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
438
- --checkbox-border-unchecked: var(--border-border-normal-primary, #e2e0e0);
474
+ --checkbox-bg-unchecked: var(--control-control-normal-background-whiteonly, #ffffff);
475
+ --checkbox-border-unchecked: var(--border-border-normal-3, #d6d5d4);
439
476
  --checkbox-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
440
- --checkbox-checked-icon: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
477
+ --checkbox-checked-icon: var(--control-control-normal-background-whiteonly, #ffffff);
441
478
  --checkbox-indeterminate-bg: var(--box-box-theme-secondarybackground, #ffdad2);
442
479
  --checkbox-indeterminate-mark-bg: var(--box-box-theme-primarybackground, #ff5532);
443
480
  --checkbox-input-gap: var(--gap-component-space, 8px);
444
481
  --checkbox-group-gap: var(--gap-content-space, 10px);
445
- --checkbox-label-fg: var(--text-text-normal-text-black, #343333);
446
- --checkbox-caption-fg: var(--text-text-normal-text-caption-black, #858484);
482
+ --checkbox-label-fg: var(--text-text-normal-text-black, #262525);
483
+ --checkbox-caption-fg: var(--text-text-normal-text-caption-black, #616060);
447
484
  --checkbox-disabled-opacity: var(--input-disabled-opacity, 0.55);
448
485
  --switch-width: 34px;
449
486
  --switch-height-regular: 22px;
450
487
  --switch-height-small: 20px;
451
- --switch-track-bg: var(--control-control-normal-background-deep, #e2e0e0);
452
- --switch-hover-bg: var(--aviala-neutral-neutral-8, #d2d0d0);
453
- --switch-press-bg: var(--aviala-neutral-neutral-9, #bebcbc);
488
+ --switch-track-bg: var(--control-control-normal-background-3, #d6d5d4);
489
+ --switch-hover-bg: var(--aviala-neutral-neutral-7, #c4c2c2);
490
+ --switch-press-bg: var(--aviala-neutral-neutral-8, #afadad);
454
491
  --switch-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
455
- --switch-thumb-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
492
+ --switch-checked-bg-hover: var(--button-primary-bg-hover);
493
+ --switch-checked-bg-active: var(--button-primary-bg-active);
494
+ --switch-thumb-bg: var(--control-control-normal-background-whiteonly, #ffffff);
456
495
  --switch-thumb-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
457
496
  --switch-thumb-size-regular: 18px;
458
497
  --switch-thumb-size-small: 16px;
@@ -472,15 +511,16 @@
472
511
  --link-fg-theme: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
473
512
  --link-fg-custom: var(--text-text-normal-text-black, var(--button-default-custom-fg));
474
513
 
475
- --segmentator-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
476
- --segmentator-selected-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
514
+ --segmentator-bg: var(--control-control-normal-lightbackground-1, #f0efef);
515
+ --segmentator-selected-bg: var(--control-control-normal-background-whiteonly, #ffffff);
477
516
  --segmentator-selected-fg: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
478
517
  --segmentator-fg: var(--text-text-normal-text-black, var(--button-default-custom-fg));
479
518
  --segmentator-tiled-bg: var(--box-box-theme-secondarybackground, var(--button-second-bg));
480
519
  --segmentator-shadow-selected: 0 4px 8px rgba(0, 0, 0, 0.06);
481
520
  --segmentator-shadow-tiled: inset 0 -0.5px 0
482
521
  var(--special-effort-se-lineshadow-bottom, rgba(0, 0, 0, 0.04));
483
- --segmentator-item-hover-bg: var(--aviala-neutral-neutral-6, #edebeb);
522
+ --segmentator-item-hover-bg: var(--aviala-interaction-filled-hover, #e5e4e3);
523
+ --segmentator-item-active-bg: var(--aviala-interaction-filled-active, #d6d5d4);
484
524
  --segmentator-press-scale: 0.98;
485
525
  --segmentator-press-height-scale: 0.88;
486
526
  --segmentator-press-transition-duration: var(--segmentator-transition-duration, 0.52s);
@@ -491,20 +531,20 @@
491
531
  --segmentator-haptic-press-ms: 20;
492
532
  --segmentator-haptic-select-ms: 16;
493
533
 
494
- --badge-bg: var(--control-control-normal-lightbackground-deep, #fdfbfb);
534
+ --badge-bg: var(--control-control-normal-lightbackground-2, #e5e4e3);
495
535
  --badge-gap: var(--padding-min, 2px);
496
536
  --badge-px: var(--padding-tiny, 4px);
497
537
  --badge-radius: var(--border-radius-extra-small-2, 6px);
498
- --badge-fg: var(--text-text-normal-text-black, #343333);
538
+ --badge-fg: var(--text-text-normal-text-black, #262525);
499
539
  --badge-icon-slot-height: var(--line-height-small, 1rem);
500
540
  --badge-icon-size: var(--icon-size-caption, 0.75rem);
501
541
 
502
542
  --avatar-bg: var(--text-text-theme-secondary-black, #ff8368);
503
- --avatar-fg: var(--text-text-normal-text-black, #343333);
543
+ --avatar-fg: var(--text-text-normal-text-black, #262525);
504
544
 
505
- --tag-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
506
- --tag-border: var(--border-border-normal-light, #f5f3f3);
507
- --tag-fg: var(--text-text-normal-text-caption-black, #858484);
545
+ --tag-bg: var(--box-box-normal-background-whiteonly, #ffffff);
546
+ --tag-border: var(--border-border-normal-1, #f0efef);
547
+ --tag-fg: var(--text-text-normal-text-caption-black, #616060);
508
548
  --tag-gap: var(--padding-tiny, 4px);
509
549
  --tag-px: var(--padding-min, 2px);
510
550
  --tag-radius: var(--border-radius-extra-small-2, 6px);
@@ -515,21 +555,21 @@
515
555
  --progress-bar-height: 4px;
516
556
  --progress-bar-height-big: 6px;
517
557
  --progress-label-width: 22px;
518
- --progress-label-fg: var(--text-text-normal-text-caption-black, #858484);
519
- --progress-track-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
520
- --progress-track-border: var(--border-border-normal-light, #f5f3f3);
558
+ --progress-label-fg: var(--text-text-normal-text-caption-black, #616060);
559
+ --progress-track-bg: var(--box-box-normal-background-whiteonly, #ffffff);
560
+ --progress-track-border: var(--border-border-normal-1, #f0efef);
521
561
  --progress-ring-size: 16px;
522
562
 
523
563
  --scroll-size: 10px;
524
564
  --scroll-size-small: 8px;
525
- --scroll-thumb-bg: var(--control-control-normal-background-deep, #e2e0e0);
565
+ --scroll-thumb-bg: var(--control-control-normal-background-3, #d6d5d4);
526
566
  --scroll-track-padding-y: var(--padding-tiny, 4px);
527
567
  --scroll-track-padding-x: var(--padding-min, 2px);
528
568
  --scroll-thumb-inset: 2px;
529
569
  --scroll-thumb-inset-small: 1px;
530
570
 
531
- --table-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
532
- --table-border: var(--border-border-normal-light, #f5f3f3);
571
+ --table-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
572
+ --table-border: var(--border-border-normal-1, #f0efef);
533
573
  --table-radius: var(--border-radius-middle, 10px);
534
574
  --table-head-height: 38px;
535
575
  --table-cell-height: 50px;
@@ -538,8 +578,8 @@
538
578
  --table-cell-gap: var(--gap-component-space, 8px);
539
579
  --table-checkbox-col-width: 40px;
540
580
  --table-cell-icon-size: var(--icon-size-text-bigger, 1rem);
541
- --table-head-fg: var(--text-text-normal-text-caption-black, #858484);
542
- --table-cell-fg: var(--text-text-normal-text-black, #343333);
581
+ --table-head-fg: var(--text-text-normal-text-caption-black, #616060);
582
+ --table-cell-fg: var(--text-text-normal-text-black, #262525);
543
583
 
544
584
  --color-picker-panel-width: 370px;
545
585
  --color-picker-area-height: 160px;
@@ -553,9 +593,9 @@
553
593
  --color-picker-panel-shadow: var(--select-menu-shadow);
554
594
  --color-picker-panel-gap: var(--gap-content-space, 10px);
555
595
  --color-picker-panel-px: var(--padding-default, 8px);
556
- --color-picker-thumb-border: var(--border-border-normal-primary, #e2e0e0);
557
- --color-picker-checkerboard-light: #e2e0e0;
558
- --color-picker-checkerboard-dark: #fefcfc;
596
+ --color-picker-thumb-border: var(--border-border-normal-3, #d6d5d4);
597
+ --color-picker-checkerboard-light: #d6d5d4;
598
+ --color-picker-checkerboard-dark: #ffffff;
559
599
 
560
600
  --datepicker-trigger-min-width: 46px;
561
601
  --datepicker-panel-width: 290px;
@@ -568,7 +608,7 @@
568
608
  --datepicker-panel-py: var(--padding-default, 8px);
569
609
  --datepicker-header-gap: 5px;
570
610
  --datepicker-header-fg: var(--select-item-fg);
571
- --datepicker-weekday-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
611
+ --datepicker-weekday-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
572
612
  --datepicker-weekday-height: 18px;
573
613
  --datepicker-weekday-fg: var(--select-label-fg);
574
614
  --datepicker-grid-gap: 4px;
@@ -580,7 +620,7 @@
580
620
  --datepicker-day-bg-in-range: var(--control-theme-lightbackground, #ffdad2);
581
621
  --datepicker-day-bg-selected: var(--control-theme-lightbackground, #ffdad2);
582
622
  --datepicker-day-today-dot: var(--text-text-theme-primary-black, #bf2300);
583
- --datepicker-footer-bg: var(--control-normal-lightbackground-light, #f5f3f3);
623
+ --datepicker-footer-bg: var(--control-control-normal-lightbackground-1, #f0efef);
584
624
  --datepicker-grid-rows: 6;
585
625
  --datepicker-day-height: calc(
586
626
  var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 1.125rem)
@@ -617,18 +657,18 @@
617
657
  --popover-content-px: var(--padding-default, 8px);
618
658
  --popover-content-py: var(--padding-default, 8px);
619
659
  --popover-content-max-width: 320px;
620
- --popover-content-arrow-stroke: var(--border-border-normal-light, #f5f3f3);
660
+ --popover-content-arrow-stroke: var(--border-border-normal-1, #f0efef);
621
661
 
622
662
  /* Modal — Figma Information Display → Modal (553:58593) */
623
663
  --modal-overlay-bg: rgba(0, 0, 0, 0.45);
624
664
  --modal-content-width: 260px;
625
665
  --modal-content-width-large: 480px;
626
666
  --modal-content-max-width: calc(100vw - 32px);
627
- --modal-content-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
628
- --modal-content-fg: var(--text-text-normal-text-black, #343333);
629
- --modal-content-border: var(--border-border-normal-light, #f5f3f3);
667
+ --modal-content-bg: var(--box-box-normal-background-whiteonly, #ffffff);
668
+ --modal-content-fg: var(--text-text-normal-text-black, #262525);
669
+ --modal-content-border: var(--border-border-normal-1, #f0efef);
630
670
  --modal-content-radius: var(--border-radius-big, 12px);
631
- --modal-content-shadow: 0 8px 24px 2px rgba(0, 0, 0, 0.06);
671
+ --modal-content-shadow: var(--aviala-shadow-level4-with-line);
632
672
  --modal-header-bg: var(--modal-content-bg);
633
673
  --modal-header-pl: var(--padding-big, 14px);
634
674
  --modal-header-pr: var(--padding-small, 6px);
@@ -637,7 +677,7 @@
637
677
  --modal-header-gap: var(--gap-content-space, 10px);
638
678
  --modal-section-px: var(--padding-big, 14px);
639
679
  --modal-section-py: var(--padding-default, 8px);
640
- --modal-section-border: var(--border-border-normal-light, #f5f3f3);
680
+ --modal-section-border: var(--border-border-normal-1, #f0efef);
641
681
  --modal-body-bg: var(--modal-content-bg);
642
682
  --modal-footer-bg: var(--modal-content-bg);
643
683
  --modal-footer-gap: var(--gap-content-space, 10px);
@@ -647,13 +687,13 @@
647
687
  --modal-icon-py: var(--padding-min, 2px);
648
688
  --modal-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
649
689
  --modal-close-icon-size: var(--size-middle, 1rem);
650
- --modal-close-fg: var(--text-text-normal-text-caption-black, #858484);
651
- --modal-description-fg: var(--text-text-normal-text-caption-black, #858484);
690
+ --modal-close-fg: var(--text-text-normal-text-caption-black, #616060);
691
+ --modal-description-fg: var(--text-text-normal-text-caption-black, #616060);
652
692
 
653
- --tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #343333));
693
+ --tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #262525));
654
694
  --tooltip-content-fg: var(
655
- --control-control-normal-lightbackground-whiteonly,
656
- var(--aviala-neutral-neutral-2, #fefcfc)
695
+ --control-control-normal-background-whiteonly,
696
+ var(--aviala-neutral-neutral-2, #ffffff)
657
697
  );
658
698
  --tooltip-content-radius: var(--border-radius-small, 8px);
659
699
  --tooltip-content-px: var(--padding-default, 8px);
@@ -661,31 +701,36 @@
661
701
  --tooltip-content-max-width: 240px;
662
702
  --tooltip-content-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
663
703
 
664
- --list-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
704
+ --list-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
665
705
  --list-gap: var(--gap-component-space, 8px);
666
706
  --list-title-px: 12px;
667
- --list-title-fg: var(--text-text-normal-text-black, #343333);
707
+ --list-title-fg: var(--text-text-normal-text-black, #262525);
668
708
  --list-group-radius: var(--border-radius-middle, 10px);
669
709
  --list-item-radius: var(--border-radius-small, 8px);
670
- --list-item-fg: var(--text-text-normal-text-black, #343333);
710
+ --list-item-fg: var(--text-text-normal-text-black, #262525);
671
711
  --list-item-block-gap: var(--gap-block-space, 14px);
672
712
  --list-item-pl: var(--padding-big, 14px);
673
713
  --list-item-icon-py: var(--padding-default, 8px);
674
714
  --list-item-content-py: var(--padding-default, 8px);
675
715
  --list-item-content-pr: var(--padding-big, 14px);
676
716
  --list-item-content-gap: var(--gap-content-space, 10px);
677
- --list-item-border: var(--border-border-normal-light, #f5f3f3);
717
+ /* Figma List item Content top border + last separator: border/border-normal-2 */
718
+ --list-item-border: var(--border-border-normal-2, #f0efef);
678
719
  --list-item-icon-shaped-size: 36px;
679
720
  --list-item-icon-default-size: 22px;
680
721
  --list-item-icon-shaped-bg: var(--box-box-theme-primarybackground, #ff5532);
681
722
  --list-item-icon-shaped-fg: var(
682
- --control-control-normal-lightbackground-whiteonly,
683
- #fefcfc
723
+ --control-control-normal-background-whiteonly,
724
+ #ffffff
684
725
  );
685
726
  --list-item-trailing-gap: 10px;
686
727
  --list-item-divider-height: 14px;
687
728
  --list-item-select-width: 143px;
688
- --list-item-highlight-bg: var(--select-item-highlight-bg);
729
+ --list-item-highlight-bg: var(
730
+ --aviala-interaction-filled-hover,
731
+ var(--select-item-highlight-bg)
732
+ );
733
+ --list-item-active-bg: var(--aviala-interaction-filled-active, #d6d5d4);
689
734
  --list-item-selected-bg: var(--select-item-selected-bg);
690
735
  --list-item-selected-fg: var(--select-item-selected-fg);
691
736
  --list-item-disabled-opacity: var(--input-disabled-opacity, 0.55);
@@ -702,10 +747,10 @@
702
747
  --tab-item-control-radius: var(--border-radius-small, 8px);
703
748
  --tab-icon-box: 18px;
704
749
  --tab-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
705
- --tab-fg: var(--text-text-normal-text-black, #343333);
706
- --tab-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
707
- --tab-bg-card: var(--control-control-normal-lightbackground-light, #f5f3f3);
708
- --tab-card-active-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
750
+ --tab-fg: var(--text-text-normal-text-black, #262525);
751
+ --tab-bg: var(--box-box-normal-background-whiteonly, #ffffff);
752
+ --tab-bg-card: var(--control-control-normal-lightbackground-1, #f0efef);
753
+ --tab-card-active-bg: var(--box-box-normal-background-whiteonly, #ffffff);
709
754
  --tab-card-ear-size: 8px;
710
755
  --tab-indicator-height: 4px;
711
756
  --tab-indicator-inset-inline: 12px;
@@ -717,17 +762,17 @@
717
762
  cubic-bezier(0.16, 1, 0.3, 1)
718
763
  );
719
764
 
720
- --navigation-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
765
+ --navigation-bg: var(--box-box-normal-background-whiteonly, #ffffff);
721
766
  --navigation-gap: var(--gap-content-space, 10px);
722
767
  --navigation-py: var(--padding-big, 14px);
723
768
  --navigation-height-horizontal: 48px;
724
769
  --navigation-px-horizontal: var(--padding-large, 18px);
725
- --navigation-divider: var(--border-border-normal-light, #f5f3f3);
770
+ --navigation-divider: var(--border-border-normal-1, #f0efef);
726
771
  --navigation-brand-px: var(--padding-big, 14px);
727
772
  --navigation-brand-title-height: 26px;
728
- --navigation-brand-fg: var(--text-text-normal-text-black, #343333);
773
+ --navigation-brand-fg: var(--text-text-normal-text-black, #262525);
729
774
  --navigation-section-px: var(--gap-inside-space, 6px);
730
- --navigation-section-fg: var(--muted-foreground, #858484);
775
+ --navigation-section-fg: var(--muted-foreground, #616060);
731
776
  --navigation-group-gap: var(--gap-inside-space, 6px);
732
777
  --navigation-group-gap-horizontal: var(--gap-inside-space, 6px);
733
778
  --navigation-item-px: var(--padding-default, 8px);
@@ -763,11 +808,11 @@
763
808
  --text-text-theme-primary-black,
764
809
  var(--button-no-bg-fg)
765
810
  );
766
- --loading-fg-black: var(--text-text-normal-text-black, #343333);
767
- --loading-fg-white: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
811
+ --loading-fg-black: var(--text-text-normal-text-black, #262525);
812
+ --loading-fg-white: var(--control-control-normal-background-whiteonly, #ffffff);
768
813
 
769
814
  /* Feedback — Figma Response And Feedback → Feedback (553:58620) */
770
- --feedback-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
815
+ --feedback-shadow: var(--aviala-shadow-level4-with-line);
771
816
  --feedback-radius-default: var(--border-radius-middle, 10px);
772
817
  --feedback-radius-small: var(--border-radius-allround, 99px);
773
818
  --feedback-body-gap: var(--gap-component-space, 8px);
@@ -778,13 +823,13 @@
778
823
  --feedback-close-icon-size: var(--size-middle, 1rem);
779
824
  --feedback-close-icon-size-primary: var(--size-regular, 0.875rem);
780
825
  --feedback-content-max-width: 480px;
781
- --feedback-title-fg-default: var(--text-text-normal-text-black, #343333);
782
- --feedback-description-fg-default: var(--text-text-normal-text-caption-black, #858484);
783
- --feedback-title-fg-primary: var(--text-text-normal-text-white, #fefcfc);
784
- --feedback-description-fg-primary: var(--text-text-normal-text-caption-white, #fefcfc);
785
- --feedback-close-fg: var(--text-text-normal-text-caption-black, #858484);
786
- --feedback-close-fg-on-primary: var(--text-text-normal-text-white, #fefcfc);
787
- --feedback-icon-fg-primary: var(--text-text-normal-text-white, #fefcfc);
826
+ --feedback-title-fg-default: var(--text-text-normal-text-black, #262525);
827
+ --feedback-description-fg-default: var(--text-text-normal-text-caption-black, #616060);
828
+ --feedback-title-fg-primary: var(--text-text-normal-text-white, #ffffff);
829
+ --feedback-description-fg-primary: var(--text-text-normal-text-caption-white, #ffffff);
830
+ --feedback-close-fg: var(--text-text-normal-text-caption-black, #616060);
831
+ --feedback-close-fg-on-primary: var(--text-text-normal-text-white, #ffffff);
832
+ --feedback-icon-fg-primary: var(--text-text-normal-text-white, #ffffff);
788
833
  --feedback-information-bg-default: var(--box-box-infomation-lightbackground, #fafbff);
789
834
  --feedback-information-bg-primary: var(--box-box-infomation-primarybackground, #66b6fa);
790
835
  --feedback-information-border: var(--border-border-infomation-primary, #66b6fa);
@@ -797,13 +842,13 @@
797
842
  --feedback-success-bg-default: var(--box-box-success-lightbackground, #f4fde9);
798
843
  --feedback-success-bg-primary: var(--box-box-success-primarybackground, #70b450);
799
844
  --feedback-success-border: var(--border-border-success-primary, #70b450);
800
- --feedback-normal-bg-default: var(--box-box-normal-background-whiteonly, #fefcfc);
801
- --feedback-normal-border: var(--border-border-normal-light, #f5f3f3);
845
+ --feedback-normal-bg-default: var(--box-box-normal-background-whiteonly, #ffffff);
846
+ --feedback-normal-border: var(--border-border-normal-1, #f0efef);
802
847
  --feedback-information-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
803
848
  --feedback-warning-icon-fg: var(--text-text-warning-primary-black, #ab6200);
804
849
  --feedback-wrong-icon-fg: var(--text-text-fail-primary-black, #960024);
805
850
  --feedback-success-icon-fg: var(--text-text-success-primary-black, #47842b);
806
- --feedback-normal-icon-fg: var(--text-text-normal-text-caption-black, #858484);
851
+ --feedback-normal-icon-fg: var(--text-text-normal-text-caption-black, #616060);
807
852
 
808
853
  /* Alert — Figma Response And Feedback → Alert (527:56855) */
809
854
  --alert-radius: var(--border-radius-small, 8px);
@@ -812,10 +857,10 @@
812
857
  --alert-body-py: var(--padding-small, 6px);
813
858
  --alert-icon-size: var(--size-middle, 1rem);
814
859
  --alert-icon-slot-height: var(--line-height-regular, 1.125rem);
815
- --alert-title-fg: var(--text-text-normal-text-black, #343333);
816
- --alert-description-fg: var(--text-text-normal-text-caption-black, #858484);
817
- --alert-close-fg: var(--text-text-normal-text-caption-black, #858484);
818
- --alert-secondary-action-fg: var(--text-text-normal-text-caption-black, #858484);
860
+ --alert-title-fg: var(--text-text-normal-text-black, #262525);
861
+ --alert-description-fg: var(--text-text-normal-text-caption-black, #616060);
862
+ --alert-close-fg: var(--text-text-normal-text-caption-black, #616060);
863
+ --alert-secondary-action-fg: var(--text-text-normal-text-caption-black, #616060);
819
864
  --alert-actions-gap: var(--gap-component-space, 8px);
820
865
  --alert-actions-pl: 30px;
821
866
  --alert-actions-pr: var(--gap-content-space, 10px);
@@ -832,14 +877,14 @@
832
877
  --alert-success-bg-default: var(--box-box-success-lightbackground, #f4fde9);
833
878
  --alert-success-bg-light: var(--box-box-success-secondarybackground, #dff6ce);
834
879
  --alert-success-border: var(--border-border-success-primary, #70b450);
835
- --alert-neutral-bg-default: var(--box-box-normal-background-whiteonly, #fefcfc);
836
- --alert-neutral-bg-light: var(--box-box-normal-lightbackground-white, #fdfbfb);
837
- --alert-neutral-border: var(--border-border-normal-light, #f5f3f3);
880
+ --alert-neutral-bg-default: var(--box-box-normal-background-whiteonly, #ffffff);
881
+ --alert-neutral-bg-light: var(--box-box-normal-lightbackground-white, #f9f8f8);
882
+ --alert-neutral-border: var(--border-border-normal-1, #f0efef);
838
883
  --alert-info-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
839
884
  --alert-warning-icon-fg: var(--text-text-warning-primary-black, #ab6200);
840
885
  --alert-error-icon-fg: var(--text-text-fail-primary-black, #960024);
841
886
  --alert-success-icon-fg: var(--text-text-success-primary-black, #47842b);
842
- --alert-neutral-icon-fg: var(--text-text-normal-text-caption-black, #858484);
887
+ --alert-neutral-icon-fg: var(--text-text-normal-text-caption-black, #616060);
843
888
 
844
889
  /* Keyboard focus ring — Tab focus: ring 12px→3px, flush outer border, 250ms */
845
890
  --focus-ring-width-start: var(--size-small, 0.75rem);
@@ -864,17 +909,16 @@
864
909
  --slider-value-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
865
910
  --slider-pad-y: var(--padding-tinyer, 3px);
866
911
  /* Default & Big tracks share fill tokens; Big only differs by height/thumb.
867
- * Track fill ON: border-normal-primary; OFF: border-normal-light. No stroke. */
868
- --slider-track-bg: var(--border-border-normal-primary, #e2e0e0);
912
+ * Track fill ON: border-normal-3; OFF: border-normal-1. No stroke. */
913
+ --slider-track-bg: var(--border-border-normal-3, #d6d5d4);
869
914
  --slider-range-bg: var(--box-box-theme-primarybackground, #ff5532);
870
- --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
915
+ --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #ffffff);
871
916
  --slider-thumb-core: var(--box-box-theme-primarybackground, #ff5532);
872
917
  /* BasicShadow / BasicShadow-Level4WithLIne */
873
918
  --slider-thumb-shadow:
874
- 0 6px 18px rgba(0, 0, 0, 0.08),
875
- 0 0 1px rgba(0, 0, 0, 0.2);
919
+ var(--aviala-shadow-level4-with-line);
876
920
  /* Availability Status=OFF */
877
- --slider-track-bg-disabled: var(--border-border-normal-light, #f5f3f3);
921
+ --slider-track-bg-disabled: var(--border-border-normal-1, #f0efef);
878
922
  --slider-range-bg-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
879
923
  --slider-thumb-core-disabled: var(
880
924
  --box-box-theme-secondarybackground,
@@ -887,9 +931,9 @@
887
931
  --upload-large-gap: var(--gap-content-space, 10px);
888
932
  --upload-large-px: var(--padding-big, 14px);
889
933
  --upload-large-py: var(--padding-default, 8px);
890
- --upload-large-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
891
- --upload-large-fg: var(--text-text-normal-text-black, #343333);
892
- --upload-large-caption-fg: var(--text-text-normal-text-caption-black, #858484);
934
+ --upload-large-bg: var(--control-control-normal-lightbackground-1, #f0efef);
935
+ --upload-large-fg: var(--text-text-normal-text-black, #262525);
936
+ --upload-large-caption-fg: var(--text-text-normal-text-caption-black, #616060);
893
937
  --upload-drag-border: var(--border-border-theme-primary, #ff5532);
894
938
  --upload-drag-bg: var(--box-box-theme-secondarybackground, #ffdad2);
895
939
  --upload-disabled-opacity: var(--transparency-disable, 0.55);
@@ -897,17 +941,17 @@
897
941
  /* ScrollPicker — Figma Information Collect → ScrollPicker (579:88681) */
898
942
  --scroll-picker-width: 200px;
899
943
  --scroll-picker-height: 230px;
900
- --scroll-picker-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
901
- --scroll-picker-border: var(--border-border-normal-light, #f5f3f3);
944
+ --scroll-picker-bg: var(--box-box-normal-background-whiteonly, #ffffff);
945
+ --scroll-picker-border: var(--border-border-normal-1, #f0efef);
902
946
  --scroll-picker-radius: var(--border-radius-middle, 10px);
903
- --scroll-picker-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
947
+ --scroll-picker-shadow: var(--aviala-shadow-level4-with-line);
904
948
  --scroll-picker-column-px: var(--gap-inside-space, 6px);
905
949
  --scroll-picker-item-height: 26px;
906
950
  --scroll-picker-item-gap: var(--gap-inside, 4px);
907
951
  --scroll-picker-item-px: var(--padding-default, 8px);
908
952
  --scroll-picker-item-py: var(--padding-tiny, 4px);
909
953
  --scroll-picker-item-radius: var(--border-radius-extra-small-2, 6px);
910
- --scroll-picker-item-fg: var(--text-text-normal-text-black, #343333);
954
+ --scroll-picker-item-fg: var(--text-text-normal-text-black, #262525);
911
955
  --scroll-picker-item-fg-selected: var(--text-text-theme-primary-black, #bf2300);
912
956
  --scroll-picker-item-bg-selected: var(--control-control-theme-lightbackground, #ffdad2);
913
957
  --scroll-picker-item-opacity: var(--transparency-placeholder, 0.6);
@@ -918,16 +962,16 @@
918
962
  --breadcrumb-item-gap: var(--gap-inside, 4px);
919
963
  --breadcrumb-item-px: var(--padding-tiny, 4px);
920
964
  --breadcrumb-item-radius: var(--border-radius-extra-small-2, 6px);
921
- --breadcrumb-fg: var(--text-text-normal-text-black, #343333);
922
- --breadcrumb-fg-muted: var(--text-text-normal-text-caption-black, #858484);
965
+ --breadcrumb-fg: var(--text-text-normal-text-black, #262525);
966
+ --breadcrumb-fg-muted: var(--text-text-normal-text-caption-black, #616060);
923
967
  --breadcrumb-separator-opacity: var(--transparency-placeholder, 0.6);
924
968
  --breadcrumb-icon-size: 0.875rem;
925
969
  --breadcrumb-icon-size-small: 0.75rem;
926
970
  --breadcrumb-ellipsis-menu-width: 120px;
927
971
 
928
972
  /* Pagehead — Figma Structure Navigation → Pagehead (643:172156) */
929
- --pagehead-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
930
- --pagehead-border: var(--border-border-normal-light, #f5f3f3);
973
+ --pagehead-bg: var(--box-box-normal-background-whiteonly, #ffffff);
974
+ --pagehead-border: var(--border-border-normal-1, #f0efef);
931
975
  --pagehead-gap: var(--gap-content-space, 10px);
932
976
  --pagehead-px: var(--padding-large, 18px);
933
977
  --pagehead-title-gap: var(--gap-inside-space, 6px);
@@ -941,9 +985,9 @@
941
985
  --steps-item-gap: var(--gap-component-space, 8px);
942
986
  --steps-item-min-width: 120px;
943
987
  --steps-icon-size: var(--size-semilarge, 1.375rem);
944
- --steps-title-fg: var(--text-text-normal-text-black, #343333);
988
+ --steps-title-fg: var(--text-text-normal-text-black, #262525);
945
989
  /* Figma StepsItem description uses Typography Text (not Caption) */
946
- --steps-description-fg: var(--text-text-normal-text-black, #343333);
990
+ --steps-description-fg: var(--text-text-normal-text-black, #262525);
947
991
  --steps-done-bg: var(--box-box-success-secondarybackground, #dff6ce);
948
992
  --steps-done-fg: var(--text-text-success-primary-black, #47842b);
949
993
  --steps-fail-bg: var(--box-box-fail-secondarybackground, #ffdfdf);
@@ -954,10 +998,10 @@
954
998
  --steps-waiting-fg: var(--text-text-infomation-primary-black, #3489c8);
955
999
  --steps-in-progress-bg: var(--box-box-theme-primarybackground, #ff5532);
956
1000
  --steps-in-progress-fg: var(--text-text-theme-primary-black, #bf2300);
957
- --steps-in-progress-icon-fg: var(--text-text-normal-text-caption-white, #fefcfc);
958
- --steps-default-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
959
- --steps-default-border: var(--border-border-normal-light, #f5f3f3);
960
- --steps-default-fg: var(--text-text-normal-text-caption-black, #858484);
1001
+ --steps-in-progress-icon-fg: var(--text-text-normal-text-caption-white, #ffffff);
1002
+ --steps-default-bg: var(--box-box-normal-background-whiteonly, #ffffff);
1003
+ --steps-default-border: var(--border-border-normal-1, #f0efef);
1004
+ --steps-default-fg: var(--text-text-normal-text-caption-black, #616060);
961
1005
 
962
1006
  /* Pagination — Figma Structure Navigation → Pagination (791:146366) */
963
1007
  --pagination-gap: var(--gap-content-space, 10px);
@@ -968,7 +1012,7 @@
968
1012
  --pagination-page-active-px: var(--padding-middle, 10px);
969
1013
  --pagination-page-active-py: var(--padding-small, 6px);
970
1014
  --pagination-page-radius: var(--border-radius-small, 8px);
971
- --pagination-page-fg: var(--text-text-normal-text-black, #343333);
1015
+ --pagination-page-fg: var(--text-text-normal-text-black, #262525);
972
1016
  --pagination-page-active-bg: var(--box-box-theme-secondarybackground, #ffdad2);
973
1017
  --pagination-page-active-fg: var(--text-text-theme-primary-black, #bf2300);
974
1018
  --pagination-jump-gap: 4px;
@@ -976,7 +1020,7 @@
976
1020
  --pagination-size-select-width: 77px;
977
1021
 
978
1022
  /* Card — Figma Structure Navigation → Card (738:145715) */
979
- --card-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
1023
+ --card-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
980
1024
  --card-radius: var(--border-radius-middle, 10px);
981
1025
  --card-px: var(--padding-big, 14px);
982
1026
  --card-gap: var(--gap-content-space, 10px);
@@ -985,7 +1029,7 @@
985
1029
  --card-bottom-pt: var(--padding-tiny, 4px);
986
1030
  --card-bottom-pb: var(--padding-default, 8px);
987
1031
  --card-body-py: var(--padding-default, 8px);
988
- --card-fg: var(--text-text-normal-text-black, #343333);
1032
+ --card-fg: var(--text-text-normal-text-black, #262525);
989
1033
  --card-divider-height: 14px;
990
1034
  --card-trailing-gap: 10px;
991
1035
  }
@@ -1088,11 +1132,11 @@
1088
1132
  --typography-caption-weight-number: var(--font-weight-light, 300);
1089
1133
 
1090
1134
  --typography-title-fg: var(--text-text-normal-title-black, #000000);
1091
- --typography-title-fg-white: var(--text-text-normal-title-white, #fefcfc);
1092
- --typography-body-fg: var(--text-text-normal-text-black, #343333);
1093
- --typography-body-fg-white: var(--text-text-normal-text-white, #fefcfc);
1094
- --typography-caption-fg: var(--text-text-normal-text-caption-black, #858484);
1095
- --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #fefcfc);
1135
+ --typography-title-fg-white: var(--text-text-normal-title-white, #ffffff);
1136
+ --typography-body-fg: var(--text-text-normal-text-black, #262525);
1137
+ --typography-body-fg-white: var(--text-text-normal-text-white, #ffffff);
1138
+ --typography-caption-fg: var(--text-text-normal-text-caption-black, #616060);
1139
+ --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #ffffff);
1096
1140
 
1097
1141
  --typeface-gap: var(--gap-none, 0);
1098
1142
  }