feat(ui): add theme modules

Initial build out of reusable theme settings.

app/themes/base.js

@@ -0,0 +1,60 @@
+export const space = [0, 4, 8, 16, 32, 64, 128, 256]
+
+export const palette = {
+  white: '#ffffff',
+  black: '#000',
+  gray: '#959595',
+  lightningOrange: '#fd9800',
+  lightningBrown: '#4a2c00',
+  deepseaBlue: '#242633',
+  seaBlue: '#313340',
+  underwaterBlue: '#353745',
+  superGreen: '#39e673',
+  pineGreen: '#0d331a',
+  superRed: '#e63939',
+  mudBrown: '#330d0d'
+}
+
+export const fontSizes = {
+  xxs: '8px',
+  xs: '10px',
+  s: '11px',
+  m: '13px',
+  l: '15px',
+  xl: '18px',
+  xxl: '30px',
+  xxxl: '60px'
+}
+fontSizes[0] = fontSizes['xxs']
+fontSizes[1] = fontSizes['xs']
+fontSizes[2] = fontSizes['s']
+fontSizes[3] = fontSizes['m']
+fontSizes[4] = fontSizes['l']
+fontSizes[5] = fontSizes['xl']
+fontSizes[6] = fontSizes['xxl']
+fontSizes[7] = fontSizes['xxxl']
+
+export const fontWeights = {
+  normal: 400,
+  bold: 600
+}
+
+export const fonts = {
+  0: '"Roboto Light", Roboto, system-ui, sans-serif',
+  sans: '"Roboto Light", Roboto, system-ui, sans-serif',
+  mono: '"SF Mono", "Roboto Mono", Menlo, monospace'
+}
+
+export const letterSpacings = {
+  normal: 'normal',
+  caps: '0.025em'
+}
+
+export default {
+  space,
+  fontSizes,
+  fontWeights,
+  fonts,
+  letterSpacings,
+  palette
+}

app/themes/dark.js

@@ -0,0 +1,55 @@
+import base, { palette } from './base'
+
+const colors = {
+  ...palette,
+  invisibleGray: '#555',
+  darkestBackground: '#242633',
+  lightBackground: '#313340',
+  lightestBackground: '#373947',
+  highlight: '#353745',
+  primaryText: '#fff',
+  gradient: 'linear-gradient(270deg, #868b9f 0%, #333c5e 100%)'
+}
+
+const buttons = {
+  normal: {
+    backgroundColor: colors.lightBackground,
+    color: colors.lightningOrange,
+    '&:hover:enabled': {
+      backgroundColor: colors.highlight
+    }
+  },
+  primary: {
+    backgroundColor: colors.lightningOrange,
+    color: colors.white
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    color: colors.white,
+    '&:hover:enabled': {
+      color: colors.lightningOrange
+    }
+  }
+}
+const cards = {
+  success: {
+    backgroundColor: colors.pineGreen,
+    color: colors.superGreen
+  },
+  warning: {
+    backgroundColor: colors.lightningBrown,
+    color: colors.lightningOrange
+  },
+  error: {
+    backgroundColor: colors.mudBrown,
+    color: colors.superRed
+  }
+}
+
+export default {
+  name: 'dark',
+  ...base,
+  colors,
+  buttons,
+  cards
+}

app/themes/index.js

@@ -0,0 +1,4 @@
+import dark from './dark'
+import light from './light'
+
+export { dark, light }

app/themes/light.js

@@ -0,0 +1,67 @@
+import base, { palette } from './base'
+
+const colors = {
+  ...palette,
+  invisibleGray: '#555',
+  darkestBackground: '#fff',
+  lightBackground: '#ebebeb',
+  lightestBackground: '#f3f3f3',
+  highlight: '#f6f6f6',
+  primaryText: '#000',
+  gradient: 'linear-gradient(270deg, #fd9800 0%, #ffbd59 100%)'
+}
+
+const buttons = {
+  normal: {
+    backgroundColor: colors.lightBackground,
+    color: colors.lightningOrange,
+    '&:hover:enabled': {
+      backgroundColor: colors.highlight
+    }
+  },
+  primary: {
+    backgroundColor: colors.lightningOrange,
+    color: colors.white
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    color: colors.lightningOrange,
+    '&:hover:enabled': {
+      color: colors.black
+    }
+  }
+}
+const cards = {
+  success: {
+    backgroundColor: colors.pineGreen,
+    color: colors.superGreen
+  },
+  warning: {
+    backgroundColor: colors.lightningBrown,
+    color: colors.lightningOrange
+  },
+  error: {
+    backgroundColor: colors.mudBrown,
+    color: colors.superRed
+  }
+}
+const messages = {
+  success: {
+    color: colors.superGreen
+  },
+  warning: {
+    color: colors.lightningOrange
+  },
+  error: {
+    color: colors.superRed
+  }
+}
+
+export default {
+  name: 'light',
+  ...base,
+  colors,
+  buttons,
+  cards,
+  messages
+}