Dedicated "Active" state for solid backgrounds in palettes

[jdanamato]

Feature request

Overview

Radix UI lacks a dedicated “Active” step for solid backgrounds. Including a new color step that reliably indicates an active or pressed state (instead of a CSS filter) would unify the palette’s interactive states and make adoption easier.

Examples in other libraries

• Tailwind CSS allows users to create their own active states by enabling non-semantic palettes. For instance, users can define an active state as “bg-blue-500 active:bg-blue-600.” On the other hand, Radix’s palettes are primarily semantic, which means step 11 in their approach is not a logical progression.
• Chakra UI: Similarly provides an “active” variant for buttons that changes the background to a solid color step.

Who does this impact? Who is this for?

• Designers: Offers a fully harmonized color system that makes state changes clearer.
• Developers: Reduces guesswork or manual additions to the theme when implementing active states.
• End-users: Benefits from a more intuitive and consistent user experience.

Additional context

It might seem minor, but like a snack drawer without chocolate, a color palette without a dedicated active state just feels incomplete. Adding this step keeps interactive elements on brand and visually differentiated from both base and hover states.