preferred default theme: colors, fonts, & sizing

theme.js

const theme = {
  font: {
    sans: [
      '-apple-system',
      'system-ui',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Helvetica',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol";'
    ].join(', '),
    mono: [
      'Cousine',
      '"SF Mono"',
      'Menlo',
      'Monaco',
      'monospace;'
    ].join(', ')
  },
  color: {
    white: '#fefefe',
    white0: '#f3f5f6', // "dark white"
    black: '#20272d',
    gray: '#dce1e6',
    gray0: '#727C84', // darker
    gray1: '#7a8691', // lighter
    gray2: '#dee2e5', // lightest
    
    // Based on Apple UI colors
    red: '#ff3b30',
    orange: '#ff9500',
    yellow: '#ffcc00',
    green: '#4cd964',
    tealBlue: '#5ac8fa',
    blue: '#007aff',
    purple: '#5856d6',
    pink: '#ff2d55',

    text: '#20272d', // black
    
    inactive: '#7a8691', // gray0
    border: '#20272d', // black
    lightBorder: '#dee2e5', // gray2
  },
  size: {
    text: {
      tiny: '0.8em',
      small: '0.875em',
      big: '1.2em',
      huge: '1.5em',
    },
    topbar: {
      height: '3rem'
    }
  }
}

export const globalStyles = `
  html, body {
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    background: ${theme.color.white};
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-family: ${theme.font.sans};
    color: ${theme.color.text};
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  h1 { font-size: ${theme.size.text.huge}; }
  h2 { font-size: ${theme.size.text.big}; }
  h3 { font-size: 1em; }
  h4 { font-size: ${theme.size.text.small}; }
`

export default theme