$ npm i @aurodesignsystem/design-tokens
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 (BETA)
├── JSONVariablesFlat.json
└── JSONVariablesNested.json
Auro Design Tokens v4.5.x includes some changes to existing token values as well as the inclusion of the new Excursion theme. This new theme is to be considered a BETA release with limited use. For all primary Auro UIs, please continue to use the primary Auro design tokens. Excursion is only intended for UIs that are being custom built to support this new UI with limited release. Expect significant changes in this space WITHOUT a MAJOR release. You have been warned.
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 |
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:
@aurodesignsystem/design-tokens@4.x
in your app, but DO NOT uninstall @alaskaairux/design-tokens@3.15.5
.@aurodesignsystem/webcorestylesheets
, which fully supports the new token naming spec.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.
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.
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.
In a webpack-supported application or a type="module"
script:
import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@aurodesignsystem/design-tokens/dist/tokens/JSVariables--color.js';
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.