Feat/BOOK-293 button adjustments

* feat(BOOK-293): Adjusted padding of the buttons to match Figma design
* feat(BOOK-293): Updated variants for IconButton
* feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color
* feat(BOOK-293): Replaced buttons inside booking widget

Approved-by: Christel Westerberg

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

@@ -2,81 +2,31 @@ import { cva } from 'class-variance-authority'
 
 import styles from './iconButton.module.css'
 
-const variantKeys = {
-  theme: {
-    Primary: 'Primary',
-    Tertiary: 'Tertiary',
-    Inverted: 'Inverted',
-    Black: 'Black',
+export const config = {
+  variants: {
+    variant: {
+      Filled: styles['variant-filled'],
+      Outlined: styles['variant-outlined'],
+      Elevated: styles['variant-elevated'],
+      Faded: styles['variant-faded'],
+      Muted: styles['variant-muted'],
+    },
+    emphasis: {
+      true: styles['emphasis'],
+      false: undefined,
+    },
+    size: {
+      xl: styles['size-xl'],
+      lg: styles['size-lg'],
+      md: styles['size-md'],
+      sm: styles['size-sm'],
+    },
   },
-  style: {
-    Normal: 'Normal',
-    Muted: 'Muted',
-    Elevated: 'Elevated',
-    Faded: 'Faded',
+  defaultVariants: {
+    variant: 'Filled',
+    size: 'lg',
+    emphasis: false,
   },
 } as const
 
-export const config = {
-  variants: {
-    theme: {
-      [variantKeys.theme.Primary]: styles['theme-primary'],
-      [variantKeys.theme.Tertiary]: styles['theme-tertiary'],
-      [variantKeys.theme.Inverted]: styles['theme-inverted'],
-      [variantKeys.theme.Black]: styles['theme-black'],
-    },
-    // Some variants cannot be used in combination with certain style variants.
-    // The style variant will be applied using the compoundVariants.
-    style: {
-      [variantKeys.style.Normal]: '',
-      [variantKeys.style.Muted]: '',
-      [variantKeys.style.Elevated]: '',
-      [variantKeys.style.Faded]: '',
-    },
-    wrapping: {
-      true: styles['no-wrapping'],
-      false: undefined,
-    },
-  },
-  compoundVariants: [
-    // Primary should only use Normal
-    { theme: variantKeys.theme.Primary, className: styles['style-normal'] },
-
-    // Tertiary should only use Elevated
-    {
-      theme: variantKeys.theme.Tertiary,
-      className: styles['style-elevated'],
-    },
-
-    // Black should only use Muted
-    { theme: variantKeys.theme.Black, className: styles['style-muted'] },
-
-    // Inverted can use any style variant
-    {
-      theme: variantKeys.theme.Inverted,
-      style: variantKeys.style.Normal,
-      className: styles['style-normal'],
-    },
-    {
-      theme: variantKeys.theme.Inverted,
-      style: variantKeys.style.Muted,
-      className: styles['style-muted'],
-    },
-    {
-      theme: variantKeys.theme.Inverted,
-      style: variantKeys.style.Elevated,
-      className: styles['style-elevated'],
-    },
-    {
-      theme: variantKeys.theme.Inverted,
-      style: variantKeys.style.Faded,
-      className: styles['style-faded'],
-    },
-  ],
-  defaultVariants: {
-    theme: variantKeys.theme.Primary,
-    style: variantKeys.style.Normal,
-  },
-}
-
 export const variants = cva(styles.iconButton, config)