Move Emotion and MDX packages to peerDeps

examples/codesandbox-starter/package.json

@@ -1,20 +1,20 @@
 {
   "name": "theme-ui-starter",
-  "private": "true",
-  "version": "0.4.0-rc.0",
+  "private": true,
+  "version": "0.1.0",
   "description": "A sandbox configured with Theme UI, including the `base` theme.",
   "main": "index.html",
   "scripts": {
     "start": "parcel index.html --open",
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.1",
+    "@emotion/react": "^11",
     "@mdx-js/react": "^1.6.22",
-    "@theme-ui/presets": "^0.4.0-rc.0",
+    "@theme-ui/presets": "latest",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",

examples/create-react-app/package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "mdx.macro": "^0.2.8",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "theme-ui": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

examples/custom-pragma/package.json

@@ -17,6 +17,6 @@
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   }
 }

examples/dark-mode/package.json

@@ -17,6 +17,6 @@
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   }
 }

examples/gatsby-plugin/package.json

@@ -15,10 +15,10 @@
     "@mdx-js/react": "^1.6.22",
     "gatsby": "^2.6.3",
     "gatsby-plugin-mdx": "^1.6.0",
-    "gatsby-plugin-theme-ui": "^0.4.0-rc.0",
+    "gatsby-plugin-theme-ui": "latest",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   },
   "devDependencies": {
     "@testing-library/react": "^9.1.3",

examples/gatsby/package.json

@@ -17,7 +17,7 @@
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   },
   "devDependencies": {
     "@types/react": "^16.9.55",

examples/next/package.json

@@ -12,11 +12,11 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@mdx-js/loader": "^1.6.16",
+    "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^11.1.2",
     "next": "^11.1.2",
-    "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react": "^17.0.2",
     "theme-ui": "latest"
   }
 }

examples/prism/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "prism-theme-ui-example",
-  "version": "0.4.0-rc.0",
+  "version": "1.0.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -19,6 +19,6 @@
     "prismjs": "^1.16.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0"
+    "theme-ui": "latest"
   }
 }

examples/typography/package.json

@@ -19,7 +19,7 @@
     "lodash.merge": "^4.6.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "theme-ui": "^0.4.0-rc.0",
+    "theme-ui": "latest",
     "theme-ui-typography": "^0.1.7",
     "typography-theme-fairy-gates": "^0.16.19"
   }

package.json

@@ -69,7 +69,10 @@
     "ts-jest": "^27.0.5",
     "ts-toolbelt": "^9.6.0",
     "typecov": "^0.2.3",
