re-write with color-mix

[loreanvictor]

current implementation uses filters and brightness to create subtly different colors. for example, buttons have subtly brighter borders compared to their own color, and this is, atm, implemented with pseudo elements that have a brightness filter on them (source):

&::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: '';
  border: 1px solid var(--primary-color);
  border-radius: calc(min(var(--roundness), var(--button-height) / 2));
  filter: brightness(var(--primary-button-border-brightness));
  transition: background 0.1s, filter 0.15s;
}

most of these can be implemented with color-mix(). it has reached enough usage coverage that can be relied on for a relatively new project like nokss. this change would:

• reduce bundle size (potentially drastically),
• simplify the code
• increase performance (browsers sometimes have a hard time animating all the filters),
• increase predictability (e.g. --brightness variables make more sense)

this will of course affect the whole code base.