Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 1446x 75x 8676x | // @ts-ignore import _get from 'lodash/get'; import { lighten, tint, readableColor, shade } from './colors'; export const generateTextVariants = (textColor: string) => ({ text100: lighten(0.2, textColor), text200: lighten(0.15, textColor), text300: lighten(0.1, textColor), text400: lighten(0.05, textColor), text: textColor, textTint: tint(0.8, textColor), textInverted: readableColor(textColor), textTintInverted: shade(0.3, textColor) }); export const generateColorVariants = ({ color, paletteKey, paletteOverrides }: { color: string; paletteKey: string; paletteOverrides?: ({ color }: { color: string }) => {}; }) => { return { [`${paletteKey}100`]: tint(0.7, color), [`${paletteKey}200`]: tint(0.5, color), [`${paletteKey}300`]: tint(0.3, color), [`${paletteKey}400`]: tint(0.1, color), [paletteKey]: color, [`${paletteKey}500`]: color, [`${paletteKey}600`]: shade(0.1, color), [`${paletteKey}700`]: shade(0.3, color), [`${paletteKey}800`]: shade(0.5, color), [`${paletteKey}900`]: shade(0.7, color), [`${paletteKey}Tint`]: tint(0.9, color), [`${paletteKey}Inverted`]: readableColor(color), [`${paletteKey}TintInverted`]: shade(0.5, color), ...(paletteOverrides ? paletteOverrides({ color }) : {}) }; }; |