Calcite Design Tokens

Getting Started

Install the design tokens module.

npm install @esri/calcite-design-tokens

Reference tokens in your CSS:

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

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

These are the published asset files generated by the token transformer:

Name	CSS	SCSS
Global	@esri/calcite-design-tokens/css @esri/calcite-design-tokens/css/global	@esri/calcite-design-tokens/scss @esri/calcite-design-tokens/scss/global
Calcite Light	@esri/calcite-design-tokens/css/light	@esri/calcite-design-tokens/scss/light
Calcite Dark	@esri/calcite-design-tokens/css/dark	@esri/calcite-design-tokens/scss/dark