@carbon/charts 0.41.89 → 0.41.93

package/styles/vendor/carbon-components/src/components/data-table/_data-table-core.scss

@@ -18,53 +18,60 @@
   // Container
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-container {
-    min-width: rem(500px);
+    // Allow space for focus styles
+    padding-top: $spacing-01;
+  }
+
+  .#{$prefix}--data-table-content {
     overflow-x: auto;
-    padding-top: $spacing-01; // allow space for focus styles
   }
 
   //----------------------------------------------------------------------------
   // Table title text
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-header {
-    background: $ui-01;
     padding: $spacing-05 0 $spacing-06 $spacing-05;
+    background: $layer;
   }
 
   .#{$prefix}--data-table-header__title {
     @include type-style('productive-heading-03');
-    color: $text-01;
+
+    color: $text-primary;
   }
 
   .#{$prefix}--data-table-header__description {
     @include type-style('body-short-01');
-    color: $text-02;
+
+    color: $text-secondary;
   }
 
   //----------------------------------------------------------------------------
   // Data table
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table {
+    width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
-    width: 100%;
   }
 
   .#{$prefix}--data-table thead {
-    @include type-style('heading-01');
-    background-color: $ui-03;
+    @include type-style('productive-heading-01');
+
+    background-color: $layer-accent;
   }
 
   .#{$prefix}--data-table tbody {
     @include type-style('body-short-01');
-    background-color: $ui-01;
+
     width: 100%;
+    background-color: $layer;
   }
 
   .#{$prefix}--data-table tr {
-    border: none;
-    height: $layout-04;
     width: 100%;
+    height: $spacing-09;
+    border: none;
   }
 
   .#{$prefix}--data-table tbody tr,
@@ -74,90 +81,84 @@
   }
 
   .#{$prefix}--data-table tbody tr:hover {
-    background: $hover-field;
+    background: $layer-hover;
   }
 
   .#{$prefix}--data-table tbody tr:hover td,
   .#{$prefix}--data-table tbody tr:hover th {
-    color: $text-01;
-    background: $hover-field;
-    border-bottom: 1px solid $hover-field;
-    border-top: 1px solid $hover-field;
+    border-top: 1px solid $layer-hover;
+    border-bottom: 1px solid $layer-hover;
+    background: $layer-hover;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
+  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+    color: $link-secondary;
   }
 
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
-    padding-left: $spacing-04;
-    padding-right: $spacing-04;
-    vertical-align: top;
     text-align: left;
+    vertical-align: middle;
   }
 
-  .#{$prefix}--data-table th {
-    color: $text-01;
-    background-color: $ui-03;
+  .#{$prefix}--data-table th[align='right'],
+  .#{$prefix}--data-table td[align='right'] {
+    text-align: right;
+  }
+
+  .#{$prefix}--data-table th[align='center'],
+  .#{$prefix}--data-table td[align='center'] {
+    text-align: center;
   }
 
-  .#{$prefix}--data-table th:first-of-type:not(.#{$prefix}--table-expand) {
+  .#{$prefix}--data-table th {
+    padding-right: $spacing-05;
     padding-left: $spacing-05;
+    background-color: $layer-accent;
+    color: $text-primary;
   }
 
   .#{$prefix}--data-table th:last-of-type {
-    position: relative;
+    // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
+    position: static;
     width: auto;
   }
 
-  .#{$prefix}--data-table .#{$prefix}--table-header-label {
-    display: block;
-    padding: rem(14px) 0;
-    text-align: left;
-  }
-
   .#{$prefix}--data-table td,
   .#{$prefix}--data-table tbody th {
-    background: $ui-01;
-    color: $text-02;
-    border-top: 1px solid $ui-01;
-    border-bottom: 1px solid $ui-03;
-    padding: rem(14px) $spacing-04;
-    padding-bottom: rem(13px);
-
-    & + td:first-of-type {
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
+    border-top: 1px solid $layer;
+    border-bottom: 1px solid $border-subtle;
+    background: $layer;
+    color: $text-secondary;
+
+    + td:first-of-type {
       padding-left: $spacing-04;
     }
   }
 
   @supports (-moz-appearance: none) {
     .#{$prefix}--data-table td {
-      background-clip: padding-box; // fix to show borders in ff
+      // Fix to show borders in ff
+      background-clip: padding-box;
     }
   }
 
