@aurodesignsystem/design-tokens

Auro Design Tokens

Installation

$ npm i @aurodesignsystem/design-tokens

Using Pre-processed Resources

Pre-processed resources are available in the ./dist/tokens directory of the npm package.

└── tokens
   ├── CSSCustomProperties.css
   ├── CSSSizeCustomProperties.css
   ├── JSData--color.js
   ├── JSONVariablesFlat.json
   ├── JSONVariablesNested.json
   ├── JSObject--allTokens.js
   ├── JSObject--deprecated.js
   ├── JSVariables--color.js
   ├── SCSSVariableMap.scss
   ├── SCSSVariables.scss
   ├── SCSSVariablesMapFlat.scss
   ├── SassCustomProperties.scss
   ├── SassSizeCustomProperties.scss
   ├── darkmode
   |  ├── CSSCustomProperties.css
   |  ├── JSDataColor.js
   |  ├── JSObject--deprecatedDark.js
   |  ├── JSVariablesColor.js
   |  ├── SCSSVariables.scss
   |  ├── SCSSVariablesMapFlat.scss
   |  └── SassCustomProperties.scss
   └── excursion
      ├── JSONVariablesFlat.json
      └── JSONVariablesNested.json

Resource Descriptions

File	Syntax	Type	Status	Filter Type / Description
CSSCustomProperties	CSS	Custom properties	Current	All v4.0x release tokens
CSSSizeCustomProperties	CSS	Custom properties	Current	Filter: size, public
JSData--color	JS module	Color data	Current	Filter: color, current
JSONVariablesFlat	JSON Data	All data	Current	All v4.0x release tokens
JSONVariablesNested	JSON Data	All data	Current	All v4.0x release tokens
JSObject--deprecated	JS module	Deprecated tokens	Current	Filter: deprecated, public
JSObject--allTokens.js	JS module	All data	Current	All v4.0x release tokens
JSVariables--color	JS ES6	Color data	Current	Filter: color
SCSSVariableMap	Sass	Sass variable map	Current	Filter: size, public
SCSSVariables	SCSS	Sass variables	Current	All v4.0x release tokens
SCSSVariablesMapFlat	SCSS	Sass variable map	Current	All v4.0x release tokens
SassCustomProperties	SCSS	Custom properties	Current	All v4.0x release tokens
SassSizeCustomProperties	Sass	Custom properties	Current	Filter: size, public

Migration from 3.x to 4.x

With the release of Auro Design Tokens 4.x, a new variable namespace was introduced. The project has replaced --auro with --ds to support upcoming theming capabilities.

Since not all Auro web components are using the new tokens, simply replacing the 3.x version with the 4.x version will break your UI.

To ensure a smooth transition between the two sets of design tokens, we highly recommend the following approach:

1. Install the new @aurodesignsystem/design-tokens@4.x in your app, but DO NOT uninstall @alaskaairux/design-tokens@3.15.5.
2. Update to use the new @aurodesignsystem/webcorestylesheets, which fully supports the new token naming spec.
3. Review the Deprecated tokens list for a matrix of changes. Some tokens have been removed from the project and need to be updated.

By supporting both the legacy and new Auro design tokens in your project, you ensure a smooth transition until all Auro components have been updated and your project has also updated local SCSS/CSS files with the new references.

Install with Sass

When working with Sass, the preprocessor scripting language, there are several options for incorporating design tokens into your project. First, ensure that all design tokens are included to fulfill CSS custom property requests. This can be achieved by importing the SCSS file as demonstrated below:

@import "~@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties.scss";

Even if Sass isn't utilized, SassCustomProperties.scss remains an option, though not mandatory. Alternatively, you can load all tokens using CSSCustomProperties.css anywhere within the project's header.

Moreover, if project specifications dictate the use of Sass variables, SCSSVariables.scss can be imported. This is necessary for projects utilizing WCSS due to a dependency on these variables.

@import "~@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss";

NOTE: When developing new UI code in Sass, it's still advisable to leverage CSS custom properties over Sass variables. See Install with CSS below.

Install with CSS

For React or similar frameworks, simply import the CSS file directly from npm:

import "@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css"

For other frameworks, you'll need to copy the CSS file from the npm resource into your project using a build scenario.

Install ESModules

In a webpack-supported application or a type="module" script:

import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@aurodesignsystem/design-tokens/dist/tokens/JSVariables--color.js';

Install from CDN

Using the https://cdn.jsdelivr.net/npm/ CDN, every file in the dist directory can be accessed like so:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">

Note: Exercise caution when using this CDN solution. The Auro team is NOT responsible for the maintenance of the CDN https://cdn.jsdelivr.net/ uptime and are unable to effectively troubleshoot response issues. It is recommended to use the installed version of Auro Design Tokens for critical UIs. Any additional CDN solution must be maintained by the team using this solution per this Discussion.

Changelog

4.5.0 (2024-05-23)

Features

• add excursion theme #151 (1f33445)
• add new and depcrecate old tier 2 color tokens (e3b946c)
• add new and deprecate old tier 1 color tokens (4a40ba2)

Performance Improvements

• remove previously deprecated tokens (1bc164b)