@3dsource/source-ui-native 3.2.2 → 3.2.4

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 (23) hide show
  1. package/fesm2022/3dsource-source-ui-native.mjs +2 -2
  2. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/elements/_src-divider.scss +1 -1
  5. package/styles/elements/_src-input.scss +1 -1
  6. package/styles/elements/_src-modal.scss +2 -2
  7. package/styles/elements/_src-popover.scss +3 -3
  8. package/styles/elements/_src-select.scss +1 -1
  9. package/styles/elements/_src-textarea.scss +1 -1
  10. package/styles/source-ui-native.css +167 -159
  11. package/styles/source-ui-native.css.map +1 -1
  12. package/styles/source-ui-native.min.css +1 -1
  13. package/styles/variables/color/dark.scss +31 -30
  14. package/styles/variables/color/light.scss +31 -30
  15. package/styles/variables/layout/_lg.scss +17 -20
  16. package/styles/variables/layout/_md.scss +16 -19
  17. package/styles/variables/layout/_sm.scss +17 -20
  18. package/styles/variables/layout/_xl.scss +16 -19
  19. package/styles/variables/primitives/primitives.scss +33 -22
  20. package/styles/variables/ui/_lg.scss +7 -7
  21. package/styles/variables/ui/_md.scss +7 -7
  22. package/styles/variables/ui/_sm.scss +7 -7
  23. package/styles/variables/ui/_xl.scss +7 -7
package/styles/source-ui-native.css CHANGED
@@ -50,17 +50,17 @@
50
50
  --src-space-80: 320px;
51
51
  --src-space-96: 384px;
52
52
  --src-color-neutral-50: #fafafaff;
53
- --src-color-accent-50: #f1f6ffff;
54
- --src-color-accent-100: #d6e9ffff;
55
- --src-color-accent-200: #add4ffff;
56
- --src-color-accent-300: #7dbbffff;
57
- --src-color-accent-400: #4ea4ffff;
58
- --src-color-accent-500: #017bffff;
59
- --src-color-accent-600: #016fe6ff;
60
- --src-color-accent-700: #0162ccff;
61
- --src-color-accent-800: #014ca3ff;
62
- --src-color-accent-900: #003a7aff;
63
- --src-color-accent-950: #00244dff;
53
+ --src-color-primary-50: #f1f6ffff;
54
+ --src-color-primary-100: #d6e9ffff;
55
+ --src-color-primary-200: #add4ffff;
56
+ --src-color-primary-300: #7dbbffff;
57
+ --src-color-primary-400: #4ea4ffff;
58
+ --src-color-primary-500: #017bffff;
59
+ --src-color-primary-600: #016fe6ff;
60
+ --src-color-primary-700: #0162ccff;
61
+ --src-color-primary-800: #014ca3ff;
62
+ --src-color-primary-900: #003a7aff;
63
+ --src-color-primary-950: #00244dff;
64
64
  --src-color-neutral-100: #f5f5f5ff;
65
65
  --src-color-neutral-200: #e5e5e5ff;
66
66
  --src-color-neutral-300: #d4d4d4ff;
@@ -71,6 +71,28 @@
71
71
  --src-color-neutral-800: #262626ff;
72
72
  --src-color-neutral-900: #171717ff;
73
73
  --src-color-neutral-950: #0a0a0aff;
74
+ --src-color-secondary-50: #f4fbf7ff;
75
+ --src-color-secondary-100: #e8f8eeff;
76
+ --src-color-secondary-200: #cdf0dbff;
77
+ --src-color-secondary-300: #ace9c6ff;
78
+ --src-color-secondary-400: #86e1afff;
79
+ --src-color-secondary-500: #28d88eff;
80
+ --src-color-secondary-600: #1ca76dff;
81
+ --src-color-secondary-700: #148556ff;
82
+ --src-color-secondary-800: #0f6c45ff;
83
+ --src-color-secondary-900: #0a5737ff;
84
+ --src-color-secondary-950: #043922ff;
85
+ --src-color-tertiary-50: #eeece8ff;
86
+ --src-color-tertiary-100: #f5e9c9ff;
87
+ --src-color-tertiary-200: #f1d99aff;
88
+ --src-color-tertiary-300: #efc96aff;
89
+ --src-color-tertiary-400: #efa81bff;
90
+ --src-color-tertiary-500: #d18f17ff;
91
+ --src-color-tertiary-600: #b07212ff;
92
+ --src-color-tertiary-700: #8f5a0eff;
93
+ --src-color-tertiary-800: #6f450aff;
94
+ --src-color-tertiary-900: #4f3006ff;
95
+ --src-color-tertiary-950: #2e1a02ff;
74
96
  --src-color-grey-50: #f9fafbff;
75
97
  --src-color-grey-100: #f3f4f6ff;
76
98
  --src-color-grey-200: #e5e7ebff;
@@ -115,17 +137,6 @@
115
137
  --src-color-blue-800: #0e356cff;
116
138
  --src-color-blue-900: #10294cff;
117
139
  --src-color-blue-950: #051123ff;
118
- --src-color-orange-50: #fffbebff;
119
- --src-color-orange-100: #fef3c7ff;
120
- --src-color-orange-200: #fde68aff;
121
- --src-color-orange-300: #fcd34dff;
122
- --src-color-orange-400: #fbbf24ff;
123
- --src-color-orange-500: #f59b18ff;
124
- --src-color-orange-600: #d97706ff;
125
- --src-color-orange-700: #b45309ff;
126
- --src-color-orange-800: #92400eff;
127
- --src-color-orange-900: #78350fff;
128
- --src-color-orange-950: #451a03ff;
129
140
  --src-color-yellow-50: #fefdf0ff;
130
141
  --src-color-yellow-100: #fdfbe5ff;
131
142
  --src-color-yellow-200: #fbf7caff;
@@ -189,8 +200,9 @@
189
200
  /* color - light */
190
201
  :root {
191
202
  --src-surface-background: var(--src-color-grey-50);
192
- --src-ui-accent-default: var(--src-color-accent-500);
193
- --src-ui-accent-default-hover: var(--src-color-accent-600);
203
+ --src-surface-background-inverse: var(--src-color-grey-800);
204
+ --src-ui-accent-default: var(--src-color-primary-500);
205
+ --src-ui-accent-default-hover: var(--src-color-primary-600);
194
206
  --src-ui-accent-disabled: var(--src-color-alpha-test-200);
195
207
  --src-ui-accent-success: var(--src-color-green-500);
196
208
  --src-ui-accent-success-hover: var(--src-color-green-600);
@@ -208,7 +220,7 @@
208
220
  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
209
221
  --src-ui-secondary-error: var(--src-color-alpha-destruct-10);
210
222
  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
211
- --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
223
+ --src-ui-secondary-progress: var(--color-alpha-progress-10);
212
224
  --src-ui-input-default: var(--src-color-alpha-white-10);
213
225
  --src-ui-input-secondary: var(--src-color-alpha-default-10);
214
226
  --src-ui-input-hover: var(--src-color-alpha-accent-10);
@@ -225,8 +237,8 @@
225
237
  --src-border-control-hover: var(--src-color-neutral-500);
226
238
  --src-border-button-basic: var(--src-color-grey-200);
227
239
  --src-border-button-basic-hover: var(--src-color-grey-400);
228
- --src-border-button-info: var(--src-color-accent-300);
229
- --src-border-button-info-hover: var(--src-color-accent-500);
240
+ --src-border-button-info: var(--src-color-primary-300);
241
+ --src-border-button-info-hover: var(--src-color-primary-500);
230
242
  --src-border-button-success: var(--src-color-green-400);
231
243
  --src-border-button-success-hover: var(--src-color-green-500);
232
244
  --src-border-button-error: var(--src-color-red-300);
@@ -235,7 +247,7 @@
235
247
  --src-border-input-basic: var(--src-color-grey-300);
236
248
  --src-border-input-hover: var(--src-color-grey-400);
237
249
  --src-border-input-filled: var(--src-color-grey-300);
238
- --src-border-input-active: var(--src-color-accent-500);
250
+ --src-border-input-active: var(--src-color-primary-500);
239
251
  --src-border-input-success: var(--src-color-green-500);
240
252
  --src-border-input-success-hover: var(--src-color-green-600);
241
253
  --src-border-input-error: var(--src-color-red-500);
@@ -243,7 +255,7 @@
243
255
  --src-border-container-basic: var(--src-color-grey-300);
244
256
  --src-border-container-hover: var(--src-color-grey-400);
245
257
  --src-border-container-light: var(--src-color-alpha-default-50);
246
- --src-border-container-active: var(--src-color-accent-400);
258
+ --src-border-container-active: var(--src-color-primary-400);
247
259
  --src-border-container-success: var(--src-color-green-200);
248
260
  --src-border-container-error: var(--src-color-red-200);
249
261
  --src-text-body-main: var(--src-color-grey-900);
@@ -260,26 +272,26 @@
260
272
  --src-icon-disabled: var(--src-color-grey-400);
261
273
  --src-icon-main-invert: var(--src-light);
262
274
  --src-icon-secondary-invert: var(--src-color-grey-200);
263
- --src-icon-info: var(--src-color-accent-500);
264
- --src-icon-info-hover: var(--src-color-accent-600);
275
+ --src-icon-info: var(--src-color-primary-500);
276
+ --src-icon-info-hover: var(--src-color-primary-600);
265
277
  --src-icon-success: var(--src-color-green-600);
266
278
  --src-icon-success-hover: var(--src-color-green-700);
267
279
  --src-icon-error: var(--src-color-red-500);
268
280
  --src-icon-error-hover: var(--src-color-red-600);
269
- --src-icon-warning: var(--src-color-orange-600);
270
- --src-icon-warning-hover: var(--src-color-orange-700);
281
+ --src-icon-warning: var(--src-color-tertiary-600);
282
+ --src-icon-warning-hover: var(--src-color-tertiary-700);
271
283
  --src-icon-attention: var(--src-color-yellow-800);
272
284
  --src-icon-attention-hover: var(--src-color-yellow-900);
273
285
  --src-graphics-positive: var(--src-color-green-500);
274
286
  --src-graphics-negative: var(--src-color-red-500);
275
- --src-graphics-accent: var(--src-color-accent-500);
287
+ --src-graphics-accent: var(--src-color-primary-500);
276
288
  --src-graphics-dark-grey: var(--src-color-grey-500);
277
289
  --src-graphics-orange: #f5a80fff;
278
290
  --src-graphics-yellow: #f0e442ff;
279
291
  --src-graphics-turquoise: #00ced1ff;
280
292
  --src-graphics-brown: #8b4513ff;
281
293
  --src-graphics-black: var(--src-color-grey-700);
282
- --src-text-body-accent: var(--src-color-accent-600);
294
+ --src-text-body-accent: var(--src-color-primary-600);
283
295
  --src-text-body-success: var(--src-color-green-600);
284
296
  --src-text-body-destruct: var(--src-color-red-600);
285
297
  --src-text-ui-primary-main: var(--src-light);
@@ -301,8 +313,8 @@
301
313
  --src-shadow-success-hover: var(--src-color-alpha-success-200);
302
314
  --src-shadow-error: var(--src-color-alpha-destruct-100);
303
315
  --src-shadow-error-hover: var(--src-color-alpha-destruct-200);
304
- --src-text-ui-accent-main: var(--src-color-accent-600);
305
- --src-text-ui-accent-hover: var(--src-color-accent-700);
316
+ --src-text-ui-accent-main: var(--src-color-primary-600);
317
+ --src-text-ui-accent-hover: var(--src-color-primary-700);
306
318
  --src-text-ui-success-main: var(--src-color-green-600);
307
319
  --src-text-ui-success-hover: var(--src-color-green-700);
308
320
  --src-text-ui-distruct-main: var(--src-color-red-500);
@@ -310,27 +322,27 @@
310
322
  --src-surface-container-main: var(--src-light);
311
323
  --src-surface-container-on-top: var(--src-color-alpha-default-10);
312
324
  --src-surface-container-secondary: var(--src-color-grey-50);
313
- --src-surface-container-info: var(--src-color-accent-50);
325
+ --src-surface-container-info: var(--src-color-primary-50);
314
326
  --src-surface-container-success: var(--src-color-green-50);
315
327
  --src-surface-container-error: var(--src-color-red-50);
316
328
  --src-surface-toast-basic: var(--src-color-alpha-default-50);
317
- --src-surface-toast-info: var(--src-color-accent-600);
329
+ --src-surface-toast-info: var(--src-color-primary-600);
318
330
  --src-surface-toast-success: var(--src-color-green-600);
319
331
  --src-surface-toast-error: var(--src-color-red-500);
320
332
  --src-border-infoPrompt-basic: var(--src-color-grey-300);
321
333
  --src-border-infoPrompt-light: var(--src-color-alpha-default-50);
322
- --src-border-infoPrompt-info: var(--src-color-accent-200);
334
+ --src-border-infoPrompt-info: var(--src-color-primary-200);
323
335
  --src-border-infoPrompt-success: var(--src-color-green-200);
324
336
  --src-border-infoPrompt-error: var(--src-color-red-200);
325
337
  --src-gradient-light-start: var(--src-color-alpha-test-100);
326
338
  --src-gradient-light-end: var(--src-color-alpha-default-10);
327
339
  --src-gradient-accent-light: var(--src-color-alpha-accent-10);
328
340
  --src-gradient-accent-hard: var(--src-color-alpha-accent-50);
329
- --src-gradient-success: var(--src-color-alpha-success-50);
330
- --src-gradient-success-hover: var(--src-color-alpha-success-200);
331
- --src-gradient-error: var(--src-color-alpha-destruct-100);
332
- --src-gradient-error-hover: var(--src-color-alpha-destruct-200);
333
- --src-tech-sticker: var(--src-color-orange-100);
341
+ --src-gradient-success: var(--color-alpha-success-50);
342
+ --src-gradient-success-hover: var(--color-alpha-success-200);
343
+ --src-gradient-error: var(--color-alpha-destruct-100);
344
+ --src-gradient-error-hover: var(--color-alpha-destruct-200);
345
+ --src-tech-sticker: var(--src-color-tertiary-100);
334
346
  --wireframe-main: var(--src-color-neutral-600);
335
347
  --wireframe-secondary: var(--src-color-neutral-500);
336
348
  --wireframe-light: var(--src-color-neutral-300);
@@ -338,19 +350,19 @@
338
350
  --wireframe-surface-secondary: var(--src-color-alpha-default-50);
339
351
  --wireframe-border: var(--src-color-alpha-default-200);
340
352
  --wireframe-invert: var(--src-light);
341
- --src-tech-description: var(--src-color-orange-900);
353
+ --src-tech-description: var(--src-color-tertiary-900);
342
354
  --src-light: #ffffffff;
343
355
  --src-dark: #000000ff;
344
356
  --src-ui-status-basic-neutral: var(--src-color-grey-500);
345
357
  --src-ui-status-basic-neutral-hover: var(--src-color-grey-600);
346
358
  --src-ui-status-basic-critical: var(--src-color-red-500);
347
359
  --src-ui-status-basic-critical-hover: var(--src-color-red-600);
348
- --src-ui-status-basic-info: var(--src-color-accent-500);
349
- --src-ui-status-basic-info-hover: var(--src-color-accent-600);
360
+ --src-ui-status-basic-info: var(--src-color-primary-500);
361
+ --src-ui-status-basic-info-hover: var(--src-color-primary-600);
350
362
  --src-ui-status-basic-success: var(--src-color-green-500);
351
363
  --src-ui-status-basic-success-hover: var(--src-color-green-500);
352
- --src-ui-status-basic-warning: var(--src-color-orange-500);
353
- --src-ui-status-basic-warning-hover: var(--src-color-orange-600);
364
+ --src-ui-status-basic-warning: var(--src-color-tertiary-500);
365
+ --src-ui-status-basic-warning-hover: var(--src-color-tertiary-600);
354
366
  --src-ui-status-basic-attention: var(--src-color-yellow-500);
355
367
  --src-ui-status-basic-attention-hover: var(--src-color-yellow-600);
356
368
  --src-ui-status-light-neutral: var(--src-color-alpha-default-100);
@@ -365,8 +377,8 @@
365
377
  --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-300);
366
378
  --src-ui-status-light-attention: var(--src-color-alpha-attention-200);
367
379
  --src-ui-status-light-attention-hover: var(--src-color-alpha-attention-300);
368
- --src-text-ui-warning-main: var(--src-color-orange-600);
369
- --src-text-ui-warning-hover: var(--src-color-orange-700);
380
+ --src-text-ui-warning-main: var(--src-color-tertiary-600);
381
+ --src-text-ui-warning-hover: var(--src-color-tertiary-700);
370
382
  --src-text-ui-attention-main: var(--src-color-yellow-800);
371
383
  --src-text-ui-attention-hover: var(--src-color-yellow-900);
372
384
  }
@@ -418,25 +430,25 @@
418
430
  --src-height-xs: var(--src-space-3);
419
431
  --src-icon-size: var(--src-space-4);
420
432
  --src-icon-line-width: 1.2400000095367432px;
421
- --src-border-border: 1px;
422
433
  --src-height-sm: var(--src-space-4);
423
- --src-height-base: var(--src-space-7);
434
+ --src-border-border: 1px;
424
435
  --src-border-rounded-none: 0px;
436
+ --src-height-base: var(--src-space-7);
425
437
  --src-height-lg: 40px;
426
438
  --src-border-rounded-xs: var(--src-space-0-5);
