Closed bryanberger closed 2 years ago
I also tried adding these below the scale steps but it seemed too cluttered down there. Thoughts?
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.
I love this solution! Feel free to add it to this PR 💖
Latest screenshot with mentioned changes:
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