Générateur de thème bootstrap5

[Gaetanbrl]

Description

Je souhaite pouvoir disposer d'une interface dans mviewerstudio,
Afin de configurer les variables du thème mviewer 4 (bootstrap5) et de récupérer le CSS généré

Contexte

Cette fonctionnalité sera compatible avec mviewer 4 et bootstrap 5 uniquement car mviewer 3.x n'aura pas les mêmes variables et dispose d'une autre mécanique de gestion / génération des thèmes.

Le fonctionnement est proche du générateur de template mustache du studio.

Fonctionnement

L'utilisateur dispose de 2 modes accompagné ou avancé.

Mode accompagné :

L'utilisateur saisie des valeurs dans des inputs (1 input par variable CSS disponible du thème) qui pourra être un colorpicker ou autre selon la variable à renseigner.

Mode avancé :

L'utilisateur dispose d'un textarea pour saisir librement le contenu de son CSS (comme c'est le cas pour les template mustache).

### Variables disponibles

couleur primaire,
couleur secondaire,
font,
border-radius : carré/ defaut,
largeur du right-panel,
hauteur du bottom-panel

Exemple de contenu

Voici un exemple de contenu qui sera au final intégré dans un CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --mvcustom-color-primary: #5299a8;
  --mvcustom-font: 'Poppins', sans-serif;
  /* Indiquer une couleur secondaire pour un thème bicolore */
  --mvcustom-color-secondary: #8cbd72;
  /* Variable permettant d'avoir les composants d'interface avec des bords carrés */
  --mvcustom-border-radius:0;
  /* Taille des panels d'interrogation (exprimée en px ou %) */  
  --mvcustom-rightpanel-size: 50%;
  --mvcustom-bottompanel-size:200px;
}

### Backend

Dans le backend, le fichier.css sera généré par l'application.
Le CSS sera alors disponible via une URL qui pourra être directement intégré dans le champ style="" du xml.

L'avantage est que le fichier sera également disponible si d'autres mviewer souhaite reprendre ce fichier (via l'URL) généré avec le mviewerstudio.