427
439
  --src-border-rounded: var(--src-space-1);
428
440
  --src-border-rounded-parent: var(--src-space-2);
429
441
  --src-border-rounded-lg: var(--src-space-3);
430
442
  --src-border-rounded-full: 9999px;
431
- --src-gap-none: 0px;
432
443
  --src-gap-md: var(--src-space-1);
433
- --src-gap-lg: var(--src-space-2);
434
- --src-text-weight-base: var(--src-font-weight-medium);
435
444
  --src-text-lineHeight: var(--src-font-line-xs);
436
- --src-gap-sm: var(--src-space-0-5);
437
445
  --src-gap-xl: var(--src-space-3);
438
446
  --src-text-fontSize: var(--src-font-size-xs);
439
- --src-text-weight-bold: var(--src-font-weight-Bold);
447
+ --src-text-weight-base: var(--src-font-weight-medium);
448
+ --src-gap-lg: var(--src-space-2);
449
+ --src-gap-none: 0px;
450
+ --src-gap-sm: var(--src-space-0-5);
451
+ --src-text-weight-bold: var(--src-font-weight-bold);
440
452
  --src-text-weight-medium: var(--src-font-weight-semiBold);
441
453
  --src-shadow-focused: var(--src-space-1);
442
454
  --src-shadow-ambient-inner: -1px;
@@ -456,25 +468,25 @@
456
468
  --src-height-xs: var(--src-space-4);
457
469
  --src-icon-size: var(--src-space-5);
458
470
  --src-icon-line-width: 1.440000057220459px;
459
- --src-border-border: 1px;
460
471
  --src-height-sm: var(--src-space-5);
461
- --src-height-base: var(--src-space-9);
472
+ --src-border-border: 1px;
462
473
  --src-border-rounded-none: 0px;
474
+ --src-height-base: var(--src-space-9);
463
475
  --src-height-lg: 52px;
464
476
  --src-border-rounded-xs: var(--src-space-1);
465
477
  --src-border-rounded: var(--src-space-1-5);
466
478
  --src-border-rounded-parent: var(--src-space-2-5);
