Base Styles: Remove accent color parameter from input-control - #80595
Conversation
|
Size Change: -208 B (0%) Total Size: 7.75 MB 📦 View Changed
|
|
Flaky tests detected in d754450. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30101815214
|
|
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. |
| @mixin input-style__focus() { | ||
| border-color: var(--wp-admin-theme-color); | ||
| // Expand the default border focus style by .5px to be a total of 1.5px. | ||
| box-shadow: 0 0 0 0.5px $accent-color; | ||
| box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); |
There was a problem hiding this comment.
In the next step, we'll be switching this to the new outset-ring__focus styles.
aduth
left a comment
There was a problem hiding this comment.
Question about if this should be using a custom CSS property instead of configuring through --wp-admin-theme-color but otherwise LGTM
| input:invalid[data-validity-visible] | ||
| ):not(:has([aria-expanded="true"])) { | ||
| --wp-components-color-accent: #{$alert-red}; | ||
| --wp-admin-theme-color: #{$alert-red}; |
There was a problem hiding this comment.
Conceptually, this doesn't feel that much different from the anti-pattern we discussed in #80587 (comment) ? It feels like component color accent was somewhere in the middle between "global color scheme" and component-level configuration, where I'd wonder if we would prefer to lean more on the latter as we did with --focus-color in #80587 and related pull requests.
There was a problem hiding this comment.
Agree 100%. I'm currently working through some steps to get this to an acceptable place, basically triggered by #80417. Every step of the work seems to surface yet another thing that needs to be resolved first, hence these incremental changes. The end goal is to get everything onto the canonical focus ring mixin and use --focus-color.
What?
Removes the accent color parameter from the
input-controlandinput-style__focusmixins, and defaults focus styling to--wp-admin-theme-color.Why?
The accent color argument duplicated what callers were already passing through. Defaulting to the admin theme color internally removes the need to pass it manually at every call site.
For context, this accent color parameter was originally added to avoid putting the experimental
--wp-components-color-*tokens into base-styles. Now that we're retiring those experimental tokens, the parameter is no longer needed.How?
input-style__focusto use--wp-admin-theme-colorfor the focused border and expanded box shadow.$accent-colorparameter frominput-controland call the updated focus mixin internally.Testing Instructions
Storybook
npm run storybook:dev.Also use the global style injector to check with the WordPress stylesheets loaded. And the validated counterparts should also continue to work as expected.
Block editor
With the Block fields experiment is enabled, insert a Pullquote block, open the Content tab in the block inspector, focus the Content or Citation field, and confirm the focus styling matches.