Tokens in Tailwind and code
The design tokens as Tailwind utilities, and read from TypeScript and JSON.
The design tokens reach more than the stylesheet. A Tailwind site gets them as utilities, and a program reads them from the files in output/.
Tailwind
A site on Tailwind CSS version 4 imports the Tailwind theme beside the design system's stylesheet. The theme gives the tokens utility names and holds no value of its own, so a utility draws the same color as the component next to it.
@import "tailwindcss";
@import "./design-system/css/simbolik.css";
@import "./design-system/css/tailwind.css";TypeScript and JSON
The TypeScript module names each token's custom property, so code never types a --smbk- name by hand. The JSON file lists every token with its type, its value in each theme or setting and the custom property it makes.
import { cssVariables } from './design-system/output/tokens.js';
const name = cssVariables['color.surface.canvas']; // "--smbk-color-surface-canvas"
element.style.backgroundColor = `var(${name})`;