@nova-design-system/nova-base 3.0.0-beta.37 → 3.0.0-beta.38

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 (21) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/css/mccs.css +111 -97
  3. package/dist/css/ocean.css +111 -91
  4. package/dist/css/spark.css +111 -91
  5. package/dist/js/mccs_dark.d.ts +22 -11
  6. package/dist/js/mccs_dark.js +25 -14
  7. package/dist/js/mccs_light.d.ts +22 -11
  8. package/dist/js/mccs_light.js +22 -11
  9. package/dist/js/ocean_dark.d.ts +22 -11
  10. package/dist/js/ocean_dark.js +25 -14
  11. package/dist/js/ocean_light.d.ts +22 -11
  12. package/dist/js/ocean_light.js +22 -11
  13. package/dist/js/primitives.d.ts +0 -6
  14. package/dist/js/primitives.js +0 -6
  15. package/dist/js/spacings.d.ts +66 -62
  16. package/dist/js/spacings.js +66 -62
  17. package/dist/js/spark_dark.d.ts +22 -11
  18. package/dist/js/spark_dark.js +25 -14
  19. package/dist/js/spark_light.d.ts +22 -11
  20. package/dist/js/spark_light.js +22 -11
  21. package/package.json +1 -1
package/dist/css/mccs.css CHANGED
@@ -75,6 +75,9 @@
75
75
  --components-popover-background: var(--color-gray-ocean-900);
76
76
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
77
77
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
78
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
79
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
80
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
78
81
  --components-overlay-background: var(--color-gray-ocean-650);
79
82
  --components-button-destructive-high-icon-hover: var(--color-base-black);
80
83
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -95,10 +98,10 @@
95
98
  --components-loader-brand-foreground: var(--color-petrol-500);
96
99
  --components-loader-brand-background: var(--color-petrol-900);
97
100
  --components-loader-white-foreground: var(--color-base-white);
98
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
99
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
100
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
101
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
101
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
102
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
103
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
104
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
102
105
  --components-list-native-item-content-hover: var(--color-base-white);
103
106
  --components-list-native-item-content-default: var(--color-base-white);
104
107
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -231,7 +234,7 @@
231
234
  --color-content-inverted-medium-text: var(--color-gray-ocean-650);
232
235
  --color-content-inverted-high-icon: var(--color-gray-ocean-900);
233
236
  --color-content-inverted-high-text: var(--color-gray-ocean-900);
234
- --color-content-lower-text: var(--color-gray-ocean-450);
237
+ --color-content-lower-text: var(--color-gray-ocean-400);
235
238
  --color-content-low-icon: var(--color-gray-ocean-300);
236
239
  --color-content-low-text: var(--color-gray-ocean-300);
237
240
  --color-content-low-border: var(--color-gray-ocean-500);
@@ -315,6 +318,8 @@
315
318
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
316
319
  --components-breadcrumb-text-active: var(--color-content-medium-text);
317
320
  --components-breadcrumb-text: var(--color-content-low-text);
321
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
322
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
318
323
  --components-avatar-content-10: var(--color-rainbow-10-icon);
319
324
  --components-avatar-content-9: var(--color-rainbow-9-text);
320
325
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -370,11 +375,17 @@
370
375
  --components-button-destructive-lower-text: var(--color-dont-use-content);
371
376
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
372
377
  --components-button-destructive-lower-background: var(--color-dont-use-background);
373
- --components-list-custom-border: var(--color-content-low-border);
374
- --components-list-custom-separator: var(--color-content-low-border);
375
- --components-list-custom-item-title-content: var(--color-content-low-text);
376
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
377
- --components-list-custom-background: var(--color-level-00-background);
378
+ --components-list-dropdown-border: var(--color-content-low-border);
379
+ --components-list-dropdown-separator: var(--color-content-low-border);
380
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
381
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
382
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
383
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
384
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
385
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
386
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
387
+ --components-list-dropdown-header-background: var(--color-level-10-background);
388
+ --components-list-dropdown-background: var(--color-level-00-background);
378
389
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
379
390
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
380
391
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -455,18 +466,12 @@
455
466
  --color-interaction-container-neutral-border: var(--color-content-low-text);
