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
Jira Issue: PF-2557
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
Jira Issue: PF-2557