question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs focus outline color for g90 and g100 is incorrect

See original GitHub issue

Detailed 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):

screen shot 2019-02-08 at 10 38 46 am screen shot 2019-02-08 at 10 38 37 am screen shot 2019-02-08 at 10 39 19 am

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:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
aagonzalescommented, Feb 13, 2019

At the moment we have $interactive-01 as Blue 60 in both dark themes. I think we’ll need to talk to Mike and Sadek about changing it to Blue 50

0reactions
jendownscommented, Jun 12, 2019

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)

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found