chore: upgrade theme-ui package

integrations/gatsby-theme-stories/package.json

@@ -40,15 +40,14 @@
     "@component-controls/core": "^1.3.0",
     "@component-controls/pages": "^1.3.0",
     "@component-controls/webpack-compile": "^1.3.0",
-    "@theme-ui/sidenav": "^0.3.1",
     "gatsby": "^2.22.10",
     "gatsby-plugin-react-helmet": "^3.3.2",
     "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-plugin-typescript": "^2.4.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "next"
   },
   "devDependencies": {
     "typescript": "^3.8.3"

plugins/axe-plugin/package.json

@@ -42,7 +42,7 @@
     "react": "^16.12.0",
     "react-google-charts": "^3.0.15",
     "recoil": "0.0.7",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "next"
   },
   "devDependencies": {
     "@types/react": "^16.9.34",

ui/app/package.json

@@ -34,11 +34,11 @@
     "@component-controls/components": "^1.3.0",
     "@component-controls/core": "^1.3.0",
     "@component-controls/pages": "^1.3.0",
-    "@theme-ui/match-media": "^0.3.1",
+    "@theme-ui/match-media": "next",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "next"
   },
   "devDependencies": {
     "@types/jest": "^25.1.2",

ui/blocks/package.json

@@ -36,16 +36,15 @@
     "@component-controls/store": "^1.3.0",
     "@primer/octicons-react": "^9.6.0",
     "@storybook/csf": "^0.0.1",
-    "@theme-ui/css": "^0.3.1",
-    "@theme-ui/mdx": "^0.3.0",
+    "@theme-ui/css": "next",
     "copy-to-clipboard": "^3.2.1",
     "global": "^4.3.2",
     "js-string-escape": "^1.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-table": "^7.0.0",
     "stringify-object": "^3.3.0",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "next"
   },
   "devDependencies": {
     "@theme-ui/presets": "^0.3.0",

ui/blocks/src/PageContainer/PageContainer.tsx

@@ -1,6 +1,13 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
-import { FC, useEffect, forwardRef, Ref, ComponentType } from 'react';
+import {
+  FC,
+  useEffect,
+  forwardRef,
+  Ref,
+  ComponentType,
+  ReactText,
+} from 'react';
 import { jsx, Box, BoxProps } from 'theme-ui';
 import { get } from '@theme-ui/css';
 import { useTheme } from '@component-controls/components';
@@ -57,7 +64,12 @@ export const PageContainer: FC<PageContainerProps> = forwardRef(
     }, []);
     const theme = useTheme();
     return (
-      <Box variant="pagecontainer" sx={get(theme, variant)} ref={ref} {...rest}>
+      <Box
+        variant="pagecontainer"
+        sx={get(theme, variant as ReactText)}
+        ref={ref}
+        {...rest}
+      >
         <StoryContextConsumer id=".">
           {({ doc }) => {
             const { MDXPage } = doc || {};

ui/blocks/src/typings.d.ts

@@ -1,5 +1,3 @@
 declare module 'global';
 declare module '@theme-ui/presets';
 declare module 'js-string-escape';
-declare module '@theme-ui/mdx';
-declare module '@theme-ui/css';

ui/components/package.json

@@ -31,7 +31,8 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^9.5.0",
-    "@theme-ui/presets": "^0.3.0",
+    "@theme-ui/css": "next",
+    "@theme-ui/presets": "next",
     "copy-to-clipboard": "^3.2.1",
     "fast-memoize": "^2.5.2",
     "markdown-to-jsx": "^6.11.0",
@@ -44,7 +45,7 @@
     "react-table": "^7.0.0",
     "react-tabs": "^3.1.0",
     "scroll-into-view-if-needed": "^2.2.25",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "next"
   },
   "devDependencies": {
     "@types/jest": "^25.1.2",
@@ -57,6 +58,7 @@
     "jest": "^24.9.0"
   },
   "peerDependencies": {
+    "@theme-ui/css": "*",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "theme-ui": "*"

ui/components/src/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { FC, useContext } from 'react';
+import React, { FC, useContext, ReactText } from 'react';
 import { jsx, Box, BoxProps, Heading } from 'theme-ui';
 import { get } from '@theme-ui/css';
 import { useTheme } from '../ThemeContext';
@@ -38,7 +38,7 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
   return collapsed ? null : (
     <Box
       variant={responsive ? 'sidebar.responsive' : 'sidebar.default'}
-      sx={get(theme, variant)}
+      sx={get(theme, variant as ReactText)}
       onClick={() => responsive && setCollapsed(true)}
       {...rest}
     >

ui/components/src/Tag/Tag.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
 import { jsx, Box, BoxProps, Text } from 'theme-ui';
-import { FC } from 'react';
+import { FC, ReactText } from 'react';
 import { transparentize } from 'polished';
 import { get } from '@theme-ui/css';
 import { useTheme } from '../ThemeContext';
@@ -41,7 +41,7 @@ export const Tag: FC<TagProps & Omit<BoxProps, 'variant'>> = ({
       sx={{
         backgroundColor: transparentize(transparentAmount, color),
         border: `1px solid ${color}`,
-        ...get(theme, variant),
+        ...get(theme, variant as ReactText),
       }}
     >
       <Text>{children}</Text>

ui/components/src/ThemeContext/theme.ts

@@ -1,4 +1,4 @@
-import { Theme, useThemeUI } from 'theme-ui';
+import { Theme, ThemeUIStyleObject, useThemeUI } from 'theme-ui';
 const text =
   'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif';
 
@@ -8,7 +8,44 @@ const heading = {
   fontWeight: 'semibold',
 };
 
-export const theme: Theme = {
+export type ControlsTheme = {
+  actionbar: Record<string, ThemeUIStyleObject>;
+  actioncontainer: ThemeUIStyleObject | Record<string, ThemeUIStyleObject>;
+  blockcontainer: Record<string, ThemeUIStyleObject>;
+  blockpagecontainer: Record<string, ThemeUIStyleObject>;
+  searchinput: Record<string, ThemeUIStyleObject>;
+  subtitle: ThemeUIStyleObject;
+  subheading: ThemeUIStyleObject;
+  tabs: Record<string, ThemeUIStyleObject>;
+  tag: Record<string, ThemeUIStyleObject>;
+  title: ThemeUIStyleObject;
+  zoom: ThemeUIStyleObject;
+  editpage: Record<string, ThemeUIStyleObject>;
+  lastedited: Record<string, ThemeUIStyleObject>;
+  pagecontainer: ThemeUIStyleObject;
+  propstable: Record<string, ThemeUIStyleObject>;
+  story: ThemeUIStyleObject;
+  colormode: Record<string, ThemeUIStyleObject>;
+  header: ThemeUIStyleObject;
+  navmenu: Record<string, ThemeUIStyleObject>;
+  pagination: Record<string, ThemeUIStyleObject>;
+  sidebar: Record<string, ThemeUIStyleObject>;
+  skiplinks: Record<string, ThemeUIStyleObject>;
+  app: ThemeUIStyleObject;
+  sidecontext: Record<string, ThemeUIStyleObject>;
+  appsidebar: Record<string, ThemeUIStyleObject>;
+  appheader: Record<string, ThemeUIStyleObject>;
+  appfooter: Record<string, ThemeUIStyleObject>;
+  categorylist: Record<string, ThemeUIStyleObject>;
+  pagelist: Record<string, ThemeUIStyleObject>;
+  categorypage: Record<string, ThemeUIStyleObject>;
+  documentlistitem: Record<string, ThemeUIStyleObject>;
+  taglist: Record<string, ThemeUIStyleObject>;
+  appsidebarpage: Record<string, ThemeUIStyleObject>;
+  container: Record<string, ThemeUIStyleObject>;
+  documentslist: Record<string, ThemeUIStyleObject>;
+} & Theme;
+export const theme: ControlsTheme = {
   colors: {
     text: '#454f5b',
     background: '#fff',
@@ -739,15 +776,14 @@ export const theme: Theme = {
   appsidebarpage: {
     storycontainer: {
       display: 'grid',
-      gridGap: '16px',
       flex: 1,
       minHeight: '100vh',
       gridTemplateColumns: '300px 1fr 250px',
       position: 'relative',
     },
+    //@ts-ignore
     mdxcontainer: {
       display: 'grid',
-      gridGap: '16px',
       flex: 1,
       minHeight: '100vh',
       gridTemplateColumns: '300px 1fr',

ui/components/src/typings.d.ts

@@ -1,7 +1,4 @@
-declare module '@theme-ui/preset-polaris';
-declare module '@theme-ui/core';
 declare module '@mdx-js/runtime';
-declare module '@theme-ui/css';
 declare module '@theme-ui/match-media';
 declare module '@mdx-js/react' {
   import * as React from 'react';

ui/editors/package.json

@@ -39,7 +39,7 @@
     "react": "^16.13.1",
     "react-color": "^2.17.0",
     "react-dom": "^16.13.1",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "next"
   },
   "devDependencies": {
     "@types/jest": "^25.1.2",