[design]: add color lib and helpers

This commit is contained in:
41666 2019-05-20 06:27:45 -04:00
parent 6ba0b0b62b
commit 33dd324708
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
2 changed files with 18 additions and 0 deletions

View file

@ -3,6 +3,7 @@
"name": "@roleypoly/design", "name": "@roleypoly/design",
"version": "2.0.0", "version": "2.0.0",
"dependencies": { "dependencies": {
"color": "^3.1.1",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"styled-components": "^4.2.0" "styled-components": "^4.2.0"
@ -20,6 +21,7 @@
"@storybook/addon-storyshots": "^5.0.11", "@storybook/addon-storyshots": "^5.0.11",
"@storybook/addons": "^5.0.11", "@storybook/addons": "^5.0.11",
"@storybook/react": "^5.0.11", "@storybook/react": "^5.0.11",
"@types/color": "^3.0.0",
"@types/enzyme-adapter-react-16": "^1.0.5", "@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.13", "@types/jest": "^24.0.13",
"@types/node": "^12.0.2", "@types/node": "^12.0.2",

View file

@ -0,0 +1,16 @@
import * as Color from 'color'
const color = (i: Color | string) => {
return new Color(i)
}
export const stepUp = (input: Color | string): string => {
return color(input).lighten(0.1).string()
}
export const stepDown = (input: Color | string): string => {
return color(input).darken(0.1).string()
}
export const textMode = (bg: Color | string, light: string = '#efefef', dark: string = '#1c1111'): string => {
return color(bg).isDark() ? light : dark
}