adds an index above each scale step #40
Conversation
|
I also tried adding these below the scale steps but it seemed too cluttered down there. Thoughts? |
|
Thanks for the 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 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 💖 |
… spacer to appease grid system and improve spacing between buttongroup actions and the indices.
|
Latest screenshot with mentioned changes:
|
| <div | ||
| style={{ | ||
| display: 'flex' | ||
| <div style={{height: 8}}></div> |
There was a problem hiding this comment.
Open for feedback here. We need a bit more vertical breathing room in the grid layout, opted not to adjust the gap between everything, but instead just add some space at the top.
| backgroundColor: 'var(--color-text)', | ||
| borderRadius: 2 | ||
| }, | ||
| '&::after': { |
There was a problem hiding this comment.
don't really love the semantics here of using a :before and :after that are both top aligned, but I tried a few different approaches and this seems the most stable and responsive.
| @@ -39,7 +39,7 @@ export function getRange(type: Curve['type']) { | |||
| } | |||
|
|
|||
| export function getContrastScore(contrast: number) { | |||
| return contrast < 3 ? 'Fail' : contrast < 4.5 ? 'AA Large' : contrast < 7 ? 'AA' : 'AAA' | |||
| return contrast < 3 ? 'Fail' : contrast < 4.5 ? 'AA+' : contrast < 7 ? 'AA' : 'AAA' | |||
There was a problem hiding this comment.
@bryanberger is there a authority which regulates/determines this score? can you please share?
I tried searching on my own, only found this https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
I'd love to know more about accessibility on web.
There was a problem hiding this comment.
Here's a good reference: https://webaim.org/articles/contrast/
Adds a string above each scale step to indicate which index in the
scale.colorsarray 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: #32