packages/colors/gen-button-shades.test.ts

   1 import tinycolor from 'tinycolor2';
   2
   3 import genButtonShades from './gen-button-shades';
   4
   5 describe('genButtonShades', () => {
   6     it('generates the necessary shades for a button', () => {
   7         const output = genButtonShades(tinycolor('#6d4aff'), true);
   8
   9         expect(output.map((c) => c.toHexString())).toEqual([
  10             '#f0edff',
  11             '#e2dbff',
  12             '#6d4aff',
  13             '#6243e6',
  14             '#573bcc',
  15             '#4c34b3',
  16         ]);
  17     });
  18
  19     it("generates the necessary button shades when the color's hue is between 30 & 60", () => {
  20         const output = genButtonShades(tinycolor('#ff9900'), true);
  21
  22         expect(output.map((c) => c.toHexString())).toEqual([
  23             '#fff5e6',
  24             '#ffebcc',
  25             '#ff9900',
  26             '#f27d00',
  27             '#e66300',
  28             '#d94c00',
  29         ]);
  30     });
  31
  32     it("generates the necessary button shades when the color's saturation is less than or equal to 30", () => {
  33         const output = genButtonShades(tinycolor('#eae7e4'), true);
  34
  35         expect(output.map((c) => c.toHexString())).toEqual([
  36             '#f9f8f7',
  37             '#f5f3f2',
  38             '#eae7e4',
  39             '#dedbd9',
  40             '#d3d0cd',
  41             '#c7c4c2',
  42         ]);
  43     });
  44 });