Missing Pressed State Color in Radix UI Solid Button Palette

[ArturGr]

I went through the Radix UI docs 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?

[baptisteArno]

Right, why wouldn't it be the color 11?