patternfly-org
patternfly-org copied to clipboard
Published
20 hours ago •
patternfly
patternfly
Theme builder POC
trafficstars
Parent issue - https://github.com/patternfly/patternfly-org/issues/4746
This spike POC should:
- Create a form that
- Lists each of our global tokens as the form group label
- Has a text input in the form group that lets you specify a new value for the global token
- If it's not too much of a pain, before the text input, add a select menu that lists all of our global tokens that can be selected as the value for the global token, too. If adding this, the text input's value should have priority over the select's value.
- Each entry in the form should be able to be cleared (to remove the customization)
- The form should live somewhere like a drawer that allows you to make changes, see the changes live, and scroll/click around with the form still open.
- Changes made would likely just be added/removed on the
<html>element as inline styles. eg,element.style.setProperty('--pf-t--global--some-token', '42px');andelement.style.removeProperty('--pf-t--global--some-token'). This is what applies the overrides, so it's something we'll need to test to make sure it works as expected. - Changes should persist at least for the current browser session.
Goals:
- Tests feasibility and uncovers any unknown unknowns.
- Tests the method of hot swapping token values/overrides to make sure it works as intended.
- Lets design weigh in early with any feedback, but specifically:
- Is this useful?
- Are there any conceptual changes to be considered and possibly added to the POC?
- Does this present the concept well enough to create a UI for this feature?
