Theming Expression in Canvas

[clintandrewhall]

In Canvas in the near-term, we're going to implement Theming across Canvas Elements, Pages and Workpads.

Theming MVP

The MVP for theming in Canvas is the ability to set font (including family, size, color, etc) and color palette. Ideally we would define H1-6 sizes, as well. Our solution should be future-proof, and usable by other teams in follow-on projects, (in order to enable embeddable theming in Canvas and elsewhere).

Initial Foray

In the Proof-of-concept, Theming was accomplished by having the Expressions plugin provide a list of function values that we defaulted, (e.g. color palette and font) and replacing those with values from the Redux store. While only a couple of lines of code for the Expressions plugin, @ppisljar pointed out-- correctly-- that this was out-of-step with the philosophical design of Functions. That is, Functions should be clean input/output structures.

Alignment

Initially, Lens was going to tackle the theme expression. They have interest in categorical, global coloring in the near-term... but that work has been postponed. Canvas as the opportunity to implement this in the meantime and contribute that work upward.

The issues listed above outline possible approaches-- I won't repeat them here. But for Canvas specifically, there are a few options:

1. Create a theme expression function that can provide this information to each expression. The Canvas UI would apply changes to the theme to any expression element on the workpad that has not opted out of using the Global theme. There would be a new Styling UI involved, where customizations would occur only after the user decided to customize the element's theme.

2. Apply theme using variables. While less work, this is the least future-proof.

3. Implement override functions for font and palette, register those with the Expressions plugin, and let them talk to the store. This is the most expedient, but the most hacky version. But it would allow us to move to a theme expression wholesale once other teams we ready to work on it.

4. Other...?

Related Issues

#69349: Lens Embeddable Styling
#70943: Aligning Palette context types
#71064: Theming support in Expressions

Relevant Teams

Lens - @flash1293
Expressions - @ppisljar and @streamich
Maps -
Charts -

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[ThomThomson]

Closing this for the time being. If Canvas theming becomes a priority for the Presentation team in the future we may reopen.