Navigation

Theming

Every override targets the .treatment-consultant class (or any ancestor of it) with CSS custom properties — no build-time theming step needed.

Colour ramps

The component reads four semantic 11-step ramps (00 light through 10 dark): --brand-*, --success-*, --warning-* and --error-*. Import the defaults from srcdev-hair-treatments/dist/tokens.css, or supply your own to match your brand:

css

: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);
  /* ... */
}

This is the same idea GuideMyHair's own marketing site uses to theme the widget — in app/assets/styles/main.css, --brand-00 through --brand-10 are aliased to the site's own teal design-system ramp instead of hand-written OKLCH values, replacing the package's default warm-orange brand colour entirely:

css

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

Fonts

Property	Used for	Default
`--treatment-consultant-font-body`	Body text, sublabels, notes	`system-ui, sans-serif`
`--treatment-consultant-font-heading`	Step titles, Results title, section titles	`Georgia, Cambria, "Times New Roman", Times, serif`
`--treatment-consultant-font-label`	Progress status, option labels	Same as `font-body`

css

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

Other tokens

Property	Used for
`--treatment-consultant-checked-surface-colour`	Background of the checkmark badge on a selected option
`--treatment-consultant-checked-stroke-colour`	Checkmark icon colour

Sizing & your page's root font-size

No html { font-size: 62.5% } reset is needed to use this component. It sizes itself via a local --_unit custom property (default 1px) instead of raw rem, so it renders at the same intended pixel sizes regardless of your app's root font-size. If you'd rather have it scale with your page's root font-size or the user's browser text-zoom setting, opt in explicitly:

css

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

SSR & ClientOnly

TreatmentConsultant is a plain client-side Vue component — it has no server-rendering support. In a Nuxt app (or any SSR framework), rendering it during SSR will 500 on a production build. Wrap it in <ClientOnly>:

vue

<ClientOnly>
  <TreatmentConsultant />
</ClientOnly>

This is a hard requirement, not a workaround for a bug that'll be fixed later — always wrap it when embedding on a server-rendered page.