Merged in feat/update-tokens (pull request #1611)

feat(SW-2027): update variables.json

* feat(SW-2027): update variables.json

* fix(SW-2027). replace old tokens

* fix(SW-2027): remove uppercase check


Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

packages/design-system/generate/generate.ts

@@ -62,14 +62,22 @@ json.collections.forEach((collection) => {
         switch (variable.type) {
           case 'boolean':
             if (typeof variable.value === 'boolean') {
-              // Handle text transform UPPERCASE
-              if (/upper(\s+)?case|text transform/i.test(variable.name)) {
+              // Handle text transform
+              if (/text transform/i.test(variable.name)) {
                 token = variable.name.replace(
-                  /upper(\s+)?case|text transform/i,
+                  /text transform/i,
                   'Text-Transform'
                 )
                 value = variable.value ? 'uppercase' : 'unset'
               }
+              // Handle text decoration
+              else if (/text decoration/i.test(variable.name)) {
+                token = variable.name.replace(
+                  /text decoration/i,
+                  'Text-Decoration'
+                )
+                value = variable.value ? 'underline' : 'unset'
+              }
             } else {
               throw new Error(
                 `Bad variable value input type. Expected 'boolean' got '${variable.type}'`

packages/design-system/lib/components/Button/button.module.css

@@ -21,55 +21,55 @@
 }
 
 .variant-primary {
-  background-color: var(--Component-Button-Brand-Primary-Default);
+  background-color: var(--Component-Button-Brand-Primary-Fill-Default);
   border-color: var(--Component-Button-Brand-Primary-Border-Default);
   color: var(--Component-Button-Brand-Primary-On-fill-Default);
 }
 
 .variant-primary:hover {
-  background-color: var(--Component-Button-Brand-Primary-Hover);
+  background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
   border-color: var(--Component-Button-Brand-Primary-Border-Hover);
   color: var(--Component-Button-Brand-Primary-On-fill-Hover);
 }
 
 .variant-primary:disabled {
-  background-color: var(--Component-Button-Brand-Primary-Disabled);
+  background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
   border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
   color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
 }
 
 .variant-secondary {
-  background-color: var(--Component-Button-Brand-Secondary-Default);
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
   border-color: var(--Component-Button-Brand-Secondary-Border-Default);
   color: var(--Component-Button-Brand-Secondary-On-fill-Default);
 }
 
 .variant-secondary:hover {
-  background-color: var(--Component-Button-Brand-Secondary-Hover);
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
   border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
   color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
 }
 
 .variant-secondary:disabled {
-  background-color: var(--Component-Button-Brand-Secondary-Disabled);
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
   border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
   color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }
 
 .variant-tertiary {
-  background-color: var(--Component-Button-Brand-Tertiary-Default);
+  background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
   border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
   color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
 }
 
 .variant-tertiary:hover {
-  background-color: var(--Component-Button-Brand-Tertiary-Hover);
+  background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
   border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
   color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
 }
 
 .variant-tertiary:disabled {
-  background-color: var(--Component-Button-Brand-Tertiary-Disabled);
+  background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
   border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
   color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
 }

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -1,5 +1,5 @@
 .chip {
-  background-color: var(--Component-Button-Inverted-Default);
+  background-color: var(--Component-Button-Inverted-Fill-Default);
   border-color: var(--Component-Button-Inverted-Border-Default);
   border-style: solid;
   border-width: 1px;

packages/design-system/lib/components/ChipLink/chip-link.module.css

@@ -1,5 +1,5 @@
 .chip {
-  background-color: var(--Component-Button-Inverted-Default);
+  background-color: var(--Component-Button-Inverted-Fill-Default);
   border-color: var(--Component-Button-Inverted-Border-Default);
   border-style: solid;
   border-width: 1px;

packages/design-system/lib/styles/base.css

@@ -17,9 +17,6 @@
   --Corner-radius-rounded: 250px;
   --Corner-radius-sm: 4px;
   --Corner-radius-xl: 16px;
-  --Font-family-Body: 'Fira sans';
-  --Font-family-Decorative: 'Biro Script Plus';
-  --Font-family-Title: 'Brandon Text';
   --Font-weight-Black: 900;
   --Font-weight-Bold: 700;
   --Font-weight-Extra-Bold: 800;
@@ -70,7 +67,7 @@
   --Neutral-Opacity-White-30: #ffffff4d;
   --Neutral-Opacity-White-40: #ffffff66;
   --Neutral-Opacity-White-50: #ffffff80;
-  --Neutral-Opacity-White-5: #ffffff00;
+  --Neutral-Opacity-White-5: #ffffff0d;
   --Neutral-Opacity-White-60: #ffffff99;
   --Neutral-Opacity-White-70: #ffffffb3;
   --Neutral-Opacity-White-80: #ffffffcc;

packages/design-system/lib/styles/base.js

@@ -23,7 +23,7 @@ export const theme = {
   'Neutral/Opacity/White/30': '#FFFFFF4D',
   'Neutral/Opacity/White/20': '#FFFFFF33',
   'Neutral/Opacity/White/10': '#FFFFFF1A',
-  'Neutral/Opacity/White/5': '#FFFFFF00',
+  'Neutral/Opacity/White/5': '#FFFFFF0D',
   'Neutral/Opacity/White/0': '#FFFFFF00',
   'Neutral/Opacity/Black/100': '#1F1C1B',
   'Neutral/Opacity/Black/90': '#1F1C1BE6',
@@ -52,9 +52,6 @@ export const theme = {
   'Text size/4xl': 36,
   'Text size/5xl': 56,
   'Text size/md': 24,
-  'Font family/Title': 'Brandon Text',
-  'Font family/Body': 'Fira sans',
-  'Font family/Decorative': 'Biro Script Plus',
   'Font weight/Regular': 400,
   'Font weight/Regular bold': 450,
   'Font weight/Medium': 500,

packages/design-system/lib/styles/downtown-camper.css

@@ -9,12 +9,15 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #915836;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #f4ebe7;
-  --Component-Button-Brand-Tertiary-Hover: #4d5448;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #9e694a;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #c59f8a;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #ddc5b7;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #4d5448;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #915836;
   --Component-Button-Muted-Border-Hover: #ffffff30;
   --Font-family-Downtown-Camper-Body: 'Fira sans';
@@ -24,8 +27,10 @@
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Signature-Downtown-Camper-Lunar-green-0: #f3f4f1;
   --Signature-Downtown-Camper-Lunar-green-100: #191d16;
   --Signature-Downtown-Camper-Lunar-green-10: #e4e7e0;
@@ -151,10 +156,12 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(
+  --Component-Button-Brand-Primary-Fill-Default: var(
     --Signature-Downtown-Camper-Russet-80
   );
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -174,13 +181,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
     --Signature-Downtown-Camper-Lunar-green-80
   );
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(
     --Signature-Downtown-Camper-Russet-80
   );
@@ -200,10 +213,12 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(
+  --Component-Button-Brand-Tertiary-Fill-Default: var(
     --Signature-Downtown-Camper-Lunar-green-80
   );
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -214,10 +229,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(
     --Signature-Downtown-Camper-Lunar-green-80
   );
   --Component-Button-Inverted-On-fill-Default: var(
@@ -229,11 +244,11 @@
   );
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5);
+  --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5);
   --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
   --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(
@@ -248,6 +263,7 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Accent: var(--Signature-Downtown-Camper-Russet-80);
   --Icon-Interactive-Default: var(--Neutral-90);
   --Icon-Interactive-Disabled: var(--Neutral-30);
   --Icon-Interactive-Placeholder: var(--Neutral-50);
@@ -265,6 +281,7 @@
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-20);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -294,8 +311,8 @@
   --Surface-Primary-Disabled: var(--Neutral-15);
   --Surface-Primary-Hover-Accent: var(--Neutral-15);
   --Surface-Primary-OnSurface-Default: var(--Neutral-5);
+  --Surface-Secondary-Default-dark: var(--Neutral-20);
   --Surface-Secondary-Default: var(--Neutral-10);
-  --Surface-Secondary-Secondary: var(--Neutral-10);
   --Surface-UI-Fill-Active: var(--Neutral-80);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -318,6 +335,11 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
   --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
   --Text-Default: var(--Neutral-90);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Neutral-90);
   --Text-Interactive-Default: var(--Neutral-90);
   --Text-Interactive-Disabled: var(--Neutral-40);

packages/design-system/lib/styles/downtown-camper.js

@@ -69,8 +69,10 @@ export const theme = {
   'Tag/Text-Transform': 'unset',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -81,8 +83,10 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
@@ -152,6 +156,11 @@ export const theme = {
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#747474',
   'Text/Brand/OnAccent/Heading': '#FFFFFF',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#747474',
   'Text/Brand/OnAccent/Default': '#FFFFFF',
   'Text/Brand/OnAccent/Accent': '#FFFFFF',
   'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
@@ -172,7 +181,7 @@ export const theme = {
   'Surface/Primary/OnSurface/Default': '#F5F5F5',
   'Surface/Primary/Disabled': '#E9E9E9',
   'Surface/Secondary/Default': '#F0F0F0',
-  'Surface/Secondary/Secondary': '#F0F0F0',
+  'Surface/Secondary/Default dark': '#D9D9D9',
   'Surface/Secondary/Hover': '#e4e4e4',
   'Surface/Brand/Accent/Default': '#D3952D',
   'Surface/Brand/Primary 1/Default': '#834722',
@@ -206,6 +215,7 @@ export const theme = {
   'Icon/Accent': '#717F63',
   'Icon/Interactive/Default': '#1F1F1F',
   'Icon/Interactive/Secondary': '#834722',
+  'Icon/Interactive/Accent': '#834722',
   'Icon/Interactive/Disabled': '#BFBFBF',
   'Icon/Interactive/Placeholder': '#747474',
   'Icon/Feedback/Information': '#284EA0',
@@ -216,54 +226,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B33',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#834722',
-  'Component/Button/Brand/Primary/Hover': '#915836',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#834722',
+  'Component/Button/Brand/Primary/Fill/Hover': '#9e694a',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#3C4336',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#3C4336',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#834722',
   'Component/Button/Brand/Secondary/On fill/Hover': '#9B5622',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#ddc5b7',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Secondary/Border/Default': '#834722',
   'Component/Button/Brand/Secondary/Border/Hover': '#9B5622',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#f4ebe7',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#c59f8a',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#3C4336',
-  'Component/Button/Brand/Tertiary/Hover': '#4d5448',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#3C4336',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#4d5448',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#3C4336',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#3C4336',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Component/Button/Inverted/On fill/Default': '#834722',
   'Component/Button/Inverted/On fill/Hover': '#915836',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Border/Interactive/Default': '#BFBFBF',
   'Border/Divider/Default': '#D9D9D9',
   'Border/Divider/Subtle': '#E9E9E9',
@@ -277,11 +289,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#BFBFBF',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF00',
-  'Component/Button/Muted/Hover': '#FFFFFF00',
-  'Component/Button/Muted/Disabled': '#FFFFFF1A',
-  'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
-  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF00',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',
+  'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D',
+  'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
   'Component/Button/Muted/On fill/Default': '#1F1F1F',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#9B5622',

packages/design-system/lib/styles/grand-hotel.css

@@ -9,16 +9,19 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #34373d;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e7;
-  --Component-Button-Brand-Tertiary-Hover: #b8cad0;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #34373d;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #878a8d;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b6b7b9;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #b8cad0;
   --Component-Button-Brand-Tertiary-On-fill-Hover: #34373d;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #34373d;
   --Component-Button-Muted-Border-Hover: #ffffff30;
-  --Component-Button-Muted-Hover-inverted: #f2f2f2;
+  --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2;
   --Font-family-Grand-Hotel-Body: 'Fira sans';
   --Font-family-Grand-Hotel-Decorative: 'Canela Deck';
   --Font-family-Grand-Hotel-Title: 'Canela Deck';
@@ -26,8 +29,10 @@
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Signature-Grand-Hotel-Blue-Bayoux-100: #21252b;
   --Signature-Grand-Hotel-Blue-Bayoux-50: #5b6e7f;
   --Signature-Grand-Hotel-Blue-Bayoux-80: #3d444d;
@@ -132,10 +137,12 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(
+  --Component-Button-Brand-Primary-Fill-Default: var(
     --Signature-Grand-Hotel-Blue-Bayoux-100
   );
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -155,13 +162,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
     --Signature-Grand-Hotel-Submarine-30
   );
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(
     --Signature-Grand-Hotel-Blue-Bayoux-100
   );
@@ -181,10 +194,12 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(
+  --Component-Button-Brand-Tertiary-Fill-Default: var(
     --Signature-Grand-Hotel-Submarine-30
   );
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Signature-Grand-Hotel-Blue-Bayoux-100
   );
@@ -192,10 +207,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(
     --Signature-Grand-Hotel-Submarine-30
   );
   --Component-Button-Inverted-On-fill-Default: var(
@@ -207,10 +222,10 @@
   );
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100);
   --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
   --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(
@@ -225,6 +240,7 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Accent: var(--Signature-Grand-Hotel-Careys-Pink-60);
   --Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
   --Icon-Interactive-Disabled: var(--Neutral-30);
   --Icon-Interactive-Placeholder: var(--Neutral-50);
@@ -242,6 +258,7 @@
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-20);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -275,8 +292,8 @@
   --Surface-Primary-Disabled: var(--Neutral-15);
   --Surface-Primary-Hover-Accent: var(--Neutral-15);
   --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
+  --Surface-Secondary-Default-dark: var(--Signature-Grand-Hotel-Cloudy-10);
   --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
-  --Surface-Secondary-Secondary: var(--Signature-Grand-Hotel-Cloudy-0);
   --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Active: var(--Neutral-80);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
@@ -300,6 +317,11 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
   --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
   --Text-Default: var(--Neutral-90);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Neutral-90);
   --Text-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100);
   --Text-Interactive-Disabled: var(--Neutral-40);

packages/design-system/lib/styles/grand-hotel.js

@@ -49,8 +49,10 @@ export const theme = {
   'Tag/Text-Transform': 'uppercase',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -61,8 +63,10 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
@@ -132,6 +136,11 @@ export const theme = {
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#747474',
   'Text/Brand/OnAccent/Heading': '#1F1F1F',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#747474',
   'Text/Brand/OnAccent/Default': '#1F1F1F',
   'Text/Brand/OnAccent/Accent': '#1F1F1F',
   'Text/Brand/OnPrimary 1/Heading': '#1F1F1F',
@@ -152,7 +161,7 @@ export const theme = {
   'Surface/Primary/OnSurface/Default': '#F7F6F5',
   'Surface/Primary/Disabled': '#E9E9E9',
   'Surface/Secondary/Default': '#F7F6F5',
-  'Surface/Secondary/Secondary': '#F7F6F5',
+  'Surface/Secondary/Default dark': '#EBEAE9',
   'Surface/Secondary/Hover': '#ebeae9',
   'Surface/Brand/Accent/Default': '#B2ADA7',
   'Surface/Brand/Primary 1/Default': '#DBA7B1',
@@ -186,6 +195,7 @@ export const theme = {
   'Icon/Accent': '#DBA7B1',
   'Icon/Interactive/Default': '#21252B',
   'Icon/Interactive/Secondary': '#AA546B',
+  'Icon/Interactive/Accent': '#AA546B',
   'Icon/Interactive/Disabled': '#BFBFBF',
   'Icon/Interactive/Placeholder': '#747474',
   'Icon/Feedback/Information': '#284EA0',
@@ -196,54 +206,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B33',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#21252B',
-  'Component/Button/Brand/Primary/Hover': '#34373d',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#21252B',
+  'Component/Button/Brand/Primary/Fill/Hover': '#34373d',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#B0C4CB',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#B0C4CB',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#21252B',
   'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b6b7b9',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Secondary/Border/Default': '#21252B',
   'Component/Button/Brand/Secondary/Border/Hover': '#3D444D',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e7',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#878a8d',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#B0C4CB',
-  'Component/Button/Brand/Tertiary/Hover': '#b8cad0',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#21252B',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#B0C4CB',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#B0C4CB',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF1A',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
   'Component/Button/Inverted/On fill/Default': '#21252B',
   'Component/Button/Inverted/On fill/Hover': '#34373d',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF1A',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF1A',
   'Border/Interactive/Default': '#BFBFBF',
   'Border/Divider/Default': '#D9D9D9',
   'Border/Divider/Subtle': '#E9E9E9',
@@ -257,11 +269,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#BFBFBF',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF',
-  'Component/Button/Muted/Hover': '#FFFFFF',
-  'Component/Button/Muted/Disabled': '#FFFFFF',
-  'Component/Button/Muted/Hover inverted': '#f2f2f2',
-  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF',
+  'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2',
+  'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
   'Component/Button/Muted/On fill/Default': '#1F1F1F',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#3D444D',

packages/design-system/lib/styles/haymarket.css

@@ -9,12 +9,15 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #323232;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e6;
-  --Component-Button-Brand-Tertiary-Hover: #87664e;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #323232;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #868686;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b5b5b5;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #87664e;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #323232;
   --Component-Button-Muted-Border-Hover: #ffffff30;
   --Font-family-Haymarket-Body: 'Fira sans';
@@ -24,8 +27,10 @@
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Signature-Haymarket-Antique-Brass-0: #f9f5f1;
   --Signature-Haymarket-Antique-Brass-100: #37271c;
   --Signature-Haymarket-Antique-Brass-10: #ede3d8;
@@ -151,8 +156,10 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(--Neutral-90);
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Default: var(--Neutral-90);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -168,13 +175,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
     --Signature-Haymarket-Antique-Brass-50
   );
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(--Neutral-90);
   --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Brand-Secondary-On-fill-Hover: var(--Neutral-70);
@@ -190,10 +203,12 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(
+  --Component-Button-Brand-Tertiary-Fill-Default: var(
     --Signature-Haymarket-Antique-Brass-50
   );
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -204,10 +219,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(
     --Signature-Haymarket-Antique-Brass-50
   );
   --Component-Button-Inverted-On-fill-Default: var(--Neutral-90);
@@ -217,11 +232,11 @@
   );
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5);
+  --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5);
   --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
   --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(--Neutral-70);
@@ -234,6 +249,7 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Accent: var(--Signature-Haymarket-Antique-Brass-60);
   --Icon-Interactive-Default: var(--Neutral-90);
   --Icon-Interactive-Disabled: var(--Neutral-30);
   --Icon-Interactive-Placeholder: var(--Neutral-50);
@@ -251,6 +267,7 @@
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-20);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -280,8 +297,8 @@
   --Surface-Primary-Disabled: var(--Neutral-15);
   --Surface-Primary-Hover-Accent: var(--Neutral-15);
   --Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0);
+  --Surface-Secondary-Default-dark: var(--Signature-Haymarket-Vista-White-10);
   --Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0);
-  --Surface-Secondary-Secondary: var(--Signature-Haymarket-Vista-White-0);
   --Surface-UI-Fill-Active: var(--Neutral-80);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -304,6 +321,11 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-90);
   --Text-Brand-OnPrimary-3-Heading: var(--Neutral-90);
   --Text-Default: var(--Neutral-90);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Neutral-90);
   --Text-Interactive-Default: var(--Neutral-90);
   --Text-Interactive-Disabled: var(--Neutral-40);

packages/design-system/lib/styles/haymarket.js

@@ -69,8 +69,10 @@ export const theme = {
   'Tag/Text-Transform': 'uppercase',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -81,8 +83,10 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
@@ -152,6 +156,11 @@ export const theme = {
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#747474',
   'Text/Brand/OnAccent/Heading': '#FFFFFF',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#747474',
   'Text/Brand/OnAccent/Default': '#FFFFFF',
   'Text/Brand/OnAccent/Accent': '#FFFFFF',
   'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
@@ -172,7 +181,7 @@ export const theme = {
   'Surface/Primary/OnSurface/Default': '#FBF7F6',
   'Surface/Primary/Disabled': '#E9E9E9',
   'Surface/Secondary/Default': '#FBF7F6',
-  'Surface/Secondary/Secondary': '#FBF7F6',
+  'Surface/Secondary/Default dark': '#F6ECEA',
   'Surface/Secondary/Hover': '#efebea',
   'Surface/Brand/Accent/Default': '#946F54',
   'Surface/Brand/Primary 1/Default': '#4A6C78',
@@ -206,6 +215,7 @@ export const theme = {
   'Icon/Accent': '#C08273',
   'Icon/Interactive/Default': '#1F1F1F',
   'Icon/Interactive/Secondary': '#805E45',
+  'Icon/Interactive/Accent': '#805E45',
   'Icon/Interactive/Disabled': '#BFBFBF',
   'Icon/Interactive/Placeholder': '#747474',
   'Icon/Feedback/Information': '#284EA0',
@@ -216,54 +226,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B33',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#1F1F1F',
-  'Component/Button/Brand/Primary/Hover': '#323232',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#1F1F1F',
+  'Component/Button/Brand/Primary/Fill/Hover': '#323232',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#946F54',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#946F54',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#1F1F1F',
   'Component/Button/Brand/Secondary/On fill/Hover': '#454545',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b5b5b5',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Secondary/Border/Default': '#1F1F1F',
   'Component/Button/Brand/Secondary/Border/Hover': '#454545',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e6',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#868686',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#946F54',
-  'Component/Button/Brand/Tertiary/Hover': '#87664e',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#946F54',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#87664e',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#946F54',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#946F54',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Component/Button/Inverted/On fill/Default': '#1F1F1F',
   'Component/Button/Inverted/On fill/Hover': '#323232',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Border/Interactive/Default': '#BFBFBF',
   'Border/Divider/Default': '#D9D9D9',
   'Border/Divider/Subtle': '#E9E9E9',
@@ -277,11 +289,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#BFBFBF',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF00',
-  'Component/Button/Muted/Hover': '#FFFFFF00',
-  'Component/Button/Muted/Disabled': '#FFFFFF1A',
-  'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
-  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF00',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',
+  'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D',
+  'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
   'Component/Button/Muted/On fill/Default': '#1F1F1F',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#454545',

packages/design-system/lib/styles/hotel-norge.css

@@ -9,12 +9,15 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #2c3146;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e6e9;
-  --Component-Button-Brand-Tertiary-Hover: #215448;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #2c3146;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #838593;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b3b4bd;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #215448;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #2c3146;
   --Component-Button-Muted-Border-Hover: #ffffff30;
   --Font-family-Hotel-Norge-Body: 'Fira sans';
@@ -24,8 +27,10 @@
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Signature-Hotel-Norge-Dark-blue-0: #b7c5c8;
   --Signature-Hotel-Norge-Dark-blue-100: #2f3445;
   --Signature-Hotel-Norge-Dark-blue-30: #858f97;
@@ -138,10 +143,12 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(
+  --Component-Button-Brand-Primary-Fill-Default: var(
     --Signature-Hotel-Norge-Dark-blue-90
   );
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -161,13 +168,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
     --Signature-Hotel-Norge-Emerald-100
   );
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(
     --Signature-Hotel-Norge-Dark-blue-90
   );
@@ -187,10 +200,12 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(
+  --Component-Button-Brand-Tertiary-Fill-Default: var(
     --Signature-Hotel-Norge-Emerald-100
   );
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -201,10 +216,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(
     --Signature-Hotel-Norge-Emerald-100
   );
   --Component-Button-Inverted-On-fill-Default: var(
@@ -216,11 +231,11 @@
   );
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
-  --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5);
+  --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100);
   --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
   --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(
@@ -235,6 +250,7 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Accent: var(--Signature-Hotel-Norge-Emerald-90);
   --Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
   --Icon-Interactive-Disabled: var(--Neutral-30);
   --Icon-Interactive-Placeholder: var(--Neutral-50);
@@ -252,6 +268,7 @@
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-20);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -281,8 +298,8 @@
   --Surface-Primary-OnSurface-Default: var(
     --Signature-Hotel-Norge-Off-White-30
   );
+  --Surface-Secondary-Default-dark: var(--Signature-Hotel-Norge-Off-White-60);
   --Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50);
-  --Surface-Secondary-Secondary: var(--Signature-Hotel-Norge-Off-White-50);
   --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Active: var(--Neutral-80);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
@@ -306,6 +323,11 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
   --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
   --Text-Default: var(--Neutral-90);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Neutral-90);
   --Text-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90);
   --Text-Interactive-Disabled: var(--Neutral-40);

packages/design-system/lib/styles/hotel-norge.js

@@ -9,13 +9,13 @@ export const theme = {
   'Signature/Hotel Norge/Off White/60': '#D9DAD6',
   'Signature/Hotel Norge/Off White/70': '#AAAAA7',
   'Signature/Hotel Norge/Emerald/0': '#C7DDD5',
-  'Signature/Hotel Norge/Emerald/80': '#3A655C',
   'Signature/Hotel Norge/Off White/80': '#838481',
+  'Signature/Hotel Norge/Emerald/80': '#3A655C',
   'Signature/Hotel Norge/Off White/90': '#6F716F',
   'Signature/Hotel Norge/Emerald/90': '#26544A',
   'Signature/Hotel Norge/Off White/100': '#646563',
-  'Signature/Hotel Norge/Emerald/100': '#004337',
   'Signature/Hotel Norge/Dark blue/0': '#B7C5C8',
+  'Signature/Hotel Norge/Emerald/100': '#004337',
   'Signature/Hotel Norge/Dark blue/30': '#858F97',
   'Signature/Hotel Norge/Dark blue/80': '#404655',
   'Signature/Hotel Norge/Dark blue/90': '#181E34',
@@ -54,8 +54,10 @@ export const theme = {
   'Tag/Text-Transform': 'uppercase',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -66,8 +68,10 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
@@ -137,6 +141,11 @@ export const theme = {
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#747474',
   'Text/Brand/OnAccent/Heading': '#1F1F1F',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#747474',
   'Text/Brand/OnAccent/Default': '#1F1F1F',
   'Text/Brand/OnAccent/Accent': '#004337',
   'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
@@ -157,7 +166,7 @@ export const theme = {
   'Surface/Primary/OnSurface/Default': '#F4F5F2',
   'Surface/Primary/Disabled': '#E9E9E9',
   'Surface/Secondary/Default': '#EFF0EB',
-  'Surface/Secondary/Secondary': '#EFF0EB',
+  'Surface/Secondary/Default dark': '#D9DAD6',
   'Surface/Secondary/Hover': '#e3e4df',
   'Surface/Brand/Accent/Default': '#C7DDD5',
   'Surface/Brand/Primary 1/Default': '#181E34',
@@ -191,6 +200,7 @@ export const theme = {
   'Icon/Accent': '#EC615B',
   'Icon/Interactive/Default': '#181E34',
   'Icon/Interactive/Secondary': '#26544A',
+  'Icon/Interactive/Accent': '#26544A',
   'Icon/Interactive/Disabled': '#BFBFBF',
   'Icon/Interactive/Placeholder': '#747474',
   'Icon/Feedback/Information': '#284EA0',
@@ -201,54 +211,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B33',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#181E34',
-  'Component/Button/Brand/Primary/Hover': '#2c3146',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#181E34',
+  'Component/Button/Brand/Primary/Fill/Hover': '#2c3146',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#004337',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#004337',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#181E34',
   'Component/Button/Brand/Secondary/On fill/Hover': '#404655',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b3b4bd',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Secondary/Border/Default': '#181E34',
   'Component/Button/Brand/Secondary/Border/Hover': '#404655',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e6e9',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#838593',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#004337',
-  'Component/Button/Brand/Tertiary/Hover': '#215448',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#004337',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#215448',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#004337',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#004337',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Component/Button/Inverted/On fill/Default': '#181E34',
   'Component/Button/Inverted/On fill/Hover': '#2c3146',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Border/Interactive/Default': '#BFBFBF',
   'Border/Divider/Default': '#D9D9D9',
   'Border/Divider/Subtle': '#E9E9E9',
@@ -262,11 +274,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#BFBFBF',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF00',
-  'Component/Button/Muted/Hover': '#FFFFFF',
-  'Component/Button/Muted/Disabled': '#FFFFFF',
-  'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
-  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF00',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF',
+  'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D',
+  'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
   'Component/Button/Muted/On fill/Default': '#1F1F1F',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#404655',

packages/design-system/lib/styles/marski.css

@@ -9,12 +9,15 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #283b48;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e7e9;
-  --Component-Button-Brand-Tertiary-Hover: #1a54e7;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #283b48;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #818c95;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b2b9be;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #1a54e7;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #283b48;
   --Component-Button-Muted-Border-Hover: #ffffff30;
   --Font-family-Marski-Body: 'Fira sans';
@@ -24,8 +27,10 @@
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Signature-Marski-Aubergine-00: #f9f6f4;
   --Signature-Marski-Aubergine-100: #3e1118;
   --Signature-Marski-Aubergine-10: #ebe8e6;
@@ -161,10 +166,12 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(
+  --Component-Button-Brand-Primary-Fill-Default: var(
     --Signature-Marski-Elephant-100
   );
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -184,13 +191,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
     --Signature-Marski-Elephant-100
   );
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(
     --Signature-Marski-Elephant-100
   );
@@ -210,10 +223,12 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(
+  --Component-Button-Brand-Tertiary-Fill-Default: var(
     --Signature-Marski-Blue-ribbon-70
   );
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -224,10 +239,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(
     --Signature-Marski-Elephant-100
   );
   --Component-Button-Inverted-On-fill-Default: var(
@@ -239,11 +254,11 @@
   );
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100);
-  --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5);
+  --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100);
   --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
   --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(
@@ -258,6 +273,7 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Accent: var(--Signature-Marski-Blue-ribbon-70);
   --Icon-Interactive-Default: var(--Signature-Marski-Elephant-90);
   --Icon-Interactive-Disabled: var(--Neutral-30);
   --Icon-Interactive-Placeholder: var(--Neutral-50);
@@ -275,6 +291,7 @@
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-20);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -302,8 +319,8 @@
   --Surface-Primary-Disabled: var(--Neutral-15);
   --Surface-Primary-Hover-Accent: var(--Neutral-15);
   --Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0);
+  --Surface-Secondary-Default-dark: var(--Signature-Marski-Elephant-20);
   --Surface-Secondary-Default: var(--Signature-Marski-Elephant-10);
-  --Surface-Secondary-Secondary: var(--Signature-Marski-Elephant-10);
   --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Active: var(--Neutral-80);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
@@ -327,6 +344,11 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
   --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
   --Text-Default: var(--Neutral-90);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Neutral-90);
   --Text-Interactive-Default: var(--Signature-Marski-Elephant-100);
   --Text-Interactive-Disabled: var(--Neutral-40);

packages/design-system/lib/styles/marski.js

@@ -80,8 +80,10 @@ export const theme = {
   'Tag/Text-Transform': 'unset',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -92,8 +94,10 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF',
   'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF',
@@ -163,6 +167,11 @@ export const theme = {
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#747474',
   'Text/Brand/OnAccent/Heading': '#FFFFFF',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#747474',
   'Text/Brand/OnAccent/Default': '#FFFFFF',
   'Text/Brand/OnAccent/Accent': '#FFFFFF',
   'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
@@ -183,7 +192,7 @@ export const theme = {
   'Surface/Primary/OnSurface/Default': '#F6F6F7',
   'Surface/Primary/Disabled': '#E9E9E9',
   'Surface/Secondary/Default': '#ECEEEF',
-  'Surface/Secondary/Secondary': '#ECEEEF',
+  'Surface/Secondary/Default dark': '#E0E3E5',
   'Surface/Secondary/Hover': '#e0e2e3',
   'Surface/Brand/Accent/Default': '#575757',
   'Surface/Brand/Primary 1/Default': '#122937',
@@ -217,6 +226,7 @@ export const theme = {
   'Icon/Accent': '#1043BD',
   'Icon/Interactive/Default': '#1E3441',
   'Icon/Interactive/Secondary': '#0D57F3',
+  'Icon/Interactive/Accent': '#0D57F3',
   'Icon/Interactive/Disabled': '#BFBFBF',
   'Icon/Interactive/Placeholder': '#747474',
   'Icon/Feedback/Information': '#284EA0',
@@ -227,54 +237,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B33',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#122937',
-  'Component/Button/Brand/Primary/Hover': '#283b48',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#122937',
+  'Component/Button/Brand/Primary/Fill/Hover': '#283b48',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#122937',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#122937',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#122937',
   'Component/Button/Brand/Secondary/On fill/Hover': '#2C414D',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b2b9be',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Secondary/Border/Default': '#122937',
   'Component/Button/Brand/Secondary/Border/Hover': '#2C414D',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e7e9',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#818c95',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#0D57F3',
-  'Component/Button/Brand/Tertiary/Hover': '#1a54e7',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#0D57F3',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#1a54e7',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#122937',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#122937',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Component/Button/Inverted/On fill/Default': '#122937',
   'Component/Button/Inverted/On fill/Hover': '#283b48',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Border/Interactive/Default': '#BFBFBF',
   'Border/Divider/Default': '#D9D9D9',
   'Border/Divider/Subtle': '#E9E9E9',
@@ -288,11 +300,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#BFBFBF',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF00',
-  'Component/Button/Muted/Hover': '#FFFFFF',
-  'Component/Button/Muted/Disabled': '#FFFFFF',
-  'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
-  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF00',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF',
+  'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D',
+  'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
   'Component/Button/Muted/On fill/Default': '#1F1F1F',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#2C414D',

packages/design-system/lib/styles/scandic-go.css

@@ -9,14 +9,18 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #c7c2e5;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #e8e5e9;
-  --Component-Button-Brand-Tertiary-Hover: #402a4b;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #c7c2e5;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #908197;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #bbb2bf;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #402a4b;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #402a4b;
-  --Component-Button-Muted-Hover-inverted: #f2f2f2;
+  --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2;
+  --Component-Button-Muted-Fill-Hover: #ffffff;
   --Font-family-Scandic-Go-Body: 'Fira sans';
   --Font-family-Scandic-Go-Decorative: 'ITC Garamond Std';
   --Font-family-Scandic-Go-Title: 'Neue Haas Grotesk Display Pro';
@@ -24,8 +28,10 @@
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Scandic-Go-Beige-00: #fffefa;
   --Scandic-Go-Beige-0: #faf8f2;
   --Scandic-Go-Beige-100: #1f1e1d;
@@ -157,15 +163,15 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(--Scandic-Go-Purple-10);
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Default: var(--Scandic-Go-Purple-10);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Scandic-Go-Purple-100
   );
   --Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40);
-  --Component-Button-Brand-Primary-On-fill-Hover: var(
-    --Neutral-Opacity-White-100
-  );
+  --Component-Button-Brand-Primary-On-fill-Hover: var(--Scandic-Go-Purple-100);
   --Component-Button-Brand-Secondary-Border-Default: var(
     --Scandic-Go-Purple-100
   );
@@ -176,13 +182,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
     --Scandic-Go-Purple-100
   );
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(
     --Scandic-Go-Purple-100
   );
@@ -200,8 +212,10 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(--Scandic-Go-Purple-100);
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Default: var(--Scandic-Go-Purple-100);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -212,10 +226,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(--Scandic-Go-Purple-10);
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(--Scandic-Go-Purple-10);
   --Component-Button-Inverted-On-fill-Default: var(--Scandic-Go-Purple-100);
   --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Inverted-On-fill-Hover-inverted: var(
@@ -224,10 +238,9 @@
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-20);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20);
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10);
   --Component-Button-Muted-On-fill-Default: var(--Neutral-90);
   --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Go-Purple-80);
@@ -240,6 +253,7 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Neutral-90);
+  --Icon-Interactive-Accent: var(--Scandic-Go-Purple-80);
   --Icon-Interactive-Default: var(--Scandic-Go-Purple-100);
   --Icon-Interactive-Disabled: var(--Neutral-30);
   --Icon-Interactive-Placeholder: var(--Neutral-50);
@@ -257,6 +271,7 @@
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-20);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -293,8 +308,8 @@
   --Surface-Primary-Disabled: var(--Neutral-15);
   --Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10);
   --Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0);
