How do I best change the color of euiFormControlDisabledColor?

[jonasft]

Hello,

I'm trying to only change one specific case, text colors on disabled form controls. I see that the scss variable euiFormControlDisabledColor covers my need.

We do not use sass.

How do I best do this? I don't seem to be able to use modify on EuiProvider, as seen below.

Key information

• EUI version: @elastic/[email protected]
• React version: [email protected]
• Build tool: Vite

Minimum reproducible sandbox

<EuiProvider
            colorMode="light"
            modify={{
                colors: {
                    LIGHT: {
                        euiFormControlDisabledColor: '#69707D',
                    },
                },
            }}
        >
</EuiProvider>

[cee-chen]

Hey Jonas! Apologies for the disappointing/semi-frustrating answer, but our form controls are not yet converted from Sass to Emotion, so until that happens, you won't be able to use EuiProvider or EuiThemeProvider to override any disabled colors.

We're anticipating making more progress on Emotion conversions in the next month or so, but until then, your options are:

1. Adding Sass just for this variable override, and then compiling/importing your own .css file in your app
2. Adding custom CSS with !important to override EUI's form disabled borders/backgrounds/colors.

[jonasft]

Thank you for answering, @cee-chen !

Do you have a issue we can track to follow the progress of Emotion related to this?

[cee-chen]

#5685 or #3912!

[github-actions]

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.