AlaskaAirlinesAuro Design Tokens
Overview
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.
Installation
npm install @aurodesignsystem/design-tokens
Quick Start
CSS Custom Properties
For 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">
With Sass
When working with Sass:
@import "~@aurodesignsystem/design-tokens/dist/alaska/primitives--alaska.scss";
JavaScript Usage
import { AuroColorAlertNotificationOnLight } from '@aurodesignsystem/design-tokens/dist/auro-classic/JSVariables--color.js';
Available Themes
Auro Design Tokens support multiple themes:
| Theme | Description | Usage |
|---|---|---|
| Alaska | Current Alaska Airlines theme | Alaska Airlines branded interfaces |
| Alaska Classic | Transition theme with v6.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 |
Theme Scoping
Alaska Air Group Exclusive
⚠️ The following link is only intended for Alaska Air Group employees and is protected by SSO.
Documentation
For comprehensive documentation, please see our:
Package Structure
The npm package provides pre-processed resources in the ./dist/ directory organized by theme.
Contributing
Please read our contributing guidelines for details on our code of conduct and the process for submitting pull requests.
License
This project is licensed under the Apache 2.0 License - see the LICENSE file for details.