diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index be79858fa..1fee27e49 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -7,7 +7,6 @@
**/types.ts @hasparus
**/types.tsx @hasparus
-# packages/chrome DEPRECATED
packages/color @hasparus
packages/color-modes @hasparus
packages/components @atanasster
@@ -18,7 +17,6 @@ packages/docs @lachlanjc @hasparus
# packages/editor looking for maintainers!
# packages/gatsby-plugin-theme-ui looking for maintainers!
# packages/gatsby-theme-style-guide looking for maintainers!
-# packages/gatsby-theme-ui-blog looking for maintainers!
# packages/gatsby-theme-ui-layout looking for maintainers!
packages/match-media @hasparus
packages/mdx @hasparus
diff --git a/deprecated/chrome/.gitignore b/deprecated/chrome/.gitignore
deleted file mode 100644
index 5647a1375..000000000
--- a/deprecated/chrome/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-!public
-public/bundle
\ No newline at end of file
diff --git a/deprecated/chrome/README.md b/deprecated/chrome/README.md
deleted file mode 100644
index 9844bd860..000000000
--- a/deprecated/chrome/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Theme UI Devtools
-
-Chrome devtools extension for editing Theme UI styles in the browser.
-
-## Status: Deprecated.
-
-This package is not compatible with current Theme UI version.
-
-See [Blocks UI](https://github.com/blocks/blocks) for a theme editor and JSX page builder.
-
-## Installation
-
-1. [Download extension](https://github.com/system-ui/theme-ui/tree/stable/packages/chrome/public)
-1. Navigate to chrome://extensions/
-1. Enable "Developer mode"
-1. Click "LOAD UNPACKED"
-1. Select extracted downloaded extension folder
-
-## Local Development
-
-1. Run `yarn __prepare` (or `yarn watch`)
-1. Load unpacked extension from the `public/` directory
diff --git a/deprecated/chrome/global.d.ts b/deprecated/chrome/global.d.ts
deleted file mode 100644
index 06879d895..000000000
--- a/deprecated/chrome/global.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export {}
-
-declare global {
- interface Window {
- chrome: any
- }
-}
diff --git a/deprecated/chrome/package.json b/deprecated/chrome/package.json
deleted file mode 100644
index f8cb2f64e..000000000
--- a/deprecated/chrome/package.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
- "private": true,
- "name": "@theme-ui/chrome",
- "version": "0.5.0-alpha.0",
- "main": "dist/chrome.cjs.js",
- "author": "Brent Jackson",
- "license": "MIT",
- "scripts": {
- "__prepare": "webpack --mode=production",
- "watch": "webpack --watch --mode=production",
- "icon:128": "npx capture-website-cli 'https://contrast.now.sh/cff/40f?size=128&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI' --width=128 --height=128 --overwrite public/icons/128.png",
- "icon:48": "npx capture-website-cli 'https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI' --width=48 --height=48 --overwrite public/icons/48.png",
- "icon:16": "npx capture-website-cli 'https://contrast.now.sh/cff/40f?size=16&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI' --width=16 --height=16 --overwrite public/icons/16.png",
- "icons": "yarn icon:128 && yarn icon:48 && yarn icon:16"
- },
- "dependencies": {
- "@babel/cli": "^7.4.4",
- "@babel/core": "^7.4.5",
- "@babel/preset-env": "^7.4.5",
- "@babel/preset-react": "^7.0.0",
- "@theme-ui/editor": "^0.5.0-alpha.0",
- "babel-loader": "^8.0.6",
- "copy-to-clipboard": "^3.2.0",
- "lodash.debounce": "^4.0.8",
- "lodash.merge": "^4.6.2",
- "react": "^16.14.0",
- "react-dom": "^16.14.0",
- "stringify-object": "^3.3.0",
- "theme-ui": "^0.5.0-alpha.0",
- "webpack": "^4.33.0",
- "webpack-cli": "^3.3.4",
- "@emotion/react": "^11.1.1"
- },
- "gitHead": "bfd026cae085f377ca537de897dc43233d50f5d5",
- "module": "dist/chrome.esm.js"
-}
diff --git a/deprecated/chrome/public/devtools.html b/deprecated/chrome/public/devtools.html
deleted file mode 100644
index 3664d5cfe..000000000
--- a/deprecated/chrome/public/devtools.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/deprecated/chrome/public/devtools.js b/deprecated/chrome/public/devtools.js
deleted file mode 100644
index aee9cb367..000000000
--- a/deprecated/chrome/public/devtools.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const checkForThemeUI = () => {
- return new Promise((resolve, reject) => {
- window.chrome.devtools.inspectedWindow.eval(
- `window.__THEME_UI__.theme`,
- (result, err) => (err ? resolve(false) : resolve(true))
- )
- })
-}
-
-checkForThemeUI()
- .then((hasThemeUI) => {
- if (!hasThemeUI) return
- chrome.devtools.panels.elements.createSidebarPane('Theme UI', sidebar => {
- sidebar.setPage('panel.html')
- })
- })
-
diff --git a/deprecated/chrome/public/icons/128.png b/deprecated/chrome/public/icons/128.png
deleted file mode 100644
index 2f1ac9a70..000000000
Binary files a/deprecated/chrome/public/icons/128.png and /dev/null differ
diff --git a/deprecated/chrome/public/icons/16.png b/deprecated/chrome/public/icons/16.png
deleted file mode 100644
index 95381543e..000000000
Binary files a/deprecated/chrome/public/icons/16.png and /dev/null differ
diff --git a/deprecated/chrome/public/icons/48.png b/deprecated/chrome/public/icons/48.png
deleted file mode 100644
index 121fd95bd..000000000
Binary files a/deprecated/chrome/public/icons/48.png and /dev/null differ
diff --git a/deprecated/chrome/public/manifest.json b/deprecated/chrome/public/manifest.json
deleted file mode 100644
index ee06da877..000000000
--- a/deprecated/chrome/public/manifest.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "name": "Theme UI Devtools",
- "description": "Edit colors, typography, and other styles for sites built with Theme UI",
- "version": "0.2.41",
- "manifest_version": 2,
- "minimum_chrome_version": "10.0",
- "devtools_page": "devtools.html",
- "icons": {
- "16": "icons/16.png",
- "48": "icons/48.png",
- "128": "icons/128.png"
- }
-}
diff --git a/deprecated/chrome/public/panel.html b/deprecated/chrome/public/panel.html
deleted file mode 100644
index 5c1b89875..000000000
--- a/deprecated/chrome/public/panel.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/deprecated/chrome/src/index.tsx b/deprecated/chrome/src/index.tsx
deleted file mode 100644
index 1f100a93b..000000000
--- a/deprecated/chrome/src/index.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui'
-import {
- useReducer,
- useEffect,
- useRef,
- useState,
- FunctionComponent,
-} from 'react'
-import { render } from 'react-dom'
-import debounce from 'lodash.debounce'
-import merge from 'lodash.merge'
-import copyToClipboard from 'copy-to-clipboard'
-import {
- Editor,
- Row,
- ColorPalette,
- ColorMode,
- Fonts,
- FontWeights,
- LineHeights,
- FontSizes,
- Space,
- // @ts-ignore
-} from '@theme-ui/editor'
-import { Theme } from '@theme-ui/css'
-
-interface DevToolsExceptionInfo {
- isError: boolean
- code: string
- description: string
- details: any[]
- isException: boolean
- value: string
-}
-
-const runScript = (script: string) =>
- new Promise((resolve, reject) => {
- debounce(window.chrome.devtools.inspectedWindow.eval, 100)(
- script,
- (result: object, err: DevToolsExceptionInfo) => {
- if (err) {
- console.error(err)
- reject(err)
- }
- resolve(result)
- }
- )
- })
-
-type StateWithColorMode = { colorMode?: string; theme?: Theme }
-const mergeState = (state: StateWithColorMode, next: StateWithColorMode) =>
- merge({}, state, next)
-
-const CopyTheme = ({ theme }: { theme: Theme }) => {
- const [copied, setCopied] = useState(false)
- const timer = useRef(0)
-
- const handleClick = () => {
- setCopied(true)
- copyToClipboard(JSON.stringify(theme))
- clearInterval(timer.current)
- timer.current = window.setInterval(() => setCopied(false), 1000)
- }
-
- return (
-
- )
-}
-
-const Spacer = () =>
-
-const App: FunctionComponent = () => {
- const dark = window.chrome.devtools.panels.themeName === 'dark'
-
- const [state, setState] = useReducer(mergeState, {})
-
- const getTheme = () => {
- runScript(`window.__THEME_UI__.theme`).then(resolvedTheme => {
- const theme = resolvedTheme as StateWithColorMode['theme']
- setState({ theme })
- })
- }
-
- const getColorMode = () => {
- runScript(`window.__THEME_UI__.colorMode`).then(resolvedColorMode => {
- const colorMode = resolvedColorMode as StateWithColorMode['colorMode']
- setState({ colorMode })
- })
- }
-
- const setTheme = (nextTheme: Theme) => {
- const json = JSON.stringify(nextTheme)
- runScript(`window.__THEME_UI__.setTheme(${json})`)
- setState({ theme: nextTheme })
- }
-
- const setColorMode = (nextMode: Theme['initialColorModeName']) => {
- setState({ colorMode: nextMode })
- runScript(`window.__THEME_UI__.setColorMode('${nextMode}')`)
- }
-
- useEffect(() => {
- getColorMode()
- }, [])
-
- useEffect(() => {
- getTheme()
- }, [state.colorMode])
-
- const context = {
- ...state,
- setTheme,
- setColorMode,
- }
-
- if (!context.theme) return null
-
- return (
-
-
- {context.colorMode && }
-
- Fonts
-
-
-
-
- Font Weights
-
-
-
-
- Line Heights
-
-
-
-
- Font Sizes
-
-
-
-
- Space
-
-
-
-
-
-
- )
-}
-
-render(, document.getElementById('root'))
diff --git a/deprecated/chrome/src/theme.ts b/deprecated/chrome/src/theme.ts
deleted file mode 100644
index 63b970951..000000000
--- a/deprecated/chrome/src/theme.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Theme } from '@theme-ui/css'
-
-const theme: Theme = {
- initialColorModeName: 'light',
- colors: {
- text: '#000',
- background: '#fff',
- primary: '#33e',
- secondary: '#119',
- muted: '#e6e6e6',
- highlight: '#ffffcc',
- gray: '#777',
- purple: '#609',
- modes: {
- dark: {
- text: '#fff',
- background: '#060606',
- primary: '#e0f ',
- secondary: '#3cf',
- muted: '#252525',
- highlight: '#ffffcc',
- gray: '#999',
- purple: '#c0f',
- },
- },
- },
- fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96, 128],
- fonts: {
- body:
- 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
- heading: 'inherit',
- monospace: 'Menlo, monospace',
- },
- fontWeights: {
- body: 400,
- heading: 700,
- },
- lineHeights: {
- body: 1.5,
- heading: 1.25,
- },
-}
-
-export default theme
diff --git a/deprecated/gatsby-theme-ui-blog/README.md b/deprecated/gatsby-theme-ui-blog/README.md
deleted file mode 100644
index c1de7f1da..000000000
--- a/deprecated/gatsby-theme-ui-blog/README.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# gatsby-theme-ui-blog
-
-Minimal Gatsby MDX blog theme built with Theme UI.
-Use this as a starting point for building custom blog themes with Theme UI.
-
-```sh
-npm i gatsby-theme-ui-blog
-```
-
-```js
-// gatsby-config.js
-module.exports = {
- plugins: ['gatsby-theme-ui-blog'],
-}
-```
-
-## Shadowing
-
-Shadow the following components to customize styles and page layout:
-
-| Component | Description | Props |
-| ------------------------------------ | ----------------------------------------------------------- | ------------------------------------------- | -------------------- |
-| `src/gatsby-theme-ui-blog/posts.js` | Index page for all blog posts | `{ posts }` |
-| `src/gatsby-theme-ui-blog/post.js` | Full blog post article page | `{ title, date, children, keywords, tags }` |
-| `src/gatsby-theme-ui-blog/layout.js` | Wrapping layout component for the Post and Posts components | | all page-level props |
-
-## Theming
-
-Use `gatsby-plugin-theme-ui` to override or customize the theme.
-
-```sh
-npm i gatsby-plugin-theme-ui
-```
-
-```js
-// gatsby-config.js
-module.exports = {
- plugins: ['gatsby-theme-ui-blog', 'gatsby-plugin-theme-ui'],
-}
-```
-
-```js
-// shadow src/gatsby-plugin-theme-ui/index.js
-import base from 'gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui'
-
-export default {
- ...base,
- colors: {
- text: 'white',
- background: 'black',
- primary: 'cyan',
- secondary: 'magenta',
- },
-}
-```
-
-## Options
-
-This theme is based off of [gatsby-theme-blog-core][] and uses all the same options.
-
-| Key | Default value | Description |
-| ------------- | ---------------- | --------------------------------------------------------------------------------------------------------- |
-| `basePath` | `/` | Root url for all blog posts |
-| `contentPath` | `content/posts` | Location of blog posts |
-| `assetPath` | `content/assets` | Location of assets |
-| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) |
-
-[gatsby-theme-blog-core]: https://www.npmjs.com/package/gatsby-theme-blog-core
diff --git a/deprecated/gatsby-theme-ui-blog/content/assets/avatar.png b/deprecated/gatsby-theme-ui-blog/content/assets/avatar.png
deleted file mode 100644
index 0503e1a0a..000000000
Binary files a/deprecated/gatsby-theme-ui-blog/content/assets/avatar.png and /dev/null differ
diff --git a/deprecated/gatsby-theme-ui-blog/content/posts/hello.mdx b/deprecated/gatsby-theme-ui-blog/content/posts/hello.mdx
deleted file mode 100644
index b20185522..000000000
--- a/deprecated/gatsby-theme-ui-blog/content/posts/hello.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Hello
-date: 2019-08-14
----
-
-Hello, this is a blog theme built with `gatsby-theme-blog-core` and `theme-ui`.
-It uses `@theme-ui/preset-base` for minimal styling, and can be completely overridden or customized using `gatsby-plugin-theme-ui`.
-The pages generated by this theme contain no outer layout structure, making this theme a good starting point for building a custom blog with Theme UI.
diff --git a/deprecated/gatsby-theme-ui-blog/gatsby-config.js b/deprecated/gatsby-theme-ui-blog/gatsby-config.js
deleted file mode 100644
index cf9c208b3..000000000
--- a/deprecated/gatsby-theme-ui-blog/gatsby-config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = (options) => ({
- plugins: [
- {
- resolve: 'gatsby-theme-blog-core',
- options,
- },
- 'gatsby-theme-ui-layout',
- 'gatsby-plugin-theme-ui',
- ],
-})
diff --git a/deprecated/gatsby-theme-ui-blog/index.js b/deprecated/gatsby-theme-ui-blog/index.js
deleted file mode 100644
index 6723592cc..000000000
--- a/deprecated/gatsby-theme-ui-blog/index.js
+++ /dev/null
@@ -1 +0,0 @@
-// boop
diff --git a/deprecated/gatsby-theme-ui-blog/package.json b/deprecated/gatsby-theme-ui-blog/package.json
deleted file mode 100644
index e55568392..000000000
--- a/deprecated/gatsby-theme-ui-blog/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "name": "gatsby-theme-ui-blog",
- "version": "0.4.0-rc.0",
- "main": "index.js",
- "private": true,
- "scripts": {
- "avatar": "npx capture-website-cli \"https://contrast.now.sh/fff/33e?text=UI&size=48&fontSize=1.5&radius=32&baseline=1\" content/assets/avatar.png --width=48 --height=48 --overwrite"
- },
- "peerDependencies": {
- "gatsby": "^2.0.0 || ^3.0.0",
- "react": "^16.14.0 || ^17.0.0",
- "react-dom": "^16.8.0 || ^17.0.0"
- },
- "devDependencies": {
- "gatsby": "^2.13.73",
- "react": "^16.14.0",
- "react-dom": "^16.14.0"
- },
- "dependencies": {
- "@emotion/react": "^11.1.1",
- "@mdx-js/react": "^1.6.22",
- "@theme-ui/preset-base": "^0.4.0-alpha.0",
- "gatsby-plugin-react-helmet": "^3.1.3",
- "gatsby-plugin-theme-ui": "^0.4.0-rc.0",
- "gatsby-theme-blog-core": "^1.0.2",
- "gatsby-theme-ui-layout": "^0.4.0-alpha.0",
- "react-helmet": "^5.2.1",
- "theme-ui": "^0.4.0-rc.0"
- },
- "repository": "system-ui/theme-ui",
- "license": "MIT"
-}
diff --git a/deprecated/gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui/index.js b/deprecated/gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui/index.js
deleted file mode 100644
index 877761bac..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/gatsby-plugin-theme-ui/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@theme-ui/preset-base'
diff --git a/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-blog-core/components/post.js b/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-blog-core/components/post.js
deleted file mode 100644
index 5f1f3b251..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-blog-core/components/post.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { jsx } from 'theme-ui'
-import { MDXRenderer } from 'gatsby-plugin-mdx'
-import Post from '../../post'
-
-export default (props) => {
- const { body } = props.data.blogPost
- const children = jsx(MDXRenderer, { children: body })
-
- return jsx(Post, {
- ...props,
- ...props.data.blogPost,
- children,
- })
-}
diff --git a/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-blog-core/components/posts.js b/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-blog-core/components/posts.js
deleted file mode 100644
index 8e605c23c..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-blog-core/components/posts.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { jsx } from 'theme-ui'
-import Posts from '../../posts'
-
-export default (props) => {
- const posts = props.data.allBlogPost.edges.map((e) => e.node)
-
- return jsx(Posts, {
- ...props,
- posts,
- })
-}
diff --git a/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-ui-layout/layout.js b/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-ui-layout/layout.js
deleted file mode 100644
index d062344a1..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/gatsby-theme-ui-layout/layout.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '../layout'
diff --git a/deprecated/gatsby-theme-ui-blog/src/head.js b/deprecated/gatsby-theme-ui-blog/src/head.js
deleted file mode 100644
index e7838bc1e..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/head.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { Helmet } from 'react-helmet'
-
-export default ({ lang = 'en-us', title, excerpt, ...props }) => (
-
- {title && {title}}
- {excerpt && }
-
-)
diff --git a/deprecated/gatsby-theme-ui-blog/src/layout.js b/deprecated/gatsby-theme-ui-blog/src/layout.js
deleted file mode 100644
index 63b43a5ca..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/layout.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import Head from './head'
-
-export default (props) => (
- <>
-
- {props.children}
-
-)
diff --git a/deprecated/gatsby-theme-ui-blog/src/post.js b/deprecated/gatsby-theme-ui-blog/src/post.js
deleted file mode 100644
index 8dc74410b..000000000
--- a/deprecated/gatsby-theme-ui-blog/src/post.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @jsx jsx */
-import { jsx, Styled } from 'theme-ui'
-import { Layout } from 'gatsby-theme-ui-layout'
-
-export default ({
- title,
- date,
- excerpt,
- children,
- keywords,
- tags,
- ...props
-}) => (
-