chore: update styled-system theme

Author: hmarques98

.DS_Store

@@ -18,12 +18,13 @@ import {
   position,
   PositionProps,
 } from 'styled-system';
+import { theme } from 'theme';
 type VariantTypes = 'primary' | 'secondary';
 interface BoxProps
   extends LayoutProps,
-    ColorProps,
-    SpaceProps,
-    BordersProps,
+    ColorProps<typeof theme>,
+    SpaceProps<typeof theme>,
+    BordersProps<typeof theme>,
     FlexProps,
     PositionProps,
     FlexboxProps {
@@ -37,10 +38,10 @@ const variantStyle = (theme: DefaultTheme) => {
     prop: 'bgVariant',
     variants: {
       primary: {
-        backgroundColor: theme.colors.primary,
+        backgroundColor: 'primary',
       },
       secondary: {
-        backgroundColor: theme.colors.secondary,
+        backgroundColor: 'secondary',
       },
     },
   });

template/src/components/CustomScreen.tsx

@@ -12,11 +12,11 @@ storiesOf('Box', module)
         <Box
           bgVariant="secondary"
           size={100}
-          borderRadius={16}
+          borderRadius="ls"
           justifyContent="center"
           alignItems="center"
           alignSelf="center">
-          <Box bg="blue" size={50} />
+          <Box bg={'grayLight'} size={50} />
         </Box>
       </Box>
     );

template/src/components/CustomText.tsx

@@ -24,18 +24,19 @@ import {
   PaddingProps,
   padding,
 } from 'styled-system';
+import { theme } from 'theme';
 
 type VariantTypes = 'outlined' | 'rounded' | 'box' | 'disabled';
 
 interface ButtonProps
   extends LayoutProps,
-    ColorProps,
+    ColorProps<typeof theme>,
     SpaceProps,
     BordersProps,
     FlexProps,
     PositionProps,
     FlexboxProps,
-    ButtonStyleProps,
+    ButtonStyleProps<typeof theme>,
     PaddingProps {
   children?: React.ReactNode;
   variant?: VariantTypes;
@@ -51,16 +52,15 @@ const variantStyle = (theme: DefaultTheme, disabled: boolean) => {
         height: '100%',
       },
       outlined: {
-        borderColor: theme.colors.primary,
-        borderWidth: theme.spacing.border,
+        borderColor: 'primary',
+        borderWidth: 1,
         borderStyle: 'solid',
       },
       rounded: {
-        borderRadius: theme.spacing.borderRadius,
+        borderRadius: 8,
       },
       disabled: {
-        borderRadius: theme.spacing.borderRadius,
-        backgroundColor: theme.colors.black,
+        backgroundColor: 'black',
       },
     },
   });

template/src/components/molecules/Box/Box.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 import Button from './Button';
 import { Typography } from 'components/molecules/Typography';
-import { myTheme } from 'theme';
 
 storiesOf('Button', module)
   .add('Button Box', () => (
@@ -14,23 +13,17 @@ storiesOf('Button', module)
   ))
   .add('Button Outlined', () => {
     return (
-      <Button variant="outlined" bg={myTheme.colors.secondary}>
-        <Typography
-          variant="regular"
-          fontSize={16}
-          color={myTheme.colors.primary}>
+      <Button variant="outlined" bg={'secondary'}>
+        <Typography variant="regular" fontSize={16} color={'primary'}>
           Button outlined
         </Typography>
       </Button>
     );
   })
   .add('Button Rounded', () => {
     return (
-      <Button variant="rounded" bg={myTheme.colors.primary}>
-        <Typography
-          variant="regular"
-          fontSize={16}
-          color={myTheme.colors.secondary}>
+      <Button variant="rounded" bg={'primary'}>
+        <Typography variant="regular" fontSize={16} color={'secondary'}>
           Button rounded
         </Typography>
       </Button>
@@ -39,10 +32,7 @@ storiesOf('Button', module)
   .add('Button Disable', () => {
     return (
       <Button variant="disabled" marginX={10} disabled>
-        <Typography
-          variant="regular"
-          fontSize={16}
-          color={myTheme.colors.secondary}>
+        <Typography variant="regular" fontSize={16} color={'secondary'}>
           Button disabled
         </Typography>
       </Button>

template/src/components/molecules/Box/stories.tsx

@@ -15,16 +15,19 @@ import {
   typography,
   color,
   ColorProps,
+  FontFamilyProps,
+  fontFamily,
 } from 'styled-system';
-import { myTheme } from 'theme';
+import { theme } from 'theme';
 
 interface TypographyProps
-  extends TextStyleProps,
-    LayoutProps,
-    SpaceProps,
-    TextProps,
-    ColorProps {
+  extends TextStyleProps<typeof theme>,
+    LayoutProps<typeof theme>,
+    SpaceProps<typeof theme>,
+    TextProps<typeof theme>,
+    ColorProps<typeof theme> {
   variant?: VariantTypes;
+  fontFamily?: keyof typeof theme.fonts;
 }
 
 type VariantTypes = 'regular' | 'bold';
@@ -34,10 +37,10 @@ const variantStyle = (theme: DefaultTheme) => {
     prop: 'variant',
     variants: {
       regular: {
-        fontFamily: theme.typography.FONT_REGULAR,
+        fontFamily: 'heading',
       },
       bold: {
-        fontFamily: theme.typography.FONT_BOLD,
+        fontFamily: 'body',
       },
     },
   });
@@ -49,7 +52,7 @@ const Typography = styled(Text)<TypographyProps>`
 `;
 
 Typography.defaultProps = {
-  color: myTheme.colors.primary,
-  fontFamily: myTheme.typography.FONT_REGULAR,
+  color: 'secondary',
+  fontFamily: 'heading',
 };
 export default Typography;

template/src/components/molecules/Button/Button.tsx

@@ -12,7 +12,7 @@ storiesOf('Typography', module)
         height={'100%'}
         justifyContent="center"
         alignItems="center">
-        <Typography variant="regular" fontSize={40}>
+        <Typography variant="regular" fontSize="xl">
           Typography Regular
         </Typography>
       </Box>
@@ -28,7 +28,7 @@ storiesOf('Typography', module)
           height={'100%'}
           justifyContent="center"
           alignItems="center">
-          <Typography variant="bold" fontSize={40}>
+          <Typography variant="bold" fontSize="xl" fontFamily="body">
             Typography Bold
           </Typography>
         </Box>

template/src/components/molecules/Button/stories.tsx

@@ -5,7 +5,7 @@ import { Button } from 'components/molecules/Button';
 import { Typography } from 'components/molecules/Typography';
 import React, { useEffect } from 'react';
 import { IPeople } from 'src/interfaces/IPeople';
-import { myTheme } from 'theme';
+import { theme } from 'theme';
 interface CardPeopleProps extends IPeople {
   onPress: () => void;
 }
@@ -20,9 +20,9 @@ const CardPeoples = ({ name, homeworld, onPress }: CardPeopleProps) => {
         variant="rounded"
         height={80}
         onPress={onPress}
-        bg={myTheme.colors.primary}>
-        <Typography color={myTheme.colors.white}>{name}</Typography>
-        <Typography color={myTheme.colors.white}>{homeworld}</Typography>
+        bg={theme.colors.primary}>
+        <Typography color={theme.colors.white}>{name}</Typography>
+        <Typography color={theme.colors.white}>{homeworld}</Typography>
       </Button>
     </Box>
   );