@aurodesignsystem/design-tokens

Auro Design Tokens

Install

$ npm i @alaskaairux/design-tokens

Use pre-processed resources

Located in the ./dist/tokens directory of the npm.

└── tokens
   ├── CSSCustomProperties.css
   ├── CSSCustomPropertiesColorRGB.css
   ├── CSSOpacityProperties.scss
   ├── CSSSizeCustomProperties.css
   ├── JSData--color.js
   ├── JSObject--allTokens.js
   ├── JSObject--deprecated.js
   ├── JSVariables--color.js
   ├── SCSSOpacityVariables.scss
   ├── SCSSVariableMap.scss
   ├── SCSSVariables.scss
   ├── SCSSVariablesMapFlat.scss
   ├── SassCustomProperties.scss
   ├── SassCustomPropertiesColorRGB.scss
   └── SassSizeCustomProperties.scss

Resource Descriptions

file	syntax	type	status	filter type / description
CSSCustomProperties	CSS	custom properties	current	full list of v3.0x release tokens
CSSCustomPropertiesColorRGB	CSS	custom properties	current	Filter: color, public custom RGB output
CSSOpacityProperties	Sass	custom properties	current	filter: opacity
CSSSizeCustomProperties	CSS	custom properties	current	filter: size, public
JSData--color	JS module	color data	current	filter: color, current
JSObject--deprecated	JS module	deprecated tokens	current	filter: deprecated, pubic
JSObject--allTokens.js	JS module	all data	current	filter: public
JSVariables--color	js es6	color data	current	filter: color
SCSSOpacityVariables	Sass	Sass variables	current	filter: opacity
SCSSVariableMap	Sass	Sass variable map	current	filter: size, public
SCSSVariables	scss	Sass variables	current	full list of v3.0x release tokens
SCSSVariablesMapFlat	scss	Scss variable map	current	full list of v3.0x release tokens
SassCustomProperties	scss	custom properties	current	full list of v3.0x release tokens
SassCustomPropertiesColorRGB	Sass	custom properties	current	Filter: color, public custom RGB output
SassSizeCustomProperties	Sass	custom properties	current	filter: size, public

Install with Sass

@import "~@alaskaairux/design-tokens/dist/tokens/SCSSVariables";

// or

@import "~@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";

Install with CSS

With React or similar framework, the CSS file can be imported directly from the npm:

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

For other frameworks, it's suggested that the CSS file be copied from the npm into the scope of the project with a build scenario.

Install ESModules

Within a webpacked application or a type="module" script:

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

Install from CDN

Using unpkg.com, every file in the dist directory can be accessed.

<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">

For specifically the CSSCustomProperties.css file, a faster CDN resource is available.

<link rel="stylesheet" href="https://p2pcontent-fd-prod.azurefd.net/auro/tokens/CSSCustomProperties.css">

Changelog

4.0.0 (2023-09-13)

Bug Fixes

• comment: update comment of dark mode token (a735309)
• token: fix typo in dark token config (461f5eb)

chore

• update npm namespace #122 (1ef7d41)

Features

• prefix: BREAKING CHANGE update token prefix from auro to ds #118 (9aaa33a)

Performance Improvements

• darkmode: update token naming convention #129 (83fee5a)
• public: change value of deprecated tokens #122 (427f8d9)

BREAKING CHANGES

• This commit updates the npm namespace from @alaskaairux to @aurodesignsystem

Changes to be committed: modified: package.json

• public: This commit changes the public access of the token from true to false. This setting will restrict the distribution of the token into the various distributed generated resources.

Changes to be committed: modified: src/breakpoint.json modified: src/color-dark/base.json modified: src/color/alert.json modified: src/color/base.json modified: src/color/border.json modified: src/color/icon.json modified: src/color/text.json modified: src/color/tier.json modified: src/color/ui.json modified: src/depth.json modified: src/shadow.json modified: src/size/scale.json