[Enhancement] Card - Expose options to control lighten/darken background and loudness level

[jkaltoft]

When using e.g. a clickable Card with a dark background color (or image) the hover and active states are very subtle - almost invisible, because the interaction state effect is making the state layer darker. Maybe even more this is because the loudness level is very low. Darker colors need more loudness for the effect to be visible.

The exact same interaction state layer styles are applied to both the dark green and the white cards:

Screen.Recording.2022-08-30.at.19.54.41.mov

Internally we can invert it to make the state layer lighter, e.g. on attention level 2 buttons.

We should expose that option externally, so users of Kirby can apply it to a clickable Card.

In addition, we should consider to let consumers set the loudness level. Increasing the loudness level could also solve this problem. In some cases this might be more desirable than making the card lighter on hover.

Increasing the loudness levels for hover and active:

Screen.Recording.2022-08-30.at.20.02.47.mov

Lightening the background (loudness level not changed):

Screen.Recording.2022-08-30.at.20.07.39.mov

Both lightening the background and increasing the loudness level:

Screen.Recording.2022-08-30.at.20.11.07.mov