Colorize checkboxes depending on theming color

[juliusknorr]

partly fixes#378

• checkboxes match theme color
• checkmark-white.svg replaced to match checkmark.svg

• invert icon color like in Theming: invert foreground color on bright backgrounds #412
• fix unit tests

[mention-bot]

@juliushaertl, thanks for your PR! By analyzing the annotation information on this pull request, we identified @jancborchardt, @Kondou-ger and @jbtbnl to be potential reviewers

[nickvergessen]

#412 is merged, want to continue? 😀

[juliusknorr]

@nickvergessen Sure, I will have some time tomorrow to go on with this.

[jancborchardt]

We need to take into account what happens when someone uses white as the color, or very light colors in general which are not very easy to see on the white background. In that case I’d say we either use the default blue or a standard grey.

[juliusknorr]

Should be ready for review now.

• Checkbox icon will always stay white, because this looks way better than black, even on bright colors
• Color of the checkboxes will default to grey, if color gets to bright

@nextcloud/designers please check if the boundary for changing to grey is good or if it needs to be changed

I also changed the way the css is built, I hope the string concatenation is not that bad, as the response is cached anyway.

[nickvergessen]

Some comments:

• You can hardcode PHP_EOL to \n
• If your theme is gray (e.g. cdcdcd) disabled and active boxes look very similar, should we special case this?
• Radio buttons seem to not be covered? Maybe Checkboxes owncloud/core#23063 (comment) helps to cover everything
• Disabled+checked checkboxes have a colored border which looks a bit odd.

[juliusknorr]

Good point, I will add the other states and radio buttons tomorrow.

At the moment, I don't have a good solution for separating the disabled icon from the checked one, so that they don't look similar with a gray theme color, but I will think about that. Maybe @jancborchardt ?

[MorrisJobke]

At the moment, I don't have a good solution for separating the disabled icon from the checked one, so that they don't look similar with a gray theme color, but I will think about that. Maybe @jancborchardt ?

Then leave it for now as it is. We could iterate on this later.

[juliusknorr]

Ok, I will have time after the weekend to continue with this pr.

[juliusknorr]

Radio buttons are now also colorized. Please review again.

Normal look:

Look on bright colors:

I'm not sure if generating the SVG for the radio buttons is the best way, at the moment this is more a hacky approach, but my first plan to use mask-image CSS failed, as this is also unsupported in Firefox. @jancborchardt sorry for giving wrong information on that.

[juliusknorr]

Yes, we can change the svg-thing later, if someone has a idea to solve this in a more elegant way.

[MorrisJobke]

Nice! Tested and works (IE11, Edge, Firefox, Safari, Chrome) 👍

[jancborchardt]

Awesome, works really well! 👍 :)

[schiessle]

@juliushaertl do you want to prepare a backport to sable10? Would be nice to have it in Nextcloud 10 and we also need it for #620 to ship the new first run wizard.

[juliusknorr]

@schiessle Yes, but i'll wait until #622 is merged.

[MorrisJobke]

@schiessle Yes, but i'll wait until #622 is merged.

Was merged. @juliushaertl Could you create the backport?