@sumup/react-native-checkout 0.0.0-alpha.1 → 0.0.0-alpha.2

package/lib/typescript/components/Switch/styles.d.ts

@@ -8,22 +8,22 @@ export declare const useStyles: (selected: boolean) => {
     };
     title: {
         fontSize: number;
-        color: string;
+        color: "#0f131a";
         fontFamily: string;
     };
     switchContainer: {
         width: number;
         height: number;
-        backgroundColor: string;
+        backgroundColor: "#e3e7eb" | "#0f131a";
         justifyContent: "center";
-        borderRadius: number;
+        borderRadius: 999999;
     };
     switchCircle: {
         width: number;
         height: number;
-        backgroundColor: string;
+        backgroundColor: "#ffffff";
         borderRadius: number;
-        shadowColor: string;
+        shadowColor: "#0f131a";
         shadowOffset: {
             width: number;
             height: number;

package/lib/typescript/components/WebViewSheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/WebViewSheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAgB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAM7D,UAAU,iBAAkB,SAAQ,IAAI,CACtC,YAAY,EACZ,WAAW,GAAG,8BAA8B,GAAG,QAAQ,CACxD;IACC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAmCpD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/WebViewSheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAgB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAM7D,UAAU,iBAAkB,SAAQ,IAAI,CACtC,YAAY,EACZ,WAAW,GAAG,8BAA8B,GAAG,QAAQ,CACxD;IACC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAqCpD,CAAC"}

package/lib/typescript/components/WebViewSheet/styles.d.ts

@@ -6,7 +6,7 @@ export declare const useStyles: () => {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
         overflow: "hidden";
-        backgroundColor: string;
+        backgroundColor: "#ffffff";
     };
     headerContainer: {
         paddingHorizontal: number;

package/lib/typescript/contexts/ThemeContext.d.ts

@@ -1,25 +1,22 @@
 export declare const useTheme: () => {
     colors: {
-        transparent: string;
-        black: string;
-        white: string;
-        grayNickel: string;
-        silver: string;
-        codGray: string;
-        regentGray: string;
-        dustyGray: string;
-        dodgerBlue: string;
-        mantis: string;
-        paleSky: string;
-        guardsmanRed: string;
-        cinnabar: string;
-        athensGray: string;
-        royalBlue: string;
-        mercury: string;
-        doveGray: string;
-        alizarinCrimson: string;
-        deepSea: string;
-        valencia: string;
+        transparent: "transparent";
+        bgNormal: "#ffffff";
+        bgSubtle: "#f0f1f5";
+        bgHighlight: "#e3e7eb";
+        bgStrong: "#000000";
+        bgAccentStrong: "#0f131a";
+        bgSuccessStrong: "#018850";
+        fgNormal: "#0f131a";
+        fgSubtle: "#6a737c";
+        fgPlaceholder: "#929396";
+        fgAccent: "#0f131a";
+        fgDanger: "#de331d";
+        fgOnStrong: "#ffffff";
+        borderNormal: "#aeb6be";
+        borderSubtle: "#e3e7ec";
+        borderDivider: "#e3e7eb";
+        borderDanger: "#de331d";
     };
     images: {
         applePay: any;
@@ -41,5 +38,70 @@ export declare const useTheme: () => {
         sfProTextRegular: string;
         sfProTextBold: string;
     };
+    radii: {
+        readonly bit: 4;
+        readonly byte: 8;
+        readonly kilo: 12;
+        readonly mega: 16;
+        readonly pill: 999999;
+    };
+    borderWidths: {
+        readonly kilo: 1;
+        readonly mega: 2;
+    };
+    spacings: {
+        readonly bit: 4;
+        readonly byte: 8;
+        readonly kilo: 12;
+        readonly mega: 16;
+        readonly giga: 24;
+        readonly tera: 32;
+        readonly peta: 40;
+        readonly exa: 48;
+        readonly zetta: 56;
+    };
+    designTokens: {
+        radii: {
+            readonly bit: 4;
+            readonly byte: 8;
+            readonly kilo: 12;
+            readonly mega: 16;
+            readonly pill: 999999;
+        };
+        borderWidths: {
+            readonly kilo: 1;
+            readonly mega: 2;
+        };
+        spacings: {
+            readonly bit: 4;
+            readonly byte: 8;
+            readonly kilo: 12;
+            readonly mega: 16;
+            readonly giga: 24;
+            readonly tera: 32;
+            readonly peta: 40;
+            readonly exa: 48;
+            readonly zetta: 56;
+        };
+        colors: {
+            readonly transparent: "transparent";
+            readonly bgNormal: "#ffffff";
+            readonly bgSubtle: "#f0f1f5";
+            readonly bgHighlight: "#e3e7eb";
+            readonly bgStrong: "#000000";
+            readonly bgAccentStrong: "#0f131a";
+            readonly bgSuccessStrong: "#018850";
+            readonly fgNormal: "#0f131a";
+            readonly fgSubtle: "#6a737c";
+            readonly fgPlaceholder: "#929396";
+            readonly fgAccent: "#0f131a";
+            readonly fgDanger: "#de331d";
+            readonly fgOnStrong: "#ffffff";
+            readonly borderNormal: "#aeb6be";
+            readonly borderSubtle: "#e3e7ec";
+            readonly borderDivider: "#e3e7eb";
+            readonly borderDanger: "#de331d";
+        };
+    };
 };
 //# sourceMappingURL=ThemeContext.d.ts.map

package/lib/typescript/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAsB,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAsB,CAAC"}

package/lib/typescript/styles/borderWidths.d.ts

@@ -0,0 +1,5 @@
+export declare const borderWidths: {
+    readonly kilo: 1;
+    readonly mega: 2;
+};
+//# sourceMappingURL=borderWidths.d.ts.map

package/lib/typescript/styles/borderWidths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"borderWidths.d.ts","sourceRoot":"","sources":["../../../src/styles/borderWidths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;CAAsB,CAAC"}

package/lib/typescript/styles/colors.d.ts

@@ -1,23 +1,20 @@
 export declare const light: {
-    transparent: string;
-    black: string;
-    white: string;
-    grayNickel: string;
-    silver: string;
-    codGray: string;
-    regentGray: string;
-    dustyGray: string;
-    dodgerBlue: string;
-    mantis: string;
-    paleSky: string;
-    guardsmanRed: string;
-    cinnabar: string;
-    athensGray: string;
-    royalBlue: string;
-    mercury: string;
-    doveGray: string;
-    alizarinCrimson: string;
-    deepSea: string;
-    valencia: string;
+    transparent: "transparent";
+    bgNormal: "#ffffff";
+    bgSubtle: "#f0f1f5";
+    bgHighlight: "#e3e7eb";
+    bgStrong: "#000000";
+    bgAccentStrong: "#0f131a";
+    bgSuccessStrong: "#018850";
+    fgNormal: "#0f131a";
+    fgSubtle: "#6a737c";
+    fgPlaceholder: "#929396";
+    fgAccent: "#0f131a";
+    fgDanger: "#de331d";
+    fgOnStrong: "#ffffff";
+    borderNormal: "#aeb6be";
+    borderSubtle: "#e3e7ec";
+    borderDivider: "#e3e7eb";
+    borderDanger: "#de331d";
 };
 //# sourceMappingURL=colors.d.ts.map

package/lib/typescript/styles/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/styles/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;CAqBjB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/styles/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC"}

package/lib/typescript/styles/designTokens.d.ts

@@ -0,0 +1,87 @@
+export declare const shared: {
+    readonly radii: {
+        readonly bit: 4;
+        readonly byte: 8;
+        readonly kilo: 12;
+        readonly mega: 16;
+        readonly pill: 999999;
+    };
+    readonly borderWidths: {
+        readonly kilo: 1;
+        readonly mega: 2;
+    };
+    readonly spacings: {
+        readonly bit: 4;
+        readonly byte: 8;
+        readonly kilo: 12;
+        readonly mega: 16;
+        readonly giga: 24;
+        readonly tera: 32;
+        readonly peta: 40;
+        readonly exa: 48;
+        readonly zetta: 56;
+    };
+};
+export declare const lightColors: {
+    readonly transparent: "transparent";
+    readonly bgNormal: "#ffffff";
+    readonly bgSubtle: "#f0f1f5";
+    readonly bgHighlight: "#e3e7eb";
+    readonly bgStrong: "#000000";
+    readonly bgAccentStrong: "#0f131a";
+    readonly bgSuccessStrong: "#018850";
+    readonly fgNormal: "#0f131a";
+    readonly fgSubtle: "#6a737c";
+    readonly fgPlaceholder: "#929396";
+    readonly fgAccent: "#0f131a";
+    readonly fgDanger: "#de331d";
+    readonly fgOnStrong: "#ffffff";
+    readonly borderNormal: "#aeb6be";
+    readonly borderSubtle: "#e3e7ec";
+    readonly borderDivider: "#e3e7eb";
+    readonly borderDanger: "#de331d";
+};
+export declare const light: {
+    radii: {
+        readonly bit: 4;
+        readonly byte: 8;
+        readonly kilo: 12;
+        readonly mega: 16;
+        readonly pill: 999999;
+    };
+    borderWidths: {
+        readonly kilo: 1;
+        readonly mega: 2;
+    };
+    spacings: {
+        readonly bit: 4;
+        readonly byte: 8;
+        readonly kilo: 12;
+        readonly mega: 16;
+        readonly giga: 24;
+        readonly tera: 32;
+        readonly peta: 40;
+        readonly exa: 48;
+        readonly zetta: 56;
+    };
+    colors: {
+        readonly transparent: "transparent";
+        readonly bgNormal: "#ffffff";
+        readonly bgSubtle: "#f0f1f5";
+        readonly bgHighlight: "#e3e7eb";
+        readonly bgStrong: "#000000";
+        readonly bgAccentStrong: "#0f131a";
+        readonly bgSuccessStrong: "#018850";
+        readonly fgNormal: "#0f131a";
+        readonly fgSubtle: "#6a737c";
+        readonly fgPlaceholder: "#929396";
+        readonly fgAccent: "#0f131a";
+        readonly fgDanger: "#de331d";
+        readonly fgOnStrong: "#ffffff";
+        readonly borderNormal: "#aeb6be";
+        readonly borderSubtle: "#e3e7ec";
+        readonly borderDivider: "#e3e7eb";
+        readonly borderDanger: "#de331d";
+    };
+};
+//# sourceMappingURL=designTokens.d.ts.map

package/lib/typescript/styles/designTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"designTokens.d.ts","sourceRoot":"","sources":["../../../src/styles/designTokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuBT,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;CAkBd,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAC"}

package/lib/typescript/styles/index.d.ts

@@ -1,5 +1,9 @@
 import * as Colors from './colors';
 import * as Images from './images';
 import * as Fonts from './fonts';
-export { Colors, Images, Fonts };
+import * as Radii from './radii';
+import * as BorderWidths from './borderWidths';
+import * as Spacings from './spacings';
+import * as DesignTokens from './designTokens';
+export { Colors, Images, Fonts, Radii, BorderWidths, Spacings, DesignTokens };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC"}

package/lib/typescript/styles/radii.d.ts

@@ -0,0 +1,8 @@
+export declare const radii: {
+    readonly bit: 4;
+    readonly byte: 8;
+    readonly kilo: 12;
+    readonly mega: 16;
+    readonly pill: 999999;
+};
+//# sourceMappingURL=radii.d.ts.map

package/lib/typescript/styles/radii.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../../src/styles/radii.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;CAAe,CAAC"}

package/lib/typescript/styles/spacings.d.ts

@@ -0,0 +1,12 @@
+export declare const spacings: {
+    readonly bit: 4;
+    readonly byte: 8;
+    readonly kilo: 12;
+    readonly mega: 16;
+    readonly giga: 24;
+    readonly tera: 32;
+    readonly peta: 40;
+    readonly exa: 48;
+    readonly zetta: 56;
+};
+//# sourceMappingURL=spacings.d.ts.map

package/lib/typescript/styles/spacings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacings.d.ts","sourceRoot":"","sources":["../../../src/styles/spacings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;CAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sumup/react-native-checkout",
-	"version": "0.0.0-alpha.1",
+	"version": "0.0.0-alpha.2",
 	"description": "Official SumUp React Native SDK",
 	"main": "lib/commonjs/index",
 	"module": "lib/module/index",

package/src/components/AnimatedContainer/styles.tsx

@@ -15,7 +15,7 @@ export const useStyles = (height?: number) => {
       right: 0,
     },
     content: {
-      backgroundColor: colors.white,
+      backgroundColor: colors.bgNormal,
       width: width,
       height,
       borderTopLeftRadius: 8,

package/src/components/ApplePayButton/styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { radii } from '../../styles/radii';
 
 export const useStyles = (disabled?: boolean) => {
   const { colors } = useTheme();
@@ -9,8 +10,8 @@ export const useStyles = (disabled?: boolean) => {
       opacity: disabled ? 0.6 : 1,
       height: 48,
       width: '100%',
-      backgroundColor: colors.black,
-      borderRadius: 8,
+      backgroundColor: colors.bgStrong,
+      borderRadius: radii.byte,
       justifyContent: 'center',
       alignItems: 'center',
     },

package/src/components/Button/styles.tsx

@@ -1,38 +1,40 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { borderWidths } from '../../styles/borderWidths';
+import { radii } from '../../styles/radii';
 import { ButtonType } from '.';
 
 export const useStyles = (type: ButtonType) => {
   const { colors, fonts } = useTheme();
 
   const textColor = {
-    primary: colors.white,
-    secondary: colors.codGray,
-    tertiary: colors.alizarinCrimson,
+    primary: colors.fgOnStrong,
+    secondary: colors.fgNormal,
+    tertiary: colors.fgDanger,
   };
 
   const backgroundColor = {
-    primary: colors.royalBlue,
+    primary: colors.bgAccentStrong,
     secondary: colors.transparent,
     tertiary: colors.transparent,
   };
 
   const borderColor = {
     primary: colors.transparent,
-    secondary: colors.silver,
+    secondary: colors.borderNormal,
     tertiary: colors.transparent,
   };
 
   const borderWidth = {
     primary: 0,
-    secondary: 1,
+    secondary: borderWidths.kilo,
     tertiary: 0,
   };
 
   const styles = StyleSheet.create({
     container: {
       height: 48,
-      borderRadius: 100,
+      borderRadius: radii.byte,
       width: '100%',
       justifyContent: 'center',
       alignItems: 'center',

package/src/components/CardInformation/styles.tsx

@@ -20,14 +20,14 @@ export const useStyles = () => {
     title: {
       fontWeight: '600',
       fontSize: 14,
-      color: colors.paleSky,
+      color: colors.fgSubtle,
       marginBottom: 8,
     },
     privacyPolicyText: {
-      color: colors.doveGray,
+      color: colors.fgSubtle,
     },
     privacyPolicyLink: {
-      color: colors.royalBlue,
+      color: colors.bgAccentStrong,
     },
   });
 

package/src/components/CardSheet/styles.tsx

@@ -11,7 +11,7 @@ export const useStyles = () => {
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: colors.white,
+      backgroundColor: colors.bgNormal,
       maxHeight: height - insets.top,
       paddingBottom: insets.bottom + 16,
     },
@@ -19,12 +19,12 @@ export const useStyles = () => {
       fontWeight: 'bold',
       fontSize: 20,
       marginBottom: 30,
-      color: colors.black,
+      color: colors.fgAccent,
     },
     separatorText: {
       fontSize: 14,
       lineHeight: 16,
-      color: colors.black,
+      color: colors.fgAccent,
       width: '100%',
       textAlign: 'center',
     },

package/src/components/Checkbox/styles.tsx

@@ -1,16 +1,18 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { borderWidths } from '../../styles/borderWidths';
+import { radii } from '../../styles/radii';
 
 export const useStyles = (selected: boolean) => {
   const { colors } = useTheme();
 
   const styles = StyleSheet.create({
     container: {
-      borderRadius: 12,
+      borderRadius: radii.kilo,
       width: 24,
       height: 24,
-      borderWidth: 2,
-      borderColor: selected ? colors.royalBlue : colors.doveGray,
+      borderWidth: borderWidths.mega,
+      borderColor: selected ? colors.bgAccentStrong : colors.fgSubtle,
     },
     image: {
       width: 24,

package/src/components/GooglePayButton/styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { radii } from '../../styles/radii';
 
 export const useStyles = (disabled?: boolean) => {
   const { colors } = useTheme();
@@ -10,14 +11,14 @@ export const useStyles = (disabled?: boolean) => {
       opacity: disabled ? 0.6 : 1,
       height: 48,
       width: '100%',
-      backgroundColor: colors.black,
-      borderRadius: 8,
+      backgroundColor: colors.bgStrong,
+      borderRadius: radii.byte,
       justifyContent: 'center',
       alignItems: 'center',
     },
     text: {
       fontSize: 14,
-      color: colors.white,
+      color: colors.fgOnStrong,
     },
     image: {
       width: 44,

package/src/components/Header/styles.tsx

@@ -13,7 +13,7 @@ export const useStyles = () => {
       marginBottom: 16,
     },
     title: {
-      color: colors.codGray,
+      color: colors.fgNormal,
       fontWeight: '700',
       fontSize: 18,
       textAlign: 'center',

package/src/components/InputFields/BaseInputField/index.tsx

@@ -42,7 +42,7 @@ export const BaseInputField = (props: BaseInputFieldProps) => {
       <View style={[styles.container]}>
         <TextInput
           placeholder={props.placeholder}
-          placeholderTextColor={theme.colors.dustyGray}
+          placeholderTextColor={theme.colors.fgPlaceholder}
           autoCorrect={false}
           spellCheck={false}
           keyboardType={props.keyboardType}

package/src/components/InputFields/BaseInputField/styles.tsx

@@ -2,31 +2,31 @@ import { StyleSheet } from 'react-native';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 export const useStyles = () => {
-  const { colors, fonts } = useTheme();
+  const { colors, fonts, borderWidths, radii, spacings } = useTheme();
 
   const styles = StyleSheet.create({
     input: {
       fontSize: 16,
-      paddingHorizontal: 16,
+      paddingHorizontal: spacings.mega,
       width: '100%',
-      color: colors.codGray,
+      color: colors.fgNormal,
       fontFamily: fonts.sfProTextRegular,
     },
     title: {
       fontSize: 14,
       lineHeight: 20,
-      color: colors.codGray,
+      color: colors.fgNormal,
       fontFamily: fonts.sfProTextRegular,
     },
     container: {
-      borderColor: colors.silver,
-      borderWidth: 1,
-      height: 56,
+      borderColor: colors.borderNormal,
+      borderWidth: borderWidths.kilo,
+      height: 48,
       justifyContent: 'center',
-      borderRadius: 8,
+      borderRadius: radii.byte,
     },
     errorText: {
-      color: colors.guardsmanRed,
+      color: colors.fgDanger,
       fontSize: 12,
       marginVertical: 6,
       fontFamily: fonts.sfProTextRegular,

package/src/components/LoadingSpinner/styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { radii } from '../../styles/radii';
 
 export const useStyles = () => {
   const { colors } = useTheme();
@@ -12,13 +13,13 @@ export const useStyles = () => {
       alignItems: 'center',
     },
     progress: {
-      borderTopColor: colors.white,
+      borderTopColor: colors.fgOnStrong,
       width: '100%',
       height: '100%',
-      borderRadius: 16,
-      borderLeftColor: colors.white,
-      borderRightColor: colors.white,
-      borderBottomColor: colors.royalBlue,
+      borderRadius: radii.mega,
+      borderLeftColor: colors.fgOnStrong,
+      borderRightColor: colors.fgOnStrong,
+      borderBottomColor: colors.bgAccentStrong,
       borderWidth: 3,
       position: 'absolute',
     },

package/src/components/Modal/styles.tsx

@@ -14,7 +14,7 @@ export const useStyles = () => {
     bottomColorContainer: {
       width: '100%',
       height: 100,
-      backgroundColor: colors.white,
+      backgroundColor: colors.bgNormal,
       position: 'absolute',
       bottom: -100,
     },

package/src/components/NoInternetConnection/styles.tsx

@@ -6,7 +6,7 @@ export const useStyles = () => {
 
   const styles = StyleSheet.create({
     text: {
-      color: colors.cinnabar,
+      color: colors.fgDanger,
     },
   });
 

package/src/components/OptionMenuModal/index.tsx

@@ -40,7 +40,9 @@ export const OptionMenuModal = (props: OptionMenuModalProps) => {
         <Text
           style={[
             styles.optionText,
-            { color: type === 'destructive' ? colors.valencia : colors.black },
+            {
+              color: type === 'destructive' ? colors.fgDanger : colors.fgAccent,
+            },
           ]}
         >
           {text}