CSS Reset

An optional adaptation of Josh Comeau's custom CSS reset: box sizing, margins, media elements, and text wrapping. It says nothing about color or typefaces, so it works the same with the reference theme or fully headless.

Import order

Import the reset before other stylesheets. Every rule lives in the hz-reset cascade layer, pinned below hz-theme, so the reference theme always beats it. Your own unlayered CSS beats both, at any specificity, because an unlayered rule outranks every layered one. The reset never fights you.

import '@hyzer-labs/ui/reset.css'; // 1. reset (optional)
import '@hyzer-labs/ui/tokens.css'; // 2. tokens
import '@hyzer-labs/ui/theme'; // 3. reference theme (optional)

What it does

box-sizing: border-box everywhere.
All default margins removed, so spacing becomes a layout decision.
interpolate-size: allow-keywords so height: auto transitions can animate (guarded by prefers-reduced-motion).
Media elements (img, video, …) block-level and constrained.
Form controls inherit the surrounding font.
Long words break instead of overflowing; text-wrap: pretty for paragraphs and balance for headings.

/**
 * @hyzer-labs/ui reset (optional)
 *
 * Structural adaptation of Josh Comeau's custom CSS reset:
 * https://www.joshwcomeau.com/css/custom-css-reset/
 *
 * Deliberately colorless and font-less — tokens.css and the reference theme
 * (or your own CSS) own those. Usable with or without the theme.
 *
 * Rules live in the `hz-reset` cascade layer, pinned before `hz-theme`, so
 * the reference theme and any unlayered consumer CSS always win ties.
 * Import this before other stylesheets.
 */
@layer hz-reset, hz-theme;

@layer hz-reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	/* Stop mobile Safari (and Firefox on Android) inflating text on its own.
	 * The engines do this to rescue non-responsive pages, and on a responsive
	 * layout it just makes some text bigger than you asked for — most visibly
	 * in landscape. `none` does NOT disable user zoom: the old WebKit bug that
	 * made `100%` the safer value has been fixed.
	 * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			interpolate-size: allow-keywords;
		}
	}

	body {
		line-height: var(--hz-line-height-base, 1.5);
		-webkit-font-smoothing: antialiased;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	/* The library's own inline icons stay inline — block svgs would wrap
	 * them onto their own line mid-text (flex/grid parents blockify anyway). */
	svg.hz-icon {
		display: inline-block;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-wrap: balance;
	}

	/* An anchored element otherwise lands flush against the top of the
	 * viewport, or underneath a sticky header. `ex` scales with the font, so
	 * the offset stays proportional to the text rather than a fixed guess. */
	:target {
		scroll-margin-block: 5ex;
	}

	/* Descenders stay legible where an underline would cut through them.
	 * Scoped to unstyled links so a themed link keeps whatever its theme
	 * decides — and no color is set here, which is the reset's whole posture. */
	a:not([class]) {
		text-decoration-skip-ink: auto;
	}
}