Personnalisation

Chaque surcharge cible la classe .treatment-consultant (ou n'importe quel de ses ancêtres) avec des propriétés CSS personnalisées : aucune étape de personnalisation au build n'est nécessaire.

Gammes de couleurs

Le composant lit quatre gammes sémantiques à 11 niveaux (00 clair à 10 foncé) : --brand-*, --success-*, --warning-* et --error-*. Importez les valeurs par défaut depuis srcdev-hair-treatments/dist/tokens.css, ou fournissez les vôtres pour correspondre à votre marque :

:root {
  --brand-00: oklch(98% 0.0086 195);
  --brand-01: oklch(94% 0.0342 195);
  /* ...through */
  --brand-10: oklch(25% 0.1216 195);

  --success-00: oklch(98% 0.0086 157);
  /* ... */
  --warning-00: oklch(98% 0.0086 50);
  /* ... */
  --error-00: oklch(98% 0.0086 30);
  /* ... */
}

C'est le même principe que celui utilisé par le site vitrine de GuideMyHair lui-même pour personnaliser le widget : dans app/assets/styles/main.css, --brand-00 à --brand-10 sont aliasés vers la propre gamme sarcelle du système de design du site plutôt que des valeurs OKLCH écrites à la main, remplaçant entièrement la couleur de marque orange chaud par défaut du package :

:root {
  --brand-00: var(--teal-00);
  --brand-01: var(--teal-01);
  /* ...through */
  --brand-09: var(--teal-09);
  --brand-10: oklch(25% 0.0896 195);
}

Images

Les options de type de cheveux, couleur et nuance détaillée peuvent chacune afficher une vraie photo au lieu (ou en plus) d'un échantillon de couleur uni. Le package fournit un jeu complet d'images par défaut, une par type de cheveux, plus l'intégralité du catalogue shades / naturalShades par défaut, sous public/images/treatment-consultant/, copiées dans le répertoire public/ de votre propre application par le script setup:assets (voir Installation). Rien n'est rendu directement depuis node_modules : chaque chemin d'image utilisé par le composant à l'exécution est servi par votre application elle-même.

Chaque type d'option avec échantillons visuels porte le même jeu de champs optionnels :

Les deux sont optionnels et se replient élégamment lorsqu'ils sont omis : une option de type de cheveux sans image se rabat sur son motif ASCII pattern ; une option de couleur/nuance sans image se rabat sur un échantillon uni dans sa colour ; une nuance sans image2x affiche simplement image à toutes les densités (aucun risque d'image cassée par une URL devinée). Pour remplacer une image, remplacez le champ par un chemin vers votre propre ressource : même forme que les valeurs par défaut, aucune API particulière :

import { defaultConfig } from "srcdev-hair-treatments";

const config = {
  hairTypes: defaultConfig.hairTypes.map((t) =>
    t.id === "curly" ? { ...t, image: "/images/my-salon/curly.webp" } : t
  ),
};

Consultez Types d'options pour la forme complète de chaque option, et Mode catalogue de nuances détaillé pour savoir d'où viennent shades / naturalShades.

Polices

.treatment-consultant {
  --treatment-consultant-font-body: "My Font", sans-serif;
  --treatment-consultant-font-heading: "My Heading Font", serif;
}

Autres tokens

Boutons d'options et échantillons

Chaque carte sélectionnable, type de cheveux, couleur, application, coupe, traitement, et les cartes de résumé des Résultats, est un OptionButton, optionnellement associé à un OptionSwatch pour les étapes couleur/image. Les deux exposent un jeu complet de propriétés personnalisées, chacune avec une variante -hover correspondante pour l'état survol/focus visible, qui se replie sur son équivalent au repos sauf surcharge :

