feat(Table): new colors on zebra and hover (#3147)

Co-authored-by: Michael Marszalek <mimarz@gmail.com>

.changeset/cyan-bears-brush.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Table**: New colors on zebra (`--ds-color-surface-tinted`) and hover (`--ds-color-surface-hover`)

.changeset/fluffy-moose-swim.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Table*: Background is now transparent by default

packages/css/src/table.css

@@ -1,7 +1,7 @@
 .ds-table {
-  --dsc-table-background--hover: var(--ds-color-surface-tinted);
-  --dsc-table-background--zebra: var(--ds-color-background-tinted);
-  --dsc-table-background: var(--ds-color-background-default);
+  --dsc-table-background--hover: var(--ds-color-surface-hover);
+  --dsc-table-background--zebra: var(--ds-color-surface-tinted);
+  --dsc-table-background: transparent;
   --dsc-table-border-color: var(--ds-color-border-subtle);
   --dsc-table-border-radius: var(--ds-border-radius-md);
   --dsc-table-border-style: solid;
@@ -12,7 +12,8 @@
   --dsc-table-divider-border-width: calc(var(--ds-border-width-default) + 1px);
   --dsc-table-header-background--hover: var(--ds-color-surface-tinted);
   --dsc-table-header-background--sorted: var(--ds-color-background-tinted);
-  --dsc-table-header-background: var(--ds-color-background-default);
+  --dsc-table-header-background--sticky: var(--ds-color-background-default);
+  --dsc-table-header-background: transparent;
   --dsc-table-padding: var(--ds-size-2) var(--ds-size-3);
   --dsc-table-sort-size: var(--ds-size-6);
 
@@ -173,6 +174,7 @@
     overflow: auto;
 
     & > thead > tr > :is(th, td) {
+      background: var(--dsc-table-header-background--sticky);
       position: sticky;
       top: 0;
       z-index: 2;