@aurodesignsystem/design-tokens v8.2.1

Auro 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 Scoping

Alaska Air Group Exclusive

⚠️ The following link is only intended for Alaska Air Group employees and is protected by SSO.

• Prepare your pages for multi-brand theming

Documentation

For comprehensive documentation, please see our:

• Architecture Guide
• Theme Guide
• Migration Guide
• API Reference
• Complete Documentation - Auro Docs

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.