Quick start

Three calls cover the happy path: bind, author, emit.

import { createDistillery, cq, lightDark } from '@elastic/distillate';

const distillery = createDistillery({
  prefix: 'eui',
  themeScope: '.eui-view',
  theme: {
    colors: {
      ink: lightDark('#111', '#eee'),
      accent: lightDark('#06c', '#8cf'),
      surface: lightDark('#fff', '#000'),
    },
    gap: cq('8px', '2cqi'),
  },
});
		

prefix must be a CSS identifier segment. themeScope is the selector that wraps emitted theme-variable declarations. Theme-tree keys match /^[A-Za-z_][A-Za-z0-9_]*$/. Strings and lightDark leaves become theme vars named cssVarName(prefix, path); cq / scaleToken leaves inline. Differing lightDark values fold into light-dark(...).

const demo = distillery.createStyleModule('demo', ({ css, tokens }) => ({
  root: css`
    color: ${tokens.colors.ink};
    padding: ${tokens.gap};
  `,
}));
		

1. Theme token: records a dependency, emits var(--eui-colors-ink).
2. Scale token: inlines 8px.

A full readable stylesheet:

distillery.renderStyles(distillery.stylesheetCollector());
		

1. readable: .demo-root, --eui-colors-ink

A compact artifact that includes only demo.handles.root:

const collector = distillery.artifactCollector('compact');
collector.use(demo.handles.root);
distillery.renderStyles(collector);
		

1. unused handles and tokens drop out
2. compact: .a, --a

Those outputs are asserted in docs/examples/. Next: your first stylesheet, declare and select variations, or skip to naming and output.