Generated CSS

The plugin serves a virtual stylesheet, virtual:yarcl.css, generated from your config at build time. Importing yarcl loads it together with the library’s own styles.

Components never set inline styles. They render class names, and all values come from CSS. That means:

• no runtime cost: nothing is computed in the browser
• works with a strict Content Security Policy that blocks inline styles
• server rendering works with no flash of unstyled content
• editing the config hot-reloads the stylesheet in the dev server

Variables on :root

Variable	From
--yarcl-color-{key}, --yarcl-color-{key}-on, --yarcl-color-{key}-text	colors
--yarcl-neutral-{key}	neutrals
--yarcl-size-{key}-height, -padding-x, -font-size, -icon-size	sizes
--yarcl-radius-{key}	radii
--yarcl-space-{key}	spacing
--yarcl-shadow-{key}	shadows
--yarcl-font-{key}	typography.families
--yarcl-modal-{key}	modalSizes
--yarcl-z-{key}	zIndex
--yarcl-motion-{key}	motion
--yarcl-border-{key}	borders
--yarcl-focus-width, -offset, -color, -style	focusRing
--yarcl-error, --yarcl-floating-shadow, --yarcl-padding, --yarcl-gap	defaults

Colors are emitted as light-dark(light, dark), and :root gets color-scheme: light dark.

Modifier classes

One class per key, shared by every component:

Class	Sets
yarcl-color-{key}	--yarcl-c, --yarcl-c-on, --yarcl-c-text
yarcl-size-{key}	--yarcl-h, --yarcl-px, --yarcl-fs, --yarcl-icon
yarcl-radius-{key}	--yarcl-r
yarcl-variant-{key}	--yarcl-v-bg, --yarcl-v-bg-hover, --yarcl-v-bg-active, --yarcl-v-border, --yarcl-v-fg
yarcl-gap-{key}, yarcl-padding-{key}	gap, padding
yarcl-shadow-{key}	box-shadow
yarcl-density-{key}	table cell padding and font size
yarcl-modal-size-{key}	--yarcl-modal-width
yarcl-type-{key}	font family, size, weight, line height, letter spacing

A button renders like this:

<button class="yarcl-button yarcl-size-md yarcl-radius-md yarcl-color-primary yarcl-variant-solid">

The generated file grows with the number of keys, not with the number of components.

Using tokens in your own CSS

.sidebar {
  width: 16rem;
  padding: var(--yarcl-space-md);
  background: var(--yarcl-neutral-surface);
  border-right: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
}

.page-title {
  font-family: var(--yarcl-font-serif);
}

Or reuse the modifier classes on your own elements, for example class="yarcl-type-caption".

Overriding a component

Component classes are plain, unscoped classes with low specificity. Override them with your own class:

.checkout .yarcl-button {
  --yarcl-h: 3.5rem;
}

Naming

Class names are yarcl-{component}, yarcl-{component}-{element} and yarcl-{group}-{key}. Because modifiers include the group name, a size called sm and a radius called sm never collide. Keys can contain any character except whitespace; the plugin escapes them in selectors.