-  .#{$prefix}--data-table td:first-of-type {
-    padding-left: $spacing-05;
-  }
-
-  .#{$prefix}--data-table td:last-of-type {
-    padding-right: $spacing-05;
-  }
-
-  // specific padding/width for overflow menu columns
-  .#{$prefix}--data-table .#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
-    width: rem(52px);
-    min-width: rem(52px);
-    padding-top: $spacing-03;
-    padding-right: $spacing-03;
-  }
-
-  .#{$prefix}--data-table td.#{$prefix}--table-column-menu {
-    padding-bottom: 0;
-  }
+  // Form Control Overrides
 
-  .#{$prefix}--data-table
-    td.#{$prefix}--table-column-menu
-    .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
-    background: $ui-03;
+  .#{$prefix}--data-table .#{$prefix}--list-box input[role='combobox'],
+  .#{$prefix}--data-table .#{$prefix}--list-box input[type='text'],
+  .#{$prefix}--data-table .#{$prefix}--dropdown,
+  .#{$prefix}--data-table .#{$prefix}--list-box,
+  .#{$prefix}--data-table .#{$prefix}--number input[type='number'],
+  .#{$prefix}--data-table .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--data-table .#{$prefix}--number__control-btn::after,
+  .#{$prefix}--data-table .#{$prefix}--text-input,
+  .#{$prefix}--data-table .#{$prefix}--select-input {
+    background-color: $field-02;
   }
 
   // Overflow Menu Overrides
@@ -184,6 +185,13 @@
     }
   }
 
+  .#{$prefix}--data-table
+    td.#{$prefix}--table-column-menu
+    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
+    .#{$prefix}--overflow-menu__icon {
+    opacity: 1;
+  }
+
   .#{$prefix}--data-table.#{$prefix}--data-table--visible-overflow-menu
     td.#{$prefix}--table-column-menu
     .#{$prefix}--overflow-menu
