@capra/theme

Overview

@capra/theme provides the Capra baseline stylesheet, token helpers, and DX token entry points used by consumers and build tooling.

Documentation

Human-readable documentation is available at https://capra.cribl.io.

LLM-readable documentation is available at https://capra.cribl.io/llms.txt.

Install

pnpm add @capra/theme

Usage

import '@capra/theme/base.css';
import { token } from '@capra/theme';

const gap = token('spacing.md');

Chart and data-visualization themes are available from @capra/theme/visualizations. Every theme contains concrete values such as hex colors and pixel dimensions, so they work with canvas renderers and other environments that cannot resolve CSS variables. The same guide lives on the docs site under Visualization Themes.

import { getChartTheme, getEchartsTheme } from '@capra/theme/visualizations';

const genericTheme = getChartTheme({
  palette: 'sequential.Viridis',
  mode: 'dark',
});

const echartsTheme = getEchartsTheme({
  palette: 'categorical.observable10',
  mode: 'light',
});

Register an ECharts theme before initializing a chart:

import * as echarts from 'echarts';
import { getEchartsTheme } from '@capra/theme/visualizations';

echarts.registerTheme(
  'capra',
  getEchartsTheme({
    palette: 'categorical.observable10',
    mode: 'dark',
  }),
);

const chart = echarts.init(element, 'capra');

Use visualizationPaletteNames and visualizationThemeModes to populate selectors or enumerate every supported permutation.

Available stylesheet entry points:

• @capra/theme/base.css is the preferred baseline stylesheet. It includes Capra design tokens, font-face declarations, and minimal global defaults.
• @capra/theme/styles.css is the legacy variables-only stylesheet for backward compatibility.
• @capra/theme/fonts.css publishes the standalone font-face declarations.

Note: Do not import @capra/theme/base.css with @capra/theme/fonts.css or @capra/theme/styles.css. base.css already includes the token styles exposed by styles.css and the fonts declared in fonts.css.

License

This package is proprietary software. See LICENSE.txt.