packages/colors/gen-pill-shades.ts

   1 import type { Instance as Color } from 'tinycolor2';
   2 import tinycolor from 'tinycolor2';
   3
   4 export function genPillTextColorShades(base: Color) {
   5     const hsl = base.toHsl();
   6
   7     const lightBackground = tinycolor({
   8         h: hsl.h,
   9         s: Math.min(1, hsl.s * 1.3),
  10         l: 0.94,
  11     });
  12
  13     const darkBackground = tinycolor({
  14         h: hsl.h,
  15         s: Math.min(1, hsl.s * 1.05),
  16         l: 0.3,
  17     });
  18
  19     return [
  20         base,
  21         tinycolor.mostReadable(base, [lightBackground, darkBackground], {
  22             includeFallbackColors: false,
  23             level: 'AA',
  24             size: 'small',
  25         }),
  26     ];
  27 }
  28
  29 export function genPillBackgroundColorShades(base: Color) {
  30     const hsl = base.toHsl();
  31
  32     const lightText = tinycolor({
  33         h: hsl.h,
  34         s: Math.min(1, hsl.s * 1.05),
  35         l: 0.95,
  36     });
  37
  38     const darkText = tinycolor({
  39         h: hsl.h,
  40         s: 1,
  41         l: 0.2,
  42     });
  43
  44     return [
  45         tinycolor.mostReadable(base, [lightText, darkText], {
  46             includeFallbackColors: false,
  47             level: 'AA',
  48             size: 'small',
  49         }),
  50         base,
  51     ];
  52 }