@@ -208,78 +216,226 @@
     .#{$prefix}--overflow-menu-options__btn
     .#{$prefix}--overflow-menu-options__option-content
     svg {
-    margin-right: $spacing-03;
     position: relative;
-    top: rem(
-      3px
-    ); //used to center svg without setting display flex //display block needed for overflow text truncation
+    // Used to center svg without setting display flex //display block needed for overflow text truncation
+    top: rem(3px);
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--data-table .#{$prefix}--overflow-menu,
+  .#{$prefix}--data-table .#{$prefix}--overflow-menu__trigger {
+    &:hover {
+      background-color: $layer-selected-hover;
+    }
+  }
+
+  .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu,
+  .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu__trigger {
+    &:hover {
+      background-color: $layer-hover;
+    }
+  }
+
+  .#{$prefix}--data-table--selected .#{$prefix}--link {
+    color: $link-secondary;
+  }
+
+  // V11: Remove compact, short styles
+  .#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
+  .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu,
+  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu,
+  .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
+    height: rem(24px);
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // V11: Remove short styles
+  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu,
+  .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
+    height: rem(32px);
+  }
+
+  .#{$prefix}--data-table--md td.#{$prefix}--table-column-menu {
+    height: rem(40px);
+  }
+
+  // V11: Remove tall styles
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-menu,
+  .#{$prefix}--data-table--xl .#{$prefix}--table-column-menu {
+    padding-top: $spacing-03;
   }
 
   //----------------------------------------------------------------------------
   //ZEBRA
   //----------------------------------------------------------------------------
 
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
-    border-bottom: 1px solid $ui-01;
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:not(.#{$prefix}--parent-row):nth-child(odd)
+    td {
+    border-bottom: 1px solid $layer;
   }
 
-  .#{$prefix}--data-table--zebra tbody tr:nth-child(odd) td {
-    background-color: $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:not(.#{$prefix}--parent-row):nth-child(even)
+    td {
     border-top: 1px solid $data-table-zebra-color;
+    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $data-table-zebra-color;
   }
 
-  .#{$prefix}--data-table--zebra tbody tr:hover td {
-    background-color: $hover-field;
-    border-bottom: 1px solid $hover-field;
-    border-top: 1px solid $hover-field;
+  .#{$prefix}--data-table--zebra
+    tbody
+    tr:not(.#{$prefix}--parent-row):hover
+    td {
+    border-top: 1px solid $layer-hover;
+    border-bottom: 1px solid $layer-hover;
+    background-color: $layer-hover;
   }
 
   //----------------------------------------------------------------------------
   // Select
   //----------------------------------------------------------------------------
   .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
-    padding-left: $spacing-05;
+    padding-left: 0;
   }
 
   .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
-    position: relative;
-    background: $ui-03;
-    padding: rem(12px) $spacing-03 0 $spacing-05;
-    width: rem(
-      44px
-    ); // 16px padding left + 8px padding right + 20px checkbox width
+    // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
+    position: static;
+    width: rem(32px);
+    background: $layer-accent;
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
-  .#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
-    padding-top: rem(11px);
-    padding-bottom: 0;
+  .#{$prefix}--data-table
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label::before {
+    //make checkbox focus larger to match expansion btn focus
+    outline-offset: rem(6px);
+  }
+
+  .#{$prefix}--data-table--compact
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--data-table--xs
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox:focus
+    + .#{$prefix}--checkbox-label::before {
+    //make checkbox match expansion button focus size
+    outline-offset: rem(2px);
+  }
+
+  .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table tbody td.#{$prefix}--table-expand {
+    min-width: 0;
+  }
+
+  .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+    // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
+    padding-right: rem(4px);
+    padding-left: 1rem;
+  }
+
+  .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table tbody td.#{$prefix}--table-expand {
+    width: rem(32px);
+    height: rem(32px);
+  }
+
+  // V11: Remove compact
+  .#{$prefix}--data-table--compact thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--compact tbody td.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand {
+    width: rem(24px);
+    height: rem(24px);
+    padding: 0 0 0 0.5rem;
   }
 
-  th.#{$prefix}--table-column-checkbox:hover {
+  // V11: remove short
+  .#{$prefix}--data-table--short thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--short tbody td.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand {
+    width: rem(32px);
+    height: rem(32px);
+    padding: 0;
+    padding-left: 0.5rem;
+  }
+
+  .#{$prefix}--data-table--md thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand {
+    width: rem(40px);
+    height: rem(40px);
+    padding: rem(4px) 0 rem(4px) rem(8px);
+  }
+
+  // V11: remove tall
+  .#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand,
+  .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand {
+    height: rem(64px);
+    padding-top: rem(10px);
+    padding-bottom: rem(22px);
+  }
+
+  // V11: remove tall
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox {
+    padding-top: rem(13px);
+  }
+
+  // V11: remove tall
+  .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio,
+  .#{$prefix}--data-table--xl .#{$prefix}--table-column-radio {
+    padding-top: $spacing-05;
+  }
+
+  .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
     background: $data-table-column-hover;
   }
 
+  //----------------------------------------------------------------------------
+  // Radio
+  //----------------------------------------------------------------------------
+  .#{$prefix}--table-column-radio {
+    width: 48px;
+  }
+
+  .#{$prefix}--table-column-radio .#{$prefix}--radio-button__appearance {
+    margin-right: rem(-2px);
+  }
+
   // default selected row + zebra select - even child
   .#{$prefix}--data-table--zebra
     tbody
     tr:nth-child(odd).#{$prefix}--data-table--selected
     td,
   tr.#{$prefix}--data-table--selected td {
