fix(BOOK-622): Removed blending step for hover colors and respect original values from design system instead

Approved-by: Linus Flood
2025-12-02 06:24:59 +00:00
parent 3e4ac2c270
commit 8f7e4b8d06
21 changed files with 747 additions and 428 deletions
--- a/packages/design-system/generate/generate.ts
+++ b/packages/design-system/generate/generate.ts
@@ -1,4 +1,4 @@
-import { colord, extend } from 'colord'
+import { extend } from 'colord'
 import mixPlugin from 'colord/plugins/mix'
 import fs from 'node:fs'

@@ -238,60 +238,6 @@ themes.forEach((themeTokenValues) => {
  })
 })

-// Process hover alpha colors
-// All */Hover* styles will blend with */Default
-themes.forEach((themeTokenValue) => {
-  themeTokenValue.forEach((value, token) => {
-    if (token.toLowerCase().indexOf('hover') >= 0) {
-      const hoverValue = value.resolved
-
-      if (typeof hoverValue === 'string') {
-        if (hoverValue.startsWith('#') && hoverValue.length === 9) {
-          // The color that the hover color with alpha mixes with.
-          const baseToken = token
-            .split('/')
-            .map((tokenPart) => {
-              if (tokenPart.toLowerCase().indexOf('hover') >= 0) {
-                return 'Default'
-              }
-              return tokenPart
-            })
-            .join('/')
-
-          const baseValue =
-            themeTokenValue.get(baseToken) ??
-            themes.get(FALLBACK_THEME)?.get(baseToken)
-          if (baseValue) {
-            if (typeof baseValue.resolved === 'string' && baseValue.resolved) {
-              const baseColor = colord(baseValue.resolved)
-              const hoverColor = colord(hoverValue)
-
-              if (baseColor.alpha() > 0 && hoverColor.alpha() > 0) {
-                const computedHoverValue = baseColor
-                  .mix(hoverColor.alpha(1), hoverColor.alpha())
-                  .toHex()
-
-                themeTokenValue.set(token, {
-                  // no alias for the computed hover color
-                  resolved: computedHoverValue,
-                })
-              }
-            } else {
-              throw new Error(
-                `Base token ${baseToken} is unresolved: ${baseValue}`
-              )
-            }
-          } else {
-            throw new Error(
-              `Unable to find base token (${baseToken}) for hover token ${token}`
-            )
-          }
-        }
-      }
-    }
-  })
-})
-
 // Prepare for output
 const variablesJsOutput = [
  '/* This file is generated, do not edit manually! */',
--- a/packages/design-system/lib/components/DeprecatedSelect/index.tsx
+++ b/packages/design-system/lib/components/DeprecatedSelect/index.tsx
@@ -16,10 +16,8 @@ import styles from './select.module.css'
 import Body from '../Body'
 import { Label } from '../Label'

-interface SelectProps extends Omit<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  'onSelect'
-> {
+interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onSelect'> {
  defaultSelectedKey?: Key
  items: { label: string; value: Key }[]
  label: string
--- a/packages/design-system/lib/styles/downtown-camper.css
+++ b/packages/design-system/lib/styles/downtown-camper.css
@@ -13,17 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --Body-Underline-sm-Text-Decoration: underline;
-  --Component-Button-Brand-Primary-Fill-Hover: #614436;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #9b857b;
-  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c2b4ae;
-  --Component-Button-Brand-Tertiary-Fill-Hover: #915836;
-  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
-  --Component-Button-Inverted-On-fill-Hover: #4f3021;
-  --Component-Button-Muted-Border-Hover: #ffffff30;
  --Font-family-Downtown-Camper-Body: 'Fira sans';
  --Font-family-Downtown-Camper-Decorative: 'Gotham';
  --Font-family-Downtown-Camper-Title: 'Gotham';
-  --Icon-Interactive-Inverted-Hover: #b5b5b5;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -69,15 +61,9 @@
  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #e4e4e4;
-  --Surface-UI-Fill-Active-Hover: #ffffff;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.06px;
  --Tag-Text-Transform: none;
-  --Text-Brand-OnPrimary-1-Hover: #ffffff;
-  --Text-Interactive-Inverted-Hover: #b5b5b5;
  --Title-Decorative-lg-Font-fallback: sans-serif;
  --Title-Decorative-lg-Letter-spacing: 0.05px;
  --Title-Decorative-lg-Text-Transform: uppercase;
@@ -161,6 +147,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-20);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -174,6 +161,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(
    --Signature-Downtown-Camper-Russet-90
  );
@@ -197,6 +187,9 @@
    --Signature-Downtown-Camper-Russet-100
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(
    --Signature-Downtown-Camper-Russet-90
  );
@@ -218,6 +211,7 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -234,6 +228,7 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-Downtown-Camper-Lunar-green-80
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(
    --Signature-Downtown-Camper-Russet-100
  );
@@ -241,8 +236,10 @@
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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);
@@ -265,6 +262,7 @@
  --Icon-Interactive-Accent: var(--Signature-Downtown-Camper-Russet-80);
  --Icon-Interactive-Default: var(--Neutral-90);
  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-Downtown-Camper-Russet-80);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -321,9 +319,13 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Neutral-5);
  --Surface-Secondary-Default: var(--Neutral-10);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Neutral-20);
+  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10);
  --Surface-UI-Fill-Active: var(--Neutral-80);
  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -339,6 +341,7 @@
  --Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70);
  --Text-Brand-OnPrimary-2-Accent: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
