Merge pull request #672 from hasparus/ts-color

Adopt TS in theme-ui/color

Author: mxstbr

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.js

@@ -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/src/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/test/index.js renamed to packages/color/test/index.ts

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

packages/color/tsconfig.json

@@ -19,8 +19,6 @@
   "dependencies": {
     "@emotion/core": "^10.0.0",
     "@theme-ui/css": "^0.3.1",
-    "@types/styled-system": "^5.1.6",
-    "@types/styled-system__css": "^5.0.4",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {

packages/core/package.json

@@ -4,15 +4,14 @@ import {
   InterpolationWithTheme,
 } from '@emotion/core'
 // @ts-ignore
-import { css } from '@theme-ui/css'
+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'
 
 import './react-jsx'
 
-export * from './theme'
+export * from './types'
 
 const getCSS = props => {
   if (!props.sx && !props.css) return undefined

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-import { SxProps } from './theme'
+import { SxProps } from './types'
 
 declare module 'react' {
   // tslint:disable-next-line: no-empty-interface