From 3f43a957251c6918bf2789648cb54372f46fd8ac Mon Sep 17 00:00:00 2001
From: Anders Johnsen <anders.johnsen@sparebank1.no>
Date: Fri, 21 Feb 2025 12:54:29 +0100
Subject: [PATCH] fix(ffe-tables): semantiske farger i tables

BREAKING CHANGE: endrede farger og tildels former i tables
---
 packages/ffe-tables/less/tables.less | 36 +++++++++++++++-------------
 packages/ffe-tables/less/theme.less  | 28 ----------------------
 2 files changed, 20 insertions(+), 44 deletions(-)
 delete mode 100644 packages/ffe-tables/less/theme.less

diff --git a/packages/ffe-tables/less/tables.less b/packages/ffe-tables/less/tables.less
index e8ff15e4e4..06db2c2eb6 100644
--- a/packages/ffe-tables/less/tables.less
+++ b/packages/ffe-tables/less/tables.less
@@ -1,16 +1,17 @@
 @import (reference) '@sb1/ffe-core/less/accessibility';
 @import (reference) '@sb1/ffe-core/less/breakpoints';
-@import 'theme';
 
 .ffe-table {
     --outline-width: 2px;
     --outline-offset: 2px;
+    --border-radius: 8px;
     --expand-button-size: var(--ffe-v-icons-size-md);
 
     border-collapse: collapse;
     border-spacing: 0;
     display: table;
     width: 100%;
+    color: var(--ffe-color-foreground-default);
 
     tr,
     td,
@@ -20,7 +21,7 @@
 
     &__caption {
         margin-bottom: var(--ffe-spacing-md);
-        color: var(--ffe-g-heading-color);
+        color: var(--ffe-color-foreground-emphasis);
         font-size: var(--ffe-fontsize-h4);
     }
 
@@ -42,15 +43,15 @@
 
     &__body {
         .ffe-table__tr {
-            border-bottom: 1px solid var(--ffe-v-table-row-bordercolor);
+            border-bottom: 1px solid var(--ffe-color-border-primary-default);
 
             &:first-of-type {
-                border-top: 1px solid var(--ffe-v-table-row-bordercolor);
+                border-top: 1px solid var(--ffe-color-border-primary-default);
             }
         }
 
         .ffe-table__cell-content {
-            color: var(--ffe-v-table-content-color);
+            color: var(--ffe-color-foreground-default);
         }
     }
 
@@ -82,7 +83,7 @@
 
         .ffe-icons {
             transition: all var(--ffe-transition-duration) var(--ffe-ease);
-            color: var(--ffe-v-table-expand-icon-color);
+            color: var(--ffe-color-foreground-default);
         }
 
         &--open {
@@ -93,7 +94,7 @@
     }
 
     &__expand-content {
-        background: var(--ffe-v-table-expanded-content-bg);
+        background: var(--ffe-color-surface-primary-default-pressed);
     }
 
     &__th,
@@ -104,27 +105,29 @@
     }
 
     &__th {
-        color: var(--ffe-v-table-heading-color);
+        color: var(--ffe-color-foreground-default);
     }
 
     &__th--sortable {
         --border-color: transparent;
 
-        color: var(--ffe-v-table-heading-color-sortable);
+        color: var(--ffe-color-foreground-emphasis);
         cursor: pointer;
+        transition: background var(--ffe-transition-duration) var(--ffe-ease);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
 
         &-ascending,
         &-descending {
-            background: var(--ffe-v-table-sortable-header-active-color);
+            background: var(--ffe-color-surface-primary-default-pressed);
         }
 
-        .ffe-table__sort-button {
-            border-bottom: 2px solid var(--border-color);
+        &:hover {
+            background: var(--ffe-color-surface-primary-default-hover);
         }
 
         @media (hover: hover) and (pointer: fine) {
             &:hover {
-                --border-color: var(--ffe-v-table-sortable-header-hover-color);
+                --border-color: var(--ffe-color-fill-primary-hover);
             }
         }
     }
@@ -144,13 +147,13 @@
 
         @media (hover: hover) and (pointer: fine) {
             &:hover {
-                background: var(--ffe-v-table-expanded-row-bg);
+                background: var(--ffe-color-surface-primary-default-hover);
             }
         }
     }
 
     &__tr--expand-open {
-        background: var(--ffe-v-table-expanded-row-bg);
+        background: var(--ffe-color-surface-primary-default-hover);
     }
 
     &__column-header {
@@ -163,7 +166,8 @@
 }
 
 :is(.ffe-table__expand-button, .ffe-table__sort-button):focus-visible {
-    outline: var(--outline-width) solid var(--ffe-v-table-button-focus-outline);
+    outline: var(--outline-width) solid
+        var(--ffe-color-border-interactive-focus);
     outline-offset: var(--outline-offset);
 }
 
diff --git a/packages/ffe-tables/less/theme.less b/packages/ffe-tables/less/theme.less
deleted file mode 100644
index 9fda6ab338..0000000000
--- a/packages/ffe-tables/less/theme.less
+++ /dev/null
@@ -1,28 +0,0 @@
-:root,
-:host {
-    --ffe-v-table-heading-color: var(--ffe-farge-svart);
-    --ffe-v-table-heading-color-sortable: var(--ffe-farge-fjell);
-    --ffe-v-table-row-bordercolor: var(--ffe-farge-varmgraa);
-    --ffe-v-table-expand-icon-color: var(--ffe-farge-vann);
-    --ffe-v-table-expanded-content-bg: var(--ffe-farge-syrin-30);
-    --ffe-v-table-expanded-row-bg: var(--ffe-farge-syrin-70);
-    --ffe-v-table-sortable-header-hover-color: var(--ffe-farge-fjell);
-    --ffe-v-table-button-focus-outline: var(--ffe-farge-vann);
-    --ffe-v-table-content-color: var(--ffe-farge-svart);
-    --ffe-v-table-sortable-header-active-color: var(--ffe-farge-syrin-70);
-
-    @media (prefers-color-scheme: dark) {
-        .regard-color-scheme-preference {
-            --ffe-v-table-heading-color: var(--ffe-farge-hvit);
-            --ffe-v-table-heading-color-sortable: var(--ffe-farge-vann-30);
-            --ffe-v-table-row-bordercolor: var(--ffe-farge-graa);
-            --ffe-v-table-expand-icon-color: var(--ffe-farge-vann-30);
-            --ffe-v-table-expanded-content-bg: var(--ffe-farge-svart);
-            --ffe-v-table-sortable-header-hover-color: var(--ffe-farge-vann-30);
-            --ffe-v-table-button-focus-outline: var(--ffe-farge-hvit);
-            --ffe-v-table-expanded-row-bg: var(--ffe-farge-natt);
-            --ffe-v-table-content-color: var(--ffe-farge-lysgraa);
-            --ffe-v-table-sortable-header-active-color: var(--ffe-farge-natt);
-        }
-    }
-}