Gestaltung

Jede Überschreibung zielt mit CSS Custom Properties auf die Klasse .treatment-consultant (oder ein beliebiges übergeordnetes Element). Ein Theming-Schritt beim Build ist nicht nötig.

Farbverläufe

Die Komponente liest semantische Farbverläufe mit 11 Stufen (00 hell bis 10 dunkel): --brand-*, --success-*, --warning-* und --error-*, dazu einen optionalen --accent-*-Verlauf für den ausgewählten Zustand, der auf --brand-* zurückfällt, wenn Sie ihn nicht definieren. Importieren Sie die Standardwerte aus srcdev-hair-treatments/dist/tokens.css oder geben Sie eigene an, passend zu Ihrer Marke:

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

  /* Optional: the selected state. Falls back to --brand-* */
  --accent-00: oklch(98% 0.0072 85);
  /* ... */
  --accent-10: oklch(25% 0.1024 85);

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

Nach demselben Prinzip gestaltet auch die Marketing-Website von GuideMyHair das Widget: In app/assets/styles/main.css sind --brand-00 bis --brand-10 als Aliase auf den eigenen petrolfarbenen Verlauf des Designsystems der Website gesetzt statt auf handgeschriebene OKLCH-Werte und ersetzen so die standardmäßige warm-orange Markenfarbe des Pakets vollständig:

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

Bilder

Optionen für Haartyp, Farbe und detaillierte Farbtöne können jeweils ein echtes Foto statt (oder neben) einem einfarbigen Farbfeld zeigen. Das Paket liefert einen vollständigen Satz Standardbilder mit, eines pro Haartyp sowie den gesamten Standardkatalog shades / naturalShades, unter public/images/treatment-consultant/. Das Skript setup:assets kopiert sie in das public/-Verzeichnis Ihrer eigenen App (siehe Installation). Nichts wird direkt aus node_modules gerendert: Jeder Bildpfad, den die Komponente zur Laufzeit verwendet, wird von Ihrer App selbst ausgeliefert.

Jeder Optionstyp mit visuellen Farbfeldern hat dieselben optionalen Felder:

Beide sind optional und haben einen sauberen Fallback, wenn sie fehlen: Eine Haartyp-Option ohne image zeigt stattdessen ihren ASCII-Text pattern, eine Farb- oder Farbton-Option ohne image ein einfarbiges Farbfeld in ihrer colour, und ein Farbton ohne image2x rendert einfach image in jeder Pixeldichte (kein Risiko eines defekten Bildes durch eine geratene URL). Um ein Bild zu überschreiben, ersetzen Sie das Feld durch einen Pfad zu Ihrer eigenen Datei, in derselben Struktur wie die Standardwerte, ohne spezielle API:

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

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

Die vollständige Struktur jeder Option finden Sie unter Optionstypen, und woher shades / naturalShades stammen, unter Modus „Detaillierter Farbtonkatalog“.

Schriften

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

Weitere Tokens

Überschreibungen und die Anprobe-Ansicht

Die virtuelle Anprobe öffnet sich in einem eigenen Dialog am Ende von <body>, außerhalb der Position des Widgets auf Ihrer Seite. Dieser Dialog trägt die Klasse .treatment-consultant und alle Klassen, die Sie dem Widget übergeben. Überschreibungen auf .treatment-consultant oder :root erreichen ihn also, Tokens auf einem umschließenden Element um das Widget jedoch nicht. Aus demselben Grund sollten Sie Überschreibungen in einem normalen Style-Block statt in <style scoped> schreiben: Scoped Styles erreichen den Assistenten, aber nicht die Anprobe. Muss ein Block scoped sein, umschließen Sie den Selektor, zum Beispiel :global(.treatment-consultant.my-theme).

Options-Buttons & Farbfelder

Jede auswählbare Karte (Haartyp, Farbe, Anwendung, Schnitt, Behandlung und die Zusammenfassungskarten im Ergebnis) ist ein OptionButton, bei Farb- und Bildschritten optional kombiniert mit einem OptionSwatch. Beide bieten einen vollständigen Satz Custom Properties, jeweils mit einer passenden -hover-Variante für den Hover- bzw. Focus-visible-Zustand, die auf ihr Gegenstück im Ruhezustand zurückfällt, sofern sie nicht überschrieben wird:

