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/BackToTopButton/index.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { type Button, Button as ButtonRAC } from 'react-aria-components'
+import { Button as ButtonRAC } from 'react-aria-components'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
 
-import { backToTopButtonVariants } from './variants'
+import { variants } from './variants'
 
 import styles from './backToTopButton.module.css'
 
@@ -13,8 +13,8 @@ import type { VariantProps } from 'class-variance-authority'
 import type { ComponentProps } from 'react'
 
 interface BackToTopButtonProps
-  extends ComponentProps<typeof Button>,
-    VariantProps<typeof backToTopButtonVariants> {
+  extends ComponentProps<typeof ButtonRAC>,
+    VariantProps<typeof variants> {
   label: string
 }
 
@@ -23,13 +23,11 @@ export function BackToTopButton({
   label,
   ...props
 }: BackToTopButtonProps) {
+  const classNames = variants({ position })
+
   return (
     <Typography variant="Body/Supporting text (caption)/smBold">
-      <ButtonRAC
-        className={backToTopButtonVariants({ position })}
-        aria-label={label}
-        {...props}
-      >
+      <ButtonRAC className={classNames} aria-label={label} {...props}>
         <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
         <span className={styles.text}>{label}</span>
       </ButtonRAC>