Alex Carpenter

Tint buttons based on their foreground color for :hover and :active states.

button {
  --bg: transparent;
  --fg: currentColor;
  --am: 0%;
  background-color: color-mix(in srgb, var(--bg), var(--fg) var(--am));
  color: var(--fg);

  &:hover {
    --am: 10%;
  }
    
  &:active {
    --am: 20%;
  }
}

.blue {
  --bg: oklch(48.8% 0.243 264.376);
  --fg: oklch(1 0 0);
}

.neutral {
  --bg: oklch(92.9% 0.013 255.508);
  --fg: oklch(27.8% 0.033 256.848);
}