fix(theming): change color button contrast

[ShGKme]

• Resolves: [BITV] 9.1.4.3/7.1 - The label of the "Change color" button in the "Background" section does not meet the contrast requirements for text - it is 4,16:1. (1) #41849

Summary

Use NcButton as a trigger for changing color to make the text always contrast.

Note: there is no pair of text colors that is contrast enough on any background. E.g. in some gray of blue backgrounds, both white and black text is not contrast enough. So we desided to use fixed background for the text.

TODO

• User Settings: Use NcButton on the color preview instead of plain text to ensure it is well-visible
• Admin Settings: Separate NcButton and the color preview
• Adjust tests and use more semantic selectors

Screenshots

🏚️ Before	🏡 After

Other visual changes

Popover is now shown on the button

There is no interactivity on the colored rectangle. Making it interactive would need to get rid of using NcButton and copy its styles.

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[ShGKme]

/backport to stable28

[jancborchardt]

Nice and simple solution, looks good design-wise.

[ShGKme]

Seems that this change is actually required for a11y only if there is still Nextcloud Blue in the palette. Which we don't use anywhere anymore as a primary color...

@nextcloud/designers do you think this is fine to merge regardless of a11y requirements, or better to avoid it, if we decide to remove the problematic color from the palette?

[szaimen]

I think it is fine to merge it. This should probably also solve cases with custom colors...

[ShGKme]

Rebased onto main, fixed Cypress e2e tests.

[ShGKme]

I forgot that we have the same button with the same issue also on Admin settings.

I separated the button and color view and added icon to be inline with other buttons here.
Re-requesting designers to re-approve. Sorry for the double work 👉👈

[szaimen]

LGTM from design perspective :)

[susnux]

@ShGKme can you resolve the conflicts?

[ShGKme]

@ShGKme can you resolve the conflicts?

There is a Cypress issue that I haven't resolved yet.

• Probably requires chore: bump server version to 29.0.0.4 to trigger migrations #42900

[JuliaKirschenheuter]

/backport to stable28