@nova-design-system/nova-base 3.0.0-beta.41 → 3.0.0-beta.43

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 (25) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-tokens.js +6 -0
  3. package/dist/css/mccs.css +104 -28
  4. package/dist/css/nova-utils.css +12 -0
  5. package/dist/css/ocean.css +104 -22
  6. package/dist/css/spark.css +104 -22
  7. package/dist/generated/nova-tailwind-tokens.d.ts +6 -0
  8. package/dist/generated/nova-tailwind-tokens.js +6 -0
  9. package/dist/js/mccs_dark.d.ts +36 -8
  10. package/dist/js/mccs_dark.js +36 -8
  11. package/dist/js/mccs_light.d.ts +36 -8
  12. package/dist/js/mccs_light.js +36 -8
  13. package/dist/js/ocean_dark.d.ts +36 -8
  14. package/dist/js/ocean_dark.js +36 -8
  15. package/dist/js/ocean_light.d.ts +36 -8
  16. package/dist/js/ocean_light.js +36 -8
  17. package/dist/js/primitives.d.ts +0 -6
  18. package/dist/js/primitives.js +0 -6
  19. package/dist/js/spacings.d.ts +32 -0
  20. package/dist/js/spacings.js +32 -0
  21. package/dist/js/spark_dark.d.ts +36 -8
  22. package/dist/js/spark_dark.js +36 -8
  23. package/dist/js/spark_light.d.ts +36 -8
  24. package/dist/js/spark_light.js +36 -8
  25. package/package.json +1 -1
package/dist/cjs/generated/nova-tailwind-tokens.js CHANGED
@@ -181,6 +181,12 @@ exports.NOVA_TAILWIND_TOKENS = {
181
181
  '.text-feedback-warning-low': {
182
182
  'color': 'var(--color-feedback-warning-low-text)'
183
183
  },
184
+ '.bg-focus': {
185
+ 'background-color': 'var(--color-focus-background)'
186
+ },
187
+ '.bg-focus-inverted': {
188
+ 'background-color': 'var(--color-focus-background-inverted)'
189
+ },
184
190
  '.bg-interaction-container-branded-high': {
185
191
  'background-color': 'var(--color-interaction-container-branded-high-background)'
186
192
  },
package/dist/css/mccs.css CHANGED
@@ -33,8 +33,6 @@
33
33
  --components-button-high-border-active: rgba(255, 255, 255, 0);
34
34
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
35
35
  --components-button-high-border: rgba(255, 255, 255, 0);
36
- --components-datagrid-background: rgba(0, 0, 0, 0);
37
- --components-wpf-components-2: #ffffff;
38
36
  --shadow-y-axis-2xl: 25px;
39
37
  --shadow-y-axis-xl-2: 20px;
40
38
  --shadow-y-axis-xl-1: 10px;
@@ -42,12 +40,15 @@
42
40
  --shadow-y-axis-lg-1: 4px;
43
41
  --shadow-y-axis-md-2: 4px;
44
42
  --shadow-y-axis-md-1: 2px;
45
- --shadow-y-axis-base: 1px;
43
+ --shadow-y-axis-base-2: 1px;
44
+ --shadow-y-axis-base-1: 1px;
46
45
  --shadow-y-axis-none: 0px;
47
46
  --shadow-spread-2xl: -6px;
48
47
  --shadow-spread-xl: -2px;
49
48
  --shadow-spread-lg-2: 0px;
50
49
  --shadow-spread-lg-1: 0px;
50
+ --shadow-spread-md: 0px;
51
+ --shadow-spread-base: 0px;
51
52
  --shadow-blur-2xl: 50px;
52
53
  --shadow-blur-xl-2: 0px;
53
54
  --shadow-blur-xl-1: 10px;
@@ -77,9 +78,17 @@
77
78
  --components-popover-background: var(--color-gray-ocean-900);
78
79
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
79
80
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
81
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
82
+ --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
83
+ --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
84
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
80
85
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
81
86
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
82
87
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
88
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
89
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
90
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
91
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
83
92
  --components-overlay-background: var(--color-gray-ocean-650);
84
93
  --components-button-destructive-high-icon-hover: var(--color-base-black);
85
94
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -319,6 +328,21 @@
319
328
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
320
329
  --components-menu-contextual-border: var(--color-content-low-border);
321
330
  --components-menu-contextual-background: var(--color-level-00-background);
331
+ --components-calendar-background: var(--color-level-00-background);
332
+ --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
333
+ --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
334
+ --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
335
+ --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
336
+ --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
337
+ --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
338
+ --components-calendar-cell-dot: var(--color-content-high-icon);
339
+ --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
340
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
341
+ --components-calendar-weeks-text: var(--color-level-inverted-15-background);
342
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
343
+ --components-calendar-weeks-background: var(--color-level-10-background);
344
+ --components-calendar-header-text: var(--color-content-high-text);
345
+ --components-calendar-border: var(--color-content-low-border);
322
346
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
323
347
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
324
348
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
@@ -354,6 +378,11 @@
354
378
  --components-avatar-background-3: var(--color-rainbow-3-background);
355
379
  --components-avatar-background-2: var(--color-rainbow-2-background);
356
380
  --components-avatar-background-1: var(--color-rainbow-1-background);
381
+ --components-datagrid-body-subtext: var(--color-content-low-text);
382
+ --components-datagrid-body-text: var(--color-content-high-text);
383
+ --components-datagrid-body-border: var(--color-content-low-border);
384
+ --components-datagrid-header-text: var(--color-content-low-text);
385
+ --components-datagrid-header-border: var(--color-content-low-border);
357
386
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
358
387
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
359
388
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -458,13 +487,10 @@
458
487
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
459
488
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
460
489
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
461
- --components-datagrid-border-header: var(--color-content-low-border);
462
- --components-datagrid-border-body: var(--color-content-low-border);
463
- --components-datagrid-content-subtext: var(--color-content-low-text);
464
- --components-datagrid-content-text: var(--color-content-high-text);
465
- --components-datagrid-content-header: var(--color-content-low-text);
466
490
  --color-focus-success: var(--color-feedback-success-low-border);
467
491
  --color-focus-destructive: var(--color-feedback-error-high-border);
492
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
493
+ --color-focus-background: var(--color-level-00-background);
468
494
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
469
495
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
470
496
  --color-interaction-link-low-icon: var(--color-content-high-text);
@@ -477,18 +503,14 @@
477
503
  --color-interaction-container-neutral-border: var(--color-content-low-text);
478
504
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
479
505
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
506
+ --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
507
+ --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
480
508
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
481
509
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
482
510
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
483
511
  }
