Default focus is not set to token

[DusanMilko]

The default :focus outline color is not set to any token color so it uses default outline color.

A lot of components override the focus color. I think it would be good to set the default focus to some token because in the scenario where a custom theme is set the focus outline would update in all instances. Maybe in the reset file or??

Example:

:focus {
  outline: 2px solid $focus;
}

[tw15egan]

@DusanMilko I think the problem with targeting a global :focus would be that some components use a border, some use outline, and some use box-shadow, which could lead to some weird double focus indicators. I haven't tried this, just ideating, although I guess we should be resetting/removing outline on elements with custom border / boxshadow focus anyway...

Most focuses are set via https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-mixins.scss#L66-L111

[DusanMilko]

@tw15egan The browser by default adds an outline, I'm just proposing setting the color to match a token.

If there is a component that is using border or other outline then they will need to remove the default outline anyways.
Which I believe i've seen outlines getting set to none in instances of border or box-shadow.

Default setting in webkit:

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

[DusanMilko]

@tw15egan it would be good the standardize the focus treatment and apply globally. That way when the focus colors change during theming it changes all focus styles

[aledavila]

I think this we'd have to dive deeper into this if this is something worth changing as TJ noted we do have custom border/box-shadows. If we remove outline to those anyway wouldn't a global outline only affect those components that have outline anyway.

@tw15egan

[sstrubberg]

@DusanMilko Is this still an issue for you?