Revise styling of special buttons

[kra-mo]

Special buttons (Success, Warning, Error) currently derive from primary-style buttons. This is often way more inviting than these actions should be.

Instead, Warning and Error should be derivative of secondary actions, as that is most often what they are. Keep the destructive styling, but remove the screaming :)

The one question is Success. It is used less than the others, but when used, it seems to be the primary action. As such, I'm keen on keeping the existing styling for it, but maybe someone can provide more context on its usage.

I would attach mockups but attachments on GitHub once again don't work.

cc @nextcloud/designers

Colors

Success (if we decide to use them)

Light

• fg: #005416
• bg: #D5F2DC

Contrast: 7.67 (AAA)

Dark

• fg: #D5F2DC
• bg: #11321A

Contrast: 11.79 (AAA)

Warning

Light

• fg: #664700
• bg: #FFEEC5

Contrast: 7.46 (AAA)

Dark

• fg: #FFEEC5
• bg: #3D3114

Contrast: 11.18 (AAA)

Error

Light

• fg: #8A0000
• bg: #FFCCCC

Contrast: 7.1 (AAA)

Dark

• fg: #FFCCCC
• bg: #612525

Contrast: 8.17 (AAA)

[susnux]

An alternative could be outlined buttons which we also discussed in the past:

But thats pure design decision, I personally do not like our current they are too annoying but like both other :)
BTW we do not need new color variables, we already have those colors defined for e.g. NcNoteCard and similar.

[kra-mo]

I personally think that the non-outline one is more in our style. It's nice that no color variables are needed!

[susnux]

Error colors currently do not work:

Dark theme:

Contrast is not high enough for --color-error (#612525) on --color-main-background (#171717)
Failed asserting that 1.5363466419633505 is equal to 3.0 or is greater than 3.0.

Bright theme:

Contrast is not high enough for --color-error (#FFCCCC) on --color-main-background (#ffffff)
Failed asserting that 1.4226608117392872 is equal to 3.0 or is greater than 3.0.

---

Same also for the warning colors, Dark:

Contrast is not high enough for --color-warning (#3D3114) on --color-main-background (#171717)
Failed asserting that 1.4067774930321284 is equal to 3.0 or is greater than 3.0.

Bright:

Contrast is not high enough for --color-warning (#FFEEC5) on --color-main-background (#ffffff)
Failed asserting that 1.1482903347098206 is equal to 3.0 or is greater than 3.0.

---

And also the same for success colors:

Contrast is not high enough for --color-success (#11321A) on --color-main-background (#171717)
Failed asserting that 1.2762840119438763 is equal to 3.0 or is greater than 3.0.

Contrast is not high enough for --color-success (#D5F2DC) on --color-main-background (#ffffff)
Failed asserting that 1.1956587009141084 is equal to 3.0 or is greater than 3.0.

[kra-mo]

Hmm, color space weirdness probably. I'll try in sRGB to the best of my ability.

[kra-mo]

Ooooh, you mean like that.

That is not an issue. The background of secondary and tertiary (obviously :D) buttons already do not have enough contrast against the main background.

That's fine, as long as the foreground has. (Since that would also be colored now.)

[susnux]

I do not recall why it was added, but we had problems with WCAG with those combinations, thats why those tests are in our pipeline and now fail.

[kra-mo]

Currently, the foreground is not colored so the background is the only distinguishing feature. This would not be the case with the new colors.

It's the same logic as primary/secondary. With primary, you'd want contrast with the background, but for secondary, only the foreground matters.