-    color: $text-01;
-    background-color: $selected-ui;
-    border-top: 1px solid $selected-ui;
-    border-bottom: 1px solid $active-ui; //bottom border acts as separator from other rows
+    border-top: 1px solid $layer-selected;
+    // Bottom border acts as separator from other rows
+    border-bottom: 1px solid $layer-active;
+    background-color: $layer-selected;
+    color: $text-primary;
   }
 
-  // first row
+  // First row
   .#{$prefix}--data-table--zebra
     tbody
     tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected
     td,
   tr.#{$prefix}--data-table--selected:first-of-type td {
-    border-top: 1px solid $active-ui; //top border acts as separator from thead
+    // Top border acts as separator from thead
+    border-top: 1px solid $layer-active;
   }
 
   // last row + zebra select last
@@ -292,8 +448,9 @@
     tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected
     td,
   tr.#{$prefix}--data-table--selected:last-of-type td {
-    border-top: 1px solid $selected-ui; // doesn't need separators
-    border-bottom: 1px solid $selected-ui;
+    // Doesn't need separators
+    border-top: 1px solid $layer-selected;
+    border-bottom: 1px solid $layer-selected;
   }
 
   // zebra select - odd child
@@ -301,7 +458,7 @@
     tbody
     tr:nth-child(even).#{$prefix}--data-table--selected
     td {
-    border-bottom: 1px solid $active-ui;
+    border-bottom: 1px solid $layer-active;
   }
 
   .#{$prefix}--data-table--zebra
@@ -317,10 +474,10 @@
     tr:nth-child(odd).#{$prefix}--data-table--selected:hover
     td,
   .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
-    color: $text-01;
-    background: $data-table-column-hover;
     border-top: 1px solid $data-table-column-hover;
     border-bottom: 1px solid $data-table-column-hover;
+    background: $data-table-column-hover;
+    color: $text-primary;
   }
 
   // selected overflow menu
@@ -330,103 +487,232 @@
     opacity: 1;
   }
 
+  // V11: Remove this compact block
   //----------------------------------------------------------------------------
   // Compact
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table--compact thead tr,
-  .#{$prefix}--data-table--compact tbody tr {
+  .#{$prefix}--data-table--compact tbody tr,
+  .#{$prefix}--data-table--compact tbody tr th {
     height: rem(24px);
   }
 
   .#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
-    padding: rem(2px) 0;
+    padding-top: rem(2px);
+    padding-bottom: rem(2px);
   }
 
-  .#{$prefix}--data-table--compact td {
+  .#{$prefix}--data-table--compact td,
+  .#{$prefix}--data-table--compact tbody tr th {
     padding-top: rem(2px);
     padding-bottom: rem(2px);
   }
 
   .#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
     width: rem(32px);
-    height: rem(23px); //24px row - 1px border
+    height: 100%;
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-menu {
+    .#{$prefix}--table-column-checkbox {
     padding-top: 0;
+    padding-bottom: 0;
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--compact
+    .#{$prefix}--table-column-checkbox
+    .#{$prefix}--checkbox-label {
+    height: rem(23px);
+    // 24px row - 1px border
+    min-height: rem(23px);
+  }
+
+  //----------------------------------------------------------------------------
+  // Extra Small
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table--xs thead tr,
+  .#{$prefix}--data-table--xs tbody tr,
+  .#{$prefix}--data-table--xs tbody tr th {
+    height: rem(24px);
+  }
+
+  .#{$prefix}--data-table--xs .#{$prefix}--table-header-label {
+    padding-top: rem(2px);
+    padding-bottom: rem(2px);
+  }
+
+  .#{$prefix}--data-table--xs td,
+  .#{$prefix}--data-table--xs tbody tr th {
+    padding-top: rem(2px);
+    padding-bottom: rem(2px);
+  }
+
+  .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu {
+    width: rem(32px);
+    height: calc(100% + 1px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--xs
     .#{$prefix}--table-column-checkbox {
     padding-top: 0;
     padding-bottom: 0;
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--compact
+  .#{$prefix}--data-table.#{$prefix}--data-table--xs
     .#{$prefix}--table-column-checkbox
     .#{$prefix}--checkbox-label {
-    min-height: rem(23px); //24px row - 1px border
     height: rem(23px);
+    // 24px row - 1px border
+    min-height: rem(23px);
   }
 
+  // V11: Remove this short block
   //----------------------------------------------------------------------------
   // Short
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table--short thead tr,
-  .#{$prefix}--data-table--short tbody tr {
+  .#{$prefix}--data-table--short tbody tr,
+  .#{$prefix}--data-table--short tbody tr th {
     height: rem(32px);
   }
 
   .#{$prefix}--data-table--short .#{$prefix}--table-header-label {
