Theme editor/builder in docs framework #4746
Description
This is a draft and has not be vetted by the team.
Problem statement
Designers and developers need a way to make token/theme adjustments on the fly and see the changes reflected immediately in the UI. It's currently difficult to build themes in figma and iterate without updating/committing changes to our published library. There is a plugin designers use, but it's tedious.
Goal
A drawer that pops up on any documentation framework site where you can customize global tokens and see the changes reflected immediately in the browser.
Requirements
The drawer should toggle open/closed on any docs framework site, and the customizations should be:
- Overrides of our global tokens.
- Per token (you can customize each token).
- Grouped by type (borders, background colors, text stuff, etc).
- Stored in local storage so they persist between browser sessions.
- Able to be cleared both globally (all customizations) and per customization.
- Able to be toggled on/off (disabled) both globally (all customizations) and per customization.
- Able to be exported (copy/paste) from the tool as CSS variable/token overrides, that can then be dropped in a PatternFly app's stylesheet to apply the customizations.
- Able to be applied to any existing theme (overrides for default, default/dark, HC, HC/dark).
- Able to be saved by a name ("my blue theme"), and multiple can be saved/retrieved ("my blue theme", "my red theme", etc)
Acceptance criteria
Reference requirements above
Level of effort
Minus the design and any requirements for how it looks, maybe 3 sprints involving a core and react developer.
Notes
This would be targeted for PF designers working on PF supported themes, and for designers/community members customizing non-patternfly, non-redhat themes/experiences. We would need to be clear that we're not giving the green-light for any UXD designer to go create a totally new theme for their product.