456
467
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
457
468
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
458
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
459
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
469
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
470
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
460
471
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
461
472
  }
462
473
 
463
474
  :root {
464
- --color-red-100: var(--color-red-mccs-100);
465
- --color-red-200: var(--color-red-mccs-200);
466
- --color-red-300: var(--color-red-mccs-300);
467
- --color-red-400: var(--color-red-mccs-400);
468
- --color-red-500: var(--color-red-mccs-500);
469
- --color-red-00: var(--color-red-mccs-00);
470
475
  }
471
476
  /**
472
477
  * Do not edit directly, this file was auto-generated.
@@ -545,6 +550,9 @@
545
550
  --components-popover-background: var(--color-gray-ocean-00);
546
551
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
547
552
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
553
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
554
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
555
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
548
556
  --components-overlay-background: var(--color-gray-ocean-850);
549
557
  --components-button-destructive-high-icon-hover: var(--color-base-black);
550
558
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -565,10 +573,10 @@
565
573
  --components-loader-brand-foreground: var(--color-petrol-500);
566
574
  --components-loader-brand-background: var(--color-petrol-50);
567
575
  --components-loader-white-foreground: var(--color-base-white);
568
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
569
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
570
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
571
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
576
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
577
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
578
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
579
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
572
580
  --components-list-native-item-content-hover: var(--color-base-white);
573
581
  --components-list-native-item-content-default: var(--color-base-white);
574
582
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -785,6 +793,8 @@
785
793
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
786
794
  --components-breadcrumb-text-active: var(--color-content-medium-text);
787
795
  --components-breadcrumb-text: var(--color-content-low-text);
796
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
797
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
788
798
  --components-avatar-content-10: var(--color-rainbow-10-icon);
789
799
  --components-avatar-content-9: var(--color-rainbow-9-text);
790
800
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -840,11 +850,17 @@
840
850
  --components-button-destructive-lower-text: var(--color-dont-use-content);
841
851
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
842
852
  --components-button-destructive-lower-background: var(--color-dont-use-background);
843
- --components-list-custom-border: var(--color-content-low-border);
844
- --components-list-custom-separator: var(--color-content-low-border);
845
- --components-list-custom-item-title-content: var(--color-content-low-text);
846
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
847
- --components-list-custom-background: var(--color-level-00-background);
853
+ --components-list-dropdown-border: var(--color-content-low-border);
854
+ --components-list-dropdown-separator: var(--color-content-low-border);
855
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
856
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
857
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
858
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
859
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
860
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
861
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
862
+ --components-list-dropdown-header-background: var(--color-level-10-background);
863
+ --components-list-dropdown-background: var(--color-level-00-background);
848
864
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
849
865
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
850
866
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -924,8 +940,8 @@
924
940
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
925
941
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
926
942
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
927
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
928
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
943
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
944
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
929
945
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
930
946
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
931
947
  }
@@ -1049,12 +1065,6 @@
1049
1065
  --color-turquoise-200: #b8d6d2;
1050
1066
  --color-turquoise-100: #d2e5e3;
1051
1067
  --color-turquoise-50: #ecf4f3;
1052
- --color-red-mccs-00: #ff6161;
1053
- --color-red-mccs-500: #450000;
1054
- --color-red-mccs-400: #7d0000;
1055
- --color-red-mccs-300: #ae0303;
1056
- --color-red-mccs-200: #d00202;
1057
- --color-red-mccs-100: #ff3838;
1058
1068
  --color-red-900: #3d0909;
1059
1069
  --color-red-800: #610e0e;
1060
1070
  --color-red-700: #851313;
@@ -1237,6 +1247,7 @@
1237
1247
  --popover-font-weight: 500;
1238
1248
  --menu-contextual-item-font-weight: 500;
1239
1249
  --menu-contextual-divider-padding-bottom: 3px;
1250
+ --form-field-badge-gap: 0px;
1240
1251
  --list-native-separator-padding-y: 3px;
1241
1252
  --list-native-separator-padding-x: 9px;
1242
1253
  --button-lg-ring-radius: 9px;
@@ -1278,53 +1289,6 @@
1278
1289
  --loader-size-md: var(--spacing-6);
1279
1290
  --loader-size-sm: var(--spacing-5);
1280
1291
  --loader-size-xs: var(--spacing-4);
1281
- --form-toggle-width: var(--spacing-9);
1282
- --form-toggle-switch-dot-selected: var(--spacing-3-5);
1283
- --form-toggle-switch-dot-default: var(--spacing-3);
1284
- --form-toggle-padding-selected: var(--spacing-0-5);
1285
- --form-toggle-padding-default: var(--spacing-1);
1286
- --form-toggle-radius: var(--radius-rounded-full);
1287
- --form-toggle-padding-top: var(--spacing-0);
1288
- --form-toggle-height: var(--spacing-5);
1289
- --form-toggle-border-width: var(--spacing-0-5);
1290
- --form-radio-ring-radius: var(--radius-rounded-full);
1291
- --form-radio-size: var(--spacing-5);
1292
- --form-radio-padding-top: var(--spacing-0);
1293
- --form-radio-inner-circle-size: var(--spacing-2);
1294
- --form-radio-inner-circle-padding: var(--spacing-1-5);
1295
- --form-radio-border-width: var(--spacing-0-5);
1296
- --form-checkbox-icon-stroke: var(--spacing-0-5);
1297
- --form-checkbox-ring-radius: var(--radius-rounded-lg);
1298
- --form-checkbox-size: var(--spacing-5);
1299
- --form-checkbox-radius: var(--radius-rounded-md);
1300
- --form-checkbox-padding-top: var(--spacing-0);
1301
- --form-checkbox-icon-size: var(--spacing-3-5);
1302
- --form-checkbox-border-width: var(--spacing-0-5);
1303
- --form-field-inner-button-padding-y: var(--spacing-2-5);
1304
- --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1305
- --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1306
- --form-field-leading-trailing-line-height: var(--line-height-base);
1307
- --form-field-leading-trailing-icon-size: var(--spacing-5);
1308
- --form-field-leading-trailing-font-size: var(--font-size-sm);
1309
- --form-field-radius: var(--radius-rounded-md);
1310
- --form-field-padding-y: var(--spacing-2);
1311
- --form-field-padding-x-icon-button: var(--spacing-10);
1312
- --form-field-padding-x: var(--spacing-2);
1313
- --form-field-line-height: var(--line-height-base);
1314
- --form-field-gap-inner: var(--spacing-2);
1315
- --form-field-gap: var(--spacing-2);
1316
- --form-field-icon-size: var(--spacing-5);
1317
- --form-field-font-weight: var(--font-weight-medium-emphasis);
1318
- --form-field-font-size: var(--font-size-md);
1319
- --form-label-font-weight: var(--font-weight-medium-emphasis);
1320
- --form-label-line-height: var(--line-height-sm);
1321
- --form-label-gap: var(--spacing-1);
1322
- --form-label-font-size: var(--font-size-sm);
1323
- --form-description-font-weight: var(--font-weight-low-emphasis);
1324
- --form-description-line-height: var(--line-height-sm);
1325
- --form-description-font-size: var(--font-size-sm);
1326
- --form-gap-y: var(--spacing-1);
1327
- --form-gap-x: var(--spacing-3);
1328
1292
  --focus-outline-stroke: var(--spacing-0-5);
1329
1293
  --focus-outline-offset: var(--spacing-0-5);
1330
1294
  --focus-field-stroke: var(--spacing-px);
@@ -1431,21 +1395,71 @@
1431
1395
  --menu-contextual-item-font-size: var(--font-size-sm);
1432
1396
  --menu-contextual-divider-padding-x: var(--spacing-2-5);
1433
1397
  --menu-contextual-divider-padding-top: var(--spacing-1);
1434
- --list-custom-sub-item-padding-left: var(--spacing-10);
1435
- --list-custom-separator-padding-y: var(--spacing-0-5);
1436
- --list-custom-separator-padding-x: var(--spacing-0);
1437
- --list-custom-padding: var(--spacing-2);
1438
- --list-custom-radius: var(--radius-rounded-md);
1439
- --list-custom-gap-y: var(--spacing-0-5);
1440
- --list-custom-item-radius: var(--radius-rounded-md);
1441
- --list-custom-item-gap-x: var(--spacing-3);
1442
- --list-custom-item-padding-y: var(--spacing-2);
1443
- --list-custom-item-padding-x: var(--spacing-2);
1444
- --list-custom-item-padding-right: var(--spacing-2);
1445
- --list-custom-item-padding-left: var(--spacing-8);
1446
- --list-custom-line-height: var(--line-height-base);
1447
- --list-custom-font-size: var(--font-size-md);
1448
- --list-custom-icon-size: var(--spacing-5);
1398
+ --form-toggle-width: var(--spacing-9);
1399
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1400
+ --form-toggle-switch-dot-default: var(--spacing-3);
1401
+ --form-toggle-padding-selected: var(--spacing-0-5);
1402
+ --form-toggle-padding-default: var(--spacing-1);
1403
+ --form-toggle-radius: var(--radius-rounded-full);
1404
+ --form-toggle-padding-top: var(--spacing-0);
1405
+ --form-toggle-height: var(--spacing-5);
1406
+ --form-toggle-border-width: var(--spacing-0-5);
1407
+ --form-radio-ring-radius: var(--radius-rounded-full);
1408
+ --form-radio-size: var(--spacing-5);
1409
+ --form-radio-padding-top: var(--spacing-0);
1410
+ --form-radio-inner-circle-size: var(--spacing-2);
1411
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1412
+ --form-radio-border-width: var(--spacing-0-5);
1413
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1414
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1415
+ --form-checkbox-size: var(--spacing-5);
1416
+ --form-checkbox-radius: var(--radius-rounded-md);
1417
+ --form-checkbox-padding-top: var(--spacing-0);
1418
+ --form-checkbox-icon-size: var(--spacing-3-5);
1419
+ --form-checkbox-border-width: var(--spacing-0-5);
1420
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1421
+ --form-label-line-height: var(--line-height-sm);
1422
+ --form-label-gap: var(--spacing-1);
1423
+ --form-label-font-size: var(--font-size-sm);
1424
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1425
+ --form-description-line-height: var(--line-height-sm);
1426
+ --form-description-font-size: var(--font-size-sm);
1427
+ --form-gap-y: var(--spacing-1);
1428
+ --form-gap-x: var(--spacing-3);
1429
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1430
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1431
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1432
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1433
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1434
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1435
+ --form-field-radius: var(--radius-rounded-md);
1436
+ --form-field-padding-y: var(--spacing-2);
1437
+ --form-field-padding-x-icon-button: var(--spacing-10);
1438
+ --form-field-padding-x: var(--spacing-2);
1439
+ --form-field-line-height: var(--line-height-base);
1440
+ --form-field-gap-inner: var(--spacing-2);
1441
+ --form-field-gap: var(--spacing-2);
1442
+ --form-field-icon-size: var(--spacing-5);
1443
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1444
+ --form-field-font-size: var(--font-size-md);
1445
+ --form-field-badge-padding-y: var(--spacing-0-5);
1446
+ --form-field-badge-padding-x: var(--spacing-1);
1447
+ --list-multiselect-padding: var(--spacing-3);
1448
+ --list-dropdown-sub-item-padding-left: var(--spacing-10);
1449
+ --list-dropdown-separator-padding-y: var(--spacing-0-5);
1450
+ --list-dropdown-separator-padding-x: var(--spacing-0);
1451
+ --list-dropdown-padding: var(--spacing-2);
1452
+ --list-dropdown-radius: var(--radius-rounded-md);
1453
+ --list-dropdown-gap-y: var(--spacing-0-5);
1454
+ --list-dropdown-item-radius: var(--radius-rounded-md);
1455
+ --list-dropdown-item-gap-x: var(--spacing-3);
1456
+ --list-dropdown-item-padding-y: var(--spacing-2);
1457
+ --list-dropdown-item-padding-x: var(--spacing-2);
1458
+ --list-dropdown-item-padding-right: var(--spacing-2);
1459
+ --list-dropdown-item-padding-left: var(--spacing-8);
1460
+ --list-dropdown-line-height: var(--line-height-base);
1461
+ --list-dropdown-font-size: var(--font-size-md);
1462
+ --list-dropdown-icon-size: var(--spacing-5);
1449
1463
  --list-native-sub-item-padding-left: var(--spacing-8);
1450
1464
  --list-native-padding: var(--spacing-2);
1451
1465
  --list-native-radius: var(--radius-rounded-md);
package/dist/css/ocean.css CHANGED
@@ -74,6 +74,8 @@
74
74
  --components-popover-background: var(--color-gray-ocean-900);
75
75
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
76
76
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
77
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
78
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
77
79
  --components-overlay-background: var(--color-gray-ocean-650);
78
80
  --components-button-destructive-high-icon-hover: var(--color-base-black);
79
81
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -96,10 +98,10 @@
96
98
  --components-loader-brand-foreground: var(--color-petrol-500);
97
99
  --components-loader-brand-background: var(--color-petrol-900);
98
100
  --components-loader-white-foreground: var(--color-base-white);
99
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
100
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
101
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
102
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
101
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
102
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
103
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
104
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
103
105
  --components-list-native-item-content-hover: var(--color-base-white);
104
106
  --components-list-native-item-content-default: var(--color-base-white);
105
107
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -226,7 +228,7 @@
226
228
  --color-content-inverted-medium-text: var(--color-gray-ocean-650);
227
229
  --color-content-inverted-high-icon: var(--color-gray-ocean-900);
228
230
  --color-content-inverted-high-text: var(--color-gray-ocean-900);
229
- --color-content-lower-text: var(--color-gray-ocean-450);
231
+ --color-content-lower-text: var(--color-gray-ocean-400);
230
232
  --color-content-low-icon: var(--color-gray-ocean-300);
231
233
  --color-content-low-text: var(--color-gray-ocean-300);
232
234
  --color-content-low-border: var(--color-gray-ocean-500);
@@ -313,6 +315,9 @@
313
315
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
314
316
  --components-breadcrumb-text-active: var(--color-content-medium-text);
315
317
  --components-breadcrumb-text: var(--color-content-low-text);
318
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
319
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
320
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
316
321
  --components-avatar-content-10: var(--color-rainbow-10-icon);
317
322
  --components-avatar-content-9: var(--color-rainbow-9-text);
318
323
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -368,11 +373,17 @@
368
373
  --components-button-destructive-lower-text: var(--color-dont-use-content);
369
374
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
370
375
  --components-button-destructive-lower-background: var(--color-dont-use-background);
371
- --components-list-custom-border: var(--color-content-low-border);
372
- --components-list-custom-separator: var(--color-content-low-border);
373
- --components-list-custom-item-title-content: var(--color-content-low-text);
374
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
375
- --components-list-custom-background: var(--color-level-00-background);
376
+ --components-list-dropdown-border: var(--color-content-low-border);
377
+ --components-list-dropdown-separator: var(--color-content-low-border);
378
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
379
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
380
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
381
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
382
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
383
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
384
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
385
+ --components-list-dropdown-header-background: var(--color-level-10-background);
386
+ --components-list-dropdown-background: var(--color-level-00-background);
376
387
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
377
388
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
378
389
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -451,8 +462,8 @@
451
462
  --color-interaction-container-neutral-border: var(--color-content-low-text);
452
463
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
453
464
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
454
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
455
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
465
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
466
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
456
467
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
457
468
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
458
469
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -559,6 +570,8 @@
559
570
  --components-popover-background: var(--color-gray-ocean-00);
560
571
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
561
572
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
573
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
574
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
562
575
  --components-overlay-background: var(--color-gray-ocean-850);
563
576
  --components-button-destructive-high-icon-hover: var(--color-base-white);
564
577
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -581,10 +594,10 @@
581
594
  --components-loader-brand-foreground: var(--color-petrol-500);
582
595
  --components-loader-brand-background: var(--color-petrol-50);
583
596
  --components-loader-white-foreground: var(--color-base-white);
584
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
585
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
586
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
587
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
597
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
598
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
599
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
600
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
588
601
  --components-list-native-item-content-hover: var(--color-base-white);
589
602
  --components-list-native-item-content-default: var(--color-base-white);
590
603
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -798,6 +811,9 @@
798
811
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
799
812
  --components-breadcrumb-text-active: var(--color-content-medium-text);
800
813
  --components-breadcrumb-text: var(--color-content-low-text);
814
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
815
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
816
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
801
817
  --components-avatar-content-10: var(--color-rainbow-10-icon);
802
818
  --components-avatar-content-9: var(--color-rainbow-9-text);
803
819
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -853,11 +869,17 @@
853
869
  --components-button-destructive-lower-text: var(--color-dont-use-content);
854
870
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
855
871
  --components-button-destructive-lower-background: var(--color-dont-use-background);
856
- --components-list-custom-border: var(--color-content-low-border);
857
- --components-list-custom-separator: var(--color-content-low-border);
858
- --components-list-custom-item-title-content: var(--color-content-low-text);
859
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
860
- --components-list-custom-background: var(--color-level-00-background);
872
+ --components-list-dropdown-border: var(--color-content-low-border);
873
+ --components-list-dropdown-separator: var(--color-content-low-border);
874
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
875
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
876
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
877
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
878
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
879
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
880
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
881
+ --components-list-dropdown-header-background: var(--color-level-10-background);
882
+ --components-list-dropdown-background: var(--color-level-00-background);
861
883
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
862
884
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
863
885
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -936,8 +958,8 @@
936
958
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
937
959
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
938
960
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
939
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
940
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
961
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
962
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
941
963
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
942
964
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
943
965
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -1064,12 +1086,6 @@
1064
1086
  --color-turquoise-200: #b8d6d2;
1065
1087
  --color-turquoise-100: #d2e5e3;
1066
1088
  --color-turquoise-50: #ecf4f3;
1067
- --color-red-mccs-00: #ff6161;
1068
- --color-red-mccs-500: #450000;
1069
- --color-red-mccs-400: #7d0000;
1070
- --color-red-mccs-300: #ae0303;
1071
- --color-red-mccs-200: #d00202;
1072
- --color-red-mccs-100: #ff3838;
1073
1089
  --color-red-900: #3d0909;
1074
1090
  --color-red-800: #610e0e;
1075
1091
  --color-red-700: #851313;
@@ -1252,6 +1268,7 @@
1252
1268
  --popover-font-weight: 500;
1253
1269
  --menu-contextual-item-font-weight: 500;
1254
1270
  --menu-contextual-divider-padding-bottom: 3px;
1271
+ --form-field-badge-gap: 0px;
1255
1272
  --list-native-separator-padding-y: 3px;
1256
1273
  --list-native-separator-padding-x: 9px;
1257
1274
  --button-lg-ring-radius: 9px;
@@ -1293,53 +1310,6 @@
1293
1310
  --loader-size-md: var(--spacing-6);
1294
1311
  --loader-size-sm: var(--spacing-5);
1295
1312
  --loader-size-xs: var(--spacing-4);
1296
- --form-toggle-width: var(--spacing-9);
1297
- --form-toggle-switch-dot-selected: var(--spacing-3-5);
1298
- --form-toggle-switch-dot-default: var(--spacing-3);
1299
- --form-toggle-padding-selected: var(--spacing-0-5);
1300
- --form-toggle-padding-default: var(--spacing-1);
1301
- --form-toggle-radius: var(--radius-rounded-full);
1302
- --form-toggle-padding-top: var(--spacing-0);
1303
- --form-toggle-height: var(--spacing-5);
1304
- --form-toggle-border-width: var(--spacing-0-5);
1305
- --form-radio-ring-radius: var(--radius-rounded-full);
1306
- --form-radio-size: var(--spacing-5);
1307
- --form-radio-padding-top: var(--spacing-0);
1308
- --form-radio-inner-circle-size: var(--spacing-2);
1309
- --form-radio-inner-circle-padding: var(--spacing-1-5);
1310
- --form-radio-border-width: var(--spacing-0-5);
1311
- --form-checkbox-icon-stroke: var(--spacing-0-5);
1312
- --form-checkbox-ring-radius: var(--radius-rounded-lg);
1313
- --form-checkbox-size: var(--spacing-5);
1314
- --form-checkbox-radius: var(--radius-rounded-md);
1315
- --form-checkbox-padding-top: var(--spacing-0);
1316
- --form-checkbox-icon-size: var(--spacing-3-5);
1317
- --form-checkbox-border-width: var(--spacing-0-5);
1318
- --form-field-inner-button-padding-y: var(--spacing-2-5);
1319
- --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1320
- --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1321
- --form-field-leading-trailing-line-height: var(--line-height-base);
1322
- --form-field-leading-trailing-icon-size: var(--spacing-5);
1323
- --form-field-leading-trailing-font-size: var(--font-size-sm);
1324
- --form-field-radius: var(--radius-rounded-md);
1325
- --form-field-padding-y: var(--spacing-2);
1326
- --form-field-padding-x-icon-button: var(--spacing-10);
1327
- --form-field-padding-x: var(--spacing-2);
1328
- --form-field-line-height: var(--line-height-base);
1329
- --form-field-gap-inner: var(--spacing-2);
1330
- --form-field-gap: var(--spacing-2);
1331
- --form-field-icon-size: var(--spacing-5);
1332
- --form-field-font-weight: var(--font-weight-medium-emphasis);
1333
- --form-field-font-size: var(--font-size-md);
1334
- --form-label-font-weight: var(--font-weight-medium-emphasis);
1335
- --form-label-line-height: var(--line-height-sm);
1336
- --form-label-gap: var(--spacing-1);
1337
- --form-label-font-size: var(--font-size-sm);
1338
- --form-description-font-weight: var(--font-weight-low-emphasis);
1339
- --form-description-line-height: var(--line-height-sm);
1340
- --form-description-font-size: var(--font-size-sm);
1341
- --form-gap-y: var(--spacing-1);
1342
- --form-gap-x: var(--spacing-3);
1343
1313
  --focus-outline-stroke: var(--spacing-0-5);
1344
1314
  --focus-outline-offset: var(--spacing-0-5);
1345
1315
  --focus-field-stroke: var(--spacing-px);
@@ -1446,21 +1416,71 @@
1446
1416
  --menu-contextual-item-font-size: var(--font-size-sm);
1447
1417
  --menu-contextual-divider-padding-x: var(--spacing-2-5);
1448
1418
  --menu-contextual-divider-padding-top: var(--spacing-1);
1449
- --list-custom-sub-item-padding-left: var(--spacing-10);
1450
- --list-custom-separator-padding-y: var(--spacing-0-5);
1451
- --list-custom-separator-padding-x: var(--spacing-0);
1452
- --list-custom-padding: var(--spacing-2);
1453
- --list-custom-radius: var(--radius-rounded-md);
1454
- --list-custom-gap-y: var(--spacing-0-5);
1455
- --list-custom-item-radius: var(--radius-rounded-md);
1456
- --list-custom-item-gap-x: var(--spacing-3);
1457
- --list-custom-item-padding-y: var(--spacing-2);
1458
- --list-custom-item-padding-x: var(--spacing-2);
1459
- --list-custom-item-padding-right: var(--spacing-2);
1460
- --list-custom-item-padding-left: var(--spacing-8);
1461
- --list-custom-line-height: var(--line-height-base);
1462
- --list-custom-font-size: var(--font-size-md);
1463
- --list-custom-icon-size: var(--spacing-5);
1419
+ --form-toggle-width: var(--spacing-9);
1420
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1421
+ --form-toggle-switch-dot-default: var(--spacing-3);
1422
+ --form-toggle-padding-selected: var(--spacing-0-5);
1423
+ --form-toggle-padding-default: var(--spacing-1);
1424
+ --form-toggle-radius: var(--radius-rounded-full);
1425
+ --form-toggle-padding-top: var(--spacing-0);
1426
+ --form-toggle-height: var(--spacing-5);
1427
+ --form-toggle-border-width: var(--spacing-0-5);
1428
+ --form-radio-ring-radius: var(--radius-rounded-full);
1429
+ --form-radio-size: var(--spacing-5);
1430
+ --form-radio-padding-top: var(--spacing-0);
1431
+ --form-radio-inner-circle-size: var(--spacing-2);
1432
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1433
+ --form-radio-border-width: var(--spacing-0-5);
1434
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1435
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1436
+ --form-checkbox-size: var(--spacing-5);
1437
+ --form-checkbox-radius: var(--radius-rounded-md);
1438
+ --form-checkbox-padding-top: var(--spacing-0);
1439
+ --form-checkbox-icon-size: var(--spacing-3-5);
1440
+ --form-checkbox-border-width: var(--spacing-0-5);
1441
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1442
+ --form-label-line-height: var(--line-height-sm);
1443
+ --form-label-gap: var(--spacing-1);
1444
+ --form-label-font-size: var(--font-size-sm);
1445
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1446
+ --form-description-line-height: var(--line-height-sm);
1447
+ --form-description-font-size: var(--font-size-sm);
1448
+ --form-gap-y: var(--spacing-1);
1449
+ --form-gap-x: var(--spacing-3);
1450
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1451
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1452
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1453
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1454
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1455
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1456
+ --form-field-radius: var(--radius-rounded-md);
1457
+ --form-field-padding-y: var(--spacing-2);
1458
+ --form-field-padding-x-icon-button: var(--spacing-10);
1459
+ --form-field-padding-x: var(--spacing-2);
1460
+ --form-field-line-height: var(--line-height-base);
1461
+ --form-field-gap-inner: var(--spacing-2);
1462
+ --form-field-gap: var(--spacing-2);
1463
+ --form-field-icon-size: var(--spacing-5);
1464
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1465
+ --form-field-font-size: var(--font-size-md);
1466
+ --form-field-badge-padding-y: var(--spacing-0-5);
1467
+ --form-field-badge-padding-x: var(--spacing-1);
1468
+ --list-multiselect-padding: var(--spacing-3);
1469
+ --list-dropdown-sub-item-padding-left: var(--spacing-10);
1470
+ --list-dropdown-separator-padding-y: var(--spacing-0-5);
1471
+ --list-dropdown-separator-padding-x: var(--spacing-0);
1472
+ --list-dropdown-padding: var(--spacing-2);
1473
+ --list-dropdown-radius: var(--radius-rounded-md);
1474
+ --list-dropdown-gap-y: var(--spacing-0-5);
1475
+ --list-dropdown-item-radius: var(--radius-rounded-md);
1476
+ --list-dropdown-item-gap-x: var(--spacing-3);
1477
+ --list-dropdown-item-padding-y: var(--spacing-2);
1478
+ --list-dropdown-item-padding-x: var(--spacing-2);
1479
+ --list-dropdown-item-padding-right: var(--spacing-2);
1480
+ --list-dropdown-item-padding-left: var(--spacing-8);
1481
+ --list-dropdown-line-height: var(--line-height-base);
1482
+ --list-dropdown-font-size: var(--font-size-md);
1483
+ --list-dropdown-icon-size: var(--spacing-5);
1464
1484
  --list-native-sub-item-padding-left: var(--spacing-8);
1465
1485
  --list-native-padding: var(--spacing-2);
1466
1486
  --list-native-radius: var(--radius-rounded-md);