packages/colors/gen-button-shades.ts

   1 import type { Instance as Color } from 'tinycolor2';
   2 import tinycolor from 'tinycolor2';
   3
   4 import isBetween from '@proton/utils/isBetween';
   5
   6 import shade from './shade';
   7 import tint from './tint';
   8
   9 function genMutation(color: Color) {
  10     return function (mutation: number) {
  11         const clone = color.clone();
  12
  13         return mutation > 0 ? tint(clone, mutation) : shade(clone, Math.abs(mutation));
  14     };
  15 }
  16
  17 function genButtonShades(base: Color, light: boolean) {
  18     const hsv = base.toHsv();
  19
  20     if (hsv.s <= 0.3) {
  21         if (light) {
  22             return [70, 50, 0, -5, -10, -15].map(genMutation(base));
  23         } else {
  24             return [-70, -50, 0, 10, 20, 30].map(genMutation(base));
  25         }
  26     }
  27
  28     if (isBetween(hsv.h, 30, 60)) {
  29         if (light) {
  30             const tinted = [90, 80, 0].map(genMutation(base));
  31
  32             const shaded = [-5, -10, -15].map(genMutation(base)).map((c, i) => {
  33                 const hsl = c.toHsl();
  34                 hsl.h = hsl.h - 5 * (i + 1);
  35                 return tinycolor(hsl);
  36             });
  37
  38             return [...tinted, ...shaded];
  39         } else {
  40             const shaded = [-80, -70].map(genMutation(base)).map((c) => {
  41                 const hsl = c.toHsl();
  42                 hsl.h = hsl.h - 15;
  43                 return tinycolor(hsl);
  44             });
  45
  46             const tinted = [0, 10, 20, 30].map(genMutation(base));
  47
  48             return [...shaded, ...tinted];
  49         }
  50     }
  51
  52     if (light) {
  53         return [90, 80, 0, -10, -20, -30].map(genMutation(base));
  54     } else {
  55         return [-80, -70, 0, 10, 20, 30].map(genMutation(base));
  56     }
  57 }
  58
  59 export default genButtonShades;