patternfly / patternfly/patternfly-org

Theme builder POC

Open
#4,748 2 comments 0 reactions 1 assignee View on GitHub

@mcoker is already working on this.

Since Oct 8, 2025.

PF Team Spike
Dominant language
JavaScript
Stars
74
Forks
147
Avg merge
4d 11h
Merged PRs (30d)
2

Description

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'); and element.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?


Jira Issue: PF-2564

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.