@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
@@ -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
 
@@ -2597,7 +2598,7 @@
2597
2598
  .security--combo-button .security--combo-button__overflow-menu {
2598
2599
  width: 3rem;
2599
2600
  height: auto;
2600
- border-left: 0.125rem solid var(--cds-border-subtle-01, #e0e0e0);
2601
+ border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
2601
2602
  background-color: var(--cds-background-brand, #0f62fe);
2602
2603
  }
2603
2604
 
@@ -2802,7 +2803,7 @@
2802
2803
  top: 0;
2803
2804
  height: min-content;
2804
2805
  padding-top: 0;
2805
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
2806
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
2806
2807
  background-color: transparent;
2807
2808
  grid-row: 1;
2808
2809
  overflow-x: auto;
@@ -3577,12 +3578,12 @@
3577
3578
  }
3578
3579
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
3579
3580
  padding: 1.5rem 2rem;
3580
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3581
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3581
3582
  margin: 0;
3582
3583
  }
3583
3584
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
3584
3585
  padding: 1rem;
3585
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3586
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3586
3587
  margin: 0;
3587
3588
  }
3588
3589
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -3653,7 +3654,7 @@
3653
3654
  }
3654
3655
  .c4p--tearsheet .c4p--tearsheet__influencer {
3655
3656
  flex: 0 0 257px;
3656
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3657
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3657
3658
  overflow-y: auto;
3658
3659
  }
3659
3660
  .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -3671,20 +3672,18 @@
3671
3672
  .c4p--tearsheet .c4p--tearsheet__main {
3672
3673
  display: flex;
3673
3674
  flex-direction: row;
3675
+ background-color: var(--cds-layer);
3674
3676
  grid-column: 1/-1;
3675
3677
  grid-row: 1/-1;
3676
3678
  }
3677
3679
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3678
3680
  border-right: none;
3679
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3681
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3680
3682
  }
3681
3683
  .c4p--tearsheet .c4p--tearsheet__content {
3682
3684
  overflow: auto;
3683
3685
  flex-grow: 1;
3684
3686
  }
3685
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
3686
- background: var(--cds-background, #ffffff);
3687
- }
3688
3687
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
3689
3688
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
3690
3689
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -3695,7 +3694,7 @@
3695
3694
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
3696
3695
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
3697
3696
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
3698
- background-color: var(--cds-field-01, #f4f4f4);
3697
+ background-color: var(--cds-field);
3699
3698
  }
3700
3699
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
3701
3700
  background-color: transparent;
@@ -3718,7 +3717,7 @@
3718
3717
  .c4p--tearsheet .c4p--tearsheet__buttons {
3719
3718
  display: inline-flex;
3720
3719
  min-width: 100%;
3721
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
3720
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3722
3721
  }
3723
3722
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
3724
3723
  background: var(--cds-background, #ffffff);
@@ -4084,7 +4083,7 @@
4084
4083
  height: rem(48px);
4085
4084
  align-items: center;
4086
4085
  padding: 0.5rem;
4087
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4086
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4088
4087
  background: var(--cds-layer-01, #f4f4f4);
4089
4088
  }
4090
4089
 
@@ -4498,15 +4497,15 @@
4498
4497
  }
4499
4498
 
4500
4499
  .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4501
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4500
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4502
4501
  }
4503
4502
 
4504
4503
  .c4p--add-select__column {
4505
4504
  overflow: auto;
4506
4505
  flex: 0 0 20rem;
4507
4506
  padding: 1rem;
4508
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4509
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4507
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4508
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
4510
4509
  }
