feat: Migrate to Theme UI

Andrey Okonetchnikov · okonet · commit b8d45ef65b03 · 2020-03-30T16:54:31.000+02:00
diff --git a/package.json b/package.json
@@ -33,24 +33,21 @@
     "react-dom": "^16.8.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.11",
-    "@mdx-js/react": "^1.0.20",
     "clipboard-copy": "^3.0.0",
     "lodash": "^4.17.11",
     "polished": "^3.4.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "stack-styled": "^2.0.0",
-    "theme-ui": "^0.1.3"
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@emotion/styled": "^10.0.11",
     "@emotion/babel-preset-css-prop": "^10.0.9",
     "babel-loader": "^8.0.6",
     "husky": "^2.4.0",
diff --git a/src/components/ColorSwatch.jsx b/src/components/ColorSwatch.jsx
@@ -1,25 +1,21 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
 import React from "react";
-import PropTypes from "prop-types";
 import { readableColor } from "polished";
 import { Swatch, SwatchToken, SwatchValue } from "../";
-import { css } from "theme-ui";
 import { tokenPropType, valuePropType } from "../propTypes";
 
 export const ColorSwatch = ({ value, token }) => {
-	const color = readableColor(
-		value,
-		"rgba(0, 0, 0, 0.75)",
-		"rgba(255, 255, 255, 0.75)"
-	);
+	const color = readableColor(value, "black", "white");
 	return (
 		<Swatch token={token} value={value}>
 			<div
-				css={css({
+				sx={{
 					p: 3,
 					pt: 6,
 					bg: value,
 					overflow: "hidden"
-				})}
+				}}
 			>
 				<SwatchToken color={color}>{token}</SwatchToken>
 				<SwatchValue color={color}>{value}</SwatchValue>
diff --git a/src/components/Colors.jsx b/src/components/Colors.jsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { ThemeProvider } from "theme-ui";
+import { Grid, ThemeProvider } from "theme-ui";
 import { omitBy, pickBy, isString } from "lodash";
-import Stack from "stack-styled/emotion/Stack.js";
 import { Swatches, ColorSwatch, PaletteSwatch } from "../index";
 
 export default function Colors({ theme }) {
@@ -10,22 +9,33 @@ export default function Colors({ theme }) {
 	const palettes = omitBy(theme.colors, isString);
 	return (
 		<ThemeProvider theme={theme}>
-			<Stack gap={gap}>
+			<Grid gap={gap}>
 				<Swatches theme={theme} items={palettes}>
 					{(token, value) => (
-						<Stack gap={0} minWidth={100} key={token}>
+						<Grid
+							gap={0}
+							key={token}
+							sx={{
+								gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
+							}}
+						>
 							<PaletteSwatch token={token} value={value} />
-						</Stack>
+						</Grid>
 					)}
 				</Swatches>
-				<Stack gap={gap} minWidth={150}>
+				<Grid
+					gap={gap}
+					sx={{
+						gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
+					}}
+				>
 					<Swatches theme={theme} items={colors}>
 						{(token, value) => (
 							<ColorSwatch token={token} value={value} key={token} />
 						)}
 					</Swatches>
-				</Stack>
-			</Stack>
+				</Grid>
+			</Grid>
 		</ThemeProvider>
 	);
 }
diff --git a/src/components/Spacing.jsx b/src/components/Spacing.jsx
@@ -1,23 +1,26 @@
+/* @jsx jsx */
 import React from "react";
-import { css, ThemeProvider } from "theme-ui";
-import { Swatches, Swatch, SpacingSwatch, SwatchToken } from "../index";
-import Stack from "stack-styled/emotion/Stack.js";
+import { Grid, jsx, ThemeProvider } from "theme-ui";
+import { SpacingSwatch, Swatch, Swatches, SwatchToken } from "../index";
 
 export default function Spacing({ theme }) {
 	return (
 		<ThemeProvider theme={theme}>
-			<Stack gap={4}>
+			<Grid gap={4}>
 				<Swatches items={theme.space}>
 					{(token, value) => (
 						<Swatch token={token} value={value} key={token}>
-							<Stack gap={3} gridTemplateColumns="auto 1fr">
-								<SwatchToken css={css({ p: 1 })}>{token}</SwatchToken>
+							<Grid
+								gap={3}
+								sx={{ alignItems: "center", gridTemplateColumns: "auto 1fr" }}
+							>
+								<SwatchToken>{token}</SwatchToken>
 								<SpacingSwatch value={value} />
-							</Stack>
+							</Grid>
 						</Swatch>
 					)}
 				</Swatches>
-			</Stack>
+			</Grid>
 		</ThemeProvider>
 	);
 }
diff --git a/src/components/SpacingSwatch.jsx b/src/components/SpacingSwatch.jsx
@@ -1,19 +1,19 @@
+/* @jsx jsx */
 import React from "react";
-import PropTypes from "prop-types";
-import { css } from "theme-ui";
+import { jsx } from "theme-ui";
 import { SwatchValue } from "../";
 import { valuePropType } from "../propTypes";
 
 const SpacingSwatch = ({ value, css: componentCSS, ...rest }) => {
 	return (
 		<div
-			css={css({
+			sx={{
 				p: 2,
 				color: "secondary",
 				bg: "muted",
 				width: value,
 				...componentCSS
-			})}
+			}}
 			{...rest}
 		>
 			<SwatchValue color="inherit">{value}</SwatchValue>
diff --git a/src/components/SwatchToken.jsx b/src/components/SwatchToken.jsx
@@ -1,17 +1,18 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
 import React from "react";
-import { css } from "theme-ui";
 
 function SwatchToken({ color = "text", css: componentCSS, ...rest }) {
 	return (
 		<h3
-			css={css({
+			sx={{
 				m: 0,
 				fontFamily: "body",
 				fontSize: "sm",
 				fontWeight: "normal",
 				color,
 				...componentCSS
-			})}
+			}}
 			{...rest}
 		/>
 	);
diff --git a/src/components/SwatchValue.jsx b/src/components/SwatchValue.jsx
@@ -1,17 +1,18 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
 import React from "react";
-import { css } from "theme-ui";
 
 function SwatchValue({ color = "secondary", css: componentCSS, ...rest }) {
 	return (
 		<p
-			css={css({
+			sx={{
 				m: 0,
 				fontFamily: "monospace",
 				fontSize: "xs",
 				whiteSpace: "nowrap",
 				color,
 				...componentCSS
-			})}
+			}}
 			{...rest}
 		/>
 	);
diff --git a/src/components/Swatches.md b/src/components/Swatches.md
@@ -1,9 +1,9 @@
 ```jsx harmony
-import Stack from "stack-styled/emotion/Stack.js";
+import { Grid } from "theme-ui";
 import theme from "../theme";
-import { Swatch, SwatchToken, SpacingSwatch } from "../";
+import { Swatch, Swatches, SwatchToken, SpacingSwatch } from "../";
 
-<Stack gap={2}>
+<Grid gap={4}>
   <Swatches theme={theme} items={theme.space}>
     {(token, value) => (
       <Swatch token={token} value={value} key={token}>
@@ -12,5 +12,5 @@ import { Swatch, SwatchToken, SpacingSwatch } from "../";
       </Swatch>
     )}
   </Swatches>
-</Stack>;
+</Grid>;
 ```
diff --git a/src/components/TextStyleSwatch.jsx b/src/components/TextStyleSwatch.jsx
@@ -1,5 +1,6 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
 import React from "react";
-import { css } from "theme-ui";
 import { valuePropType } from "../propTypes";
 
 /**
@@ -12,12 +13,12 @@ import { valuePropType } from "../propTypes";
  */
 const TextStyleSwatch = ({ value, css: componentCSS, ...rest }) => (
 	<p
-		css={css({
+		sx={{
 			alignSelf: "center",
 			m: 0,
 			...value,
 			...componentCSS
-		})}
+		}}
 		{...rest}
 	/>
 );
diff --git a/src/components/Typography.jsx b/src/components/Typography.jsx
@@ -1,6 +1,6 @@
+/* @jsx jsx */
+import { Grid, jsx, ThemeProvider } from "theme-ui";
 import React from "react";
-import { ThemeProvider, css } from "theme-ui";
-import Stack from "stack-styled/emotion/Stack.js";
 import { Swatch, Swatches, SwatchToken, TextStyleSwatch } from "../";
 
 /**
@@ -13,29 +13,27 @@ import { Swatch, Swatches, SwatchToken, TextStyleSwatch } from "../";
 export default function Typography({ theme }) {
 	return (
 		<ThemeProvider theme={theme}>
-			<Stack gap={5}>
+			<Grid gap={5}>
 				<Swatches theme={theme} items={theme.textStyles || {}}>
 					{(token, value) => (
 						<Swatch token={token} value={value} key={token}>
-							<Stack gap={2}>
-								<div>
-									<SwatchToken
-										css={css({
-											display: "inline-block",
-											fontFamily: "monospace"
-										})}
-									>
-										{token}
-									</SwatchToken>
-								</div>
+							<Grid gap={3}>
+								<SwatchToken
+									sx={{
+										display: "inline-block",
+										fontFamily: "monospace"
+									}}
+								>
+									{token}
+								</SwatchToken>
 								<TextStyleSwatch token={token} value={value}>
 									The quick brown fox jumps over the lazy dog
 								</TextStyleSwatch>
-							</Stack>
+							</Grid>
 						</Swatch>
 					)}
 				</Swatches>
-			</Stack>
+			</Grid>
 		</ThemeProvider>
 	);
 }
diff --git a/src/examples/Readme.md b/src/examples/Readme.md
@@ -1,27 +1,27 @@
 ### [Component-driven Design Systems Workshop](https://github.com/component-driven/component-driven-development) Design System
 
 ```jsx harmony
-import Stack from "stack-styled/emotion/Stack.js";
+import { Grid } from "theme-ui";
 import theme from "./cdds";
 import { Colors, Spacing, Typography } from "../";
 
-<Stack gap={6}>
+<Grid gap={5}>
   <Colors theme={theme} />
   <Spacing theme={theme} />
   <Typography theme={theme} />
-</Stack>;
+</Grid>;
 ```
 
 ### GitHub Primer Design System
 
 ```jsx harmony
-import Stack from "stack-styled/emotion/Stack.js";
+import { Grid } from "theme-ui";
 import theme from "./primer";
 import { Colors, Spacing, Typography } from "../";
 
-<Stack gap={6}>
+<Grid gap={5}>
   <Colors theme={theme} />
   <Spacing theme={theme} />
   <Typography theme={theme} />
-</Stack>;
+</Grid>;
 ```
diff --git a/yarn.lock b/yarn.lock