+  --Surface-Secondary-Default-dark: var(--Scandic-Go-Beige-20);
   --Surface-Secondary-Default: var(--Scandic-Go-Beige-10);
-  --Surface-Secondary-Secondary: var(--Scandic-Go-Beige-10);
   --Surface-UI-Fill-Active: var(--Neutral-80);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -317,6 +332,11 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
   --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100);
   --Text-Default: var(--Neutral-90);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Neutral-50);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Scandic-Go-Purple-100);
   --Text-Interactive-Default: var(--Scandic-Go-Purple-100);
   --Text-Interactive-Disabled: var(--Neutral-40);
@@ -348,7 +368,7 @@
   --Title-lg-Size: var(--Impl-Text-size-4xl);
   --Title-md-Font-family: var(--Font-family-Scandic-Go-Title);
   --Title-md-Font-weight: var(--Font-weight-Medium);
-  --Title-md-LowCase-Font-family: var(--Font-family-Title);
+  --Title-md-LowCase-Font-family: var(--Font-family-Scandic-Title);
   --Title-md-LowCase-Font-weight: var(--Font-weight-Medium);
   --Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
   --Title-md-Size: var(--Impl-Text-size-2xl);

packages/design-system/lib/styles/scandic-go.js

@@ -84,8 +84,10 @@ export const theme = {
   'Tag/Text-Transform': 'unset',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -96,8 +98,10 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Utilities/Gradients/10': '#2D163A1A',
   'Font family/Scandic Go/Title': 'Neue Haas Grotesk Display Pro',
   'Font family/Scandic Go/Body': 'Fira sans',
@@ -160,6 +164,11 @@ export const theme = {
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#747474',
   'Text/Brand/OnAccent/Heading': '#2D163A',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#747474',
   'Text/Brand/OnAccent/Default': '#2D163A',
   'Text/Brand/OnAccent/Accent': '#2D163A',
   'Text/Brand/OnPrimary 1/Heading': '#2D163A',
@@ -180,7 +189,7 @@ export const theme = {
   'Surface/Primary/OnSurface/Default': '#FAF8F2',
   'Surface/Primary/Disabled': '#E9E9E9',
   'Surface/Secondary/Default': '#F0EDE4',
-  'Surface/Secondary/Secondary': '#F0EDE4',
+  'Surface/Secondary/Default dark': '#E0DCCE',
   'Surface/Secondary/Hover': '#e4e1d9',
   'Surface/Brand/Accent/Default': '#F5FF73',
   'Surface/Brand/Primary 1/Default': '#DCD7FF',
@@ -221,6 +230,7 @@ export const theme = {
   'Icon/Accent': '#FA3737',
   'Icon/Interactive/Default': '#2D163A',
   'Icon/Interactive/Secondary': '#5E2A8C',
+  'Icon/Interactive/Accent': '#5E2A8C',
   'Icon/Interactive/Disabled': '#BFBFBF',
   'Icon/Interactive/Placeholder': '#747474',
   'Icon/Feedback/Information': '#284EA0',
@@ -231,54 +241,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B33',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#DCD7FF',
-  'Component/Button/Brand/Primary/Hover': '#c7c2e5',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#DCD7FF',
+  'Component/Button/Brand/Primary/Fill/Hover': '#c7c2e5',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#2D163A',
-  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
+  'Component/Button/Brand/Primary/On fill/Hover': '#2D163A',
   'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#2D163A',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#2D163A',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#2D163A',
   'Component/Button/Brand/Secondary/On fill/Hover': '#5E2A8C',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#bbb2bf',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Secondary/Border/Default': '#2D163A',
   'Component/Button/Brand/Secondary/Border/Hover': '#5E2A8C',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#e8e5e9',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#908197',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#2D163A',
-  'Component/Button/Brand/Tertiary/Hover': '#402a4b',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#2D163A',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#402a4b',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#DCD7FF',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#DCD7FF',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Component/Button/Inverted/On fill/Default': '#2D163A',
   'Component/Button/Inverted/On fill/Hover': '#402a4b',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Border/Interactive/Default': '#BFBFBF',
   'Border/Divider/Default': '#D9D9D9',
   'Border/Divider/Subtle': '#E9E9E9',
@@ -292,11 +304,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#8C8C8C',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF',
-  'Component/Button/Muted/Hover': '#FFFFFF00',
-  'Component/Button/Muted/Disabled': '#FFFFFF1A',
-  'Component/Button/Muted/Hover inverted': '#f2f2f2',
-  'Component/Button/Muted/Disabled inverted': '#D9D9D9',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF',
+  'Component/Button/Muted/Fill/Hover': '#ffffff',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',
+  'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2',
+  'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9',
   'Component/Button/Muted/On fill/Default': '#1F1F1F',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#5E2A8C',

packages/design-system/lib/styles/scandic.css

@@ -9,19 +9,27 @@
   --Body-Supporting-text-Letter-spacing: 0.2px;
   --Body-Underline-md-Font-fallback: sans-serif;
   --Body-Underline-md-Letter-spacing: 0.19px;
+  --Body-Underline-md-Text-Decoration: underline;
   --Body-Underline-sm-Font-fallback: sans-serif;
   --Body-Underline-sm-Letter-spacing: 0.2px;
-  --Component-Button-Brand-Primary-Hover: #ba1721;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #eee4e5;
-  --Component-Button-Brand-Tertiary-Hover: #601e2d;
-  --Component-Button-Inverted-Hover: #f2f2f2;
+  --Body-Underline-sm-Text-Decoration: underline;
+  --Component-Button-Brand-Primary-Fill-Hover: #a81e20;
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: #a87e83;
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #cbb0b3;
+  --Component-Button-Brand-Tertiary-Fill-Hover: #601e2d;
+  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
   --Component-Button-Inverted-On-fill-Hover: #601e2d;
+  --Font-family-Scandic-Body: 'Fira sans';
+  --Font-family-Scandic-Decorative: 'Biro Script Plus';
+  --Font-family-Scandic-Title: 'Brandon Text';
   --Label-Font-fallback: sans-serif;
   --Label-Letter-spacing: 0.17px;
   --Link-md-Font-fallback: sans-serif;
   --Link-md-Letter-spacing: 0.19px;
+  --Link-md-Text-Decoration: underline;
   --Link-sm-Font-fallback: sans-serif;
   --Link-sm-Letter-spacing: 0.2px;
+  --Link-sm-Text-Decoration: underline;
   --Scandic-Beige-00: #faf6f2;
   --Scandic-Beige-100: #291710;
   --Scandic-Beige-10: #f2ece6;
@@ -142,21 +150,21 @@
   /* Aliases */
   --Background-Primary: var(--Scandic-Beige-00);
   --Background-Secondary: var(--Neutral-Opacity-White-100);
-  --Body-Lead-text-Font-family: var(--Font-family-Body);
+  --Body-Lead-text-Font-family: var(--Font-family-Scandic-Body);
   --Body-Lead-text-Font-weight: var(--Font-weight-Regular);
   --Body-Lead-text-Size: var(--Impl-Text-size-xs);
-  --Body-Paragraph-Font-family: var(--Font-family-Body);
+  --Body-Paragraph-Font-family: var(--Font-family-Scandic-Body);
   --Body-Paragraph-Font-weight-2: var(--Font-weight-Medium);
   --Body-Paragraph-Font-weight: var(--Font-weight-Regular);
   --Body-Paragraph-Size: var(--Impl-Text-size-3xs);
-  --Body-Supporting-text-Font-family: var(--Font-family-Body);
+  --Body-Supporting-text-Font-family: var(--Font-family-Scandic-Body);
   --Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium);
   --Body-Supporting-text-Font-weight: var(--Font-weight-Regular);
   --Body-Supporting-text-Size: var(--Impl-Text-size-4xs);
-  --Body-Underline-md-Font-family: var(--Font-family-Body);
+  --Body-Underline-md-Font-family: var(--Font-family-Scandic-Body);
   --Body-Underline-md-Font-weight: var(--Font-weight-Regular);
   --Body-Underline-md-Size: var(--Impl-Text-size-3xs);
-  --Body-Underline-sm-Font-family: var(--Font-family-Body);
+  --Body-Underline-sm-Font-family: var(--Font-family-Scandic-Body);
   --Body-Underline-sm-Font-weight: var(--Font-weight-Regular);
   --Body-Underline-sm-Size: var(--Impl-Text-size-4xs);
   --Border-Default: var(--Scandic-Beige-20);
@@ -182,8 +190,10 @@
     --Neutral-Opacity-White-0
   );
   --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Primary-Default: var(--Scandic-Red-Default);
-  --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Primary-Fill-Default: var(--Scandic-Red-Default);
+  --Component-Button-Brand-Primary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Primary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -199,11 +209,19 @@
   --Component-Button-Brand-Secondary-Border-Inverted: var(
     --Neutral-Opacity-White-100
   );
-  --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Brand-Secondary-Hover-Inverted: var(--Scandic-Red-100);
-  --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100);
+  --Component-Button-Brand-Secondary-Fill-Default: var(
+    --Neutral-Opacity-White-0
+  );
+  --Component-Button-Brand-Secondary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var(
+    --Scandic-Red-100
+  );
+  --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0);
+  --Component-Button-Brand-Secondary-Fill-Inverted: var(
+    --Neutral-Opacity-White-100
+  );
   --Component-Button-Brand-Secondary-On-fill-Default: var(--Scandic-Red-100);
   --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Scandic-Grey-40);
   --Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80);
