Installation

yarn add @apollion-dsi/core styled-components@6 react@19
# Optional — framework-agnostic tokens (CSS variables, JSON, TS):
yarn add @apollion-dsi/tokens

Imports use granular subpaths — @apollion-dsi/core/elements/button, @apollion-dsi/core/form/input, etc. There is no root barrel; the ESLint rule from @apollion-dsi/eslint-config enforces the convention and enables maximum tree-shaking.

Project setup

For components to work correctly you need to wrap the project root with the ApollionProvider:

import React from 'react';
import { render } from 'react-dom';
import { ApollionProvider } from '@apollion-dsi/core/themes';
import { App } from './app';
 
render(
  <React.StrictMode>
    <ApollionProvider>
      <App />
    </ApollionProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

Optional setup — framework-agnostic tokens

If you need to consume tokens outside React (Vue, Flutter, non-styled-components, plain CSS) — or want to generate static token artifacts at build time — add @apollion-dsi/tokens and create an apollion.config.mjs:

// apollion.config.mjs (project root)
import { defineConfig } from '@apollion-dsi/tokens/config-loader';
 
export default defineConfig({
  brands: {
    default: {
      deepDark: '#000',
      deepLight: '#FFF',
      main: '#003750',
      complementary: '#F6BA20',
      primary: '#32AFDC',
      secondary: '#2D81AA',
      tertiary: '#2CE571',
      success: '#2CB567',
      danger: '#E12712',
      warning: '#FFBB00',
      information: '#3399FF',
    },
  },
  modes: ['light'],
  surfaces: ['positive', 'negative'],
  dimensions: ['compact', 'normal', 'spacious'],
  output: { css: true, json: true, ts: true },
});

npx apollion-tokens build --config apollion.config.mjs --out dist/tokens

The loader runs in an isolated environment — access to require() / dynamic import() is rejected. For CI: --check returns exit 1 if the dist is stale (the build needs to be committed).

Server-Side Rendering Development