4511
4510
  .c4p--add-select__column-search-bar {
4512
4511
  display: flex;
@@ -4748,6 +4747,9 @@ button.c4p--add-select__global-filter-toggle--open {
4748
4747
  --cds-border-subtle-selected-01: #525252;
4749
4748
  --cds-border-subtle-selected-02: #6f6f6f;
4750
4749
  --cds-border-subtle-selected-03: #8d8d8d;
4750
+ --cds-border-tile-01: #525252;
4751
+ --cds-border-tile-02: #6f6f6f;
4752
+ --cds-border-tile-03: #8d8d8d;
4751
4753
  --cds-field-01: #262626;
4752
4754
  --cds-field-02: #393939;
4753
4755
  --cds-field-03: #525252;
@@ -4759,6 +4761,7 @@ button.c4p--add-select__global-filter-toggle--open {
4759
4761
  --cds-focus-inverse: #0f62fe;
4760
4762
  --cds-highlight: #002d9c;
4761
4763
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
4764
+ --cds-icon-interactive: #ffffff;
4762
4765
  --cds-icon-inverse: #161616;
4763
4766
  --cds-icon-on-color: #ffffff;
4764
4767
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -4844,6 +4847,10 @@ button.c4p--add-select__global-filter-toggle--open {
4844
4847
  --cds-label-01-font-weight: 400;
4845
4848
  --cds-label-01-line-height: 1.33333;
4846
4849
  --cds-label-01-letter-spacing: 0.32px;
4850
+ --cds-label-02-font-size: 0.875rem;
4851
+ --cds-label-02-font-weight: 400;
4852
+ --cds-label-02-line-height: 1.28572;
4853
+ --cds-label-02-letter-spacing: 0.16px;
4847
4854
  --cds-helper-text-01-font-size: 0.75rem;
4848
4855
  --cds-helper-text-01-line-height: 1.33333;
4849
4856
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -4905,11 +4912,11 @@ button.c4p--add-select__global-filter-toggle--open {
4905
4912
  --cds-productive-heading-05-font-weight: 400;
4906
4913
  --cds-productive-heading-05-line-height: 1.25;
4907
4914
  --cds-productive-heading-05-letter-spacing: 0;
4908
- --cds-productive-heading-06-font-size: 2rem;
4915
+ --cds-productive-heading-06-font-size: 2.625rem;
4909
4916
  --cds-productive-heading-06-font-weight: 300;
4910
4917
  --cds-productive-heading-06-line-height: 1.199;
4911
4918
  --cds-productive-heading-06-letter-spacing: 0;
4912
- --cds-productive-heading-07-font-size: 2.625rem;
4919
+ --cds-productive-heading-07-font-size: 3.375rem;
4913
4920
  --cds-productive-heading-07-font-weight: 300;
4914
4921
  --cds-productive-heading-07-line-height: 1.19;
4915
4922
  --cds-productive-heading-07-letter-spacing: 0;
@@ -4964,7 +4971,7 @@ button.c4p--add-select__global-filter-toggle--open {
4964
4971
  --cds-display-03-line-height: 1.19;
4965
4972
  --cds-display-03-letter-spacing: 0;
4966
4973
  --cds-display-04-font-size: 2.625rem;
4967
- --cds-display-04-font-weight: 600;
4974
+ --cds-display-04-font-weight: 300;
4968
4975
  --cds-display-04-line-height: 1.19;
4969
4976
  --cds-display-04-letter-spacing: 0;
4970
4977
  --cds-legal-01-font-size: 0.75rem;
@@ -5011,11 +5018,11 @@ button.c4p--add-select__global-filter-toggle--open {
5011
5018
  --cds-heading-05-font-weight: 400;
5012
5019
  --cds-heading-05-line-height: 1.25;
5013
5020
  --cds-heading-05-letter-spacing: 0;
5014
- --cds-heading-06-font-size: 2rem;
5021
+ --cds-heading-06-font-size: 2.625rem;
5015
5022
  --cds-heading-06-font-weight: 300;
5016
5023
  --cds-heading-06-line-height: 1.199;
5017
5024
  --cds-heading-06-letter-spacing: 0;
5018
- --cds-heading-07-font-size: 2.625rem;
5025
+ --cds-heading-07-font-size: 3.375rem;
5019
5026
  --cds-heading-07-font-weight: 300;
5020
5027
  --cds-heading-07-line-height: 1.19;
5021
5028
  --cds-heading-07-letter-spacing: 0;
@@ -5062,7 +5069,7 @@ button.c4p--add-select__global-filter-toggle--open {
5062
5069
  --cds-fluid-display-03-line-height: 1.19;
5063
5070
  --cds-fluid-display-03-letter-spacing: 0;
5064
5071
  --cds-fluid-display-04-font-size: 2.625rem;
5065
- --cds-fluid-display-04-font-weight: 600;
5072
+ --cds-fluid-display-04-font-weight: 300;
5066
5073
  --cds-fluid-display-04-line-height: 1.19;
5067
5074
  --cds-fluid-display-04-letter-spacing: 0;
5068
5075
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -5075,9 +5082,10 @@ button.c4p--add-select__global-filter-toggle--open {
5075
5082
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
5076
5083
  --cds-field: var(--cds-field-01, #f4f4f4);
5077
5084
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
5078
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
5085
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
5079
5086
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
5080
5087
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
5088
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
5081
5089
  position: fixed;
5082
5090
  z-index: 2;
5083
5091
  top: 3rem;
@@ -5189,7 +5197,7 @@ button.c4p--add-select__global-filter-toggle--open {
5189
5197
  fill: var(--cds-support-error, #da1e28);
5190
5198
  }
5191
5199
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
5192
- fill: var(--cds-support-success, #198038);
5200
+ fill: var(--cds-support-success, #24a148);
5193
5201
  }
5194
5202
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
5195
5203
  fill: var(--cds-support-warning, #f1c21b);
@@ -7787,7 +7795,7 @@ button.c4p--add-select__global-filter-toggle--open {
7787
7795
  .c4p--card__productive .c4p--card__footer {
7788
7796
  align-items: center;
7789
7797
  justify-content: space-between;
7790
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
7798
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
7791
7799
  }
7792
7800
  .c4p--card__productive .c4p--card__footer-no-button {
7793
7801
  justify-content: flex-end;
@@ -8446,8 +8454,8 @@ button.c4p--add-select__global-filter-toggle--open {
8446
8454
 
8447
8455
  .c4p--toolbar__group {
8448
8456
  display: flex;
8449
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8450
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8457
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8458
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8451
8459
  }
8452
8460
 
8453
8461
  .c4p--toolbar--vertical > .c4p--toolbar__group,
@@ -8521,6 +8529,9 @@ button.c4p--add-select__global-filter-toggle--open {
8521
8529
  --cds-border-subtle-selected-01: #6f6f6f;
8522
8530
  --cds-border-subtle-selected-02: #8d8d8d;
8523
8531
  --cds-border-subtle-selected-03: #a8a8a8;
8532
+ --cds-border-tile-01: #6f6f6f;
8533
+ --cds-border-tile-02: #8d8d8d;
8534
+ --cds-border-tile-03: #a8a8a8;
8524
8535
  --cds-field-01: #393939;
8525
8536
  --cds-field-02: #525252;
8526
8537
  --cds-field-03: #6f6f6f;
@@ -8532,6 +8543,7 @@ button.c4p--add-select__global-filter-toggle--open {
8532
8543
  --cds-focus-inverse: #0f62fe;
8533
8544
  --cds-highlight: #0043ce;
8534
8545
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8546
+ --cds-icon-interactive: #ffffff;
8535
8547
  --cds-icon-inverse: #161616;
8536
8548
  --cds-icon-on-color: #ffffff;
8537
8549
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8617,6 +8629,10 @@ button.c4p--add-select__global-filter-toggle--open {
8617
8629
  --cds-label-01-font-weight: 400;
8618
8630
  --cds-label-01-line-height: 1.33333;
8619
8631
  --cds-label-01-letter-spacing: 0.32px;
8632
+ --cds-label-02-font-size: 0.875rem;
8633
+ --cds-label-02-font-weight: 400;
8634
+ --cds-label-02-line-height: 1.28572;
8635
+ --cds-label-02-letter-spacing: 0.16px;
8620
8636
  --cds-helper-text-01-font-size: 0.75rem;
8621
8637
  --cds-helper-text-01-line-height: 1.33333;
8622
8638
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8678,11 +8694,11 @@ button.c4p--add-select__global-filter-toggle--open {
8678
8694
  --cds-productive-heading-05-font-weight: 400;
8679
8695
  --cds-productive-heading-05-line-height: 1.25;
8680
8696
  --cds-productive-heading-05-letter-spacing: 0;
8681
- --cds-productive-heading-06-font-size: 2rem;
8697
+ --cds-productive-heading-06-font-size: 2.625rem;
8682
8698
  --cds-productive-heading-06-font-weight: 300;
8683
8699
  --cds-productive-heading-06-line-height: 1.199;
8684
8700
  --cds-productive-heading-06-letter-spacing: 0;
8685
- --cds-productive-heading-07-font-size: 2.625rem;
8701
+ --cds-productive-heading-07-font-size: 3.375rem;
8686
8702
  --cds-productive-heading-07-font-weight: 300;
8687
8703
  --cds-productive-heading-07-line-height: 1.19;
8688
8704
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8737,7 +8753,7 @@ button.c4p--add-select__global-filter-toggle--open {
8737
8753
  --cds-display-03-line-height: 1.19;
8738
8754
  --cds-display-03-letter-spacing: 0;
8739
8755
  --cds-display-04-font-size: 2.625rem;
8740
- --cds-display-04-font-weight: 600;
8756
+ --cds-display-04-font-weight: 300;
8741
8757
  --cds-display-04-line-height: 1.19;
8742
8758
  --cds-display-04-letter-spacing: 0;
8743
8759
  --cds-legal-01-font-size: 0.75rem;
@@ -8784,11 +8800,11 @@ button.c4p--add-select__global-filter-toggle--open {
8784
8800
  --cds-heading-05-font-weight: 400;
8785
8801
  --cds-heading-05-line-height: 1.25;
8786
8802
  --cds-heading-05-letter-spacing: 0;
8787
- --cds-heading-06-font-size: 2rem;
8803
+ --cds-heading-06-font-size: 2.625rem;
8788
8804
  --cds-heading-06-font-weight: 300;
8789
8805
  --cds-heading-06-line-height: 1.199;
8790
8806
  --cds-heading-06-letter-spacing: 0;
8791
- --cds-heading-07-font-size: 2.625rem;
8807
+ --cds-heading-07-font-size: 3.375rem;
8792
8808
  --cds-heading-07-font-weight: 300;
8793
8809
  --cds-heading-07-line-height: 1.19;
8794
8810
  --cds-heading-07-letter-spacing: 0;
@@ -8835,7 +8851,7 @@ button.c4p--add-select__global-filter-toggle--open {
8835
8851
  --cds-fluid-display-03-line-height: 1.19;
8836
8852
  --cds-fluid-display-03-letter-spacing: 0;
8837
8853
  --cds-fluid-display-04-font-size: 2.625rem;
8838
- --cds-fluid-display-04-font-weight: 600;
8854
+ --cds-fluid-display-04-font-weight: 300;
8839
8855
  --cds-fluid-display-04-line-height: 1.19;
8840
8856
  --cds-fluid-display-04-letter-spacing: 0;
8841
8857
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -8848,9 +8864,10 @@ button.c4p--add-select__global-filter-toggle--open {
8848
8864
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8849
8865
  --cds-field: var(--cds-field-01, #f4f4f4);
8850
8866
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8851
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
8867
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
8852
8868
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8853
8869
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
8870
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8854
8871
  position: fixed;
8855
8872
  top: 3rem;
8856
8873
  right: 0;
@@ -8897,6 +8914,9 @@ button.c4p--add-select__global-filter-toggle--open {
8897
8914
  --cds-border-subtle-selected-01: #525252;
8898
8915
  --cds-border-subtle-selected-02: #6f6f6f;
8899
8916
  --cds-border-subtle-selected-03: #8d8d8d;
8917
+ --cds-border-tile-01: #525252;
8918
+ --cds-border-tile-02: #6f6f6f;
8919
+ --cds-border-tile-03: #8d8d8d;
8900
8920
  --cds-field-01: #262626;
8901
8921
  --cds-field-02: #393939;
8902
8922
  --cds-field-03: #525252;
@@ -8908,6 +8928,7 @@ button.c4p--add-select__global-filter-toggle--open {
8908
8928
  --cds-focus-inverse: #0f62fe;
8909
8929
  --cds-highlight: #002d9c;
8910
8930
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8931
+ --cds-icon-interactive: #ffffff;
8911
8932
  --cds-icon-inverse: #161616;
8912
8933
  --cds-icon-on-color: #ffffff;
8913
8934
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8993,6 +9014,10 @@ button.c4p--add-select__global-filter-toggle--open {
8993
9014
  --cds-label-01-font-weight: 400;
8994
9015
  --cds-label-01-line-height: 1.33333;
8995
9016
  --cds-label-01-letter-spacing: 0.32px;
9017
+ --cds-label-02-font-size: 0.875rem;
9018
+ --cds-label-02-font-weight: 400;
9019
+ --cds-label-02-line-height: 1.28572;
9020
+ --cds-label-02-letter-spacing: 0.16px;
8996
9021
  --cds-helper-text-01-font-size: 0.75rem;
8997
9022
  --cds-helper-text-01-line-height: 1.33333;
8998
9023
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -9054,11 +9079,11 @@ button.c4p--add-select__global-filter-toggle--open {
9054
9079
  --cds-productive-heading-05-font-weight: 400;
9055
9080
  --cds-productive-heading-05-line-height: 1.25;
9056
9081
  --cds-productive-heading-05-letter-spacing: 0;
9057
- --cds-productive-heading-06-font-size: 2rem;
9082
+ --cds-productive-heading-06-font-size: 2.625rem;
9058
9083
  --cds-productive-heading-06-font-weight: 300;
9059
9084
  --cds-productive-heading-06-line-height: 1.199;
9060
9085
  --cds-productive-heading-06-letter-spacing: 0;
9061
- --cds-productive-heading-07-font-size: 2.625rem;
9086
+ --cds-productive-heading-07-font-size: 3.375rem;
9062
9087
  --cds-productive-heading-07-font-weight: 300;
9063
9088
  --cds-productive-heading-07-line-height: 1.19;
9064
9089
  --cds-productive-heading-07-letter-spacing: 0;
@@ -9113,7 +9138,7 @@ button.c4p--add-select__global-filter-toggle--open {
9113
9138
  --cds-display-03-line-height: 1.19;
9114
9139
  --cds-display-03-letter-spacing: 0;
9115
9140
  --cds-display-04-font-size: 2.625rem;
9116
- --cds-display-04-font-weight: 600;
9141
+ --cds-display-04-font-weight: 300;
9117
9142
  --cds-display-04-line-height: 1.19;
9118
9143
  --cds-display-04-letter-spacing: 0;
9119
9144
  --cds-legal-01-font-size: 0.75rem;
@@ -9160,11 +9185,11 @@ button.c4p--add-select__global-filter-toggle--open {
9160
9185
  --cds-heading-05-font-weight: 400;
9161
9186
  --cds-heading-05-line-height: 1.25;
9162
9187
  --cds-heading-05-letter-spacing: 0;
9163
- --cds-heading-06-font-size: 2rem;
9188
+ --cds-heading-06-font-size: 2.625rem;
9164
9189
  --cds-heading-06-font-weight: 300;
9165
9190
  --cds-heading-06-line-height: 1.199;
9166
9191
  --cds-heading-06-letter-spacing: 0;
9167
- --cds-heading-07-font-size: 2.625rem;
9192
+ --cds-heading-07-font-size: 3.375rem;
9168
9193
  --cds-heading-07-font-weight: 300;
9169
9194
  --cds-heading-07-line-height: 1.19;
9170
9195
  --cds-heading-07-letter-spacing: 0;
@@ -9211,7 +9236,7 @@ button.c4p--add-select__global-filter-toggle--open {
9211
9236
  --cds-fluid-display-03-line-height: 1.19;
9212
9237
  --cds-fluid-display-03-letter-spacing: 0;
9213
9238
  --cds-fluid-display-04-font-size: 2.625rem;
9214
- --cds-fluid-display-04-font-weight: 600;
9239
+ --cds-fluid-display-04-font-weight: 300;
9215
9240
  --cds-fluid-display-04-line-height: 1.19;
9216
9241
  --cds-fluid-display-04-letter-spacing: 0;
9217
9242
  --cds-layer: var(--cds-layer-01, #f4f4f4);
@@ -9224,9 +9249,10 @@ button.c4p--add-select__global-filter-toggle--open {
9224
9249
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
9225
9250
  --cds-field: var(--cds-field-01, #f4f4f4);
9226
9251
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
9227
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
9252
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
9228
9253
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
9229
9254
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9255
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
9230
9256
  }
9231
9257
 
9232
9258
  .c4p--web-terminal__body {
@@ -9835,7 +9861,6 @@ button.c4p--add-select__global-filter-toggle--open {
9835
9861
  top: 0;
9836
9862
  right: 0;
9837
9863
  display: flex;
9838
- width: var(--c4p--inline-edit--toolbar-width);
9839
9864
  height: 100%;
9840
9865
  justify-content: space-between;
9841
9866
  cursor: text;
@@ -9858,8 +9883,6 @@ button.c4p--add-select__global-filter-toggle--open {
9858
9883
  }
9859
9884
  .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 {
9860
9885
  display: inline-flex;
9861
- width: var(--c4p--inline-edit--size);
9862
- max-width: var(--c4p--inline-edit--size);
9863
9886
  height: 100%;
9864
9887
  min-height: initial;
9865
9888
  max-height: var(--c4p--inline-edit--size);
@@ -9923,8 +9946,6 @@ button.c4p--add-select__global-filter-toggle--open {
9923
9946
  }
9924
9947
  .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
9925
9948
  display: inline-flex;
9926
- width: var(--c4p--inline-edit--size);
9927
- max-width: var(--c4p--inline-edit--size);
9928
9949
  height: 100%;
9929
9950
  min-height: initial;
9930
9951
  max-height: var(--c4p--inline-edit--size);
@@ -9952,8 +9973,6 @@ button.c4p--add-select__global-filter-toggle--open {
9952
9973
  }
9953
9974
  .c4p--inline-edit .c4p--inline-edit__validation-icon {
9954
9975
  display: inline-flex;
9955
- width: var(--c4p--inline-edit--size);
9956
- max-width: var(--c4p--inline-edit--size);
9957
9976
  height: 100%;
9958
9977
  min-height: initial;
9959
9978
  max-height: var(--c4p--inline-edit--size);
@@ -10107,8 +10126,8 @@ button.c4p--add-select__global-filter-toggle--open {
10107
10126
  justify-content: flex-end;
10108
10127
  }
10109
10128
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10110
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10111
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10129
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10130
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10112
10131
  overflow: hidden;
10113
10132
  margin: 0;
10114
10133
  background-color: var(--cds-field-01, #f4f4f4);
@@ -10180,8 +10199,8 @@ button.c4p--add-select__global-filter-toggle--open {
10180
10199
  font-weight: var(--cds-body-short-01-font-weight, 400);
10181
10200
  line-height: var(--cds-body-short-01-line-height, 1.28572);
10182
10201
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10183
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10184
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10202
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10203
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10185
10204
  position: absolute;
10186
10205
  z-index: 3;
10187
10206
  display: none;
@@ -10480,7 +10499,9 @@ button.c4p--add-select__global-filter-toggle--open {
10480
10499
  .c4p--datagrid__grid-container td.cds--table-column-checkbox,
10481
10500
  .c4p--datagrid__grid-container th.cds--table-column-checkbox {
10482
10501
  /* stylelint-disable-next-line declaration-no-important */
10483
- padding-right: 1.5rem !important;
10502
+ width: 3rem !important;
10503
+ /* stylelint-disable-next-line declaration-no-important */
10504
+ padding-right: 1rem !important;
10484
10505
  }
10485
10506
 
10486
10507
  .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -10544,7 +10565,7 @@ button.c4p--add-select__global-filter-toggle--open {
10544
10565
  }
10545
10566
 
10546
10567
  .c4p--datagrid__head-hidden-select-all {
10547
- padding-right: 2.5rem;
10568
+ padding-right: 3rem;
10548
10569
  }
10549
10570
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10550
10571
  position: sticky;
@@ -10585,6 +10606,13 @@ button.c4p--add-select__global-filter-toggle--open {
10585
10606
  width: 100% !important;
10586
10607
  }
10587
10608
 
10609
+ .c4p--datagrid__sticky thead {
10610
+ display: flex;
10611
+ }
10612
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
10613
+ width: auto;
10614
+ }
10615
+
10588
10616
  .c4p--datagrid__displayFlex {
10589
10617
  position: relative;
10590
10618
  display: flex;
@@ -10620,6 +10648,9 @@ button.c4p--add-select__global-filter-toggle--open {
10620
10648
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
10621
10649
  border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
10622
10650
  }
10651
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
10652
+ overflow: hidden;
10653
+ }
10623
10654
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
10624
10655
  height: 100%;
10625
10656
  }
@@ -10647,7 +10678,7 @@ button.c4p--add-select__global-filter-toggle--open {
10647
10678
  );
10648
10679
  width: 1px;
10649
10680
  height: var(--c4p--datagrid--indicator-height);
10650
- border-left: 1px solid var(--cds-background-brand, #0f62fe);
10681
+ border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
10651
10682
  content: "";
10652
10683
  }
10653
10684
 
@@ -10683,7 +10714,7 @@ button.c4p--add-select__global-filter-toggle--open {
10683
10714
  left: 0;
10684
10715
  width: 1px;
10685
10716
  height: 1rem;
10686
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
10717
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
10687
10718
  content: "";
10688
10719
  transform: translateY(-50%);
10689
10720
  }
@@ -10848,6 +10879,19 @@ button.c4p--add-select__global-filter-toggle--open {
10848
10879
  content: "";
10849
10880
  }
10850
10881
 
10882
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
10883
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
10884
+ border-bottom: none;
10885
+ }
10886
+
10887
+ .cds--data-table td.c4p--datagrid__expandable-row-cell {
10888
+ padding-left: 0.5rem;
10889
+ }
10890
+
10891
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
10892
+ border-bottom: none;
10893
+ }
10894
+
10851
10895
  /*
10852
10896
  * Licensed Materials - Property of IBM
10853
10897
  * 5724-Q36
@@ -10984,7 +11028,7 @@ button.c4p--add-select__global-filter-toggle--open {
10984
11028
  right: 0;
10985
11029
  display: flex;
10986
11030
  align-items: center;
10987
- border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11031
+ border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
10988
11032
  }
10989
11033
 
10990
11034
  .c4p--datagrid__right-sticky-column-header {
@@ -10999,7 +11043,7 @@ button.c4p--add-select__global-filter-toggle--open {
10999
11043
  left: 0;
11000
11044
  display: flex;
11001
11045
  align-items: center;
11002
- border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11046
+ border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
11003
11047
  }
11004
11048
 
11005
11049
  .c4p--datagrid__left-sticky-column-header {
@@ -11011,7 +11055,7 @@ button.c4p--add-select__global-filter-toggle--open {
11011
11055
 
11012
11056
  .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
11013
11057
  .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
11014
- left: 2.5rem;
11058
+ left: 3rem;
11015
11059
  }
11016
11060
 
11017
11061
  .c4p--datagrid__sticky-noShadow {
@@ -11339,8 +11383,8 @@ button.c4p--add-select__global-filter-toggle--open {
11339
11383
  * US Government Users Restricted Rights - Use, duplication or disclosure
11340
11384
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11341
11385
  */
11342
- th.c4p--datagrid__select-all-toggle-on,
11343
- td.c4p--datagrid__select-all-toggle-on {
11386
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
11387
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
11344
11388
  /* stylelint-disable-next-line declaration-no-important */
11345
11389
  width: 4.5rem !important;
11346
11390
  /* stylelint-disable-next-line declaration-no-important */
@@ -11843,6 +11887,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
11843
11887
  outline-color: var(--cds-support-error, #da1e28);
11844
11888
  }
11845
11889
 
11890
+ .c4p--datagrid .cds--text-input:focus {
11891
+ background: var(--cds-field-01, #f4f4f4);
11892
+ }
11893
+
11846
11894
  .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 {
11847
11895
  background-color: var(--cds-support-error, #da1e28);
11848
11896
  }
@@ -13516,7 +13564,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
13516
13564
 
13517
13565
  .cds--side-nav__navigation {
13518
13566
  display: flex;
13519
- height: 100%;
13520
13567
  flex-direction: column;
13521
13568
  }
13522
13569
 
@@ -14063,13 +14110,13 @@ a.cds--side-nav__link--current::before {
14063
14110
 
14064
14111
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
14065
14112
  padding: 1.5rem 2rem;
14066
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14113
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14067
14114
  margin: 0;
14068
14115
  }
14069
14116
 
14070
14117
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
14071
14118
  padding: 1rem;
14072
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14119
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14073
14120
  margin: 0;
14074
14121
  }
14075
14122
 
@@ -14155,7 +14202,7 @@ a.cds--side-nav__link--current::before {
14155
14202
 
14156
14203
  .c4p--tearsheet .c4p--tearsheet__influencer {
14157
14204
  flex: 0 0 257px;
14158
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14205
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14159
14206
  overflow-y: auto;
14160
14207
  }
14161
14208
 
@@ -14177,13 +14224,14 @@ a.cds--side-nav__link--current::before {
14177
14224
  .c4p--tearsheet .c4p--tearsheet__main {
14178
14225
  display: flex;
14179
14226
  flex-direction: row;
14227
+ background-color: var(--cds-layer);
14180
14228
  grid-column: 1/-1;
14181
14229
  grid-row: 1/-1;
14182
14230
  }
14183
14231
 
14184
14232
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14185
14233
  border-right: none;
14186
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14234
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14187
14235
  }
14188
14236
 
14189
14237
  .c4p--tearsheet .c4p--tearsheet__content {
@@ -14191,10 +14239,6 @@ a.cds--side-nav__link--current::before {
14191
14239
  flex-grow: 1;
14192
14240
  }
14193
14241
 
14194
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content {
14195
- background: var(--cds-background, #ffffff);
14196
- }
14197
-
14198
14242
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
14199
14243
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
14200
14244
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -14205,7 +14249,7 @@ a.cds--side-nav__link--current::before {
14205
14249
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--dropdown-list,
14206
14250
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--number input[type=number],
14207
14251
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--date-picker__input {
14208
- background-color: var(--cds-field-01, #f4f4f4);
14252
+ background-color: var(--cds-field);
14209
14253
  }
14210
14254
 
14211
14255
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--select--inline .cds--select-input {
@@ -14232,7 +14276,7 @@ a.cds--side-nav__link--current::before {
14232
14276
  .c4p--tearsheet .c4p--tearsheet__buttons {
14233
14277
  display: inline-flex;
14234
14278
  min-width: 100%;
14235
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14279
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14236
14280
  }
14237
14281
 
14238
14282
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {