mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-25 20:19:12 +00:00
[design]: add color lib and helpers
This commit is contained in:
parent
6ba0b0b62b
commit
33dd324708
2 changed files with 18 additions and 0 deletions
|
@ -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",
|
||||||
|
|
16
packages/roleypoly-design/src/helpers/colors.ts
Normal file
16
packages/roleypoly-design/src/helpers/colors.ts
Normal 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
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue