adds an index above each scale step

[bryanberger]

Adds a string above each scale step to indicate which index in the scale.colors array the color is. I opted to wrap the existing scale ZStack in order to separate it from that container (so the points don't interfere with it.

)

ref: https://github.com/primer/prism/discussions/32

[bryanberger]

I also tried adding these below the scale steps but it seemed too cluttered down there. Thoughts?

[bryanberger]

Thanks for the <Box/> tips @colebemis!

I ran into a slight issue, because the color steps have a variable width, we run into an alignment issue when lifting a div above them.

I might try and add these to the :before content, but I prefer not to introduce more negative absolute positioning.

Also...we solved the variable width in our fork by rotating the contrast spans vertically instead (so the width doesn't fluctuate based on contrast score text, and also renamed AA Large to just AA+ for brevity) I can add that to this PR as well if you think it's a good direction.

[colebemis]

I love this solution! Feel free to add it to this PR 💖

[bryanberger]

Latest screenshot with mentioned changes: