Theme editor/builder in docs framework

Offen
  • Stimmt etwas nicht?
#4,746 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
20/100
Issue-Typ
Feature
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
css, figma, javascript, react
Bereich
design, frontend, web-dev

Rechercherichtung

Es werden keine Quelldateien, Tests oder Einstiegspunkte genannt. Beginne damit, die Anforderungen und den verknüpften Issue #4748 zu prüfen, und kläre anschließend den Design- und Implementierungsumfang mit dem Team. Als erledigt gilt die Aufgabe, wenn ein dokumentierter Drawer die aufgeführten Anforderungen an Token-Bearbeitung, Persistenz, Theme, Export, Speichern und Umschalten erfüllen kann.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

PF Team

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

Vorherrschende Sprache
JavaScript
Sterne
74
Forks
149
Ø Merge
1 T. 9 Std.
Gemergte PRs (30 T.)
13

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus patternfly/patternfly-org

Alle Issues in patternfly/patternfly-org

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.