Curious learner: What's the reason for the multiple input focus styles?

[jaredlt]

Asking this because I'm curious and slightly out of my depth with my css-fu. And because hopefully it may help future others and serve as documentation for the thinking behind some of the detail of Roux's boilerplate!

In _forms.css Roux styles the focus state of form inputs in 2 places (code snippets abbreviated below):

:is(input) {
  &:focus {
    outline: var(--border-width--base) solid var(--color--primary-base);
  }
}

:where(input:not([type])) {
  &:focus-visible {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: 2px;
  }
}

Some questions from ignorance:

• What is the intention with setting this in both the :is and :where blocks?
• Why &:focus vs &:focus-visible?
• I see the :where block with :&:focus-visible has --border-width--thick but I can't seem to see this in the app when I focus on an input
• If I want to update the default behaviour for input focus which should I use?

[enatario]

Hey thanks for flagging this! I think you found a flaw in the system here 😂. Let me go through your questions though.

What is the intention with setting this in both the :is and :where blocks?

Specificity! Using :where always has zero specificity, so styles in that block are easy to override in your own CSS without specificity fights. :is carries normal specificity and sets universal styles that apply broadly across all input types.

Why &:focus vs &:focus-visible?

:focus fires on all focus events; :focus-visible only fires for keyboard navigation. The intent was to show a more prominent outline when navigating by keyboard but I think we got into a specificity trap there.

I see the :where block with :&:focus-visible has --border-width--thick but I can't seem to see this in the app when I focus on an input

I think this is where some trip up is in the code. :is block's :focus rule has higher specificity than the :where block's :focus-visible, so the thick outline is never actually rendered for text inputs. Checkbox/radio inputs seem to work correctly because they explicitly cancel :focus with outline: none first.

If I want to update the default behaviour for input focus which should I use?

If you're doing it right now, I'd override it in the :is block. Buttttt let's have an action item here:

I think we can nix the fallback or at least group the focus-visible within the :is block