Color

Overview #

Colors are semantic: tokens describe purpose, not appearance. Every color adapts automatically between light and dark modes via CSS light-dark(). Themes override the resolved values, so your code never references raw hex colors.

Surface Colors #

Layered surface hierarchy: body → surface → card → popover. Each level sits visually above the previous one.

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

Full reference: Color Tokens.

Usage #

ts
 
import * as stylex from '@stylexjs/stylex';
​
export const styles = stylex.create({
	container: {
		backgroundColor: 'var(--color-background-surface)',
		color: 'var(--color-text-primary)',
		borderColor: 'var(--color-border)'
	},
	accent: {
		color: 'var(--color-text-accent)'
	}
});

Outside StyleX the same tokens work anywhere CSS does — a scoped <style> block, a global stylesheet, or an SVG fill. tokenVar('--color-text-accent') from @astryx-svelte/core/theme returns the same var(...) reference when a styling-library config needs it as a value.

Best Practices #