@@ -219,8 +237,10 @@
   --Component-Button-Brand-Tertiary-Border-Hover: var(
     --Neutral-Opacity-White-0
   );
-  --Component-Button-Brand-Tertiary-Default: var(--Scandic-Red-100);
-  --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Brand-Tertiary-Fill-Default: var(--Scandic-Red-100);
+  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
+    --Neutral-Opacity-Black-10
+  );
   --Component-Button-Brand-Tertiary-On-fill-Default: var(
     --Neutral-Opacity-White-100
   );
@@ -231,10 +251,10 @@
   --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100);
-  --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90);
-  --Component-Button-Inverted-Hover-Inverted: var(--Scandic-Red-100);
+  --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100);
+  --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10);
+  --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90);
+  --Component-Button-Inverted-Fill-Hover-Inverted: var(--Scandic-Red-100);
   --Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100);
   --Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40);
   --Component-Button-Inverted-On-fill-Hover-inverted: var(
@@ -243,11 +263,13 @@
   --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0);
   --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0);
   --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0);
-  --Component-Button-Muted-Disabled-inverted: var(--Neutral-Opacity-Black-10);
-  --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10);
-  --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5);
-  --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5);
+  --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0);
+  --Component-Button-Muted-Fill-Disabled-inverted: var(
+    --Neutral-Opacity-Black-10
+  );
+  --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5);
+  --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5);
   --Component-Button-Muted-On-fill-Default: var(--Scandic-Grey-100);
   --Component-Button-Muted-On-fill-Disabled: var(--Scandic-Grey-40);
   --Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Red-90);
@@ -260,23 +282,25 @@
   --Icon-Feedback-Success: var(--Scandic-Green-60);
   --Icon-Feedback-Warning: var(--Scandic-Yellow-60);
   --Icon-Intense: var(--Scandic-Grey-100);
+  --Icon-Interactive-Accent: var(--Scandic-Red-Default);
   --Icon-Interactive-Default: var(--Scandic-Red-100);
   --Icon-Interactive-Disabled: var(--Scandic-Grey-40);
   --Icon-Interactive-Placeholder: var(--Scandic-Grey-60);
   --Icon-Interactive-Secondary: var(--Scandic-Peach-80);
   --Icon-Inverted: var(--Neutral-Opacity-White-100);
-  --Label-Font-family: var(--Font-family-Body);
+  --Label-Font-family: var(--Font-family-Scandic-Body);
   --Label-Font-weight-2: var(--Font-weight-Medium);
   --Label-Font-weight: var(--Font-weight-Regular);
   --Label-Size: var(--Impl-Text-size-5xs);
-  --Link-md-Font-family: var(--Font-family-Body);
+  --Link-md-Font-family: var(--Font-family-Scandic-Body);
   --Link-md-Font-weight: var(--Font-weight-Medium);
   --Link-md-Size: var(--Impl-Text-size-3xs);