@@ -357,6 +360,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Neutral-70);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(
    --Signature-Downtown-Camper-Russet-60
--- a/packages/design-system/lib/styles/downtown-camper.js
+++ b/packages/design-system/lib/styles/downtown-camper.js
@@ -148,7 +148,7 @@ export const theme = {
  'Text/Interactive/Hover': '#454545',
  'Text/Interactive/Secondary': '#834722',
  'Text/Interactive/Secondary Hover': '#BB7524',
-  'Text/Interactive/Inverted Hover': '#b5b5b5',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -164,7 +164,7 @@ export const theme = {
  'Text/Brand/OnAccent/Accent Secondary': '#747474',
  'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
-  'Text/Brand/OnPrimary 1/Hover': '#ffffff',
+  'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3',
  'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
  'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
@@ -175,14 +175,14 @@ export const theme = {
  'Background/Primary': '#FCFCFC',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#F5F5F5',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#F0F0F0',
  'Surface/Secondary/Subtle': '#D9D9D9',
-  'Surface/Secondary/Hover': '#e4e4e4',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#3C1D0C',
  'Surface/Brand/Accent/OnAccent/Accent': '#FFFFFF',
  'Surface/Brand/Accent/OnAccent/Accent Secondary': '#FFFFFF',
@@ -196,7 +196,7 @@ export const theme = {
  'Surface/UI Fill/Default': '#FFFFFF',
  'Surface/UI Fill/Intense': '#262626',
  'Surface/UI Fill/Active': '#262626',
-  'Surface/UI Fill/Active Hover': '#ffffff',
+  'Surface/UI Fill/Active Hover': '#FFFFFF1A',
  'Surface/UI Fill/Disabled': '#E9E9E9',
  'Surface/Accent/1': '#A96D59',
  'Surface/Accent/2': '#3F6DBD',
@@ -222,7 +222,7 @@ export const theme = {
  'Icon/Interactive/Default': '#1F1F1F',
  'Icon/Interactive/Secondary': '#834722',
  'Icon/Interactive/Accent': '#834722',
-  'Icon/Interactive/Inverted Hover': '#b5b5b5',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -239,7 +239,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#3C1D0C',
-  'Component/Button/Brand/Primary/Fill/Hover': '#614436',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF33',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -255,15 +255,15 @@ export const theme = {
  'Component/Button/Brand/Secondary/On fill/Default': '#3C1D0C',
  'Component/Button/Brand/Secondary/On fill/Hover': '#69391E',
  'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c2b4ae',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3',
  'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
  'Component/Button/Brand/Secondary/Border/Default': '#3C1D0C',
  'Component/Button/Brand/Secondary/Border/Hover': '#69391E',
  'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#9b857b',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#834722',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#915836',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
@@ -273,14 +273,14 @@ export const theme = {
  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  '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': '#3C1D0C',
-  'Component/Button/Inverted/On fill/Hover': '#4f3021',
+  'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -305,6 +305,6 @@ export const theme = {
  'Component/Button/Muted/On fill/Hover Inverted': '#9B5622',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/styles/grand-hotel.css
+++ b/packages/design-system/lib/styles/grand-hotel.css
@@ -13,19 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --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-Fill-Hover: #e6e5e5;
-  --Component-Button-Inverted-On-fill-Hover: #34373d;
-  --Component-Button-Muted-Border-Hover: #ffffff30;
-  --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';
-  --Icon-Interactive-Inverted-Hover: #b6b7b9;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -52,14 +42,9 @@
  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #ebeae9;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.24px;
  --Tag-Text-Transform: uppercase;
-  --Text-Brand-OnPrimary-1-Hover: #ffffff;
-  --Text-Interactive-Inverted-Hover: #b6b7b9;
  --Title-Decorative-lg-Font-fallback: Serif;
  --Title-Decorative-lg-Letter-spacing: 0.3px;
  --Title-Decorative-lg-Text-Transform: uppercase;
@@ -145,6 +130,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -158,6 +144,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(
    --Signature-Grand-Hotel-Blue-Bayoux-80
  );
@@ -181,6 +170,9 @@
    --Signature-Grand-Hotel-Blue-Bayoux-100
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(
    --Signature-Grand-Hotel-Blue-Bayoux-80
  );
@@ -202,10 +194,14 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Signature-Grand-Hotel-Blue-Bayoux-100
  );
  --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Tertiary-On-fill-Hover: var(
+    --Neutral-Opacity-White-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);
@@ -215,6 +211,7 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-Grand-Hotel-Submarine-30
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(
    --Signature-Grand-Hotel-Blue-Bayoux-100
  );
@@ -222,11 +219,14 @@
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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-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);
@@ -245,6 +245,7 @@
  --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-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -311,8 +312,11 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
  --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Signature-Grand-Hotel-Cloudy-10);
  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Active: var(--Neutral-80);
@@ -330,6 +334,7 @@
  --Text-Brand-OnPrimary-1-Accent: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70);
  --Text-Brand-OnPrimary-2-Accent: var(--Neutral-90);
  --Text-Brand-OnPrimary-2-Default: var(--Neutral-90);
  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-90);
@@ -348,6 +353,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Signature-Grand-Hotel-Blue-Bayoux-80);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(
    --Signature-Grand-Hotel-Careys-Pink-50
--- a/packages/design-system/lib/styles/grand-hotel.js
+++ b/packages/design-system/lib/styles/grand-hotel.js
@@ -129,7 +129,7 @@ export const theme = {
  'Text/Interactive/Hover': '#3D444D',
  'Text/Interactive/Secondary': '#AA546B',
  'Text/Interactive/Secondary Hover': '#C27183',
-  'Text/Interactive/Inverted Hover': '#b6b7b9',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -145,7 +145,7 @@ export const theme = {
  'Text/Brand/OnAccent/Accent Secondary': '#747474',
  'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
-  'Text/Brand/OnPrimary 1/Hover': '#ffffff',
+  'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3',
  'Text/Brand/OnPrimary 1/Accent': '#FFFFFF',
  'Text/Brand/OnPrimary 2/Heading': '#1F1F1F',
  'Text/Brand/OnPrimary 2/Default': '#1F1F1F',
@@ -156,14 +156,14 @@ export const theme = {
  'Background/Primary': '#FFFFFF',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#F7F6F5',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#F7F6F5',
  'Surface/Secondary/Subtle': '#EBEAE9',
-  'Surface/Secondary/Hover': '#ebeae9',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#D7D5D1',
  'Surface/Brand/Accent/OnAccent/Accent': '#21252B',
  'Surface/Brand/Accent/OnAccent/Accent Secondary': '#21252B',
@@ -203,7 +203,7 @@ export const theme = {
  'Icon/Interactive/Default': '#21252B',
  'Icon/Interactive/Secondary': '#AA546B',
  'Icon/Interactive/Accent': '#AA546B',
-  'Icon/Interactive/Inverted Hover': '#b6b7b9',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -220,7 +220,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#21252B',
-  'Component/Button/Brand/Primary/Fill/Hover': '#34373d',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -236,32 +236,32 @@ export const theme = {
  '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/Hover inverted': '#FFFFFFB3',
  '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': '#878a8d',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  '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/Hover': '#FFFFFF1A',
  '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/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  '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': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -279,13 +279,13 @@ export const theme = {
  '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/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': '#3D444D',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/styles/haymarket.css
+++ b/packages/design-system/lib/styles/haymarket.css
@@ -13,17 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --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';
  --Font-family-Haymarket-Decorative: 'Prumo text';
  --Font-family-Haymarket-Title: 'Prumo text';
-  --Icon-Interactive-Inverted-Hover: #b5b5b5;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -69,14 +61,9 @@
  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #efebea;
-  --Surface-UI-Fill-Active-Hover: #ffffff;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.24px;
  --Tag-Text-Transform: uppercase;
-  --Text-Interactive-Inverted-Hover: #b5b5b5;
  --Title-Decorative-lg-Font-fallback: Serif;
  --Title-Decorative-lg-Letter-spacing: 0.6px;
  --Title-Decorative-lg-Text-Transform: uppercase;
@@ -160,6 +147,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -171,6 +159,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(--Neutral-70);
  --Component-Button-Brand-Secondary-Border-Inverted: var(
    --Neutral-Opacity-White-100
@@ -190,6 +181,9 @@
  );
  --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-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(--Neutral-70);
  --Component-Button-Brand-Secondary-On-fill-Inverted: var(
    --Neutral-Opacity-White-100
@@ -209,6 +203,7 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -225,13 +220,16 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-Haymarket-Antique-Brass-50
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(--Neutral-90);
  --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40);
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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);
@@ -252,6 +250,7 @@
  --Icon-Interactive-Accent: var(--Signature-Haymarket-Antique-Brass-60);
  --Icon-Interactive-Default: var(--Neutral-90);
  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-Haymarket-Antique-Brass-60);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -314,9 +313,13 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0);
  --Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Signature-Haymarket-Vista-White-10);
+  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10);
  --Surface-UI-Fill-Active: var(--Neutral-80);
  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -353,6 +356,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Neutral-70);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(
    --Signature-Haymarket-Antique-Brass-40
--- a/packages/design-system/lib/styles/haymarket.js
+++ b/packages/design-system/lib/styles/haymarket.js
@@ -148,7 +148,7 @@ export const theme = {
  'Text/Interactive/Hover': '#454545',
  'Text/Interactive/Secondary': '#805E45',
  'Text/Interactive/Secondary Hover': '#BA8E6E',
-  'Text/Interactive/Inverted Hover': '#b5b5b5',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -175,14 +175,14 @@ export const theme = {
  'Background/Primary': '#FFFFFF',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#FBF7F6',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#FBF7F6',
  'Surface/Secondary/Subtle': '#F6ECEA',
-  'Surface/Secondary/Hover': '#efebea',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#946F54',
  'Surface/Brand/Accent/OnAccent/Accent': '#EDE3D8',
  'Surface/Brand/Accent/OnAccent/Accent Secondary': '#EDE3D8',
@@ -196,7 +196,7 @@ export const theme = {
  'Surface/UI Fill/Default': '#FFFFFF',
  'Surface/UI Fill/Intense': '#262626',
  'Surface/UI Fill/Active': '#262626',
-  'Surface/UI Fill/Active Hover': '#ffffff',
+  'Surface/UI Fill/Active Hover': '#FFFFFF1A',
  'Surface/UI Fill/Disabled': '#E9E9E9',
  'Surface/Accent/1': '#AA6858',
  'Surface/Accent/2': '#6E98A2',
@@ -222,7 +222,7 @@ export const theme = {
  'Icon/Interactive/Default': '#1F1F1F',
  'Icon/Interactive/Secondary': '#805E45',
  'Icon/Interactive/Accent': '#805E45',
-  'Icon/Interactive/Inverted Hover': '#b5b5b5',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -239,7 +239,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#1F1F1F',
-  'Component/Button/Brand/Primary/Fill/Hover': '#323232',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -255,15 +255,15 @@ export const theme = {
  '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/Hover inverted': '#FFFFFFB3',
  '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': '#868686',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#946F54',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#87664e',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
@@ -273,14 +273,14 @@ export const theme = {
  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  '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': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -305,6 +305,6 @@ export const theme = {
  'Component/Button/Muted/On fill/Hover Inverted': '#454545',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/styles/hotel-norge.css
+++ b/packages/design-system/lib/styles/hotel-norge.css
@@ -13,17 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --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';
  --Font-family-Hotel-Norge-Decorative: 'Domaine Sans Text';
  --Font-family-Hotel-Norge-Title: 'Domaine Sans Text';
-  --Icon-Interactive-Inverted-Hover: #b3b4bd;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -59,14 +51,9 @@
  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #e3e4df;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.18px;
  --Tag-Text-Transform: uppercase;
-  --Text-Brand-OnPrimary-1-Hover: #ffffff;
-  --Text-Interactive-Inverted-Hover: #b3b4bd;
  --Title-Decorative-lg-Font-fallback: sans-serif;
  --Title-Decorative-lg-Letter-spacing: 0.24px;
  --Title-Decorative-lg-Text-Transform: uppercase;
@@ -152,6 +139,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -165,6 +153,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(
    --Signature-Hotel-Norge-Dark-blue-80
  );
@@ -188,6 +179,9 @@
    --Signature-Hotel-Norge-Dark-blue-100
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(
    --Signature-Hotel-Norge-Dark-blue-80
  );
@@ -209,6 +203,7 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -225,6 +220,7 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-Hotel-Norge-Emerald-100
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(
    --Signature-Hotel-Norge-Dark-blue-100
  );
@@ -232,8 +228,10 @@
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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);
@@ -256,6 +254,7 @@
  --Icon-Interactive-Accent: var(--Signature-Hotel-Norge-Emerald-90);
  --Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-100);
  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -316,10 +315,13 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(
    --Signature-Hotel-Norge-Off-White-30
  );
  --Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Signature-Hotel-Norge-Off-White-60);
  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Active: var(--Neutral-80);
@@ -337,6 +339,7 @@
  --Text-Brand-OnPrimary-1-Accent: var(--Signature-Hotel-Norge-Dark-blue-0);
  --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70);
  --Text-Brand-OnPrimary-2-Accent: var(--Signature-Hotel-Norge-Emerald-0);
  --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
@@ -355,6 +358,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Signature-Hotel-Norge-Dark-blue-80);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(--Signature-Hotel-Norge-Emerald-80);
  --Text-Interactive-Secondary: var(--Signature-Hotel-Norge-Emerald-90);
--- a/packages/design-system/lib/styles/hotel-norge.js
+++ b/packages/design-system/lib/styles/hotel-norge.js
@@ -135,7 +135,7 @@ export const theme = {
  'Text/Interactive/Hover': '#404655',
  'Text/Interactive/Secondary': '#26544A',
  'Text/Interactive/Secondary Hover': '#3A655C',
-  'Text/Interactive/Inverted Hover': '#b3b4bd',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -151,7 +151,7 @@ export const theme = {
  'Text/Brand/OnAccent/Accent Secondary': '#747474',
  'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
-  'Text/Brand/OnPrimary 1/Hover': '#ffffff',
+  'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3',
  'Text/Brand/OnPrimary 1/Accent': '#B7C5C8',
  'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
@@ -162,14 +162,14 @@ export const theme = {
  'Background/Primary': '#FFFFFF',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#F4F5F2',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#EFF0EB',
  'Surface/Secondary/Subtle': '#D9DAD6',
-  'Surface/Secondary/Hover': '#e3e4df',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#C7DDD5',
  'Surface/Brand/Accent/OnAccent/Accent': '#2F3445',
  'Surface/Brand/Accent/OnAccent/Accent Secondary': '#2F3445',
@@ -209,7 +209,7 @@ export const theme = {
  'Icon/Interactive/Default': '#181E34',
  'Icon/Interactive/Secondary': '#26544A',
  'Icon/Interactive/Accent': '#26544A',
-  'Icon/Interactive/Inverted Hover': '#b3b4bd',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -226,7 +226,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#181E34',
-  'Component/Button/Brand/Primary/Fill/Hover': '#2c3146',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -242,15 +242,15 @@ export const theme = {
  '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/Hover inverted': '#FFFFFFB3',
  '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': '#838593',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#004337',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#215448',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
@@ -260,14 +260,14 @@ export const theme = {
  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  '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': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -292,6 +292,6 @@ export const theme = {
  'Component/Button/Muted/On fill/Hover Inverted': '#404655',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/styles/marski.css
+++ b/packages/design-system/lib/styles/marski.css
@@ -13,17 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --Body-Underline-sm-Text-Decoration: underline;
-  --Component-Button-Brand-Primary-Fill-Hover: #51262b;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #9d8081;
-  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c3b1b2;
-  --Component-Button-Brand-Tertiary-Fill-Hover: #1a54e7;
-  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
-  --Component-Button-Inverted-On-fill-Hover: #51262b;
-  --Component-Button-Muted-Border-Hover: #ffffff30;
  --Font-family-Marski-Body: 'Fira sans';
  --Font-family-Marski-Decorative: 'Helvetica Neue';
  --Font-family-Marski-Title: 'Helvetica Neue';
-  --Icon-Interactive-Inverted-Hover: #b6bdc2;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -80,14 +72,9 @@
  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #e0e2e3;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.18px;
  --Tag-Text-Transform: none;
-  --Text-Brand-OnPrimary-1-Hover: #ffffff;
-  --Text-Interactive-Inverted-Hover: #b2b9be;
  --Title-Decorative-lg-Font-fallback: sans-serif;
  --Title-Decorative-lg-Letter-spacing: 0.1px;
  --Title-Decorative-lg-Text-Transform: uppercase;
@@ -171,6 +158,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -184,6 +172,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(
    --Signature-Marski-Aubergine-80
  );
@@ -207,6 +198,9 @@
    --Signature-Marski-Aubergine-100
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(
    --Signature-Marski-Aubergine-80
  );
@@ -228,6 +222,7 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-Black-5);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -244,6 +239,7 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-Marski-Aubergine-100
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(
    --Signature-Marski-Aubergine-100
  );
@@ -251,8 +247,10 @@
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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);
@@ -275,6 +273,7 @@
  --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-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -329,8 +328,11 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0);
  --Surface-Secondary-Default: var(--Signature-Marski-Elephant-10);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Signature-Marski-Elephant-20);
  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Active: var(--Neutral-80);
@@ -348,6 +350,7 @@
  --Text-Brand-OnPrimary-1-Accent: var(--Signature-Marski-Blue-ribbon-50);
  --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70);
  --Text-Brand-OnPrimary-2-Accent: var(--Signature-Marski-Torch-red-50);
  --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
@@ -366,6 +369,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Signature-Marski-Elephant-80);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(--Signature-Marski-Blue-ribbon-90);
  --Text-Interactive-Secondary: var(--Signature-Marski-Blue-ribbon-70);
--- a/packages/design-system/lib/styles/marski.js
+++ b/packages/design-system/lib/styles/marski.js
@@ -159,7 +159,7 @@ export const theme = {
  'Text/Interactive/Hover': '#2C414D',
  'Text/Interactive/Secondary': '#0D57F3',
  'Text/Interactive/Secondary Hover': '#143D94',
-  'Text/Interactive/Inverted Hover': '#b2b9be',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -175,7 +175,7 @@ export const theme = {
  'Text/Brand/OnAccent/Accent Secondary': '#747474',
  'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
-  'Text/Brand/OnPrimary 1/Hover': '#ffffff',
+  'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3',
  'Text/Brand/OnPrimary 1/Accent': '#458AFF',
  'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
@@ -186,14 +186,14 @@ export const theme = {
  'Background/Primary': '#FCFCFC',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#F6F6F7',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#ECEEEF',
  'Surface/Secondary/Subtle': '#E0E3E5',
-  'Surface/Secondary/Hover': '#e0e2e3',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#575757',
  'Surface/Brand/Accent/OnAccent/Accent': '#E0E3E5',
  'Surface/Brand/Accent/OnAccent/Accent Secondary': '#E0E3E5',
@@ -233,7 +233,7 @@ export const theme = {
  'Icon/Interactive/Default': '#1E3441',
  'Icon/Interactive/Secondary': '#0D57F3',
  'Icon/Interactive/Accent': '#0D57F3',
-  'Icon/Interactive/Inverted Hover': '#b6bdc2',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -250,7 +250,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#3E1118',
-  'Component/Button/Brand/Primary/Fill/Hover': '#51262b',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -266,15 +266,15 @@ export const theme = {
  'Component/Button/Brand/Secondary/On fill/Default': '#3E1118',
  'Component/Button/Brand/Secondary/On fill/Hover': '#5B353B',
  'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c3b1b2',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3',
  'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
  'Component/Button/Brand/Secondary/Border/Default': '#3E1118',
  'Component/Button/Brand/Secondary/Border/Hover': '#5B353B',
  'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#9d8081',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#0D57F3',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#1a54e7',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#1F1C1B0D',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
@@ -284,14 +284,14 @@ export const theme = {
  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  'Component/Button/Inverted/Fill/Hover Inverted': '#3E1118',
  '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': '#3E1118',
-  'Component/Button/Inverted/On fill/Hover': '#51262b',
+  'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -316,6 +316,6 @@ export const theme = {
  'Component/Button/Muted/On fill/Hover Inverted': '#5B353B',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/styles/partner-sas.css
+++ b/packages/design-system/lib/styles/partner-sas.css
@@ -1,16 +1,6 @@
 /* This file is generated, do not edit manually! */
 .partner-sas {
  /* Values */
-  --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-Fill-Hover: #e6e5e5;
-  --Component-Button-Inverted-On-fill-Hover: #34373d;
-  --Component-Button-Muted-Border-Hover: #ffffff30;
-  --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2;
-  --Icon-Interactive-Inverted-Hover: #b6b7b9;
  --Surface-Brand-Accent-Default: #ffffff;
  --Surface-Brand-Accent-OnAccent-Accent-Secondary: #ffffff;
  --Surface-Brand-Accent-OnAccent-Accent: #ffffff;
@@ -25,11 +15,7 @@
  --Surface-Brand-Primary-3-Default: #ffffff;
  --Surface-Brand-Primary-3-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-3-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #ebeae9;
  --Text-Brand-OnPrimary-1-Hover: #ffffff;
-  --Text-Interactive-Inverted-Hover: #b6b7b9;
  --Utilities-Gradients-10: #5b6e7f1a;

  /* Aliases */
@@ -63,6 +49,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -76,6 +63,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(
    --Signature-Grand-Hotel-Blue-Bayoux-80
  );
@@ -99,6 +89,9 @@
    --Signature-Grand-Hotel-Blue-Bayoux-100
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(
    --Signature-Grand-Hotel-Blue-Bayoux-80
  );
@@ -120,10 +113,14 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Signature-Grand-Hotel-Blue-Bayoux-100
  );
  --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Tertiary-On-fill-Hover: var(
+    --Neutral-Opacity-White-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);
@@ -133,6 +130,7 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-Grand-Hotel-Submarine-30
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(
    --Signature-Grand-Hotel-Blue-Bayoux-100
  );
@@ -140,11 +138,14 @@
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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-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);
@@ -163,6 +164,7 @@
  --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-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-Grand-Hotel-Careys-Pink-60);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -191,8 +193,11 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0);
  --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Signature-Grand-Hotel-Cloudy-10);
  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Active: var(--Neutral-80);
@@ -225,6 +230,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Signature-Grand-Hotel-Careys-Pink-60);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(
    --Signature-Grand-Hotel-Careys-Pink-50
--- a/packages/design-system/lib/styles/partner-sas.js
+++ b/packages/design-system/lib/styles/partner-sas.js
@@ -26,7 +26,7 @@ export const theme = {
  'Text/Interactive/Hover': '#AA546B',
  'Text/Interactive/Secondary': '#AA546B',
  'Text/Interactive/Secondary Hover': '#C27183',
-  'Text/Interactive/Inverted Hover': '#b6b7b9',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -52,14 +52,14 @@ export const theme = {
  'Background/Primary': '#FFFFFF',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#F7F6F5',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#F7F6F5',
  'Surface/Secondary/Subtle': '#EBEAE9',
-  'Surface/Secondary/Hover': '#ebeae9',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/UI Fill/Default': '#FFFFFF',
  'Surface/UI Fill/Intense': '#262626',
  'Surface/UI Fill/Active': '#262626',
@@ -89,7 +89,7 @@ export const theme = {
  'Icon/Interactive/Default': '#21252B',
  'Icon/Interactive/Secondary': '#AA546B',
  'Icon/Interactive/Accent': '#AA546B',
-  'Icon/Interactive/Inverted Hover': '#b6b7b9',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -106,7 +106,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#21252B',
-  'Component/Button/Brand/Primary/Fill/Hover': '#34373d',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -122,32 +122,32 @@ export const theme = {
  '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/Hover inverted': '#FFFFFFB3',
  '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': '#878a8d',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  '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/Hover': '#FFFFFF1A',
  '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/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  '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': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -165,13 +165,13 @@ export const theme = {
  '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/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': '#3D444D',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/styles/scandic-go.css
+++ b/packages/design-system/lib/styles/scandic-go.css
@@ -13,18 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --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-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';
-  --Icon-Interactive-Inverted-Hover: #bbb2bf;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -83,15 +74,9 @@
  --Scandic-Go-Yellow-70: #966400;
  --Scandic-Go-Yellow-80: #754403;
  --Scandic-Go-Yellow-90: #572701;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #e4e1d9;
-  --Surface-UI-Fill-Active-Hover: #e6e5e5;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.24px;
  --Tag-Text-Transform: none;
-  --Text-Brand-OnPrimary-1-Hover: #ffffff;
-  --Text-Interactive-Inverted-Hover: #bbb2bf;
  --Title-Decorative-lg-Font-fallback: Serif;
  --Title-Decorative-lg-Letter-spacing: 0.32px;
  --Title-Decorative-lg-Text-Transform: none;
@@ -171,6 +156,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Scandic-Go-Purple-100
  );
@@ -182,6 +168,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Go-Purple-80);
  --Component-Button-Brand-Secondary-Border-Inverted: var(
    --Neutral-Opacity-White-100
@@ -203,6 +192,9 @@
    --Scandic-Go-Purple-100
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Go-Purple-80);
  --Component-Button-Brand-Secondary-On-fill-Inverted: var(
    --Neutral-Opacity-White-100
@@ -220,6 +212,7 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -234,17 +227,21 @@
  --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-Fill-Hover: var(--Neutral-Opacity-Black-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(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --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-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-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(--Scandic-Go-Purple-80);
@@ -260,6 +257,7 @@
  --Icon-Interactive-Accent: var(--Scandic-Go-Purple-80);
  --Icon-Interactive-Default: var(--Scandic-Go-Purple-100);
  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Scandic-Go-Purple-80);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -314,9 +312,13 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0);
  --Surface-Secondary-Default: var(--Scandic-Go-Beige-10);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Scandic-Go-Beige-20);
+  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-Black-10);
  --Surface-UI-Fill-Active: var(--Neutral-80);
  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Disabled: var(--Neutral-15);
@@ -332,6 +334,7 @@
  --Text-Brand-OnPrimary-1-Accent: var(--Scandic-Go-Purple-10);
  --Text-Brand-OnPrimary-1-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-1-Heading: var(--Neutral-Opacity-White-100);
+  --Text-Brand-OnPrimary-1-Hover: var(--Neutral-Opacity-White-70);
  --Text-Brand-OnPrimary-2-Accent: var(--Scandic-Go-Purple-10);
  --Text-Brand-OnPrimary-2-Default: var(--Neutral-Opacity-White-100);
  --Text-Brand-OnPrimary-2-Heading: var(--Neutral-Opacity-White-100);
@@ -350,6 +353,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Scandic-Go-Purple-80);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(--Scandic-Go-Purple-100);
  --Text-Interactive-Secondary: var(--Scandic-Go-Purple-80);
--- a/packages/design-system/lib/styles/scandic-go.js
+++ b/packages/design-system/lib/styles/scandic-go.js
@@ -161,7 +161,7 @@ export const theme = {
  'Text/Interactive/Hover': '#5E2A8C',
  'Text/Interactive/Secondary': '#5E2A8C',
  'Text/Interactive/Secondary Hover': '#2D163A',
-  'Text/Interactive/Inverted Hover': '#bbb2bf',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -177,7 +177,7 @@ export const theme = {
  'Text/Brand/OnAccent/Accent Secondary': '#5E2A8C',
  'Text/Brand/OnPrimary 1/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 1/Default': '#FFFFFF',
-  'Text/Brand/OnPrimary 1/Hover': '#ffffff',
+  'Text/Brand/OnPrimary 1/Hover': '#FFFFFFB3',
  'Text/Brand/OnPrimary 1/Accent': '#DCD7FF',
  'Text/Brand/OnPrimary 2/Heading': '#FFFFFF',
  'Text/Brand/OnPrimary 2/Default': '#FFFFFF',
@@ -188,14 +188,14 @@ export const theme = {
  'Background/Primary': '#FFFEFA',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#DCD7FF',
  'Surface/Primary/OnSurface/Default': '#FAF8F2',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#F0EDE4',
  'Surface/Secondary/Subtle': '#E0DCCE',
-  'Surface/Secondary/Hover': '#e4e1d9',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#F5FF73',
  'Surface/Brand/Accent/OnAccent/Default': '#2D163A',
  'Surface/Brand/Accent/OnAccent/Accent': '#451F61',
@@ -213,7 +213,7 @@ export const theme = {
  'Surface/UI Fill/Default': '#FFFFFF',
  'Surface/UI Fill/Intense': '#262626',
  'Surface/UI Fill/Active': '#262626',
-  'Surface/UI Fill/Active Hover': '#e6e5e5',
+  'Surface/UI Fill/Active Hover': '#1F1C1B1A',
  'Surface/UI Fill/Disabled': '#E9E9E9',
  'Surface/Accent/1': '#FA3737',
  'Surface/Accent/2': '#087B86',
@@ -239,7 +239,7 @@ export const theme = {
  'Icon/Interactive/Default': '#2D163A',
  'Icon/Interactive/Secondary': '#5E2A8C',
  'Icon/Interactive/Accent': '#5E2A8C',
-  'Icon/Interactive/Inverted Hover': '#bbb2bf',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -256,7 +256,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#DCD7FF',
-  'Component/Button/Brand/Primary/Fill/Hover': '#c7c2e5',
+  'Component/Button/Brand/Primary/Fill/Hover': '#1F1C1B1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#2D163A',
  'Component/Button/Brand/Primary/On fill/Hover': '#2D163A',
@@ -272,15 +272,15 @@ export const theme = {
  '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/Hover inverted': '#FFFFFFB3',
  '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': '#908197',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#2D163A',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#402a4b',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
@@ -290,14 +290,14 @@ export const theme = {
  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  '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': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -313,9 +313,9 @@ export const theme = {
  'Border/Interactive/Disabled': '#8C8C8C',
  'Border/Interactive/Error': '#AD0015',
  'Component/Button/Muted/Fill/Default': '#FFFFFF',
-  'Component/Button/Muted/Fill/Hover': '#ffffff',
+  'Component/Button/Muted/Fill/Hover': '#FFFFFF0D',
  'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A',
-  'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2',
+  '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',
--- a/packages/design-system/lib/styles/scandic.css
+++ b/packages/design-system/lib/styles/scandic.css
@@ -13,16 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --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: #f2f2f2;
-  --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';
-  --Icon-Interactive-Inverted-Hover: #cbb0b3;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -108,14 +101,9 @@
  --Scandic-Yellow-70: #a85211;
  --Scandic-Yellow-80: #7d370f;
  --Scandic-Yellow-90: #4f2313;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #dad4cf;
-  --Surface-UI-Fill-Active-Hover: #ffffff;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.2px;
  --Tag-Text-Transform: uppercase;
-  --Text-Interactive-Inverted-Hover: #cbb0b3;
  --Title-Decorative-lg-Font-fallback: sans-serif;
  --Title-Decorative-lg-Letter-spacing: 0.64px;
  --Title-Decorative-lg-Text-Transform: none;
@@ -195,6 +183,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-Black-20);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -206,6 +195,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(--Scandic-Peach-80);
  --Component-Button-Brand-Secondary-Border-Inverted: var(
    --Neutral-Opacity-White-100
@@ -225,6 +217,9 @@
  );
  --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-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80);
  --Component-Button-Brand-Secondary-On-fill-Inverted: var(
    --Neutral-Opacity-White-100
@@ -242,6 +237,7 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -256,11 +252,13 @@
  --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-Fill-Hover: var(--Neutral-Opacity-Black-5);
  --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(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --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);
@@ -286,6 +284,7 @@
  --Icon-Interactive-Accent: var(--Scandic-Red-Default);
  --Icon-Interactive-Default: var(--Scandic-Red-100);
  --Icon-Interactive-Disabled: var(--Scandic-Grey-40);
+  --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Scandic-Grey-60);
  --Icon-Interactive-Secondary: var(--Scandic-Peach-80);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -338,9 +337,13 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Scandic-Peach-10);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00);
  --Surface-Secondary-Default: var(--Scandic-Beige-10);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-10);
  --Surface-Secondary-Subtle: var(--Scandic-Beige-20);
+  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-10);
  --Surface-UI-Fill-Active: var(--Scandic-Peach-100);
  --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Disabled: var(--Neutral-Opacity-Black-10);
@@ -375,6 +378,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Scandic-Grey-80);
  --Text-Interactive-Hover: var(--Scandic-Peach-80);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Scandic-Grey-60);
  --Text-Interactive-Secondary-Hover: var(--Scandic-Red-100);
  --Text-Interactive-Secondary: var(--Scandic-Peach-80);
--- a/packages/design-system/lib/styles/scandic.js
+++ b/packages/design-system/lib/styles/scandic.js
@@ -188,7 +188,7 @@ export const theme = {
  'Text/Interactive/Hover': '#8F4350',
  'Text/Interactive/Secondary': '#8F4350',
  'Text/Interactive/Secondary Hover': '#4D001B',
-  'Text/Interactive/Inverted Hover': '#cbb0b3',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#A8A4A2',
  'Text/Interactive/Focus': '#57514E',
  'Text/Interactive/Error': '#AD0015',
@@ -215,14 +215,14 @@ export const theme = {
  'Background/Primary': '#FAF6F2',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#F7E1D5',
  'Surface/Primary/OnSurface/Default': '#F9F6F4',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#F2ECE6',
  'Surface/Secondary/Subtle': '#E3D9D1',
-  'Surface/Secondary/Hover': '#dad4cf',
+  'Surface/Secondary/Hover': '#1F1C1B1A',
  'Surface/Brand/Accent/Default': '#F0C1B6',
  'Surface/Brand/Accent/OnAccent/Default': '#4D001B',
  'Surface/Brand/Accent/OnAccent/Accent': '#CD0921',
@@ -240,7 +240,7 @@ export const theme = {
  'Surface/UI Fill/Default': '#FFFFFF',
  'Surface/UI Fill/Intense': '#26201E',
  'Surface/UI Fill/Active': '#4D0F25',
-  'Surface/UI Fill/Active Hover': '#ffffff',
+  'Surface/UI Fill/Active Hover': '#FFFFFF1A',
  'Surface/UI Fill/Disabled': '#1F1C1B1A',
  'Surface/Accent/1': '#8D0011',
  'Surface/Accent/2': '#3F6DBD',
@@ -266,7 +266,7 @@ export const theme = {
  'Icon/Interactive/Default': '#4D001B',
  'Icon/Interactive/Secondary': '#8F4350',
  'Icon/Interactive/Accent': '#CD0921',
-  'Icon/Interactive/Inverted Hover': '#cbb0b3',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#A8A4A2',
  'Icon/Interactive/Placeholder': '#787472',
  'Icon/Feedback/Information': '#284EA0',
@@ -283,7 +283,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#CD0921',
-  'Component/Button/Brand/Primary/Fill/Hover': '#a81e20',
+  'Component/Button/Brand/Primary/Fill/Hover': '#1F1C1B33',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -299,15 +299,15 @@ export const theme = {
  '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/Hover inverted': '#FFFFFFB3',
  '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': '#a87e83',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#4D001B',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#601e2d',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF',
@@ -317,14 +317,14 @@ export const theme = {
  'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00',
  'Component/Button/Inverted/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#f2f2f2',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B0D',
  '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': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#A8A4A2',
  'Border/Interactive/Default': '#9C8A7E',
--- a/packages/design-system/lib/styles/the-dock.css
+++ b/packages/design-system/lib/styles/the-dock.css
@@ -13,19 +13,9 @@
  --Body-Underline-sm-Font-fallback: sans-serif;
  --Body-Underline-sm-Letter-spacing: 0.2px;
  --Body-Underline-sm-Text-Decoration: underline;
-  --Component-Button-Brand-Primary-Fill-Hover: #512725;
-  --Component-Button-Brand-Secondary-Border-Hover-inverted: #9d807e;
-  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #c4b1af;
-  --Component-Button-Brand-Tertiary-Fill-Hover: #f3e4c8;
-  --Component-Button-Brand-Tertiary-On-fill-Hover: #512725;
-  --Component-Button-Inverted-Fill-Hover: #e6e5e5;
-  --Component-Button-Inverted-On-fill-Hover: #512725;
-  --Component-Button-Muted-Border-Hover: #ffffff30;
-  --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2;
  --Font-family-The-Dock-Body: 'Fira sans';
  --Font-family-The-Dock-Decorative: 'Beausite Classic';
  --Font-family-The-Dock-Title: 'Reckless';
-  --Icon-Interactive-Inverted-Hover: #b5b5b5;
  --Label-Font-fallback: sans-serif;
  --Label-Letter-spacing: 0.17px;
  --Link-md-Font-fallback: sans-serif;
@@ -52,13 +42,9 @@
  --Surface-Brand-Primary-1-OnSurface-Accent-Secondary: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Accent: #ffffff;
  --Surface-Brand-Primary-1-OnSurface-Default: #ffffff;
-  --Surface-Primary-Hover-Light: #e6e5e5;
-  --Surface-Primary-Hover: #f2f2f2;
-  --Surface-Secondary-Hover: #ebe5dc;
  --Tag-Font-fallback: sans-serif;
  --Tag-Letter-spacing: 0.24px;
  --Tag-Text-Transform: uppercase;
-  --Text-Interactive-Inverted-Hover: #b5b5b5;
  --Title-Decorative-lg-Font-fallback: Serif;
  --Title-Decorative-lg-Letter-spacing: 0px;
  --Title-Decorative-lg-Text-Transform: uppercase;
@@ -144,6 +130,7 @@
  --Component-Button-Brand-Primary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Primary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Primary-On-fill-Default: var(
    --Neutral-Opacity-White-100
  );
@@ -157,6 +144,9 @@
  --Component-Button-Brand-Secondary-Border-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Secondary-Border-Hover-inverted: var(
+    --Neutral-Opacity-White-50
+  );
  --Component-Button-Brand-Secondary-Border-Hover: var(
    --Signature-The-Dock-Rose-Copper-80
  );
@@ -180,6 +170,9 @@
    --Signature-The-Dock-Rose-Copper-90
  );
  --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Secondary-On-fill-Hover-inverted: var(
+    --Neutral-Opacity-White-70
+  );
  --Component-Button-Brand-Secondary-On-fill-Hover: var(
    --Signature-The-Dock-Rose-Copper-80
  );
@@ -201,10 +194,14 @@
  --Component-Button-Brand-Tertiary-Fill-Disabled: var(
    --Neutral-Opacity-Black-10
  );
+  --Component-Button-Brand-Tertiary-Fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Brand-Tertiary-On-fill-Default: var(
    --Signature-The-Dock-Rose-Copper-90
  );
  --Component-Button-Brand-Tertiary-On-fill-Disabled: var(--Neutral-40);
+  --Component-Button-Brand-Tertiary-On-fill-Hover: var(
+    --Neutral-Opacity-White-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);
@@ -214,6 +211,7 @@
  --Component-Button-Inverted-Fill-Hover-Inverted: var(
    --Signature-The-Dock-Sandbank-Beige-20
  );
+  --Component-Button-Inverted-Fill-Hover: var(--Neutral-Opacity-Black-10);
  --Component-Button-Inverted-On-fill-Default: var(
    --Signature-The-Dock-Rose-Copper-90
  );
@@ -221,11 +219,14 @@
  --Component-Button-Inverted-On-fill-Hover-inverted: var(
    --Neutral-Opacity-White-100
  );
+  --Component-Button-Inverted-On-fill-Hover: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10);
  --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10);
+  --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-10);
  --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-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);
@@ -244,6 +245,7 @@
  --Icon-Interactive-Accent: var(--Signature-The-Dock-Signal-Red-60);
  --Icon-Interactive-Default: var(--Neutral-90);
  --Icon-Interactive-Disabled: var(--Neutral-30);
+  --Icon-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Icon-Interactive-Placeholder: var(--Neutral-50);
  --Icon-Interactive-Secondary: var(--Signature-The-Dock-Signal-Red-60);
  --Icon-Inverted: var(--Neutral-Opacity-White-100);
@@ -302,8 +304,11 @@
  --Surface-Primary-Default: var(--Neutral-Opacity-White-100);
  --Surface-Primary-Disabled: var(--Neutral-Opacity-Black-10);
  --Surface-Primary-Hover-Accent: var(--Neutral-15);
+  --Surface-Primary-Hover-Light: var(--Neutral-Opacity-Black-10);
+  --Surface-Primary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Primary-OnSurface-Default: var(--Signature-The-Dock-Linen-White-00);
  --Surface-Secondary-Default: var(--Signature-The-Dock-Linen-White-20);
+  --Surface-Secondary-Hover: var(--Neutral-Opacity-Black-5);
  --Surface-Secondary-Subtle: var(--Signature-The-Dock-Sandbank-Beige-20);
  --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100);
  --Surface-UI-Fill-Active: var(--Neutral-80);
@@ -342,6 +347,7 @@
  --Text-Interactive-Error: var(--Scandic-Red-70);
  --Text-Interactive-Focus: var(--Neutral-80);
  --Text-Interactive-Hover: var(--Neutral-70);
+  --Text-Interactive-Inverted-Hover: var(--Neutral-Opacity-White-70);
  --Text-Interactive-Placeholder: var(--Neutral-50);
  --Text-Interactive-Secondary-Hover: var(--Signature-The-Dock-Signal-Red-50);
  --Text-Interactive-Secondary: var(--Signature-The-Dock-Signal-Red-60);
--- a/packages/design-system/lib/styles/the-dock.js
+++ b/packages/design-system/lib/styles/the-dock.js
@@ -126,7 +126,7 @@ export const theme = {
  'Text/Interactive/Hover': '#454545',
  'Text/Interactive/Secondary': '#D62220',
  'Text/Interactive/Secondary Hover': '#FC2826',
-  'Text/Interactive/Inverted Hover': '#b5b5b5',
+  'Text/Interactive/Inverted Hover': '#FFFFFFB3',
  'Text/Interactive/Disabled': '#8C8C8C',
  'Text/Interactive/Focus': '#262626',
  'Text/Interactive/Error': '#AD0015',
@@ -153,14 +153,14 @@ export const theme = {
  'Background/Primary': '#FDFCF9',
  'Background/Secondary': '#FFFFFF',
  'Surface/Primary/Default': '#FFFFFF',
-  'Surface/Primary/Hover': '#f2f2f2',
-  'Surface/Primary/Hover Light': '#e6e5e5',
+  'Surface/Primary/Hover': '#1F1C1B0D',
+  'Surface/Primary/Hover Light': '#1F1C1B1A',
  'Surface/Primary/Hover Accent': '#E9E9E9',
  'Surface/Primary/OnSurface/Default': '#FDFCF9',
  'Surface/Primary/Disabled': '#1F1C1B1A',
  'Surface/Secondary/Default': '#F7F1E8',
  'Surface/Secondary/Subtle': '#F2E1C2',
-  'Surface/Secondary/Hover': '#ebe5dc',
+  'Surface/Secondary/Hover': '#1F1C1B0D',
  'Surface/Brand/Accent/Default': '#B5CC87',
  'Surface/Brand/Accent/OnAccent/Accent': '#B31C1B',
  'Surface/Brand/Accent/OnAccent/Accent Secondary': '#B31C1B',
@@ -200,7 +200,7 @@ export const theme = {
  'Icon/Interactive/Default': '#1F1F1F',
  'Icon/Interactive/Secondary': '#D62220',
  'Icon/Interactive/Accent': '#D62220',
-  'Icon/Interactive/Inverted Hover': '#b5b5b5',
+  'Icon/Interactive/Inverted Hover': '#FFFFFFB3',
  'Icon/Interactive/Disabled': '#BFBFBF',
  'Icon/Interactive/Placeholder': '#747474',
  'Icon/Feedback/Information': '#284EA0',
@@ -217,7 +217,7 @@ export const theme = {
  'Overlay/80': '#1F1C1BCC',
  'Overlay/90': '#1F1C1BE6',
  'Component/Button/Brand/Primary/Fill/Default': '#3E1212',
-  'Component/Button/Brand/Primary/Fill/Hover': '#512725',
+  'Component/Button/Brand/Primary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF',
  'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF',
@@ -233,32 +233,32 @@ export const theme = {
  'Component/Button/Brand/Secondary/On fill/Default': '#3E1212',
  'Component/Button/Brand/Secondary/On fill/Hover': '#654141',
  'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#c4b1af',
+  'Component/Button/Brand/Secondary/On fill/Hover inverted': '#FFFFFFB3',
  'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C',
  'Component/Button/Brand/Secondary/Border/Default': '#3E1212',
  'Component/Button/Brand/Secondary/Border/Hover': '#654141',
  'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF',
-  'Component/Button/Brand/Secondary/Border/Hover inverted': '#9d807e',
+  'Component/Button/Brand/Secondary/Border/Hover inverted': '#FFFFFF80',
  'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/Fill/Default': '#F2E1C2',
-  'Component/Button/Brand/Tertiary/Fill/Hover': '#f3e4c8',
+  'Component/Button/Brand/Tertiary/Fill/Hover': '#FFFFFF1A',
  'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A',
  'Component/Button/Brand/Tertiary/On fill/Default': '#3E1212',
-  'Component/Button/Brand/Tertiary/On fill/Hover': '#512725',
+  'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF1A',
  '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/Fill/Default': '#FFFFFF',
  'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6',
-  'Component/Button/Inverted/Fill/Hover': '#e6e5e5',
+  'Component/Button/Inverted/Fill/Hover': '#1F1C1B1A',
  'Component/Button/Inverted/Fill/Hover Inverted': '#F2E1C2',
  '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': '#3E1212',
-  'Component/Button/Inverted/On fill/Hover': '#512725',
+  'Component/Button/Inverted/On fill/Hover': '#FFFFFF1A',
  'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF',
  'Component/Button/Inverted/On fill/Disabled': '#8C8C8C',
  'Border/Interactive/Default': '#BFBFBF',
@@ -276,13 +276,13 @@ export const theme = {
  '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/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': '#654141',
  'Component/Button/Muted/On fill/Disabled': '#8C8C8C',
  'Component/Button/Muted/Border/Default': '#FFFFFF1A',
-  'Component/Button/Muted/Border/Hover': '#ffffff30',
+  'Component/Button/Muted/Border/Hover': '#FFFFFF1A',
  'Component/Button/Muted/Border/Disable': '#FFFFFF1A',
 }
--- a/packages/design-system/lib/tokens/index.ts
+++ b/packages/design-system/lib/tokens/index.ts