Merge pull request #502 from system-ui/css-package

Move CSS package

Author: jxnblk

lerna.json

@@ -2,7 +2,5 @@
   "version": "0.2.53",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ]
+  "packages": ["packages/*"]
 }

package.json

@@ -32,8 +32,7 @@
     "prettier": "^1.18.2",
     "react-test-renderer": "^16.8.6"
   },
-  "resolutions": {
-  },
+  "resolutions": {},
   "jest": {
     "testMatch": [
       "**/packages/**/test/*.js"

packages/color/package.json

@@ -8,7 +8,7 @@
     "watch": "microbundle watch --no-compress"
   },
   "dependencies": {
-    "@styled-system/css": "^5.0.23",
+    "@theme-ui/css": "^0.2.48",
     "polished": "^3.4.1"
   },
   "publishConfig": {

packages/color/src/index.js

@@ -1,7 +1,10 @@
 import * as P from 'polished'
-import { get } from '@styled-system/css'
+import { get } from '@theme-ui/css'
 
-const g = (t, c) => get(t, `colors.${c}`, c).replace(/^var\(--(\w+)(.*?), /,'').replace(/\)/,'')
+const g = (t, c) =>
+  get(t, `colors.${c}`, c)
+    .replace(/^var\(--(\w+)(.*?), /, '')
+    .replace(/\)/, '')
 
 export const darken = (c, n) => t => P.darken(n, g(t, c))
 export const lighten = (c, n) => t => P.lighten(n, g(t, c))

packages/components/package.json

@@ -11,7 +11,7 @@
     "@emotion/core": "^10.0.0",
     "@emotion/styled": "^10.0.0",
     "@styled-system/color": "^5.1.2",
-    "@styled-system/css": "^5.0.23",
+    "@theme-ui/css": "^0.2.48",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2"
   },

packages/components/src/AspectImage.js

@@ -2,12 +2,8 @@ import React from 'react'
 import { AspectRatio } from './AspectRatio'
 import { Image } from './Image'
 
-export const AspectImage = React.forwardRef(({
-  ratio,
-  ...props
-}, ref) => (
-  <AspectRatio
-    ratio={ratio}>
+export const AspectImage = React.forwardRef(({ ratio, ...props }, ref) => (
+  <AspectRatio ratio={ratio}>
     <Image
       ref={ref}
       {...props}

packages/components/src/AspectRatio.js

@@ -1,34 +1,32 @@
 import React from 'react'
 import Box from './Box'
 
-export const AspectRatio = React.forwardRef(({
-  ratio = 4/3,
-  children,
-  ...props
-}, ref) => (
-  <Box
-    ref={ref}
-    sx={{
-      position: 'relative',
-      overflow: 'hidden',
-    }}>
+export const AspectRatio = React.forwardRef(
+  ({ ratio = 4 / 3, children, ...props }, ref) => (
     <Box
+      ref={ref}
       sx={{
-        width: '100%',
-        height: 0,
-        paddingBottom: (100 / ratio) + '%',
-      }}
-    />
-    <Box
-      {...props}
-      __css={{
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
+        position: 'relative',
+        overflow: 'hidden',
       }}>
-      {children}
+      <Box
+        sx={{
+          width: '100%',
+          height: 0,
+          paddingBottom: 100 / ratio + '%',
+        }}
+      />
+      <Box
+        {...props}
+        __css={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        }}>
+        {children}
+      </Box>
     </Box>
-  </Box>
-))
+  )
+)

packages/components/src/Avatar.js

@@ -1,15 +1,12 @@
 import React from 'react'
 import { Image } from './Image'
 
-export const Avatar = React.forwardRef(({
-  size = 48,
-  ...props
-}, ref) => (
+export const Avatar = React.forwardRef(({ size = 48, ...props }, ref) => (
   <Image
     ref={ref}
     width={size}
     height={size}
-    variant='avatar'
+    variant="avatar"
     {...props}
     __css={{
       borderRadius: 9999,

packages/components/src/Box.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import css, { get } from '@styled-system/css'
+import { css, get } from '@theme-ui/css'
 import { createShouldForwardProp } from '@styled-system/should-forward-prop'
 import space from '@styled-system/space'
 import color from '@styled-system/color'

packages/components/src/Donut.js

@@ -1,52 +1,52 @@
 import React from 'react'
 import Box from './Box'
 
-export const Donut = React.forwardRef(({
-  size = 128,
-  strokeWidth = 2,
-  value = 0,
-  min = 0,
-  max = 1,
-  title,
-  ...props
-}, ref) => {
-  const r = 16 - (strokeWidth)
-  const C = 2 * r * Math.PI
-  const offset = C - ((value - min) / (max - min) * C)
+export const Donut = React.forwardRef(
+  (
+    {
+      size = 128,
+      strokeWidth = 2,
+      value = 0,
+      min = 0,
+      max = 1,
+      title,
+      ...props
+    },
+    ref
+  ) => {
+    const r = 16 - strokeWidth
+    const C = 2 * r * Math.PI
+    const offset = C - ((value - min) / (max - min)) * C
 
-  return (
-    <Box
-      ref={ref}
-      as='svg'
-      viewBox='0 0 32 32'
-      width={size}
-      height={size}
-      strokeWidth={strokeWidth}
-      fill='none'
-      stroke='currentcolor'
-      role='img'
-      aria-valuenow={value}
-      aria-valuemin={min}
-      aria-valuemax={max}
-      {...props}
-      __css={{
-        color: 'primary',
-      }}>
-      {title && <title>{title}</title>}
-      <circle
-        cx={16}
-        cy={16}
-        r={r}
-        opacity={1/8}
-      />
-      <circle
-        cx={16}
-        cy={16}
-        r={r}
-        strokeDasharray={C}
-        strokeDashoffset={offset}
-        transform='rotate(-90 16 16)'
-      />
-    </Box>
-  )
-})
+    return (
+      <Box
+        ref={ref}
+        as="svg"
+        viewBox="0 0 32 32"
+        width={size}
+        height={size}
+        strokeWidth={strokeWidth}
+        fill="none"
+        stroke="currentcolor"
+        role="img"
+        aria-valuenow={value}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        {...props}
+        __css={{
+          color: 'primary',
+        }}>
+        {title && <title>{title}</title>}
+        <circle cx={16} cy={16} r={r} opacity={1 / 8} />
+        <circle
+          cx={16}
+          cy={16}
+          r={r}
+          strokeDasharray={C}
+          strokeDashoffset={offset}
+          transform="rotate(-90 16 16)"
+        />
+      </Box>
+    )
+  }
+)