Theme editor/builder in docs framework

[mcoker]

trafficstars

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.

Issues

• [ ] https://github.com/patternfly/patternfly-org/issues/4748