All files / src/utils palette.ts

100% Statements 4/4
100% Branches 2/2
100% Functions 2/2
100% Lines 3/3

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 }) : {})
  };
};