[experiment] Adaptive Illustrations for themes and color modes

[clintandrewhall]

For any given illustration in Kibana, we maintain two discrete files: one for light mode, and one for dark mode. With the introduction of the Borealis theme, we would theoretically need to maintain four versions of each illustration.

By using CSS variables with appropriate fallbacks embedded in a single SVG, we can adapt the colors of the SVG to both the theme and color mode of Kibana. This will allow us to reduce the number of SVGs we need to maintain, and provide a more consistent UX between themes and color modes.

This is a proof-of-concept which uses a single SVG file and a JSON file of tokens and their color values. These are both read by a React component-- `Illustration`-- which compiles the color profile and adds the SVG to the DOM.

Demo and Docs

Storybook: Adaptive Illustrations
Documentation: Adaptive Illustrations writeup

To try the demo, you can view the Storybook built with this PR.

You can also check out this PR and run the Storybook locally:

gh pr checkout 206540
yarn kbn bootstrap
yarn storybook shared_ux

[elasticmachine]

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

• Click to trigger kibana-pull-request for this PR!
• Click to trigger kibana-deploy-project-from-pr for this PR!

[JasonStoltz]

CC @ryankeairns @elastic/eui-team

[JasonStoltz]

<Removed this comment, Clint posted a link to the doc below>

[clintandrewhall]

@JasonStoltz Yeah, I had to wait for CI to complete the Storybook build before I could post the link to the doc.

[JasonStoltz]

I like this. It solves some problems:

• Since source of truth for SVGs, they wouldn't be copy/pasted around the codebase. Much easier to find.
• They naturally adapt as we tweak the theme -- no need to recreate every SVG every time we touch a theme color.
• Not maintaining 4 variations of a single SVG

Questions or challenges I see:

• How hard will it actually be to go through each SVG and manually replace the hardcoded values with CSS variables? Are there some cases where it could be really tricky?
• What if a designer needs to tweak an SVG? Once it's converted to use CSS variables, I guess it can't really go back to the design tool for edits.

[clintandrewhall]

How hard will it actually be to go through each SVG and manually replace the hardcoded values with CSS variables? Are there some cases where it could be really tricky?

I did a quick RegEx find-and-replace with both of these SVGs. The toughest part was figuring out the color changes, rather than replacing fill= with style=.

What if a designer needs to tweak an SVG?

I think we can just tweak the source-- I assume there's an Adobe Illustrator file or similar somewhere-- but we could just as easily write a script to convert back and forth between fill and style.

We could always keep both formats: one as source SVG, one as Kibana web-adaptable SVG...?

[eokoneyo]

How hard will it actually be to go through each SVG and manually replace the hardcoded values with CSS variables? Are there some cases where it could be really tricky?

I did a quick RegEx find-and-replace with both of these SVGs. The toughest part was figuring out the color changes, rather than replacing fill= with style=.

What if a designer needs to tweak an SVG?

I think we can just tweak the source-- I assume there's an Adobe Illustrator file or similar somewhere-- but we could just as easily write a script to convert back and forth between fill and style.

We could always keep both formats: one as source SVG, one as Kibana web-adaptable SVG...?

• How hard will it actually be to go through each SVG and manually replace the hardcoded values with CSS variables? Are there some cases where it could be really tricky?
• What if a designer needs to tweak an SVG? Once it's converted to use CSS variables, I guess it can't really go back to the design tool for edits.

with regards to the point about manually replacing hardcoded values, ideally we could consider some util that transforms regular svgs to "kibana web adaptable svg". If we are able to make something of this sort, then the questions pertaining to making a regular SVG into our "adaptable SVG", alongside accommodating tweaks after it already exists as an adaptable SVG sort of goes away, really it's the heuristics for generating the customization points and having it be meaningful that would then be what we'd have to agree on.

[clintandrewhall]

/ci

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 5a7bdd1

Failed CI Steps

• Quick Checks
• Check Types

History

• 💔 Build #308830 failed 56260b5
• 💔 Build #266796 failed 803ec26

cc @eokoneyo