Add basic theme provider, start working on user settings theme changing

2 years ago · dfcf7d33d7
10 changed files with 726 additions and 124 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,8 @@
    "@pika/react": "^16.13.1",
    "@pika/react-dom": "^16.13.1",
    "@reach/combobox": "^0.10.5",
+    "@theme-ui/color": "^0.3.1",
+    "@theme-ui/presets": "^0.3.0",
    "@types/autosize": "^3.0.7",
    "@types/js-cookie": "^2.2.6",
    "@types/jwt-decode": "^2.2.1",
@ -26,6 +28,7 @@
    "@types/react": "^16.9.44",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
+    "@types/theme-ui": "^0.3.6",
    "autosize": "^4.0.2",
    "body-scroll-lock": "^3.0.3",
    "bootswatch": "^4.5.0",
@ -55,6 +58,7 @@
    "register-service-worker": "^1.7.1",
    "rxjs": "^6.6.2",
    "terser": "^5.0.0",
+    "theme-ui": "^0.3.1",
    "tippy.js": "^6.2.6",
    "toastify-js": "^1.9.0",
    "tributejs": "^5.1.3",
--- a/src/components/ThemeSystemProvider.tsx
+++ b/src/components/ThemeSystemProvider.tsx
@ -0,0 +1,51 @@
+import React, { useState, useContext, createContext, useEffect } from "react";
+import { ThemeProvider } from "theme-ui";
+import { UserService } from "../services";
+import { themes } from "../theme";
+
+const ThemeSystem = createContext({});
+
+
+function ThemeSystemProvider({ children }) {
+  const [currentTheme, setCurrentTheme] = useState('dark');
+
+  const theme = Object.keys(themes).includes(currentTheme) ? themes[currentTheme] : themes.dark;
+
+  useEffect(() => {
+    const theme = UserService?.Instance?.user?.theme;
+
+    if (theme) {
+      setCurrentTheme(theme);
+    }
+  }, [])
+
+  useEffect(() => {
+    function handleThemeChange(e) {
+      setCurrentTheme(e.detail)
+    }
+
+    document.addEventListener('change-theme', handleThemeChange)
+
+    return () => document.removeEventListener('change-theme', handleThemeChange);
+  }, []);
+
+  return (
+    <ThemeSystem.Provider
+      value={{
+        currentTheme,
+        setCurrentTheme,
+      }}
+    >
+      <ThemeProvider theme={theme}>
+        {children}
+      </ThemeProvider>
+    </ThemeSystem.Provider>
+  )
+}
+
+// you can also create this helper to avoid having to import two things to use this context
+const useThemeSystem = () => {
+  return useContext(ThemeSystem);
+}
+
+export { ThemeSystemProvider, ThemeSystem, useThemeSystem };
--- a/src/components/elements/Button.tsx
+++ b/src/components/elements/Button.tsx
--- a/src/components/main.tsx
+++ b/src/components/main.tsx
@ -59,6 +59,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import { PATREON_URL } from '../constants';
 import { Icon } from './icon';
 import { linkEvent } from '../linkEvent';
+import { Box, Button, Flex } from 'theme-ui';

 interface MainState {
  subscribedCommunities: Array<CommunityUser>;
@ -239,12 +240,11 @@ class Main extends Component<any, MainState> {
                    </div>
                  )}
                {this.showCreateCommunity() && (
-                  <Link
-                    className="btn btn-sm btn-secondary btn-block"
-                    to="/create_community"
-                  >
-                    {i18n.t('create_a_community')}
-                  </Link>
+                  <Flex>
+                    <Button css={{ width: '100%' }} as={Link} to="/create_community">
+                      {i18n.t('create_a_community')}
+                    </Button>
+                  </Flex>
                )}
              </div>
            </div>
--- a/src/components/post-form.tsx
+++ b/src/components/post-form.tsx
@ -52,6 +52,7 @@ import {
  ComboboxOptionText,
 } from "@reach/combobox";
 import "@reach/combobox/styles.css";
+import { Button } from 'theme-ui';

 export const MAX_POST_TITLE_LENGTH = 160;
 export const MAX_POST_BODY_LENGTH = 20000;
@ -487,14 +488,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
          )}
          <div className="form-group row">
            <div className="col-sm-10">
-              <button
+              <Button
+                mr={2}
                disabled={
                  !this.state.postForm.community_id ||
                  this.state.loading ||
                  postTitleBlank
                }
                type="submit"
-                className="btn btn-secondary mr-2"
              >
                {this.state.loading ? (
                  <svg className="icon icon-spinner spin">
@ -505,15 +506,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                ) : (
                  capitalizeFirstLetter(i18n.t('create'))
                )}
-              </button>
+              </Button>
              {this.props.post && (
-                <button
+                <Button
                  type="button"
-                  className="btn btn-secondary"
                  onClick={linkEvent(this, this.handleCancel)}
                >
                  {i18n.t('cancel')}
-                </button>
+                </Button>
              )}
            </div>
          </div>
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@ -27,8 +27,8 @@ import {
  fetchLimit,
  routeSortTypeToEnum,
  capitalizeFirstLetter,
-  themes,
-  setTheme,
+  // themes,
+  // setTheme,
  languages,
  showAvatars,
  toast,
@ -46,6 +46,8 @@ import moment from 'moment';
 import { UserDetails } from './user-details';
 import { Icon } from './icon';
 import { linkEvent } from '../linkEvent';
+import { changeTheme, themes, ThemeSelector } from '../theme';
+// import { changeTheme } from './ThemeSystemProvider';

 interface UserState {
  user: UserView;
@ -591,16 +593,20 @@ class BaseUser extends Component<any, UserState> {
                <label>{i18n.t('theme')}</label>
                <select
                  value={this.state.userSettingsForm.theme}
-                  onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
+                  onChange={this.handleUserSettingsThemeChange}
                  className="ml-2 custom-select custom-select-sm w-auto"
                >
                  <option disabled>{i18n.t('theme')}</option>
-                  {themes.map(theme => (
+                  {Object.keys(themes).map(theme => (
                    <option key={theme} value={theme}>
                      {theme}
                    </option>
                  ))}
                </select>
+                <ThemeSelector
+                  value={this.state.userSettingsForm.theme}
+                  onChange={this.handleUserSettingsThemeChange}
+                />
                <div className="small alert alert-warning my-2">
                  Stick with Darkly for the best ChapoChat experience. Themes
                  are bugged right now, but we&apos;ll be rebuilding themes soon
@ -1034,10 +1040,9 @@ class BaseUser extends Component<any, UserState> {
    i.setState(i.state);
  }

-  handleUserSettingsThemeChange(i: BaseUser, event: any) {
-    i.state.userSettingsForm.theme = event.target.value;
-    setTheme(event.target.value, true);
-    i.setState(i.state);
+  handleUserSettingsThemeChange = (event: any) => {
+    changeTheme(event.target.value);
+    this.setState({ userSettingsForm: { ...this.state.userSettingsForm, theme: event.target.value } });
  }

  handleUserSettingsLangChange(i: BaseUser, event: any) {
--- a/src/index.tsx
+++ b/src/index.tsx
@ -40,6 +40,7 @@ import PrivacyPolicy from './components/privacy-policy';

 import './custom.css';
 import './variables.css';
+import { ThemeSystemProvider } from './components/ThemeSystemProvider';

 const container = document.getElementById('app');

@ -59,80 +60,82 @@ class Index extends Component<any, any> {
  render() {
    return (
      <React.StrictMode>
-      <I18nextProvider i18n={i18n}>
-        <BrowserRouter>
-          <div>
-            <Navbar />
-            <div className="mt-4 p-0 fl-1">
-              <Switch>
-                <Route exact path="/" component={Main} />
-                {/* <Route exact path={`/`} component={WelcomePage} /> */}
-                <Route path="/ppb" component={PPB} />
-                <Route
-                  path="/home/data_type/:data_type/listing_type/:listing_type/sort/:sort/page/:page"
-                  component={Main}
-                />
-                <Route path="/login" component={Login} />
-                <Route path="/create_post" component={CreatePost} />
-                <Route path="/create_community" component={CreateCommunity} />
-                <Route
-                  path="/create_private_message"
-                  component={CreatePrivateMessage}
-                />
-                <Route
-                  path="/communities/page/:page"
-                  component={Communities}
-                />
-                <Route path="/communities" component={Communities} />
-                <Route
-                  path="/post/:id/comment/:comment_id"
-                  component={Post}
-                />
-                <Route path="/post/:id" component={Post} />
-                <Route
-                  path="/c/:name/data_type/:data_type/sort/:sort/page/:page"
-                  component={Community}
-                />
-                <Route path="/community/:id" component={Community} />
-                <Route path="/c/:name" component={Community} />
-                <Route
-                  path="/u/:username/view/:view/sort/:sort/page/:page"
-                  component={User}
-                />
-                <Route path="/user/:id" component={User} />
-                <Route path="/u/:username" component={User} />
-                <Route path="/inbox" component={Inbox} />
-                <Route
-                  path="/modlog/community/:community_id"
-                  component={Modlog}
-                />
-                <Route path="/modlog" component={Modlog} />
-                <Route path="/about" component={About} />
-                <Route path="/setup" component={Setup} />
-                <Route path="/admin" component={AdminSettings} />
-                <Route
-                  path="/search/q/:q/type/:type/sort/:sort/page/:page"
-                  component={Search}
-                />
-                <Route path="/search" component={Search} />
-                <Route path="/sponsors" component={Sponsors} />
-                <Route path="/contributing" component={Sponsors} />
-                <Route
-                  path="/password_change/:token"
-                  component={PasswordChange}
-                />
-                <Route path="/pbb" component={PPB} />
-                <Route path="/welcome" component={WelcomePage} />
-                <Route path="/reports" component={Reports} />
-                <Route path="/tos" component={Tos} />
-                <Route path="/privacy_policy" component={PrivacyPolicy} />
-              </Switch>
-              <Symbols />
-            </div>
-            <Footer />
-          </div>
-        </BrowserRouter>
-      </I18nextProvider>
+        <ThemeSystemProvider>
+          <I18nextProvider i18n={i18n}>
+            <BrowserRouter>
+              <div>
+                <Navbar />
+                <div className="mt-4 p-0 fl-1">
+                  <Switch>
+                    <Route exact path="/" component={Main} />
+                    {/* <Route exact path={`/`} component={WelcomePage} /> */}
+                    <Route path="/ppb" component={PPB} />
+                    <Route
+                      path="/home/data_type/:data_type/listing_type/:listing_type/sort/:sort/page/:page"
+                      component={Main}
+                    />
+                    <Route path="/login" component={Login} />
+                    <Route path="/create_post" component={CreatePost} />
+                    <Route path="/create_community" component={CreateCommunity} />
+                    <Route
+                      path="/create_private_message"
+                      component={CreatePrivateMessage}
+                    />
+                    <Route
+                      path="/communities/page/:page"
+                      component={Communities}
+                    />
+                    <Route path="/communities" component={Communities} />
+                    <Route
+                      path="/post/:id/comment/:comment_id"
+                      component={Post}
+                    />
+                    <Route path="/post/:id" component={Post} />
+                    <Route
+                      path="/c/:name/data_type/:data_type/sort/:sort/page/:page"
+                      component={Community}
+                    />
+                    <Route path="/community/:id" component={Community} />
+                    <Route path="/c/:name" component={Community} />
+                    <Route
+                      path="/u/:username/view/:view/sort/:sort/page/:page"
+                      component={User}
+                    />
+                    <Route path="/user/:id" component={User} />
+                    <Route path="/u/:username" component={User} />
+                    <Route path="/inbox" component={Inbox} />
+                    <Route
+                      path="/modlog/community/:community_id"
+                      component={Modlog}
+                    />
+                    <Route path="/modlog" component={Modlog} />
+                    <Route path="/about" component={About} />
+                    <Route path="/setup" component={Setup} />
+                    <Route path="/admin" component={AdminSettings} />
+                    <Route
+                      path="/search/q/:q/type/:type/sort/:sort/page/:page"
+                      component={Search}
+                    />
+                    <Route path="/search" component={Search} />
+                    <Route path="/sponsors" component={Sponsors} />
+                    <Route path="/contributing" component={Sponsors} />
+                    <Route
+                      path="/password_change/:token"
+                      component={PasswordChange}
+                    />
+                    <Route path="/pbb" component={PPB} />
+                    <Route path="/welcome" component={WelcomePage} />
+                    <Route path="/reports" component={Reports} />
+                    <Route path="/tos" component={Tos} />
+                    <Route path="/privacy_policy" component={PrivacyPolicy} />
+                  </Switch>
+                  <Symbols />
+                </div>
+                <Footer />
+              </div>
+            </BrowserRouter>
+          </I18nextProvider>
+        </ThemeSystemProvider>
      </React.StrictMode>
    );
  }
--- a/src/theme.tsx
+++ b/src/theme.tsx
@ -0,0 +1,75 @@
+import React from 'react';
+
+import * as allThemes from "@theme-ui/presets";
+import { Theme, ThemeProviderProps } from "theme-ui";
+import { darken } from "@theme-ui/color";
+import { i18n } from './i18next';
+import { useThemeSystem } from './components/ThemeSystemProvider';
+
+const { dark } = allThemes;
+
+const defaultTheme: ThemeProviderProps<Theme> = {
+  ...dark,
+  colors: {
+    ...dark.colors,
+    primary: '#DA1B9A',
+    secondary: '#2030DF',
+    accent: '#2030DF',
+  },
+  buttons: {
+    primary: {
+      color: '#dedede',
+      backgroundColor: '#444',
+      // backgroundColor: 'primary',
+      '&:hover': {
+        color: '#dedede',
+        textDecoration: 'none',
+        // backgroundColor: darken('primary', 0.05),
+        backgroundColor: darken('#444', 0.1)
+      },
+      '&:disabled': {
+        opacity: 0.65,
+        cursor: 'not-allowed',
+        backgroundColor: '#444',
+      }
+    }
+  }
+}
+
+export const themes = {
+  chapo: defaultTheme,
+  ...allThemes,
+}
+
+export function ThemeSelector({ value, onChange }) {
+  const { setCurrentTheme } = useThemeSystem();
+  // console.log({ context });
+
+  function handleThemeChange(e) {
+    setCurrentTheme(e.target.value)
+    onChange(e);
+  }
+
+  return (
+    <select
+      value={value}
+      onBlur={handleThemeChange}
+      className="ml-2 custom-select custom-select-sm w-auto"
+    >
+      <option disabled>{i18n.t('theme')}</option>
+      {Object.keys(themes).map(theme => (
+        <option key={theme} value={theme}>
+          {theme}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+// create custom event to allow theme to be changed from anywhere
+export function changeTheme(themeName = 'chapo') {
+  const event = new CustomEvent('change-theme', { detail: themeName });
+  document.dispatchEvent(event);
+}
+
+export default defaultTheme;
--- a/src/utils.ts
+++ b/src/utils.ts
@ -379,7 +379,7 @@ export function debounce(
 }

 export function getLanguage(): string {
-  let user = UserService.Instance.user;
+  let user = UserService?.Instance?.user;
  let lang = user && user.lang ? user.lang : 'browser';

  if (lang == 'browser') {
@ -456,31 +456,10 @@ export function getMomentLanguage(): string {
 }

 export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) {
-  // unload all the other themes
-  for (var i = 0; i < themes.length; i++) {
-    let styleSheet = document.getElementById(themes[i]);
-    if (styleSheet) {
-      styleSheet.setAttribute('disabled', 'disabled');
-    }
-  }
-
-  // if the user is not logged in, we load the default themes and let the browser decide
-  if (!loggedIn) {
-    document.getElementById('default-light')?.removeAttribute('disabled');
-    document.getElementById('default-dark')?.removeAttribute('disabled');
-  } else {
-    document
-      .getElementById('default-light')
-      .setAttribute('disabled', 'disabled');
-    document
-      .getElementById('default-dark')
-      .setAttribute('disabled', 'disabled');
-
-    // Load the theme dynamically
-    let cssLoc = `${BASE_PATH}css/themes/${theme}.min.css`;
-    loadCss(theme, cssLoc);
-    document.getElementById(theme).removeAttribute('disabled');
-  }
+  console.log('CHANGING THEME:');
+  console.log({ theme });
+  const event = new CustomEvent("change-theme", { detail: theme });
+  document.dispatchEvent(event);
 }

 export function loadCss(id: string, loc: string) {
--- a/yarn.lock
+++ b/yarn.lock
@ -63,7 +63,7 @@
  dependencies:
    "@babel/types" "^7.11.0"

-"@babel/[email protected]^7.10.4":
+"@babel/[email protected]^7.0.0", "@babel/[email protected]^7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
@ -158,6 +158,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/[email protected]^7.7.2", "@babel/[email protected]^7.9.2":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/[email protected]^7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@ -191,6 +198,108 @@
    lodash "^4.17.19"
    to-fast-properties "^2.0.0"

+"@emotion/[email protected]^10.0.27":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/[email protected]^10.0.0":
+  version "10.0.28"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
+  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/[email protected]^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/[email protected]":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/[email protected]", "@emotion/[email protected]^0.8.1":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/[email protected]", "@emotion/[email protected]^0.7.1":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/[email protected]^0.11.15", "@emotion/[email protected]^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
+"@emotion/[email protected]":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/styled-bas[email protected]^10.0.27":
+  version "10.0.31"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
+  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.8"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/[email protected]^10.0.0":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
+  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
+  dependencies:
+    "@emotion/styled-base" "^10.0.27"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/[email protected]":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/[email protected]":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/[email protected]":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
+"@emotion/[email protected]":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@fortawesome/[email protected]^0.2.30":
  version "0.2.30"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz#2f1cc5b46bd76723be41d0013a8450c9ba92b777"
@ -253,6 +362,11 @@
    tslib "^2.0.0"
    twemoji "^13.0.0"

+"@mdx-js/[email protected]^1.0.0":
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.16.tgz#538eb14473194d0b3c54020cb230e426174315cd"
+  integrity sha512-+FhuSVOPo7+4fZaRwWuCSRUcZkJOkZu0rfAbBKvoCg1LWb1Td8Vzi0DTLORdSvgWNbU6+EL40HIgwTOs00x2Jw==
+
 "@nodelib/[email protected]":
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@ -404,6 +518,267 @@
    estree-walker "^1.0.1"
    picomatch "^2.2.2"

+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
+  integrity sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6"
+  integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43"
+  integrity sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/core/-/core-5.1.2.tgz#b8b7b86455d5a0514f071c4fa8e434b987f6a772"
+  integrity sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==
+  dependencies:
+    object-assign "^4.1.1"
+
+"@styled-system/[email protected]^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc"
+  integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf"
+  integrity sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.1.2.tgz#7165049877732900b99cd00759679fbe45c6c573"
+  integrity sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.1.2.tgz#12d73e79887e10062f4dbbbc2067462eace42339"
+  integrity sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.1.2.tgz#56961266566836f57a24d8e8e33ce0c1adb59dd3"
+  integrity sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.1.2.tgz#beddab28d7de03cd0177a87ac4ed3b3b6d9831fd"
+  integrity sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
+  integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
+  dependencies:
+    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/memoize" "^0.7.1"
+    styled-system "^5.1.5"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953"
+  integrity sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.2.tgz#65fb791c67d50cd2900d234583eaacdca8c134f7"
+  integrity sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+
+"@styled-system/[email protected]^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd"
+  integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==
+  dependencies:
+    "@styled-system/core" "^5.1.2"
+    "@styled-system/css" "^5.1.5"
+
+"@theme-ui/[email protected]^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.3.1.tgz#8c2b18fb170e6c998287b7381240a8b9cca8b0d1"
+  integrity sha512-WuZGgFW7M5wOWSse1PVZCEfM0OZip15/D6U3bB3B9KmWax7qiSnAm1yAMLRQKC+QYhndrjq3xU+WAQm11KnhIw==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@theme-ui/core" "^0.3.1"
+    "@theme-ui/css" "^0.3.1"
+    deepmerge "^4.2.2"
+
+"@theme-ui/[email protected]^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/color/-/color-0.3.1.tgz#fceffc0be305ad6ca6be9755ac9cafc955b1e6f5"
+  integrity sha512-Bgew6etspp087AdrKuMpcWjIQDQ8UTp28wtHCXgi1Ip5ClFn9i91DvaKgqXk9UwQJFL/IwydX8Bks/+u9tf0WA==
+  dependencies:
+    "@theme-ui/css" "^0.3.1"
+    polished "^3.4.1"
+
+"@theme-ui/[email protected]^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.3.1.tgz#fe023e156c1e1c076d5f2258466426e94adc2765"
+  integrity sha512-uG4dUM61s4tWv6N34uxs5VIh24bJyA/7TrYJ75WDiI+s72zbcNG7aGRpvX/hSZnAhxjdXpuskdEM3eEgOabdEg==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@styled-system/color" "^5.1.2"
+    "@styled-system/should-forward-prop" "^5.1.2"
+    "@styled-system/space" "^5.1.2"
+    "@theme-ui/css" "^0.3.1"
+
+"@theme-ui/[email protected]^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.3.1.tgz#dbe9800b9d6e923e1a7417e6adebce21524f8c02"
+  integrity sha512-cK6EVSOx0Kyx1Xpi4qb0JTLIxywx0DRh+53Ln1foXMplF2qKaDsFi3vD6duHIlT331E3CNOa9dftHHNM7y4rbA==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@theme-ui/css" "^0.3.1"
+    deepmerge "^4.2.2"
+
+"@theme-ui/[email protected]^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.3.1.tgz#b85c7e8fae948dc0de65aa30b853368993e25cb3"
+  integrity sha512-QB2/fZBpo4inaLHL3OrB8NOBgNfwnj8GtHzXWHb9iQSRjmtNX8zPXBe32jLT7qQP0+y8JxPT4YChZIkm5ZyIdg==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.3.0.tgz#8bb1342204acfaa69914d6b6567c5c49d9a8c1e6"
+  integrity sha512-/GHBNKqmUptWwkmF+zIASVQtjYs81XMEwtqPCHnHuaaCzhZxcXrtCwvcAgmCXF8hpRttCXVVxw1X3Gt0mhzaTQ==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@mdx-js/react" "^1.0.0"
+
+"@theme-ui/[email protected]^0.2.44":
+  version "0.2.44"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-base/-/preset-base-0.2.44.tgz#ae8e938288a534f129111a56b1971e1cc12ddc9d"
+  integrity sha512-g2BaHKz5/32wHIFoRifHxYikBJICqYx+weypA/zwz+d7rZTE9q+EgTvlFSdVlf1HtR2a3uLB1lp4se0tlI2zwg==
+
+"@theme-ui/preset-[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-base/-/preset-base-0.3.0.tgz#853a78195beead04ece4391c5672d690899bec47"
+  integrity sha512-bFCYoxfe/Ugr5k5BEy3Gv5jg8+idZHWDt/NM95jgla4qITlaOAMuEL6afoQ5HXbJjp5TnZFZ73qO6cKI8/BFfQ==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-bootstrap/-/preset-bootstrap-0.3.0.tgz#0a50dff50eb2b444dce1e0273cf359026ef4e10c"
+  integrity sha512-UoBvNNo4JMsdVPuF3tzEPhZu6T1vuFTEDPUwrannaq2ycFfZZVBfr0YaDNtM+n5lcPp3DBXvZrMjDCURteGjVA==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-bulma/-/preset-bulma-0.3.0.tgz#e7a13222da030052607d48a61b2948ad4761d9c3"
+  integrity sha512-9p7SWvEzqfOVqwzpXFn6xB9fiPj3aomb6gG79FoaSzXRv+ATRtsQam9o8GWhGljiQbNazbxFd95RUP92sflncw==
+  dependencies:
+    "@theme-ui/preset-base" "^0.3.0"
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-dark/-/preset-dark-0.3.0.tgz#bce2a12768b64e730ff7307145809fcabac16da1"
+  integrity sha512-biKyaGTy4awA+JbeUO4o2TzkeB4i1nregukS9BUOrub7I4jrKjPvjIlHxlU2uiQIYbxKq4n/QqBIsCbTDdg74w==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-deep/-/preset-deep-0.3.0.tgz#acdf3028ef8dc5af2d20b5a82f9fed1062cf74d6"
+  integrity sha512-5XZckaa1nhm7afb57bCMGKR/TCaf9cjTwhNkfAaFjKVklVB4CCinS43zQ0sDadwd3oihCJmGbXyvgwBb8mp/iw==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-funk/-/preset-funk-0.3.0.tgz#c1fb55d3d49db5b147cb4b58e504e8db50312d1f"
+  integrity sha512-YT/2OgZwx9/FpkM+ol7ixnmusBcMRRwLxlys76cV4Ky1cbb4aL92uDHOh8QIfXilXnyoi8mLVduCMOJCd+1h2Q==
+  dependencies:
+    "@theme-ui/preset-base" "^0.3.0"
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-future/-/preset-future-0.3.0.tgz#cd9384749328fb49856ef3452f6da8d9796d51fa"
+  integrity sha512-KicYV6Ck2hE3nT+Snkk4mFhshyfrX/jgSHGrmfOGMhLjkapQYUpuIKRQMPjlm2dDtd5exbaxOOjX4edRIkqQyg==
+  dependencies:
+    "@theme-ui/preset-base" "^0.3.0"
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-polaris/-/preset-polaris-0.3.0.tgz#1e9791122d386a813928b2e6f87d3d41fe690fa1"
+  integrity sha512-Tw1xKIbKt28OkevT/WynXnnjHizCQI8XN6P3e3baj5VCdGSXmRJbtZXA85tgjTf6gSTQZrWnaRg2vm/wXn/Wlw==
+  dependencies:
+    "@theme-ui/preset-base" "^0.2.44"
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-roboto/-/preset-roboto-0.3.0.tgz#4b7afa633416caf597f91d3624b3166e2786b1be"
+  integrity sha512-7/Bjo3CeVJ73r1PcrnvGVl7TaI+gnwA5ekwfv0yifE5gJBbzvhBRnNIGcBt4aE3pd5WQ+iSKdfBBfxFjkTXQAQ==
+  dependencies:
+    "@theme-ui/preset-base" "^0.3.0"
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-swiss/-/preset-swiss-0.3.0.tgz#ea170bc6e29d92a2e5b6e4cf90a17c68ca6f38f9"
+  integrity sha512-ijH0FPHMR9tT7ZOIV73lY4VHEvah2FftwrYUt7w4UhjId8SnKBp5GitU+IG4E5mRdP8IiPRQCBrfs9IuSFxnWA==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-system/-/preset-system-0.3.0.tgz#80d0feb3f8a945fe67fed3dc881e37e0ce70b3f8"
+  integrity sha512-mpQbwuqPZysjdpRxtMxEU7kuafzt0QmYmT8t/1OcQMCIb/qIenu/xZsCXxrJQGZcxgO4Pq5Z9FDzXbQwNQBWcA==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-tailwind/-/preset-tailwind-0.3.0.tgz#e916023e5111df129b8e04603250ebe5d95f87e8"
+  integrity sha512-Y9BA9ESkOizaN3TV9H+D1gMYgoBTWxo+YGFFfTxn3RRO8V35UUM5tHbhNUWuuu5L5h/syN9f3WENCZ/cGcuaDA==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/preset-tosh/-/preset-tosh-0.3.0.tgz#c368edaa88703b8552fa731605bffd668ae5cf3b"
+  integrity sha512-YgrRHVhekvS13VGsKSYPa+ixJXmIQ/8hLIAVq6OmJQMHmPFgu/2pp45Plb1RPNlYsZwtXisO1T6nhet/jqiJvw==
+
+"@theme-ui/[email protected]^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/presets/-/presets-0.3.0.tgz#b2636faaa86c77f6b56c6623c954c1ce665705b0"
+  integrity sha512-mPxsNACJZT+EAZ76vLRFUyVMopkOEgTps3l22PhxLWIT5MtPsGXDoyTmjbOVy1suHv5mYwdQdsJ2isW4nsePrA==
+  dependencies:
+    "@theme-ui/preset-base" "^0.3.0"
+    "@theme-ui/preset-bootstrap" "^0.3.0"
+    "@theme-ui/preset-bulma" "^0.3.0"
+    "@theme-ui/preset-dark" "^0.3.0"
+    "@theme-ui/preset-deep" "^0.3.0"
+    "@theme-ui/preset-funk" "^0.3.0"
+    "@theme-ui/preset-future" "^0.3.0"
+    "@theme-ui/preset-polaris" "^0.3.0"
+    "@theme-ui/preset-roboto" "^0.3.0"
+    "@theme-ui/preset-swiss" "^0.3.0"
+    "@theme-ui/preset-system" "^0.3.0"
+    "@theme-ui/preset-tailwind" "^0.3.0"
+    "@theme-ui/preset-tosh" "^0.3.0"
+
+"@theme-ui/[email protected]^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.3.1.tgz#910bc43454fd61b1047d7bb0dce05e36ffb6b44b"
+  integrity sha512-Sjj6lD0gPxBi+hcGCkawcGZECeESV/mW2YfmPqjNgmc296x5tulfNc+0/N5CJwLVOmnkn8zR5KNWZ8BjndfeTg==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@theme-ui/color-modes" "^0.3.1"
+    "@theme-ui/core" "^0.3.1"
+    "@theme-ui/mdx" "^0.3.0"
+
 "@types/[email protected]*":
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
@ -707,6 +1082,43 @@
  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
  integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==

+"@types/[email protected]*":
+  version "5.1.10"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.10.tgz#dcf5690dd837ca49b8de1f23cb99d510c7f4ecb3"
+  integrity sha512-OmVjC9OzyUckAgdavJBc+t5oCJrNXTlzWl9vo2x47leqpX1REq2qJC49SEtzbu1OnWSzcD68Uq3Aj8TeX+Kvtg==
+  dependencies:
+    csstype "^3.0.2"
+
+"@types/[email protected]*":
+  version "5.0.13"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.13.tgz#37ccff101739ed4c67b2f13142f67fb656f5dd0f"
+  integrity sha512-weoDj0SVCGB8/BmFVbQKaOCygGoMWiPGt+CVtgWHC/pcWtiWioCplMxTpza2cpYQs/Cf72+A4mAY24a3RbXllQ==
+  dependencies:
+    csstype "^3.0.2"
+
+"@types/[email protected]*", "@types/[email protected]^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@types/theme-ui/-/theme-ui-0.3.6.tgz#e7d25ef4fdaf6d3e69ef483858210df99c35c1fa"
+  integrity sha512-VAw3NA1Ye0dMfWM4/nfDPGTL5dFuPC1FHpDnLleEh6jRmqp2OliaJIeZnffmDVnGmb9iIvCwdaLDYAmltrnypA==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@types/react" "*"
+    "@types/styled-system" "*"
+    "@types/styled-system__css" "*"
+    "@types/theme-ui__components" "*"
+    csstype "^3.0.2"
+
+"@types/[email protected]*":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@types/theme-ui__components/-/theme-ui__components-0.2.5.tgz#65ef4e160e2e0cf7c52ae220f6579a707d33667d"
+  integrity sha512-qqhIJboXzGXE0ZpKRHrwQvRbuOAcGNyAWMPXXP2jGs65XcaTuDJJpz1Rx5JCaQ1h+Tt99uIriRzZRthWarh1wg==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@types/react" "*"
+    "@types/styled-system" "*"
+    "@types/theme-ui" "*"
+
 "@types/[email protected]^3.0.0":
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
@ -1089,6 +1501,36 @@ [email protected], [email protected]^10.1.0:
    eslint-visitor-keys "^1.0.0"
    resolve "^1.12.0"

+[email protected]^10.0.27:
+  version "10.0.33"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
+  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
+[email protected]^2.0.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
+[email protected]^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 [email protected]^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@ -1443,7 +1885,7 @@ [email protected]^1.0.4:
  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==

-[email protected]^1.7.0:
+[email protected]^1.5.0, [email protected]^1.7.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@ -1627,7 +2069,7 @@ [email protected]^4.0.2:
  dependencies:
    css-tree "1.0.0-alpha.39"

-[email protected]^2.6.8:
+[email protected]^2.5.7, [email protected]^2.6.8:
  version "2.6.13"
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
@ -2386,6 +2828,11 @@ [email protected]^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

+[email protected]^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 [email protected]^2.0.0, [email protected]^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@ -4005,6 +4452,13 @@ [email protected]^8.0.0:
  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
  integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==

+[email protected]^3.4.1:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.6.5.tgz#dbefdde64c675935ec55119fe2a2ab627ca82e9c"
+  integrity sha512-VwhC9MlhW7O5dg/z7k32dabcAFW1VI2+7fSe8cE/kXcfL7mVdoa5UxciYGW2sJU78ldDLT6+ROEKIZKFNTnUXQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 [email protected]^7.0.1:
  version "7.0.2"
  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.2.tgz#504efcd008ca0273120568b0792b16cdcde8aac1"
@ -4929,7 +5383,7 @@ [email protected]^0.5.17, [email protected]~0.5.12:
    buffer-from "^1.0.0"
    source-map "^0.6.0"

-[email protected]^0.5.0:
+[email protected]^0.5.0, [email protected]^0.5.7:
  version "0.5.7"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@ -5086,6 +5540,25 @@ strip-json[email protected]^3.1.0:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

+[email protected]^5.1.5:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
+  integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==
+  dependencies:
+    "@styled-system/background" "^5.1.2"
+    "@styled-system/border" "^5.1.5"
+    "@styled-system/color" "^5.1.2"
+    "@styled-system/core" "^5.1.2"
+    "@styled-system/flexbox" "^5.1.2"
+    "@styled-system/grid" "^5.1.2"
+    "@styled-system/layout" "^5.1.2"
+    "@styled-system/position" "^5.1.2"
+    "@styled-system/shadow" "^5.1.2"
+    "@styled-system/space" "^5.1.2"
+    "@styled-system/typography" "^5.1.2"
+    "@styled-system/variant" "^5.1.5"
+    object-assign "^4.1.1"
+
 [email protected]^4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@ -5183,6 +5656,18 @@ [email protected]^0.2.0:
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=

+[email protected]^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.3.1.tgz#b00ee2c03eb3d820536af8b121c64d13b3777cf0"
+  integrity sha512-My/TSALqp7Dst5Ez7nJA+94Q8zJhc26Z0qGo8kEWyoqHHJ5TU8xdhjLPBltTdQck3T32cSq5USIeSKU3JtxYUQ==
+  dependencies:
+    "@theme-ui/color-modes" "^0.3.1"
+    "@theme-ui/components" "^0.3.1"
+    "@theme-ui/core" "^0.3.1"
+    "@theme-ui/css" "^0.3.1"
+    "@theme-ui/mdx" "^0.3.0"
+    "@theme-ui/theme-provider" "^0.3.1"
+
 [email protected]^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"