-    padding: rem(7px) 0;
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
   }
 
-  .#{$prefix}--data-table--short td {
+  .#{$prefix}--data-table--short td,
+  .#{$prefix}--data-table--short tbody tr th {
     padding-top: rem(7px);
     padding-bottom: rem(6px);
   }
 
+  .#{$prefix}--data-table.#{$prefix}--data-table--short
+    .#{$prefix}--table-column-checkbox {
+    padding-top: rem(3px);
+    padding-bottom: rem(3px);
+  }
+
   .#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
-    height: rem(31px); //32px row - 1px border
+    height: 100%;
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--short
-    .#{$prefix}--table-column-menu {
-    padding-top: 0;
+  //----------------------------------------------------------------------------
+  // Small
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table--sm thead tr,
+  .#{$prefix}--data-table--sm tbody tr,
+  .#{$prefix}--data-table--sm tbody tr th {
+    height: rem(32px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--short
+  .#{$prefix}--data-table--sm .#{$prefix}--table-header-label {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+
+  .#{$prefix}--data-table--sm td,
+  .#{$prefix}--data-table--sm tbody tr th {
+    padding-top: rem(7px);
+    padding-bottom: rem(6px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--sm
+    .#{$prefix}--table-column-checkbox {
+    padding-top: rem(3px);
+    padding-bottom: rem(3px);
+  }
+
+  .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu {
+    height: calc(100% + 1px);
+  }
+
+  //----------------------------------------------------------------------------
+  // Medium
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table--md thead tr,
+  .#{$prefix}--data-table--md tbody tr,
+  .#{$prefix}--data-table--md tbody tr th {
+    height: rem(40px);
+  }
+
+  .#{$prefix}--data-table--md .#{$prefix}--table-header-label {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+
+  .#{$prefix}--data-table--md td,
+  .#{$prefix}--data-table--md tbody tr th {
+    padding-top: rem(7px);
+    padding-bottom: rem(6px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--md
     .#{$prefix}--table-column-checkbox {
     padding-top: rem(3px);
     padding-bottom: rem(3px);
   }
 
+  .#{$prefix}--data-table--md .#{$prefix}--table-column-menu {
+    padding-top: rem(3px);
+    padding-bottom: rem(3px);
+  }
+
+  // V11: remove this tall block
   //----------------------------------------------------------------------------
   // Tall
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table--tall thead tr,
-  .#{$prefix}--data-table--tall tbody tr {
+  .#{$prefix}--data-table--tall tbody tr,
+  .#{$prefix}--data-table--tall tbody tr th {
     height: rem(64px);
   }
 
   .#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
-    padding: rem(16px) 0;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-05;
   }
 
-  .#{$prefix}--data-table--tall td {
+  .#{$prefix}--data-table--tall td,
+  .#{$prefix}--data-table--tall tbody tr th {
     padding-top: 1rem;
   }
 