467
479
  --src-border-rounded-lg: var(--src-space-4);
468
480
  --src-border-rounded-full: 9999px;
469
- --src-gap-none: 0px;
470
481
  --src-gap-md: var(--src-space-1-5);
471
- --src-gap-lg: var(--src-space-2-5);
472
- --src-text-weight-base: var(--src-font-weight-Medium);
473
482
  --src-text-lineHeight: var(--src-font-line-sm);
474
- --src-gap-sm: var(--src-space-1);
475
483
  --src-gap-xl: var(--src-space-3-5);
476
484
  --src-text-fontSize: var(--src-font-size-sm);
477
- --src-text-weight-bold: var(--src-font-weight-Bold);
485
+ --src-text-weight-base: var(--src-font-weight-medium);
486
+ --src-gap-lg: var(--src-space-2-5);
487
+ --src-gap-none: 0px;
488
+ --src-gap-sm: var(--src-space-1);
489
+ --src-text-weight-bold: var(--src-font-weight-bold);
478
490
  --src-text-weight-medium: var(--src-font-weight-semiBold);
479
491
  --src-shadow-focused: var(--src-space-1);
480
492
  --src-shadow-ambient-inner: -1px;
@@ -494,25 +506,25 @@
494
506
  --src-height-xs: var(--src-space-5);
495
507
  --src-icon-size: var(--src-space-6);
496
508
  --src-icon-line-width: 1.6399999856948853px;
497
- --src-border-border: 2px;
498
509
  --src-height-sm: var(--src-space-6);
499
- --src-height-base: var(--src-space-11);
510
+ --src-border-border: 2px;
500
511
  --src-border-rounded-none: 0px;
512
+ --src-height-base: var(--src-space-11);
501
513
  --src-height-lg: 64px;
502
514
  --src-border-rounded-xs: var(--src-space-1-5);
503
515
  --src-border-rounded: var(--src-space-2);
504
516
  --src-border-rounded-parent: var(--src-space-3);
505
517
  --src-border-rounded-lg: var(--src-space-5);
506
518
  --src-border-rounded-full: 9999px;
507
- --src-gap-none: 0px;
508
519
  --src-gap-md: var(--src-space-2);
509
- --src-gap-lg: var(--src-space-3-5);
510
- --src-text-weight-base: var(--src-font-weight-Medium);
511
520
  --src-text-lineHeight: var(--src-font-line-base);
512
- --src-gap-sm: var(--src-space-1-5);
513
521
  --src-gap-xl: var(--src-space-4);
514
522
  --src-text-fontSize: var(--src-font-size-base);
515
- --src-text-weight-bold: var(--src-font-weight-Bold);
523
+ --src-text-weight-base: var(--src-font-weight-medium);
524
+ --src-gap-lg: var(--src-space-3-5);
525
+ --src-gap-none: 0px;
526
+ --src-gap-sm: var(--src-space-1-5);
527
+ --src-text-weight-bold: var(--src-font-weight-bold);
516
528
  --src-text-weight-medium: var(--src-font-weight-semiBold);
517
529
  --src-shadow-focused: var(--src-space-1-5);
518
530
  --src-shadow-ambient-inner: -2px;
@@ -532,25 +544,25 @@
532
544
  --src-height-xs: var(--src-space-6);
533
545
  --src-icon-size: var(--src-space-7);
534
546
  --src-icon-line-width: 1.840000033378601px;
535
- --src-border-border: 2px;
536
547
  --src-height-sm: var(--src-space-7);
537
- --src-height-base: var(--src-space-14);
548
+ --src-border-border: 2px;
538
549
  --src-border-rounded-none: 0px;
550
+ --src-height-base: var(--src-space-14);
539
551
  --src-height-lg: 76px;
540
552
  --src-border-rounded-xs: var(--src-space-1-5);
541
553
  --src-border-rounded: var(--src-space-2-5);
542
554
  --src-border-rounded-parent: var(--src-space-4);
543
555
  --src-border-rounded-lg: var(--src-space-6);
544
556
  --src-border-rounded-full: 9999px;
545
- --src-gap-none: 0px;
546
557
  --src-gap-md: var(--src-space-2);
547
- --src-gap-lg: var(--src-space-3-5);
548
- --src-text-weight-base: var(--src-font-weight-Medium);
549
558
  --src-text-lineHeight: var(--src-font-line-md);
550
- --src-gap-sm: var(--src-space-2);
551
559
  --src-gap-xl: var(--src-space-4);
552
560
  --src-text-fontSize: var(--src-font-size-md);
553
- --src-text-weight-bold: var(--src-font-weight-Bold);
561
+ --src-text-weight-base: var(--src-font-weight-medium);
562
+ --src-gap-lg: var(--src-space-3-5);
563
+ --src-gap-none: 0px;
564
+ --src-gap-sm: var(--src-space-2);
565
+ --src-text-weight-bold: var(--src-font-weight-bold);
554
566
  --src-text-weight-medium: var(--src-font-weight-semiBold);
