Change color for primary element on hover

[JuliaKirschenheuter]

• Fixes: [BITV] Buttons accessibility improvements nextcloud-libraries/nextcloud-vue#4193

Summary

Fixes color for primary element on hover state nextcloud-libraries/nextcloud-vue#4193 (comment)

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)

[skjnldsv]

Please adjust generation script

server/apps/theming/lib/Themes/CommonThemeTrait.php

Line 67 in 0fca823

'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),

[JuliaKirschenheuter]

@skjnldsv could you please help me how should this mix looks like?

[skjnldsv]

@skjnldsv could you please help me how should this mix looks like?

I can't, i have no idea how your hex colour got chosen.

Usage is as follow

mix($hex, [$amount] ) : Allows you to mix another color to your color. Optionally you can decide to set the percent of second color or original color amount is ranged -100...0...100.

You have to pick the right amount to get as close as your #2c7cae as possible 🤷

[nimishavijay]

I can't, i have no idea how your hex colour got chosen.

It is the slightly darker and bluer version of the previous hover color, but there was no logic per se. I can try and find another close color, how does the mix work?

[skjnldsv]

I can't, i have no idea how your hex colour got chosen.

It is the slightly darker and bluer version of the previous hover color, but there was no logic per se. I can try and find another close color, how does the mix work?

Using 65 as a mix factor, we get #2c84b3. Which seems close to your #2c7cae @nimishavijay

---

You can try this here: https://play.phpsandbox.io/mexitek/phpcolors

<?php
use Mexitek\PHPColors\Color;

$color = new Color('#006AA3');
$background = new Color('#ffffff');

echo '#' . $color->mix($background, 65) . PHP_EOL;

[nimishavijay]

Super nice! Thank you @skjnldsv :)

Unfortunately the color code you suggested does not have enough contrast against the main background color. However, using 75 as the mix factor, we get #1f7cae which is also basically the same and is accessible 🎉 so @JuliaKirschenheuter we can use #1f7cae as the color here :)

[skjnldsv]

Unfortunately the color code you suggested does not have enough contrast against the main background color.

This is not a variable used for text btw, so contrast rules are a bit more flexible for big elements iirc :)
But all good for me with #1f7cae too

EDIT: just saw you actually used the color as background and compared with text, my bad! All good!! 🙇
EDIT2: wow, insane work on all the mockups/screenshots

[JuliaKirschenheuter]

@nimishavijay @skjnldsv

After several tryings just saw you discussion.
Thanks a lot for your cooperation, i've taken a mix factor 75 and #1f7cae as color ;))

[nimishavijay]

🚀 :)