@esri/calcite-design-tokens NPM

Calcite Design Tokens

Install the design tokens module.

npm install @esri/calcite-design-tokens

Reference tokens in your CSS.

@import "@esri/calcite-design-tokens/css/calcite-light";

:root {
  --my-custom-token: var(--calcite-ui-brand);
}

These are the published asset files generated by the token transformer

Name	CSS	SCSS
Calcite Headless	@esri/calcite-design-tokens/css @esri/calcite-design-tokens/css/calcite-headless	@esri/calcite-design-tokens/scss @esri/calcite-design-tokens/scss/calcite-headless
Calcite Light	@esri/calcite-design-tokens/css/calcite-light	@esri/calcite-design-tokens/scss/calcite-light
Calcite Dark	@esri/calcite-design-tokens/css/calcite-dark	@esri/calcite-design-tokens/scss/calcite-dark
Calcite Brand Light	@esri/calcite-design-tokens/css/brand-light	@esri/calcite-design-tokens/scss/brand-light
Calcite Brand Dark	@esri/calcite-design-tokens/css/brand-dark	@esri/calcite-design-tokens/scss/brand-dark