From 78ac3b29c33bb60281f2faec4bbc8e68e471c3e9 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 6 Nov 2025 14:33:55 +0000
Subject: [PATCH] fix(BOOK-471): Only setting hover state on devices supporting
 hover inside Button and IconButton components

Approved-by: Bianca Widstam
---
 .../lib/components/Button/button.module.css   | 166 ++++++++++--------
 .../IconButton/iconButton.module.css          |  42 +++--
 2 files changed, 119 insertions(+), 89 deletions(-)

diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css
index 1e364edc1..8efa5a40b 100644
--- a/packages/design-system/lib/components/Button/button.module.css
+++ b/packages/design-system/lib/components/Button/button.module.css
@@ -34,108 +34,122 @@
   background-color: var(--Component-Button-Brand-Primary-Fill-Default);
   border-color: var(--Component-Button-Brand-Primary-Border-Default);
   color: var(--Component-Button-Brand-Primary-On-fill-Default);
-}
 
-.variant-primary:hover {
-  background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
-  border-color: var(--Component-Button-Brand-Primary-Border-Hover);
-  color: var(--Component-Button-Brand-Primary-On-fill-Hover);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
+      border-color: var(--Component-Button-Brand-Primary-Border-Hover);
+      color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+    }
+  }
 
-.variant-primary:disabled {
-  background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
-  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
-  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+  &:disabled {
+    background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
+    border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
+    color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+  }
 }
 
 .variant-primary.color-inverted {
   background-color: var(--Component-Button-Inverted-Fill-Default);
   border-color: var(--Component-Button-Inverted-Border-Default);
   color: var(--Component-Button-Inverted-On-fill-Default);
-}
 
-.variant-primary.color-inverted:hover {
-  background-color: var(--Component-Button-Inverted-Fill-Hover);
-  border-color: var(--Component-Button-Inverted-Border-Hover);
-  color: var(--Component-Button-Inverted-On-fill-Hover);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      border-color: var(--Component-Button-Inverted-Border-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
 
-.variant-primary.color-inverted:disabled {
-  background-color: var(--Component-Button-Inverted-Fill-Disabled);
-  border-color: var(--Component-Button-Inverted-Border-Disabled);
-  color: var(--Component-Button-Inverted-On-fill-Disabled);
+  &:disabled {
+    background-color: var(--Component-Button-Inverted-Fill-Disabled);
+    border-color: var(--Component-Button-Inverted-Border-Disabled);
+    color: var(--Component-Button-Inverted-On-fill-Disabled);
+  }
 }
 
 .variant-secondary {
   background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
   border-color: var(--Component-Button-Brand-Secondary-Border-Default);
   color: var(--Component-Button-Brand-Secondary-On-fill-Default);
-}
 
-.variant-secondary:hover {
-  background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
-  border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
-  color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
+      border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
+      color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+    }
+  }
 
-.variant-secondary:disabled {
-  background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
-  border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
-  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  &:disabled {
+    background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
+    border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
+    color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  }
 }
 
 .variant-secondary.color-inverted {
   background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
   border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
   color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
-}
 
-.variant-secondary.color-inverted:hover {
-  background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
-  border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted);
-  color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
+      border-color: var(
+        --Component-Button-Brand-Secondary-Border-Hover-inverted
+      );
+      color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+    }
+  }
 
-.variant-secondary.color-inverted:disabled {
-  background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
-  border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
-  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  &:disabled {
+    background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
+    border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
+    color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  }
 }
 
 .variant-tertiary {
   background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
   border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
   color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
-}
 
-.variant-tertiary:hover {
-  background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
-  border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
-  color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
+      border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
+      color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+    }
+  }
 
-.variant-tertiary:disabled {
-  background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
-  border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
-  color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
+  &:disabled {
+    background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
+    border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
+    color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
+  }
 }
 
 .variant-inverted {
   background-color: var(--Component-Button-Inverted-Default);
   border-color: transparent;
   color: var(--Component-Button-Inverted-On-fill-Default);
-}
 
-.variant-inverted:hover {
-  background-color: var(--Component-Button-Inverted-Hover);
-  border-color: transparent;
-  color: var(--Component-Button-Inverted-On-fill-Hover);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      background-color: var(--Component-Button-Inverted-Hover);
+      border-color: transparent;
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
 
-.variant-inverted:disabled {
-  background-color: var(--Component-Button-Inverted-Disabled);
-  border-color: transparent;
-  color: var(--Component-Button-Inverted-On-fill-Disabled);
+  &:disabled {
+    background-color: var(--Component-Button-Inverted-Disabled);
+    border-color: transparent;
+    color: var(--Component-Button-Inverted-On-fill-Disabled);
+  }
 }
 
 .variant-text {
@@ -144,16 +158,18 @@
   color: var(--Component-Button-Brand-Secondary-On-fill-Default);
   padding-left: 0;
   padding-right: 0;
-}
 
-.variant-text:hover {
-  color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
-  text-decoration: underline;
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+      text-decoration: underline;
+    }
+  }
 
-.variant-text:disabled {
-  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
-  text-decoration: none;
+  &:disabled {
+    color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+    text-decoration: none;
+  }
 }
 
 .variant-text.no-wrapping {
@@ -163,14 +179,16 @@
 
 .variant-text.color-inverted {
   color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
-}
 
-.variant-text.color-inverted:hover {
-  color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
-}
+  @media (hover: hover) {
+    &:not(:disabled):hover {
+      color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+    }
+  }
 
-.variant-text.color-inverted:disabled {
-  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  &:disabled {
+    color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  }
 }
 
 .spinnerWrapper {
diff --git a/packages/design-system/lib/components/IconButton/iconButton.module.css b/packages/design-system/lib/components/IconButton/iconButton.module.css
index b9432a671..7f24fa2e9 100644
--- a/packages/design-system/lib/components/IconButton/iconButton.module.css
+++ b/packages/design-system/lib/components/IconButton/iconButton.module.css
@@ -16,9 +16,11 @@
   background-color: var(--Component-Button-Brand-Primary-Fill-Default);
   color: var(--Component-Button-Brand-Primary-On-fill-Default);
 
-  &:hover:not(:disabled) {
-    background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
-    color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
+      color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+    }
   }
 
   &:disabled {
@@ -31,9 +33,11 @@
   background-color: var(--Component-Button-Inverted-Fill-Default);
   color: var(--Component-Button-Inverted-On-fill-Default);
 
-  &:hover:not(:disabled) {
-    background-color: var(--Component-Button-Inverted-Fill-Hover);
-    color: var(--Component-Button-Inverted-On-fill-Hover);
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
   }
 
   &:disabled {
@@ -44,8 +48,10 @@
   &.style-muted {
     color: var(--Component-Button-Muted-On-fill-Inverted);
 
-    &:hover:not(:disabled) {
-      color: var(--Component-Button-Muted-On-fill-Inverted);
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        color: var(--Component-Button-Muted-On-fill-Inverted);
+      }
     }
 
     &:disabled {
@@ -58,9 +64,11 @@
   background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
   color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
 
-  &:hover:not(:disabled) {
-    background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
-    color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
+      color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+    }
   }
 
   &:disabled {
@@ -72,8 +80,10 @@
 .theme-black {
   color: var(--Component-Button-Muted-On-fill-Default);
 
-  &:hover:not(:disabled) {
-    color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
+    }
   }
 
   &:disabled {
@@ -92,8 +102,10 @@
 .style-muted {
   background-color: var(--Component-Button-Muted-Fill-Default);
 
-  &:hover:not(:disabled) {
-    background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
+    }
   }
 
   &:disabled {