packages/colors/shade.test.ts

   1 import tinycolor from 'tinycolor2';
   2
   3 import shade from './shade';
   4
   5 describe('shade', () => {
   6     it('shades a color', () => {
   7         /* in steps of 10 from 0 to 100*/
   8         const expectedByBase = {
   9             '#6d4aff': [
  10                 '#6d4aff',
  11                 '#6243e6',
  12                 '#573bcc',
  13                 '#4c34b3',
  14                 '#412c99',
  15                 '#372580',
  16                 '#2c1e66',
  17                 '#21164d',
  18                 '#160f33',
  19                 '#0b071a',
  20                 '#000000',
  21             ],
  22             '#DB3251': [
  23                 '#db3251',
  24                 '#c52d49',
  25                 '#af2841',
  26                 '#992339',
  27                 '#831e31',
  28                 '#6e1929',
  29                 '#581420',
  30                 '#420f18',
  31                 '#2c0a10',
  32                 '#160508',
  33                 '#000000',
  34             ],
  35         };
  36
  37         for (const [input, outputs] of Object.entries(expectedByBase)) {
  38             for (const [index, expected] of Object.entries(outputs)) {
  39                 const output = shade(tinycolor(input), Number(index) * 10);
  40
  41                 expect(output.toHexString()).toBe(expected);
  42             }
  43         }
  44     });
  45 });