-  --Link-sm-Font-family: var(--Font-family-Body);
+  --Link-sm-Font-family: var(--Font-family-Scandic-Body);
   --Link-sm-Font-weight: var(--Font-weight-Medium);
   --Link-sm-Size: var(--Impl-Text-size-4xs);
   --Overlay-10: var(--Neutral-Opacity-Black-10);
   --Overlay-20: var(--Neutral-Opacity-Black-20);
+  --Overlay-30: var(--Neutral-Opacity-Black-30);
   --Overlay-40: var(--Neutral-Opacity-Black-40);
   --Overlay-60: var(--Neutral-Opacity-Black-60);
   --Overlay-80: var(--Neutral-Opacity-Black-80);
@@ -310,14 +334,14 @@
   --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
   --Surface-Primary-Disabled: var(--Scandic-Grey-10);
   --Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
-  --Surface-Primary-OnSurface-Default: var(--Scandic-Beige-00);
+  --Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00);
+  --Surface-Secondary-Default-dark: var(--Scandic-Beige-20);
   --Surface-Secondary-Default: var(--Scandic-Beige-10);
-  --Surface-Secondary-Secondary: var(--Scandic-Beige-20);
   --Surface-UI-Fill-Active: var(--Scandic-Peach-100);
   --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
   --Surface-UI-Fill-Disabled: var(--Scandic-Grey-10);
   --Surface-UI-Fill-Intense: var(--Scandic-Grey-100);
