All Tokens

Color Tokens #

Semantic colors for consistent theming. All colors use light-dark() for automatic mode switching.

Spacing Tokens #

Spacing scale used for padding, gap, and margin. Component gap props map spacing steps to these tokens.

Size Tokens #

Control heights for consistent sizing across buttons, inputs, and selectors.

Border Tokens #

Border width for card and input borders.

Radius Tokens #

Numeric scale based on a 4dp base unit. Tokens scale with the theme's radius multiplier; --radius-none and --radius-full are fixed.

Shadow Tokens #

Elevation shadows (low to med to high) and inset shadows for input state rings.

Duration Tokens #

Motion duration primitives. Three bands: fast (micro-interactions), medium (entrance/exit), slow (continuous). Min/max variants derive from base × ratio.

Easing Tokens #

Easing curves for animations and transitions.

Font Family Tokens #

Font family stacks for body, code, and heading text.

Font Size Tokens #

Geometric type scale: round(14 × 1.2^step). Base is 14px (--font-size-base).

Font Weight Tokens #

Font weight values for body, emphasis, and headings.

Type Scale Tokens #

Semantic tokens for headings, body, labels, code, supporting text, and display text. References font size and weight tokens. Override via typography.scale in defineTheme.

Usage in StyleX #

ts
 
import * as stylex from '@stylexjs/stylex';
​
// Token names are the public surface; the `defineVars` objects that mint them
// are internal to @astryx-svelte/core, so reference them as var() strings.
export const styles = stylex.create({
	card: {
		padding: 'var(--spacing-4)',
		backgroundColor: 'var(--color-background-surface)',
		borderRadius: 'var(--radius-container)'
	},
	button: {
		height: 'var(--size-element-md)'
	}
});

svelte
 
<script lang="ts">
	import { Card } from '@astryx-svelte/core';
	import { styles } from './page.stylex.js';
</script>
​
<Card xstyle={styles.card}>Tokens applied via xstyle</Card>

StyleX may only be imported from a .ts module, never from a .svelte file — the bundler plugin Babel-parses anything that imports @stylexjs/stylex and would read Svelte markup as JSX. Author styles in a sibling .stylex.ts and pass them in as xstyle.

For a non-StyleX styling library, tokenVar() / tokenVars from @astryx-svelte/core/theme return the same var(--token) references as typed values. See astryx-svelte docs styling for how to apply tokens via xstyle, class, and compound component patterns, and astryx-svelte docs theme for overriding tokens with defineTheme.