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

package/src/components/OptionMenuModal/styles.tsx

@@ -1,5 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { radii } from '../../styles/radii';
+import { spacings } from '../../styles/spacings';
 
 export const useStyles = () => {
   const { colors, fonts } = useTheme();
@@ -9,10 +11,10 @@ export const useStyles = () => {
       margin: 0,
     },
     container: {
-      borderRadius: 12,
-      backgroundColor: colors.white,
+      borderRadius: radii.kilo,
+      backgroundColor: colors.bgNormal,
       position: 'absolute',
-      shadowColor: colors.codGray,
+      shadowColor: colors.fgNormal,
       shadowOffset: {
         width: 0,
         height: 3,
@@ -24,13 +26,12 @@ export const useStyles = () => {
     },
     separator: {
       height: 1,
-      backgroundColor: colors.black,
-      opacity: 0.2,
+      backgroundColor: colors.borderDivider,
     },
     optionContainer: {
       width: 107,
       paddingVertical: 11,
-      paddingHorizontal: 16,
+      paddingHorizontal: spacings.mega,
     },
     optionText: {
       fontFamily: fonts.sfProTextRegular,

package/src/components/PayButton/styles.tsx

@@ -8,7 +8,7 @@ export const useStyles = () => {
     text: {
       fontSize: 16,
       lineHeight: 24,
-      color: colors.white,
+      color: colors.fgOnStrong,
       fontFamily: fonts.aktivGroteskBold,
     },
     lockImage: {

package/src/components/PaymentMethodFormHeaderOption/styles.tsx

@@ -1,21 +1,24 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { borderWidths } from '../../styles/borderWidths';
+import { radii } from '../../styles/radii';
+import { spacings } from '../../styles/spacings';
 
 export const useStyles = () => {
   const { colors, fonts } = useTheme();
 
   const styles = StyleSheet.create({
     container: {
-      borderColor: colors.mercury,
-      borderWidth: 2,
-      borderRadius: 16,
-      paddingHorizontal: 16,
+      borderColor: colors.borderDivider,
+      borderWidth: borderWidths.mega,
+      borderRadius: radii.mega,
+      paddingHorizontal: spacings.mega,
     },
     title: {
       fontWeight: '700',
       fontSize: 14,
       lineHeight: 20,
-      color: colors.codGray,
+      color: colors.fgNormal,
       flex: 1,
       fontFamily: fonts.sfProTextBold,
     },
@@ -24,10 +27,10 @@ export const useStyles = () => {
       height: 24,
     },
     optionContainer: {
-      backgroundColor: colors.white,
+      backgroundColor: colors.bgNormal,
       flexDirection: 'row',
       alignItems: 'center',
-      paddingVertical: 12,
+      paddingVertical: spacings.kilo,
     },
   });
 

package/src/components/PaymentMethodsForm/styles.tsx

@@ -1,21 +1,24 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { borderWidths } from '../../styles/borderWidths';
+import { radii } from '../../styles/radii';
+import { spacings } from '../../styles/spacings';
 
 export const useStyles = () => {
   const { colors } = useTheme();
 
   const styles = StyleSheet.create({
     container: {
-      borderColor: colors.mercury,
-      borderWidth: 2,
-      borderRadius: 16,
-      paddingHorizontal: 16,
+      borderColor: colors.borderDivider,
+      borderWidth: borderWidths.mega,
+      borderRadius: radii.mega,
+      paddingHorizontal: spacings.mega,
     },
     separator: {
       height: 1,
-      backgroundColor: colors.mercury,
-      marginLeft: 40,
-      marginRight: -16,
+      backgroundColor: colors.borderDivider,
+      marginLeft: spacings.peta,
+      marginRight: -spacings.mega,
     },
   });
 

package/src/components/ProcessButton/styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../../contexts/ThemeContext';
+import { radii } from '../../styles/radii';
 
 export type ProcessButtonType =
   | 'disabled'
@@ -11,10 +12,10 @@ export const useStyles = (type: ProcessButtonType) => {
   const { colors } = useTheme();
 
   const backgroundColor = {
-    disabled: colors.dodgerBlue,
-    active: colors.dodgerBlue,
-    processing: colors.dodgerBlue,
-    success: colors.deepSea,
+    disabled: colors.bgAccentStrong,
+    active: colors.bgAccentStrong,
+    processing: colors.bgAccentStrong,
+    success: colors.bgSuccessStrong,
   };
 
   const styles = StyleSheet.create({
@@ -22,7 +23,7 @@ export const useStyles = (type: ProcessButtonType) => {
       height: 48,
       width: '100%',
       backgroundColor: backgroundColor[type],
-      borderRadius: 100,
+      borderRadius: radii.byte,
       justifyContent: 'center',
       alignItems: 'center',
     },

package/src/components/SaveCardButton/styles.tsx

@@ -8,7 +8,7 @@ export const useStyles = () => {
     text: {
       fontSize: 16,
       lineHeight: 24,
-      color: colors.white,
+      color: colors.fgOnStrong,
       fontFamily: fonts.aktivGroteskBold,
     },
     lockImage: {

package/src/components/SavedCard/styles.tsx

@@ -16,13 +16,13 @@ export const useStyles = () => {
     },
     title: {
       fontSize: 16,
-      color: colors.codGray,
+      color: colors.fgNormal,
       fontFamily: fonts.sfProTextRegular,
     },
     text: {
       fontSize: 14,
       lineHeight: 20,
-      color: colors.doveGray,
+      color: colors.fgSubtle,
       fontFamily: fonts.sfProTextRegular,
     },
   });

package/src/components/Switch/styles.tsx

@@ -5,7 +5,7 @@ const UNSELECT_MARGIN = 2;
 const SELECT_MARGIN = 22;
 
 export const useStyles = (selected: boolean) => {
-  const { colors, fonts } = useTheme();
+  const { colors, fonts, radii } = useTheme();
 
   const styles = StyleSheet.create({
     container: {
@@ -17,22 +17,22 @@ export const useStyles = (selected: boolean) => {
     },
     title: {
       fontSize: 14,
-      color: colors.codGray,
+      color: colors.fgNormal,
       fontFamily: fonts.sfProTextRegular,
     },
     switchContainer: {
       width: 51,
       height: 31,
-      backgroundColor: selected ? colors.royalBlue : colors.mercury,
+      backgroundColor: selected ? colors.bgAccentStrong : colors.bgHighlight,
       justifyContent: 'center',
-      borderRadius: 20,
+      borderRadius: radii.pill,
     },
     switchCircle: {
       width: 27,
       height: 27,
-      backgroundColor: colors.white,
+      backgroundColor: colors.bgNormal,
       borderRadius: 13.5,
-      shadowColor: colors.codGray,
+      shadowColor: colors.fgNormal,
       shadowOffset: {
         width: 0,
         height: 1,

package/src/components/WebViewSheet/index.tsx

@@ -41,7 +41,9 @@ export const WebViewSheet = (props: WebViewSheetProps) => {
           <View style={styles.loaderContainer}>
             <ActivityIndicator
               size={'large'}
-              color={Platform.OS === 'android' ? colors.royalBlue : undefined}
+              color={
+                Platform.OS === 'android' ? colors.bgAccentStrong : undefined
+              }
               style={styles.activityIndicator}
             />
           </View>

package/src/components/WebViewSheet/styles.tsx

@@ -17,7 +17,7 @@ export const useStyles = () => {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
       overflow: 'hidden',
-      backgroundColor: colors.white,
+      backgroundColor: colors.bgNormal,
     },
     headerContainer: {
       paddingHorizontal: 16,

package/src/contexts/ThemeContext.tsx

@@ -1,9 +1,21 @@
-import { Colors, Images, Fonts } from '../styles';
+import {
+  Colors,
+  Images,
+  Fonts,
+  Radii,
+  BorderWidths,
+  Spacings,
+  DesignTokens,
+} from '../styles';
 
 const DEFAULT_THEME = {
   colors: Colors.light,
   images: Images.light,
   fonts: Fonts.light,
+  radii: Radii.radii,
+  borderWidths: BorderWidths.borderWidths,
+  spacings: Spacings.spacings,
+  designTokens: DesignTokens.light,
 };
 
 export const useTheme = () => DEFAULT_THEME;

package/src/styles/borderWidths.ts

@@ -0,0 +1,3 @@
+import { shared } from './designTokens';
+
+export const borderWidths = shared.borderWidths;

package/src/styles/colors.ts

@@ -1,22 +1,21 @@
+import { lightColors } from './designTokens';
+
 export const light = {
-  transparent: 'transparent',
-  black: '#000000',
-  white: '#ffffff',
-  grayNickel: '#C8C9C5',
-  silver: '#CCCCCC',
-  codGray: '#1A1A1A',
-  regentGray: '#8792A2',
-  dustyGray: '#999999',
-  dodgerBlue: '#3063E9',
-  mantis: '#91C55E',
-  paleSky: '#697386',
-  guardsmanRed: '#BC010B',
-  cinnabar: '#EB4C3B',
-  athensGray: '#E5E5E9',
-  royalBlue: '#3064E3',
-  mercury: '#E6E6E6',
-  doveGray: '#666666',
-  alizarinCrimson: '#DE331D',
-  deepSea: '#018850',
-  valencia: '#D23F47',
+  transparent: lightColors.transparent,
+  bgNormal: lightColors.bgNormal,
+  bgSubtle: lightColors.bgSubtle,
+  bgHighlight: lightColors.bgHighlight,
+  bgStrong: lightColors.bgStrong,
+  bgAccentStrong: lightColors.bgAccentStrong,
+  bgSuccessStrong: lightColors.bgSuccessStrong,
+  fgNormal: lightColors.fgNormal,
+  fgSubtle: lightColors.fgSubtle,
+  fgPlaceholder: lightColors.fgPlaceholder,
+  fgAccent: lightColors.fgAccent,
+  fgDanger: lightColors.fgDanger,
+  fgOnStrong: lightColors.fgOnStrong,
+  borderNormal: lightColors.borderNormal,
+  borderSubtle: lightColors.borderSubtle,
+  borderDivider: lightColors.borderDivider,
+  borderDanger: lightColors.borderDanger,
 };

package/src/styles/designTokens.ts

@@ -0,0 +1,49 @@
+export const shared = {
+  radii: {
+    bit: 4,
+    byte: 8,
+    kilo: 12,
+    mega: 16,
+    pill: 999999,
+  },
+  borderWidths: {
+    kilo: 1,
+    mega: 2,
+  },
+  spacings: {
+    bit: 4,
+    byte: 8,
+    kilo: 12,
+    mega: 16,
+    giga: 24,
+    tera: 32,
+    peta: 40,
+    exa: 48,
+    zetta: 56,
+  },
+} as const;
+
+export const lightColors = {
+  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',
+} as const;
+
+export const light = {
+  colors: lightColors,
+  ...shared,
+};

package/src/styles/index.ts

@@ -1,5 +1,9 @@
 import * as Colors from './colors';
 import * as Images from './images';
 import * as Fonts from './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 };
+export { Colors, Images, Fonts, Radii, BorderWidths, Spacings, DesignTokens };

package/src/styles/radii.ts

@@ -0,0 +1,3 @@
+import { shared } from './designTokens';
+
+export const radii = shared.radii;

package/src/styles/spacings.ts

@@ -0,0 +1,3 @@
+import { shared } from './designTokens';
+
+export const spacings = shared.spacings;

package/{sumup-react-native.podspec → sumup-react-native-checkout.podspec}

@@ -1,18 +1,20 @@
 require "json"
+require "rubygems"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+pod_version = Gem::Version.new(package["version"]).release.to_s
 
 Pod::Spec.new do |s|
-  s.name         = "sumup-react-native"
-  s.version      = package["version"]
+  s.name         = "sumup-react-native-checkout"
+  s.version      = pod_version
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
 
   s.platforms    = { :ios => "11.0" }
-  s.source       = { :git => "https://github.com/kyvinept/sumup-react-native.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/sumup/sumup-react-native-checkout-sdk.git", :tag => package["version"] }
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"