-  --Tag-Font-family: var(--Font-family-Title);
+  --Tag-Font-family: var(--Font-family-Scandic-Title);
   --Tag-Font-weight: var(--Font-weight-Regular-bold);
   --Tag-Size: var(--Impl-Text-size-5xs);
   --Text-Accent-Primary: var(--Scandic-Red-Default);
@@ -335,48 +359,53 @@
   --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100);
   --Text-Brand-OnPrimary-3-Heading: var(--Scandic-Peach-10);
   --Text-Default: var(--Scandic-Grey-100);
+  --Text-Feedback-Error-Accent: var(--Scandic-Red-70);
+  --Text-Feedback-Information-Accent: var(--Scandic-Blue-70);
+  --Text-Feedback-Neutral-Accent: var(--Scandic-Grey-60);
+  --Text-Feedback-Succes-Accent: var(--Scandic-Green-60);
+  --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60);
   --Text-Heading: var(--Scandic-Red-100);
   --Text-Interactive-Default: var(--Scandic-Peach-100);
   --Text-Interactive-Disabled: var(--Scandic-Grey-40);
   --Text-Interactive-Error: var(--Scandic-Red-70);
-  --Text-Interactive-Focus: var(--Scandic-Grey-100);
+  --Text-Interactive-Focus: var(--Scandic-Grey-80);
   --Text-Interactive-Hover-Secondary: var(--Scandic-Peach-100);
   --Text-Interactive-Placeholder: var(--Scandic-Grey-60);
   --Text-Interactive-Secondary: var(--Scandic-Peach-80);
   --Text-Inverted: var(--Neutral-Opacity-White-100);
   --Text-Secondary: var(--Scandic-Grey-80);
   --Text-Tertiary: var(--Scandic-Grey-60);
