Comment ça marche ?

Primary est un outil de génération de fichiers CSS pour les projets Alsacréations, avec configuration et téléchargement d'un kit CSS complet (avec tokens, thématisation et layouts).

  1. Sources : deux possibilités.
    • Le fichier statique d'exemple theme.css contenant les variables CSS primitives (couleurs, espacements, typographie). S'en servir de référence et modifier/ajouter ses propres variables CSS.
    • Import d'un ou plusieurs fichiers .json exportés de Figma, ils seront automatiquement analysés pour en extraire les styles et les variables.
  2. Configuration : Personnalisation entière du thème.
    • Couleur primaire du thème (sera utilisée sous le nom "primary")
    • Thème de couleur (light, dark, ou les deux)
    • Typographie responsive ou fixe
    • Espacements responsive ou fixes
    • Police de caractères (système ou Poppins)
    • Techno statique ou WordPress (génère automatiquement le fichier theme.json)
  3. Génération : Visualisation de tous les fichiers CSS (et JSON) générés. Kit complet téléchargeable en un clic (fichier primary-css.zip) contenant :
    • Les fichiers CSS du projet (app.css, reset.css, layouts.css, natives.css, theme.css, theme-tokens.css, styles.css)
    • la police Poppins si sélectionnée
    • les recommandations spécifiques VSCode : .vscode/settings.json et .vscode/extensions.json
    • fichiers de configuration : .editorconfig, .gitignore, postcss.config.mjs, prettier.config.mjs, stylelint.config.mjs, vite.config.js
    Fichiers toujours à jour : reset.css, layouts.css et natives.css sont automatiquement récupérés depuis leurs sources officielles.

Sources

Theme par défaut

Pas de fichier de config sous la main ? Alors partez de zéro à partir des variables primitives communes à tous les projets.

theme.css

Ajoutez vos propres variables de couleurs au format OKLCH.
Exemple : --raspberry-400: oklch(0.728281 0.1971 352.001);

ou Import depuis un JSON Figma

Importez un ou plusieurs fichiers JSON d'export de tokens Figma. Le parseur est tolérant : il cherchera des paires clé/valeur et les transformera en variables CSS.