Support custom grade intervals

[darekkay]

Currently, the color grade format has to be between 0 and 100 (e.g. white-0, green-10, green-50, green-90, black-100). Some palettes use different grade intervals, e.g.:

• 0-9 (e.g. Open Color)
• 100-900 (e.g. Tailwind)

A custom grade interval structure should be supported within a11y-contrast to support those use cases. This should be either configurable or automatically detected and applied.

Starting point: https://github.com/darekkay/a11y-contrast/blob/master/src/index.js#L47

[frankstallone]

Adding to this. I only found out about this idea of using specific numbers to align to some system. I created ours based on 100 - 1000. Recently, we needed two darker neutral colors, so I created a neutral-1100, and neutral-1200. I would have to create a whole separate palette to conform to this proposed color grade format, and map it to what we have already. We use SASS but this would still be a mess.

[darekkay]

Implemented in version 3.0.0! Any custom grade system is now supported. The example folder includes Radix UI palettes with a range between 1 and 12.