555
567
  --src-shadow-focused: var(--src-space-1-5);
556
568
  --src-shadow-ambient-inner: -3px;
@@ -589,7 +601,7 @@
589
601
  --src-layout-gap-var-xl: var(--src-space-6);
590
602
  --src-layout-height-const-sm: var(--src-space-7);
591
603
  --src-layout-height-const-md: var(--src-space-8);
592
- --src-layout-height-const-lg: var(--space-9);
604
+ --src-layout-height-const-lg: var(--src-space-9);
593
605
  --src-layout-height-const-h-xl: var(--src-space-10);
594
606
  --src-layout-height-const-h-2xl: var(--src-space-16);
595
607
  --src-layout-height-var-xs: var(--src-space-6);
@@ -619,28 +631,27 @@
619
631
  --screen-width: 640px;
620
632
  --card-width: 216px;
621
633
  --preview-width: 216px;
622
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xs);
623
- --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
624
634
  --src-typography-var-p-sm-fontSize: var(--src-font-size-xs);
635
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
636
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-xs);
625
637
  --src-typography-var-p-md-fontSize: var(--src-font-size-sm);
626
- --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
627
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-sm);
638
+ --src-typography-var-p-md-weight: var(--src-font-weight-regular);
639
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-sm);
628
640
  --src-typography-var-h-sm-fontSize: var(--src-font-size-base);
629
- --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
630
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-base);
641
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
642
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-base);
631
643
  --src-typography-var-h-md-fontSize: var(--src-font-size-md);
632
- --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
633
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-md);
634
- --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
635
- --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
636
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-lg);
637
- --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
638
- --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
639
- --src-typography-var-h-xl-lineHeight: var(--src-font-line-height-3xl);
644
+ --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
645
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-md);
646
+ --src-typography-var-h-lg-fontSize: var(--src-font-size-lg);
647
+ --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
648
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-lg);
649
+ --src-typography-var-h-xl-fontSize: var(--src-font-size-2xl);
650
+ --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
651
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-2xl);
640
652
  --src-typography-var-p-lg-fontSize: var(--src-font-size-md);
641
- --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
642
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-md);
643
- --src-layout-table-height-2: var(--src-space-11);
653
+ --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
654
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-md);
644
655
  }
645
656
  }
646
657
 
@@ -691,7 +702,7 @@
691
702
  --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
692
703
  --src-layout-radius-const-rounded: var(--src-space-2);
693
704
  --src-layout-radius-const-rounded-md: var(--src-space-3);
694
- --src-layout-radius-const-rounded-lg: var(--src-space-4);
705
+ --src-layout-radius-const-rounded-lg: var(--space-4);
695
706
  --src-layout-radius-const-rounded-xl: var(--src-space-6);
696
707
  --src-layout-radius-const-rounded-2xl: var(--src-space-8);
697
708
  --src-layout-radius-rounded-ui-full: 9999px;
@@ -704,28 +715,27 @@
704
715
  --screen-width: 768px;
705
716
  --card-width: 320px;
706
717
  --preview-width: 216px;
707
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
708
- --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
709
718
  --src-typography-var-p-sm-fontSize: var(--src-font-size-sm);
719
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
720
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-sm);
710
721
  --src-typography-var-p-md-fontSize: var(--src-font-size-base);
711
- --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
712
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-base);
722
+ --src-typography-var-p-md-weight: var(--src-font-weight-regular);
723
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-base);
713
724
  --src-typography-var-h-sm-fontSize: var(--src-font-size-md);
714
- --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
715
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-md);
725
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
726
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-md);
716
727
  --src-typography-var-h-md-fontSize: var(--src-font-size-lg);
717
- --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
718
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-lg);
728
+ --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
729
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-lg);
719
730
  --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
720
- --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
721
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-xl);
722
- --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
723
- --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
724
- --src-typography-var-h-xl-lineHeight: 48px;
731
+ --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
732
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-xl);
733
+ --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
734
+ --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
735
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-3xl);
725
736
  --src-typography-var-p-lg-fontSize: var(--src-font-size-lg);
726
- --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
727
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-lg);
728
- --src-layout-table-height-2: var(--src-space-14);
737
+ --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
738
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-lg);
729
739
  }
730
740
  }
731
741
 
@@ -773,10 +783,10 @@
773
783
  --src-layout-radius-rounded-none: 0px;
774
784
  --src-layout-border-border: 2px;
775
785
  --src-layout-table-height: var(--src-space-20);
776
- --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
786
+ --src-layout-radius-const-rounded-sm: var(--space-1, 5);
777
787
  --src-layout-radius-const-rounded: var(--src-space-2);
778
788
  --src-layout-radius-const-rounded-md: var(--src-space-3);
779
- --src-layout-radius-const-rounded-lg: var(--src-space-4);
789
+ --src-layout-radius-const-rounded-lg: var(--space-4);
780
790
  --src-layout-radius-const-rounded-xl: var(--src-space-6);
781
791
  --src-layout-radius-const-rounded-2xl: var(--src-space-8);
