Layers

All of Vlak's CSS sits in cascade layers. Unlayered author CSS wins by definition.

The six layers

Layer	Holds
`vlak.tokens`	Custom properties on :root, the dark block, color-scheme.
`vlak.base`	Reset, body, the module background, focus ring defaults, Inter.
`vlak.type`	The type scale: rs-t-display, rs-t-title, rs-t-body, rs-t-label.
`vlak.components`	Every component, projected from its StyleX leaf.
`vlak.touch`	The phone recut at or under 640px: 44pt hits, 16px control type.
`vlak.motion`	Transitions and the prefers-reduced-motion branch.

Declared in that order at the top of both stylesheets, so a later layer beats an earlier one: touch beats components, motion beats everything Vlak paints. The React stylesheet and vlak.css use the same names, so a page can load both without a fight.

Why unlayered CSS wins

/* your.css. No layer, no !important. */
.rs-btn-primary { border-radius: 8px; }
.rs-dialog { max-width: 592px; }
.rs-table-td { padding-block: 14px; }

The cascade sorts by layer before specificity. Styles outside any layer beat styles inside one, whatever the selector. A single class in your stylesheet outranks a Vlak rule with pseudo-classes and media queries behind it. Nothing in Vlak uses !important; a test fails the build if it does.

Keeping your own layers

/* If you keep your own layers, declare Vlak's first and yours last. */
@layer vlak.tokens, vlak.base, vlak.type, vlak.components, vlak.touch, vlak.motion, app;

@import "@noorddev/vlak-react/css";

@layer app {
  .rs-btn-primary { border-radius: 8px; }
}

If your project layers everything, name Vlak's layers before yours in one @layer statement that appears before the import. Order of first mention decides.

The rs-* classes are the contract

<!-- Compiled StyleX classes change between builds. The rs-* names do not. -->
<button class="rs-btn-primary x1a2b3c x4d5e6f">Save</button>

/* Style, test, and measure against the contract */
.rs-btn-primary { … }
await page.click(".rs-btn-primary");

Every component applies semantic rs-* classes next to its compiled StyleX atomics. The atomics are hashes and change between builds; the rs-* names are listed on each component page, in the registry, and in /r/<name>.json. A test enforces that every registry class is applied by the component's source and painted by its CSS. Use them for overrides, end-to-end selectors, and analytics; they are stable across the three install paths.

Overriding a component

Three levels, from broad to narrow. Change a token (Theming) and every component follows. Restyle a class, as above, and one component changes everywhere. Pass className or style to a React component and one instance changes; every component merges both onto its root element.