@carbon/ibm-products 2.0.0-rc.21 → 2.0.0-rc.23

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 (53) hide show
  1. package/css/index-full-carbon.css +4849 -2937
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +61 -43
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +117 -73
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -4
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +342 -106
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Card/CardFooter.js +2 -2
  18. package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  19. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
  21. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +4 -2
  22. package/es/components/Datagrid/useActionsColumn.js +29 -1
  23. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  24. package/es/components/Datagrid/useNestedRows.js +2 -4
  25. package/es/components/Datagrid/useSelectAllToggle.js +18 -2
  26. package/es/components/Datagrid/useSelectRows.js +19 -2
  27. package/es/components/Datagrid/useStickyColumn.js +22 -5
  28. package/es/components/PageHeader/PageHeaderTitle.js +1 -0
  29. package/es/components/SidePanel/SidePanel.js +14 -5
  30. package/es/components/Tearsheet/TearsheetShell.js +6 -4
  31. package/lib/components/Card/CardFooter.js +2 -2
  32. package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  33. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +3 -1
  36. package/lib/components/Datagrid/useActionsColumn.js +30 -1
  37. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  38. package/lib/components/Datagrid/useNestedRows.js +2 -4
  39. package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
  40. package/lib/components/Datagrid/useSelectRows.js +26 -2
  41. package/lib/components/Datagrid/useStickyColumn.js +22 -4
  42. package/lib/components/PageHeader/PageHeaderTitle.js +1 -0
  43. package/lib/components/SidePanel/SidePanel.js +14 -5
  44. package/lib/components/Tearsheet/TearsheetShell.js +4 -2
  45. package/package.json +8 -8
  46. package/scss/components/Datagrid/styles/_datagrid.scss +25 -3
  47. package/scss/components/Datagrid/styles/_useInlineEdit.scss +4 -0
  48. package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
  49. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
  50. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  51. package/scss/components/InlineEditV1/_inline-edit-v1.scss +1 -3
  52. package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
  53. package/scss/components/Tearsheet/_tearsheet.scss +4 -5
package/css/index.css CHANGED
@@ -211,6 +211,7 @@
211
211
  }
212
212
 
213
213
  .cds--snippet--disabled .cds--snippet-btn--expand:hover,
214
+ .cds--snippet--disabled .cds--copy-btn,
214
215
  .cds--snippet--disabled .cds--copy-btn:hover {
215
216
  background-color: var(--cds-layer);
216
217
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -455,13 +456,13 @@
455
456
  overflow-x: auto;
456
457
  }
457
458
 
458
- .cds--snippet--multi .cds--snippet-container pre::after {
459
+ .cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
459
460
  position: absolute;
460
461
  top: 0;
461
462
  right: 0;
462
463
  width: 1rem;
463
464
  height: 100%;
464
- background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
465
+ background-image: linear-gradient(to right, transparent, var(--cds-layer));
465
466
  content: "";
466
467
  }
467
468
 
@@ -1041,7 +1042,7 @@
1041
1042
  color: var(--cds-text-on-color, #ffffff);
1042
1043
  }
