Is there a way to override colorContrast for a custom theme?

[acidjunk]

First of all: thanks for this amazing UI toolkit: I really love the components/features/accessibility/typescript types and the default light and dark themes. Great work; keep it coming! ❤️

During the setup of our theme I encountered a surprise as EUI contrast functions doesn't like our default white on light blue color scheme.

An example:

But rendered with EUI: the text would be black.

As we already use this color scheme for a couple of years we want to keep using it (for now).

After some grepping I found a couple of functions in _colors.scss that seem to want a contrast of at least 4.5 while our score on this point is 2.45 (not completly sure as it seems to have caputured the focus color:

@function makeHighContrastColor($foreground, $background: $euiPageBackgroundColor, $ratio: 4.5)

Which in turn uses: @function contrastRatio($background, $foreground) to determine contrast.

What would be the easiest, future proof way, to tell SASS that for our project it's ok to have white text on a light blue button? E.g. $euiColorPrimary: #4db2cf; => would have white text on it.

Should we override the whole function, do we provide the default, or are there other options that we could use, possibly with less impact on contrast in the rest of the theme?

[snide]

In general we don't provide a way to overwrite the color contrast mixins. The reasoning being that accessibility is one of the goals of the library and we want things to just work automatically for people. You are correct though that should you want, you can certainly overwrite the selector itself, or the sass mixins. If you poke around in the Amsterdam theme, you'll see how we do this for similar functions in the codebase.

We don't plan to add an escape hatch to the functions themselves, but overwriting the mixins in your import pipeline will definitely get you what you want.

[snide]

I'm going to close this issue out, because we don't plan on adding support to the source files, but feel free to ask another question in here if you need help.

[acidjunk]

Thanks for the quick reply.

I will try to document the process of our custom theme a bit in a blog post later this year. In one of the projects we use the outcome of the SASS pipeline: resulting in ultra fast dev server startup and I also have a nice way to switch between light and dark mode in a CRA app: but I also wouldn't mind adding stuff like this, via a PR to the docs: as it's a bit terse on how to build your own theme at the moment.

[snide]

@acidjunk That sounds great. Our docs are definitely written with the assumption that folks have a pretty deep understand of Sass. We've normally assumed people were looking to only switch the colors out.

[acidjunk]

We are trying to transition a couple of apps (with existing designs) to EUI. I'm keeping track of the work needed for that and will share it when it's done.

After some tests we concluded that it's not a good option to manually override the contrast functions. If it were as easy as putting the function in our own .scss file and importing it in a certain order it would definitely be a good solution, but since Elastic UI already uses the functions BEFORE we can import our override, the native version still gets used.

As we only need it on the primary and warning buttons (so far) we solved it, for now, by adding this to the bottom of our theme file:

// Force button text color
.euiButton--primary.euiButton--fill {
    color: #fff !important;
}
.euiButton--warning.euiButton--fill {
    color: #fff !important;
}

Thanks again!