@astryx-svelte/theme-stone

Warm stone and slate, earthy and understated.

A theme for astryx-svelte — a Svelte 5 port of Astryx, Meta's open source design system. Unofficial, and not affiliated with Meta.

Install

npm install @astryx-svelte/core @astryx-svelte/theme-stone

@stylexjs/stylex is a peer dependency and npm and pnpm install it for you. It is required at runtime — the components reach stylex.props() through sx() — so add it explicitly if your package manager does not resolve peers automatically.

@astryx-svelte/core is a peer dependency. A theme is data plus one stylesheet; it renders nothing on its own.

Use

/* src/app.css */
@import '@astryx-svelte/core/base.css';
@import '@astryx-svelte/theme-stone/theme.css';

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { Theme } from '@astryx-svelte/core';
	import { stoneTheme } from '@astryx-svelte/theme-stone';
	import '../app.css';

	const { children } = $props();
</script>

<Theme theme={stoneTheme}>
	{@render children()}
</Theme>

base.css is not optional and is not a duplicate: it declares the cascade layer order and sets color-scheme, without which every light-dark() token is inert. And your bundler must run the StyleX compiler over @astryx-svelte/core, which is the one setup step that fails without an error — the components render, unstyled. See core's README.

Exports

| Export | What it is | | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | stoneTheme | The theme object, pre-built. It carries __built, so <Theme> injects no CSS at runtime. | | stoneIconRegistry | The 28 semantic icon names mapped to Lucide glyphs. Already attached to stoneTheme.icons; exported separately for registerIcons() and for composing a theme of your own. | | stonePalettes | The raw tonal palettes, as upstream's package publishes them — pure data, the ramps the token values were picked from. | | @astryx-svelte/theme-stone/tokens | The same theme as plain data, without icons, in a module that imports nothing. Readable by plain Node, which the . entry is not — it reaches a .svelte registry. | | @astryx-svelte/theme-stone/theme.css | The pre-built stylesheet. |

Fidelity

The theme oracle (scripts/compare-upstream.mjs) diffs this package's generated CSS declaration by declaration against the published @astryxdesign/theme-stone tarball, in both directions — a missing declaration, a wrong value and an invented one all fail the run. Every declaration matches, at 0 mismatches.

The run prints the totals; this paragraph deliberately does not, because a count written into prose goes stale quietly and these ones had. Where the two totals differ, the remainder is the color-scheme rules that @astryx-svelte/core's base.css owns rather than the theme. A dark-only theme declares no [light, dark] pairs, so upstream emits no html[data-theme=…] block for it and the totals are equal.

Resources

• The documentation site — every theme rendered live, side by side
• Astryx — the design system this ports
• The repository

License

MIT. Astryx is © Meta Platforms, Inc. and affiliates; this project ports its design and reuses its documentation prose, and claims no affiliation or endorsement.