-  .#{$prefix}--data-table--cell-secondary-text {
+  .#{$prefix}--data-table--tall th,
+  .#{$prefix}--data-table--tall td {
+    vertical-align: top;
+  }
+
+  .#{$prefix}--data-table--tall .#{$prefix}--data-table--cell-secondary-text {
     @include type-style('label-01');
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--tall
-    .#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table.#{$prefix}--data-table--tall
-    .#{$prefix}--table-column-checkbox {
-    padding-top: rem(12px);
+  //----------------------------------------------------------------------------
+  // Extra Large
+  //----------------------------------------------------------------------------
+  .#{$prefix}--data-table--xl thead tr,
+  .#{$prefix}--data-table--xl tbody tr,
+  .#{$prefix}--data-table--xl tbody tr th {
+    height: rem(64px);
+  }
+
+  .#{$prefix}--data-table--xl .#{$prefix}--table-header-label {
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$prefix}--data-table--xl td,
+  .#{$prefix}--data-table--xl tbody tr th {
+    padding-top: 1rem;
+  }
+
+  .#{$prefix}--data-table--xl th,
+  .#{$prefix}--data-table--xl td {
+    vertical-align: top;
+  }
+
+  .#{$prefix}--data-table--xl .#{$prefix}--data-table--cell-secondary-text {
+    @include type-style('label-01');
   }
 
   //----------------------------------------------------------------------------
@@ -440,14 +726,12 @@
   // Sticky header
   // -------------
   .#{$prefix}--data-table_inner-container {
-    background-color: $ui-03;
-    padding-top: rem(48px);
+    background-color: $layer-accent;
     transform: translateZ(0);
   }
 
   .#{$prefix}--data-table--sticky-header {
     display: block;
-    // max-height: rem(300px);
     overflow-y: scroll;
 
     thead,
@@ -459,34 +743,103 @@
     }
 
     thead {
-      position: fixed;
+      position: sticky;
+      z-index: 1;
       top: 0;
-      width: 100%;
       overflow: scroll;
-      -ms-overflow-style: none; //hides ie scrollbar
+      width: 100%;
+      // Hides ie scrollbar
+      -ms-overflow-style: none;
       will-change: transform;
     }
 
     thead tr th {
-      border-bottom: 1px solid $active-ui;
+      border-bottom: 1px solid $layer-active;
     }
 
     tbody {
       flex-direction: column;
+      // Hides ie scrollbar
+      -ms-overflow-style: none;
       overflow-x: scroll;
-      -ms-overflow-style: none; //hides ie scrollbar
       will-change: transform;
     }
 
-    tr {
-      min-height: rem(48px);
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
       height: auto;
+      min-height: 3rem;
+    }
+
+    tr.#{$prefix}--expandable-row:not(.#{$prefix}--parent-row) {
+      height: auto;
+    }
+
+    .#{$prefix}--table-expand {
+      max-width: rem(48px);
+    }
+
+    thead .#{$prefix}--table-expand {
+      align-items: center;
+    }
+
+    .#{$prefix}--parent-row {
+      min-height: 3rem;
+    }
+
+    // V11: remove compact, tall, and short
+    &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--sm)
+      td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
+      padding-top: rem(14px);
+    }
+
+    // Taken from L125 _data-table-expandable
+    // Used to hide white line when parent row is hovered when child is expanded
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
+      + tr[data-child-row]
+      td {
+      border-top: 1px solid $layer-hover;
+    }
+
+    tr.#{$prefix}--expandable-row:last-of-type {
+      overflow: hidden;
     }
 
     tr.#{$prefix}--data-table--selected:first-of-type td {
       border-top: none;
     }
 
+    // Selectable fix
+    thead th.#{$prefix}--table-column-checkbox,
+    tbody tr td.#{$prefix}--table-column-checkbox {
+      width: rem(36px);
+      min-width: rem(36px);
+      align-items: center;
+    }
+
+    // V11: remove tall
+    &.#{$prefix}--data-table--tall thead th.#{$prefix}--table-column-checkbox,
+    &.#{$prefix}--data-table--xl thead th.#{$prefix}--table-column-checkbox,
+    &.#{$prefix}--data-table--tall td.#{$prefix}--table-column-checkbox,
+    &.#{$prefix}--data-table--xl td.#{$prefix}--table-column-checkbox {
+      align-items: flex-start;
+    }
+
+    // Overflow fix
+    /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */
+    th.#{$prefix}--table-column-checkbox ~ th:last-of-type:empty {
+      max-width: rem(64px);
+    }
+
+    th:empty:not(.#{$prefix}--table-expand) {
+      max-width: 2.25rem;
+    }
+
+    td.#{$prefix}--table-column-menu {
+      height: auto;
+      align-items: center;
+      padding-top: 0;
+    }
+
     //hides webkit scrollbar
     thead::-webkit-scrollbar,
     tbody::-webkit-scrollbar {
@@ -511,13 +864,131 @@
       min-width: 0;
     }
 
