fix(switch): add text color for switch toggle #2309
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The switch toggle itself already has a background color, which means that the IO label on top of it should be independent of the surrounding --color-label to ensure proper contrast when the toggle background and the label background differ significantly.
✅ Deploy Preview for marvelous-moxie-a6e2fe ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
amir-ba
added
bug
|
@amir-ba i guess can be merged |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Introduces a
--_on-backgroundvariable that's used to define the IO text color relative to the--_backgroundcolor of the toggle, and applies it to the base state.Note that this doesn't apply to the active state, beacuse that already uses an explicit text color for the IO text.
The Problem
Black background with white text; both the label and IO text have poor to no contrast.
This can be mitigated by setting
--color-labeltocurrentColorto honor the chosen text color. Maybe this should even be the default, considering the label is always going to be on top of the surrounding background? The contrast problem remains for the IO text, and is not adjustable by the user.The Solution
Since the switch toggle itself already has a background color, contrast becomes independent of the surrounding background. It's therefore inconsistent to honor
--color-labelin this context. The new variable ensures that the base states color actually related to the background it's drawn on.It currently defaults to
var(--telekom-color-text-and-icon-standard), which also behaves correctly when the control is used in dark mode.