Aria component Progressbar contrast#4216
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| <svg width={64} height={64} viewBox="0 0 32 32" fill="none" strokeWidth={strokeWidth}> | ||
| <circle cx={center} cy={center} r={r} stroke="var(--circle-color)" /> | ||
| <circle cx={center} cy={center} r={r - (strokeWidth / 2 - .5)} stroke="var(--circle-color)" strokeWidth={1} /> | ||
| <circle cx={center} cy={center} r={r + (strokeWidth / 2 - .5)} stroke="var(--circle-color)" strokeWidth={1} /> |
There was a problem hiding this comment.
If we do a 1px line I think you can just have one circle?
There was a problem hiding this comment.
a 1px line? you mean using the path element? or how do you get the empty area in between the two strokes? fill would do center of the circle and a path would still need two elements I think?
There was a problem hiding this comment.
ah I think I was confused because it looks like the stroke is 2px even though it says 1px. it's definitely a lot thicker than the progress bar...
There was a problem hiding this comment.
I don't understand why this works but if you set strokeWidth to 0.5 and adjust the radius by 0.25 in either direction it looks right. Why would a .5px svg stroke look like a 1px box shadow?
There was a problem hiding this comment.
o, you are right, it does look thicker than its prescribed 1px stroke... wonder if it is like that across all the browsers and all screen densities
There was a problem hiding this comment.
I tested across all three browsers i have, it looks like this gives it 1px. I've pushed the fix, thanks for catching that.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'identifier', name: 'Column' } |
reidbarber
left a comment
reidbarber
left a comment
There was a problem hiding this comment.
LGTM. Tested Chrome/FF/Safari dark and light modes
5 participants
Closes
Especially try in dark mode
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: