-
Notifications
You must be signed in to change notification settings - Fork 159
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Locale modal list view has incorrect color/tokens #3445
Comments
Hey @larahanlon2, was checking out the type token colors and I think Carbon updated text-03 since we speced locale selector $text-03 is "placeholder text" and is now gray 40 #A8A8A8 (Note: in the past we've heard that placeholder text is not held to the same standards for accessible contrast as regular content) So I was thinking text-05 might work better considering the original intent? |
Thanks so much @oliviaflory for confirming this! I agree with your suggestion, $text-05 should work just fine. I updated the issue above. |
### Related Ticket(s) #3445, #3817, #3819 ### Description Various accessibility and visual spec fixes to `LocaleModal` (React and web component) ### Changelog **Changed** - accessibility and visual spec fixes to `LocaleModal` for both React and web component variations <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: vanilla": Vanilla --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive, React (Expressive) --> <!-- *** "RTL": React (RTL) --> <!-- *** "feature flag": React (experimental) -->
…4035) ### Related Ticket(s) carbon-design-system#3445, carbon-design-system#3817, carbon-design-system#3819 ### Description Various accessibility and visual spec fixes to `LocaleModal` (React and web component) ### Changelog **Changed** - accessibility and visual spec fixes to `LocaleModal` for both React and web component variations <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: vanilla": Vanilla --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive, React (Expressive) --> <!-- *** "RTL": React (RTL) --> <!-- *** "feature flag": React (experimental) -->
Detailed description
Describe in detail the issue you're having.
During QA call, it was noticed that the
search input
and the language labels have incorrect color values.Is this a feature request (new component, new icon), a bug, or a general issue?
Design defect
Is this issue related to a specific component?
Locale modal
What did you expect to happen? What happened instead? What would you like to see changed?
1. As per design specs,
search input
should have a gray background. See belowStorybook currently has a white input field with a bottom gray rule.
Actual design specs:
2. The language label should use the type token
body-short-02, text-05
(16px, gray 60)Storybook currently shows a very faint gray color impacting accessibility:
What browser are you working in?
All
Steps to reproduce the issue
Open locale modal and click a geographic region card
The text was updated successfully, but these errors were encountered: