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/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',
-      description:
-        'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
+      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),
-      type: 'string',
-      description: 'The size of the button. Defaults to `Large`.',
+      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 `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(),
-    children: 'Primary button',
+    onPress: () => alert('Primary button pressed!'),
+    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(),
-    children: 'Primary inverted button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Primary',
+    ...PrimaryLarge.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: {
+    ...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(),
-    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,
+    ...SecondaryInvertedLarge.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(),
-    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,
+    ...TertiaryLarge.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,
-    children: 'Text button with wrapping false',
+    ...TextLarge.args,
     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(),
-    children: 'Text inverted button',
-    typography: 'Body/Paragraph/mdBold',
+    ...Default.args,
     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(),
-    children: (
-      <>
-        Text with icon
-        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
-      </>
-    ),
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Text',
+    ...TextWithIcon.args,
     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-offset: 4px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+    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 {
-      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);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        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 {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
-      border-color: var(--Component-Button-Inverted-Border-Hover);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        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 {
-      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);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        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 {
-    background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
+  &[data-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 {
-      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);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        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);
+      }
     }
   }
 
-  &: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 {
-      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);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        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 {
-      background-color: var(--Component-Button-Inverted-Hover);
-      border-color: transparent;
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        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 {
-      color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
-      text-decoration: underline;
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+        text-decoration: underline;
+      }
     }
   }
-
-  &:disabled {
+  &[data-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 {
-      color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+    &:not([data-disabled]) {
+      &:hover,
+      &.hovered {
+        color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+      }
     }
   }
 
-  &:disabled {
+  &[data-disabled] {
     color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
   }
 }