@3dsource/source-ui-native 3.2.1 → 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 (34) hide show
  1. package/fesm2022/3dsource-source-ui-native.mjs +10 -10
  2. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/elements/_src-badge.scss +116 -0
  5. package/styles/elements/_src-banner.scss +101 -0
  6. package/styles/elements/_src-button.scss +1 -1
  7. package/styles/elements/_src-checkbox.scss +16 -5
  8. package/styles/elements/_src-divider.scss +14 -0
  9. package/styles/elements/_src-form.scss +2 -2
  10. package/styles/elements/_src-hint.scss +37 -0
  11. package/styles/elements/_src-icon-button.scss +1 -1
  12. package/styles/elements/_src-input.scss +1 -1
  13. package/styles/elements/_src-label.scss +1 -1
  14. package/styles/elements/_src-list.scss +2 -2
  15. package/styles/elements/_src-modal.scss +5 -5
  16. package/styles/elements/_src-popover.scss +5 -5
  17. package/styles/elements/_src-radio.scss +9 -2
  18. package/styles/elements/_src-select.scss +1 -1
  19. package/styles/elements/_src-textarea.scss +3 -3
  20. package/styles/elements/elements.scss +4 -0
  21. package/styles/source-ui-native.css +444 -182
  22. package/styles/source-ui-native.css.map +1 -1
  23. package/styles/source-ui-native.min.css +1 -1
  24. package/styles/variables/color/dark.scss +31 -30
  25. package/styles/variables/color/light.scss +31 -30
  26. package/styles/variables/layout/_lg.scss +17 -20
  27. package/styles/variables/layout/_md.scss +16 -19
  28. package/styles/variables/layout/_sm.scss +17 -20
  29. package/styles/variables/layout/_xl.scss +16 -19
  30. package/styles/variables/primitives/primitives.scss +33 -22
  31. package/styles/variables/ui/_lg.scss +7 -7
  32. package/styles/variables/ui/_md.scss +7 -7
  33. package/styles/variables/ui/_sm.scss +7 -7
  34. 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
 
@@ -1417,10 +1425,10 @@
1417
1425
  width: 100%;
1418
1426
  margin: 0;
1419
1427
  list-style: none;
1420
- padding: 8px;
1428
+ padding: var(--src-padding-xs, 8px);
1421
1429
  }
1422
1430
  .src-list .src-list__item {
1423
- margin-bottom: 4px;
1431
+ margin-bottom: var(--src-gap-sm, 4px);
1424
1432
  }
1425
1433
  .src-list--compact {
1426
1434
  padding: 0;
@@ -1825,7 +1833,7 @@
1825
1833
  --src-ui-secondary-default-hover,
1826
1834
  rgba(148, 163, 184, 0.08)
1827
1835
  );
1828
- --srcButtonIconCOlor: var(--src-icon-hover, #111827);
1836
+ --srcButtonIconColor: var(--src-icon-hover, #111827);
1829
1837
  }
1830
1838
  }
1831
1839
  .src-button--ghost.src-button--context-info {
@@ -2355,7 +2363,7 @@
2355
2363
  --src-ui-secondary-default-hover,
2356
2364
  rgba(148, 163, 184, 0.08)
2357
2365
  );
2358
- --srcButtonIconCOlor: var(--src-icon-hover, #111827);
2366
+ --srcButtonIconColor: var(--src-icon-hover, #111827);
2359
2367
  }
2360
2368
  }
2361
2369
  .src-icon-button--ghost:active, .src-icon-button--ghost.src-icon-button--pressed {
@@ -2583,8 +2591,8 @@
2583
2591
  }
2584
2592
 
2585
2593
  .src-form {
2586
- --srcFormRowGap: 16px;
2587
- --srcFormItemsGap: 12px;
2594
+ --srcFormRowGap: var(--src-layout-gap-const-lg, 16px);
2595
+ --srcFormItemsGap: var(--src-layout-gap-const-md, 12px);
2588
2596
  --srcFormOffset: 0;
2589
2597
  width: 100%;
2590
2598
  display: flex;
@@ -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);
@@ -3024,21 +3032,21 @@
3024
3032
  .src-textarea[class*="--size-xl"] {
3025
3033
  --srcTexareaMinHeight: 56px;
3026
3034
  }
3027
- .src-textarea.src-input--secondary {
3035
+ .src-textarea.src-textarea--secondary {
3028
3036
  --srcTexareaBg: var(--src-ui-input-secondary, rgba(148, 163, 184, 0.08));
3029
3037
  --srcTexareaBorder: none;
3030
3038
  --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
3031
3039
  }
3032
- .src-textarea.src-input--secondary:hover {
3040
+ .src-textarea.src-textarea--secondary:hover {
3033
3041
  --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
3034
3042
  --srcTexareaBorder: none;
3035
3043
  }
3036
- .src-textarea.src-input--ghost {
3044
+ .src-textarea.src-textarea--ghost {
3037
3045
  --srcTexareaBg: transparent;
3038
3046
  --srcTexareaBorder: none;
3039
3047
  --srcTexareaColor: var(--src-text-ui-secondary-main, #111827);
3040
3048
  }
3041
- .src-textarea.src-input--ghost:hover {
3049
+ .src-textarea.src-textarea--ghost:hover {
3042
3050
  --srcTexareaBg: var(--src-ui-input-hover, rgba(1, 123, 255, 0.08));
3043
3051
  --srcTexareaBorder: none;
3044
3052
  }
@@ -3115,7 +3123,7 @@
3115
3123
  --srcLabelLineHeight: var(--src-font-line-xs, 16px);
3116
3124
  --srcLabelFontWeight: 600;
3117
3125
  --srcLabelColor: var(--src-text-body-lable, #6b7280);
3118
- --srcLabelMarginBottom: 4px;
3126
+ --srcLabelMarginBottom: var(--src-gap-sm, 4px);
3119
3127
  --srcLabelLetterSpacing: var(--src-font-spacing-tech, 1.2px);
3120
3128
  display: block;
3121
3129
  font-size: var(--srcLabelFontSize);
@@ -3135,7 +3143,7 @@
3135
3143
  --srcCheckboxBorderWidth: 2px;
3136
3144
  display: flex;
3137
3145
  align-items: center;
3138
- gap: 4px;
3146
+ gap: var(--src-gap-sm, 4px);
3139
3147
  cursor: pointer;
3140
3148
  }
3141
3149
  .src-checkbox input[type=checkbox] {
@@ -3143,9 +3151,9 @@
3143
3151
  appearance: none;
3144
3152
  width: var(--srcCheckboxSize);
3145
3153
  height: var(--srcCheckboxSize);
3146
- padding: 2px;
3154
+ padding: var(--src-space-0-5, 2px);
3147
3155
  border-radius: var(--src-border-rounded-xs, var(--src-space-1));
3148
- background-color: #fff;
3156
+ background-color: var(--src-surface-container-main, #fff);
3149
3157
  border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
3150
3158
  cursor: pointer;
3151
3159
  }
@@ -3153,8 +3161,8 @@
3153
3161
  --srcCheckboxBorderColor: var(--src-border-input-hover, #9ca3af);
3154
3162
  }
3155
3163
  .src-checkbox input[type=checkbox]:checked {
3156
- background-color: #007bff;
3157
- --srcCheckboxBorderColor: #007bff;
3164
+ background-color: var(--src-ui-accent-default, #017bff);
3165
+ --srcCheckboxBorderColor: var(--src-ui-accent-default, #017bff);
3158
3166
  }
3159
3167
  .src-checkbox input[type=checkbox]:checked::after {
3160
3168
  content: "";
@@ -3176,6 +3184,15 @@
3176
3184
  outline: none;
3177
3185
  box-shadow: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
3178
3186
  }
3187
+ .src-checkbox input[type=checkbox]:disabled, .src-checkbox input[type=checkbox][disabled] {
3188
+ --srcCheckboxBorderColor: var(
3189
+ --src-ui-accent-disabled,
3190
+ rgba(148, 163, 184, 0.24)
3191
+ );
3192
+ background-color: var(--src-ui-input-disabled, rgba(148, 163, 184, 0.16));
3193
+ cursor: default;
3194
+ pointer-events: none;
3195
+ }
3179
3196
  .src-checkbox .src-checkbox__label {
3180
3197
  padding-left: var(--src-gap-lg, var(--src-space-3));
3181
3198
  font-size: var(--src-text-fontSize, var(--src-font-size-sm));
@@ -3207,7 +3224,7 @@
3207
3224
  .src-radio {
3208
3225
  display: flex;
3209
3226
  align-items: center;
3210
- gap: 4px;
3227
+ gap: var(--src-gap-sm, 4px);
3211
3228
  cursor: pointer;
3212
3229
  }
3213
3230
  .src-radio input[type=radio] {
@@ -3216,7 +3233,7 @@
3216
3233
  width: var(--srcRadioSize);
3217
3234
  height: var(--srcRadioSize);
3218
3235
  border-radius: 50%;
3219
- background-color: #fff;
3236
+ background-color: var(--src-surface-container-main, #fff);
3220
3237
  border: var(--srcRadioBorderWidth) solid var(--srcRadioBorderColor);
3221
3238
  cursor: pointer;
3222
3239
  }
@@ -3230,11 +3247,17 @@
3230
3247
  .src-radio input[type=radio]:checked:hover {
3231
3248
  --srcRadioBorderColor: var(--src-ui-accent-default-hover, #016fe6);
3232
3249
  }
3250
+ .src-radio input[type=radio]:focus-visible {
3251
+ outline: none;
3252
+ box-shadow: var(--srcRadioFocusRing);
3253
+ }
3233
3254
  .src-radio input[type=radio][disabled] {
3234
3255
  --srcRadioBorderColor: var(
3235
3256
  --src-ui-accent-disabled,
3236
3257
  rgba(148, 163, 184, 0.24)
3237
3258
  );
3259
+ cursor: default;
3260
+ pointer-events: none;
3238
3261
  }
3239
3262
  .src-radio .src-radio__label {
3240
3263
  padding-left: var(--src-gap-lg, var(--src-space-3));
@@ -3386,7 +3409,7 @@
3386
3409
  padding: var(--srcModalBodyPadding);
3387
3410
  overflow: auto;
3388
3411
  scrollbar-width: thin;
3389
- scrollbar-color: var(--src-color-border-default) transparent;
3412
+ scrollbar-color: var(--src-border-container-basic) transparent;
3390
3413
  }
3391
3414
  .src-modal .src-modal__body .src-modal__title,
3392
3415
  .src-modal .src-modal__body .src-modal__scroll-box {
@@ -3412,7 +3435,7 @@
3412
3435
  background: transparent;
3413
3436
  }
3414
3437
  .src-modal .src-modal__body::-webkit-scrollbar-thumb {
3415
- background-color: var(--src-color-border-default);
3438
+ background-color: var(--src-border-container-basic);
3416
3439
  border-radius: 10px;
3417
3440
  }
3418
3441
  .src-modal .src-modal__footer {
@@ -3422,7 +3445,7 @@
3422
3445
  padding: var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);
3423
3446
  width: 100%;
3424
3447
  border-top: var(--srcModalFooterBorder);
3425
- gap: 8px;
3448
+ gap: var(--src-layout-gap-const-sm, 8px);
3426
3449
  }
3427
3450
  @media (max-width: 767px) {
3428
3451
  .src-modal .src-modal__footer {
@@ -3431,10 +3454,10 @@
3431
3454
  .src-modal .src-modal__footer .src-modal__footer-group {
3432
3455
  width: 100%;
3433
3456
  }
3434
- .src-modal .src-modal__footer .src-modal__footer-group src-button {
3457
+ .src-modal .src-modal__footer .src-modal__footer-group .src-button {
3435
3458
  flex-grow: 1;
3436
3459
  }
3437
- .src-modal .src-modal__footer .src-modal__footer-group src-button .src-button {
3460
+ .src-modal .src-modal__footer .src-modal__footer-group .src-button .src-button {
3438
3461
  --srcButtonWidth: 100%;
3439
3462
  }
3440
3463
  }
@@ -3443,7 +3466,7 @@
3443
3466
  }
3444
3467
  .src-modal .src-modal__footer-group {
3445
3468
  display: flex;
3446
- gap: 10px;
3469
+ gap: var(--src-layout-gap-const-md, 12px);
3447
3470
  }
3448
3471
  .src-modal .src-modal__title {
3449
3472
  font-size: var(--srcModalTitleSize);
@@ -3481,7 +3504,7 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3481
3504
  --srcPopoverTitleLineHeight: var(--src-font-line-base);
3482
3505
  --srcPopoverTitleColor: var(--src-color-text-default);
3483
3506
  --srcPopoverBodyPadding: 20px;
3484
- --srcPopoverTitleBorder: 1px solid var(--src-color-border-default, #e5e7eb);
3507
+ --srcPopoverTitleBorder: 1px solid var(--src-border-container-basic, #e5e7eb);
3485
3508
  display: grid;
3486
3509
  grid-template-columns: minmax(0, 1fr);
3487
3510
  grid-template-rows: auto minmax(0, 1fr) auto;
@@ -3497,7 +3520,7 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3497
3520
  width: var(--srcPopoverWidth);
3498
3521
  overflow: auto;
3499
3522
  scrollbar-width: thin;
3500
- scrollbar-color: var(--src-color-border-default) transparent;
3523
+ scrollbar-color: var(--src-border-container-basic) transparent;
3501
3524
  }
3502
3525
  .src-popover .src-popover__body::-webkit-scrollbar {
3503
3526
  width: 4px;
@@ -3506,14 +3529,14 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3506
3529
  background: transparent;
3507
3530
  }
3508
3531
  .src-popover .src-popover__body::-webkit-scrollbar-thumb {
3509
- background-color: var(--src-color-border-default);
3532
+ background-color: var(--src-border-container-basic);
3510
3533
  border-radius: 10px;
3511
3534
  }
3512
- .src-popover .src-popover__body .src-list src-list-item:last-child {
3535
+ .src-popover .src-popover__body .src-list .src-list__item:last-child {
3513
3536
  margin-bottom: 0;
3514
3537
  }
3515
3538
 
3516
- .src-popover-panel--mobile src-popover {
3539
+ .src-popover-panel--mobile .src-popover {
3517
3540
  width: 100%;
3518
3541
  }
3519
3542
  .src-popover-panel--mobile .src-popover {
@@ -3523,6 +3546,245 @@ dialog:-internal-dialog-in-top-layer::backdrop {
3523
3546
  --srcPopoverBoxShadow: var(--src-shadow-large-top);
3524
3547
  }
3525
3548
 
3549
+ .src-badge {
3550
+ --srcBadgeHeight: auto;
3551
+ --srcBadgePadding: 4px;
3552
+ --srcBadgeBackgroundColor: var(
3553
+ --src-ui-status-light-neutral,
3554
+ rgba(148, 163, 184, 0.24)
3555
+ );
3556
+ --srcBadgeTextColor: var(--src-text-body-lable, #6b7280);
3557
+ display: inline-flex;
3558
+ gap: var(--src-gap-md, 4px);
3559
+ width: auto;
3560
+ min-width: var(--srcBadgeHeight);
3561
+ height: var(--srcBadgeHeight);
3562
+ padding: var(--srcBadgePadding);
3563
+ border-radius: var(--src-border-rounded-full, 9999px);
3564
+ background: var(--srcBadgeBackgroundColor);
3565
+ color: var(--srcBadgeTextColor);
3566
+ font-family: var(--src-font-family-header, Inter);
3567
+ font-size: var(--src-text-fontSize, 12px);
3568
+ font-style: normal;
3569
+ font-weight: 500;
3570
+ line-height: var(--src-text-lineHeight, 16px);
3571
+ }
3572
+ .src-badge .src-badge__icon > * {
3573
+ display: block;
3574
+ width: var(--src-icon-size);
3575
+ height: var(--src-icon-size);
3576
+ color: var(--srcBadgeTextColor);
3577
+ }
3578
+ .src-badge--context-default, .src-badge--context-success, .src-badge--context-warning, .src-badge--context-attention, .src-badge--context-error, .src-badge--context-info {
3579
+ --srcBadgeHeight: auto;
3580
+ --srcBadgeBackgroundColor: var(
3581
+ --src-ui-status-light-neutral,
3582
+ rgba(148, 163, 184, 0.24)
3583
+ );
3584
+ --srcBadgeTextColor: var(--src-text-body-lable, #6b7280);
3585
+ text-align: center;
3586
+ }
3587
+ .src-badge--context-default {
3588
+ --srcBadgeBackgroundColor:
3589
+ linear-gradient(
3590
+ 0deg,
3591
+ var(--src-ui-status-light-neutral, rgba(148, 163, 184, 0.24)) 0%,
3592
+ var(--src-ui-status-light-neutral, rgba(148, 163, 184, 0.24)) 100%
3593
+ ),
3594
+ var(--src-surface-container-main, #fff);
3595
+ --srcBadgeTextColor: var(--src-text-body-lable, #6b7280);
3596
+ }
3597
+ .src-badge--context-info {
3598
+ --srcBadgeBackgroundColor:
3599
+ linear-gradient(
3600
+ 0deg,
3601
+ var(--src-ui-status-light-info, rgba(1, 123, 255, 0.24)) 0%,
3602
+ var(--src-ui-status-light-info, rgba(1, 123, 255, 0.24)) 100%
3603
+ ),
3604
+ var(--src-surface-container-main, #fff);
3605
+ --srcBadgeTextColor: var(--src-text-ui-accent-main, #016fe6);
3606
+ }
3607
+ .src-badge--context-success {
3608
+ --srcBadgeBackgroundColor:
3609
+ linear-gradient(
3610
+ 0deg,
3611
+ var(--src-ui-status-light-success, rgba(22, 163, 74, 0.16)) 0%,
3612
+ var(--src-ui-status-light-success, rgba(22, 163, 74, 0.16)) 100%
3613
+ ),
3614
+ var(--src-surface-container-main, #fff);
3615
+ --srcBadgeTextColor: var(--src-text-ui-success-main, #16a34a);
3616
+ }
3617
+ .src-badge--context-warning {
3618
+ --srcBadgeBackgroundColor:
3619
+ linear-gradient(
3620
+ 0deg,
3621
+ var(--src-ui-status-light-warning, rgba(245, 168, 15, 0.24)) 0%,
3622
+ var(--src-ui-status-light-warning, rgba(245, 168, 15, 0.24)) 100%
3623
+ ),
3624
+ var(--src-surface-container-main, #fff);
3625
+ --srcBadgeTextColor: var(--src-text-ui-warning-main, #d97706);
3626
+ }
3627
+ .src-badge--context-attention {
3628
+ --srcBadgeBackgroundColor:
3629
+ linear-gradient(
3630
+ 0deg,
3631
+ var(--src-ui-status-light-attention, rgba(240, 228, 66, 0.24)) 0%,
3632
+ var(--src-ui-status-light-attention, rgba(240, 228, 66, 0.24)) 100%
3633
+ ),
3634
+ var(--src-surface-container-main, #fff);
3635
+ --srcBadgeTextColor: var(--src-text-ui-attention-main, #9e962c);
3636
+ }
3637
+ .src-badge--context-error {
3638
+ --srcBadgeBackgroundColor:
3639
+ linear-gradient(
3640
+ 0deg,
3641
+ var(--src-ui-status-light-critical, rgba(239, 68, 68, 0.16)) 0%,
3642
+ var(--src-ui-status-light-critical, rgba(239, 68, 68, 0.16)) 100%
3643
+ ),
3644
+ var(--src-surface-container-main, #fff);
3645
+ --srcBadgeTextColor: var(--src-text-ui-distruct-main, #f24122);
3646
+ }
3647
+
3648
+ .src-banner {
3649
+ --srcBannerPadding: var(--src-layout-padding-const-sm, 8px)
3650
+ var(--src-layout-padding-const-md, 12px);
3651
+ --srcBannerBackgroundColor: var(
3652
+ --src-ui-status-light-neutral,
3653
+ rgba(148, 163, 184, 0.24)
3654
+ );
3655
+ --srcBannerBorderWidth: 1px;
3656
+ --srcBannerBorderColor: var(
3657
+ --src-border-container-light,
3658
+ rgba(148, 163, 184, 0.16)
3659
+ );
3660
+ --srcBannerTextColor: var(--src-text-body-secondary, #4b5563);
3661
+ --srcBannerIconColor: var(--src-icon-default);
3662
+ --srcBannerBorderRadius: var(--src-layout-radius-const-rounded-sm, 6px);
3663
+ display: flex;
3664
+ gap: var(--src-layout-gap-const-sm, 8px);
3665
+ width: 100%;
3666
+ padding: var(--srcBannerPadding);
3667
+ border: var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor);
3668
+ border-radius: var(--srcBannerBorderRadius);
3669
+ background: var(--srcBannerBackgroundColor);
3670
+ color: var(--srcBannerTextColor);
3671
+ font-size: var(--src-font-size-xs, 12px);
3672
+ font-weight: normal;
3673
+ line-height: var(--src-font-line-xs, 16px);
3674
+ }
3675
+ .src-banner .src-banner__icon-prefix,
3676
+ .src-banner .src-banner__icon-postfix {
3677
+ width: var(--src-icon-size);
3678
+ height: var(--src-icon-size);
3679
+ color: var(--srcBannerIconColor);
3680
+ flex-shrink: 0;
3681
+ }
3682
+ .src-banner .src-banner__icon-prefix > *,
3683
+ .src-banner .src-banner__icon-postfix > * {
3684
+ width: 100%;
3685
+ height: 100%;
3686
+ }
3687
+ .src-banner .src-banner__content {
3688
+ flex-grow: 1;
3689
+ }
3690
+ .src-banner .src-banner__title {
3691
+ color: var(--srcBannerTextColor);
3692
+ font-family: var(--src-font-family-header, Inter);
3693
+ font-size: var(--src-font-size-tech, 9px);
3694
+ font-style: normal;
3695
+ font-weight: 600;
3696
+ line-height: var(--src-font-line-xs, 16px);
3697
+ letter-spacing: var(--src-font-spacing-tech, 1.2px);
3698
+ text-transform: uppercase;
3699
+ margin-bottom: var(--src-layout-gap-const-xs, 4px);
3700
+ }
3701
+ .src-banner p {
3702
+ margin: 0;
3703
+ }
3704
+ .src-banner--context-info {
3705
+ --srcBannerBackgroundColor: var(
3706
+ --src-ui-status-light-info,
3707
+ rgba(1, 123, 255, 0.24)
3708
+ );
3709
+ --srcBannerBorderColor: var(--src-ui-status-basic-info, #017bff);
3710
+ --srcBannerIconColor: var(--src-icon-info);
3711
+ --srcBannerTextColor: var(--src-text-body-accent, #016fe6);
3712
+ }
3713
+ .src-banner--context-success {
3714
+ --srcBannerBackgroundColor: var(
3715
+ --src-ui-status-light-success,
3716
+ rgba(22, 163, 74, 0.16)
3717
+ );
3718
+ --srcBannerBorderColor: var(--src-ui-status-basic-success, #22c55e);
3719
+ --srcBannerIconColor: var(--src-icon-success);
3720
+ --srcBannerTextColor: var(--src-text-ui-success-main, #16a34a);
3721
+ }
3722
+ .src-banner--context-critical, .src-banner--context-error {
3723
+ --srcBannerBackgroundColor: var(
3724
+ --src-ui-status-light-critical,
3725
+ rgba(239, 68, 68, 0.16)
3726
+ );
3727
+ --srcBannerBorderColor: var(--src-ui-status-basic-critical, #f24122);
3728
+ --srcBannerIconColor: var(--src-icon-error);
3729
+ --srcBannerTextColor: var(--src-text-body-destruct, #c5280c);
3730
+ }
3731
+ .src-banner--context-warning {
3732
+ --srcBannerBackgroundColor: var(
3733
+ --src-ui-status-light-warning,
3734
+ rgba(245, 168, 15, 0.24)
3735
+ );
3736
+ --srcBannerBorderColor: var(--src-ui-status-basic-warning, #f59b18);
3737
+ --srcBannerIconColor: var(--src-icon-warning);
3738
+ --srcBannerTextColor: var(--src-text-ui-warning-main, #d97706);
3739
+ }
3740
+
3741
+ .src-divider {
3742
+ --srcDividerColor: var(--src-border-container-basic, #e5e7eb);
3743
+ --srcDividerThickness: 1px;
3744
+ --srcDividerOffsetTop: 8px;
3745
+ --srcDividerOffsetBottom: var(--srcDividerOffsetTop);
3746
+ display: block;
3747
+ width: 100%;
3748
+ height: var(--srcDividerThickness);
3749
+ margin-top: var(--srcDividerOffsetTop);
3750
+ margin-bottom: var(--srcDividerOffsetBottom);
3751
+ padding: 0;
3752
+ background-color: var(--srcDividerColor);
3753
+ border: none;
3754
+ }
3755
+
3756
+ .src-hint {
3757
+ --srcHintColor: var(--src-color-icon-default, #6b7280);
3758
+ --srcHintFontSize: var(--src-text-fontSize, 12px);
3759
+ --srcHintLineHeight: var(--src-text-lineHeight, 16px);
3760
+ --srcHintPadding: var(--src-gap-md, 8px) 0 0;
3761
+ --srcHintIconSize: var(--src-icon-size, 16px);
3762
+ position: relative;
3763
+ color: var(--srcHintColor);
3764
+ font-size: var(--srcHintFontSize);
3765
+ font-style: normal;
3766
+ display: flex;
3767
+ font-weight: 500;
3768
+ padding: var(--srcHintPadding);
3769
+ margin: 0;
3770
+ line-height: var(--srcHintLineHeight);
3771
+ }
3772
+ .src-hint .src-hint__icon {
3773
+ width: var(--srcHintIconSize);
3774
+ height: var(--srcHintIconSize);
3775
+ margin-right: var(--src-gap-md, 4px);
3776
+ color: currentColor;
3777
+ }
3778
+ .src-hint--error, .src-hint--context-error {
3779
+ --srcHintColor: var(--src-text-body-destruct, #c5280c);
3780
+ }
3781
+ .src-hint--context-info {
3782
+ --srcHintColor: var(--src-text-body-accent, #016fe6);
3783
+ }
3784
+ .src-hint--context-success {
3785
+ --srcHintColor: var(--src-text-body-success, #16a34a);
3786
+ }
3787
+
3526
3788
  html,
3527
3789
  body {
3528
3790
  width: 100%;