Merge branch 'master' into ts-tachyons

.gitignore

@@ -5,4 +5,5 @@ node_modules
 dist
 coverage
 .DS_Store
-.rts2_cache*
+.rts2_cache*
+.idea

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Removes overriding property on editor combobox
 - Adjust media query sort logic #600
 - Fixed link to Gatsby Plugin page in `getting-started` page. Issue #602
 

package.json

@@ -25,6 +25,7 @@
     "@babel/preset-typescript": "^7.8.3",
     "@babel/runtime": "^7.7.7",
     "@testing-library/react": "^9.1.3",
+    "@types/jest": "^25.1.2",
     "babel-jest": "^24.9.0",
     "husky": ">=4.0.7",
     "jest": "^24.8.0",
@@ -35,12 +36,27 @@
     "lint-staged": "10",
     "microbundle": "^0.11.0",
     "prettier": "^1.18.2",
-    "react-test-renderer": "^16.8.6"
+    "react-test-renderer": "^16.8.6",
+    "ts-jest": "^25.2.0"
   },
   "resolutions": {},
   "jest": {
+    "preset": "ts-jest/presets/js-with-babel",
+    "globals": {
+      "ts-jest": {
+        "tsConfig": {
+          "module": "commonjs",
+          "esModuleInterop": true,
+          "resolveJsonModule": true,
+          "jsx": "react",
+          "strictFunctionTypes": true,
+          "alwaysStrict": true,
+          "noImplicitThis": true
+        }
+      }
+    },
     "testMatch": [
-      "**/packages/**/test/*.js"
+      "**/packages/**/test/*.{js,ts,tsx}"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
@@ -55,7 +71,7 @@
       "html"
     ],
     "collectCoverageFrom": [
-      "packages/**/src/**/*.js",
+      "packages/**/src/**/*.{js,ts,tsx}",
       "!packages/docs/**/*",
       "!packages/presets/**/*",
       "!packages/style-guide/**/*",

packages/color/README.md

@@ -1,4 +1,3 @@
-
 # @theme-ui/color
 
 Color manipulation utilities for Theme UI
@@ -14,14 +13,15 @@ Import utilities from the `@theme-ui/color` package and use them with colors in
 import { jsx } from 'theme-ui'
 import { darken, lighten } from '@theme-ui/color'
 
-export default props =>
+export default props => (
   <div
     {...props}
     sx={{
-      color: darken('primary', .25),
-      bg: lighten('primary', .875),
+      color: darken('primary', 0.25),
+      bg: lighten('primary', 0.875),
     }}
   />
+)
 ```
 
 ## API
@@ -161,7 +161,15 @@ import { invert } from '@theme-ui/color'
 // invert('primary')
 ```
 
+### `grayscale`
+
+Desaturate the color to grayscale
+
+```js
+import { grayscale } from '@theme-ui/color'
+// grayscale('primary')
+```
+
 ### Related
 
 - [Polished](https://polished.js.org)
-

packages/color/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@theme-ui/color",
   "version": "0.3.1",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "microbundle --no-compress",
     "watch": "microbundle watch --no-compress"

packages/color/src/index.ts

@@ -0,0 +1,85 @@
+import * as P from 'polished'
+import { get, Theme } from '@theme-ui/css'
+
+const g = (t: Theme, c: string) =>
+  get(t, `colors.${c}`, c)
+    .replace(/^var\(--(\w+)(.*?), /, '')
+    .replace(/\)/, '')
+
+/**
+ * Darken a color by an amount 0–1
+ */
+export const darken = (c: string, n: number) => (t: Theme) =>
+  P.darken(n, g(t, c))
+/**
+ * Lighten a color by an amount 0–1
+ */
+export const lighten = (c: string, n: number) => (t: Theme) =>
+  P.lighten(n, g(t, c))
+/**
+ * Rotate the hue of a color by an amount 0–360
+ */
+export const rotate = (c: string, d: number) => (t: Theme) =>
+  P.adjustHue(d, g(t, c))
+
+/**
+ * Set the hue of a color to a degree 0–360
+ */
+export const hue = (c: string, h: number) => (t: Theme) => P.setHue(h, g(t, c))
+/**
+ * Set the saturation of a color to an amount 0–1
+ */
+export const saturation = (c: string, s: number) => (t: Theme) =>
+  P.setSaturation(s, g(t, c))
+/**
+ * Set the lightness of a color to an amount 0–1
+ */
+export const lightness = (c: string, l: number) => (t: Theme) =>
+  P.setLightness(l, g(t, c))
+/**
+ * Desaturate a color by an amount 0–1
+ */
+export const desaturate = (c: string, n: number) => (t: Theme) =>
+  P.desaturate(n, g(t, c))
+/**
+ * Saturate a color by an amount 0–1
+ */
+export const saturate = (c: string, n: number) => (t: Theme) =>
+  P.saturate(n, g(t, c))
+
+/**
+ * Shade a color by an amount 0–1
+ */
+export const shade = (c: string, n: number) => (t: Theme) => P.shade(n, g(t, c))
+/**
+ * Tint a color by an amount 0–1
+ */
+export const tint = (c: string, n: number) => (t: Theme) => P.tint(n, g(t, c))
+
+export const transparentize = (c: string, n: number) => (t: Theme) =>
+  P.transparentize(n, g(t, c))
+/**
+ * Set the transparency of a color to an amount 0-1
+ */
+export const alpha = (c: string, n: number) => (t: Theme) => P.rgba(g(t, c), n)
+
+/**
+ * Mix two colors by a specific ratio
+ */
+export const mix = (a: string, b: string, n = 0.5) => (t: Theme) =>
+  P.mix(n, g(t, a), g(t, b))
+
+/**
+ * Get the complement of a color
+ */
+export const complement = (c: string) => (t: Theme) => P.complement(g(t, c))
+
+/**
+ * Get the inverted color
+ */
+export const invert = (c: string) => (t: Theme) => P.invert(g(t, c))
+
+/**
+ * Desaturate the color to grayscale
+ */
+export const grayscale = (c: string) => desaturate(c, 1)

packages/color/test/index.js → packages/color/test/index.ts

@@ -1,3 +1,5 @@
+import { Theme } from '@theme-ui/css'
+
 import {
   darken,
   lighten,
@@ -22,7 +24,7 @@ const theme = {
     primary: '#0cf',
     secondary: '#639',
   },
-}
+} as Theme
 
 test('desaturate', () => {
   const n = desaturate('primary', 0.5)(theme)
@@ -114,7 +116,7 @@ const themeCustomProps = {
     primary: 'var(--theme-ui-colors-primary, #0cf)',
     secondary: 'var(--theme-ui-colors-primary, #639)',
   },
-}
+} as Theme
 
 test('desaturateCustomProps', () => {
   const n = desaturate('primary', 0.5)(themeCustomProps)
@@ -195,7 +197,7 @@ const themeTomato = {
   colors: {
     primary: 'tomato',
   },
-}
+} as Theme
 
 test('darkenTomato', () => {
   const n = darken('primary', 0.25)(themeTomato)
@@ -206,7 +208,7 @@ const themeTomatoCustomProps = {
   colors: {
     primary: 'var(--theme-ui-colors-primary, tomato)',
   },
-}
+} as Theme
 
 test('darkenTomatoCustomProps', () => {
   const n = darken('primary', 0.25)(themeTomatoCustomProps)

packages/color/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "strict": true,
+
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
+}

packages/core/src/index.ts

@@ -3,13 +3,15 @@ import {
   ThemeContext as EmotionContext,
   InterpolationWithTheme,
 } from '@emotion/core'
-import { css } from '@theme-ui/css'
+// @ts-ignore
+import { css, Theme } from '@theme-ui/css'
 import React from 'react'
 import deepmerge from 'deepmerge'
 import { version as __EMOTION_VERSION__ } from '@emotion/core/package.json'
-import { Theme } from './theme'
 
-export * from './theme'
+import './react-jsx'
+
+export * from './types'
 
 const getCSS = props => {
   if (!props.sx && !props.css) return undefined

packages/core/src/react-jsx.ts

@@ -0,0 +1,13 @@
+import { SxProps } from './types'
+
+declare module 'react' {
+  // tslint:disable-next-line: no-empty-interface
+  interface DOMAttributes<T> extends SxProps {}
+}
+
+declare global {
+  namespace JSX {
+    // tslint:disable-next-line: no-empty-interface
+    interface IntrinsicAttributes extends SxProps {}
+  }
+}