refactor(theming): improves custom color scale generation

[ze-flo]

Description

This PR follows up on #1798 and generates a 12-step color scale using the very lightweight color2k library.

Detail

Garden's color palette were generated using Leonardo using the following offset-based contrast ratios.

const targetRatios = {
      100: 1.08,
      200: 1.2,
      300: 1.35,
      400: 2,
      500: 2.8,
      600: 3.3,
      700: 5,
      800: 10,
      900: 13,
      1000: 16,
      1100: 17.5,
      1200: 19.5
    };

generateColorScale generates a 200 color scale with Color2K and returns a color scale object. Each key is an offset value and the corresponding value is the color that best matches the target contrast ratio for that offset. 🎨

See demo.

Size improvement over chroma-js

BEFORE

AFTER

Before (KB)	After (KB)	Diff
15.44	2.69	-82.57%

Checklist

• 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
• 🌐 demo is up-to-date (npm start)
• ⬅️ renders as expected with reversed (RTL) direction
• 🤘 renders as expected with Bedrock CSS (?bedrock)
• 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
• ♿ tested for WCAG 2.1 AA accessibility compliance
• 📝 tested in Chrome, Firefox, Safari, and Edge

[coveralls]

coverage: 96.046% (-0.04%) from 96.084%
when pulling c54a3b9 on ze-flo/custom-color-scale-gen
into cffdb06 on next.

[geotrev]

bundle size difference

pog