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

apps/scandic-web/components/Carousel/CarouselNavigation.tsx

@@ -22,8 +22,7 @@ export function CarouselPrevious({ className }: CarouselButtonProps) {
   return (
     <span className={cx(styles.buttonWrapper, styles.previous, className)}>
       <IconButton
-        theme="Inverted"
-        style="Elevated"
+        variant="Elevated"
         onPress={scrollPrev}
         aria-label={intl.formatMessage({
           id: "carousel.previousSlide",
@@ -46,8 +45,7 @@ export function CarouselNext({ className }: CarouselButtonProps) {
   return (
     <span className={cx(styles.buttonWrapper, styles.next, className)}>
       <IconButton
-        theme="Inverted"
-        style="Elevated"
+        variant="Elevated"
         onPress={scrollNext}
         aria-label={intl.formatMessage({
           id: "carousel.nextSlide",

apps/scandic-web/components/Carousel/carousel.module.css

@@ -18,7 +18,7 @@
 }
 
 .item:focus-visible {
-  outline: 2px auto -webkit-focus-ring-color;
+  outline: 2px auto var(--Border-Interactive-Focus);
   outline-offset: 1px;
 }
 .buttonWrapper {