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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/css/index-full-carbon.css +4849 -2937
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +61 -43
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +117 -73
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -4
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +342 -106
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Card/CardFooter.js +2 -2
  18. package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  19. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
  21. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +4 -2
  22. package/es/components/Datagrid/useActionsColumn.js +29 -1
  23. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  24. package/es/components/Datagrid/useNestedRows.js +2 -4
  25. package/es/components/Datagrid/useSelectAllToggle.js +18 -2
  26. package/es/components/Datagrid/useSelectRows.js +19 -2
  27. package/es/components/Datagrid/useStickyColumn.js +22 -5
  28. package/es/components/PageHeader/PageHeaderTitle.js +1 -0
  29. package/es/components/SidePanel/SidePanel.js +14 -5
  30. package/es/components/Tearsheet/TearsheetShell.js +6 -4
  31. package/lib/components/Card/CardFooter.js +2 -2
  32. package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  33. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
  34. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
  35. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +3 -1
  36. package/lib/components/Datagrid/useActionsColumn.js +30 -1
  37. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  38. package/lib/components/Datagrid/useNestedRows.js +2 -4
  39. package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
  40. package/lib/components/Datagrid/useSelectRows.js +26 -2
  41. package/lib/components/Datagrid/useStickyColumn.js +22 -4
  42. package/lib/components/PageHeader/PageHeaderTitle.js +1 -0
  43. package/lib/components/SidePanel/SidePanel.js +14 -5
  44. package/lib/components/Tearsheet/TearsheetShell.js +4 -2
  45. package/package.json +8 -8
  46. package/scss/components/Datagrid/styles/_datagrid.scss +25 -3
  47. package/scss/components/Datagrid/styles/_useInlineEdit.scss +4 -0
  48. package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
  49. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
  50. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  51. package/scss/components/InlineEditV1/_inline-edit-v1.scss +1 -3
  52. package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
  53. package/scss/components/Tearsheet/_tearsheet.scss +4 -5
@@ -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 {