npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aurodesignsystem/design-tokens

v4.12.1

Published

Alaska Air Auro Design System token repository

Downloads

7,476

Readme

Auro Design Tokens

Installation

Build Status See it on NPM! License

$ 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 (BETA)
      ├── JSONVariablesFlat.json
      └── JSONVariablesNested.json

BETA Excursion release

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.

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/[email protected] in your app, but DO NOT uninstall @alaskaairux/[email protected].
  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.