Other targets.

Every file below is generated from tokens/tokens.json by npm run build. Change a value there and all targets follow.

Tailwind CSS v4

Maps the tokens into Tailwind's theme, so utilities like bg-panel, text-accent-text, font-display, and p-5 use system values. The variables keep pointing at the tokens, so dark mode still switches.

@import "tailwindcss";
@import "@dario-loi/polytope/tokens.css";
@import "@dario-loi/polytope/tailwind.css";

Sass

Raw values for build-time math, plus maps for the dark theme and the chart palette. Prefer the custom properties at runtime; Sass variables cannot follow a theme switch.

@use "@dario-loi/polytope/tokens.scss" as ply;
.figure-frame { border: 3px solid ply.$ply-ink-950; }

LaTeX, TikZ, and pgfplots

xcolor definitions for every primitive and chart color, and a dl cycle list for pgfplots. Copy dist/polytope-colors.sty next to your .tex file.

\usepackage{pgfplots}
\usepackage{polytope-colors}
...
\begin{axis}[cycle list name=polytope]
  \addplot table {gcn.dat};
\end{axis}
\node[fill=plyTomato500, circle] {};

JavaScript and TypeScript

import { tokens, viz } from "@dario-loi/polytope/tokens";
const series = viz.categorical.light;        // fixed order, eight colors
const ink = tokens["--ply-ink-950"].value;    // "#141414"

The same data as flat JSON is at @dario-loi/polytope/tokens.json.

Figma and other design tools

dist/tokens.dtcg.json is the source file in the W3C Design Tokens format, which token plugins for Figma and Penpot can import. Aliases like {primitive.color.ink.950} stay intact.

Code highlighting

dist/code-theme.json is a TextMate theme. Shiki (and so Astro's <Code>) reads it directly, and VS Code can load it as a color theme.

import theme from "@dario-loi/polytope/code-theme.json";
// astro.config.mjs
export default defineConfig({ markdown: { shikiConfig: { theme } } });

Python

matplotlib styles, plotly templates, a Gradio theme, and Streamlit config. See Python and figures.