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

Sign up to get free protection for your applications and to get access to all the features.
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
  }