Base styles: Allow overriding focus ring color in outset-ring__focus - #80587
Conversation
|
Size Change: +95 B (0%) Total Size: 7.75 MB 📦 View Changed
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
I suppose the advantage of this approach over optional Sass mixin argument is that the mixin can be included once and the outline color contextually controlled in e.g. class modifiers? |
|
Would overriding |
|
Should we extend this capability to the |
Right. I think this is going to match a consumer's mental model better, since a mixin argument feels very static. Changing the focus ring color is more like a state-based operation. .my-field:focus {
@include mixins.outset-ring__focus();
&:invalid {
--focus-color: red;
}
}versus .my-field:focus {
&:not(:invalid) {
@include mixins.outset-ring__focus();
}
&:invalid {
@include mixins.outset-ring__focus(red);
}
} |
We literally have a lint rule to prevent overriding tokens directly 😄 |
Yes, and probably by depending on the base-styles mixin. |
Follow up in #80635 |
2 participants
Extracted from #80417
What?
Updates
outset-ring__focusto expose the focus ring color through a--focus-colorcustom property, defaulting to--wpds-color-stroke-focus.Why?
Several legacy form controls need to align their focus rings with the design system, and some validated controls need to override the ring color. Moving the color into a custom property lets consumers override it without redefining the whole mixin.
For consumers, this is safer than overriding with
outline-color, and also avoids specificity issues.How?
--focus-colorinsideoutset-ring__focus, defaulting to the WPDS focus stroke token.var(--focus-color)for the outline color.Testing Instructions
No user-facing behavior changes unless a consumer sets
--focus-color.