visual contrast for disabled state

[snapey]

I find the difference between a disabled field and enabled field to be too subtle. It might be the font we are using that has too little difference in font weight. I'm converting a legacy site where the disabled fields had a light grey background.

This is what I see with a date input

Any tips to directly affect by css, please let me know, or better a way to affect disabled appearance through the API

[bridgeyuwa]

@snapey
You can try this Global style override.

[data-flux-control]:disabled {
    @apply bg-zinc-100 text-zinc-600 cursor-not-allowed;
}

[snapey]

Does not seem to have any effect. Do I need to add this in a specific layer?

[snapey]

Seems to work on flux:input but not date or time picker. Is a different selector needed?

[bridgeyuwa]

Try

[data-flux-date-picker]:disabled {
    @apply bg-zinc-100 text-zinc-600 cursor-not-allowed;
}

and

[data-flux-time-picker]:disabled {
    @apply bg-zinc-100 text-zinc-600 cursor-not-allowed;
}

[ghabriel25]

@snapey You can targeting the specific attribute for date picker https://fluxui.dev/components/date-picker#flux:date-picker (see Attribute)