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

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -3,6 +3,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
@@ -42,14 +43,18 @@ export default async function HotelListingItem({
 
   return (
     <article className={styles.container}>
-      <Image
+      {image?.src ? (
-        src={image.src}
+        <Image
-        alt={image.altText || image.altText_En}
+          src={image.src}
-        width={400}
+          alt={image.altText || image.altText_En}
-        height={300}
+          width={400}
-        sizes="(min-width: 768px) 400px, 100vw"
+          height={300}
-        className={styles.image}
+          sizes="(min-width: 768px) 400px, 100vw"
-      />
+          className={styles.image}
+        />
+      ) : (
+        <ImageFallback className={styles.image} />
+      )}
       <section className={styles.content}>
         <div className={styles.intro}>
           <HotelLogoIcon hotelId={id} hotelType={hotelType} />

apps/scandic-web/components/MeetingPackageWidget/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { useState } from "react"
 import {
-  Button,
+  Button as ButtonRAC,
   Dialog,
   DialogTrigger,
   Modal,
@@ -10,6 +11,7 @@ import {
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -29,6 +31,7 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
   const isDesktop = useMediaQuery("(min-width: 948px)", {
     initializeWithValue: false,
   })
+  const [isHovered, setIsHovered] = useState(false)
 
   return isDesktop ? (
     <MeetingPackageWidgetContent {...props} />
@@ -36,7 +39,11 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
     <div className={props.className}>
       <DialogTrigger>
         <div className={styles.buttonWrapper}>
-          <Button className={styles.button}>
+          <ButtonRAC
+            className={styles.button}
+            onHoverStart={() => setIsHovered(true)}
+            onHoverEnd={() => setIsHovered(false)}
+          >
             <span className={styles.fakeInput}>
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <span>
@@ -55,18 +62,19 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
                 </span>
               </Typography>
             </span>
-            <span className={styles.fakeButton}>
+            <FakeButton
+              variant="Primary"
+              size="Medium"
+              typography="Body/Supporting text (caption)/smBold"
+              isHovered={isHovered}
+            >
               <MaterialIcon icon="search" color="CurrentColor" />
-              <Typography variant="Body/Supporting text (caption)/smBold">
+              {intl.formatMessage({
-                <span>
+                id: "bookingWidget.button.search",
-                  {intl.formatMessage({
+                defaultMessage: "Search",
-                    id: "bookingWidget.button.search",
+              })}
-                    defaultMessage: "Search",
+            </FakeButton>
-                  })}
+          </ButtonRAC>
-                </span>
-              </Typography>
-            </span>
-          </Button>
         </div>
         <ModalOverlay isDismissable className={styles.overlay}>
           <Modal className={styles.modal}>

apps/scandic-web/components/MeetingPackageWidget/meetingPackageWidget.module.css

@@ -14,12 +14,6 @@
   background-color: transparent;
   width: 100%;
   cursor: pointer;
-
-  &:hover .fakeButton {
-    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);
-  }
 }
 
 .fakeInput {
@@ -35,20 +29,6 @@
   color: var(--Text-Interactive-Placeholder);
 }
 
-.fakeButton {
-  border-radius: var(--Corner-radius-rounded);
-  border-width: 2px;
-  border-style: solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x05);
-  padding: 10px var(--Space-x2);
-  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);
-}
-
 .overlay {
   position: fixed;
   inset: 0;

packages/design-system/lib/components/BackToTopButton/BackToTopButton.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { expect } from 'storybook/test'
+
+import { BackToTopButton } from '.'
+import { config as backToTopButtonConfig } from './variants'
+
+const meta: Meta<typeof BackToTopButton> = {
+  title: 'Components/BackToTopButton',
+  component: BackToTopButton,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+    position: {
+      control: 'select',
+      options: Object.keys(backToTopButtonConfig.variants.position),
+      table: {
+        type: {
+          summary: 'string',
+          detail: Object.keys(backToTopButtonConfig.variants.position).join(
+            ' | '
+          ),
+        },
+        defaultValue: {
+          summary: backToTopButtonConfig.defaultVariants.position,
+        },
+      },
+    },
+    label: {
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof BackToTopButton>
+
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
+
+export const Default: Story = {
+  args: {
+    onPress: () => alert('Back to top button pressed!'),
+    label: 'Back to top',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PositionLeft: Story = {
+  args: {
+    ...Default.args,
+    position: 'left',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PositionCenter: Story = {
+  args: {
+    ...Default.args,
+    position: 'center',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PositionRight: Story = {
+  args: {
+    ...Default.args,
+    position: 'right',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const OnDarkBackground: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    onPress: () => alert('Back to top button pressed!'),
+    label: 'Back to top',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}

packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css

@@ -1,24 +1,43 @@
 .backToTopButton {
-  display: inline-flex;
+  border-radius: var(--Corner-radius-rounded);
-  padding: var(--Space-x1);
-  justify-content: center;
-  align-items: center;
-  gap: var(--Space-x05);
-  width: max-content;
-  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
-  background-color: var(--Component-Button-Brand-Secondary-Fill-Inverted);
-  border: 2px solid var(--Component-Button-Brand-Secondary-Border-Default);
-  border-radius: var(--Corner-radius-Rounded);
-  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Space-x05);
+
+  padding: var(--Space-x1);
+  width: max-content;
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Inverted);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+  border: 2px solid var(--Component-Button-Brand-Secondary-Border-Default);
+  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
   position: sticky;
   bottom: var(--Space-x2);
 
-  &:hover {
+  @media (hover: hover) {
-    color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+    &:hover {
-    background-color: var(
+      background-color: var(
-      --Component-Button-Brand-Secondary-Fill-Hover-Inverted
+        --Component-Button-Brand-Secondary-Fill-Hover-Inverted
-    );
+      );
+      color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--Border-Interactive-Focus);
+    outline-offset: 2px;
+
+    /* This button is able to be on top of dark background colors, 
+    so we need to create an illusion that it also has an inverted border on focus */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -4px;
+      border: 2px solid var(--Border-Inverted);
+      border-radius: inherit;
+      pointer-events: none;
+    }
   }
 }
 

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>,
+  extends ComponentProps<typeof ButtonRAC>,
-    VariantProps<typeof backToTopButtonVariants> {
+    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
+      <ButtonRAC className={classNames} aria-label={label} {...props}>
-        className={backToTopButtonVariants({ position })}
-        aria-label={label}
-        {...props}
-      >
         <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
         <span className={styles.text}>{label}</span>
       </ButtonRAC>

packages/design-system/lib/components/BackToTopButton/variants.ts

@@ -2,7 +2,7 @@ import { cva } from 'class-variance-authority'
 
 import styles from './backToTopButton.module.css'
 
-export const backToTopButtonVariants = cva(styles.backToTopButton, {
+export const config = {
   variants: {
     position: {
       left: styles.left,
@@ -13,4 +13,6 @@ export const backToTopButtonVariants = cva(styles.backToTopButton, {
   defaultVariants: {
     position: 'right',
   },
-})
+} as const
+
+export const variants = cva(styles.backToTopButton, config)

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { expect, fn } from 'storybook/test'
+import { expect } from 'storybook/test'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { config as typographyConfig } from '../Typography/variants'
@@ -24,42 +24,69 @@ const meta: Meta<typeof Button> = {
       control: 'select',
       options: Object.keys(buttonConfig.variants.variant),
       default: 'Primary',
+      table: {
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.variant,
+        },
+        type: {
+          summary: 'string',
+          detail: Object.keys(buttonConfig.variants.variant).join(' | '),
+        },
+      },
     },
     color: {
       control: 'select',
       options: Object.keys(buttonConfig.variants.color),
-      type: 'string',
+      table: {
-      description:
+        type: {
-        'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
+          summary: 'string',
+          detail: Object.keys(buttonConfig.variants.color).join(' | '),
+        },
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.color,
+        },
+      },
     },
     size: {
       control: 'select',
       options: Object.keys(buttonConfig.variants.size),
-      type: 'string',
+      table: {
-      description: 'The size of the button. Defaults to `Large`.',
+        type: {
+          summary: 'string',
+          detail: Object.keys(buttonConfig.variants.size).join(' | '),
+        },
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.size,
+        },
+      },
     },
     wrapping: {
       control: 'radio',
       options: Object.keys(buttonConfig.variants.wrapping),
       type: 'boolean',
+      table: {
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.wrapping.toString(),
+        },
+      },
       description:
-        'Only applies to variant `Text`. If `true`, the button will keep the default padding set on the buttons. Defaults to `true`.',
+        'Only applies to variant `Text`. If `false`, the button will use smaller padding.',
     },
   },
 }
 
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
 export default meta
 
 type Story = StoryObj<typeof Button>
 
-export const PrimaryDefault: Story = {
+export const Default: Story = {
   args: {
-    onPress: fn(),
+    onPress: () => alert('Primary button pressed!'),
-    children: 'Primary button',
+    children: 'Button',
     typography: 'Body/Paragraph/mdBold',
-    variant: 'Primary',
-    isDisabled: false,
-    isPending: false,
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -67,31 +94,10 @@ export const PrimaryDefault: Story = {
   },
 }
 
-export const PrimaryDisabled: Story = {
-  args: {
-    ...PrimaryDefault.args,
-    isDisabled: true,
-  },
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(0)
-  },
-}
-
-export const PrimaryLoading: Story = {
-  args: {
-    ...PrimaryDefault.args,
-    isPending: true,
-  },
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(0)
-  },
-}
-
 export const PrimaryLarge: Story = {
   args: {
-    ...PrimaryDefault.args,
+    ...Default.args,
+    variant: 'Primary',
     size: 'Large',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -102,7 +108,7 @@ export const PrimaryLarge: Story = {
 
 export const PrimaryMedium: Story = {
   args: {
-    ...PrimaryDefault.args,
+    ...PrimaryLarge.args,
     size: 'Medium',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -113,7 +119,8 @@ export const PrimaryMedium: Story = {
 
 export const PrimarySmall: Story = {
   args: {
-    ...PrimaryDefault.args,
+    ...PrimaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
     size: 'Small',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -122,12 +129,44 @@ export const PrimarySmall: Story = {
   },
 }
 
-export const PrimaryInvertedDefault: Story = {
+export const PrimaryDisabled: Story = {
   args: {
-    onPress: fn(),
+    ...PrimaryLarge.args,
-    children: 'Primary inverted button',
+    isDisabled: true,
-    typography: 'Body/Paragraph/mdBold',
+  },
-    variant: 'Primary',
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
+export const PrimaryLoading: Story = {
+  args: {
+    ...PrimaryLarge.args,
+    isPending: true,
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
+export const PrimaryOnDarkBackground: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryLarge.args,
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
+export const PrimaryInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    size: 'Large',
     color: 'Inverted',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -136,9 +175,35 @@ export const PrimaryInvertedDefault: Story = {
   },
 }
 
-export const PrimaryInvertedDisabled: Story = {
+export const PrimaryInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...PrimaryInvertedDefault.args,
+    ...PrimaryInvertedLarge.args,
+    size: 'Medium',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PrimaryInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PrimaryInvertedDisabled: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryInvertedLarge.args,
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -148,8 +213,9 @@ export const PrimaryInvertedDisabled: Story = {
 }
 
 export const PrimaryInvertedLoading: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...PrimaryInvertedDefault.args,
+    ...PrimaryInvertedLarge.args,
     isPending: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -158,50 +224,35 @@ export const PrimaryInvertedLoading: Story = {
   },
 }
 
-export const PrimaryInvertedLarge: Story = {
+export const SecondaryLarge: Story = {
   args: {
-    ...PrimaryInvertedDefault.args,
+    ...Default.args,
+    variant: 'Secondary',
     size: 'Large',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
 
-export const PrimaryInvertedMedium: Story = {
+export const SecondaryMedium: Story = {
   args: {
-    ...PrimaryInvertedDefault.args,
+    ...SecondaryLarge.args,
     size: 'Medium',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
 
-export const PrimaryInvertedSmall: Story = {
+export const SecondarySmall: Story = {
   args: {
-    ...PrimaryInvertedDefault.args,
+    ...SecondaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
     size: 'Small',
   },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const SecondaryDefault: Story = {
-  args: {
-    onPress: fn(),
-    children: 'Secondary button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Secondary',
-  },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -210,7 +261,7 @@ export const SecondaryDefault: Story = {
 
 export const SecondaryDisabled: Story = {
   args: {
-    ...SecondaryDefault.args,
+    ...SecondaryLarge.args,
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -221,85 +272,9 @@ export const SecondaryDisabled: Story = {
 
 export const SecondaryLoading: Story = {
   args: {
-    ...SecondaryDefault.args,
+    ...SecondaryLarge.args,
     isPending: true,
   },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(0)
-  },
-}
-
-export const SecondaryLarge: Story = {
-  args: {
-    ...SecondaryDefault.args,
-    size: 'Large',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const SecondaryMedium: Story = {
-  args: {
-    ...SecondaryDefault.args,
-    size: 'Medium',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const SecondarySmall: Story = {
-  args: {
-    ...SecondaryDefault.args,
-    size: 'Small',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const SecondaryInvertedDefault: Story = {
-  args: {
-    onPress: fn(),
-    children: 'Secondary inverted button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Secondary',
-    color: 'Inverted',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const SecondaryInvertedDisabled: Story = {
-  args: {
-    ...SecondaryInvertedDefault.args,
-    isDisabled: true,
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(0)
-  },
-}
-
-export const SecondaryInvertedLoading: Story = {
-  args: {
-    ...SecondaryInvertedDefault.args,
-    isPending: true,
-  },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(0)
@@ -307,11 +282,13 @@ export const SecondaryInvertedLoading: Story = {
 }
 
 export const SecondaryInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...SecondaryInvertedDefault.args,
+    ...Default.args,
+    variant: 'Secondary',
+    color: 'Inverted',
     size: 'Large',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -319,11 +296,11 @@ export const SecondaryInvertedLarge: Story = {
 }
 
 export const SecondaryInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...SecondaryInvertedDefault.args,
+    ...SecondaryInvertedLarge.args,
     size: 'Medium',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -331,60 +308,48 @@ export const SecondaryInvertedMedium: Story = {
 }
 
 export const SecondaryInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...SecondaryInvertedDefault.args,
+    ...SecondaryInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
     size: 'Small',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
 
-export const TertiaryDefault: Story = {
+export const SecondaryInvertedDisabled: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    onPress: fn(),
+    ...SecondaryInvertedLarge.args,
-    children: 'Tertiary button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Tertiary',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const TertiaryDisabled: Story = {
-  args: {
-    ...TertiaryDefault.args,
     isDisabled: true,
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
 
-export const TertiaryLoading: Story = {
+export const SecondaryInvertedLoading: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...TertiaryDefault.args,
+    ...SecondaryInvertedLarge.args,
     isPending: true,
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
+
 export const TertiaryLarge: Story = {
   args: {
-    ...TertiaryDefault.args,
+    ...Default.args,
+    variant: 'Tertiary',
     size: 'Large',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -393,10 +358,9 @@ export const TertiaryLarge: Story = {
 
 export const TertiaryMedium: Story = {
   args: {
-    ...TertiaryDefault.args,
+    ...TertiaryLarge.args,
     size: 'Medium',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -405,36 +369,32 @@ export const TertiaryMedium: Story = {
 
 export const TertiarySmall: Story = {
   args: {
-    ...TertiaryDefault.args,
+    ...TertiaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
     size: 'Small',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
 
-export const TextDefault: Story = {
+export const TertiaryDisabled: Story = {
   args: {
-    onPress: fn(),
+    ...TertiaryLarge.args,
-    children: 'Text button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Text',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const TextDisabled: Story = {
-  args: {
-    ...TextDefault.args,
     isDisabled: true,
   },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
 
+export const TertiaryLoading: Story = {
+  args: {
+    ...TertiaryLarge.args,
+    isPending: true,
+  },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(0)
@@ -443,10 +403,10 @@ export const TextDisabled: Story = {
 
 export const TextLarge: Story = {
   args: {
-    ...TextDefault.args,
+    ...Default.args,
+    variant: 'Text',
     size: 'Large',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -455,7 +415,7 @@ export const TextLarge: Story = {
 
 export const TextMedium: Story = {
   args: {
-    ...TextDefault.args,
+    ...TextLarge.args,
     size: 'Medium',
   },
 
@@ -467,7 +427,8 @@ export const TextMedium: Story = {
 
 export const TextSmall: Story = {
   args: {
-    ...TextDefault.args,
+    ...TextLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
     size: 'Small',
   },
 
@@ -477,10 +438,20 @@ export const TextSmall: Story = {
   },
 }
 
+export const TextDisabled: Story = {
+  args: {
+    ...TextLarge.args,
+    isDisabled: true,
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
 export const TextNoWrapping: Story = {
   args: {
-    ...TextDefault.args,
+    ...TextLarge.args,
-    children: 'Text button with wrapping false',
     wrapping: false,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -489,39 +460,14 @@ export const TextNoWrapping: Story = {
   },
 }
 
-export const TextInvertedDefault: Story = {
+export const TextInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    onPress: fn(),
+    ...Default.args,
-    children: 'Text inverted button',
-    typography: 'Body/Paragraph/mdBold',
     variant: 'Text',
     color: 'Inverted',
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(1)
-  },
-}
-
-export const TextInvertedDisabled: Story = {
-  args: {
-    ...TextInvertedDefault.args,
-    isDisabled: true,
-  },
-
-  play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(await canvas.findByRole('button'))
-    expect(args.onPress).toHaveBeenCalledTimes(0)
-  },
-}
-
-export const TextInvertedLarge: Story = {
-  args: {
-    ...TextInvertedDefault.args,
     size: 'Large',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -529,11 +475,11 @@ export const TextInvertedLarge: Story = {
 }
 
 export const TextInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...TextInvertedDefault.args,
+    ...TextInvertedLarge.args,
     size: 'Medium',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
@@ -541,28 +487,39 @@ export const TextInvertedMedium: Story = {
 }
 
 export const TextInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...TextInvertedDefault.args,
+    ...TextInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
     size: 'Small',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
 
+export const TextInvertedDisabled: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextInvertedLarge.args,
+    isDisabled: true,
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
 export const TextWithIcon: Story = {
   args: {
-    onPress: fn(),
+    ...TextLarge.args,
     children: (
       <>
         Text with icon
         <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
       </>
     ),
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Text',
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
@@ -574,19 +531,11 @@ export const TextWithIcon: Story = {
 }
 
 export const TextWithIconInverted: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    onPress: fn(),
+    ...TextWithIcon.args,
-    children: (
-      <>
-        Text with icon
-        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
-      </>
-    ),
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Text',
     color: 'Inverted',
   },
-
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(await canvas.findByRole('button'))
     expect(args.onPress).toHaveBeenCalledTimes(1)

packages/design-system/lib/components/Button/Button.tsx

@@ -1,8 +1,8 @@
 import { Button as ButtonRAC } from 'react-aria-components'
 import { Loading, type LoadingProps } from '../Loading/Loading'
 
-import { variants } from './variants'
 import type { ButtonProps } from './types'
+import { variants } from './variants'
 
 export function Button({
   variant,

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

@@ -1,28 +1,33 @@
 .button {
+  position: relative;
   border-radius: var(--Corner-radius-rounded);
   border-width: 2px;
   border-style: solid;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--Space-x05);
 
-  &:disabled,
   &[data-disabled] {
     cursor: unset;
   }
 
   &[data-pending] {
     cursor: progress;
+    gap: var(--Space-x1);
   }
 
   &:focus-visible {
-    outline: 2px auto -webkit-focus-ring-color;
+    outline: 2px solid var(--Border-Interactive-Focus);
-    outline-offset: 4px;
+    outline-offset: 2px;
   }
 }
 
+.color-inverted:focus-visible {
+  outline-color: var(--Border-Inverted);
+}
+
 .size-large {
   padding: var(--Space-x2) var(--Space-x3);
 }
@@ -41,14 +46,32 @@
   color: var(--Component-Button-Brand-Primary-On-fill-Default);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
+      &:hover,
-      border-color: var(--Component-Button-Brand-Primary-Border-Hover);
+      &.hovered {
-      color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+        background:
+          linear-gradient(
+            0deg,
+            var(--Component-Button-Brand-Primary-Fill-Hover) 0%,
+            var(--Component-Button-Brand-Primary-Fill-Hover) 100%
+          ),
+          var(--Component-Button-Brand-Primary-Fill-Default);
+      }
     }
   }
 
-  &:disabled {
+  /* This variant is able to be on top of dark background colors, 
+  so we need to create an illusion that it also has an inverted border on focus */
+  &:not(.color-inverted):focus-visible::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border: 2px solid var(--Border-Inverted);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &[data-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);
@@ -61,14 +84,21 @@
   color: var(--Component-Button-Inverted-On-fill-Default);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      &:hover,
-      border-color: var(--Component-Button-Inverted-Border-Hover);
+      &.hovered {
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+        background:
+          linear-gradient(
+            0deg,
+            var(--Component-Button-Inverted-Fill-Hover) 0%,
+            var(--Component-Button-Inverted-Fill-Hover) 100%
+          ),
+          var(--Component-Button-Inverted-Fill-Default);
+      }
     }
   }
 
-  &:disabled {
+  &[data-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);
@@ -81,15 +111,17 @@
   color: var(--Component-Button-Brand-Secondary-On-fill-Default);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
+      &:hover,
-      border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
+      &.hovered {
-      color: var(--Component-Button-Brand-Secondary-On-fill-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);
+      }
     }
   }
 
-  &:disabled {
+  &[data-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);
   }
@@ -101,16 +133,19 @@
   color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
+      &:hover,
-      border-color: var(
+      &.hovered {
-        --Component-Button-Brand-Secondary-Border-Hover-inverted
+        background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
-      );
+        border-color: var(
-      color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+          --Component-Button-Brand-Secondary-Border-Hover-inverted
+        );
+        color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+      }
     }
   }
 
-  &:disabled {
+  &[data-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);
@@ -123,14 +158,23 @@
   color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
+      &:hover,
-      border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
+      &.hovered {
-      color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+        background:
+          linear-gradient(
+            0deg,
+            rgba(255, 255, 255, 0.1) 0%,
+            rgba(255, 255, 255, 0.1) 100%
+          ),
+          var(--Component-Button-Brand-Tertiary-Fill-Default);
+        border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
+        color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+      }
     }
   }
 
-  &:disabled {
+  &[data-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);
@@ -143,14 +187,17 @@
   color: var(--Component-Button-Inverted-On-fill-Default);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      background-color: var(--Component-Button-Inverted-Hover);
+      &:hover,
-      border-color: transparent;
+      &.hovered {
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+        background-color: var(--Component-Button-Inverted-Hover);
+        border-color: transparent;
+        color: var(--Component-Button-Inverted-On-fill-Hover);
+      }
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     background-color: var(--Component-Button-Inverted-Disabled);
     border-color: transparent;
     color: var(--Component-Button-Inverted-On-fill-Disabled);
@@ -165,13 +212,15 @@
   padding-right: 0;
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+      &:hover,
-      text-decoration: underline;
+      &.hovered {
+        color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+        text-decoration: underline;
+      }
     }
   }
-
+  &[data-disabled] {
-  &:disabled {
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
     text-decoration: none;
   }
@@ -180,19 +229,21 @@
 .variant-text.no-wrapping {
   padding: var(--Space-x025) 0;
   border-width: 0;
-  border-radius: 0;
 }
 
 .variant-text.color-inverted {
   color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
 
   @media (hover: hover) {
-    &:not(:disabled):hover {
+    &:not([data-disabled]) {
-      color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+      &:hover,
+      &.hovered {
+        color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+      }
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
   }
 }

packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { expect } from 'storybook/test'
+
+import ButtonLink from '.'
+import { config as buttonConfig } from '../Button/variants'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { config as typographyConfig } from '../Typography/variants'
+
+const meta: Meta<typeof ButtonLink> = {
+  title: 'Components/ButtonLink',
+  component: ButtonLink,
+  argTypes: {
+    onClick: {
+      table: {
+        disable: true,
+      },
+    },
+    typography: {
+      control: 'select',
+      options: Object.keys(typographyConfig.variants.variant),
+    },
+    variant: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.variant),
+      default: 'Primary',
+      table: {
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.variant,
+        },
+        type: {
+          summary: 'string',
+          detail: Object.keys(buttonConfig.variants.variant).join(' | '),
+        },
+      },
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.color),
+      table: {
+        type: {
+          summary: 'string',
+          detail: Object.keys(buttonConfig.variants.color).join(' | '),
+        },
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.color,
+        },
+      },
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.size),
+      table: {
+        type: {
+          summary: 'string',
+          detail: Object.keys(buttonConfig.variants.size).join(' | '),
+        },
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.size,
+        },
+      },
+    },
+    wrapping: {
+      control: 'radio',
+      options: Object.keys(buttonConfig.variants.wrapping),
+      type: 'boolean',
+      table: {
+        defaultValue: {
+          summary: buttonConfig.defaultVariants.wrapping.toString(),
+        },
+      },
+      description:
+        'Only applies to variant `Text`. If `false`, the button will use smaller padding.',
+    },
+  },
+}
+
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
+export default meta
+
+type Story = StoryObj<typeof ButtonLink>
+
+export const Default: Story = {
+  args: {
+    onClick: (event) => {
+      event.preventDefault()
+      alert('Button link clicked!')
+    },
+    href: '#',
+    children: 'Button link',
+    typography: 'Body/Paragraph/mdBold',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Primary',
+    size: 'Large',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryMedium: Story = {
+  args: {
+    ...PrimaryLarge.args,
+    size: 'Medium',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimarySmall: Story = {
+  args: {
+    ...PrimaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryOnDarkBackground: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Primary',
+    size: 'Large',
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Primary',
+    color: 'Inverted',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryInvertedLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const PrimaryInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...PrimaryInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Secondary',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryMedium: Story = {
+  args: {
+    ...SecondaryLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondarySmall: Story = {
+  args: {
+    ...SecondaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Secondary',
+    color: 'Inverted',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...SecondaryInvertedLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SecondaryInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...SecondaryInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TertiaryLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Tertiary',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TertiaryMedium: Story = {
+  args: {
+    ...TertiaryLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TertiarySmall: Story = {
+  args: {
+    ...TertiaryLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextLarge: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Text',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextMedium: Story = {
+  args: {
+    ...TextLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextSmall: Story = {
+  args: {
+    ...TextLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextNoWrapping: Story = {
+  args: {
+    ...TextLarge.args,
+    children: 'Text button with wrapping false',
+    wrapping: false,
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextInvertedLarge: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...Default.args,
+    variant: 'Text',
+    color: 'Inverted',
+    size: 'Large',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextInvertedMedium: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextInvertedLarge.args,
+    size: 'Medium',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextInvertedSmall: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextInvertedLarge.args,
+    typography: 'Body/Supporting text (caption)/smBold',
+    size: 'Small',
+  },
+
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextWithIcon: Story = {
+  args: {
+    ...Default.args,
+    variant: 'Text',
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const TextWithIconInverted: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    ...TextWithIcon.args,
+    color: 'Inverted',
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}

packages/design-system/lib/components/ButtonLink/buttonLink.module.css

@@ -1,15 +0,0 @@
-.buttonLink {
-  border-radius: var(--Corner-radius-rounded);
-  border-width: 2px;
-  border-style: solid;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x05);
-
-  &:focus-visible {
-    outline: 2px auto -webkit-focus-ring-color;
-    outline-offset: 4px;
-  }
-}

packages/design-system/lib/components/ButtonLink/index.tsx

@@ -1,16 +1,15 @@
 'use client'
 
-import Link from 'next/link'
+import { type ComponentProps } from 'react'
-import { type ComponentProps, type PropsWithChildren } from 'react'
 
 import { variants } from './variants'
 
 import type { VariantProps } from 'class-variance-authority'
+import Link from 'next/link'
 import { useIntl } from 'react-intl'
 
 export interface ButtonLinkProps
-  extends PropsWithChildren,
+  extends Omit<ComponentProps<typeof Link>, 'color'>,
-    Omit<ComponentProps<typeof Link>, 'color'>,
     VariantProps<typeof variants> {}
 
 export default function ButtonLink({
@@ -22,7 +21,6 @@ export default function ButtonLink({
   className,
   href,
   target,
-  onClick = () => {},
   ...props
 }: ButtonLinkProps) {
   const classNames = variants({
@@ -45,7 +43,6 @@ export default function ButtonLink({
       className={classNames}
       href={href}
       target={target}
-      onClick={onClick}
       title={target === '_blank' ? newTabText : ''}
       {...props}
     />

packages/design-system/lib/components/ButtonLink/variants.ts

@@ -1,7 +1,6 @@
 import { cva } from 'class-variance-authority'
 
 import { withButton } from '../Button'
+import buttonStyles from '../Button/button.module.css'
 
-import styles from './buttonLink.module.css'
+export const variants = cva([buttonStyles.button], withButton({}))
-
-export const variants = cva(styles.buttonLink, withButton({}))

packages/design-system/lib/components/FakeButton/fakeButton.module.css

@@ -1,6 +0,0 @@
-.fakeButton {
-  display: flex;
-  align-items: center;
-  border-radius: var(--Corner-radius-rounded);
-  gap: var(--Space-x05);
-}

packages/design-system/lib/components/FakeButton/index.tsx

@@ -2,14 +2,14 @@
 
 import { variants } from './variants'
 
-import type { VariantProps } from 'class-variance-authority'
+import { cx, type VariantProps } from 'class-variance-authority'
-import type { ComponentProps, PropsWithChildren } from 'react'
+import type { HTMLAttributes } from 'react'
-import type { Button } from 'react-aria-components'
 
 interface FakeButtonProps
-  extends PropsWithChildren,
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,
-    Omit<ComponentProps<typeof Button>, 'children' | 'onPress'>,
+    VariantProps<typeof variants> {
-    VariantProps<typeof variants> {}
+  isDisabled?: boolean
+}
 
 export function FakeButton({
   variant,
@@ -18,6 +18,8 @@ export function FakeButton({
   typography,
   children,
   className,
+  isHovered,
+  isDisabled,
   ...props
 }: FakeButtonProps) {
   const classNames = variants({
@@ -25,13 +27,15 @@ export function FakeButton({
     size,
     variant,
     typography,
+    isHovered,
     className,
   })
 
   return (
     <span
-      className={classNames}
+      className={cx(classNames)}
-      {...(props as React.HTMLProps<HTMLSpanElement>)}
+      data-disabled={isDisabled || undefined}
+      {...props}
     >
       {children}
     </span>

packages/design-system/lib/components/FakeButton/variants.ts

@@ -1,6 +1,16 @@
 import { cva } from 'class-variance-authority'
 
-import styles from './fakeButton.module.css'
 import { withButton } from '../Button'
 
-export const variants = cva(styles.fakeButton, withButton({}))
+import buttonStyles from '../Button/button.module.css'
+
+export const variants = cva(
+  buttonStyles.button,
+  withButton({
+    variants: {
+      isHovered: {
+        true: buttonStyles.hovered,
+      },
+    },
+  })
+)

packages/design-system/lib/components/HotelCard/hotelCard.module.css

@@ -87,19 +87,13 @@
   width: 100%;
 }
 
-.link:hover {
+.link {
-  .fakeButton {
+  text-decoration: none;
-    background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
+  color: inherit;
-    border-color: var(--Component-Button-Brand-Primary-Border-Hover);
-    color: var(--Component-Button-Brand-Primary-On-fill-Hover);
-  }
 
-  .priceCard {
+  &:focus-visible {
-    background: linear-gradient(
+    outline: 2px solid var(--Border-Interactive-Focus);
-      0deg,
+    outline-offset: 2px;
-      var(--Surface-Primary-Hover) 0%,
-      var(--Surface-Primary-Hover) 100%
-    );
   }
 }
 
@@ -113,28 +107,6 @@
   border-radius: var(--Corner-radius-md);
 }
 
-.fakeButton {
-  min-width: 160px;
-  border-radius: var(--Corner-radius-rounded);
-  border-width: 2px;
-  border-style: solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x05);
-
-  padding: 10px var(--Space-x2);
-  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);
-}
-
-.fakeButton.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);
-}
-
 @media screen and (min-width: 768px) and (max-width: 1024px) {
   .imageContainer {
     height: 180px;
@@ -178,10 +150,6 @@
     margin-bottom: var(--Space-x15);
   }
 
-  .pageListing .fakeButton {
-    width: 100%;
-  }
-
   .pageListing .prices {
     width: 260px;
   }

packages/design-system/lib/components/HotelCard/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { cx } from 'class-variance-authority'
+import NextLink from 'next/link'
 import { type ReadonlyURLSearchParams, useSearchParams } from 'next/navigation'
 import { memo, useState } from 'react'
 import { useFocusWithin } from 'react-aria'
@@ -35,6 +35,7 @@ import { HotelType } from '@scandic-hotels/common/constants/hotelType'
 import type { Lang } from '@scandic-hotels/common/constants/language'
 import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
 import { BookingCodeChip } from '../BookingCodeChip'
+import { FakeButton } from '../FakeButton'
 import { TripAdvisorChip } from '../TripAdvisorChip'
 
 type Price = {
@@ -147,6 +148,7 @@ export const HotelCardComponent = memo(
   }: HotelCardProps) => {
     const searchParams = useSearchParams()
     const [isFocusWithin, setIsFocusWithin] = useState(false)
+    const [isPricesHovered, setIsPricesHovered] = useState(false)
     const { focusWithinProps } = useFocusWithin({
       onFocusWithin: onFocusIn,
       onBlurWithin: onFocusOut,
@@ -295,6 +297,8 @@ export const HotelCardComponent = memo(
             hotelId={hotel.id}
             removeBookingCodeFromSearchParams={!!(bookingCode && fullPrice)}
             searchParams={searchParams}
+            onHoverStart={() => setIsPricesHovered(true)}
+            onHoverEnd={() => setIsPricesHovered(false)}
           >
             {!prices ? (
               <NoPriceAvailableCard />
@@ -358,24 +362,20 @@ export const HotelCardComponent = memo(
                     ))}
                   </div>
                 ) : null}
-                {isDisabled ? (
+                <FakeButton
-                  <div className={cx(styles.fakeButton, styles.disabled)}>
+                  variant="Primary"
-                    <Typography variant="Body/Paragraph/mdBold">
+                  size="Medium"
-                      <span>{notEnoughPointsLabel}</span>
+                  isDisabled={!!isDisabled}
-                    </Typography>
+                  typography="Body/Paragraph/mdBold"
-                  </div>
+                  isHovered={isPricesHovered}
-                ) : (
+                >
-                  <div className={styles.fakeButton}>
+                  {isDisabled
-                    <Typography variant="Body/Paragraph/mdBold">
+                    ? notEnoughPointsLabel
-                      <span>
+                    : intl.formatMessage({
-                        {intl.formatMessage({
+                        id: 'common.seeRooms',
-                          id: 'common.seeRooms',
+                        defaultMessage: 'See rooms',
-                          defaultMessage: 'See rooms',
+                      })}
-                        })}
+                </FakeButton>
-                      </span>
-                    </Typography>
-                  </div>
-                )}
               </>
             )}
           </PricesWrapper>
@@ -396,6 +396,8 @@ interface PricesWrapperProps {
   pathname: string
   removeBookingCodeFromSearchParams: boolean
   searchParams: ReadonlyURLSearchParams
+  onHoverStart: () => void
+  onHoverEnd: () => void
 }
 function PricesWrapper({
   children,
@@ -404,6 +406,8 @@ function PricesWrapper({
   pathname,
   removeBookingCodeFromSearchParams,
   searchParams,
+  onHoverStart,
+  onHoverEnd,
 }: PricesWrapperProps) {
   const content = <div className={styles.prices}>{children}</div>
 
@@ -422,8 +426,13 @@ function PricesWrapper({
   const href = `${pathname}?${params.toString()}`
 
   return (
-    <Link href={href} color="none" className={styles.link}>
+    <NextLink
+      href={href}
+      className={styles.link}
+      onMouseEnter={onHoverStart}
+      onMouseLeave={onHoverEnd}
+    >
       {content}
-    </Link>
+    </NextLink>
   )
 }

packages/design-system/lib/components/IconButton/IconButton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { expect, fn } from 'storybook/test'
+import { expect } from 'storybook/test'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { IconButton } from './IconButton'
@@ -15,35 +15,53 @@ const meta: Meta<typeof IconButton> = {
         disable: true,
       },
     },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
     theme: {
       control: 'select',
       options: Object.keys(config.variants.theme),
-      default: 'Primary',
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.theme,
+        },
+        type: {
+          summary: 'string',
+          detail: Object.keys(config.variants.theme).join(' | '),
+        },
+      },
     },
     style: {
       control: 'select',
       options: Object.keys(config.variants.style),
-      default: 'Normal',
+      table: {
-      type: 'string',
+        defaultValue: {
-      description: `The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.`,
+          summary: config.defaultVariants.style,
-    },
+        },
-    wrapping: {
+        type: {
-      control: 'select',
+          summary: 'string',
-      options: Object.keys(config.variants.wrapping),
+          detail: Object.keys(config.variants.style).join(' | '),
-      default: undefined,
+        },
+      },
+      description:
+        'The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.',
     },
   },
 }
 
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
 export default meta
 
 type Story = StoryObj<typeof IconButton>
 
-export const PrimaryDefault: Story = {
+export const Default: Story = {
   args: {
-    onPress: fn(),
+    onPress: () => alert('Icon button pressed!'),
     children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
-    theme: 'Primary',
   },
   play: async ({ canvas, userEvent, args }) => {
     await userEvent.click(canvas.getByRole('button'))
@@ -51,9 +69,20 @@ export const PrimaryDefault: Story = {
   },
 }
 
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    theme: 'Primary',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
+}
+
 export const PrimaryDisabled: Story = {
   args: {
-    ...PrimaryDefault.args,
+    ...Primary.args,
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -62,9 +91,9 @@ export const PrimaryDisabled: Story = {
   },
 }
 
-export const InvertedDefault: Story = {
+export const Inverted: Story = {
   args: {
-    onPress: fn(),
+    ...Default.args,
     children: (
       <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
     ),
@@ -78,7 +107,7 @@ export const InvertedDefault: Story = {
 
 export const InvertedDisabled: Story = {
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -89,7 +118,7 @@ export const InvertedDisabled: Story = {
 
 export const InvertedElevated: Story = {
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     style: 'Elevated',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -110,8 +139,9 @@ export const InvertedElevatedDisabled: Story = {
 }
 
 export const InvertedMuted: Story = {
+  globals: globalStoryPropsInverted,
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
     style: 'Muted',
   },
@@ -123,6 +153,7 @@ export const InvertedMuted: Story = {
 }
 
 export const InvertedMutedDisabled: Story = {
+  globals: globalStoryPropsInverted,
   args: {
     ...InvertedMuted.args,
     isDisabled: true,
@@ -136,7 +167,7 @@ export const InvertedMutedDisabled: Story = {
 
 export const InvertedFaded: Story = {
   args: {
-    ...InvertedDefault.args,
+    ...Inverted.args,
     style: 'Faded',
   },
   play: async ({ canvas, userEvent, args }) => {
@@ -158,7 +189,7 @@ export const InvertedFadedDisabled: Story = {
 
 export const TertiaryElevated: Story = {
   args: {
-    onPress: fn(),
+    ...Default.args,
     children: <MaterialIcon icon="arrow_back" size={24} color="CurrentColor" />,
     theme: 'Tertiary',
     style: 'Elevated',
@@ -182,7 +213,7 @@ export const TertiaryDisabled: Story = {
 
 export const BlackMuted: Story = {
   args: {
-    onPress: fn(),
+    ...Default.args,
     children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
     theme: 'Black',
   },

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

@@ -1,15 +1,21 @@
 .iconButton {
+  position: relative;
   border-radius: var(--Corner-radius-rounded);
   border-width: 0;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
 
-  &:disabled {
+  &[data-disabled] {
     cursor: unset;
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--Border-Interactive-Focus);
+    outline-offset: 2px;
+  }
 }
 
 .theme-primary {
@@ -17,13 +23,30 @@
   color: var(--Component-Button-Brand-Primary-On-fill-Default);
 
   @media (hover: hover) {
-    &:hover:not(:disabled) {
+    &:hover:not([data-disabled]) {
-      background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
+      background:
+        linear-gradient(
+          0deg,
+          var(--Component-Button-Brand-Primary-Fill-Hover) 0%,
+          var(--Component-Button-Brand-Primary-Fill-Hover) 100%
+        ),
+        var(--Component-Button-Brand-Primary-Fill-Default);
       color: var(--Component-Button-Brand-Primary-On-fill-Hover);
     }
   }
 
-  &:disabled {
+  /* This theme is able to be on top of dark background colors, 
+  so we need to create an illusion that it also has an inverted border on focus */
+  &:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border: 2px solid var(--Border-Inverted);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &[data-disabled] {
     background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
     color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
   }
@@ -34,27 +57,37 @@
   color: var(--Component-Button-Inverted-On-fill-Default);
 
   @media (hover: hover) {
-    &:hover:not(:disabled) {
+    &:hover:not([data-disabled]) {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      background:
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+        linear-gradient(
+          0deg,
+          var(--Component-Button-Inverted-Fill-Hover) 0%,
+          var(--Component-Button-Inverted-Fill-Hover) 100%
+        ),
+        var(--Component-Button-Inverted-Fill-Default);
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     background-color: var(--Component-Button-Inverted-Fill-Disabled);
     color: var(--Component-Button-Inverted-On-fill-Disabled);
   }
 
   &.style-muted {
+    background-color: var(--Component-Button-Muted-Fill-Default);
     color: var(--Component-Button-Muted-On-fill-Inverted);
 
     @media (hover: hover) {
       &:hover:not(:disabled) {
-        color: var(--Component-Button-Muted-On-fill-Inverted);
+        background-color: var(--Component-Button-Muted-Fill-Hover);
       }
     }
 
-    &:disabled {
+    &:focus-visible {
+      outline-color: var(--Border-Inverted);
+    }
+
+    &[data-disabled] {
       color: var(--Component-Button-Muted-On-fill-Disabled);
     }
   }
@@ -65,13 +98,19 @@
   color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
 
   @media (hover: hover) {
-    &:hover:not(:disabled) {
+    &:hover:not([data-disabled]) {
-      background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
+      background:
+        linear-gradient(
+          0deg,
+          var(--Component-Button-Brand-Tertiary-Fill-Hover) 0%,
+          var(--Component-Button-Brand-Tertiary-Fill-Hover) 100%
+        ),
+        var(--Component-Button-Brand-Tertiary-Fill-Default);
       color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
     color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
   }
@@ -81,12 +120,12 @@
   color: var(--Component-Button-Muted-On-fill-Default);
 
   @media (hover: hover) {
-    &:hover:not(:disabled) {
+    &:hover:not([data-disabled]) {
       color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     color: var(--Component-Button-Muted-On-fill-Disabled);
   }
 }
@@ -103,12 +142,12 @@
   background-color: var(--Component-Button-Muted-Fill-Default);
 
   @media (hover: hover) {
-    &:hover:not(:disabled) {
+    &:hover:not([data-disabled]) {
       background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
   }
 }

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 {
+    &.previous {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      left: var(--Space-x2);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+    &.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
+          <IconButton
-            className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
+            theme="Inverted"
-            onClick={handlePrev}
+            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>
+          </IconButton>
-          <motion.button
+          <IconButton
-            className={`${styles.navigationButton} ${styles.galleryNextButton}`}
+            theme="Inverted"
-            onClick={handleNext}
+            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}>

packages/design-system/lib/components/TextLink/textLink.module.css

@@ -4,6 +4,11 @@
   justify-content: center;
   gap: var(--Space-x05);
   padding: var(--Space-x025) 0;
+
+  &:focus-visible {
+    outline: 2px solid var(--Border-Interactive-Focus);
+    outline-offset: 2px;
+  }
 }
 
 .disabled {
@@ -31,6 +36,10 @@
   &:hover {
     opacity: 0.7;
   }
+
+  &:focus-visible {
+    outline-color: var(--Border-Inverted);
+  }
 }
 
 .theme-interactive-default:not(.disabled) {