Redesign chart

styles/colors.js

@@ -1,3 +1,17 @@
+const redColor = '#c3000d'
+export const shadesOfRed = ['#e7999e', '#db666d', '#cf323d', '#c3000d'] // light to dark
+const violetColor = '#6a7b98'
+const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', '#7689a9', violetColor] // light to dark
+const yellowColor = '#dbb40c'
+const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark
+const magentaColor = '#6f2565'
+const shadesOfMagenta = ['#a87ca2', '#8b5083', magentaColor] // light to dark
+const pinkColor = '#9e346c'
+const shadesOfPink = ['#c485a6', '#b15c89', pinkColor] // light to dark
+const lightGreenColor = '#bccd67'
+const orangeColor = '#bc6642'
+const mintColor = '#6ca299'
+
 export default {
   greyDark: '#A5A5A5',
   grey: '#D2D2D2',
@@ -8,4 +22,38 @@ export default {
   tourquiseDark: '#69CBC1',
   tourquise: '#CFECEA',
   tourquiseLight: '#E9F2ED',
+  iconColors: {
+    'bleeding': {
+      color: redColor,
+      shades: shadesOfRed,
+    },
+    'mucus': {
+      color: violetColor,
+      shades: shadesOfViolet,
+    },
+    'cervix': {
+      color: yellowColor,
+      shades: shadesOfYellow,
+    },
+    'sex': {
+      color: magentaColor,
+      shades: shadesOfMagenta,
+    },
+    'desire': {
+      color: pinkColor,
+      shades: shadesOfPink,
+    },
+    'pain': {
+      color: lightGreenColor,
+      shades: [lightGreenColor],
+    },
+    'mood': {
+      color: orangeColor,
+      shades: [orangeColor],
+    },
+    'note': {
+      color: mintColor,
+      shades: [mintColor],
+    },
+  },
 }

styles/typography.js

@@ -8,6 +8,7 @@ export const fonts = {
 
 export const sizes = {
   tiny: 7,
+  footnote: 10,
   small: 14,
   base: 18,
   subtitle: 22,
@@ -15,11 +16,6 @@ export const sizes = {
   huge: 40
 }
 
-const title = {
-  color: Colors.purple,
-  marginVertical: Spacing.large
-}
-
 const accentText = {
   fontFamily: fonts.bold,
   textAlignVertical: 'center',
@@ -46,6 +42,16 @@ const accentTextSmall = {
   fontSize: sizes.small
 }
 
+const title = {
+  color: Colors.purple,
+  marginVertical: Spacing.large
+}
+
+const label = {
+  fontSize: sizes.small,
+  textTransform: 'uppercase'
+}
+
 export default {
   accentOrange: {
     ...accentTextSmall,
@@ -67,6 +73,18 @@ export default {
     fontFamily: fonts.main,
     fontSize: sizes.base
   },
+  label: {
+    ...label
+  },
+  labelBold: {
+    color: Colors.greyDark,
+    fontWeight: 'bold',
+    ...label
+  },
+  labelLight: {
+    color: Colors.grey,
+    fontSize: sizes.footnote,
+  },
   subtitle: {
     fontSize: sizes.subtitle,
     ...title