782
792
  --src-layout-radius-rounded-ui-full: 9999px;
@@ -789,28 +799,27 @@
789
799
  --screen-width: 1024px;
790
800
  --card-width: 420px;
791
801
  --preview-width: 216px;
792
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
793
- --src-typography-var-p-sm-weight: var(--src-font-weight-Medium);
794
802
  --src-typography-var-p-sm-fontSize: var(--src-font-size-base);
803
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
804
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
795
805
  --src-typography-var-p-md-fontSize: var(--src-font-size-lg);
796
- --src-typography-var-p-md-weight: var(--src-font-weight-Medium);
797
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-lg);
806
+ --src-typography-var-p-md-weight: var(--src-font-weight-medium);
807
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-lg);
798
808
  --src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
799
- --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
800
- --src-typography-var-h-sm-lineHeight: var(--font-line-height-xl);
809
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
810
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-xl);
801
811
  --src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
802
- --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
803
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-2xl);
812
+ --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
813
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-2xl);
804
814
  --src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
805
- --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
806
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
807
- --src-typography-var-h-xl-fontSize: 56px;
808
- --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
809
- --src-typography-var-h-xl-lineHeight: 56px;
815
+ --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
816
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
817
+ --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
818
+ --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
819
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-4xl);
810
820
  --src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
811
- --src-typography-var-p-lg-weight: var(--src-font-weight-Medium);
812
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-2xl);
813
- --src-layout-table-height-2: var(--src-space-20);
821
+ --src-typography-var-p-lg-weight: var(--src-font-weight-medium);
822
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-2xl);
814
823
  }
815
824
  }
816
825
 
@@ -858,10 +867,10 @@
858
867
  --src-layout-radius-rounded-none: 0px;
859
868
  --src-layout-border-border: 2px;
860
869
  --src-layout-table-height: var(--src-space-24);
861
- --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
870
+ --src-layout-radius-const-rounded-sm: var(--space-1, 5);
862
871
  --src-layout-radius-const-rounded: var(--src-space-2);
863
872
  --src-layout-radius-const-rounded-md: var(--src-space-3);
864
- --src-layout-radius-const-rounded-lg: var(--src-space-4);
873
+ --src-layout-radius-const-rounded-lg: var(--space-4);
865
874
  --src-layout-radius-const-rounded-xl: var(--src-space-6);
866
875
  --src-layout-radius-const-rounded-2xl: var(--src-space-8);
867
876
  --src-layout-radius-rounded-ui-full: 9999px;
@@ -869,33 +878,32 @@
869
878
  --src-graphs-label: var(--src-space-2);
870
879
  --src-graphs-label-var: var(--src-space-3-5);
871
880
  --src-graphs-height-label-var: var(--src-space-10);
872
- --src-graphs-height-label-const: var(--src-spaces-20);
881
+ --src-graphs-height-label-const: var(--src-space-5);
873
882
  --src-graphs-height-s: var(--src-space-10);
874
883
  --screen-width: 1280px;
875
884
  --card-width: 480px;
876
885
  --preview-width: 216px;
877
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xl);
878
- --src-typography-var-p-sm-weight: var(--src-font-weight-Semi-Bold);
879
886
  --src-typography-var-p-sm-fontSize: var(--src-font-size-lg);
887
+ --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
888
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-xl);
880
889
  --src-typography-var-p-md-fontSize: var(--src-font-size-xl);
881
- --src-typography-var-p-md-weight: var(--src-font-weight-Semi-Bold);
882
- --src-typography-var-p-md-lineHeight: var(--src-font-line-height-xl);
890
+ --src-typography-var-p-md-weight: var(--src-font-weight-semiBold);
891
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-xl);
883
892
  --src-typography-var-h-sm-fontSize: var(--src-font-size-2xl);
884
- --src-typography-var-h-sm-weight: var(--src-font-weight-Bold);
885
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-2xl);
893
+ --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
894
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-2xl);
886
895
  --src-typography-var-h-md-fontSize: var(--src-font-size-3xl);
887
- --src-typography-var-h-md-weight: var(--src-font-weight-Bold);
888
- --src-typography-var-h-md-lineHeight: var(--src-font-line-height-3xl);
896
+ --src-typography-var-h-md-weight: var(--src-font-weight-bold);
897
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-3xl);
889
898
  --src-typography-var-h-lg-fontSize: var(--src-font-size-4xl);
890
- --src-typography-var-h-lg-weight: var(--src-font-weight-Bold);
891
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
899
+ --src-typography-var-h-lg-weight: var(--src-font-weight-bold);
900
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
892
901
  --src-typography-var-h-xl-fontSize: 64px;
893
- --src-typography-var-h-xl-weight: var(--src-font-weight-Bold);
902
+ --src-typography-var-h-xl-weight: var(--src-font-weight-bold);
894
903
  --src-typography-var-h-xl-lineHeight: 64px;
895
904
  --src-typography-var-p-lg-fontSize: var(--src-font-size-3xl);
