diff --git a/packages/react-base16-styling/package.json b/packages/react-base16-styling/package.json index 9426dc13..a988d027 100644 --- a/packages/react-base16-styling/package.json +++ b/packages/react-base16-styling/package.json @@ -37,13 +37,12 @@ }, "dependencies": { "@types/base16": "^1.0.2", + "@types/color-string": "^1.5.0", "@types/lodash.curry": "^4.1.6", - "@types/lodash.flow": "^3.5.6", "base16": "^1.0.0", + "color-string": "^1.5.3", "csstype": "^3.0.2", - "lodash.curry": "^4.1.1", - "lodash.flow": "^3.5.0", - "pure-color": "^1.3.0" + "lodash.curry": "^4.1.1" }, "devDependencies": { "@babel/cli": "^7.10.5", diff --git a/packages/react-base16-styling/src/colorConverters.ts b/packages/react-base16-styling/src/colorConverters.ts index 340591f2..4251b7e1 100644 --- a/packages/react-base16-styling/src/colorConverters.ts +++ b/packages/react-base16-styling/src/colorConverters.ts @@ -1,4 +1,4 @@ -type Color = [number, number, number]; +export type Color = [number, number, number]; export function yuv2rgb(yuv: Color): Color { const y = yuv[0], diff --git a/packages/react-base16-styling/src/index.ts b/packages/react-base16-styling/src/index.ts index 708ac783..7e42d094 100644 --- a/packages/react-base16-styling/src/index.ts +++ b/packages/react-base16-styling/src/index.ts @@ -1,10 +1,8 @@ import curry from 'lodash.curry'; import * as base16 from 'base16'; import { Base16Theme } from 'base16'; -import rgb2hex from 'pure-color/convert/rgb2hex'; -import parse from 'pure-color/parse'; -import flow from 'lodash.flow'; -import { yuv2rgb, rgb2yuv } from './colorConverters'; +import { get, to } from 'color-string'; +import { Color, yuv2rgb, rgb2yuv } from './colorConverters'; const DEFAULT_BASE16 = base16.default; @@ -12,15 +10,16 @@ const BASE16_KEYS = Object.keys(DEFAULT_BASE16); // we need a correcting factor, so that a dark, but not black background color // converts to bright enough inversed color -const flip = (x) => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x); +const flip = (x: number) => (x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x); -const invertColor = flow( - parse, - rgb2yuv, - ([y, u, v]) => [flip(y), u, v], - yuv2rgb, - rgb2hex -); +const invertColor = (colorString: string) => { + const color = get.rgb(colorString); + if (!color) throw new Error(`Unable to parse color: ${colorString}`); + const [y, u, v] = rgb2yuv([color[0], color[1], color[2]]); + const flippedYuv: Color = [flip(y), u, v]; + const rgb = yuv2rgb(flippedYuv); + return to.hex(rgb); +}; const merger = function merger(styling) { return (prevStyling) => ({ diff --git a/packages/react-base16-styling/src/types.ts b/packages/react-base16-styling/src/types.ts index 20cfc650..89ebca97 100644 --- a/packages/react-base16-styling/src/types.ts +++ b/packages/react-base16-styling/src/types.ts @@ -1,3 +1,11 @@ import { Base16Theme } from 'base16'; +import * as CSS from 'csstype'; + +export type StylingValue = string | CSS.Properties | + +export interface StylingConfig { + extend?: string | Base16Theme; + [name: string]: StylingValue; +} export type Theme = string | Base16Theme | StylingConfig; diff --git a/yarn.lock b/yarn.lock index 7ae66013..01f57304 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3060,6 +3060,11 @@ resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== +"@types/color-string@^1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@types/color-string/-/color-string-1.5.0.tgz#0a9f3ee6bc9bd4f89693fc3f2bc30d47ad68afc3" + integrity sha512-17/8LWbkfvoKgfnnBvKbUnPTzPtzBlSELf5FPvVt9dRTQW88igOYZZ78us9dmbY1301VtTBEnuPTKspvmtGDxA== + "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" @@ -3137,13 +3142,6 @@ dependencies: "@types/lodash" "*" -"@types/lodash.flow@^3.5.6": - version "3.5.6" - resolved "https://registry.yarnpkg.com/@types/lodash.flow/-/lodash.flow-3.5.6.tgz#ecbdae376e610313ac6361430f2f59a8dc9a813f" - integrity sha512-mpSgC8s1alwO8I5223G//0vSt1BTR395TdxbkprAUgedRaW71Ew9ajSIjk9hsSpWxGki6ExPDnI3zKeJjyeHwQ== - dependencies: - "@types/lodash" "*" - "@types/lodash@*": version "4.14.159" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.159.tgz#61089719dc6fdd9c5cb46efc827f2571d1517065" @@ -5456,7 +5454,7 @@ color-name@^1.0.0, color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.5.2: +color-string@^1.5.2, color-string@^1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc" integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw== @@ -10724,11 +10722,6 @@ lodash.flattendeep@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI= -lodash.flow@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a" - integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o= - lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" @@ -13052,11 +13045,6 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -pure-color@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e" - integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4= - q@^1.1.2, q@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"