.treatment-consultant {
  /* Option card button */
  --option-gap: var(--_spacing-sm);
  --option-border-width: 1px;
  --option-border-color: var(--_border);
  --option-border-radius: var(--_border-radius);
  --option-outline-width: 2px;
  --option-outline-color: var(--_option-ring); /* transparent — invisible until hover */
  --option-outline-offset: 0;
  --option-background-color: var(--_surface);
  --option-padding-block: var(--_spacing-lg);
  --option-padding-inline: var(--_spacing-lg);
  --option-font-size: var(--_font-size-sm); /* drops to --_font-size-xs below a 768px component width unless set */
  --option-font-weight: 400;

  /* Label overlaid on square/portrait/landscape swatches */
  --option-label-scrim-colour: #000;
  --option-label-overlay-colour: contrast-color(var(--option-label-scrim-colour)); /* #fff where unsupported */

  /* Hover / focus-visible */
  --option-border-width-hover: 1px;
  --option-border-color-hover: var(--_border);
  --option-outline-width-hover: 2px;
  --option-outline-color-hover: var(--_ring);
  --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);
  --option-swatch-outline-width: 2px;
  --option-swatch-outline-color: var(--_option-ring); /* 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;
}

Die Form der Farbfelder wird separat über behaviour.swatchVariant (circle / square / portrait / landscape) gesteuert. Siehe Konfiguration → behaviour.

Bei jeder Farbfeldform außer circle steht die Optionsbeschriftung über dem unteren Bildrand statt darunter. --option-label-scrim-colour legt den Verlauf dahinter fest und --option-label-overlay-colour die Textfarbe, die, sofern der Browser es unterstützt, je nach Hintergrund Schwarz oder Weiß wählt.

Die Standardfarben der Umrandung hängen vom Theme ab, statt feste Werte zu sein: --_option-ring ist transparent, sodass der Rahmen im Ruhezustand unsichtbar ist und nur bei Hover/Fokus erscheint, wo er zu --_ring wechselt. Woher das Theme kommt, steht unten unter „Themes“.

Themes

behaviour.theme ändert die gesamte Farbgebung der Komponente. Legen Sie es über die behaviour-Konfiguration fest. Standard "default".

Ein Theme besteht aus einer Grundfläche und einem Akzent. Der Akzent markiert die Auswahl der Kundschaft (Umrandung und Tönung der gewählten Option sowie das Häkchen-Badge) und ist bewusst vom Erfolgsgrün getrennt, das ausschließlich eine gute Übereinstimmung bedeutet. In "default" stammt die Grundfläche aus Ihren --brand-*-Tokens und der Akzent aus --accent-*, mit Fallback auf --brand-*, sodass beide Ihrem Branding folgen. Für einen einmaligen Akzent ohne vollständigen Verlauf überschreiben Sie stattdessen --treatment-consultant-checked-surface-colour und --treatment-consultant-checked-stroke-colour (siehe Weitere Tokens).

const config = { behaviour: { theme: "champagne" } };

Die vier Farbvorlagen ("blush", "champagne", "plum", "ink") verwenden eigene integrierte Verläufe und sehen daher unabhängig von Ihren --brand-*- / --accent-*-Tokens immer gleich aus. Wenn Sie eigene Farben definieren, halten Sie die Grundfläche fern von Grün und Petrol (sie konkurrieren mit der Erfolgsfarbe) sowie von Rot, Orange und Bernstein (sie konkurrieren mit den Warn- und Fehlerfarben).

Beide monochromen Themes basieren auf einem eigenen Grauverlauf mit Chroma 0 (--mono-00…--mono-10, enthalten in srcdev-hair-treatments/dist/tokens.css) statt auf --brand-* und bleiben daher vollständig entsättigt, selbst wenn Sie den Markenverlauf Ihrer App angepasst haben.

Upgrade von 1.4 oder älter: Der ausgewählte Zustand teilte sich früher das Erfolgsgrün. Wenn Sie --success-* angepasst haben, um Auswahlen umzugestalten, verschieben Sie das nach --accent-*.

Eckige Ecken

Setzen Sie behaviour.sharpCorners auf true, um alle abgerundeten Ecken eckig zu machen: Optionskarten, Buttons, Bereiche, das Lizenz-Wasserzeichen. Bewusst kreis- oder pillenförmige Elemente (das kreisförmige Farbfeld, das Häkchen-Badge, Fortschrittspunkte und -balken) behalten ihren eigenen Radius und sind nicht betroffen. Standard false.

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

Größen & die Root-Schriftgröße Ihrer Seite

Für diese Komponente ist kein html { font-size: 62.5% }-Reset nötig. Sie bemisst sich über eine lokale Custom Property --_unit (Standard 1px) statt über reine rem-Werte und wird daher unabhängig von der Root-Schriftgröße Ihrer App in den vorgesehenen Pixelgrößen dargestellt. Wenn sie stattdessen mit der Root-Schriftgröße Ihrer Seite oder der Textzoom-Einstellung des Browsers skalieren soll, aktivieren Sie das ausdrücklich:

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

SSR & ClientOnly

TreatmentConsultant ist eine reine clientseitige Vue-Komponente ohne Unterstützung für serverseitiges Rendering. In einer Nuxt-App (oder einem anderen SSR-Framework) führt das Rendern während SSR in einem Produktions-Build zu einem 500-Fehler. Umschließen Sie sie mit <ClientOnly>:

<ClientOnly>
  <TreatmentConsultant />
</ClientOnly>

Das ist eine feste Voraussetzung und kein Workaround für einen Fehler, der später behoben wird. Umschließen Sie sie immer, wenn Sie sie auf einer serverseitig gerenderten Seite einbinden.