fix(data-table): respect the current layer theming (#20873)

Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

Author: bjornpijnacker

packages/web-components/src/components/data-table/_table-core.scss

@@ -17,15 +17,15 @@
 
     display: table-header-group;
 
-    background-color: $layer-accent-01;
+    background-color: $layer-accent;
   }
 
   ::slotted(#{$prefix}-table-body) {
     @include type-style('body-short-01');
 
     display: table-row-group;
 
-    background-color: $layer-01;
+    background-color: $layer;
     inline-size: 100%;
   }
 }
@@ -159,7 +159,7 @@
   ::slotted(#{$prefix}-table-header-cell),
   ::slotted(#{$prefix}-table-header-cell-skeleton) {
     display: table-cell;
-    background-color: $layer-accent-01;
+    background-color: $layer-accent;
     color: $text-primary;
     outline: none;
     text-align: start;
@@ -401,7 +401,7 @@
   .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
-    border-block-end: 1px solid $layer-01;
+    border-block-end: 1px solid $layer;
   }
 }
 
@@ -410,8 +410,8 @@
   .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
-    background-color: $layer-accent-01;
-    border-block-end: 1px solid $layer-accent-01;
+    background-color: $layer-accent;
+    border-block-end: 1px solid $layer-accent;
   }
 }
 
@@ -423,8 +423,8 @@
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
     background-color: $background-hover;
-    border-block-end-color: $layer-hover-01;
-    border-block-start-color: $layer-hover-01;
+    border-block-end-color: $layer-hover;
+    border-block-start-color: $layer-hover;
     color: $text-primary;
   }
 }
@@ -437,7 +437,7 @@
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
     background-color: $background-hover;
-    border-block-end: 1px solid $layer-hover-01;
+    border-block-end: 1px solid $layer-hover;
   }
 }
 

packages/web-components/src/components/data-table/_table-expandable.scss

@@ -135,30 +135,30 @@
   &[highlighted] {
     .#{$prefix}--table-expand {
       background-color: $background-hover;
-      border-block-end-color: $layer-hover-01;
-      border-block-start-color: $layer-hover-01;
+      border-block-end-color: $layer-hover;
+      border-block-start-color: $layer-hover;
     }
   }
 
   &[even] {
     .#{$prefix}--table-expand {
-      background-color: $layer-accent-01;
-      border-block-end: 1px solid $layer-accent-01;
+      background-color: $layer-accent;
+      border-block-end: 1px solid $layer-accent;
 
       &:hover {
         background-color: $background-hover;
-        border-block-end: 1px solid $layer-hover-01;
+        border-block-end: 1px solid $layer-hover;
       }
     }
   }
 
   &[odd] {
     .#{$prefix}--table-expand {
-      border-block-end: 1px solid $layer-01;
+      border-block-end: 1px solid $layer;
 
       &:hover {
         background-color: $background-hover;
-        border-block-end: 1px solid $layer-hover-01;
+        border-block-end: 1px solid $layer-hover;
       }
     }
   }

packages/web-components/src/components/data-table/_table-selection.scss

@@ -51,16 +51,16 @@
 :host(#{$prefix}-table-row:hover) {
   .#{$prefix}--table-column-checkbox {
     background-color: $background-hover;
-    border-block-end-color: $layer-hover-01;
-    border-block-start-color: $layer-hover-01;
+    border-block-end-color: $layer-hover;
+    border-block-start-color: $layer-hover;
   }
 }
 
 :host(#{$prefix}-table-row[selected]) {
   ::slotted(#{$prefix}-table-cell),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    background-color: $layer-accent-01;
+    background-color: $layer-accent;
     // bottom border acts as separator from other rows
     border-block-end: 1px solid $layer-active;
     color: $text-primary;