(untitled)

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%…