Colors not being pulled through into sketch
👋 Hello! Thanks for contributing. Please use the template that matches your intention  

_I am..._
Reporting an issue.
I've been using this tutorial...
https://design-nation.icons8.com/sketching-a-design-system-with-react-sketchapp-43e24993c8f2

| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| -------------------------------------------------------------------------------------------------

I've got it all rendering in sketch, however any of the colours from the designSystem.js are not coming through. They are all being rendered as rgba(0,0,0,0.00).

designSystem.js


```
import processColor from './processColor';
import type {
  Color
} from './processColor';

export const colors = {
  Haus: '#F3F4F4',
  Night: '#333',
  Sur: '#96DBE4',
  Gray: '#DBDBDB',
  GrayStrong: '#999999',
  GrayStronger: '#444444',
  White: '#FFFFFF',
  Green: '#42D47C',
  GreenDark: '#33B564',
  DeepPink: '#FF1493',
};

const typeSizes = [80, 48, 36, 24, 20, 16];

export const spacing = 16;

const fontFamilies = {
  display: 'Helvetica',
  body: 'Georgia',
};

const fontWeights = {
  regular: 'regular',
  bold: 'bold',
};

export const fonts = {
  Headline: {
    color: colors.Night,
    fontSize: typeSizes[0],
    fontFamily: fontFamilies.display,
    fontWeight: fontWeights.bold,
    lineHeight: 80,
  },
  'Title 1': {
    color: colors.Night,
    fontSize: typeSizes[2],
    fontFamily: fontFamilies.display,
    fontWeight: fontWeights.bold,
    lineHeight: 48,
  },
  'Title 2': {
    color: colors.Night,
    fontSize: typeSizes[3],
    fontFamily: fontFamilies.display,
    fontWeight: fontWeights.bold,
    lineHeight: 36,
  },
  'Title 3': {
    color: colors.Night,
    fontSize: typeSizes[4],
    fontFamily: fontFamilies.body,
    fontWeight: fontWeights.regular,
    lineHeight: 24,
  },
  Body: {
    color: colors.Night,
    fontSize: typeSizes[5],
    fontFamily: fontFamilies.body,
    fontWeight: fontWeights.regular,
    lineHeight: 24,
    marginBottom: 24,
  },
  Placeholder: {
    color: colors.GrayStronger,
    fontSize: typeSizes[5],
    fontFamily: fontFamilies.body,
    fontWeight: fontWeights.regular,
    lineHeight: 24,
    marginBottom: 40,
  },
  ButtonText: {
    color: colors.White,
    fontWeight: 'bold'
  }
};

export default {
  colors: Object.keys(colors).reduce(
    (acc, name) => ({
      ...acc,
      [name]: processColor(colors[name]),
    }), {},
  ),
  fonts,
  spacing,
};

export type DesignSystem = {
  fonts: any,
  colors: {
    [key: string]: Color
  },
};
```


Example of how these are being called ...

```
const Input = ({ placeholder, children }: P) => (
  <View style={{
    borderStyle: 'solid',
    borderColor: designSystem.colors.DeepPink,
    borderRadius: 3,
    borderWidth: 3,
    paddingTop: 8,
    paddingBottom: 8,
    paddingLeft: 10,
    paddingRight: 10,
    marginBottom: 10.5,
    marginTop: 5.5,
    backgroundColor: '#01ffae',
  }}>
  <Text style={{
    color:designSystem.colors.GrayStrong,
  }}>
    {placeholder}
  </Text>
</View>
);
```

