Tabs focus outline color for g90 and g100 is incorrect
See original GitHub issueDetailed description
We are in the process of verifying Carbon X components against our dark UI (using g100 theme, specifically) and with the Tabs
component our designers flagged some colors that needed attention.
Here are some screenshots with the Tabs
in a g100 theme (though g90 would be similar):
And here’s a table showing which colors were flagged (note: these are for g100 but g90 would be similar):
Desc | Current color in g100 | Expected color in g100 |
---|---|---|
Highlighted blue line for active | blue60 ($interactive01 ) |
blue50 |
Focus outline | blue60 ($interactive01 ) |
blue50 |
Non active underline | blue60 ($interactive01 ) |
blue50 |
Tab item text | gray30 ($text02 ) |
gray10 |
So do these expected colors make sense to you all? (cc @IBM/carbon-designers)? And if so, what should the tokens be changed to to look better for g100 (and likely g90) themes? Looking at the @carbon/themes
preview, nothing immediately stands out to me https://carbon-elements.netlify.com/themes/examples/preview/ Thank you!
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:8 (7 by maintainers)
Top Results From Across the Web
outline-color - CSS: Cascading Style Sheets - MDN Web Docs
The outline-color CSS property sets the color of an element's outline. ... if they don't, this keyword is considered invalid.
Read more >Color tokens - Carbon Design System
$border-subtle-00. Subtle borders paired with $background. Gray 20; —; #e0e0e0 ; $border-subtle-01. Subtle borders paired with $layer-01. Gray 20; —; #e0e0e0 ; $ ......
Read more >How to Meet WCAG (Quick Reference) - W3C
How to Meet WCAG (Quick Reference) · 1 Use of Color; 1.4. · 2 Audio Control; 1.4. · 3 Contrast (Minimum); 1.4. ·...
Read more >outline-color | CSS-Tricks
Accessibility. An outline is typically used to indicate focus on elements, which can be useful for non-mouse interactions for accessibility ...
Read more >Bootstrap example page not showing focus outline on tabs ...
I ran into this same issue too. Odd how it only happens on certain browsers. I didn't have this issue with Chrome or...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
At the moment we have
$interactive-01
asBlue 60
in both dark themes. I think we’ll need to talk to Mike and Sadek about changing it toBlue 50
Reopening because it looks like in
v10.3.1
the focus color does not match what is posted in this screenshot: https://github.com/carbon-design-system/carbon/issues/1757#issuecomment-468451264 (focus color should be white, but appears as blue60)