Repository navigation
Revise styling of special buttons #53362
Description
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)
Metadata
Metadata
Assignees
Type
Projects
- Status
- Status
Activity
susnux commentedon Jun 6, 2025
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 commentedon Jun 10, 2025
I personally think that the non-outline one is more in our style. It's nice that no color variables are needed!
susnux commentedon Aug 15, 2025
Error colors currently do not work:
Dark theme:
Bright theme:
Same also for the warning colors, Dark:
Bright:
And also the same for success colors:
kra-mo commentedon Aug 15, 2025
Hmm, color space weirdness probably. I'll try in sRGB to the best of my ability.
kra-mo commentedon Aug 15, 2025
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 commentedon Aug 15, 2025
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 commentedon Aug 15, 2025
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.
kra-mo commentedon Aug 15, 2025
So these tests could be changed to check the ratio of the bg:fg of the buttons themselves instead if needed.