ITADN

Missing Pressed State Color in Radix UI Solid Button Palette

#48OpenArturGr 创建于 2024-10-03
A
ArturGrcommented
I went through the [Radix UI docs](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) on color scales, and while reading, I noticed a gap in the concept for button states. Specifically, the setup for states like 3 `normal`, 4 `hover`, and 5 `pressed` with brand colors 9 `normal` and 10 `hover` isn't fully supported—there's no `pressed` state color defined. I then checked out the components shown in the documentation, as they do have a distinct color for the `pressed` state that differs from `hover`. And guess what? They’re using filters. I find it a bit disappointing to see filters being applied in such a well-thought-out system. In fact, multiple filters are defined there. Active Button: ``` .rt-BaseButton:where(.rt-variant-solid):where(:active:not([data-state=open])) { background-color: var(--accent-10); filter: var(--base-button-solid-active-filter); } ``` Vars: ``` --base-button-classic-active-filter: brightness(1.08); --base-button-classic-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.14); --base-button-classic-high-contrast-active-filter: brightness(0.95) saturate(1.2); --base-button-solid-active-filter: brightness(1.08); --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18); --base-button-solid-high-contrast-active-filter: brightness(0.95) saturate(1.2); --switch-high-contrast-checked-active-before-filter: brightness(1.08); --switch-surface-checked-active-filter: brightness(1.08); ``` So, my question is: why are additional colors being generated through filters instead of creating a palette that accounts for this common use case? Or, is using filters the only viable solution here?
1 条评论