Skip to content
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

[BUG] In dark mode, auto-populated fields are tough to see #870

Closed
AMoo-Miki opened this issue Jul 1, 2023 · 0 comments · Fixed by #871
Closed

[BUG] In dark mode, auto-populated fields are tough to see #870

AMoo-Miki opened this issue Jul 1, 2023 · 0 comments · Fixed by #871
Labels
bug Something isn't working

Comments

@AMoo-Miki
Copy link
Collaborator

AMoo-Miki commented Jul 1, 2023

Describe the bug

Input fields that are auto-populated by the browser, like a saved usernames, are too dark to see in the dark mode for both default and Next themes. That is because the "shades" are reversed in dark mode where $ouiColorLightestShade is in fact nearly black and $ouiColorDarkestShade is nearly while. The code below wrongly uses $ouiColorLightShade, which is a dark color, on a dark background.

&:-webkit-autofill {
-webkit-text-fill-color: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightShade);
~ .ouiFormControlLayoutIcons {
color: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightShade);
}
/* OUI -> EUI Aliases */
~ .euiFormControlLayoutIcons {
color: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightShade);
}
/* End of Aliases */
}

$ouiColorDarkestShade or $ouiColorDarkShade are much more suitable for the dark themes input-fields.

Screenshots

Screenshot 2023-06-30 at 8 40 41 PM
@AMoo-Miki AMoo-Miki added bug Something isn't working untriaged labels Jul 1, 2023
AMoo-Miki added a commit to AMoo-Miki/oui that referenced this issue Jul 1, 2023
BSFishy pushed a commit that referenced this issue Jul 20, 2023
* Fix `autofill` text color in dark themes

Fixes #870

Signed-off-by: Miki <[email protected]>

* Use ouiTextColor in next theme

Signed-off-by: Josh Romero <[email protected]>

---------

Signed-off-by: Miki <[email protected]>
Signed-off-by: Josh Romero <[email protected]>
Co-authored-by: Josh Romero <[email protected]>
opensearch-trigger-bot bot pushed a commit that referenced this issue Jul 20, 2023
* Fix `autofill` text color in dark themes

Fixes #870

Signed-off-by: Miki <[email protected]>

* Use ouiTextColor in next theme

Signed-off-by: Josh Romero <[email protected]>

---------

Signed-off-by: Miki <[email protected]>
Signed-off-by: Josh Romero <[email protected]>
Co-authored-by: Josh Romero <[email protected]>
(cherry picked from commit f718f63)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
joshuarrrr pushed a commit that referenced this issue Jul 20, 2023
* Fix `autofill` text color in dark themes

Fixes #870

Signed-off-by: Miki <[email protected]>

* Use ouiTextColor in next theme

Signed-off-by: Josh Romero <[email protected]>

---------

Signed-off-by: Miki <[email protected]>
Signed-off-by: Josh Romero <[email protected]>
Co-authored-by: Josh Romero <[email protected]>
(cherry picked from commit f718f63)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants