Skip to content

/ fast

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

Jump to bottom

Hook up focus colors to existing controls #2438

Open
bheston opened this issue Nov 15, 2019 · 3 comments
Open

Hook up focus colors to existing controls #2438

bheston opened this issue Nov 15, 2019 · 3 comments
Labels
feature request good first issue
Projects
Components

Comments

@bheston
Copy link
Contributor

@bheston bheston commented Nov 15, 2019

What feature are you requesting?
We recently added focus to the color recipes. These values are not yet hooked up in controls.

What would be the benefit of adding this feature?
Adding to the design system to allow more flexibility in component interaction states.
@bheston bheston self-assigned this Nov 15, 2019
@bheston bheston added this to Backlog in Components via automation Nov 15, 2019
@chrisdholt
Copy link
Member

@chrisdholt chrisdholt commented Nov 15, 2019 •
edited

@bheston can you provide an example of how the recipe could be applied to something fairly simple? Just as an example. Without context here it would likely require a collaborator to do this, but if it's simple enough and we have the details it may be something a first time contributor could take on.
@bheston
Copy link
Contributor Author

@bheston bheston commented Nov 15, 2019

A simple example is something like this search field

The rest, hover, active, and focus states may all be different.

The delta has already been added to the design system and color recipes, so the task here is to go into each style sheet and apply the focus color to the focus state. It's fairly mechanical and shouldn't require design. That being said, the current theory assumes that the focus color is in the same palette as the other state colors, which is true for the current way recipes are applied.

I'll tag it as a good first issue.
@bheston bheston removed their assignment Nov 18, 2019
@bheston
Copy link
Contributor Author

@bheston bheston commented Nov 18, 2019

In the default design system configuration, the focus color should not be different than the resting state. For instance, tab-focusing a button should not change the color. This update will also validate the new color recipes in a real-world scenario. For instance, use a delta that's 10-20 larger than the hover or active state, which should result in a noticeable state change.
Note that foreground colors will need to be adjusted based on the focus background as well.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request good first issue
Projects
Components
  
Backlog
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@chrisdholt @bheston
You can’t perform that action at this time.

Follow Lee on X/Twitter - Father, Husband, Serial builder creating AI, crypto, games & web tools. We are friends :) AI Will Come To Life!

Check out: eBank.nz (Art Generator) | Netwrck.com (AI Tools) | Text-Generator.io (AI API) | BitBank.nz (Crypto AI) | ReadingTime (Kids Reading) | RewordGame | BigMultiplayerChess | WebFiddle | How.nz | Helix AI Assistant