-  --Title-Decorative-lg-Font-family: var(--Font-family-Decorative);
+  --Title-Decorative-lg-Font-family: var(--Font-family-Scandic-Decorative);
   --Title-Decorative-lg-Font-weight: var(--Font-weight-Regular);
   --Title-Decorative-lg-Size: var(--Impl-Text-size-xl);
-  --Title-Decorative-md-Font-family: var(--Font-family-Decorative);
+  --Title-Decorative-md-Font-family: var(--Font-family-Scandic-Decorative);
   --Title-Decorative-md-Font-weight: var(--Font-weight-Regular);
   --Title-Decorative-md-Size: var(--Impl-Text-size-sm);
-  --Title-Overline-sm-Font-family: var(--Font-family-Title);
+  --Title-Overline-sm-Font-family: var(--Font-family-Scandic-Title);
   --Title-Overline-sm-Font-weight: var(--Font-weight-Regular-bold);
   --Title-Overline-sm-Size: var(--Impl-Text-size-4xs);
-  --Title-Subtitle-lg-Font-family: var(--Font-family-Body);
+  --Title-Subtitle-lg-Font-family: var(--Font-family-Scandic-Body);
   --Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium);
   --Title-Subtitle-lg-Size: var(--Impl-Text-size-sm);
-  --Title-Subtitle-md-Font-family: var(--Font-family-Body);
+  --Title-Subtitle-md-Font-family: var(--Font-family-Scandic-Body);
   --Title-Subtitle-md-Font-weight: var(--Font-weight-Medium);
   --Title-Subtitle-md-Size: var(--Impl-Text-size-xs);
-  --Title-lg-Font-family: var(--Font-family-Title);
+  --Title-lg-Font-family: var(--Font-family-Scandic-Title);
   --Title-lg-Font-weight: var(--Font-weight-Black);
   --Title-lg-Size: var(--Impl-Text-size-4xl);
-  --Title-md-Font-family: var(--Font-family-Title);
+  --Title-md-Font-family: var(--Font-family-Scandic-Title);
   --Title-md-Font-weight: var(--Font-weight-Black);
-  --Title-md-LowCase-Font-family: var(--Font-family-Title);
+  --Title-md-LowCase-Font-family: var(--Font-family-Scandic-Title);
   --Title-md-LowCase-Font-weight: var(--Font-weight-Regular-bold);
   --Title-md-LowCase-Size: var(--Impl-Text-size-2xl);
   --Title-md-Size: var(--Impl-Text-size-2xl);
-  --Title-sm-Font-family: var(--Font-family-Title);
+  --Title-sm-Font-family: var(--Font-family-Scandic-Title);
   --Title-sm-Font-weight: var(--Font-weight-Black);
-  --Title-sm-LowCase-Font-family: var(--Font-family-Title);
+  --Title-sm-LowCase-Font-family: var(--Font-family-Scandic-Title);
   --Title-sm-LowCase-Font-weight: var(--Font-weight-Regular-bold);
   --Title-sm-LowCase-Size: var(--Impl-Text-size-lg);
   --Title-sm-Size: var(--Impl-Text-size-lg);
