styles: Pass core theme data down as new-style context.

And demonstrate with one example component and style object,
`LineSeparator` and `styles.lineSeparator`.

To combine the theme data with details like height and margin that are
about the component and not the theme, use the same pattern introduced
in a2bfcb4 on ComposeBox: a class initializer.

Author: gnprice

src/boot/StylesProvider.js

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 
 import type { ChildrenArray, GlobalState, ThemeName } from '../types';
 import { getSettings } from '../directSelectors';
-import { stylesFromTheme } from '../styles/theme';
+import { stylesFromTheme, themeColors, ThemeContext } from '../styles/theme';
 
 const Dummy = props => props.children;
 
@@ -32,7 +32,11 @@ class StyleProvider extends PureComponent<Props> {
   render() {
     const { children, theme } = this.props;
 
-    return <Dummy key={theme}>{children}</Dummy>;
+    return (
+      <ThemeContext.Provider value={themeColors[theme]}>
+        <Dummy key={theme}>{children}</Dummy>
+      </ThemeContext.Provider>
+    );
   }
 }
 

src/common/LineSeparator.js

@@ -2,16 +2,22 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import type { Context } from '../types';
+import type { ThemeColors } from '../styles';
+import { ThemeContext } from '../styles';
 
 export default class LineSeparator extends PureComponent<{}> {
-  context: Context;
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
-  static contextTypes = {
-    styles: () => null,
+  styles = {
+    lineSeparator: {
+      height: 1,
+      backgroundColor: this.context.cardColor,
+      margin: 4,
+    },
   };
 
   render() {
-    return <View style={this.context.styles.lineSeparator} />;
+    return <View style={this.styles.lineSeparator} />;
   }
 }

src/styles/index.js

@@ -7,6 +7,8 @@ import { statics as navStyles } from './navStyles';
 import utilityStyles from './utilityStyles';
 
 export * from './constants';
+export type { ThemeColors } from './theme';
+export { ThemeContext } from './theme';
 
 export default StyleSheet.create({
   ...composeBoxStyles,

src/styles/miscStyles.js

@@ -58,7 +58,7 @@ export const statics = {
   },
 };
 
-export default ({ color, backgroundColor, cardColor, dividerColor }: ThemeColors) => ({
+export default ({ color, backgroundColor, dividerColor }: ThemeColors) => ({
   color: {
     color,
   },
@@ -105,9 +105,4 @@ export default ({ color, backgroundColor, cardColor, dividerColor }: ThemeColors
     borderBottomWidth: 1,
     borderBottomColor: dividerColor,
   },
-  lineSeparator: {
-    height: 1,
-    backgroundColor: cardColor,
-    margin: 4,
-  },
 });

src/styles/theme.js

@@ -1,4 +1,5 @@
 /* @flow strict-local */
+import React from 'react';
 import { StyleSheet } from 'react-native';
 
 import type { ThemeName } from '../types';
@@ -17,7 +18,7 @@ export type AppStyles = $ReadOnly<{|
   ...$Call<typeof miscStyles, ThemeColors>,
 |}>;
 
-const themeColors: { [string]: ThemeColors } = {
+export const themeColors: { [string]: ThemeColors } = {
   night: {
     color: '#d5d9dd',
     backgroundColor: '#212D3B',
@@ -37,6 +38,8 @@ const themeColors: { [string]: ThemeColors } = {
 };
 themeColors.default = themeColors.light;
 
+export const ThemeContext = React.createContext(themeColors.default);
+
 export const stylesFromTheme = (name: ThemeName) => {
   const colors = themeColors[name];
   return StyleSheet.create({