Fix(CSS): outline doesn't handle some keyword values

[lesha1201]

Now outline works well with CSS-wide keywords and all outline-style keywords.

Fixes #296

List of CSS-wide keywords:

• https://drafts.csswg.org/css-values-4/#css-wide-keywords

outline spec:

• https://drafts.csswg.org/css-ui/#outline-props

outline-style spec:

• https://drafts.csswg.org/css-ui/#propdef-outline-style

[vercel]

@lesha1201 is attempting to deploy a commit to the Aoyue Team on Vercel.

A member of the Team first needs to authorize it.

[lesha1201]

These values are applicable for all CSS properties but decided to keep it here while it's used only in this place.

[1aron]

@lesha1201 You move fast, and I was just about to fix that issue 😂

[lesha1201]

@lesha1201 You move fast, and I was just about to fix that issue 😂

@1aron Sorry, didn't notice an assignee. Feel free to edit or close this PR as you want.

[1aron]

@lesha1201 No, you did a good job, and I'll merge it as soon as possible and make some tweaks 💯

[1aron]

• 💖 Presets solid for border: and outline: #267

@lesha1201 The final solution may be to preset the outline and border styles in @master/normal.css and remove the auto-fill behavior for related rules.

*,
::before,
::after {
    border: 0 solid;
    outline: 0 solid;
}

If you want to keep accessibility:

:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

Applying that approach will result in less CSS generated.

[lesha1201]

@1aron It's ok to have it for border but I'm really unsure about outline. Disabling it by default migth decrease accessibility significantly because many devs won't be paying attention to it and just will keep the default behavior without realizing that accessibility in this case is worse.

By the way, modern browsers uses :focus-visible by default. They also use a special double color that works with any background color (dark/light).

[1aron]

@lesha1201 Yep, the default outline styles for most elements:

If we could make sure that the above is the default behavior of all elements, then just reset focus outline again in @master/normal.css:

*,
::before,
::after {
    border: 0 solid;
    outline: 0 solid;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}