You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
Apply theme using variables. While less work, this is the least future-proof.
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.
Other...?
Related Issues
#69349: Lens Embeddable Styling #70943: Aligning Palette context types #71064: Theming support in Expressions
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:
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.Apply theme using variables. While less work, this is the least future-proof.
Implement override functions for
font
andpalette
, 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.Other...?
Related Issues
Relevant Teams
The text was updated successfully, but these errors were encountered: