Theme editor/builder in docs framework

Ouverte
  • Quelque chose ne va pas ?
#4,746 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
20/100
Type d'issue
Fonctionnalité
Clarté
À clarifier
Activité
À l'abandon
Stack technique
css, figma, javascript, react
Domaine
design, frontend, web-dev

Piste de recherche

Aucun fichier source, test ou point d’entrée n’est nommé. Commencez par examiner les exigences et l’issue liée #4748, puis clarifiez avec l’équipe la portée de la conception et de l’implémentation. Le travail est considéré comme terminé lorsqu’un drawer documenté peut répondre aux exigences indiquées en matière de modification des tokens, de persistance, de thème, d’exportation, d’enregistrement et de basculement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
74
Forks
149
Merge moyen
1 j 9 h
PR mergées (30 j)
13

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de patternfly/patternfly-org

Toutes les issues de patternfly/patternfly-org

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.