Shopify/polaris-viz

Implement ColorScale utility function

Closed this issue · 0 comments

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:

image

In the Matrix, each row is a named hue:

Screen Shot 2022-08-02 at 9 56 26 AM

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
}