fix(BOOK-471): Only setting hover state on devices supporting hover inside Button and IconButton components

Approved-by: Bianca Widstam

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

@@ -34,109 +34,123 @@
   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 {
+  @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 {
+  &: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 {
+  @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 {
+  &: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 {
+  @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 {
+  &: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 {
+  @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);
+      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 {
+  &: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 {
+  @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 {
+  &: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 {
+  @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 {
+  &:disabled {
     background-color: var(--Component-Button-Inverted-Disabled);
     border-color: transparent;
     color: var(--Component-Button-Inverted-On-fill-Disabled);
   }
+}
 
 .variant-text {
   background-color: transparent;
@@ -144,17 +158,19 @@
   color: var(--Component-Button-Brand-Secondary-On-fill-Default);
   padding-left: 0;
   padding-right: 0;
-}
 
-.variant-text:hover {
+  @media (hover: hover) {
+    &:not(:disabled):hover {
       color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
       text-decoration: underline;
     }
+  }
 
-.variant-text:disabled {
+  &:disabled {
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
     text-decoration: none;
   }
+}
 
 .variant-text.no-wrapping {
   padding: var(--Space-x025) 0;
@@ -163,15 +179,17 @@
 
 .variant-text.color-inverted {
   color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
-}
 
-.variant-text.color-inverted:hover {
+  @media (hover: hover) {
+    &:not(:disabled):hover {
       color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
     }
+  }
 
-.variant-text.color-inverted:disabled {
+  &:disabled {
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
   }
+}
 
 .spinnerWrapper {
   display: flex;

packages/design-system/lib/components/IconButton/iconButton.module.css

@@ -16,10 +16,12 @@
   background-color: var(--Component-Button-Brand-Primary-Fill-Default);
   color: var(--Component-Button-Brand-Primary-On-fill-Default);
 
+  @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 {
     background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
@@ -31,10 +33,12 @@
   background-color: var(--Component-Button-Inverted-Fill-Default);
   color: var(--Component-Button-Inverted-On-fill-Default);
 
+  @media (hover: hover) {
     &:hover:not(:disabled) {
       background-color: var(--Component-Button-Inverted-Fill-Hover);
       color: var(--Component-Button-Inverted-On-fill-Hover);
     }
+  }
 
   &:disabled {
     background-color: var(--Component-Button-Inverted-Fill-Disabled);
@@ -44,9 +48,11 @@
   &.style-muted {
     color: var(--Component-Button-Muted-On-fill-Inverted);
 
+    @media (hover: hover) {
       &:hover:not(:disabled) {
         color: var(--Component-Button-Muted-On-fill-Inverted);
       }
+    }
 
     &:disabled {
       color: var(--Component-Button-Muted-On-fill-Disabled);
@@ -58,10 +64,12 @@
   background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
   color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
 
+  @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 {
     background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
@@ -72,9 +80,11 @@
 .theme-black {
   color: var(--Component-Button-Muted-On-fill-Default);
 
+  @media (hover: hover) {
     &:hover:not(:disabled) {
       color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
     }
+  }
 
   &:disabled {
     color: var(--Component-Button-Muted-On-fill-Disabled);
@@ -92,9 +102,11 @@
 .style-muted {
   background-color: var(--Component-Button-Muted-Fill-Default);
 
+  @media (hover: hover) {
     &:hover:not(:disabled) {
       background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
     }
+  }
 
   &:disabled {
     background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);