feat(ffe-core): nye semantiske farger.

BREAKING CHANGE: nye farger. Ingen ting å gjøre hvis man ikke har
justert fargene.

packages/ffe-core/less/body.less

@@ -1,18 +1,7 @@
 // Sets default body color, font styles and background color for light and dark themes
 .ffe-body {
-    --color: var(--ffe-g-text-color);
-    --background-color: var(--ffe-farge-hvit);
-
-    background-color: var(--background-color);
-    color: var(--color);
-
-    &.regard-color-scheme-preference {
-        @media (prefers-color-scheme: dark) {
-            --color: var(--ffe-farge-lysgraa);
-            --background-color: var(--ffe-farge-svart);
-        }
-    }
-
+    background-color: var(--ffe-color-foreground-default);
+    color: var(--ffe-color-background-default);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
 

packages/ffe-core/less/colors.less

@@ -2,6 +2,7 @@
 // ======== Ny visuell identitet ========
 //
 
+/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
 // Primærpalett
 @ffe-farge-fjell: #002776;
 @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);

packages/ffe-core/less/theme.less

@@ -3,9 +3,10 @@
 /**
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
  */
-
 :root,
 :host {
+    /* DEPRICATED, bruk colors-semantic i stedet for */
+
     /** Primærpalett */
     --ffe-farge-fjell: @ffe-farge-fjell;
     --ffe-farge-fjell-70: @ffe-farge-fjell-70;
@@ -61,6 +62,8 @@
     --ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
     --ffe-farge-hvit: @ffe-farge-hvit;
 
+    /* END depricated */
+
     /** Font sizes */
     --ffe-fontsize-body-text: 1rem;
     --ffe-fontsize-small-text: 0.875rem;
@@ -125,18 +128,18 @@
     /** Theme base colors */
 
     /* Links, buttons and similar */
-    --ffe-g-primary-color: var(--ffe-farge-vann);
+    --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated
 
     /* Headings, labels, hover, etc */
-    --ffe-g-secondary-color: var(--ffe-farge-fjell);
+    --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated
 
     /* Error messages, invalid inputs, etc  */
-    --ffe-g-error-color: var(--ffe-farge-baer);
+    --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
 
     /** Theme borders */
 
     /* Form element borders */
-    --ffe-g-border-color: var(--ffe-farge-varmgraa);
+    --ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
     --ffe-g-border-radius: 8px;
     --ffe-g-border-radius-lg: 16px;
     --ffe-g-border-width: 1px;
@@ -162,34 +165,26 @@
     /** Typography */
 
     /* Default body text color */
-    --ffe-g-text-color: var(--ffe-farge-svart);
+    --ffe-g-text-color: var(--ffe-color-foreground-default);
 
     /* Lead paragraph */
-    --ffe-g-lead-color: var(--ffe-farge-fjell);
+    --ffe-g-lead-color: var(--ffe-color-border-primary-subtle);
 
     /* Headings */
-    --ffe-g-heading-color: var(--ffe-farge-fjell);
+    --ffe-g-heading-color: var(--ffe-color-border-primary-emphasis);
 
     /* Links */
-    --ffe-g-link-color: var(--ffe-farge-vann);
-    --ffe-g-link-color-hover: var(--ffe-farge-fjell);
-    --ffe-g-link-color-visited: var(--ffe-farge-lyng);
-    --ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
-    --ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
-
-    @media (prefers-color-scheme: dark) {
-        .regard-color-scheme-preference {
-            --ffe-g-primary-color: var(--ffe-farge-vann-70);
-            --ffe-g-secondary-color: var(--ffe-farge-vann-70);
-            --ffe-g-border-color: var(--ffe-farge-graa);
-            --ffe-g-text-color: var(--ffe-farge-lysgraa);
-            --ffe-g-lead-color: var(--ffe-farge-vann-70);
-            --ffe-g-heading-color: var(--ffe-farge-vann-70);
-            --ffe-g-link-color: var(--ffe-farge-vann-70);
-            --ffe-g-link-color-hover: var(--ffe-farge-vann-30);
-            --ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
-            --ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
-            --ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
-        }
-    }
+    --ffe-g-link-color: var(--ffe-color-foreground-interactive-link);
+    --ffe-g-link-color-hover: var(
+        --ffe-color-foreground-interactive-link-hover
+    );
+    --ffe-g-link-color-visited: var(
+        --ffe-color-foreground-interactive-link-pressed
+    );
+    --ffe-g-link-icon-color-hover: var(
+        --ffe-color-foreground-interactive-link-hover
+    );
+    --ffe-g-link-icon-color-focus: var(
+        --ffe-color-foreground-interactive-link-pressed
+    );
 }

packages/ffe-core/less/typography.less

@@ -1,5 +1,4 @@
 @import 'breakpoints';
