chore(theme): hookup styled-theming in theme colors

app/theme.js

@@ -12,7 +12,6 @@ const darkOne = '#F4B728';
 const blackTwo = '#171717';
 const lightOne = '#ffffff';
 const brandOne = '#000';
-// const brandTwo = '#3B3B3F';
 const brandThree = '#5d5d65';
 const buttonBorderColor = '#3e3c42';
 const activeItem = '#F4B728';
@@ -46,39 +45,106 @@ const appTheme: AppTheme = {
     small: 0.667,
   },
   colors: {
-    // $FlowFixMe
     primary: theme('mode', {
       light: lightOne,
       dark: darkOne,
     }),
-    // $FlowFixMe
     secondary: theme('mode', {
       light: darkOne,
       dark: lightOne,
     }),
-    sidebarBg: brandOne,
-    sidebarItem: brandThree,
-    sidebarItemActive: activeItem,
-    sidebarHoveredItem,
-    sidebarHoveredItemLabel,
-    cardBackgroundColor,
-    text,
-    activeItem,
-    inactiveItem: brandThree,
-    sidebarLogoGradientBegin,
-    sidebarLogoGradientEnd,
-    background,
-    transactionSent,
-    transactionReceived,
-    transactionsDate,
-    transactionsItemHovered,
-    inputBackground: brandOne,
-    selectButtonShadow,
-    transactionsDetailsLabel,
-    statusPillLabel,
-    modalItemLabel: transactionsDate,
-    blackTwo,
-    buttonBorderColor,
+    sidebarBg: theme('mode', {
+      light: brandOne,
+      dark: brandOne,
+    }),
+    sidebarItem: theme('mode', {
+      light: brandThree,
+      dark: brandThree,
+    }),
+    sidebarItemActive: theme('mode', {
+      light: activeItem,
+      dark: activeItem,
+    }),
+    sidebarHoveredItem: theme('mode', {
+      light: sidebarHoveredItem,
+      dark: sidebarHoveredItem,
+    }),
+    sidebarHoveredItemLabel: theme('mode', {
+      light: sidebarHoveredItemLabel,
+      dark: sidebarHoveredItemLabel,
+    }),
+    cardBackgroundColor: theme('mode', {
+      light: cardBackgroundColor,
+      dark: cardBackgroundColor,
+    }),
+    text: theme('mode', {
+      light: '#000',
+      dark: text,
+    }),
+    activeItem: theme('mode', {
+      light: activeItem,
+      dark: activeItem,
+    }),
+    inactiveItem: theme('mode', {
+      light: brandThree,
+      dark: brandThree,
+    }),
+    sidebarLogoGradientBegin: theme('mode', {
+      light: sidebarLogoGradientBegin,
+      dark: sidebarLogoGradientBegin,
+    }),
+    sidebarLogoGradientEnd: theme('mode', {
+      light: sidebarLogoGradientEnd,
+      dark: sidebarLogoGradientEnd,
+    }),
+    background: theme('mode', {
+      light: '#FFF',
+      dark: background,
+    }),
+    transactionSent: theme('mode', {
+      light: transactionSent,
+      dark: transactionSent,
+    }),
+    transactionReceived: theme('mode', {
+      light: transactionReceived,
+      dark: transactionReceived,
+    }),
+    transactionsDate: theme('mode', {
+      light: transactionsDate,
+      dark: transactionsDate,
+    }),
+    transactionsItemHovered: theme('mode', {
+      light: transactionsItemHovered,
+      dark: transactionsItemHovered,
+    }),
+    inputBackground: theme('mode', {
+      light: brandOne,
+      dark: brandOne,
+    }),
+    selectButtonShadow: theme('mode', {
+      light: selectButtonShadow,
+      dark: selectButtonShadow,
+    }),
+    transactionsDetailsLabel: theme('mode', {
+      light: transactionsDetailsLabel,
+      dark: transactionsDetailsLabel,
+    }),
+    statusPillLabel: theme('mode', {
+      light: statusPillLabel,
+      dark: statusPillLabel,
+    }),
+    modalItemLabel: theme('mode', {
+      light: transactionsDate,
+      dark: transactionsDate,
+    }),
+    blackTwo: theme('mode', {
+      light: blackTwo,
+      dark: blackTwo,
+    }),
+    buttonBorderColor: theme('mode', {
+      light: buttonBorderColor,
+      dark: buttonBorderColor,
+    }),
   },
   sidebarWidth: '180px',
   headerHeight: '60px',

flow-custom-typedefs/theme.js

@@ -1,29 +1,31 @@
+import { ThemeSet } from 'styled-theming';
+
 type Colors = {
-  primary: string,
-  secondary: string,
-  sidebarBg: string,
-  sidebarItem: string,
-  sidebarItemActive: string,
-  sidebarHoveredItem: string,
-  sidebarHoveredItemLabel: string,
-  cardBackgroundColor: string,
-  text: string,
-  activeItem: string,
-  inactiveItem: string,
-  sidebarLogoGradientBegin: string,
-  sidebarLogoGradientEnd: string,
-  background: string,
-  transactionSent: string,
-  transactionReceived: string,
-  transactionsDate: string,
-  transactionsItemHovered: string,
-  inputBackground: string,
-  selectButtonShadow: string,
-  transactionsDetailsLabel: string,
-  statusPillLabel: string,
-  modalItemLabel: string,
-  blackTwo: string,
-  buttonBorderColor: string,
+  primary: ThemeSet,
+  secondary: ThemeSet,
+  sidebarBg: ThemeSet,
+  sidebarItem: ThemeSet,
+  sidebarItemActive: ThemeSet,
+  sidebarHoveredItem: ThemeSet,
+  sidebarHoveredItemLabel: ThemeSet,
+  cardBackgroundColor: ThemeSet,
+  text: ThemeSet,
+  activeItem: ThemeSet,
+  inactiveItem: ThemeSet,
+  sidebarLogoGradientBegin: ThemeSet,
+  sidebarLogoGradientEnd: ThemeSet,
+  background: ThemeSet,
+  transactionSent: ThemeSet,
+  transactionReceived: ThemeSet,
+  transactionsDate: ThemeSet,
+  transactionsItemHovered: ThemeSet,
+  inputBackground: ThemeSet,
+  selectButtonShadow: ThemeSet,
+  transactionsDetailsLabel: ThemeSet,
+  statusPillLabel: ThemeSet,
+  modalItemLabel: ThemeSet,
+  blackTwo: ThemeSet,
+  buttonBorderColor: ThemeSet,
 };
 
 type FontSize = {
@@ -54,7 +56,6 @@ type AppTheme = {
   transitionEase: string,
 };
 
-// =(
 declare type PropsWithTheme<T = {}> = {
   ...T,
   theme: AppTheme,