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

@@ -3,13 +3,13 @@ import { cx } from 'class-variance-authority'
 import { Typography } from '../../Typography'
 import { Rate, RateTermDetails } from '../types'
 
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
 import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
-import { Button as ButtonRAC } from 'react-aria-components'
-import { useIntl } from 'react-intl'
 
 interface CampaignRateCardProps {
   id: string
@@ -79,9 +79,9 @@ export default function CampaignRateCard({
               subtitle={paymentTerm}
               trigger={
                 <IconButton
-                  theme="Black"
-                  style="Muted"
-                  wrapping
+                  variant="Muted"
+                  emphasis
+                  size="sm"
                   className={styles.triggerButton}
                   aria-label={intl.formatMessage({
                     id: 'selectRate.rateCard.openReservationPolicy',

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -1,14 +1,14 @@
 import { Rate, RateTermDetails } from '../types'
 
+import { cx } from 'class-variance-authority'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
 import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
-import { Button as ButtonRAC } from 'react-aria-components'
-import { cx } from 'class-variance-authority'
-import { useIntl } from 'react-intl'
 
 interface CodeRateCardProps {
   id: string
@@ -69,9 +69,9 @@ export default function CodeRateCard({
               subtitle={paymentTerm}
               trigger={
                 <IconButton
-                  theme="Black"
-                  style="Muted"
-                  wrapping
+                  variant="Muted"
+                  emphasis
+                  size="sm"
                   className={styles.triggerButton}
                   aria-label={intl.formatMessage({
                     id: 'selectRate.rateCard.openReservationPolicy',

packages/design-system/lib/components/RateCard/Modal/index.tsx

@@ -3,9 +3,9 @@
 import { AnimatePresence, motion } from 'motion/react'
 import { type PropsWithChildren, useEffect, useState } from 'react'
 import {
+  Modal as AriaModal,
   Dialog,
   DialogTrigger,
-  Modal as AriaModal,
   ModalOverlay,
 } from 'react-aria-components'
 
@@ -17,11 +17,11 @@ import {
 } from './modal'
 import { fade, slideInOut } from './motionVariants'
 
-import styles from './modal.module.css'
-import { Typography } from '../../Typography'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { IconButton } from '../../IconButton'
 import { useIntl } from 'react-intl'
+import { IconButton } from '../../IconButton'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
+import styles from './modal.module.css'
 
 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -91,8 +91,8 @@ function InnerModal({
                     )}
                   </div>
                   <IconButton
-                    theme="Black"
-                    style="Muted"
+                    variant="Muted"
+                    emphasis
                     onPress={close}
                     aria-label={intl.formatMessage({
                       id: 'common.close',

packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx

@@ -34,7 +34,7 @@ export default function NoRateAvailableCard({
         <header>
           <Typography variant="Tag/sm">
             <h3 className={`${styles.title} ${styles.textDisabled}`}>
-              <IconButton theme="Black" style="Muted">
+              <IconButton variant="Muted" emphasis size="sm">
                 <MaterialIcon icon="info" size={20} color="Icon/Default" />
               </IconButton>
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -2,13 +2,13 @@ import { Typography } from '../../Typography'
 import { RatePointsOption, RateTermDetails } from '../types'
 
 import { RadioGroup } from 'react-aria-components'
+import { useIntl } from 'react-intl'
 import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Radio } from '../../Radio'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
-import { useIntl } from 'react-intl'
 
 interface PointsRateCardProps {
   rateTitle: string
@@ -56,9 +56,9 @@ export default function PointsRateCard({
                 subtitle={paymentTerm}
                 trigger={
                   <IconButton
-                    theme="Black"
-                    style="Muted"
-                    wrapping
+                    variant="Muted"
+                    emphasis
+                    size="sm"
                     aria-label={intl.formatMessage({
                       id: 'selectRate.rateCard.openReservationPolicy',
                       defaultMessage: 'Open reservation policy',

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -1,14 +1,14 @@
 import { Rate, RateTermDetails } from '../types'
 
+import { cx } from 'class-variance-authority'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
 import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 import Modal from '../Modal'
 import styles from '../rate-card.module.css'
 import { variants } from '../variants'
-import { Button as ButtonRAC } from 'react-aria-components'
-import { cx } from 'class-variance-authority'
-import { useIntl } from 'react-intl'
 
 interface RegularRateCardProps {
   id: string
@@ -64,9 +64,9 @@ export default function RegularRateCard({
               subtitle={paymentTerm}
               trigger={
                 <IconButton
-                  theme="Black"
-                  style="Muted"
-                  wrapping
+                  variant="Muted"
+                  emphasis
+                  size="sm"
                   className={styles.triggerButton}
                   aria-label={intl.formatMessage({
                     id: 'selectRate.rateCard.openReservationPolicy',