Update styles for kubit

Author: Hector Arce De Las Heras

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

@@ -17,12 +17,14 @@ export const DOT_STYLES: DotStylesType<DotVariantType, DotSizeType> = {
       border_width: BORDERS.border_50,
       border_color: COLORS.ACCENT.color_accent_default_border_150,
       border_style: 'solid',
+      color: COLORS.ACCENT.color_accent_default_font_150,
     },
   },
   [DotVariantType.WITHOUT_BORDER]: {
     container: {
       ...containerCommonProps,
       background_color: COLORS.ACCENT.color_accent_default_bg_100,
+      color: COLORS.ACCENT.color_accent_default_font_150,
     },
   },
   [DotVariantType.ALTERNATIVE]: {
@@ -54,6 +56,7 @@ export const DOT_STYLES: DotStylesType<DotVariantType, DotSizeType> = {
       font_size: PARAGRAPH.CAPTION.DESKTOP.font_size,
       line_height: PARAGRAPH.CAPTION.DESKTOP.line_height,
       font_weight: FONT_WEIGHT.font_weight_600,
+      font_style: 'normal',
     },
   },
   [DotSizeType.BIG]: {
@@ -66,6 +69,7 @@ export const DOT_STYLES: DotStylesType<DotVariantType, DotSizeType> = {
       font_size: PARAGRAPH.CAPTION.DESKTOP.font_size,
       line_height: PARAGRAPH.CAPTION.DESKTOP.line_height,
       font_weight: FONT_WEIGHT.font_weight_600,
+      font_style: 'normal',
     },
   },
 };

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

@@ -55,6 +55,18 @@ const commonProps = {
     font_weight: FONT_WEIGHT.font_weight_400,
     color: COLORS.NEUTRAL.color_neutral_font_50,
   },
+  errorAndHelpMessageContainer: {
+    display: 'flex',
+    flex_direction: 'column',
+    gap: SPACINGS.spacing_150,
+  },
+  helpMessageContainer: {
+    padding: SPACINGS.spacing_0,
+    padding_left: SPACINGS.spacing_0,
+    display: 'flex',
+    flex_direction: 'row',
+    justify_content: 'space-between',
+  },
   helpMessage: {
     text_align: TEXT_ALIGN.left,
     font_weight: FONT_WEIGHT.font_weight_300,
@@ -67,14 +79,6 @@ const commonProps = {
     color: COLORS.SECONDARY.color_secondary_bg_100,
     variant: IconHighlightedVariantType.ROUND,
   },
-  helpMessageContainer: {
-    margin_top: SPACINGS.spacing_100,
-    padding: SPACINGS.spacing_0,
-    padding_left: SPACINGS.spacing_0,
-    display: 'flex',
-    flex_direction: 'row',
-    justify_content: 'space-between',
-  },
   inputIcon: {
     color: COLORS.ACCENT.color_accent_default_icon_100,
     width: SIZES.size_250,
@@ -152,6 +156,10 @@ const errorProps = {
     ...commonProps.inputContainer,
     border_color: COLORS.FEEDBACK.color_feedbackError_border_100,
   },
+  errorAndHelpMessageContainer: {
+    ...commonProps.errorAndHelpMessageContainer,
+    margin_top: SPACINGS.spacing_150,
+  },
   errorMessage: {
     font_variant: TextVariantType.PARAGRAPH_CAPTION_EXPANDED,
     font_weight: FONT_WEIGHT.font_weight_300,
@@ -162,8 +170,6 @@ const errorProps = {
     display: 'flex',
     flex_direction: 'row',
     gap: SPACINGS.spacing_100,
-    margin_top: SPACINGS.spacing_150,
-    margin_bottom: SPACINGS.spacing_150,
     padding_left: SPACINGS.spacing_0,
   },
   errorMessageIcon: {

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

@@ -67,6 +67,10 @@ const commonProps = {
     width: '100%',
     align_items: 'flex-start',
   },
+  linksContainer: {
+    display: 'flex',
+    gap: SPACINGS.spacing_150,
+  },
 };
 
 export const MESSAGE_STYLES: MessageStylesType<MessageVariantType> = {

src/designSystem/kubit/globalStyles/fonts.ts

@@ -13,9 +13,6 @@ import NunitoExtraLight from '../fonts/NunitoSans_10pt-ExtraLight.ttf';
 import NunitoLight from '../fonts/NunitoSans_10pt-Light.ttf';
 import NunitoRegular from '../fonts/NunitoSans_10pt-Regular.ttf';
 import NunitoSemiBold from '../fonts/NunitoSans_10pt-SemiBold.ttf';
-import RobotoMonoBold from '../fonts/RobotoMono-Bold.ttf';
-import RobotoMonoLight from '../fonts/RobotoMono-Light.ttf';
-import RobotoMonoMedium from '../fonts/RobotoMono-Medium.ttf';
 
 export const FONTS_KUBIT_GLOBAL_STYLES = css`
   @font-face {
@@ -54,24 +51,6 @@ export const FONTS_KUBIT_GLOBAL_STYLES = css`
     src: url(${GTAmericaExtendedLight}) format('truetype');
   }
 
-  @font-face {
-    font-family: 'Roboto-Mono Font';
-    font-weight: 700;
-    src: url(${RobotoMonoBold}) format('truetype');
-  }
-
-  @font-face {
-    font-family: 'Roboto-Mono Font';
-    font-weight: 300;
-    src: url(${RobotoMonoLight}) format('truetype');
-  }
-
-  @font-face {
-    font-family: 'Roboto-Mono Font';
-    font-weight: 400;
-    src: url(${RobotoMonoMedium}) format('truetype');
-  }
-
   @font-face {
     font-family: 'Nunito-Sans Font';
     font-weight: 200;