-  --Title-xs-Font-family: var(--Font-family-Title);
+  --Title-xs-Font-family: var(--Font-family-Scandic-Title);
   --Title-xs-Font-weight: var(--Font-weight-Black);
   --Title-xs-Size: var(--Impl-Text-size-sm);
 }

packages/design-system/lib/styles/scandic.js

@@ -113,8 +113,10 @@ export const theme = {
   'Tag/Text-Transform': 'uppercase',
   'Link/md/Font fallback': 'sans-serif',
   'Link/md/Letter spacing': 0.19,
+  'Link/md/Text-Decoration': 'underline',
   'Link/sm/Font fallback': 'sans-serif',
   'Link/sm/Letter spacing': 0.2,
+  'Link/sm/Text-Decoration': 'underline',
   'Body/Lead text/Font fallback': 'sans-serif',
   'Body/Paragraph/Font fallback': 'sans-serif',
   'Body/Paragraph/Letter spacing': 0.19,
@@ -125,9 +127,14 @@ export const theme = {
   'Label/Letter spacing': 0.17,
   'Body/Underline/md/Font fallback': 'sans-serif',
   'Body/Underline/md/Letter spacing': 0.19,
+  'Body/Underline/md/Text-Decoration': 'underline',
   'Body/Underline/sm/Font fallback': 'sans-serif',
   'Body/Underline/sm/Letter spacing': 0.2,
+  'Body/Underline/sm/Text-Decoration': 'underline',
   'Utilities/Gradients/10': '#F2ECE61A',
+  'Font family/Scandic/Title': 'Brandon Text',
+  'Font family/Scandic/Body': 'Fira sans',
+  'Font family/Scandic/Decorative': 'Biro Script Plus',
   'Title/lg/Font weight': 900,
   'Title/lg/Font family': 'Brandon Text',
   'Title/md/Font weight': 900,
@@ -182,10 +189,15 @@ export const theme = {
   'Text/Interactive/Secondary': '#8F4350',
   'Text/Interactive/Hover Secondary': '#4D0F25',
   'Text/Interactive/Disabled': '#A8A4A2',
-  'Text/Interactive/Focus': '#26201E',
+  'Text/Interactive/Focus': '#57514E',
   'Text/Interactive/Error': '#AD0015',
   'Text/Interactive/Placeholder': '#787472',
   'Text/Brand/OnAccent/Heading': '#4D001B',
+  'Text/Feedback/Information Accent': '#284EA0',
+  'Text/Feedback/Succes Accent': '#348337',
+  'Text/Feedback/Warning Accent': '#D17308',
+  'Text/Feedback/Error Accent': '#AD0015',
+  'Text/Feedback/Neutral Accent': '#787472',
   'Text/Brand/OnAccent/Default': '#26201E',
   'Text/Brand/OnAccent/Accent': '#8F4350',
   'Text/Brand/OnPrimary 1/Heading': '#4D001B',
@@ -203,10 +215,10 @@ export const theme = {
   'Surface/Primary/Hover': '#f2f2f2',
   'Surface/Primary/Hover Light': '#e6e5e5',
   'Surface/Primary/Hover Accent': '#F7E1D5',
-  'Surface/Primary/OnSurface/Default': '#FAF6F2',
+  'Surface/Primary/OnSurface/Default': '#F9F6F4',
   'Surface/Primary/Disabled': '#EBE8E6',
   'Surface/Secondary/Default': '#F2ECE6',
-  'Surface/Secondary/Secondary': '#E3D9D1',
+  'Surface/Secondary/Default dark': '#E3D9D1',
   'Surface/Secondary/Hover': '#dad4cf',
   'Surface/Brand/Accent/Default': '#F0C1B6',
   'Surface/Brand/Primary 1/Default': '#F7E1D5',
@@ -247,6 +259,7 @@ export const theme = {
   'Icon/Accent': '#B05B65',
   'Icon/Interactive/Default': '#4D001B',
   'Icon/Interactive/Secondary': '#8F4350',
+  'Icon/Interactive/Accent': '#CD0921',
   'Icon/Interactive/Disabled': '#A8A4A2',
   'Icon/Interactive/Placeholder': '#787472',
   'Icon/Feedback/Information': '#284EA0',
@@ -257,54 +270,56 @@ export const theme = {
   'Icon/Inverted': '#FFFFFF',
   'Overlay/10': '#1F1C1B1A',
   'Overlay/20': '#1F1C1B33',
+  'Overlay/30': '#1F1C1B4D',
   'Overlay/40': '#1F1C1B66',
   'Overlay/60': '#1F1C1B99',
   'Overlay/80': '#1F1C1BCC',
   'Overlay/90': '#1F1C1BE6',
-  'Component/Button/Brand/Primary/Default': '#CD0921',
-  'Component/Button/Brand/Primary/Hover': '#ba1721',
-  'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Primary/Fill/Default': '#CD0921',
+  'Component/Button/Brand/Primary/Fill/Hover': '#a81e20',
+  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Primary/On fill/Disabled': '#A8A4A2',
   'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Default': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Hover': '#FFFFFF00',
-  'Component/Button/Brand/Secondary/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Hover Inverted': '#4D001B',
-  'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00',
+  'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#4D001B',
+  'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Secondary/On fill/Default': '#4D001B',
   'Component/Button/Brand/Secondary/On fill/Hover': '#8F4350',
   'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#cbb0b3',
   'Component/Button/Brand/Secondary/On fill/Disabled': '#A8A4A2',
   'Component/Button/Brand/Secondary/Border/Default': '#4D001B',
   'Component/Button/Brand/Secondary/Border/Hover': '#8F4350',
   'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#eee4e5',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#a87e83',
   'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
-  'Component/Button/Brand/Tertiary/Default': '#4D001B',
-  'Component/Button/Brand/Tertiary/Hover': '#601e2d',
-  'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A',
+  'Component/Button/Brand/Tertiary/Fill/Default': '#4D001B',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#601e2d',
+  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
   'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
   'Component/Button/Brand/Tertiary/On fill/Disabled': '#A8A4A2',
   'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00',
   'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
-  'Component/Button/Inverted/Default': '#FFFFFF',
-  'Component/Button/Inverted/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Hover': '#f2f2f2',
-  'Component/Button/Inverted/Hover Inverted': '#4D001B',
-  'Component/Button/Inverted/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
+  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
+  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover Inverted': '#4D001B',
+  'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A',
+  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
+  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Component/Button/Inverted/On fill/Default': '#4D001B',
   'Component/Button/Inverted/On fill/Hover': '#601e2d',
   'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
   'Component/Button/Inverted/On fill/Disabled': '#A8A4A2',
-  'Component/Button/Inverted/Border/Default': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Hover': '#FFFFFF00',
-  'Component/Button/Inverted/Border/Disable': '#FFFFFF00',
   'Border/Interactive/Default': '#9C8A7E',
   'Border/Divider/Default': '#E3D9D1',
   'Border/Divider/Subtle': '#F2ECE6',
@@ -318,11 +333,11 @@ export const theme = {
   'Border/Interactive/Disabled': '#A8A4A2',
   'Border/Interactive/Error': '#AD0015',
   'Border/Interactive/KeyboardFocus': '#5B8FD4',
-  'Component/Button/Muted/Default': '#FFFFFF00',
-  'Component/Button/Muted/Hover': '#FFFFFF00',
-  'Component/Button/Muted/Disabled': '#FFFFFF1A',
-  'Component/Button/Muted/Hover inverted': '#1F1C1B0D',
-  'Component/Button/Muted/Disabled inverted': '#1F1C1B1A',
+  'Component/Button/Muted/Fill/Default': '#FFFFFF00',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
+  'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',
+  'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D',
+  'Component/Button/Muted/Fill/Disabled inverted': '#1F1C1B1A',
   'Component/Button/Muted/On fill/Default': '#26201E',
   'Component/Button/Muted/On fill/Inverted': '#FFFFFF',
   'Component/Button/Muted/On fill/Hover Inverted': '#6D000D',