Merge pull request #2064 from system-ui/develop

.github/dependabot.yml

@@ -93,3 +93,6 @@ updates:
       - dependency-name: 'stringify-object'
         versions:
           - '>= 3'
+      - dependency-name: 'cypress'
+        versions:
+          - '> 9.0.0, < 10'

package.json

@@ -49,7 +49,7 @@
     "@preconstruct/cli": "^2.1.5",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.9",
+    "@types/node": "^17.0.5",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",

packages/color/test/index.tsx

@@ -26,6 +26,7 @@ import {
   complement,
   invert,
   grayscale,
+  getColor,
 } from '../src'
 
 expect.extend(matchers)
@@ -373,3 +374,11 @@ test('typechecks', () => {
   }
   //#endregion
 })
+
+describe('getColor', () => {
+  test('throws error if given CSS custom property', () => {
+    expect(() => getColor({}, 'var(--theme-ui-colors-primary)')).toThrow(
+      'A CSS property was passed to `getColor`.'
+    )
+  })
+})

packages/css/src/index.ts

@@ -111,10 +111,12 @@ export const multiples = {
 
 export const scales = {
   color: 'colors',
+  background: 'colors',
   backgroundColor: 'colors',
   borderColor: 'colors',
   caretColor: 'colors',
   columnRuleColor: 'colors',
+  outlineColor: 'colors',
   textDecorationColor: 'colors',
   opacity: 'opacities',
   transition: 'transitions',
@@ -233,7 +235,6 @@ export const scales = {
   borderStartEndRadius: 'radii',
   borderStartStartRadius: 'radii',
   columnRuleWidth: 'borderWidths',
-  outlineColor: 'colors',
   boxShadow: 'shadows',
   textShadow: 'shadows',
   zIndex: 'zIndices',

packages/css/test/utils.ts

@@ -0,0 +1,62 @@
+import { Theme } from '../src'
+import { makeColorsScale, makeStyles, makeTheme } from '../src/utils'
+import { AssertTrue, expecter, IsExact } from '@theme-ui/test-utils'
+
+const symbolPretendingToBeTheme = Symbol() as Theme
+
+describe(makeTheme, () => {
+  it('returns input unchanged', () => {
+    const actual = makeTheme(symbolPretendingToBeTheme)
+    expect(actual).toEqual(symbolPretendingToBeTheme)
+  })
+
+  it('preserves type of the argument', () => {
+    const theme = makeTheme({
+      colors: {
+        primary: 'tomato',
+      },
+    })
+
+    type _ = AssertTrue<
+      IsExact<typeof theme, { colors: { primary: 'tomato' } }>
+    >
+  })
+
+  it('is exposed from entrypoint /utils and validates Theme type', () => {
+    expecter('import { makeTheme } from "@theme-ui/css/utils"')(
+      'const t = makeTheme("banana")'
+    ).toFail(/Type '"banana"' has no properties in common with type 'Theme'./)
+  })
+})
+
+describe(makeStyles, () => {
+  it('returns input unchanged', () => {
+    const actual = makeTheme(symbolPretendingToBeTheme)
+    expect(actual).toEqual(symbolPretendingToBeTheme)
+  })
+
+  it('preserves type of the argument', () => {
+    const styles = makeStyles({
+      code: {},
+    })
+
+    type _ = AssertTrue<IsExact<typeof styles, { code: {} }>>
+  })
+})
+
+describe(makeColorsScale, () => {
+  it('returns input unchanged', () => {
+    const actual = makeTheme(symbolPretendingToBeTheme)
+    expect(actual).toEqual(symbolPretendingToBeTheme)
+  })
+
+  it('preserves type of the argument', () => {
+    const colors = makeColorsScale({
+      blue: {
+        light: '#e6f7ff',
+      },
+    })
+
+    type _ = AssertTrue<IsExact<typeof colors, { blue: { light: '#e6f7ff' } }>>
+  })
+})

packages/docs/package.json

@@ -93,6 +93,6 @@
     "@babel/register": "^7.8.6"
   },
   "resolutions": {
-    "@emotion/react": "11.4.0"
+    "@emotion/react": "11.7.1"
   }
 }

packages/docs/src/components/presets-demo.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-import { jsx, Themed, components, Select } from 'theme-ui'
-import { ThemeContext } from '@emotion/react'
+import { jsx, Themed, components, Select, ThemeProvider } from 'theme-ui'
 import { MDXProvider } from '@mdx-js/react'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet'
@@ -16,7 +15,8 @@ import Lorem from './lorem.mdx'
 
 export default function PresetsDemo() {
   const [theme, setTheme] = useState('base')
-  const preset = presets[theme]
+  const preset = presets[theme]   
+
 
   return (
     <div>
@@ -46,7 +46,7 @@ export default function PresetsDemo() {
           <span>Preset:</span>
           <Select
             id="theme"
-            sx={{ display: 'inline-flex' }}
+            sx={{ display: 'inline-flex', paddingRight: 32 }}
             value={theme}
             onChange={(e) => {
               setTheme(e.target.value)
@@ -57,7 +57,7 @@ export default function PresetsDemo() {
             ))}
           </Select>
         </label>
-        <ThemeContext.Provider value={preset}>
+        <ThemeProvider theme={preset}>
           <Themed.root sx={{ bg: 'background', color: 'text', p: 3 }}>
             <Themed.h2>Colors</Themed.h2>
             <ColorPalette omit={['modes', 'header']} />
@@ -94,7 +94,7 @@ export default function PresetsDemo() {
               }}
             />
           </Themed.root>
-        </ThemeContext.Provider>
+        </ThemeProvider>
       </div>
     </div>
   )

packages/e2e/package.json

@@ -15,7 +15,7 @@
     "@percy/cli": "^1.0.0-beta.54",
     "@percy/cypress": "^3.1.1",
     "@testing-library/cypress": "^8.0.2",
-    "cypress": "9.1.0",
+    "cypress": "9.0.0",
     "esbuild": "^0.14.1"
   }
 }

packages/tachyons/src/index.ts

@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 import { Theme } from '@theme-ui/css'
 
 const KEY_MAPPING: {