-    "typescript": "^4.4.3"
+    "typescript": "^4",
+    "@mdx-js/react": "^1 || ^2",
+    "@types/mdx-js__react": "^1 || ^2",
+    "@emotion/react": "^11"
   },
   "husky": {
     "hooks": {

packages/color-modes/package.json

@@ -16,11 +16,11 @@
   "dependencies": {
     "@theme-ui/core": "0.11.3",
     "@theme-ui/css": "0.11.3",
-    "@emotion/react": "^11.4.1",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11"
   },
   "devDependencies": {
     "react": "^17.0.1"

packages/components/README.md

@@ -2,10 +2,11 @@
 
 Primitive layout, typographic, and other components for use with Theme UI.
 
-**Note:** _This package is included in the main `theme-ui` package and a separate installation is not required._
+**Note:** _This package is included in the main `theme-ui` package and a
+separate installation is not required._
 
 ```sh
-npm i @theme-ui/components
+npm i @theme-ui/components @emotion/react @emotion/styled
 ```
 
 https://theme-ui.com/components

packages/components/package.json

@@ -7,16 +7,16 @@
   "sideEffects": false,
   "scripts": {},
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.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.11.3",
     "@types/styled-system": "^5.1.13"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11"
   },
   "publishConfig": {
     "access": "public"

packages/core/README.md

@@ -5,7 +5,7 @@
 `@theme-ui/core` provides minimal React support for lightweight usage.
 
 ```sh
-npm i @theme-ui/core
+npm i @theme-ui/core @emotion/react
 ```
 
 ## Usage

packages/core/package.json

@@ -15,12 +15,11 @@
   },
   "dependencies": {
     "@theme-ui/css": "0.11.3",
-    "@theme-ui/parse-props": "0.11.3",
-    "@emotion/react": "^11.4.1",
-    "deepmerge": "^4.2.2"
+    "@theme-ui/parse-props": "0.11.3"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11"
   },
   "preconstruct": {
     "entrypoints": [

packages/css/README.md

@@ -6,7 +6,7 @@
 you write style objects with responsive, theme-aware ergonomic shortcuts.
 
 ```sh
-npm i @theme-ui/css
+npm i @theme-ui/css @emotion/react
 ```
 
 ## Usage

packages/css/package.json

@@ -13,9 +13,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
     "csstype": "^3.0.9"
   },
+  "peerDependencies": {
+    "@emotion/react": "^11"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts",

packages/editor/package.json

@@ -21,7 +21,7 @@
     "tinycolor2": "^1.4.1"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.1.1",
+    "@emotion/react": "^11",
     "react": "^16 || ^17",
     "react-dom": "^16 || ^17",
     "theme-ui": ">= 0.7.0"

packages/mdx/package.json

@@ -7,17 +7,17 @@
   "sideEffects": false,
   "scripts": {},
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.0.0",
-    "@mdx-js/react": "^1.6.22",
     "@theme-ui/core": "0.11.3",
     "@theme-ui/css": "0.11.3"
   },
   "devDependencies": {
     "react": "^17.0.1"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mdx-js/react": "^1 || ^2"
   },
   "author": "Brent Jackson",
   "repository": "system-ui/theme-ui",

packages/parse-props/package.json

@@ -18,11 +18,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@theme-ui/css": "0.11.3",
-    "@emotion/react": "^11.4.1"
+    "@theme-ui/css": "0.11.3"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/styled": "^11"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }

packages/sidenav/package.json

@@ -10,19 +10,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "deepmerge": "^4.0.0",
+    "theme-ui": "0.10.0"
+  },
   "peerDependencies": {
-    "react": "^16 || ^17"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11",
+    "@mdx-js/react": "^1 || ^2",
+    "@types/mdx-js__react": "^1 || ^2"
   },
   "devDependencies": {
     "react": "^17.0.1"
   },
-  "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@mdx-js/react": "^1.6.22",
-    "@types/mdx-js__react": "^1.5.4",
-    "deepmerge": "^4.0.0",
-    "theme-ui": "0.11.3"
-  },
   "keywords": [
     "theme-ui",
     "mdx",

packages/theme-provider/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@theme-ui/theme-provider",
   "version": "0.11.3",
+  "repository": "system-ui/theme-ui",
   "main": "dist/theme-ui-theme-provider.cjs.js",
   "module": "dist/theme-ui-theme-provider.esm.js",
   "source": "src/index.ts",
+  "author": "Brent Jackson",
+  "license": "MIT",
   "sideEffects": false,
-  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@theme-ui/core": "0.11.3",
     "@theme-ui/css": "0.11.3",
     "@theme-ui/mdx": "0.11.3",
-    "@emotion/react": "^11.4.1",
     "@theme-ui/color-modes": "0.11.3"
   },
   "peerDependencies": {
-    "react": "^16 || ^17"
-  },
-  "repository": "system-ui/theme-ui",
-  "author": "Brent Jackson",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
+    "react": "^16 || ^17",
+    "@emotion/react": "^11"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }

packages/theme-ui/README.md

@@ -113,9 +113,12 @@ scales help you build UI rooted in constraint-based design principles.
 ## Getting Started
 
 ```sh
-npm install theme-ui
+npm install theme-ui @emotion/react @mdx-js/react
 ```
 
+_If you don't need color modes, components and MDX support, you can install
+[**@theme-ui/core**](https://github.com/system-ui/theme-ui/tree/develop/packages/core)_.
+
 Any styles in your app can reference values from the global `theme` object. To
 provide the theme in context, wrap your application with the `ThemeProvider`
 component and pass in a custom `theme` object.