Refactor: Use outline instead of ring

[thethunderturner]

Description

Closes #13733

Visual changes

none

Functional changes

• [x] Code style has been fixed by running the composer cs command.
• [x] Changes have been tested to not break existing functionality.
• [x] Documentation is up-to-date.

[thethunderturner]

Current issue: There are blue borders when focusing on an input. In packages/support/resources/css/components/input/wrapper.css I found a fix by adding

:focus {
    box-shadow: none !important;
    outline: none !important;
}

which in TW would be written as

:focus {
    @apply shadow-none! outline-none!;
}

However, the TW version doesnt work, and still shows the blue borders. Here is an overview of the generated css Using TW:

.fi-input-wrp :focus {
    --tw-shadow: 0 0 #0000;
    --tw-outline-style: none;
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;
    outline-style: none!important
}

Using native css

.fi-input-wrp :focus {
    box-shadow: none!important;
    outline: none!important
}

[zepfietje]

Part of the migration from ring to outline should be using a consistent outline color. Currently the primary color is used, which is an option, or we default to the browser's accent color as per the default behavior.

This improves current cases of the danger color being used for inputs with validation errors, which in hindsight is suboptimal.

[thethunderturner]

Part of the migration from ring to outline should be using a consistent outline color. Currently the primary color is used, which is an option, or we default to the browser's accent color as per the default behavior.

This improves current cases of the danger color being used for inputs with validation errors, which in hindsight is suboptimal.

Which one do we want to use? primary or browsers default? I think primary should work better because browsers could potentially have different default colors. Let me know if I misunderstood something!

[danharrin]

I am going to close this as I think there are considerable further steps that need to be taken in order for it to fulfil the intent of the original issue