Theme editor/builder in docs framework

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

Jira Issue: PF-2557

No source files, tests, or entry points are named. Start by reviewing the requirements and the linked issue #4748, then clarify the design and implementation scope with the team. Done means a documented drawer can meet the listed token editing, persistence, theme, export, save, and toggle requirements.