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/alaska/CSSCustomProperties--alaska.css"<!-- In an HTML file -->
<link rel="stylesheet" href="node_modules/@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css">When working with Sass:
@import "~@aurodesignsystem/design-tokens/dist/alaska/primitives--alaska.scss";import { AuroColorAlertNotificationOnLight } from '@aurodesignsystem/design-tokens/dist/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 v5.x token names but Auro Classic values |
For migration scenarios only |
| Hawaiian | Hawaiian Airlines theme | Hawaiian Airlines branded interfaces |
| Auro Classic | Legacy theme (deprecated) | Only for backward compatibility |
Apply different themes using the data-aag-theme attribute:
<!-- Alaska-themed -->
<div data-aag-theme="aag-theme-as">
<h1>Alaska Airlines Content</h1>
</div>
<!-- Hawaiian-themed -->
<div data-aag-theme="aag-theme-ha">
<h1>Hawaiian Airlines Content</h1>
</div>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.