feat(ffe-cards)!: Semantiske farger

BREAKING CHANGE: infører semantiske farger

packages/ffe-cards/less/card-base.less

@@ -1,25 +1,21 @@
 @import 'common-card-styling';
 
 .ffe-card-base {
+    color: var(--ffe-color-foreground-default);
     .common-card-styling();
 
     &--clickable {
         .clickable-card-styling();
     }
 
-    padding: var(--ffe-spacing-sm);
-    box-shadow: none; // Overwrite common-card-styling
+    padding: var(--ffe-spacing-md);
 
     &--no-padding {
         padding: 0;
     }
 
     .card-background-styling();
 
-    &--shadow {
-        box-shadow: var(--ffe-v-cards-common-card-box-shadow);
-    }
-
     &--no-margin {
         margin: 0;
     }

packages/ffe-cards/less/cards.less

@@ -1,8 +1,8 @@
-@import 'theme';
 @import 'card-base';
 @import 'text-card';
 @import 'icon-card';
 @import 'illustration-card';
 @import 'image-card';
 @import 'stippled-card';
 @import 'group-card';
+@import 'theme';

packages/ffe-cards/less/common-card-styling.less

@@ -1,10 +1,16 @@
 @import (reference) '@sb1/ffe-core/less/breakpoints';
 
 .common-card-styling() {
+    --ffe-v-cards-common-card-background-color: var(
+        --ffe-color-surface-primary-default
+    );
+    --ffe-v-cards-common-card-border-color: var(
+        --ffe-color-border-primary-default
+    );
+
     background: var(--ffe-v-cards-common-card-background-color);
-    box-shadow: var(--ffe-v-cards-common-card-box-shadow);
     margin: 0 0 var(--ffe-spacing-xs);
-    border: 2px solid var(--ffe-v-cards-common-card-border-color);
+    border: 1px solid var(--ffe-v-cards-common-card-border-color);
     border-radius: var(--ffe-v-cards-common-card-border-radius);
     transition: all var(--ffe-transition-duration) var(--ffe-ease);
     outline: none;
@@ -56,8 +62,11 @@
     @media (hover: hover) and (pointer: fine) {
         &:hover {
             cursor: pointer;
-            border-color: var(--ffe-g-primary-color);
+            border-color: var(--ffe-color-border-primary-hover);
 
+            --ffe-v-cards-common-card-background-color: var(
+                --ffe-color-surface-primary-default-hover
+            );
             &
                 :where(
                     .ffe-card-body__card-name,
@@ -70,8 +79,7 @@
         }
     }
     &:focus-within {
-        border-color: var(--ffe-g-primary-color);
-        box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+        border-color: var(--ffe-color-border-primary-hover);
 
         &
             :where(

packages/ffe-cards/less/components.less

@@ -3,10 +3,12 @@
 .ffe-card-body {
     &__card-name {
         margin: 0 0 var(--ffe-spacing-2xs) 0;
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &__text {
         margin: var(--ffe-spacing-2xs) 0 0 0;
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &__subtext {
@@ -15,14 +17,14 @@
         font-variant-numeric: tabular-nums;
         line-height: 1.25rem;
         font-size: var(--ffe-fontsize-small-text);
-        color: var(--ffe-v-cards-subtext-color);
+        color: var(--ffe-color-foreground-subtle);
         margin: var(--ffe-spacing-2xs) 0 0 0;
     }
 
     &__title {
         font-family: var(--ffe-g-font-heading-small);
         font-variant-numeric: tabular-nums;
-        color: var(--ffe-g-heading-color);
+        color: var(--ffe-color-foreground-emphasis);
         font-weight: normal;
         text-wrap: balance;
         overflow-wrap: anywhere;

packages/ffe-cards/less/group-card.less

@@ -4,13 +4,14 @@
     .common-card-styling();
     .card-background-styling();
 
-    position: relative;
-    border: var(--ffe-v-cards-common-group-card-border);
-    box-shadow: none;
+    --ffe-v-cards-common-group-card-border: var(
+            --ffe-v-cards-common-card-border-radius
+        )
+        var(--ffe-color-border-primary-default);
 
-    &--shadow {
-        box-shadow: var(--ffe-v-cards-common-card-box-shadow);
-    }
+    color: var(--ffe-color-foreground-default);
+    position: relative;
+    border: 1px solid var(--ffe-v-cards-common-card-border-color);
 
     &--no-margin {
         margin: 0;
@@ -40,7 +41,6 @@
     }
 
     &__footer {
-        background-color: var(--ffe-v-group-card-footer-background-color);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -83,10 +83,4 @@
             --ffe-v-cards-common-group-card-separation-border-color
         );
     }
-
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            .card-background-dm-styling();
-        }
-    }
 }

packages/ffe-cards/less/icon-card.less

@@ -32,7 +32,7 @@
     }
 
     .ffe-icon-card__icon {
-        color: var(--ffe-v-cards-icon-color);
+        color: var(--ffe-color-foreground-emphasis);
     }
 
     &--condensed {

packages/ffe-cards/less/image-card.less

@@ -3,6 +3,10 @@
 @import 'components';
 
 .ffe-image-card {
+    --ffe-v-cards-common-card-border-color: var(
+        --ffe-color-border-primary-default
+    );
+
     .common-card-styling();
 
     &--clickable {
@@ -13,27 +17,29 @@
         margin: 0;
     }
 
-    --border-color: transparent;
-
     display: flex;
     padding: 0;
     max-width: 290px;
-    border: var(--ffe-v-cards-image-card-border);
+    border: var(--ffe-v-cards-common-card-border-color);
     flex-flow: column nowrap;
 
     .ffe-image-card__image-overlay,
     .ffe-image-card__body {
-        border-color: var(--border-color);
+        border-color: var(--ffe-v-cards-common-card-border-color);
     }
 
     &:has(.ffe-card__action:active, .ffe-card__action:focus) {
-        --border-color: var(--ffe-v-cards-border-hover-color);
+        --ffe-v-cards-common-card-border-color: var(
+            --ffe-color-border-primary-hover
+        );
     }
 
     &:has(.ffe-card__action) {
         @media (hover: hover) and (pointer: fine) {
             &:hover {
-                --border-color: var(--ffe-v-cards-border-hover-color);
+                --ffe-v-cards-common-card-border-color: var(
+                    --ffe-color-border-primary-hover
+                );
             }
         }
     }
@@ -54,7 +60,7 @@
     &__body {
         width: 100%;
         overflow: hidden;
-        border: 2px solid transparent;
+        border: 1px solid transparent;
         transition: border-color var(--ffe-transition-duration);
     }
 

packages/ffe-cards/less/stippled-card.less

@@ -2,6 +2,8 @@
 @import 'components';
 
 .ffe-stippled-card {
+    --ffe-v-cards-stippled-border-color: var(--ffe-color-foreground-emphasis);
+
     .common-card-styling();
 
     &--clickable {
@@ -24,7 +26,6 @@
 
     background: transparent;
     border: 2px dashed var(--ffe-v-cards-stippled-border-color);
-    box-shadow: none;
     display: flex;
     align-items: center;
     padding: var(--ffe-spacing-md);

packages/ffe-cards/less/theme.less

@@ -1,46 +1,19 @@
 :root,
 :host {
-    --ffe-v-cards-common-text-color: var(--ffe-g-text-color);
-    --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
-    --ffe-v-cards-common-card-border-color: transparent;
-    --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
-    --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0
-        var(--ffe-v-cards-common-card-box-shadow-color);
+    --ffe-v-cards-common-text-color: var(--ffe-color-foreground-default);
+    --ffe-v-cards-common-card-background-color: var(
+        --ffe-color-surface-primary-default
+    );
     --ffe-v-cards-common-card-border-radius: 16px;
     --ffe-v-cards-clickabe-card-link-visited-color: inherit;
-    --ffe-v-cards-subtext-color: var(--ffe-farge-moerkgraa);
-    --ffe-v-cards-border-hover-color: var(--ffe-farge-vann);
-    --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
-    --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
+    --ffe-v-cards-subtext-color: var(--ffe-color-foreground-subtle);
     --ffe-v-cards-image-card-border: none;
-    --ffe-v-cards-common-group-card-border: none;
+    --ffe-v-cards-common-group-card-border: var(
+            --ffe-v-cards-common-card-border-radius
+        )
+        var(--ffe-color-border-primary-default);
     --ffe-v-cards-common-group-card-separation-border-color: var(
-        --ffe-farge-lysgraa
+        --ffe-color-border-primary-default
     );
-    --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30);
-
-    @media (prefers-color-scheme: dark) {
-        .regard-color-scheme-preference {
-            --ffe-v-cards-common-text-color: var(--ffe-farge-hvit);
-            --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
-            --ffe-v-cards-common-card-border-color: var(--ffe-farge-koksgraa);
-            --ffe-v-cards-common-card-box-shadow: none;
-            --ffe-v-cards-clickabe-card-link-visited-color: var(
-                --ffe-farge-hvit
-            );
-            --ffe-v-cards-subtext-color: var(--ffe-farge-graa);
-            --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
-            --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
-            --ffe-v-cards-icon-color: var(--ffe-farge-vann-70);
-            --ffe-v-cards-image-card-border: 1px solid var(--ffe-farge-koksgraa);
-            --ffe-v-cards-common-group-card-border: 1px solid
-                var(--ffe-farge-moerkgraa);
-            --ffe-v-cards-common-group-card-separation-border-color: var(
-                --ffe-farge-moerkgraa
-            );
-            --ffe-v-group-card-footer-background-color: var(
-                --ffe-farge-koksgraa
-            );
-        }
-    }
+    --ffe-v-cards-icon-color:var(--ffe-color-foreground-emphasis) ;
 }