1043
1044
  .cds--btn--danger:hover {
1044
- background-color: var(--cds-button-danger-hover, #b81922);
1045
+ background-color: var(--cds-button-danger-hover, #b81921);
1045
1046
  }
1046
1047
  .cds--btn--danger:focus {
1047
1048
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1065,7 +1066,7 @@
1065
1066
  color: var(--cds-button-danger-secondary, #da1e28);
1066
1067
  }
1067
1068
  .cds--btn--danger--tertiary:hover {
1068
- background-color: var(--cds-button-danger-hover, #b81922);
1069
+ background-color: var(--cds-button-danger-hover, #b81921);
1069
1070
  }
1070
1071
  .cds--btn--danger--tertiary:focus {
1071
1072
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1079,7 +1080,7 @@
1079
1080
  fill: currentColor;
1080
1081
  }
1081
1082
  .cds--btn--danger--tertiary:hover {
1082
- border-color: var(--cds-button-danger-hover, #b81922);
1083
+ border-color: var(--cds-button-danger-hover, #b81921);
1083
1084
  color: var(--cds-text-on-color, #ffffff);
1084
1085
  }
1085
1086
  .cds--btn--danger--tertiary:focus {
@@ -1105,7 +1106,7 @@
1105
1106
  padding: calc(0.875rem - 3px) 16px;
1106
1107
  }
1107
1108
  .cds--btn--danger--ghost:hover {
1108
- background-color: var(--cds-button-danger-hover, #b81922);
1109
+ background-color: var(--cds-button-danger-hover, #b81921);
1109
1110
  }
1110
1111
  .cds--btn--danger--ghost:focus {
1111
1112
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1310,9 +1311,14 @@
1310
1311
  .cds--modal .cds--dropdown-list,
1311
1312
  .cds--modal .cds--number input[type=number],
1312
1313
  .cds--modal .cds--date-picker__input,
1313
- .cds--modal .cds--multi-select {
1314
+ .cds--modal .cds--multi-select,
1315
+ .cds--modal .cds--number__control-btn::before,
1316
+ .cds--modal .cds--number__control-btn::after {
1314
1317
  background-color: var(--cds-field-02, #ffffff);
1315
1318
  }
1319
+ .cds--modal .cds--number__rule-divider {
1320
+ background-color: var(--cds-border-subtle-02, #e0e0e0);
1321
+ }
1316
1322
 
1317
1323
  .cds--modal.is-visible .cds--modal-container {
1318
1324
  transform: translate3d(0, 0, 0);
@@ -1385,7 +1391,7 @@
1385
1391
  }
1386
1392
  }
1387
1393
 
1388
- .cds--modal-content p,
1394
+ .cds--modal-content > p,
1389
1395
  .cds--modal-content__regular-content {
1390
1396
  font-size: var(--cds-body-01-font-size, 0.875rem);
1391
1397
  font-weight: var(--cds-body-01-font-weight, 400);
@@ -1427,7 +1433,7 @@
1427
1433
  .cds--modal-container--xs .cds--modal-content__regular-content {
1428
1434
  padding-right: 1rem;
1429
1435
  }
1430
- .cds--modal-container--xs .cds--modal-content p {
1436
+ .cds--modal-container--xs .cds--modal-content > p {
1431
1437
  padding-right: 0;
1432
1438
  }
1433
1439
  @media (min-width: 42rem) {
@@ -1450,7 +1456,7 @@
1450
1456
  .cds--modal-container--sm .cds--modal-content__regular-content {
1451
1457
  padding-right: 1rem;
1452
1458
  }
1453
- .cds--modal-container--sm .cds--modal-content p {
1459
+ .cds--modal-container--sm .cds--modal-content > p {
1454
1460
  padding-right: 0;
1455
1461
  }
1456
1462
  @media (min-width: 42rem) {
@@ -1463,7 +1469,7 @@
1463
1469
  width: 42%;
1464
1470
  max-height: 72%;
1465
1471
  }
1466
- .cds--modal-container--sm .cds--modal-content p,
1472
+ .cds--modal-container--sm .cds--modal-content > p,
1467
1473
  .cds--modal-container--sm .cds--modal-content__regular-content {
1468
1474
  padding-right: 20%;
1469
1475
  }
@@ -1587,11 +1593,16 @@
1587
1593
  overflow: hidden;
1588
1594
  }
1589
1595
 
1590
- .cds--body--with-modal-open .cds--tooltip,
1591
- .cds--body--with-modal-open .cds--overflow-menu-options {
1596
+ .cds--body--with-modal-open .cds--modal .cds--tooltip,
1597
+ .cds--body--with-modal-open .cds--modal .cds--overflow-menu-options {
1592
1598
  z-index: 9000;
1593
1599
  }
1594
1600
 
1601
+ .cds--modal-container--full-width .cds--modal-content {
1602
+ padding: 0;
1603
+ margin: 0;
1604
+ }
1605
+
1595
1606
  /* stylelint-disable */
1596
1607
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
1597
1608
  .cds--modal-close__icon {
@@ -1607,6 +1618,16 @@
1607
1618
  }
1608
1619
 
1609
1620
  /* stylelint-enable */
1621
+ input:-webkit-autofill,
1622
+ input:-webkit-autofill:hover,
1623
+ input:-webkit-autofill:focus,
1624
+ textarea:-webkit-autofill,
1625
+ textarea:-webkit-autofill:hover,
1626
+ textarea:-webkit-autofill:focus {
1627
+ box-shadow: 0 0 0 1000px var(--cds-field) inset;
1628
+ -webkit-text-fill-color: var(--cds-text-primary, #161616);
1629
+ }
1630
+
1610
1631
  .cds--fieldset html {
1611
1632
  font-size: 100%;
1612
1633
  }
@@ -1664,6 +1685,13 @@
1664
1685
  font-weight: 600;
1665
1686
  }
1666
1687
 
1688
+ .cds--label .cds--toggletip-label {
1689
+ font-size: var(--cds-label-01-font-size, 0.75rem);
1690
+ font-weight: var(--cds-label-01-font-weight, 400);
1691
+ line-height: var(--cds-label-01-line-height, 1.33333);
1692
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1693
+ }
1694
+
1667
1695
  .cds--label--no-margin {
1668
1696
  margin-bottom: 0;
1669
1697
  }
@@ -1755,7 +1783,7 @@
1755
1783
  }
1756
1784
 
1757
1785
  input[type=number] {
1758
- font-family: carbon--font-family("mono");
1786
+ font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
1759
1787
  }
1760
1788
 
1761
1789
  input[data-invalid]:not(:focus),
@@ -1966,16 +1994,12 @@ fieldset[disabled] .cds--form__helper-text {
1966
1994
  width: 100%;
1967
1995
  }
1968
1996
 
1969
- .cds--text-input__invalid-icon,
1970
- .cds--text-input__readonly-icon {
1997
+ .cds--text-input__invalid-icon {
1971
1998
  position: absolute;
1972
1999
  top: 50%;
1973
2000
  right: 1rem;
1974
- transform: translateY(-50%);
1975
- }
1976
-
1977
- .cds--text-input__invalid-icon {
1978
2001
  fill: var(--cds-support-error, #da1e28);
2002
+ transform: translateY(-50%);
1979
2003
  }
1980
2004
 
1981
2005
  .cds--text-input__invalid-icon--warning {
@@ -2224,8 +2248,7 @@ fieldset[disabled] .cds--form__helper-text {
2224
2248
  }
2225
2249
 
2226
2250
  .cds--text-input--invalid,
2227
- .cds--text-input--warning,
2228
- .cds--text-input-wrapper--readonly .cds--text-input {
2251
+ .cds--text-input--warning {
2229
2252
  padding-right: 2.5rem;
2230
2253
  }
2231
2254
 
@@ -2241,14 +2264,28 @@ fieldset[disabled] .cds--form__helper-text {
2241
2264
  right: 2.5rem;
2242
2265
  }
2243
2266
 
2244
- .cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
2267
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
2245
2268
  cursor: not-allowed;
2269
+ }
2270
+
2271
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
2246
2272
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
2247
2273
  }
2248
- .cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
2274
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
2249
2275
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
2250
2276
  }
2251
2277
 
2278
+ .cds--text-input__counter-alert {
2279
+ position: absolute;
2280
+ overflow: hidden;
2281
+ width: 1px;
2282
+ height: 1px;
2283
+ padding: 0;
2284
+ border: 0;
2285
+ margin: -1px;
2286
+ clip: rect(0, 0, 0, 0);
2287
+ }
2288
+
2252
2289
  .cds--text-input:disabled {
2253
2290
  outline: 2px solid transparent;
2254
2291
  outline-offset: -2px;
@@ -2439,6 +2476,17 @@ fieldset[disabled] .cds--form__helper-text {
2439
2476
  flex-direction: column;
2440
2477
  }
2441
2478
 
2479
+ .cds--text-input-wrapper--inline .cds--form-requirement {
2480
+ display: block;
2481
+ overflow: visible;
2482
+ max-height: 12.5rem;
2483
+ font-weight: 400;
2484
+ }
2485
+
2486
+ .cds--text-input-wrapper--inline--invalid .cds--form-requirement {
2487
+ color: var(--cds-text-error, #da1e28);
2488
+ }
2489
+
2442
2490
  .cds--form--fluid .cds--text-input-wrapper--readonly,
2443
2491
  .cds--text-input-wrapper--readonly .cds--text-input {
2444
2492
  background: transparent;
@@ -2451,6 +2499,15 @@ fieldset[disabled] .cds--form__helper-text {
2451
2499
  }
2452
2500
  }
2453
2501
 
2502
+ .cds--text-input__label-wrapper {
2503
+ display: flex;
2504
+ width: 100%;
2505
+ justify-content: space-between;
2506
+ }
2507
+ .cds--text-input__label-wrapper .cds--text-input__label-counter {
2508
+ align-self: end;
2509
+ }
2510
+
2454
2511
  @keyframes stroke {
2455
2512
  100% {
2456
2513
  stroke-dashoffset: 0;
@@ -2480,7 +2537,7 @@ fieldset[disabled] .cds--form__helper-text {
2480
2537
  }
2481
2538
 
2482
2539
  .cds--inline-loading__checkmark-container {
2483
- fill: var(--cds-support-success, #198038);
2540
+ fill: var(--cds-support-success, #24a148);
2484
2541
  }
2485
2542
  .cds--inline-loading__checkmark-container.cds--inline-loading__svg {
2486
2543
  position: absolute;
@@ -2820,6 +2877,9 @@ fieldset[disabled] .cds--form__helper-text {
2820
2877
  border-bottom: 0;
2821
2878
  line-height: calc(3rem - (0.5rem * 2));
2822
2879
  }
2880
+ .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
2881
+ overflow-x: visible;
2882
+ }
2823
2883
  .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
2824
2884
  display: flex;
2825
2885
  width: var(--cds-icon-tab-size, 2.5rem);
@@ -3240,7 +3300,7 @@ fieldset[disabled] .cds--form__helper-text {
3240
3300
  }
3241
3301
  .cds--overflow-menu:hover,
3242
3302
  .cds--overflow-menu__trigger:hover {
3243
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3303
+ background-color: var(--cds-layer-hover);
3244
3304
  }
3245
3305
 
3246
3306
  .cds--overflow-menu--sm {
@@ -3284,6 +3344,10 @@ fieldset[disabled] .cds--form__helper-text {
3284
3344
  fill: var(--cds-icon-primary, #161616);
3285
3345
  }
3286
3346
 
3347
+ .cds--overflow-menu__wrapper {
3348
+ line-height: 0;
3349
+ }
3350
+
3287
3351
  .cds--overflow-menu-options {
3288
3352
  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
3289
3353
  position: absolute;
@@ -3525,7 +3589,7 @@ a.cds--overflow-menu-options__btn::before {
3525
3589
 
3526
3590
  .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
3527
3591
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
3528
- pointer-events: none;
3592
+ cursor: not-allowed;
3529
3593
  }
3530
3594
  .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus {
3531
3595
  outline: 2px solid transparent;
@@ -5138,7 +5202,7 @@ a.cds--overflow-menu-options__btn::before {
5138
5202
  .security--combo-button .security--combo-button__overflow-menu {
5139
5203
  width: 3rem;
5140
5204
  height: auto;
5141
- border-left: 0.125rem solid var(--cds-border-subtle-01, #e0e0e0);
5205
+ border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
5142
5206
  background-color: var(--cds-background-brand, #0f62fe);
5143
5207
  }
5144
5208
 
@@ -5318,6 +5382,10 @@ a.cds--overflow-menu-options__btn::before {
5318
5382
  fill: var(--cds-interactive, #0f62fe);
5319
5383
  }
5320
5384
 
5385
+ .cds--progress--space-equal .cds--progress-text {
5386
+ overflow: hidden;
5387
+ }
5388
+
5321
5389
  .cds--progress-label {
5322
5390
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
5323
5391
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -5343,19 +5411,20 @@ a.cds--overflow-menu-options__btn::before {
5343
5411
  cursor: pointer;
5344
5412
  }
5345
5413
 
5346
- .cds--progress-label:focus {
5347
- box-shadow: 0 0.1875rem 0 0 var(--cds-link-primary, #0f62fe);
5348
- color: var(--cds-link-primary, #0f62fe);
5349
- outline: none;
5350
- }
5351
-
5352
5414
  .cds--progress--space-equal .cds--progress-label {
5353
5415
  max-width: 100%;
5354
5416
  margin-right: 0.75rem;
5355
5417
  }
5356
5418
 
5419
+ .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus {
5420
+ outline: none;
5421
+ }
5422
+ .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label {
5423
+ color: var(--cds-focus, #0f62fe);
5424
+ outline: 0.0625rem solid var(--cds-focus, #0f62fe);
5425
+ }
5357
5426
  .cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active {
5358
- box-shadow: 0 0.1875rem 0 0 var(--cds-text-primary, #161616);
5427
+ box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
5359
5428
  color: var(--cds-text-primary, #161616);
5360
5429
  }
5361
5430
 
@@ -5487,11 +5556,6 @@ a.cds--overflow-menu-options__btn::before {
5487
5556
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
5488
5557
  cursor: not-allowed;
5489
5558
  }
5490
- .cds--progress-step--disabled .cds--progress-label:focus,
5491
- .cds--progress-step--disabled .cds--progress-label:active {
5492
- box-shadow: none;
5493
- outline: none;
5494
- }
5495
5559
  .cds--progress-step--disabled .cds--progress-line {
5496
5560
  cursor: not-allowed;
5497
5561
  }
@@ -5534,6 +5598,10 @@ a.cds--overflow-menu-options__btn::before {
5534
5598
  }
5535
5599
  }
5536
5600
 
5601
+ .cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
5602
+ margin-top: 0.0625rem;
5603
+ }
5604
+
5537
5605
  .cds--progress--vertical {
5538
5606
  display: flex;
5539
5607
  flex-direction: column;
@@ -5587,6 +5655,7 @@ a.cds--overflow-menu-options__btn::before {
5587
5655
  }
5588
5656
 
5589
5657
  .cds--toggle {
5658
+ display: inline-block;
5590
5659
  user-select: none;
5591
5660
  }
5592
5661
 
@@ -5617,7 +5686,7 @@ a.cds--overflow-menu-options__btn::before {
5617
5686
  }
5618
5687
 
5619
5688
  .cds--toggle__appearance {
5620
- display: grid;
5689
+ display: inline-grid;
5621
5690
  align-items: center;
5622
5691
  column-gap: 0.5rem;
5623
5692
  cursor: pointer;
@@ -5650,12 +5719,13 @@ a.cds--overflow-menu-options__btn::before {
5650
5719
  }
5651
5720
 
5652
5721
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5653
- .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5722
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
5723
+ .cds--toggle:active .cds--toggle__switch {
5654
5724
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
5655
5725
  }
5656
5726
 
5657
5727
  .cds--toggle__switch--checked {
5658
- background-color: var(--cds-support-success, #198038);
5728
+ background-color: var(--cds-support-success, #24a148);
5659
5729
  }
5660
5730
  .cds--toggle__switch--checked::before {
5661
5731
  transform: translateX(1.5rem);
@@ -5688,7 +5758,7 @@ a.cds--overflow-menu-options__btn::before {
5688
5758
  right: 0.3125rem;
5689
5759
  width: 0.375rem;
5690
5760
  height: 0.3125rem;
5691
- fill: var(--cds-support-success, #198038);
5761
+ fill: var(--cds-support-success, #24a148);
5692
5762
  visibility: hidden;
5693
5763
  }
5694
5764
 
@@ -5716,6 +5786,31 @@ a.cds--overflow-menu-options__btn::before {
5716
5786
  fill: var(--cds-button-disabled, #c6c6c6);
5717
5787
  }
5718
5788
 
5789
+ .cds--toggle--readonly .cds--toggle__appearance {
5790
+ cursor: default;
5791
+ }
5792
+
5793
+ .cds--toggle--readonly .cds--toggle__switch {
5794
+ border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
5795
+ background-color: transparent;
5796
+ }
5797
+ .cds--toggle--readonly .cds--toggle__switch::before {
5798
+ top: 0.125rem;
5799
+ left: 0.125rem;
5800
+ background-color: var(--cds-text-primary, #161616);
5801
+ }
5802
+
5803
+ .cds--toggle--readonly .cds--toggle__check {
5804
+ top: 0.3125rem;
5805
+ right: 0.25rem;
5806
+ fill: var(--cds-background, #ffffff);
5807
+ }
5808
+
5809
+ .cds--toggle--readonly .cds--toggle__text {
5810
+ cursor: text;
5811
+ user-select: text;
5812
+ }
5813
+
5719
5814
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5720
5815
  .cds--toggle__switch,
5721
5816
  .cds--toggle__switch::before {
@@ -5725,7 +5820,8 @@ a.cds--overflow-menu-options__btn::before {
5725
5820
 
5726
5821
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5727
5822
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5728
- .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5823
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
5824
+ .cds--toggle:active .cds--toggle__switch {
5729
5825
  color: Highlight;
5730
5826
  outline: 1px solid Highlight;
5731
5827
  }
@@ -5894,7 +5990,7 @@ a.cds--overflow-menu-options__btn::before {
5894
5990
  top: 0;
5895
5991
  height: min-content;
5896
5992
  padding-top: 0;
5897
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
5993
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
5898
5994
  background-color: transparent;
5899
5995
  grid-row: 1;
5900
5996
  overflow-x: auto;
@@ -6669,12 +6765,12 @@ a.cds--overflow-menu-options__btn::before {
6669
6765
  }
6670
6766
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
6671
6767
  padding: 1.5rem 2rem;
6672
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6768
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6673
6769
  margin: 0;
6674
6770
  }
6675
6771
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
6676
6772
  padding: 1rem;
6677
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6773
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6678
6774
  margin: 0;
6679
6775
  }
6680
6776
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -6745,7 +6841,7 @@ a.cds--overflow-menu-options__btn::before {
6745
6841
  }
6746
6842
  .c4p--tearsheet .c4p--tearsheet__influencer {
6747
6843
  flex: 0 0 257px;
6748
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6844
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6749
6845
  overflow-y: auto;
6750
6846
  }
6751
6847
  .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -6763,20 +6859,18 @@ a.cds--overflow-menu-options__btn::before {
6763
6859
  .c4p--tearsheet .c4p--tearsheet__main {
6764
6860
  display: flex;
6765
6861
  flex-direction: row;
6862
+ background-color: var(--cds-layer);
6766
6863
  grid-column: 1/-1;
6767
6864
  grid-row: 1/-1;
6768
6865
  }
6769
6866
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
6770
6867
  border-right: none;
6771
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6868
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6772
6869
  }
6773
6870
  .c4p--tearsheet .c4p--tearsheet__content {
6774
6871
  overflow: auto;
6775
6872
  flex-grow: 1;
6776
6873
  }
6777
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
6778
- background: var(--cds-background, #ffffff);
6779
- }
6780
6874
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
6781
6875
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
6782
6876
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -6787,7 +6881,7 @@ a.cds--overflow-menu-options__btn::before {
6787
6881
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
6788
6882
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
6789
6883
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
6790
- background-color: var(--cds-field-01, #f4f4f4);
6884
+ background-color: var(--cds-field);
6791
6885
  }
6792
6886
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
6793
6887
  background-color: transparent;
@@ -6810,7 +6904,7 @@ a.cds--overflow-menu-options__btn::before {
6810
6904
  .c4p--tearsheet .c4p--tearsheet__buttons {
6811
6905
  display: inline-flex;
6812
6906
  min-width: 100%;
6813
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6907
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6814
6908
  }
6815
6909
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
6816
6910
  background: var(--cds-background, #ffffff);
@@ -7052,6 +7146,7 @@ a.cds--overflow-menu-options__btn::before {
7052
7146
  }
7053
7147
 
7054
7148
  .cds--link.cds--link--inline {
7149
+ display: inline;
7055
7150
  text-decoration: underline;
7056
7151
  }
7057
7152
  .cds--link.cds--link--inline:focus, .cds--link.cds--link--inline:visited {
@@ -7240,6 +7335,7 @@ a.cds--overflow-menu-options__btn::before {
7240
7335
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7241
7336
  .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
7242
7337
  fill: ButtonText;
7338
+ background-color: ButtonText;
7243
7339
  }
7244
7340
  }
7245
7341
 
@@ -7257,6 +7353,19 @@ a.cds--overflow-menu-options__btn::before {
7257
7353
  background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7258
7354
  }
7259
7355
 
7356
+ .cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
7357
+ border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
7358
+ }
7359
+
7360
+ .cds--radio-button-group--readonly .cds--radio-button__label {
7361
+ cursor: default;
7362
+ }
7363
+
7364
+ .cds--radio-button-group--readonly .cds--radio-button__label-text {
7365
+ cursor: text;
7366
+ user-select: text;
7367
+ }
7368
+
7260
7369
  .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
7261
7370
  outline: 2px solid var(--cds-focus, #0f62fe);
7262
7371
  outline-offset: 1.5px;
@@ -7808,6 +7917,10 @@ a.cds--overflow-menu-options__btn::before {
7808
7917
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7809
7918
  }
7810
7919
 
7920
+ .cds--file-container--drop {
7921
+ width: 100%;
7922
+ }
7923
+
7811
7924
  .cds--file-btn ~ .cds--file-container {
7812
7925
  margin-top: 1.5rem;
7813
7926
  }
@@ -7959,7 +8072,6 @@ a.cds--overflow-menu-options__btn::before {
7959
8072
  }
7960
8073
 
7961
8074
  .cds--file__state-container .cds--file-complete {
7962
- cursor: pointer;
7963
8075
  fill: var(--cds-interactive, #0f62fe);
7964
8076
  }
7965
8077
  .cds--file__state-container .cds--file-complete:focus {
@@ -8388,15 +8500,15 @@ a.cds--overflow-menu-options__btn::before {
8388
8500
  }
8389
8501
 
8390
8502
  .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
8391
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8503
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8392
8504
  }
8393
8505
 
8394
8506
  .c4p--add-select__column {
8395
8507
  overflow: auto;
8396
8508
  flex: 0 0 20rem;
8397
8509
  padding: 1rem;
8398
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8399
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8510
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8511
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8400
8512
  }
8401
8513
  .c4p--add-select__column-search-bar {
8402
8514
  display: flex;
@@ -8638,6 +8750,9 @@ button.c4p--add-select__global-filter-toggle--open {
8638
8750
  --cds-border-subtle-selected-01: #525252;
8639
8751
  --cds-border-subtle-selected-02: #6f6f6f;
8640
8752
  --cds-border-subtle-selected-03: #8d8d8d;
8753
+ --cds-border-tile-01: #525252;
8754
+ --cds-border-tile-02: #6f6f6f;
8755
+ --cds-border-tile-03: #8d8d8d;
8641
8756
  --cds-field-01: #262626;
8642
8757
  --cds-field-02: #393939;
8643
8758
  --cds-field-03: #525252;
@@ -8649,6 +8764,7 @@ button.c4p--add-select__global-filter-toggle--open {
8649
8764
  --cds-focus-inverse: #0f62fe;
8650
8765
  --cds-highlight: #002d9c;
8651
8766
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8767
+ --cds-icon-interactive: #ffffff;
8652
8768
  --cds-icon-inverse: #161616;
8653
8769
  --cds-icon-on-color: #ffffff;
8654
8770
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8734,6 +8850,10 @@ button.c4p--add-select__global-filter-toggle--open {
8734
8850
  --cds-label-01-font-weight: 400;
8735
8851
  --cds-label-01-line-height: 1.33333;
8736
8852
  --cds-label-01-letter-spacing: 0.32px;
8853
+ --cds-label-02-font-size: 0.875rem;
8854
+ --cds-label-02-font-weight: 400;
8855
+ --cds-label-02-line-height: 1.28572;
8856
+ --cds-label-02-letter-spacing: 0.16px;
8737
8857
  --cds-helper-text-01-font-size: 0.75rem;
8738
8858
  --cds-helper-text-01-line-height: 1.33333;
8739
8859
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8795,11 +8915,11 @@ button.c4p--add-select__global-filter-toggle--open {
8795
8915
  --cds-productive-heading-05-font-weight: 400;
8796
8916
  --cds-productive-heading-05-line-height: 1.25;
8797
8917
  --cds-productive-heading-05-letter-spacing: 0;
8798
- --cds-productive-heading-06-font-size: 2rem;
8918
+ --cds-productive-heading-06-font-size: 2.625rem;
8799
8919
  --cds-productive-heading-06-font-weight: 300;
8800
8920
  --cds-productive-heading-06-line-height: 1.199;
8801
8921
  --cds-productive-heading-06-letter-spacing: 0;
8802
- --cds-productive-heading-07-font-size: 2.625rem;
8922
+ --cds-productive-heading-07-font-size: 3.375rem;
8803
8923
  --cds-productive-heading-07-font-weight: 300;
8804
8924
  --cds-productive-heading-07-line-height: 1.19;
8805
8925
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8854,7 +8974,7 @@ button.c4p--add-select__global-filter-toggle--open {
8854
8974
  --cds-display-03-line-height: 1.19;
8855
8975
  --cds-display-03-letter-spacing: 0;
8856
8976
  --cds-display-04-font-size: 2.625rem;
8857
- --cds-display-04-font-weight: 600;
8977
+ --cds-display-04-font-weight: 300;
8858
8978
  --cds-display-04-line-height: 1.19;
8859
8979
  --cds-display-04-letter-spacing: 0;
8860
8980
  --cds-legal-01-font-size: 0.75rem;
@@ -8901,11 +9021,11 @@ button.c4p--add-select__global-filter-toggle--open {
8901
9021
  --cds-heading-05-font-weight: 400;
8902
9022
  --cds-heading-05-line-height: 1.25;
8903
9023
  --cds-heading-05-letter-spacing: 0;
8904
- --cds-heading-06-font-size: 2rem;
9024
+ --cds-heading-06-font-size: 2.625rem;
8905
9025
  --cds-heading-06-font-weight: 300;
8906
9026
  --cds-heading-06-line-height: 1.199;
8907
9027
  --cds-heading-06-letter-spacing: 0;
8908
- --cds-heading-07-font-size: 2.625rem;
9028
+ --cds-heading-07-font-size: 3.375rem;
8909
9029
  --cds-heading-07-font-weight: 300;
8910
9030
  --cds-heading-07-line-height: 1.19;
8911
9031
  --cds-heading-07-letter-spacing: 0;
@@ -8952,7 +9072,7 @@ button.c4p--add-select__global-filter-toggle--open {
8952
9072
  --cds-fluid-display-03-line-height: 1.19;
8953
9073
  --cds-fluid-display-03-letter-spacing: 0;
8954
9074
  --cds-fluid-display-04-font-size: 2.625rem;
8955
- --cds-fluid-display-04-font-weight: 600;
9075
+ --cds-fluid-display-04-font-weight: 300;
8956
9076
  --cds-fluid-display-04-line-height: 1.19;
8957
9077
  --cds-fluid-display-04-letter-spacing: 0;
8958
9078
  --cds-button-separator: #161616;
@@ -8980,9 +9100,10 @@ button.c4p--add-select__global-filter-toggle--open {
8980
9100
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8981
9101
  --cds-field: var(--cds-field-01, #f4f4f4);
8982
9102
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8983
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
9103
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
8984
9104
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8985
9105
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9106
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8986
9107
  position: fixed;
8987
9108
  z-index: 2;
8988
9109
  top: 3rem;
@@ -9094,7 +9215,7 @@ button.c4p--add-select__global-filter-toggle--open {
9094
9215
  fill: var(--cds-support-error, #da1e28);
9095
9216
  }
9096
9217
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
9097
- fill: var(--cds-support-success, #198038);
9218
+ fill: var(--cds-support-success, #24a148);
9098
9219
  }
9099
9220
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
9100
9221
  fill: var(--cds-support-warning, #f1c21b);
@@ -9403,6 +9524,12 @@ button.c4p--add-select__global-filter-toggle--open {
9403
9524
  }
9404
9525
  }
9405
9526
 
9527
+ .cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
9528
+ min-height: 1.125rem;
9529
+ padding-right: 0;
9530
+ padding-left: 0;
9531
+ }
9532
+
9406
9533
  .cds--icon--skeleton {
9407
9534
  position: relative;
9408
9535
  padding: 0;
@@ -12253,7 +12380,7 @@ button.c4p--add-select__global-filter-toggle--open {
12253
12380
  .c4p--card__productive .c4p--card__footer {
12254
12381
  align-items: center;
12255
12382
  justify-content: space-between;
12256
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
12383
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
12257
12384
  }
12258
12385
  .c4p--card__productive .c4p--card__footer-no-button {
12259
12386
  justify-content: flex-end;
@@ -13317,6 +13444,7 @@ button.c4p--add-select__global-filter-toggle--open {
13317
13444
 
13318
13445
  .cds--popover {
13319
13446
  position: absolute;
13447
+ z-index: 6000;
13320
13448
  top: 0;
13321
13449
  right: 0;
13322
13450
  bottom: 0;
@@ -13489,13 +13617,13 @@ button.c4p--add-select__global-filter-toggle--open {
13489
13617
  .cds--popover--left-top .cds--popover-content {
13490
13618
  top: -50%;
13491
13619
  right: 100%;
13492
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
13620
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
13493
13621
  }
13494
13622
 
13495
13623
  .cds--popover--left-bottom .cds--popover-content {
13496
13624
  right: 100%;
13497
13625
  bottom: -50%;
13498
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
13626
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
13499
13627
  }
13500
13628
 
13501
13629
  .cds--popover--left .cds--popover-content::before,
@@ -13519,6 +13647,74 @@ button.c4p--add-select__global-filter-toggle--open {
13519
13647
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
13520
13648
  }
13521
13649
 
13650
+ :root {
13651
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
13652
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
13653
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
13654
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
13655
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
13656
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
13657
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
13658
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13659
+ --cds-field: var(--cds-field-01, #f4f4f4);
13660
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13661
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
13662
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13663
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
13664
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13665
+ }
13666
+
13667
+ .cds--layer-one {
13668
+ --cds-layer: var(--cds-layer-01, #f4f4f4);
13669
+ --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
13670
+ --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
13671
+ --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
13672
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
13673
+ --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0);
13674
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1);
13675
+ --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13676
+ --cds-field: var(--cds-field-01, #f4f4f4);
13677
+ --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13678
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
13679
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13680
+ --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
13681
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13682
+ }
13683
+
13684
+ .cds--layer-two {
13685
+ --cds-layer: var(--cds-layer-02, #ffffff);
13686
+ --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
13687
+ --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
13688
+ --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
13689
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
13690
+ --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
13691
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
13692
+ --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
13693
+ --cds-field: var(--cds-field-02, #ffffff);
13694
+ --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
13695
+ --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
13696
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
13697
+ --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
13698
+ --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
13699
+ }
13700
+
13701
+ .cds--layer-three {
13702
+ --cds-layer: var(--cds-layer-03, #f4f4f4);
13703
+ --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
13704
+ --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
13705
+ --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
13706
+ --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
13707
+ --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0);
13708
+ --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1);
13709
+ --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
13710
+ --cds-field: var(--cds-field-03, #f4f4f4);
13711
+ --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
13712
+ --cds-border-subtle: var(--cds-border-subtle-03, #c6c6c6);
13713
+ --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
13714
+ --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
13715
+ --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
13716
+ }
13717
+
13522
13718
  .c4p--toolbar {
13523
13719
  display: flex;
13524
13720
  min-width: 2.5rem;
@@ -13542,8 +13738,8 @@ button.c4p--add-select__global-filter-toggle--open {
13542
13738
 
13543
13739
  .c4p--toolbar__group {
13544
13740
  display: flex;
13545
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
13546
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
13741
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13742
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13547
13743
  }
13548
13744
 
13549
13745
  .c4p--toolbar--vertical > .c4p--toolbar__group,
@@ -13617,6 +13813,9 @@ button.c4p--add-select__global-filter-toggle--open {
13617
13813
  --cds-border-subtle-selected-01: #6f6f6f;
13618
13814
  --cds-border-subtle-selected-02: #8d8d8d;
13619
13815
  --cds-border-subtle-selected-03: #a8a8a8;
13816
+ --cds-border-tile-01: #6f6f6f;
13817
+ --cds-border-tile-02: #8d8d8d;
13818
+ --cds-border-tile-03: #a8a8a8;
13620
13819
  --cds-field-01: #393939;
13621
13820
  --cds-field-02: #525252;
13622
13821
  --cds-field-03: #6f6f6f;
@@ -13628,6 +13827,7 @@ button.c4p--add-select__global-filter-toggle--open {
13628
13827
  --cds-focus-inverse: #0f62fe;
13629
13828
  --cds-highlight: #0043ce;
13630
13829
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
13830
+ --cds-icon-interactive: #ffffff;
13631
13831
  --cds-icon-inverse: #161616;
13632
13832
  --cds-icon-on-color: #ffffff;
13633
13833
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -13713,6 +13913,10 @@ button.c4p--add-select__global-filter-toggle--open {
13713
13913
  --cds-label-01-font-weight: 400;
13714
13914
  --cds-label-01-line-height: 1.33333;
13715
13915
  --cds-label-01-letter-spacing: 0.32px;
13916
+ --cds-label-02-font-size: 0.875rem;
13917
+ --cds-label-02-font-weight: 400;
13918
+ --cds-label-02-line-height: 1.28572;
13919
+ --cds-label-02-letter-spacing: 0.16px;
13716
13920
  --cds-helper-text-01-font-size: 0.75rem;
13717
13921
  --cds-helper-text-01-line-height: 1.33333;
13718
13922
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -13774,11 +13978,11 @@ button.c4p--add-select__global-filter-toggle--open {
13774
13978
  --cds-productive-heading-05-font-weight: 400;
13775
13979
  --cds-productive-heading-05-line-height: 1.25;
13776
13980
  --cds-productive-heading-05-letter-spacing: 0;
13777
- --cds-productive-heading-06-font-size: 2rem;
13981
+ --cds-productive-heading-06-font-size: 2.625rem;
13778
13982
  --cds-productive-heading-06-font-weight: 300;
13779
13983
  --cds-productive-heading-06-line-height: 1.199;
13780
13984
  --cds-productive-heading-06-letter-spacing: 0;
13781
- --cds-productive-heading-07-font-size: 2.625rem;
13985
+ --cds-productive-heading-07-font-size: 3.375rem;
13782
13986
  --cds-productive-heading-07-font-weight: 300;
13783
13987
  --cds-productive-heading-07-line-height: 1.19;
13784
13988
  --cds-productive-heading-07-letter-spacing: 0;
@@ -13833,7 +14037,7 @@ button.c4p--add-select__global-filter-toggle--open {
13833
14037
  --cds-display-03-line-height: 1.19;
13834
14038
  --cds-display-03-letter-spacing: 0;
13835
14039
  --cds-display-04-font-size: 2.625rem;
13836
- --cds-display-04-font-weight: 600;
14040
+ --cds-display-04-font-weight: 300;
13837
14041
  --cds-display-04-line-height: 1.19;
13838
14042
  --cds-display-04-letter-spacing: 0;
13839
14043
  --cds-legal-01-font-size: 0.75rem;
@@ -13880,11 +14084,11 @@ button.c4p--add-select__global-filter-toggle--open {
13880
14084
  --cds-heading-05-font-weight: 400;
13881
14085
  --cds-heading-05-line-height: 1.25;
13882
14086
  --cds-heading-05-letter-spacing: 0;
13883
- --cds-heading-06-font-size: 2rem;
14087
+ --cds-heading-06-font-size: 2.625rem;
13884
14088
  --cds-heading-06-font-weight: 300;
13885
14089
  --cds-heading-06-line-height: 1.199;
13886
14090
  --cds-heading-06-letter-spacing: 0;
13887
- --cds-heading-07-font-size: 2.625rem;
14091
+ --cds-heading-07-font-size: 3.375rem;
13888
14092
  --cds-heading-07-font-weight: 300;
13889
14093
  --cds-heading-07-line-height: 1.19;
13890
14094
  --cds-heading-07-letter-spacing: 0;
@@ -13931,7 +14135,7 @@ button.c4p--add-select__global-filter-toggle--open {
13931
14135
  --cds-fluid-display-03-line-height: 1.19;
13932
14136
  --cds-fluid-display-03-letter-spacing: 0;
13933
14137
  --cds-fluid-display-04-font-size: 2.625rem;
13934
- --cds-fluid-display-04-font-weight: 600;
14138
+ --cds-fluid-display-04-font-weight: 300;
13935
14139
  --cds-fluid-display-04-line-height: 1.19;
13936
14140
  --cds-fluid-display-04-letter-spacing: 0;
13937
14141
  --cds-button-separator: #161616;
@@ -13989,9 +14193,10 @@ button.c4p--add-select__global-filter-toggle--open {
13989
14193
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13990
14194
  --cds-field: var(--cds-field-01, #f4f4f4);
13991
14195
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13992
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
14196
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
13993
14197
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13994
14198
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14199
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13995
14200
  position: fixed;
13996
14201
  top: 3rem;
13997
14202
  right: 0;
@@ -14038,6 +14243,9 @@ button.c4p--add-select__global-filter-toggle--open {
14038
14243
  --cds-border-subtle-selected-01: #525252;
14039
14244
  --cds-border-subtle-selected-02: #6f6f6f;
14040
14245
  --cds-border-subtle-selected-03: #8d8d8d;
14246
+ --cds-border-tile-01: #525252;
14247
+ --cds-border-tile-02: #6f6f6f;
14248
+ --cds-border-tile-03: #8d8d8d;
14041
14249
  --cds-field-01: #262626;
14042
14250
  --cds-field-02: #393939;
14043
14251
  --cds-field-03: #525252;
@@ -14049,6 +14257,7 @@ button.c4p--add-select__global-filter-toggle--open {
14049
14257
  --cds-focus-inverse: #0f62fe;
14050
14258
  --cds-highlight: #002d9c;
14051
14259
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
14260
+ --cds-icon-interactive: #ffffff;
14052
14261
  --cds-icon-inverse: #161616;
14053
14262
  --cds-icon-on-color: #ffffff;
14054
14263
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -14134,6 +14343,10 @@ button.c4p--add-select__global-filter-toggle--open {
14134
14343
  --cds-label-01-font-weight: 400;
14135
14344
  --cds-label-01-line-height: 1.33333;
14136
14345
  --cds-label-01-letter-spacing: 0.32px;
14346
+ --cds-label-02-font-size: 0.875rem;
14347
+ --cds-label-02-font-weight: 400;
14348
+ --cds-label-02-line-height: 1.28572;
14349
+ --cds-label-02-letter-spacing: 0.16px;
14137
14350
  --cds-helper-text-01-font-size: 0.75rem;
14138
14351
  --cds-helper-text-01-line-height: 1.33333;
14139
14352
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -14195,11 +14408,11 @@ button.c4p--add-select__global-filter-toggle--open {
14195
14408
  --cds-productive-heading-05-font-weight: 400;
14196
14409
  --cds-productive-heading-05-line-height: 1.25;
14197
14410
  --cds-productive-heading-05-letter-spacing: 0;
14198
- --cds-productive-heading-06-font-size: 2rem;
14411
+ --cds-productive-heading-06-font-size: 2.625rem;
14199
14412
  --cds-productive-heading-06-font-weight: 300;
14200
14413
  --cds-productive-heading-06-line-height: 1.199;
14201
14414
  --cds-productive-heading-06-letter-spacing: 0;
14202
- --cds-productive-heading-07-font-size: 2.625rem;
14415
+ --cds-productive-heading-07-font-size: 3.375rem;
14203
14416
  --cds-productive-heading-07-font-weight: 300;
14204
14417
  --cds-productive-heading-07-line-height: 1.19;
14205
14418
  --cds-productive-heading-07-letter-spacing: 0;
@@ -14254,7 +14467,7 @@ button.c4p--add-select__global-filter-toggle--open {
14254
14467
  --cds-display-03-line-height: 1.19;
14255
14468
  --cds-display-03-letter-spacing: 0;
14256
14469
  --cds-display-04-font-size: 2.625rem;
14257
- --cds-display-04-font-weight: 600;
14470
+ --cds-display-04-font-weight: 300;
14258
14471
  --cds-display-04-line-height: 1.19;
14259
14472
  --cds-display-04-letter-spacing: 0;
14260
14473
  --cds-legal-01-font-size: 0.75rem;
@@ -14301,11 +14514,11 @@ button.c4p--add-select__global-filter-toggle--open {
14301
14514
  --cds-heading-05-font-weight: 400;
14302
14515
  --cds-heading-05-line-height: 1.25;
14303
14516
  --cds-heading-05-letter-spacing: 0;
14304
- --cds-heading-06-font-size: 2rem;
14517
+ --cds-heading-06-font-size: 2.625rem;
14305
14518
  --cds-heading-06-font-weight: 300;
14306
14519
  --cds-heading-06-line-height: 1.199;
14307
14520
  --cds-heading-06-letter-spacing: 0;
14308
- --cds-heading-07-font-size: 2.625rem;
14521
+ --cds-heading-07-font-size: 3.375rem;
14309
14522
  --cds-heading-07-font-weight: 300;
14310
14523
  --cds-heading-07-line-height: 1.19;
14311
14524
  --cds-heading-07-letter-spacing: 0;
@@ -14352,7 +14565,7 @@ button.c4p--add-select__global-filter-toggle--open {
14352
14565
  --cds-fluid-display-03-line-height: 1.19;
14353
14566
  --cds-fluid-display-03-letter-spacing: 0;
14354
14567
  --cds-fluid-display-04-font-size: 2.625rem;
14355
- --cds-fluid-display-04-font-weight: 600;
14568
+ --cds-fluid-display-04-font-weight: 300;
14356
14569
  --cds-fluid-display-04-line-height: 1.19;
14357
14570
  --cds-fluid-display-04-letter-spacing: 0;
14358
14571
  --cds-button-separator: #161616;
@@ -14410,9 +14623,10 @@ button.c4p--add-select__global-filter-toggle--open {
14410
14623
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14411
14624
  --cds-field: var(--cds-field-01, #f4f4f4);
14412
14625
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14413
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
14626
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
14414
14627
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14415
14628
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14629
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14416
14630
  }
14417
14631
 
14418
14632
  .c4p--web-terminal__body {
@@ -15021,7 +15235,6 @@ button.c4p--add-select__global-filter-toggle--open {
15021
15235
  top: 0;
15022
15236
  right: 0;
15023
15237
  display: flex;
15024
- width: var(--c4p--inline-edit--toolbar-width);
15025
15238
  height: 100%;
15026
15239
  justify-content: space-between;
15027
15240
  cursor: text;
@@ -15044,8 +15257,6 @@ button.c4p--add-select__global-filter-toggle--open {
15044
15257
  }
15045
15258
  .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
15046
15259
  display: inline-flex;
15047
- width: var(--c4p--inline-edit--size);
15048
- max-width: var(--c4p--inline-edit--size);
15049
15260
  height: 100%;
15050
15261
  min-height: initial;
15051
15262
  max-height: var(--c4p--inline-edit--size);
@@ -15109,8 +15320,6 @@ button.c4p--add-select__global-filter-toggle--open {
15109
15320
  }
15110
15321
  .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
15111
15322
  display: inline-flex;
15112
- width: var(--c4p--inline-edit--size);
15113
- max-width: var(--c4p--inline-edit--size);
15114
15323
  height: 100%;
15115
15324
  min-height: initial;
15116
15325
  max-height: var(--c4p--inline-edit--size);
@@ -15138,8 +15347,6 @@ button.c4p--add-select__global-filter-toggle--open {
15138
15347
  }
15139
15348
  .c4p--inline-edit .c4p--inline-edit__validation-icon {
15140
15349
  display: inline-flex;
15141
- width: var(--c4p--inline-edit--size);
15142
- max-width: var(--c4p--inline-edit--size);
15143
15350
  height: 100%;
15144
15351
  min-height: initial;
15145
15352
  max-height: var(--c4p--inline-edit--size);
@@ -15293,8 +15500,8 @@ button.c4p--add-select__global-filter-toggle--open {
15293
15500
  justify-content: flex-end;
15294
15501
  }
15295
15502
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
15296
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15297
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15503
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15504
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15298
15505
  overflow: hidden;
15299
15506
  margin: 0;
15300
15507
  background-color: var(--cds-field-01, #f4f4f4);
@@ -15366,8 +15573,8 @@ button.c4p--add-select__global-filter-toggle--open {
15366
15573
  font-weight: var(--cds-body-short-01-font-weight, 400);
15367
15574
  line-height: var(--cds-body-short-01-line-height, 1.28572);
15368
15575
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15369
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15370
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15576
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15577
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15371
15578
  position: absolute;
15372
15579
  z-index: 3;
15373
15580
  display: none;
@@ -15666,7 +15873,9 @@ button.c4p--add-select__global-filter-toggle--open {
15666
15873
  .c4p--datagrid__grid-container td.cds--table-column-checkbox,
15667
15874
  .c4p--datagrid__grid-container th.cds--table-column-checkbox {
15668
15875
  /* stylelint-disable-next-line declaration-no-important */
15669
- padding-right: 1.5rem !important;
15876
+ width: 3rem !important;
15877
+ /* stylelint-disable-next-line declaration-no-important */
15878
+ padding-right: 1rem !important;
15670
15879
  }
15671
15880
 
15672
15881
  .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -15730,7 +15939,7 @@ button.c4p--add-select__global-filter-toggle--open {
15730
15939
  }
15731
15940
 
15732
15941
  .c4p--datagrid__head-hidden-select-all {
15733
- padding-right: 2.5rem;
15942
+ padding-right: 3rem;
15734
15943
  }
15735
15944
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15736
15945
  position: sticky;
@@ -15771,6 +15980,13 @@ button.c4p--add-select__global-filter-toggle--open {
15771
15980
  width: 100% !important;
15772
15981
  }
15773
15982
 
15983
+ .c4p--datagrid__sticky thead {
15984
+ display: flex;
15985
+ }
15986
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
15987
+ width: auto;
15988
+ }
15989
+
15774
15990
  .c4p--datagrid__displayFlex {
15775
15991
  position: relative;
15776
15992
  display: flex;
@@ -15806,6 +16022,9 @@ button.c4p--add-select__global-filter-toggle--open {
15806
16022
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
15807
16023
  border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
15808
16024
  }
16025
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
16026
+ overflow: hidden;
16027
+ }
15809
16028
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
15810
16029
  height: 100%;
15811
16030
  }
@@ -15833,7 +16052,7 @@ button.c4p--add-select__global-filter-toggle--open {
15833
16052
  );
15834
16053
  width: 1px;
15835
16054
  height: var(--c4p--datagrid--indicator-height);
15836
- border-left: 1px solid var(--cds-background-brand, #0f62fe);
16055
+ border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
15837
16056
  content: "";
15838
16057
  }
15839
16058
 
@@ -15869,7 +16088,7 @@ button.c4p--add-select__global-filter-toggle--open {
15869
16088
  left: 0;
15870
16089
  width: 1px;
15871
16090
  height: 1rem;
15872
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
16091
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15873
16092
  content: "";
15874
16093
  transform: translateY(-50%);
15875
16094
  }
@@ -16034,6 +16253,19 @@ button.c4p--add-select__global-filter-toggle--open {
16034
16253
  content: "";
16035
16254
  }
16036
16255
 
16256
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
16257
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
16258
+ border-bottom: none;
16259
+ }
16260
+
16261
+ .cds--data-table td.c4p--datagrid__expandable-row-cell {
16262
+ padding-left: 0.5rem;
16263
+ }
16264
+
16265
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
16266
+ border-bottom: none;
16267
+ }
16268
+
16037
16269
  /*
16038
16270
  * Licensed Materials - Property of IBM
16039
16271
  * 5724-Q36
@@ -16170,7 +16402,7 @@ button.c4p--add-select__global-filter-toggle--open {
16170
16402
  right: 0;
16171
16403
  display: flex;
16172
16404
  align-items: center;
16173
- border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16405
+ border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
16174
16406
  }
16175
16407
 
16176
16408
  .c4p--datagrid__right-sticky-column-header {
@@ -16185,7 +16417,7 @@ button.c4p--add-select__global-filter-toggle--open {
16185
16417
  left: 0;
16186
16418
  display: flex;
16187
16419
  align-items: center;
16188
- border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16420
+ border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
16189
16421
  }
16190
16422
 
16191
16423
  .c4p--datagrid__left-sticky-column-header {
@@ -16197,7 +16429,7 @@ button.c4p--add-select__global-filter-toggle--open {
16197
16429
 
16198
16430
  .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16199
16431
  .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16200
- left: 2.5rem;
16432
+ left: 3rem;
16201
16433
  }
16202
16434
 
16203
16435
  .c4p--datagrid__sticky-noShadow {
@@ -16525,8 +16757,8 @@ button.c4p--add-select__global-filter-toggle--open {
16525
16757
  * US Government Users Restricted Rights - Use, duplication or disclosure
16526
16758
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16527
16759
  */
16528
- th.c4p--datagrid__select-all-toggle-on,
16529
- td.c4p--datagrid__select-all-toggle-on {
16760
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
16761
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
16530
16762
  /* stylelint-disable-next-line declaration-no-important */
16531
16763
  width: 4.5rem !important;
16532
16764
  /* stylelint-disable-next-line declaration-no-important */
@@ -17029,6 +17261,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
17029
17261
  outline-color: var(--cds-support-error, #da1e28);
17030
17262
  }
17031
17263
 
17264
+ .c4p--datagrid .cds--text-input:focus {
17265
+ background: var(--cds-field-01, #f4f4f4);
17266
+ }
17267
+
17032
17268
  .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
17033
17269
  background-color: var(--cds-support-error, #da1e28);
17034
17270
  }