Include new styles for carousel and actionBottomSheet

Author: Kubit

src/designSystem/kubit/components/actionBottomSheet/styles.ts

@@ -20,7 +20,7 @@ const ACTION_BUTTON_SHEET_TOKENS = {
     box_shadow: SHADOW.shadow_10,
     background_color: COLORS.NEUTRAL.color_neutral_bg_250,
     border_radius: `${RADIUS.radius_50} ${RADIUS.radius_50} ${RADIUS.radius_00} ${RADIUS.radius_00}`,
-    padding: `${SPACINGS.spacing_0} ${SPACINGS.spacing_300} ${SPACINGS.spacing_400}`,
+    padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_250} ${SPACINGS.spacing_250}`,
     display: 'flex',
     flex_direction: 'column',
     overflow_y: 'auto',
@@ -83,6 +83,10 @@ const ACTION_BUTTON_SHEET_TOKENS = {
   content: {
     max_height: '100vh',
   },
+  dragIconContainer: {
+    display: 'flex',
+    justify_content: 'center',
+  },
 };
 
 export const ACTION_BOTTOM_SHEET_STYLES: ActionBottomSheetStylesType<ActionBottomSheetVariantType> =

src/designSystem/kubit/components/carousel/styles.ts

@@ -3,6 +3,14 @@ import { CarouselArrowStateType, CarouselStylesType } from '@/components/carouse
 import { COLORS, SIZES, SPACINGS } from '../../foundations';
 import { CarouselVariantType } from './variants';
 
+const iconContainerTokens = {
+  display: 'flex',
+  align_items: 'center',
+  position: 'relative',
+  width: SIZES.size_250,
+  height: SIZES.size_250,
+};
+
 export const CAROUSEL_STYLES: CarouselStylesType<CarouselVariantType> = {
   [CarouselVariantType.DEFAULT]: {
     container: {
@@ -26,10 +34,34 @@ export const CAROUSEL_STYLES: CarouselStylesType<CarouselVariantType> = {
     },
     [CarouselArrowStateType.DEFAULT]: {
       arrowLeftIconContainer: {
-        width: SPACINGS.spacing_400,
+        ...iconContainerTokens,
+      },
+      arrowRightIconContainer: {
+        ...iconContainerTokens,
+      },
+    },
+    [CarouselArrowStateType.HOVER]: {
+      arrowLeftIconContainer: {
+        ...iconContainerTokens,
+      },
+      arrowRightIconContainer: {
+        ...iconContainerTokens,
+      },
+    },
+    [CarouselArrowStateType.PRESSED]: {
+      arrowLeftIconContainer: {
+        ...iconContainerTokens,
+      },
+      arrowRightIconContainer: {
+        ...iconContainerTokens,
+      },
+    },
+    [CarouselArrowStateType.DISABLED]: {
+      arrowLeftIconContainer: {
+        ...iconContainerTokens,
       },
       arrowRightIconContainer: {
-        width: SPACINGS.spacing_400,
+        ...iconContainerTokens,
       },
     },
   },