Auro Design Tokens are the foundation of the Auro Design System, providing consistent design values across different platforms and implementations. These tokens define colors, typography, spacing, and other visual attributes for Alaska Airlines and Hawaiian Airlines brands.
npm install @aurodesignsystem/design-tokensFor most web applications, using CSS Custom Properties is recommended:
// In a React or similar application
import "@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css"<!-- In an HTML file -->
<link rel="stylesheet" href="node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css">When working with Sass:
@import "~@aurodesignsystem/design-tokens/dist/themes/alaska/primitives--alaska.scss";import { AuroColorAlertNotificationOnLight } from '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/JSVariables--color.js';Auro Design Tokens support multiple themes:
| Theme | Description | Usage |
|---|---|---|
| Alaska | Current Alaska Airlines theme | Alaska Airlines branded interfaces |
| Alaska Classic | Transition theme with the latest token names but Auro Classic values | For migration scenarios only |
| Atmos | Current Atmos theme | Atmos branded interfaces |
| Hawaiian | Hawaiian Airlines theme | Hawaiian Airlines branded interfaces |
| Auro Classic | Legacy theme (deprecated) | Only for backward compatibility |
Apply a theme to any element using the data-aag-theme attribute. All child elements will inherit the theme's design tokens.
<html data-aag-theme="aag-theme-as">
<!-- All content uses Alaska theme tokens -->
</html>Available theme codes:
| Theme | Attribute Value |
|---|---|
| Alaska | aag-theme-as |
| Alaska Classic | aag-theme-asc |
| Hawaiian | aag-theme-ha |
| Atmos | aag-theme-atm |
You can nest themes by applying a different data-aag-theme value to a child element. The child and its descendants will use the nested theme's tokens, while the rest of the page retains the parent theme.
<html data-aag-theme="aag-theme-as">
<!-- Alaska theme -->
<header>...</header>
<section data-aag-theme="aag-theme-ha">
<!-- Hawaiian theme within this section only -->
<p>This content uses Hawaiian tokens.</p>
</section>
<!-- Back to Alaska theme -->
<footer>...</footer>
</html>Themes are split into color and typography token groups. You can apply just one aspect of a theme without affecting the other by appending -color or -type to the attribute value.
Apply a theme's color tokens while keeping the parent theme's typography:
<html data-aag-theme="aag-theme-as">
<!-- Alaska color + Alaska typography -->
<section data-aag-theme="aag-theme-ha-color">
<!-- Hawaiian colors, but still Alaska typography -->
<p>Hawaiian color palette with Alaska fonts.</p>
</section>
</html>Apply a theme's typography tokens while keeping the parent theme's colors:
<html data-aag-theme="aag-theme-as">
<!-- Alaska color + Alaska typography -->
<section data-aag-theme="aag-theme-ha-type">
<!-- Hawaiian typography, but still Alaska colors -->
<p>Hawaiian fonts with Alaska color palette.</p>
</section>
</html>You can stack both partial selectors on the same element to mix color from one theme and typography from another:
<html data-aag-theme="aag-theme-as">
<section data-aag-theme="aag-theme-ha-color">
<div data-aag-theme="aag-theme-atm-type">
<!-- Hawaiian colors + Atmos typography -->
</div>
</section>
</html>For comprehensive documentation, please see our:
The npm package provides pre-processed resources in the ./dist/ directory organized by theme.
Please read our contributing guidelines for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the Apache 2.0 License - see the LICENSE file for details.