Implement ColorScale utility function
Closed this issue · 0 comments
krystalcampioni commented
Implementation Guidelines:
From Polaris-Viz export a ColorScale
utility function, that takes in a hue
,min
and max
and returns a scale function that returns a backgroundColor
and a textColor
, according to the Polaris Viz Color Matrix:
In the Matrix, each row is a named hue
:
enum Hue {
Teal,
Blue,
Indigo,
Purple,
Magenta,
Orange,
Yellow
}
Each hue has various lightness colors ranging from 00
, to 160
. E.g. Teal00
, Teal160
The ColorScale
function should use D3's scaleOrdinal to map the lightness of the hue to a given value, based on the min
and max
provided.
Example:
function ColorScale( hue, min, max) {
return functionBasedOnScaleOrdinal
}
const tealScale = ColorScale(Hue.Teal, 0, 100)
tealScale(0)
// returns:
{
backgroundColor: #f0f8fb // `$Teal00` from polaris-viz-core
textColor: black // light background should use dark text to guarantee color contrast
}
tealScale(100)
// returns:
{
backgroundColor: #001419 // `$Teal160` from polaris-viz-core
textColor: white // dark background should use light text to guarantee color contrast
}