Fix button hover colors

[commonpike]

They stopped working when going to css vars (PDS v5) , because eg orange-110 and orange-120 are the same color. Check in f.e. reserveer.prodemos.nl what the actual hover color is (like lighten(orange,80)) and add that to the palette.

[commonpike]

originally, buttons were slightly darker than the source color (eg, orange = #eb5b25 -> darken orange scale 1 = #e24d15) and the button hover would be even more dark (eg, orange = #eb5b25 -> darken orange scale 2 = #ca4513)

in pds5, buttons are slightly darker than the source color (eg, orange = #eb5b25 -> orange-110 = #d83b00 ) but the button hover has the same color, because 120 does not exist (eg, orange = #eb5b25 -> orange-120 = #d83b00)

instead, we could show button in the real color ( eg orange = #eb5b25 -> orange = #eb5b25 ) and the hover one tint darker (eg orange = #eb5b25 -> orange-110 = #d83b00)

@sdevogel , would you be ok with that ? so regular buttons have the same color as the 'primary' color in the palette; a green button is just green, instead of a bit darker ? The alternative is, we define new separate colors for orange-110 vs orange-120, and the other 7 colors.

see https://pds.prodemos.nl/design/colors.html for the colors, and https://pds.prodemos.nl/components/buttons.html for the missing hover.

in the image below,

• left is what the button used to be in pds v4, it. would hover slightly darker
• middle is what the button currently is in pds v5 (orange-110), but it does not hover
• right is what the button would become, which is the actual '100% orange', and it would hover to orange-110

[commonpike]

checked, this is the only *fill-120 actually used in pds; the only real color of that tint is creme-120

so that would be

.pds-c-button {
  background-color: var(--pds-color-fill);
  @include hover {
      background-color: var(--pds-color-fill-110);
  }
  &.accent {
    background-color: var(--pds-color-accfill);
    &:not(.disabled, :disabled) {
        @include hover {
            background-color: var(--pds-color-accfill-110);
        }
    }
  }
  &.transparent {
    background-color:transparent;
    color: var(--pds-color-fill-110);
    .pds-c-button-icon:not(svg) { 
        background-color: var(--pds-color-fill-110); 
    }
  }
}