-@import 'colors';
 
 .ffe-h1 {
     line-height: 2.25rem;
@@ -33,7 +32,7 @@
 
 .ffe-small-text,
 .ffe-micro-text {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     font-family: var(--ffe-g-font);
     font-weight: normal;
     font-variant-numeric: tabular-nums;
@@ -59,15 +58,15 @@
 .ffe-h4,
 .ffe-h5,
 .ffe-h6 {
-    color: var(--ffe-g-heading-color);
+    color: var(--ffe-color-foreground-emphasis);
     font-weight: normal;
     margin-bottom: var(--ffe-spacing-xs);
     margin-top: 0;
     text-wrap: balance;
     overflow-wrap: anywhere;
 
     &--error {
-        color: var(--ffe-g-error-color);
+        color: var(--ffe-color-foreground-feedback-critical);
     }
 
     &--inline {
@@ -79,13 +78,8 @@
     }
 
     &--with-border {
-        border-bottom: 1px solid var(--ffe-farge-lysgraa);
+        border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis);
         padding-bottom: var(--ffe-spacing-xs);
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                border-color: var(--ffe-farge-graa);
-            }
-        }
     }
 
     &--no-underline {
@@ -111,7 +105,7 @@
 }
 
 .ffe-body-text {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     line-height: 1.5rem;
@@ -124,7 +118,7 @@
     margin-bottom: 1em;
     margin-top: 0;
     line-height: 1.5rem;
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     text-wrap: pretty;
 
     &--text-center {
@@ -150,20 +144,20 @@
 }
 
 .ffe-lead-paragraph {
-    color: var(--ffe-g-lead-color);
+    color: var(--ffe-color-foreground-emphasis);
     line-height: 1.5rem;
     font-size: var(--ffe-fontsize-lead-paragraph);
 }
 
 .ffe-sub-lead-paragraph {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     line-height: 1.5rem;
     font-size: var(--ffe-fontsize-sub-lead-paragraph);
 }
 
 .ffe-link-text {
-    border-bottom: 1px solid var(--ffe-g-link-color);
-    color: var(--ffe-g-link-color);
+    border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link);
+    color: var(--ffe-color-foreground-interactive-link);
     cursor: pointer;
     text-decoration: none;
     word-wrap: break-all;
@@ -172,15 +166,15 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            border-bottom-color: var(--ffe-g-link-color-hover);
-            color: var(--ffe-g-link-color-hover);
+            border-bottom-color: var(--ffe-color-foreground-interactive-link-hover);
+            color: var(--ffe-color-foreground-interactive-link-hover);
             text-decoration: none;
         }
     }
 
     &:visited {
-        border-bottom-color: var(--ffe-g-link-color-visited);
-        color: var(--ffe-g-link-color-visited);
+        border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
+        color: var(--ffe-color-foreground-interactive-link-pressed);
         text-decoration: none;
     }
 
@@ -189,24 +183,17 @@
     }
 
     &:focus {
-        border-color: var(--ffe-farge-hvit);
-        color: var(--ffe-farge-hvit);
+        border-color: var(--ffe-color-foreground-interactive-link-pressed);
+        color: var(--ffe-color-foreground-interactive-link-pressed);
         border-radius: 1px;
-        background-color: var(--ffe-g-link-color);
-        box-shadow: 0 0 0 2px var(--ffe-g-link-color);
+        background-color: var(--ffe-color-foreground-interactive-link);
+        box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
         outline: none;
-
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                border-color: var(--ffe-farge-svart) !important;
-                color: var(--ffe-farge-svart) !important;
-            }
-        }
     }
 }
 
 .ffe-link-icon {
-    fill: var(--ffe-g-link-color);
+    fill: var(--ffe-color-foreground-interactive-link);
     display: inline-flex;
     border-radius: 1.5rem;
     border: 2px solid transparent;
@@ -215,30 +202,26 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            fill: var(--ffe-g-link-icon-color-hover);
+            fill: var(--ffe-color-foreground-interactive-link-hover);
         }
     }
 
     &:focus {
-        box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
+        box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
     }
 }
 
 .ffe-divider-line {
     border: none;
-    border-bottom: solid 1px var(--ffe-farge-lysgraa);
+    border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
     padding-top: 1px;
     padding-bottom: 1px;
     width: 100%;
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            border-color: var(--ffe-farge-graa);
-        }
-    }
 }
 
 .ffe-strong-text {
     font-family: var(--ffe-g-font-strong);
+    color: var(--ffe-color-foreground-default);
     font-variant-numeric: tabular-nums;
     font-weight: normal;
 }
@@ -248,18 +231,15 @@
     font-variant-numeric: tabular-nums;
     font-weight: normal;
     font-style: normal;
+    color: var(--ffe-color-foreground-default);
 }
 
 .ffe-pre-text {
-    background-color: var(--ffe-farge-sand-70);
+    background-color: var(--ffe-color-background-subtle);
+    color: var(--ffe-color-foreground-default);
     font-family: consolas, menlo, monaco, monospace;
     margin: 0;
     text-align: left;
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            background-color: var(--ffe-farge-koksgraa);
-        }
-    }
 }
 
 .ffe-inline-separator {

packages/ffe-core/tokens.config.js

@@ -2,7 +2,6 @@ module.exports = {
     sources: [
         'less/breakpoints.less',
         'less/colors.less',
-        'less/colors-deprecated.less',
         'less/dimensions.less',
         'less/motion.less',
         'less/spacing.less',