+    // V11: remove compact, short, tall
+    &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
+      height: auto;
+    }
+
+    // Compact
+    // V11: remove compact
+    &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row) {
+      min-height: rem(24px);
+    }
+
+    // Short
+    // V11: remove short
+    &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row) {
+      min-height: rem(32px);
+    }
+
+    // Tall
+    // V11: remove tall
+    &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row),
+    &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
+      min-height: rem(64px);
+    }
+
+    // Expansion overrides
+    // V11: remove compact
+    &.#{$prefix}--data-table--compact tr td.#{$prefix}--table-expand,
+    &.#{$prefix}--data-table--xs tr td.#{$prefix}--table-expand {
+      padding-top: rem(4px);
+    }
+
+    // V11: remove short
+    &.#{$prefix}--data-table--short tr td.#{$prefix}--table-expand,
+    &.#{$prefix}--data-table--sm tr td.#{$prefix}--table-expand {
+      padding-top: rem(8px);
+    }
+
     .#{$prefix}--table-header-label {
-      max-width: calc(100% - 10px);
       @include text-overflow;
+
+      max-width: calc(100% - 10px);
+      // Needed to reduce 1px jump when toggling between variations
+      padding-top: rem(15px);
+      padding-bottom: 1rem;
+      overflow-y: hidden;
     }
+
+    // V11: remove compact
+    &.#{$prefix}--data-table--compact th .#{$prefix}--table-header-label,
+    &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label {
+      padding-top: rem(3px);
+      padding-bottom: 0;
+    }
+
+    // V11: remove short
+    &.#{$prefix}--data-table--short th .#{$prefix}--table-header-label,
+    &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label {
+      padding-top: rem(8px);
+      padding-bottom: 0;
+    }
+
+    // V11: remove tall
+    &.#{$prefix}--data-table--tall th .#{$prefix}--table-header-label,
+    &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label {
+      padding-top: 1rem;
+    }
+
+    // V11: remove tall
+    &.#{$prefix}--data-table--tall th.#{$prefix}--table-expand,
+    &.#{$prefix}--data-table--xl th.#{$prefix}--table-expand {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    // With dynamic content overrides
+    // V11: remove compact, short
+    &.#{$prefix}--data-table--compact
+      tr.#{$prefix}--parent-row
+      .#{$prefix}--table-column-checkbox,
+    &.#{$prefix}--data-table--short
+      tr.#{$prefix}--parent-row
+      .#{$prefix}--table-column-checkbox,
+    &.#{$prefix}--data-table--xs
+      tr.#{$prefix}--parent-row
+      .#{$prefix}--table-column-checkbox,
+    &.#{$prefix}--data-table--sm
+      tr.#{$prefix}--parent-row
+      .#{$prefix}--table-column-checkbox {
+      align-items: flex-start;
+    }
+  }
+
+  @include sticky-header($max-width: 100%);
+
+  // -------------------
+  // with boolean column
+  // -------------------
+  .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
+    margin: 0;
+  }
+
+  // V11: remove short, compact
+  .#{$prefix}--data-table--short
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
+  .#{$prefix}--data-table--compact
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
+  .#{$prefix}--data-table--xs
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
+  .#{$prefix}--data-table--sm
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
+    margin: rem(-3px) 0;
   }
 
-  @include sticky-header($max-width: rem(900px));
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--data-table-content {
+    @include high-contrast-mode('outline');
+  }
 }
 
 @include exports('data-table-v2-core') {