Inconsistent style of disabled and readonly states when a color variant is used

[paodb]

Describe the bug

When a color variant like (primary, success, etc.) is added to a toggle button that is disabled, the color variant is ignored. But when is added to a toggle button that is set to readonly, the color variant takes over the button and it doesn't look like readonly:

Expected behavior

Looking at Vaadin components, for example Button that has color variants, the disabled state current behavior is okay. If there any color variant applied, it is ignored. See https://vaadin.com/docs/v24/components/button#disabled. (Button component does not have a readonly state and I couldn't find one with readonly state and color variants to analize).

So, IMHO, disabled is consistent with the framework.

For readonly. we should explore options:

1. Color variants should be ignore as disabled state does.
2. The color should be still there but in a lighter shade or some sort of opacity in toggle button background.
3. Only border should display the color with some kind of opacity.

Minimal reproducible example

Run demo locally and add a color variant to each state:

    ToggleButton disabled = new ToggleButton().setRightLabel("Disabled");
    disabled.setId("disabled");
    disabled.setEnabled(false);
    disabled.addThemeVariants(ToggleButtonVariant.PRIMARY);

    ToggleButton readOnly = new ToggleButton(true).setRightLabel("Read-only");
    readOnly.setId("read-only");
    readOnly.setReadOnly(true);
    readOnly.addThemeVariants(ToggleButtonVariant.PRIMARY);

Observe states displayed as in the image share in the description of this issue.

Add-on Version

1.0.0-SNAPSHOT

Vaadin Version

24.9 / 25

Additional information

This was found during some testing of the Initial Implementation PR #1. As there're still doubts on the right approach to take, it was decided to address this in a separate issue.

[paodb]

I've been giving this a second thought (with some help) and here are my conclusions:

Justification about why disabled state it's okay as it is:

Disabled fields are functionally "dead." If we allow color variants (Primary, Success) to leak into the disabled state, we create visual noise. A grayed-out field tells the user's brain: "Skip this, it's not relevant to your current task."
Vaadin's default behavior of ignoring color variants for disabled components is correct because it enforces the "Gray = Inactive" universal web standard.

Proposed solution for readonly state: applying a faded or desaturated version of the variant

Having a faded color clearly distinguishes the field from an Active (bright) toggle. Unlike a disabled field, the "faded color" still communicates the nature of the data (e.g., "This was a Primary selection") without the false promise of being clickable. And it maintains a higher contrast than the "Disabled" state, ensuring the information remains readable and selectable, which is the primary technical requirement of the Read-only state.