vaadin
[lumo] Add dedicated css-property for focus-(ring) color
Describe your motivation
Currently the focus color is mostly based on the primary color - example:
https://github.com/vaadin/web-components/blob/900aed5781ac517d8f9a892974d55456c1481851/packages/button/theme/lumo/vaadin-button-styles.js#L96-L98
This is totally fine and matches the overall theme of the web applications. But sometimes, especially with high accessibility web applications, there is the requirement to have a dedicated color just for the focus indicator, to make sure it's always easily distinguishable from other colors.
See for example the upcoming WCAG 2.2 - 2.4.11 Focus Appearance where more requirements for the focus was added. To easily accomplish this in applications, a dedicated focus styling API would be really helpful.
Describe the solution you'd like
The usage of focus-based styling should be enhanced to add an optional css-property to enable easier styling:
:host([focus-ring]) {
box-shadow: 0 0 0 2px var(--lumo-focus-color, --lumo-primary-color-50pct));
}
Describe alternatives you've considered
Customizing and remembering every usage of the focus-ring in every components' CSS.
Additional context
No response
