Singleton themes

squarenotsquare/src/screens/styles/AppStyles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
-import * as colors from '../../themes/Colors';
-import * as fonts from '../../themes/Fonts';
-import * as metrics from '../../themes/Metrics';
+import Colors from '../../themes/Colors';
+import Fonts from '../../themes/Fonts';
+import Metrics from '../../themes/Metrics';
 
 export const styles = StyleSheet.create({
   flex: {flex: 1},
@@ -28,7 +28,7 @@ export const styles = StyleSheet.create({
   stretch: {alignSelf: 'stretch'},
   absolute: {
     position: 'absolute',
-    top: metrics.screenSections.headerHeight,
+    top: Metrics.screenSections.headerHeight,
     bottom: 0,
     left: 0,
     right: 0,
@@ -42,24 +42,20 @@ export const styles = StyleSheet.create({
   rightText: {textAlign: 'right'},
   leftText: {textAlign: 'left'},
   
-  headerTitleFont: {fontSize: fonts.headerTitle.size},
-  largeFont: {fontSize: fonts.large.size},
-  mediumFont: {fontSize: fonts.medium.size},
-  smallFont: {fontSize: fonts.small.size},
-  tinyFont: {fontSize: fonts.tiny.size},
-  subFont: {fontSize: fonts.subFont.size},
-  tickFont: {fontSize: fonts.tickFont.size},
+  headerTitleFont: {fontSize: Fonts.headerTitle.size},
+  largeFont: {fontSize: Fonts.large.size},
+  mediumFont: {fontSize: Fonts.medium.size},
+  smallFont: {fontSize: Fonts.small.size},
+  tinyFont: {fontSize: Fonts.tiny.size},
+  subFont: {fontSize: Fonts.subFont.size},
   
   italic: {fontStyle: 'italic'},
-  greyText: {color: colors.material.grey600},
-  redText: {color: colors.material.red800},
-  blueText: {color: colors.material.blue400},
+  greyText: {color: Colors.material.grey600},
+  redText: {color: Colors.material.red800},
+  blueText: {color: Colors.material.blue400},
   boldText: {fontWeight: 'bold'},
   
-  lightText: {color: colors.impulseColors.lightText},
-  darkText: {color: colors.impulseColors.black},
-  
   body: {
-    backgroundColor: colors.material.light,
+    backgroundColor: Colors.material.light,
   }
 })

squarenotsquare/src/themes/Colors.js

@@ -1,31 +1,36 @@
-export const material = {
-  dark: '#212121',
-  light: '#ffffff',
+class AppColors {
+  material = {
+    dark: '#212121',
+    light: '#ffffff',
   
-  //200
-  blue200: '#90caf9',
+    //200
+    blue200: '#90caf9',
     
-  //400
-  blue400: '#5c6bc0',
-  grey400: '#bdbdbd',
+    //400
+    blue400: '#5c6bc0',
+    grey400: '#bdbdbd',
     
-  //600
-  grey600: '#757575',
+    //600
+    grey600: '#757575',
     
-  //700
-  grey700: '#616161',
+    //700
+    grey700: '#616161',
     
-  //800
-  amber800: '#ff8f00',
-  blue800: '#1565c0',
-  red800: '#c62828',
-  red800dark: '#7f0000',
-  grey800: '#424242',
-  grey800dark: '#1b1b1b',
-  green800: '#2e7d32',
+    //800
+    amber800: '#ff8f00',
+    blue800: '#1565c0',
+    red800: '#c62828',
+    red800dark: '#7f0000',
+    grey800: '#424242',
+    grey800dark: '#1b1b1b',
+    green800: '#2e7d32',
+  }
+  
+  fonts = {
+    dark: '#000000',
+    light: '#ffffff'
+  };
 }
 
-export const fonts = {
-  dark: '#000000',
-  light: '#ffffff'
-};
+const Colors = new AppColors();
+export default Colors;

squarenotsquare/src/themes/Fonts.js

@@ -1,49 +1,55 @@
 import {PixelRatio} from 'react-native';
 
-const scalar = PixelRatio.getFontScale();
-
-function normalizeFont(size) {
-  return size * scalar
-};
-
-export const fonts = {
-  headerTitle: {
-    fam: 'arial',
-    size: normalizeFont(30),
-  },
-  
-  sectionHeader: {
-    fam: 'arial',
-    size: normalizeFont(26),
-  },
-  
-  large: {
-    fam: 'arial',
-    size: normalizeFont(22),
-  },
-  
-  medium: {
-    fam: 'arial',
-    size: normalizeFont(20),
-  },
-  
-  small: {
-    fam: 'arial',
-    size: normalizeFont(16),
-  },
-  
-  tiny: {
-    fam: 'arial',
-    size: normalizeFont(14),
-  },
-  
-  mini: {
-    fam: 'arial',
-    size: normalizeFont(10),
-  },
-  
-  subFont: {
-    fam: 'arial',
-    size: normalizeFont(8),
-  },
+class AppFonts {
+  constructor() {
+    this.scalar = PixelRatio.getFontScale();
+    
+    this.headerTitle = {
+      fam: 'arial',
+      size: this.normalizeFont(30),
+    }
+    
+    this.sectionHeader = {
+      fam: 'arial',
+      size: this.normalizeFont(26),
+    }
+    
+    this.large = {
+      fam: 'arial',
+      size: this.normalizeFont(22),
+    }
+    
+    this.medium = {
+      fam: 'arial',
+      size: this.normalizeFont(20),
+    }
+    
+    this.small = {
+      fam: 'arial',
+      size: this.normalizeFont(16),
+    }
+    
+    this.tiny = {
+      fam: 'arial',
+      size: this.normalizeFont(14),
+    }
+    
+    this.mini = {
+      fam: 'arial',
+      size: this.normalizeFont(10),
+    }
+    
+    this.subFont = {
+      fam: 'arial',
+      size: this.normalizeFont(8),
+    }
+  }
+
+  normalizeFont(size) {
+    let newSize = size * this.scalar;
+    return newSize;
+  };
 }
+
+const Fonts = new AppFonts();
+export default Fonts;

squarenotsquare/src/themes/Icons.js

@@ -1,5 +1,10 @@
-export const squareIcons = {
-  settings: 'cog-outline',
-  toggleOn: 'toggle-switch-on',
-  toggleOfff: 'toggle-switch-off'
-};
+class AppIcons {
+  squareIcons = {
+    settings: 'cog-outline',
+    toggleOn: 'toggle-switch-on',
+    toggleOfff: 'toggle-switch-off'
+  };
+}
+
+const Icons = new AppIcons();
+export default Icons;

squarenotsquare/src/themes/Metrics.js

@@ -1,25 +1,35 @@
 import { PixelRatio, Dimensions } from "react-native";
 
-let scalar = PixelRatio.get();
+class AppMetrics {
+  constructor(dimensions = Dimensions.get('window')) {
+    this.scalar = PixelRatio.get();
 
-function normalize(size){
-  return (size * scalar);
-}
-
-let dimensions = Dimensions.get('window');
+    let height = dimensions.height;
+    let width = dimensions.width;
     
-let height = dimensions.height;
-let width = dimensions.width;
+    if (width > height) {
+      this.screenHeight = width;
+      this.screenWidth = height;
+    } else {
+      this.screenWidth = width;
+      this.screenHeight = height;
+    }
+  }
 
-let screenWidth = width;
-let screenHeight = height;
+  normalize(size){
+    return (size * this.scalar);
+  }
 
-if (width > height) {
-  screenHeight = width;
-  screenWidth = height;
+  screenSections = {
+    headerHeight: this.normalize(20),
+    sectionWidth: this.screenWidth
+  }
 }
 
-export const screenSections = {
-  headerHeight: normalize(20),
-  sectionWidth: screenWidth
+const Metrics = new AppMetrics();
+export default Metrics;
+
+export function buildTestMetrics(dimensions){
+  const Metrics = new AppMetrics(dimensions);
+  return Metrics;
 }