896
- --src-typography-var-p-lg-weight: var(--src-font-weight-Semi-Bold);
897
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-3xl);
898
- --src-layout-table-height-2: var(--src-space-24);
905
+ --src-typography-var-p-lg-weight: var(--src-font-weight-semiBold);
906
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-3xl);
899
907
  }
900
908
  }
901
909
 
@@ -2646,7 +2654,7 @@
2646
2654
  padding: var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-sm, var(--src-space-3));
2647
2655
  font-family: var(--src-font-family-body);
2648
2656
  font-style: normal;
2649
- font-weight: var(--src-font-weight-Medium, 500);
2657
+ font-weight: var(--src-font-weight-medium, 500);
2650
2658
  background: var(--srcInputFieldBg);
2651
2659
  border: var(--srcInputFieldBorder);
2652
2660
  box-shadow: none;
@@ -2813,7 +2821,7 @@
2813
2821
  padding: var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-sm, var(--src-space-3));
2814
2822
  font-family: var(--src-font-family-body);
2815
2823
  font-style: normal;
2816
- font-weight: var(--src-font-weight-Medium, 500);
2824
+ font-weight: var(--src-font-weight-medium, 500);
2817
2825
  border: var(--srcSelectFieldBorder);
2818
2826
  background-color: var(--srcSelectFieldBg);
2819
2827
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z' fill='%236B7280'/%3E%3C/svg%3E%0A");
@@ -2973,7 +2981,7 @@
2973
2981
  padding: var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-xs, var(--src-space-2)) var(--src-padding-sm, var(--src-space-3));
2974
2982
  font-family: var(--src-font-family-body);
2975
2983
  font-style: normal;
2976
- font-weight: var(--src-font-weight-Medium, 500);
2984
+ font-weight: var(--src-font-weight-medium, 500);
2977
2985
  font-size: var(--srcTexareaFontSize);
2978
2986
  line-height: var(--srcTexareaLineHeight);
2979
2987
  color: var(--srcTexareaFontColor);
@@ -3401,7 +3409,7 @@
3401
3409
  padding: var(--srcModalBodyPadding);
3402
3410
  overflow: auto;
3403
3411
  scrollbar-width: thin;
3404
- scrollbar-color: var(--src-color-border-default) transparent;
3412
+ scrollbar-color: var(--src-border-container-basic) transparent;
3405
3413
  }
3406
3414
  .src-modal .src-modal__body .src-modal__title,
3407
3415
  .src-modal .src-modal__body .src-modal__scroll-box {
@@ -3427,7 +3435,7 @@
3427
3435
  background: transparent;
3428
3436
  }
3429
3437
  .src-modal .src-modal__body::-webkit-scrollbar-thumb {
3430
- background-color: var(--src-color-border-default);
3438
+ background-color: var(--src-border-container-basic);
3431
3439
  border-radius: 10px;
3432
3440
  }
3433
3441
  .src-modal .src-modal__footer {
@@ -3496,7 +3504,7 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3496
3504
  --srcPopoverTitleLineHeight: var(--src-font-line-base);
3497
3505
  --srcPopoverTitleColor: var(--src-color-text-default);
3498
3506
  --srcPopoverBodyPadding: 20px;
3499
- --srcPopoverTitleBorder: 1px solid var(--src-color-border-default, #e5e7eb);
3507
+ --srcPopoverTitleBorder: 1px solid var(--src-border-container-basic, #e5e7eb);
3500
3508
  display: grid;
3501
3509
  grid-template-columns: minmax(0, 1fr);
3502
3510
  grid-template-rows: auto minmax(0, 1fr) auto;
@@ -3512,7 +3520,7 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3512
3520
  width: var(--srcPopoverWidth);
3513
3521
  overflow: auto;
3514
3522
  scrollbar-width: thin;
3515
- scrollbar-color: var(--src-color-border-default) transparent;
3523
+ scrollbar-color: var(--src-border-container-basic) transparent;
3516
3524
  }
3517
3525
  .src-popover .src-popover__body::-webkit-scrollbar {
3518
3526
  width: 4px;
@@ -3521,7 +3529,7 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3521
3529
  background: transparent;
3522
3530
  }
3523
3531
  .src-popover .src-popover__body::-webkit-scrollbar-thumb {
3524
- background-color: var(--src-color-border-default);
3532
+ background-color: var(--src-border-container-basic);
3525
3533
  border-radius: 10px;
3526
3534
  }
3527
3535
  .src-popover .src-popover__body .src-list .src-list__item:last-child {
@@ -3731,7 +3739,7 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3731
3739
  }
3732
3740
 
3733
3741
  .src-divider {
3734
- --srcDividerColor: var(--src-color-border-default, #e5e7eb);
3742
+ --srcDividerColor: var(--src-border-container-basic, #e5e7eb);
3735
3743
  --srcDividerThickness: 1px;
3736
3744
  --srcDividerOffsetTop: 8px;
3737
3745
  --srcDividerOffsetBottom: var(--srcDividerOffsetTop);