feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg

packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css

@@ -152,27 +152,12 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    background-color: var(--Component-Button-Inverted-Fill-Default);
-    color: var(--Component-Button-Inverted-On-fill-Default);
-    border-radius: var(--Corner-radius-rounded);
-    padding: 10px;
-    cursor: pointer;
-    border-width: 0;
-    display: flex;
-    z-index: 1;
-    box-shadow: 0px 0px 8px 1px #0000001a;
 
-    &:hover {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    &.previous {
+      left: var(--Space-x2);
+    }
+    &.next {
+      right: var(--Space-x2);
     }
   }
-
-  .galleryPrevButton {
-    left: var(--Space-x2);
-  }
-
-  .galleryNextButton {
-    right: var(--Space-x2);
-  }
 }

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -10,6 +10,7 @@ import { Typography } from '../../Typography'
 
 import Image from '../../Image'
 
+import { cx } from 'class-variance-authority'
 import { LightboxImage } from '..'
 import styles from './gallery.module.css'
 
@@ -147,18 +148,30 @@ export default function Gallery({
               />
             </motion.div>
           </AnimatePresence>
-          <motion.button
-            className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
-            onClick={handlePrev}
+          <IconButton
+            theme="Inverted"
+            style="Elevated"
+            className={cx(styles.navigationButton, styles.previous)}
+            onPress={handlePrev}
+            aria-label={intl.formatMessage({
+              id: 'lightbox.previousImage',
+              defaultMessage: 'Previous image',
+            })}
           >
             <MaterialIcon icon="arrow_back" color="CurrentColor" />
-          </motion.button>
-          <motion.button
-            className={`${styles.navigationButton} ${styles.galleryNextButton}`}
-            onClick={handleNext}
+          </IconButton>
+          <IconButton
+            theme="Inverted"
+            style="Elevated"
+            className={cx(styles.navigationButton, styles.next)}
+            onPress={handleNext}
+            aria-label={intl.formatMessage({
+              id: 'lightbox.nextImage',
+              defaultMessage: 'Next image',
+            })}
           >
             <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-          </motion.button>
+          </IconButton>
         </div>
         <div className={styles.desktopThumbnailGrid}>
           <AnimatePresence initial={false}>