Merge pull request #567 from yurm04/theme-preset-polaris

Add new theme preset based on Shopify's Polaris design system

Author: jxnblk

packages/preset-polaris/README.md

@@ -0,0 +1,32 @@
+# [@theme-ui/preset-polaris](https://theme-ui.com/presets/polaris)
+
+Theme UI includes `@theme-ui/preset-polaris` which can be used as an example or
+starting point for extending your own themes.  `@theme-ui/preset-polaris` is based on the Shopify design system, [Polaris](https://polaris.shopify.com/design/colors).
+
+```sh
+npm i @theme-ui/preset-polaris
+```
+
+```jsx
+// example theme
+import theme from '@theme-ui/preset-polaris'
+
+export default {
+  ...theme,
+  styles: {
+    ...theme,
+  },
+}
+```
+
+[See all built-in presets][demo]
+
+## Contributing
+
+We'd love to have more presets added to the Theme UI project.
+If you'd like to add a new preset or improve upon the existing ones, please open an [issue][] or [pull request][].
+
+[issue]: https://github.com/system-ui/theme-ui/issues
+[pull request]: https://github.com/system-ui/theme-ui/pulls
+
+[demo]: https://theme-ui.com/demo

packages/preset-polaris/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('../../babel.config')

packages/preset-polaris/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@theme-ui/preset-polaris",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "author": "Yuraima Estevez",
+  "license": "MIT",
+  "scripts": {
+    "prepare": "microbundle --no-compress",
+    "watch": "microbundle watch --no-compress"
+  },
+  "dependencies": {
+    "@theme-ui/preset-base": "^0.2.44"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/preset-polaris/src/index.js

@@ -0,0 +1,45 @@
+import base from '@theme-ui/preset-base'
+
+const text =
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif'
+
+export const polaris = {
+  ...base,
+  colors: {
+    text: '#454f5b',
+    background: '#fff',
+    primary: '#5c6ac4',
+    secondary: '#006fbb',
+    highlight: '#47c1bf',
+    muted: '#e6e6e6',
+    gray: '#dfe3e8',
+    accent: '#f49342',
+    darken: '#00044c',
+    modes: {
+      dark: {
+        text: '#3e4155',
+        background: '#000639',
+        primary: '#9c6ade',
+        secondary: '#b4e1fa',
+        highlight: '#b7ecec',
+        muted: '#e6e6e6',
+      },
+    },
+  },
+  fonts: {
+    body: text,
+    heading: text,
+    moonospace: 'Menlo, monospace',
+  },
+  fontWeights: {
+    body: 400,
+    heading: 600,
+    bold: 700,
+  },
+  lineHeights: {
+    body: 1.75,
+    heading: 1.25,
+  },
+}
+
+export default polaris

packages/presets/package.json

@@ -21,7 +21,8 @@
     "@theme-ui/preset-swiss": "^0.2.40",
     "@theme-ui/preset-system": "^0.2.40",
     "@theme-ui/preset-tailwind": "^0.2.42",
-    "@theme-ui/preset-tosh": "^0.2.40"
+    "@theme-ui/preset-tosh": "^0.2.40",
+    "@theme-ui/preset-polaris": "^0.1.0"
   },
   "publishConfig": {
     "access": "public"

packages/presets/src/index.js

@@ -10,4 +10,5 @@ export { default as tosh } from '@theme-ui/preset-tosh'
 
 export { default as bootstrap } from '@theme-ui/preset-bootstrap'
 export { default as bulma } from '@theme-ui/preset-bulma'
+export { default as polaris } from '@theme-ui/preset-polaris'
 export { default as tailwind } from '@theme-ui/preset-tailwind'