Upgrade Theme UI

hackclub · Jan 23, 2020 · 69f2ea3 · 69f2ea3
1 parent 9cc0bfe
commit 69f2ea3
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 384 deletions.
diff --git a/components/event-card.js b/components/event-card.js
@@ -1,4 +1,4 @@
-import { Card, Box, Heading, Text, Flex, Image } from '@theme-ui/components'
+import { Card, Box, Heading, Text, Flex, Image } from 'theme-ui'
 import Tilt from './tilt'
 import {
  imageSrc,

diff --git a/components/footer.js b/components/footer.js
@@ -1,5 +1,5 @@
 import Footer from './footer.mdx'
-import { Container, Box } from '@theme-ui/components'
+import { Container, Box } from 'theme-ui'
 
 export default () => (
  <Box

diff --git a/components/group-card.js b/components/group-card.js
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useThemeUI } from 'theme-ui'
-import { Card, Box, Heading, Text, Flex, Image } from '@theme-ui/components'
+import { Card, Box, Heading, Text, Flex, Image } from 'theme-ui'
 import { orderBy, first, last } from 'lodash'
 import { imageSrc, humanizedDateRange, formatAddress } from '../lib/util'
 import EventCard from './event-card'

diff --git a/components/grouping.js b/components/grouping.js
@@ -1,4 +1,4 @@
-import { Container, Box, Grid } from '@theme-ui/components'
+import { Container, Box, Grid } from 'theme-ui'
 import Header from '../components/header'
 import EventList from '../components/event-list'
 

diff --git a/components/header.js b/components/header.js
@@ -1,4 +1,4 @@
-import { Box, Container, Heading } from '@theme-ui/components'
+import { Box, Container, Heading } from 'theme-ui'
 import Meta from './meta'
 
 export default ({
@@ -28,7 +28,7 @@ export default ({
  variant="title"
  sx={{
  color: 'primary',
- maxWidth: 'narrowplus',
+ maxWidth: 'copyPlus',
  mx: centered && 'auto'
  }}
  children={title}

diff --git a/components/meta.js b/components/meta.js
@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { palette } from './theme'
+import { colors } from './theme'
 
 const name = 'Hack Club Hackathons'
 const makeTitle = title => (title === name ? title : `${title} – ${name}`)
@@ -8,7 +8,7 @@ export default ({
  title = name,
  description = 'Listing of upcoming high school hackathons around the world.',
  image = 'https://hackathons.now.sh/card.png',
- color = palette.red
+ color = colors.red
 }) => (
  <Head>
  <meta key="og_type" property="og:type" content="website" />

diff --git a/components/nav.js b/components/nav.js
@@ -1,12 +1,5 @@
 import { ArrowLeft, Plus, Moon, GitHub } from 'react-feather'
-import {
- Box,
- Container,
- IconButton,
- Button,
- Image,
- Link as A
-} from '@theme-ui/components'
+import { Box, Container, IconButton, Button, Image, Link as A } from 'theme-ui'
 import { useColorMode } from 'theme-ui'
 import { useRouter } from 'next/router'
 import Link from 'next/link'

diff --git a/components/regions.js b/components/regions.js
@@ -1,4 +1,4 @@
-import { Grid, Card, Heading } from '@theme-ui/components'
+import { Grid, Card, Heading } from 'theme-ui'
 import { kebabCase, snakeCase, startCase } from 'lodash'
 import Link from 'next/link'
 

diff --git a/components/signup.js b/components/signup.js
@@ -9,7 +9,7 @@ import {
  Button,
  Spinner,
  Alert
-} from '@theme-ui/components'
+} from 'theme-ui'
 import { AlertTriangle, Send } from 'react-feather'
 import fetch from 'isomorphic-unfetch'
 
@@ -65,7 +65,7 @@ export default ({ initialLocation, stats = {} }) => {
  return (
  <Card
  variant="sunken"
- sx={{ maxWidth: 'narrowplus', mx: 'auto', mt: [3, 4] }}
+ sx={{ maxWidth: 'narrowPlus', mx: 'auto', mt: [3, 4] }}
  >
  <Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
  Want to hear when events are added in your area?

diff --git a/components/theme.js b/components/theme.js
@@ -1,71 +1,65 @@
-import { base } from '@theme-ui/presets'
 import { merge } from 'lodash'
 
-export const breakpoints = [32, 48, 64, 96, 128].map(w => `${w}em`)
-
-export const palette = {
+export const colors = {
  darker: '#121217',
  dark: '#17171d',
  darkless: '#252429',
+
  black: '#1f2d3d',
  steel: '#273444',
  slate: '#3c4858',
  muted: '#8492a6',
  smoke: '#e0e6ed',
  snow: '#f9fafc',
  white: '#ffffff',
+
  red: '#ec3750',
  orange: '#ff8c37',
  yellow: '#f1c40f',
  green: '#33d6a6',
  cyan: '#5bc0de',
  blue: '#338eda',
+
  twitter: '#1da1f2',
  facebook: '#3b5998',
  instagram: '#e1306c'
 }
 
-const theme = merge(base, {
- breakpoints,
+const base = {
+ breakpoints: [32, 48, 64, 96, 128].map(w => `${w}em`),
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  fontSizes: [12, 16, 20, 24, 32, 48, 64, 96, 128],
  initialColorMode: 'light',
  useColorSchemeMediaQuery: true,
  colors: {
- ...palette,
- text: palette.black,
- background: palette.white,
- elevated: palette.white,
- sunken: palette.smoke,
- border: palette.smoke,
- placeholder: palette.muted,
- secondary: palette.slate,
- primary: palette.red,
- muted: palette.muted,
- accent: palette.blue,
- invertedPrimary: palette.white,
- invertedText: palette.white,
- header: palette.snow,
- nav: palette.white,
+ ...colors,
+ text: colors.black,
+ background: colors.white,
+ elevated: colors.white,
+ sunken: colors.smoke,
+ border: colors.smoke,
+ placeholder: colors.muted,
+ secondary: colors.slate,
+ primary: colors.red,
+ muted: colors.muted,
+ header: colors.snow,
  modes: {
  dark: {
- text: palette.white,
- background: palette.dark,
- elevated: palette.darkless,
- sunken: palette.darker,
- border: palette.darkless,
- placeholder: palette.slate,
- secondary: palette.muted,
- muted: palette.muted,
- accent: palette.cyan,
- invertedPrimary: palette.darker,
- invertedText: palette.dark,
- header: palette.darkless,
- nav: palette.red
+ text: colors.white,
+ background: colors.dark,
+ elevated: colors.darkless,
+ sunken: colors.darker,
+ border: colors.darkless,
+ placeholder: colors.slate,
+ secondary: colors.muted,
+ muted: colors.muted,
+ header: colors.darkless
  }
  }
  },
  fonts: {
+ heading:
+ '"Phantom Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  body:
  '"Phantom Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  monospace: '"SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace'
@@ -85,11 +79,13 @@ const theme = merge(base, {
  headline: '0.009em'
  },
  sizes: {
- ultrawide: 2048,
+ widePlus: 2048,
  wide: 1536,
- container: 1200,
- subcontainer: 1024,
- narrowplus: 768,
+ layoutPlus: 1200,
+ layout: 1024,
+ copyPlus: 768,
+ copy: 680,
+ narrowPlus: 600,
  narrow: 512
  },
  radii: {
@@ -108,10 +104,10 @@ const theme = merge(base, {
  lineHeight: 'heading'
  },
  title: {
+ fontSize: [4, 5, 6],
  fontWeight: 'bold',
- lineHeight: 'title',
  letterSpacing: 'title',
- fontSize: [4, 5, 6]
+ lineHeight: 'title'
  },
  subtitle: {
  fontSize: [2, 3, null, null, 4],
@@ -120,16 +116,14 @@ const theme = merge(base, {
  lineHeight: 'subheading'
  },
  headline: {
- fontWeight: 'bold',
- lineHeight: 'heading',
+ variant: 'text.heading',
  letterSpacing: 'headline',
  fontSize: 4,
  mt: 3,
  mb: 3
  },
  subheadline: {
- fontWeight: 'bold',
- lineHeight: 'heading',
+ variant: 'text.heading',
  letterSpacing: 'headline',
  fontSize: 2,
  mt: 0,
@@ -143,7 +137,7 @@ const theme = merge(base, {
  },
  alerts: {
  primary: {
- color: 'invertedText',
+ color: 'background',
  bg: 'orange',
  fontWeight: 'body'
  }
@@ -158,24 +152,22 @@ const theme = merge(base, {
  bg: 'primary',
  color: 'background',
  cursor: 'pointer',
- fontFamily: 'body',
+ fontFamily: 'inherit',
  fontWeight: 'bold',
  svg: { ml: -1, mr: 2 }
  },
- inverted: {
- bg: 'invertedPrimary',
- color: 'invertedText',
- cursor: 'pointer',
- fontFamily: 'body',
- fontWeight: 'bold',
- svg: { ml: -1, mr: 2 }
+ outline: {
+ variant: 'buttons.primary',
+ bg: 'transparent',
+ color: 'primary',
+ border: '2px solid currentColor'
  }
  },
  forms: {
  input: {
  bg: 'elevated',
  color: 'text',
- fontFamily: 'body',
+ fontFamily: 'inherit',
  borderRadius: 'base',
  boxShadow: 'small',
  transition: 'box-shadow .125s ease-in-out',
@@ -213,7 +205,48 @@ const theme = merge(base, {
  p: [3, 4],
  borderRadius: 'extra',
  'input, a': { bg: 'header', boxShadow: 'none !important' }
+ }
+ },
+ layout: {
+ container: {
+ maxWidth: ['layout', null, 'layoutPlus', null, 'wide'],
+ width: '100%',
+ mx: 'auto',
+ px: 3
+ },
+ wide: {
+ variant: 'layout.container',
+ maxWidth: ['wide', null, null, null, 'widePlus']
+ },
+ copy: {
+ variant: 'layout.container',
+ maxWidth: ['copy', null, null, null, 'copyPlus']
+ },
+ narrow: {
+ variant: 'layout.container',
+ maxWidth: ['narrow', null, 'narrowPlus', null, 'layout']
+ }
+ },
+ styles: {
+ root: {
+ fontFamily: 'body',
+ lineHeight: 'body',
+ fontWeight: 'body',
+ color: 'text',
+ margin: 0,
+ minHeight: '100vh'
+ },
+ a: {
+ color: 'primary'
  },
+ img: {
+ maxWidth: '100%'
+ }
+ }
+}
+
+const theme = merge(base, {
+ cards: {
  event: {
  display: 'flex',
  flexDirection: 'column',
@@ -254,43 +287,7 @@ const theme = merge(base, {
  boxShadow: 'elevated'
  }
  }
- },
- layout: {
- container: {
- width: '100%',
- maxWidth: ['container', null, null, null, 'wide'],
- mx: 'auto',
- px: 3
- },
- wide: {
- width: '100%',
- maxWidth: ['wide', null, null, null, 'ultrawide'],
- mx: 'auto',
- px: 3
- },
- narrow: {
- width: '100%',
- maxWidth: ['narrow', null, null, null, 'container'],
- mx: 'auto',
- px: 3
- }
- },
- styles: {
- hr: {
- borderColor: 'border',
- my: [3, 4]
- }
  }
 })
-theme.styles.root = {
- fontFamily: theme.fonts.body,
- lineHeight: theme.lineHeights.body,
- fontWeight: theme.fontWeights.body,
- color: theme.colors.text,
- margin: 0,
- minHeight: '100vh',
- display: 'flex',
- flexDirection: 'column'
-}
 
 export default theme
diff --git a/components/years.js b/components/years.js
@@ -1,14 +1,14 @@
-import { Grid, Card } from '@theme-ui/components'
+import { Grid, Card } from 'theme-ui'
 import { pick, split, range } from 'lodash'
 import Link from 'next/link'
-import { palette } from './theme'
+import { colors } from './theme'
 
 const years = range(2017, new Date().getFullYear() + 1)
 
-const colors = pick(palette, split('red,orange,yellow,green,cyan,blue', ','))
+const palette = pick(colors, split('red,orange,yellow,green,cyan,blue', ','))
 const rainbow = {}
-Object.entries(colors).map(([name, bg], i) => {
- rainbow[`&:nth-of-type(${Object.keys(colors).length}n + ${i + 1})`] = { bg }
+Object.entries(palette).map(([name, bg], i) => {
+ rainbow[`&:nth-of-type(${Object.keys(palette).length}n + ${i + 1})`] = { bg }
 })
 
 export default ({ showAll = false }) => (