CSS variables

Themes and component styles use CSS variables and cascade layers. You do not install UnoCSS or StyleX to use them.

packages/themes/neutral/base.css declares the layer order:

@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;

Semantic tokens sit in astryx.tokens. Structural component styles sit in astryx.components and come from @astryx-vue/core. Application overrides belong in the last layer, astryx.overrides. Unlayered styles, and later layers, both beat earlier layers.

Names follow the upstream tokens and add --astryx-. The primary text color is --astryx-color-text-primary. Colors are written as:

--astryx-color-text-primary: light-dark(#171717, #fafafa);

light-dark() reads the element's color-scheme. Neutral sets color-scheme: light dark on :root and [data-astryx-theme='neutral'], so the result follows the system or whatever the docs site already set. Forcing one side is described in Dark mode. Theme can set the same variables on one subtree.

Components also have their own variables, such as --astryx-button-primary-background. Those names are defined in packages/themes/neutral/<component>.css and usually point at a semantic token. Prefer overriding the semantic token. Override the component variable only when that component has to diverge.

Scrollbar variables

With a ScrollbarsProvider in place, these variables control how the scrollbar looks. They all have defaults that follow the theme tokens, so changing them is optional.

Variable	Default	What it does
--astryx-scrollbar-size	10px	Scrollbar thickness
--astryx-scrollbar-thumb	Secondary text color at 45%	Thumb color
--astryx-scrollbar-thumb-hover	Secondary text color at 70%	Thumb color on hover and drag
--astryx-scrollbar-track	transparent	Track background
--astryx-scrollbar-radius	9999px	Corner radius of track and thumb

You can set them on any ancestor, and they only affect scrollbars inside it. See the component page for details and examples.

@astryx-vue/core/reset.css is a single declaration, @layer astryx.reset. It is not a browser reset. Import it only when you need that layer to exist first.

Load every structural sheet at once with:

import '@astryx-vue/core/styles.css'

Importing a component from a subpath such as @astryx-vue/core/Button loads that component's structural sheet. The theme is still a separate import. See Theme and styles.