packages/colors/tint.test.ts

   1 import tinycolor from 'tinycolor2';
   2
   3 import tint from './tint';
   4
   5 describe('tint', () => {
   6     it('tints a color', () => {
   7         /* in steps of 10 from 0 to 100*/
   8         const expectedByBase = {
   9             '#6d4aff': [
  10                 '#6d4aff',
  11                 '#7c5cff',
  12                 '#8a6eff',
  13                 '#9980ff',
  14                 '#a792ff',
  15                 '#b6a5ff',
  16                 '#c5b7ff',
  17                 '#d3c9ff',
  18                 '#e2dbff',
  19                 '#f0edff',
  20                 '#ffffff',
  21             ],
  22             '#db3251': [
  23                 '#db3251',
  24                 '#df4762',
  25                 '#e25b74',
  26                 '#e67085',
  27                 '#e98497',
  28                 '#ed99a8',
  29                 '#f1adb9',
  30                 '#f4c2cb',
  31                 '#f8d6dc',
  32                 '#fbebee',
  33                 '#ffffff',
  34             ],
  35         };
  36
  37         for (const [input, outputs] of Object.entries(expectedByBase)) {
  38             for (const [index, expected] of Object.entries(outputs)) {
  39                 const output = tint(tinycolor(input), Number(index) * 10);
  40
  41                 expect(output.toHexString()).toBe(expected);
  42             }
  43         }
  44     });
  45 });