484
512
 
485
513
  :root {
486
- --color-red-100: var(--color-red-mccs-100);
487
- --color-red-200: var(--color-red-mccs-200);
488
- --color-red-300: var(--color-red-mccs-300);
489
- --color-red-400: var(--color-red-mccs-400);
490
- --color-red-500: var(--color-red-mccs-500);
491
- --color-red-00: var(--color-red-mccs-00);
492
514
  }
493
515
  /**
494
516
  * Do not edit directly, this file was auto-generated.
@@ -525,8 +547,6 @@
525
547
  --components-button-high-border-active: rgba(255, 255, 255, 0);
526
548
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
527
549
  --components-button-high-border: rgba(255, 255, 255, 0);
528
- --components-datagrid-background: rgba(255, 255, 255, 0);
529
- --components-wpf-components-2: #ffffff;
530
550
  --shadow-y-axis-2xl: 25px;
531
551
  --shadow-y-axis-xl-2: 20px;
532
552
  --shadow-y-axis-xl-1: 10px;
@@ -534,12 +554,15 @@
534
554
  --shadow-y-axis-lg-1: 4px;
535
555
  --shadow-y-axis-md-2: 4px;
536
556
  --shadow-y-axis-md-1: 2px;
537
- --shadow-y-axis-base: 1px;
557
+ --shadow-y-axis-base-2: 1px;
558
+ --shadow-y-axis-base-1: 1px;
538
559
  --shadow-y-axis-none: 0px;
539
560
  --shadow-spread-2xl: -12px;
540
561
  --shadow-spread-xl: -5px;
541
562
  --shadow-spread-lg-2: -3px;
542
563
  --shadow-spread-lg-1: -2px;
564
+ --shadow-spread-md: 0px;
565
+ --shadow-spread-base: 0px;
543
566
  --shadow-blur-2xl: 50px;
544
567
  --shadow-blur-xl-2: 25px;
545
568
  --shadow-blur-xl-1: 10px;
@@ -569,9 +592,17 @@
569
592
  --components-popover-background: var(--color-gray-ocean-00);
570
593
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
571
594
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
595
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
596
+ --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
597
+ --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
598
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
572
599
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
573
600
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
574
601
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
602
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
603
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
604
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
605
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
575
606
  --components-overlay-background: var(--color-gray-ocean-850);
576
607
  --components-button-destructive-high-icon-hover: var(--color-base-black);
577
608
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -811,6 +842,21 @@
811
842
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
812
843
  --components-menu-contextual-border: var(--color-content-low-border);
813
844
  --components-menu-contextual-background: var(--color-level-00-background);
845
+ --components-calendar-background: var(--color-level-00-background);
846
+ --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
847
+ --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
848
+ --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
849
+ --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
850
+ --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
851
+ --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
852
+ --components-calendar-cell-dot: var(--color-content-high-icon);
853
+ --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
854
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
855
+ --components-calendar-weeks-text: var(--color-content-high-text);
856
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
857
+ --components-calendar-weeks-background: var(--color-level-10-background);
858
+ --components-calendar-header-text: var(--color-content-high-text);
859
+ --components-calendar-border: var(--color-content-low-border);
814
860
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
815
861
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
816
862
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
@@ -846,6 +892,11 @@
846
892
  --components-avatar-background-3: var(--color-rainbow-3-background);
847
893
  --components-avatar-background-2: var(--color-rainbow-2-background);
848
894
  --components-avatar-background-1: var(--color-rainbow-1-background);
895
+ --components-datagrid-body-subtext: var(--color-content-low-text);
896
+ --components-datagrid-body-text: var(--color-content-high-text);
897
+ --components-datagrid-body-border: var(--color-content-low-border);
898
+ --components-datagrid-header-text: var(--color-content-low-text);
899
+ --components-datagrid-header-border: var(--color-content-medium-border);
849
900
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
850
901
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
851
902
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -949,13 +1000,10 @@
949
1000
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
950
1001
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
951
1002
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
952
- --components-datagrid-border-header: var(--color-content-medium-border);
953
- --components-datagrid-border-body: var(--color-content-low-border);
954
- --components-datagrid-content-subtext: var(--color-content-low-text);
955
- --components-datagrid-content-text: var(--color-content-high-text);
956
- --components-datagrid-content-header: var(--color-content-low-text);
957
1003
  --color-focus-success: var(--color-feedback-success-low-border);
958
1004
  --color-focus-destructive: var(--color-feedback-error-high-border);
1005
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1006
+ --color-focus-background: var(--color-level-00-background);
959
1007
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
960
1008
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
961
1009
  --color-interaction-link-low-icon: var(--color-content-high-text);
@@ -968,6 +1016,8 @@
968
1016
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
969
1017
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
970
1018
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1019
+ --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1020
+ --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
971
1021
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
972
1022
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
973
1023
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
@@ -1093,12 +1143,6 @@
1093
1143
  --color-turquoise-200: #b8d6d2;
1094
1144
  --color-turquoise-100: #d2e5e3;
1095
1145
  --color-turquoise-50: #ecf4f3;
1096
- --color-red-mccs-00: #ff6161;
1097
- --color-red-mccs-500: #450000;
1098
- --color-red-mccs-400: #7d0000;
1099
- --color-red-mccs-300: #ae0303;
1100
- --color-red-mccs-200: #d00202;
1101
- --color-red-mccs-100: #ff3838;
1102
1146
  --color-red-900: #3d0909;
1103
1147
  --color-red-800: #610e0e;
1104
1148
  --color-red-700: #851313;
@@ -1284,6 +1328,7 @@
1284
1328
  --form-field-badge-gap: 0px;
1285
1329
  --list-native-separator-padding-y: 3px;
1286
1330
  --list-native-separator-padding-x: 9px;
1331
+ --calendar-cell-dot-size: 3px;
1287
1332
  --button-lg-ring-radius: 9px;
1288
1333
  --button-md-ring-radius: 7px;
1289
1334
  --button-sm-ring-radius: 5px;
@@ -1338,6 +1383,14 @@
1338
1383
  --dialog-header-gap-y: var(--spacing-0);
1339
1384
  --dialog-dismissible-position-right: var(--spacing-3);
1340
1385
  --dialog-dismissible-position-top: var(--spacing-5);
1386
+ --datagrid-cell-header-padding-y: var(--spacing-3);
1387
+ --datagrid-cell-header-padding-right: var(--spacing-2);
1388
+ --datagrid-cell-header-padding-x: var(--spacing-4);
1389
+ --datagrid-cell-body-actions-padding-y: var(--spacing-1);
1390
+ --datagrid-cell-body-padding-y: var(--spacing-2);
1391
+ --datagrid-cell-body-actions-gap-x: var(--spacing-2);
1392
+ --datagrid-cell-body-avatar-gap-x: var(--spacing-3);
1393
+ --datagrid-cell-body-padding-x: var(--spacing-4);
1341
1394
  --breadcrumb-padding-y: var(--spacing-1);
1342
1395
  --badge-radius: var(--radius-rounded-full);
1343
1396
  --badge-padding-y: var(--spacing-1);
@@ -1505,6 +1558,29 @@
1505
1558
  --list-native-line-height: var(--line-height-base);
1506
1559
  --list-native-font-size: var(--font-size-md);
1507
1560
  --list-native-icon-size: var(--spacing-5);
1561
+ --calendar-navigation-buttons-gap: var(--spacing-1);
1562
+ --calendar-controls-padding-top: var(--spacing-2);
1563
+ --calendar-controls-margin-top: var(--spacing-1);
1564
+ --calendar-weeks-size: var(--spacing-10);
1565
+ --calendar-weeks-radius: var(--radius-rounded);
1566
+ --calendar-header-button-size: var(--spacing-8);
1567
+ --calendar-header-margin-bottom: var(--spacing-1);
1568
+ --calendar-header-line-height: var(--line-height-sm);
1569
+ --calendar-header-font-weight: var(--font-weight-medium-emphasis);
1570
+ --calendar-header-font-size: var(--font-size-sm);
1571
+ --calendar-grid-gap-y: var(--spacing-0-5);
1572
+ --calendar-grid-gap-x: var(--spacing-0);
1573
+ --calendar-radius: var(--radius-rounded-md);
1574
+ --calendar-weeks-calendar-gap-x: var(--spacing-2);
1575
+ --calendar-gap-y: var(--spacing-1);
1576
+ --calendar-gap-x: var(--spacing-1);
1577
+ --calendar-double-gap-x: var(--spacing-3);
1578
+ --calendar-padding: var(--spacing-1);
1579
+ --calendar-cell-radius: var(--radius-rounded-2xl);
1580
+ --calendar-cell-size: var(--spacing-8);
1581
+ --calendar-cell-line-height: var(--line-height-sm);
1582
+ --calendar-cell-font-weight: var(--font-weight-low-emphasis);
1583
+ --calendar-cell-font-size: var(--font-size-sm);
1508
1584
  --button-lg-padding-y: var(--spacing-2-5);
1509
1585
  --button-lg-padding-x: var(--spacing-4);
1510
1586
  --button-lg-line-height: var(--line-height-lg);
package/dist/css/nova-utils.css CHANGED
@@ -6947,6 +6947,14 @@ h6 {
6947
6947
  color: var(--color-feedback-warning-low-text) !important;
6948
6948
  }
6949
6949
 
6950
+ .bg-focus {
6951
+ background-color: var(--color-focus-background) !important;
6952
+ }
6953
+
6954
+ .bg-focus-inverted {
6955
+ background-color: var(--color-focus-background-inverted) !important;
6956
+ }
6957
+
6950
6958
  .bg-interaction-container-branded-high {
6951
6959
  background-color: var(--color-interaction-container-branded-high-background) !important;
6952
6960
  }
@@ -29042,4 +29050,8 @@ h6 {
29042
29050
  .dark\:text-medium {
29043
29051
  color: var(--color-content-medium-text) !important;
29044
29052
  }
29053
+
29054
+ .dark\:bg-focus {
29055
+ background-color: var(--color-focus-background) !important;
29056
+ }
29045
29057
  }
package/dist/css/ocean.css CHANGED
@@ -35,8 +35,6 @@
35
35
  --components-button-high-border-active: rgba(255, 255, 255, 0);
36
36
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
37
37
  --components-button-high-border: rgba(255, 255, 255, 0);
38
- --components-datagrid-background: rgba(0, 0, 0, 0);
39
- --components-wpf-components-2: #ffffff;
40
38
  --shadow-y-axis-2xl: 25px;
41
39
  --shadow-y-axis-xl-2: 20px;
42
40
  --shadow-y-axis-xl-1: 10px;
@@ -44,12 +42,15 @@
44
42
  --shadow-y-axis-lg-1: 4px;
45
43
  --shadow-y-axis-md-2: 4px;
46
44
  --shadow-y-axis-md-1: 2px;
47
- --shadow-y-axis-base: 1px;
45
+ --shadow-y-axis-base-2: 1px;
46
+ --shadow-y-axis-base-1: 1px;
48
47
  --shadow-y-axis-none: 0px;
49
48
  --shadow-spread-2xl: -6px;
50
49
  --shadow-spread-xl: -2px;
51
50
  --shadow-spread-lg-2: 0px;
52
51
  --shadow-spread-lg-1: 0px;
52
+ --shadow-spread-md: 0px;
53
+ --shadow-spread-base: 0px;
53
54
  --shadow-blur-2xl: 50px;
54
55
  --shadow-blur-xl-2: 0px;
55
56
  --shadow-blur-xl-1: 10px;
@@ -76,8 +77,13 @@
76
77
  --components-popover-background: var(--color-gray-ocean-900);
77
78
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
78
79
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
80
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
81
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
79
82
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
80
83
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
84
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
85
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
86
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
81
87
  --components-overlay-background: var(--color-gray-ocean-650);
82
88
  --components-button-destructive-high-icon-hover: var(--color-base-black);
83
89
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -315,6 +321,23 @@
315
321
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
316
322
  --components-menu-contextual-border: var(--color-content-low-border);
317
323
  --components-menu-contextual-background: var(--color-level-00-background);
324
+ --components-calendar-background: var(--color-level-00-background);
325
+ --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
326
+ --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
327
+ --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
328
+ --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
329
+ --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
330
+ --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
331
+ --components-calendar-cell-dot: var(--color-content-high-icon);
332
+ --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
333
+ --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
334
+ --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
335
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
336
+ --components-calendar-weeks-text: var(--color-content-high-text);
337
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
338
+ --components-calendar-weeks-background: var(--color-level-10-background);
339
+ --components-calendar-header-text: var(--color-content-high-text);
340
+ --components-calendar-border: var(--color-content-low-border);
318
341
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
319
342
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
320
343
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
@@ -351,6 +374,12 @@
351
374
  --components-avatar-background-3: var(--color-rainbow-3-background);
352
375
  --components-avatar-background-2: var(--color-rainbow-2-background);
353
376
  --components-avatar-background-1: var(--color-rainbow-1-background);
377
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
378
+ --components-datagrid-body-subtext: var(--color-content-low-text);
379
+ --components-datagrid-body-text: var(--color-content-high-text);
380
+ --components-datagrid-body-border: var(--color-content-low-border);
381
+ --components-datagrid-header-text: var(--color-content-low-text);
382
+ --components-datagrid-header-border: var(--color-content-medium-border);
354
383
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
355
384
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
356
385
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -454,13 +483,10 @@
454
483
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
455
484
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
456
485
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
457
- --components-datagrid-border-header: var(--color-content-medium-border);
458
- --components-datagrid-border-body: var(--color-content-low-border);
459
- --components-datagrid-content-subtext: var(--color-content-low-text);
460
- --components-datagrid-content-text: var(--color-content-high-text);
461
- --components-datagrid-content-header: var(--color-content-low-text);
462
486
  --color-focus-success: var(--color-feedback-success-low-border);
463
487
  --color-focus-destructive: var(--color-feedback-error-high-border);
488
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
489
+ --color-focus-background: var(--color-level-00-background);
464
490
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
465
491
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
466
492
  --color-interaction-link-low-icon: var(--color-content-high-text);
@@ -473,6 +499,8 @@
473
499
  --color-interaction-container-neutral-border: var(--color-content-low-text);
474
500
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
475
501
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
502
+ --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
503
+ --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
476
504
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
477
505
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
478
506
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
@@ -542,8 +570,6 @@
542
570
  --components-button-high-border-active: rgba(255, 255, 255, 0);
543
571
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
544
572
  --components-button-high-border: rgba(255, 255, 255, 0);
545
- --components-datagrid-background: rgba(255, 255, 255, 0);
546
- --components-wpf-components-2: #ffffff;
547
573
  --shadow-y-axis-2xl: 25px;
548
574
  --shadow-y-axis-xl-2: 20px;
549
575
  --shadow-y-axis-xl-1: 10px;
@@ -551,12 +577,15 @@
551
577
  --shadow-y-axis-lg-1: 4px;
552
578
  --shadow-y-axis-md-2: 4px;
553
579
  --shadow-y-axis-md-1: 2px;
554
- --shadow-y-axis-base: 1px;
580
+ --shadow-y-axis-base-2: 1px;
581
+ --shadow-y-axis-base-1: 1px;
555
582
  --shadow-y-axis-none: 0px;
556
583
  --shadow-spread-2xl: -12px;
557
584
  --shadow-spread-xl: -5px;
558
585
  --shadow-spread-lg-2: -3px;
559
586
  --shadow-spread-lg-1: -2px;
587
+ --shadow-spread-md: 0px;
588
+ --shadow-spread-base: 0px;
560
589
  --shadow-blur-2xl: 50px;
561
590
  --shadow-blur-xl-2: 25px;
562
591
  --shadow-blur-xl-1: 10px;
@@ -583,8 +612,13 @@
583
612
  --components-popover-background: var(--color-gray-ocean-00);
584
613
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
585
614
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
615
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
616
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
586
617
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
587
618
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
619
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
620
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
621
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
588
622
  --components-overlay-background: var(--color-gray-ocean-850);
589
623
  --components-button-destructive-high-icon-hover: var(--color-base-white);
590
624
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -822,6 +856,23 @@
822
856
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
823
857
  --components-menu-contextual-border: var(--color-content-low-border);
824
858
  --components-menu-contextual-background: var(--color-level-00-background);
859
+ --components-calendar-background: var(--color-level-00-background);
860
+ --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
861
+ --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
862
+ --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
863
+ --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
864
+ --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
865
+ --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
866
+ --components-calendar-cell-dot: var(--color-content-high-icon);
867
+ --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
868
+ --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
869
+ --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
870
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
871
+ --components-calendar-weeks-text: var(--color-content-high-text);
872
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
873
+ --components-calendar-weeks-background: var(--color-level-10-background);
874
+ --components-calendar-header-text: var(--color-content-high-text);
875
+ --components-calendar-border: var(--color-content-low-border);
825
876
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
826
877
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
827
878
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
@@ -858,6 +909,12 @@
858
909
  --components-avatar-background-3: var(--color-rainbow-3-background);
859
910
  --components-avatar-background-2: var(--color-rainbow-2-background);
860
911
  --components-avatar-background-1: var(--color-rainbow-1-background);
912
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
913
+ --components-datagrid-body-subtext: var(--color-content-low-text);
914
+ --components-datagrid-body-text: var(--color-content-high-text);
915
+ --components-datagrid-body-border: var(--color-content-low-border);
916
+ --components-datagrid-header-text: var(--color-content-low-text);
917
+ --components-datagrid-header-border: var(--color-content-medium-border);
861
918
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
862
919
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
863
920
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -961,13 +1018,10 @@
961
1018
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
962
1019
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
963
1020
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
964
- --components-datagrid-border-header: var(--color-content-medium-border);
965
- --components-datagrid-border-body: var(--color-content-low-border);
966
- --components-datagrid-content-subtext: var(--color-content-low-text);
967
- --components-datagrid-content-text: var(--color-content-high-text);
968
- --components-datagrid-content-header: var(--color-content-low-text);
969
1021
  --color-focus-success: var(--color-feedback-success-low-border);
970
1022
  --color-focus-destructive: var(--color-feedback-error-high-border);
1023
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1024
+ --color-focus-background: var(--color-level-00-background);
971
1025
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
972
1026
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
973
1027
  --color-interaction-link-low-icon: var(--color-content-high-text);
@@ -980,6 +1034,8 @@
980
1034
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
981
1035
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
982
1036
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1037
+ --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1038
+ --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
983
1039
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
984
1040
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
985
1041
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
@@ -1108,12 +1164,6 @@
1108
1164
  --color-turquoise-200: #b8d6d2;
1109
1165
  --color-turquoise-100: #d2e5e3;
1110
1166
  --color-turquoise-50: #ecf4f3;
1111
- --color-red-mccs-00: #ff6161;
1112
- --color-red-mccs-500: #450000;
1113
- --color-red-mccs-400: #7d0000;
1114
- --color-red-mccs-300: #ae0303;
1115
- --color-red-mccs-200: #d00202;
1116
- --color-red-mccs-100: #ff3838;
1117
1167
  --color-red-900: #3d0909;
1118
1168
  --color-red-800: #610e0e;
1119
1169
  --color-red-700: #851313;
@@ -1299,6 +1349,7 @@
1299
1349
  --form-field-badge-gap: 0px;
1300
1350
  --list-native-separator-padding-y: 3px;
1301
1351
  --list-native-separator-padding-x: 9px;
1352
+ --calendar-cell-dot-size: 3px;
1302
1353
  --button-lg-ring-radius: 9px;
1303
1354
  --button-md-ring-radius: 7px;
1304
1355
  --button-sm-ring-radius: 5px;
@@ -1353,6 +1404,14 @@
1353
1404
  --dialog-header-gap-y: var(--spacing-0);
1354
1405
  --dialog-dismissible-position-right: var(--spacing-3);
1355
1406
  --dialog-dismissible-position-top: var(--spacing-5);
1407
+ --datagrid-cell-header-padding-y: var(--spacing-3);
1408
+ --datagrid-cell-header-padding-right: var(--spacing-2);
1409
+ --datagrid-cell-header-padding-x: var(--spacing-4);
1410
+ --datagrid-cell-body-actions-padding-y: var(--spacing-1);
1411
+ --datagrid-cell-body-padding-y: var(--spacing-2);
1412
+ --datagrid-cell-body-actions-gap-x: var(--spacing-2);
1413
+ --datagrid-cell-body-avatar-gap-x: var(--spacing-3);
1414
+ --datagrid-cell-body-padding-x: var(--spacing-4);
1356
1415
  --breadcrumb-padding-y: var(--spacing-1);
1357
1416
  --badge-radius: var(--radius-rounded-full);
1358
1417
  --badge-padding-y: var(--spacing-1);
@@ -1520,6 +1579,29 @@
1520
1579
  --list-native-line-height: var(--line-height-base);
1521
1580
  --list-native-font-size: var(--font-size-md);
1522
1581
  --list-native-icon-size: var(--spacing-5);
1582
+ --calendar-navigation-buttons-gap: var(--spacing-1);
1583
+ --calendar-controls-padding-top: var(--spacing-2);
1584
+ --calendar-controls-margin-top: var(--spacing-1);
1585
+ --calendar-weeks-size: var(--spacing-10);
1586
+ --calendar-weeks-radius: var(--radius-rounded);
1587
+ --calendar-header-button-size: var(--spacing-8);
1588
+ --calendar-header-margin-bottom: var(--spacing-1);
1589
+ --calendar-header-line-height: var(--line-height-sm);
1590
+ --calendar-header-font-weight: var(--font-weight-medium-emphasis);
1591
+ --calendar-header-font-size: var(--font-size-sm);
1592
+ --calendar-grid-gap-y: var(--spacing-0-5);
1593
+ --calendar-grid-gap-x: var(--spacing-0);
1594
+ --calendar-radius: var(--radius-rounded-md);
1595
+ --calendar-weeks-calendar-gap-x: var(--spacing-2);
1596
+ --calendar-gap-y: var(--spacing-1);
1597
+ --calendar-gap-x: var(--spacing-1);
1598
+ --calendar-double-gap-x: var(--spacing-3);
1599
+ --calendar-padding: var(--spacing-1);
1600
+ --calendar-cell-radius: var(--radius-rounded-2xl);
1601
+ --calendar-cell-size: var(--spacing-8);
1602
+ --calendar-cell-line-height: var(--line-height-sm);
1603
+ --calendar-cell-font-weight: var(--font-weight-low-emphasis);
1604
+ --calendar-cell-font-size: var(--font-size-sm);
1523
1605
  --button-lg-padding-y: var(--spacing-2-5);
1524
1606
  --button-lg-padding-x: var(--spacing-4);
1525
1607
  --button-lg-line-height: var(--line-height-lg);