.treatment-consultant {
  /* Option card button */
  --option-gap: var(--_spacing-sm);
  --option-border-width: 1px;
  --option-border-color: var(--_border-active);
  --option-border-radius: var(--_border-radius);
  --option-outline-width: 2px;
  --option-outline-color: var(--_outline-default); /* transparent — invisible until hover */
  --option-outline-offset: 0;
  --option-background-color: var(--_surface-active);
  --option-padding-block: var(--_spacing-lg);
  --option-padding-inline: var(--_spacing-lg);
  --option-font-size: var(--_font-size-md);
  --option-font-weight: 400;

  /* Hover / focus-visible */
  --option-border-width-hover: 1px;
  --option-border-color-hover: var(--_border-active);
  --option-outline-width-hover: 2px;
  --option-outline-color-hover: var(--_outline-active);
  --option-outline-offset-hover: 0;

  /* Colour/image swatch (hair type, colour steps, results summary) */
  --option-swatch-size: 100px;
  --option-swatch-border-width: 1px;
  --option-swatch-border-color: var(--_border-active);
  --option-swatch-outline-width: 2px;
  --option-swatch-outline-color: var(--_outline-default); /* transparent — invisible until hover */
  --option-swatch-outline-offset: 0px;
  --option-swatch-img-scale: 1;

  /* Swatch hover / focus-visible, triggered by the parent option button */
  --option-swatch-border-width-hover: 1px;
  --option-swatch-outline-width-hover: 2px;
  --option-swatch-img-scale-hover: 1;
}

La forme de l'échantillon est contrôlée séparément, via behaviour.swatchVariant (circle / square / portrait / landscape), voir Configuration → comportement.

Les couleurs de contour par défaut sont pilotées par le thème plutôt que fixes : --_outline-default est transparent, donc l'anneau est invisible au repos et ne s'affiche qu'au survol/focus, où il bascule vers --_outline-active. Voir Thèmes ci-dessous pour savoir d'où vient le thème.

Thèmes

behaviour.theme change le traitement colorimétrique global du composant, en plus de toute personnalisation : définissez-le via la configuration configuration du comportement. Par défaut "default".

const config = { behaviour: { theme: "monochrome-light" } };

Les deux thèmes monochromes reposent sur une gamme de gris dédiée à chroma 0 (--mono-00…--mono-10, fournie dans srcdev-hair-treatments/dist/tokens.css) plutôt que --brand-*, ils restent donc entièrement désaturés même si vous avez personnalisé la gamme de marque de votre application.

Angles nets

Définissez behaviour.sharpCorners sur true pour rendre carrés tous les angles arrondis : cartes d'options, boutons, panneaux, le filigrane de licence. Les formes délibérément circulaires/en pilule (l'échantillon circulaire, le badge de coche, les points/barres de progression) conservent leur propre rayon et ne sont pas affectées. Par défaut false.

const config = { behaviour: { sharpCorners: true } };

Dimensionnement et la taille de police racine de votre page

Aucune réinitialisation html { font-size: 62.5% } n'est nécessaire pour utiliser ce composant. Il se dimensionne via une propriété personnalisée locale --_unit (par défaut 1px) plutôt que des rem bruts, il s'affiche donc aux tailles en pixels prévues quelle que soit la taille de police racine de votre application. Si vous préférez qu'il s'adapte à la taille de police racine de votre page ou au réglage de zoom texte du navigateur de l'utilisateur, activez-le explicitement :

.treatment-consultant { --_unit: 0.0625rem; }  /* 1px at a default 16px root */

SSR & ClientOnly

TreatmentConsultant est un composant Vue purement côté client, sans prise en charge du rendu serveur. Dans une application Nuxt (ou tout autre framework SSR), le rendre pendant le SSR provoquera une erreur 500 en production. Enveloppez-le dans <ClientOnly> :

<ClientOnly>
  <TreatmentConsultant />
</ClientOnly>

Il s'agit d'une exigence stricte, pas d'un contournement en attendant qu'un bug soit corrigé : enveloppez-le systématiquement lors d'une intégration sur une page rendue côté serveur.