Merge pull request #1 from system-ui/develop

Sync with main repo
hasparus · Jan 21, 2021 · 6262213 · 6262213
2 parents 90b7c10 + 548f60f
commit 6262213
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 125 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-test-renderer": "^17.0.0",
     "babel-jest": "^26.0.1",
-    "babel-preset-gatsby": "^0.9.1",
+    "babel-preset-gatsby": "^0.10.0",
     "husky": ">=4.0.7",
     "jest": "^26.0.1",
     "jest-canvas-mock": "^2.2.0",

diff --git a/packages/color-modes/src/custom-properties.ts b/packages/color-modes/src/custom-properties.ts
@@ -93,7 +93,7 @@ export const createColorStyles = (theme: Theme = {}) => {
       printColorModeName === initialColorModeName
         ? colors
         : modes[printColorModeName]
-    styles['@media (print)'] = objectToVars('colors', mode)
+    styles['@media print'] = objectToVars('colors', mode)
   }
   const colorToVarValue = (color: string) =>
     toVarValue(`colors-${color}`, get(theme, `colors.${color}`))

diff --git a/packages/color-modes/test/custom-properties.tsx b/packages/color-modes/test/custom-properties.tsx
@@ -95,7 +95,7 @@ describe('createColorStyles', () => {
           '--theme-ui-colors-text': 'tomato',
           '--theme-ui-colors-background': 'white',
         },
-        '@media (print)': {
+        '@media print': {
           '--theme-ui-colors-text': 'tomato',
           '--theme-ui-colors-background': 'white',
         },
@@ -128,7 +128,7 @@ describe('createColorStyles', () => {
           '--theme-ui-colors-text': 'white',
           '--theme-ui-colors-background': 'black',
         },
-        '@media (print)': {
+        '@media print': {
           '--theme-ui-colors-text': 'tomato',
           '--theme-ui-colors-background': 'white',
         },

diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
@@ -70,6 +70,9 @@ const theme: Theme = {
       letterSpacing: ['-0.01em', '-0.02em'],
     },
   },
+  borders: {
+    body: "3px solid #000000",
+  },
   borderWidths: {
     thin: 1,
   },
@@ -83,6 +86,14 @@ const theme: Theme = {
   transitions: {
     standard: '0.3s ease-in-out',
   },
+  shadows: {
+    card: "5px 5px 15px 5px #000000",
+  },
+  zIndices: {
+    below: -1,
+    body: 1,
+    nav: 2,
+  },
 }
 
 test('returns a function', () => {
@@ -182,6 +193,9 @@ test('handles all core styled system props', () => {
     transition: 'standard',
     fontFamily: 'monospace',
     lineHeight: 'body',
+    border: 'body',
+    boxShadow: 'card',
+    zIndex: 'nav',
   })({ theme })
   expect(result).toEqual({
     margin: 0,
@@ -202,6 +216,9 @@ test('handles all core styled system props', () => {
     fontSize: 24,
     fontWeight: 600,
     lineHeight: 1.5,
+    border: '3px solid #000000',
+    boxShadow: '5px 5px 15px 5px #000000',
+    zIndex: 2,
   })
 })
 

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -43,7 +43,7 @@
     "lodash.omit": "^4.5.0",
     "prismjs": "^1.16.0",
     "react": "^17.0.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "remark-slug": "^6.0.0",

diff --git a/packages/gatsby-theme-style-guide/package.json b/packages/gatsby-theme-style-guide/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "gatsby": "^2.26.1",
     "react": "^17.0.1",
-    "react-dom": "^16.14.0"
+    "react-dom": "^17.0.1"
   },
   "dependencies": {
     "@theme-ui/style-guide": "0.6.0-alpha.4",