sapo-components-ui-rn 1.0.0

package/src/styles/themes/tokens.tsx

@@ -0,0 +1,481 @@
+import { Platform, StyleSheet, Dimensions } from "react-native";
+import blue from "../../theme/blue";
+import green from "../../theme/green";
+import ink from "../../theme/ink";
+import purple from "../../theme/purple";
+import red from "../../theme/red";
+import white from "../../theme/white";
+import yellow from "../../theme/yellow";
+import type { Font } from "../../types";
+
+const ref = {
+  palette: {
+    dark: {
+      colors: {
+        primary: blue.BLUE100,
+        background: ink.INK100,
+        card: white.WHITE100,
+        text: white.WHITE100,
+        border: ink.INK10,
+        gray: ink.INK60,
+        backgroundLight: ink.INK80,
+        //new theme colors
+        backgroundPrimary: ink.INK100,
+        backgroundSecondary: white.WHITE100,
+        borderBrandDefault: blue.BLUE100,
+        borderCriticalDefault: red.RED100,
+        borderCriticalHover: red.RED80,
+        borderCriticalPressed: red.RED120,
+        borderErrorDefault: red.RED100,
+        borderInfoDefault: blue.BLUE100,
+        borderPrimaryDefault: ink.INK10,
+        borderPrimaryDisabled: ink.INK10,
+        borderPrimaryHovered: ink.INK20,
+        borderPrimaryInverseDefault: blue.BLUE100,
+        borderPrimaryPressed: blue.BLUE100,
+        borderSuccessDefault: green.GREEN100,
+        borderWarningDefault: yellow.YELLOW100,
+        iconBrandDefault: blue.BLUE100,
+        iconCriticalDefault: red.RED100,
+        iconErrorDefault: red.RED100,
+        iconInfoDefault: blue.BLUE100,
+        iconPrimaryDefault: ink.INK40,
+        iconPrimaryHover: ink.INK60,
+        iconPrimaryDisabled: ink.INK60,
+        iconPrimaryInverseDefault: white.WHITE100,
+        iconPrimaryInverseHover: white.WHITE80,
+        iconPrimaryInversePressed: white.WHITE80,
+        iconPrimaryPressed: ink.INK60,
+        iconSuccessDefault: green.GREEN100,
+        iconWarningDefault: yellow.YELLOW100,
+        surfaceBrandDefault: blue.BLUE100,
+        surfaceBrandDisabled: ink.INK10,
+        surfaceBrandHover: blue.BLUE80,
+        surfaceBrandInverseDefault: blue.BLUE10,
+        surfaceBrandInverseHover: blue.BLUE20,
+        surfaceBrandInversePressed: blue.BLUE40,
+        surfaceBrandPressed: blue.BLUE120,
+        surfaceCriticalDefault: red.RED100,
+        surfaceCriticalDisabled: ink.INK10,
+        surfaceCriticalHover: red.RED80,
+        surfaceCriticalInverseDefault: red.RED10,
+        surfaceCriticalInverseHover: red.RED20,
+        surfaceCriticalInversePressed: red.RED40,
+        surfaceCriticalPressed: red.RED120,
+        surfaceErrorDefault: red.RED100,
+        surfaceErrorDisabled: ink.INK10,
+        surfaceErrorHover: red.RED80,
+        surfaceErrorInverseDefault: red.RED10,
+        surfaceErrorInverseHover: red.RED20,
+        surfaceErrorInversePressed: red.RED40,
+        surfaceErrorPressed: red.RED_STATUS,
+        surfaceInfoDefault: blue.BLUE100,
+        surfaceInfoDisabled: ink.INK10,
+        surfaceInfoHover: blue.BLUE80,
+        surfaceInfoInverseDefault: blue.BLUE10,
+        surfaceInfoInverseHover: blue.BLUE20,
+        surfaceInfoInversePressed: blue.BLUE40,
+        surfaceInfoPressed: blue.BLUE120,
+        surfacePrimaryDefault: white.WHITE100,
+        surfacePrimaryDisabled: ink.INK10,
+        surfacePrimaryHover: ink.INK5,
+        surfacePrimaryInverseDefault: ink.INK80,
+        surfacePrimaryInverseHover: ink.INK60,
+        surfacePrimaryInversePressed: ink.INK40,
+        surfacePrimaryPressed: ink.INK10,
+        surfaceSecondaryDefault: ink.INK5,
+        surfaceSecondaryDisabled: ink.INK10,
+        surfaceSecondaryHover: ink.INK10,
+        surfaceSecondaryPressed: ink.INK20,
+        surfaceSuccessDefault: green.GREEN100,
+        surfaceSuccessDisabled: ink.INK10,
+        surfaceSuccessHover: green.GREEN80,
+        surfaceSuccessInverseDefault: green.GREEN10,
+        surfaceSuccessInverseHover: green.GREEN20,
+        surfaceSuccessInversePressed: green.GREEN40,
+        surfaceSuccessPressed: green.GREEN_STATUS,
+        surfaceWarningDefault: yellow.YELLOW100,
+        surfaceWarningDisabled: ink.INK10,
+        surfaceWarningHover: yellow.YELLOW80,
+        surfaceWarningInverseDefault: yellow.YELLOW10,
+        surfaceWarningInverseHover: yellow.YELLOW20,
+        surfaceWarningInversePressed: yellow.YELLOW40,
+        surfaceWarningPressed: yellow.YELLOW120,
+        textDefault: ink.INK5,
+        textDisabled: ink.INK20,
+        textPlaceholder: ink.INK40,
+        textSecondary: ink.INK60,
+        textBrandDefault: blue.BLUE100,
+        textBrandDisabled: ink.INK20,
+        textBrandHovered: blue.BLUE80,
+        textBrandPressed: blue.BLUE120,
+        textCriticalDefault: red.RED100,
+        textCriticalDisabled: ink.INK20,
+        textCriticalHovered: red.RED80,
+        textCriticalPressed: red.RED_STATUS,
+        textErrorDefault: red.RED100,
+        textErrorDisabled: ink.INK20,
+        textErrorHovered: red.RED80,
+        textErrorPressed: red.RED_STATUS,
+        textInfoDefault: blue.BLUE100,
+        textInfoDisabled: ink.INK20,
+        textInfoHovered: blue.BLUE80,
+        textInfoPressed: blue.BLUE120,
+        textLinkDefault: blue.BLUE100,
+        textLinkDisabled: ink.INK20,
+        textLinkHovered: blue.BLUE80,
+        textLinkPressed: blue.BLUE120,
+        textLinkVisitedDefault: purple.PURPLE100,
+        textLinkVisitedDisabled: purple.PURPLE_BG,
+        textLinkVisitedHovered: purple.PURPLE_BG,
+        textLinkVisitedPressed: purple.PURPLE_BG,
+        textOnFillDefault: white.WHITE100,
+        textOnFillDisabled: white.WHITE20,
+        textOnFillHovered: white.WHITE80,
+        textOnFillPressed: white.WHITE80,
+        textSuccessDefault: green.GREEN100,
+        textSuccessDisabled: ink.INK20,
+        textSuccessHovered: green.GREEN80,
+        textSuccessPressed: green.GREEN_STATUS,
+        textWarningDefault: yellow.YELLOW100,
+        textWarningDisabled: ink.INK20,
+        textWarningHovered: yellow.YELLOW80,
+        textWarningPressed: yellow.YELLOW_STATUS,
+        selectBackgroundDisabled: white.WHITE40,
+        selectIconDisabled: white.WHITE40,
+      },
+    },
+    light: {
+      colors: {
+        primary: blue.BLUE100,
+        background: white.WHITE100,
+        card: ink.INK100,
+        text: ink.INK100,
+        border: ink.INK40,
+        gray: ink.INK60,
+        backgroundLight: ink.INK10,
+        //new theme colors
+        backgroundPrimary: ink.INK5,
+        backgroundSecondary: white.WHITE100,
+        borderBrandDefault: blue.BLUE100,
+        borderCriticalDefault: red.RED100,
+        borderCriticalHover: red.RED80,
+        borderCriticalPressed: red.RED120,
+        borderErrorDefault: red.RED100,
+        borderInfoDefault: blue.BLUE100,
+        borderPrimaryDefault: ink.INK10,
+        borderPrimaryDisabled: ink.INK10,
+        borderPrimaryHovered: ink.INK20,
+        borderPrimaryInverseDefault: blue.BLUE100,
+        borderPrimaryPressed: blue.BLUE100,
+        borderSuccessDefault: green.GREEN100,
+        borderWarningDefault: yellow.YELLOW100,
+        iconBrandDefault: blue.BLUE100,
+        iconCriticalDefault: red.RED100,
+        iconErrorDefault: red.RED100,
+        iconInfoDefault: blue.BLUE100,
+        iconPrimaryDefault: ink.INK40,
+        iconPrimaryHover: ink.INK60,
+        iconPrimaryDisabled: ink.INK60,
+        iconPrimaryInverseDefault: white.WHITE100,
+        iconPrimaryInverseHover: white.WHITE80,
+        iconPrimaryInversePressed: white.WHITE80,
+        iconPrimaryPressed: ink.INK60,
+        iconSuccessDefault: green.GREEN100,
+        iconWarningDefault: yellow.YELLOW100,
+        surfaceBrandDefault: blue.BLUE100,
+        surfaceBrandDisabled: ink.INK10,
+        surfaceBrandHover: blue.BLUE80,
+        surfaceBrandInverseDefault: blue.BLUE10,
+        surfaceBrandInverseHover: blue.BLUE20,
+        surfaceBrandInversePressed: blue.BLUE40,
+        surfaceBrandPressed: blue.BLUE120,
+        surfaceCriticalDefault: red.RED100,
+        surfaceCriticalDisabled: ink.INK10,
+        surfaceCriticalHover: red.RED80,
+        surfaceCriticalInverseDefault: red.RED10,
+        surfaceCriticalInverseHover: red.RED20,
+        surfaceCriticalInversePressed: red.RED40,
+        surfaceCriticalPressed: red.RED120,
+        surfaceErrorDefault: red.RED100,
+        surfaceErrorDisabled: ink.INK10,
+        surfaceErrorHover: red.RED80,
+        surfaceErrorInverseDefault: red.RED10,
+        surfaceErrorInverseHover: red.RED20,
+        surfaceErrorInversePressed: red.RED40,
+        surfaceErrorPressed: red.RED_STATUS,
+        surfaceInfoDefault: blue.BLUE100,
+        surfaceInfoDisabled: ink.INK10,
+        surfaceInfoHover: blue.BLUE80,
+        surfaceInfoInverseDefault: blue.BLUE10,
+        surfaceInfoInverseHover: blue.BLUE20,
+        surfaceInfoInversePressed: blue.BLUE40,
+        surfaceInfoPressed: blue.BLUE120,
+        surfacePrimaryDefault: white.WHITE100,
+        surfacePrimaryDisabled: ink.INK5,
+        surfacePrimaryHover: ink.INK5,
+        surfacePrimaryInverseDefault: ink.INK80,
+        surfacePrimaryInverseHover: ink.INK60,
+        surfacePrimaryInversePressed: ink.INK40,
+        surfacePrimaryPressed: ink.INK10,
+        surfaceSecondaryDefault: ink.INK5,
+        surfaceSecondaryDisabled: ink.INK5,
+        surfaceSecondaryHover: ink.INK10,
+        surfaceSecondaryPressed: ink.INK20,
+        surfaceSuccessDefault: green.GREEN100,
+        surfaceSuccessDisabled: ink.INK10,
+        surfaceSuccessHover: green.GREEN80,
+        surfaceSuccessInverseDefault: green.GREEN10,
+        surfaceSuccessInverseHover: green.GREEN20,
+        surfaceSuccessInversePressed: green.GREEN40,
+        surfaceSuccessPressed: green.GREEN_STATUS,
+        surfaceWarningDefault: yellow.YELLOW100,
+        surfaceWarningDisabled: ink.INK10,
+        surfaceWarningHover: yellow.YELLOW80,
+        surfaceWarningInverseDefault: yellow.YELLOW10,
+        surfaceWarningInverseHover: yellow.YELLOW20,
+        surfaceWarningInversePressed: yellow.YELLOW40,
+        surfaceWarningPressed: yellow.YELLOW120,
+        textDefault: ink.INK100,
+        textDisabled: ink.INK20,
+        textPlaceholder: ink.INK40,
+        textSecondary: ink.INK60,
+        textBrandDefault: blue.BLUE100,
+        textBrandDisabled: ink.INK20,
+        textBrandHovered: blue.BLUE80,
+        textBrandPressed: blue.BLUE120,
+        textCriticalDefault: red.RED100,
+        textCriticalDisabled: ink.INK20,
+        textCriticalHovered: red.RED80,
+        textCriticalPressed: red.RED_STATUS,
+        textErrorDefault: red.RED100,
+        textErrorDisabled: ink.INK20,
+        textErrorHovered: red.RED80,
+        textErrorPressed: red.RED_STATUS,
+        textInfoDefault: blue.BLUE100,
+        textInfoDisabled: ink.INK20,
+        textInfoHovered: blue.BLUE80,
+        textInfoPressed: blue.BLUE120,
+        textLinkDefault: blue.BLUE100,
+        textLinkDisabled: ink.INK20,
+        textLinkHovered: blue.BLUE80,
+        textLinkPressed: blue.BLUE120,
+        textLinkVisitedDefault: purple.PURPLE100,
+        textLinkVisitedDisabled: purple.PURPLE_BG,
+        textLinkVisitedHovered: purple.PURPLE_BG,
+        textLinkVisitedPressed: purple.PURPLE_BG,
+        textOnFillDefault: white.WHITE100,
+        textOnFillDisabled: white.WHITE20,
+        textOnFillHovered: white.WHITE80,
+        textOnFillPressed: white.WHITE80,
+        textSuccessDefault: green.GREEN100,
+        textSuccessDisabled: ink.INK20,
+        textSuccessHovered: green.GREEN80,
+        textSuccessPressed: green.GREEN_STATUS,
+        textWarningDefault: yellow.YELLOW100,
+        textWarningDisabled: ink.INK20,
+        textWarningHovered: yellow.YELLOW80,
+        textWarningPressed: yellow.YELLOW_STATUS,
+        selectBackgroundDisabled: white.WHITE40,
+        selectIconDisabled: white.WHITE40,
+      },
+    },
+  },
+
+  typeface: {
+    brandRegular: Platform.select({
+      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      ios: "System",
+      default: "sans-serif",
+    }),
+    weightRegular: "400" as Font["fontWeight"],
+
+    plainMedium: Platform.select({
+      web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      ios: "System",
+      default: "sans-serif-medium",
+    }),
+    weightMedium: "500" as Font["fontWeight"],
+  },
+
+  opacity: {
+    level1: 0.08,
+    level2: 0.12,
+    level3: 0.16,
+    level4: 0.38,
+  },
+};
+
+const regularType = {
+  fontFamily: ref.typeface.brandRegular,
+  letterSpacing: 0,
+  fontWeight: ref.typeface.weightRegular,
+};
+
+const mediumType = {
+  fontFamily: ref.typeface.plainMedium,
+  letterSpacing: 0.15,
+  fontWeight: ref.typeface.weightMedium,
+};
+
+export const typescale = {
+  displayLarge: {
+    ...regularType,
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMedium: {
+    ...regularType,
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmall: {
+    ...regularType,
+    lineHeight: 44,
+    fontSize: 36,
+  },
+
+  headlineLarge: {
+    ...regularType,
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMedium: {
+    ...regularType,
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmall: {
+    ...regularType,
+    lineHeight: 32,
+    fontSize: 24,
+  },
+
+  titleLarge: {
+    ...regularType,
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMedium: {
+    ...mediumType,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmall: {
+    ...mediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+
+  labelLarge: {
+    ...mediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMedium: {
+    ...mediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmall: {
+    ...mediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 11,
+  },
+
+  bodyLarge: {
+    ...mediumType,
+    fontWeight: ref.typeface.weightRegular,
+    fontFamily: ref.typeface.brandRegular,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMedium: {
+    ...mediumType,
+    fontWeight: ref.typeface.weightRegular,
+    fontFamily: ref.typeface.brandRegular,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmall: {
+    ...mediumType,
+    fontWeight: ref.typeface.weightRegular,
+    fontFamily: ref.typeface.brandRegular,
+    letterSpacing: 0.4,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+
+  default: {
+    ...regularType,
+  },
+};
+
+export const tokens = {
+  md: {
+    ref,
+    sys: {
+      typescale,
+    },
+  },
+};
+
+export const ThemeColors = ref.palette;
+
+export const CONSTANTS = {
+  DEVICE_HEIGHT: Dimensions.get("window").height,
+  DEVICE_WIDTH: Dimensions.get("window").width,
+  HEADER_HEIGHT: 50,
+  BUTTON_HEIGHT: 48,
+  BUTTON_HEIGHT_SMALL: 40,
+  RADIO_BUTTON_HEIGHT: 20,
+
+  SPACE_0: 0,
+  SPACE_2: 2,
+  SPACE_4: 4,
+  SPACE_6: 6,
+  SPACE_8: 8,
+  SPACE_12: 12,
+  SPACE_16: 16,
+  SPACE_20: 20,
+  SPACE_24: 24,
+  SPACE_28: 28,
+  SPACE_32: 32,
+  SPACE_36: 36,
+  SPACE_40: 40,
+  SPACE_48: 48,
+  SPACE_64: 64,
+  SPACE_80: 80,
+  SPACE_96: 96,
+  SPACE_112: 112,
+  SPACE_128: 128,
+  SPACE_BUTTON_GAP: 8,
+  SPACE_CARD_PADDING: 4,
+  SPACE_CARD_GAP: 12,
+
+  //MARK: Border radius
+  BORDER_RADIUS_6: 6,
+  BORDER_RADIUS_8: 8,
+  BORDER_RADIUS_12: 12,
+  BORDER_RADIUS_ROUNDED: 36,
+
+  //MARK: Border width
+  BORDER_WIDTH_05: StyleSheet.hairlineWidth, //0.3-0.5
+  BORDER_WIDTH_1: 1,
+  BORDER_WIDTH_2: 2,
+  BORDER_WIDTH_4: 4,
+
+  //MARK: Font weight
+  FONT_WEIGHT_LIGHT: "300",
+  FONT_WEIGHT_REGULAR: "400",
+  FONT_WEIGHT_MEDIUM: "500",
+  FONT_WEIGHT_SEMIBOLD: "600",
+  FONT_WEIGHT_BOLD: "700",
+  FONT_WEIGHT_EXTRABOLD: "800",
+  FONT_WEIGHT_BLACK: "900",
+};

package/src/theme/blue.ts

@@ -0,0 +1,25 @@
+const BLUE180 = "#0B1826";
+const BLUE160 = "#133457";
+const BLUE140 = "#144E8E";
+const BLUE120 = "#144E8E";
+const BLUE100 = "#0071ED";
+const BLUE80 = "#1F8DFF";
+const BLUE60 = "#4DA5FF";
+const BLUE40 = "#8CC9FE";
+const BLUE20 = "#B2DDFF";
+const BLUE10 = "#D9EEFF";
+const BLUE5 = "#F2F7FF";
+
+export default {
+  BLUE180,
+  BLUE160,
+  BLUE140,
+  BLUE120,
+  BLUE100,
+  BLUE80,
+  BLUE60,
+  BLUE40,
+  BLUE20,
+  BLUE10,
+  BLUE5,
+};

package/src/theme/colors.ts

@@ -0,0 +1,21 @@
+import blue from "./blue";
+import green from "./green";
+import icon from "./icon";
+import ink from "./ink";
+import orange from "./orange";
+import purple from "./purple";
+import red from "./red";
+import white from "./white";
+import yellow from "./yellow";
+
+export default {
+  blue,
+  green,
+  ink,
+  white,
+  red,
+  purple,
+  orange,
+  yellow,
+  icon,
+};

package/src/theme/container-styles.tsx

@@ -0,0 +1,126 @@
+import { Platform, StyleSheet } from "react-native";
+import { SPACE_16, SPACE_8 } from "./dimensions";
+
+import white from "./white";
+import blue from "./blue";
+import ink from "./ink";
+
+export default StyleSheet.create({
+  container: { flex: 1 },
+  center: {
+    paddingHorizontal: SPACE_16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  end: { alignItems: "flex-end" },
+  start: { alignItems: "flex-start" },
+  centerHorizontal: { justifyContent: "center" },
+  icon: {
+    backgroundColor: blue.BLUE100,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  row: {
+    flexDirection: "row",
+  },
+  txtSmallBold: {
+    fontSize: 12,
+    color: ink.INK80,
+    fontWeight: "600",
+  },
+  button: {
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    width: 40,
+    height: 40,
+    backgroundColor: white.WHITE100,
+    marginHorizontal: SPACE_8,
+  },
+  shadow: {
+    shadowColor: "black",
+    shadowOffset: {
+      width: 1,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+  },
+  hitSlop: {
+    top: 10,
+    right: 10,
+    bottom: 10,
+    left: 10,
+  },
+  transparent: {
+    backgroundColor: "transparent",
+  },
+
+  //MARK: text size
+  text10: {
+    fontSize: 10 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 12 + (Platform.OS === "android" ? 2 : 4),
+  },
+  text12: {
+    fontSize: 12 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 16 + (Platform.OS === "android" ? 2 : 4),
+  },
+  text14: {
+    fontSize: 14 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 20 + (Platform.OS === "android" ? 2 : 4),
+  },
+  text16: {
+    fontSize: 16 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 24 + (Platform.OS === "android" ? 2 : 4),
+  },
+  text18: {
+    fontSize: 18 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 28 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text20: {
+    fontSize: 20 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 28 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text22: {
+    fontSize: 22 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 30 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text24: {
+    fontSize: 24 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 32 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text26: {
+    fontSize: 26 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 34 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text28: {
+    fontSize: 28 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 36 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text30: {
+    fontSize: 30 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 38 + (Platform.OS === "android" ? 1 : 2),
+  },
+  text32: {
+    fontSize: 32 + (Platform.OS === "android" ? 1 : 2),
+    lineHeight: 40 + (Platform.OS === "android" ? 1 : 2),
+  },
+
+  //MARK:fonts
+  textRegular: {
+    fontFamily: "Inter-Regular",
+    fontWeight: "400",
+  },
+  textMedium: {
+    fontFamily: "Inter-Medium",
+    fontWeight: "500",
+  },
+  textBold: {
+    fontFamily: "Inter-Bold",
+    fontWeight: "600",
+  },
+  styleIcon: {
+    width: 24,
+    height: 24,
+  },
+});

package/src/theme/dimensions.ts

@@ -0,0 +1,44 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+export const DEVICE_HEIGHT = Dimensions.get("window").height;
+export const DEVICE_WIDTH = Dimensions.get("window").width;
+export const HEADER_HEIGHT = 50;
+export const BUTTON_HEIGHT = 48;
+export const BUTTON_HEIGHT_SMALL = 40;
+export const RADIO_BUTTON_HEIGHT = 20;
+
+//MARK: padding
+export const SPACE_0 = 0;
+export const SPACE_2 = 2;
+export const SPACE_4 = 4;
+export const SPACE_6 = 6;
+export const SPACE_8 = 8;
+export const SPACE_12 = 12;
+export const SPACE_16 = 16;
+export const SPACE_20 = 20;
+export const SPACE_24 = 24;
+export const SPACE_28 = 28;
+export const SPACE_32 = 32;
+export const SPACE_36 = 36;
+export const SPACE_40 = 40;
+export const SPACE_48 = 48;
+export const SPACE_64 = 64;
+export const SPACE_80 = 80;
+export const SPACE_96 = 96;
+export const SPACE_112 = 112;
+export const SPACE_128 = 128;
+export const SPACE_BUTTON_GAP = SPACE_8;
+export const SPACE_CARD_PADDING = SPACE_24;
+export const SPACE_CARD_GAP = SPACE_12;
+
+//MARK: Border radius
+export const BORDER_RADIUS_6 = 6;
+export const BORDER_RADIUS_8 = 8;
+export const BORDER_RADIUS_12 = 12;
+export const BORDER_RADIUS_ROUNDED = 36;
+
+//MARK: Border width
+export const BORDER_WIDTH_05 = StyleSheet.hairlineWidth; //0.3-0.5
+export const BORDER_WIDTH_1 = 1;
+export const BORDER_WIDTH_2 = 2;
+export const BORDER_WIDTH_4 = 4;