https://github.com/alaskaairlines/aurodesigntokens
Abstract UI atomic values to support the Auro Design System.
https://github.com/alaskaairlines/aurodesigntokens
auro design-system design-tokens
Last synced: about 1 month ago
JSON representation
Abstract UI atomic values to support the Auro Design System.
- Host: GitHub
- URL: https://github.com/alaskaairlines/aurodesigntokens
- Owner: AlaskaAirlines
- License: apache-2.0
- Created: 2019-03-06T18:52:45.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T18:34:58.000Z (about 1 month ago)
- Last Synced: 2025-04-09T18:52:45.439Z (about 1 month ago)
- Topics: auro, design-system, design-tokens
- Language: JavaScript
- Homepage: https://auro.alaskaair.com/getting-started/developers/design-tokens
- Size: 1.48 MB
- Stars: 18
- Watchers: 11
- Forks: 7
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Auro Design Tokens
[](https://github.com/AlaskaAirlines/AuroDesignTokens/actions/workflows/testPublish.yml)
[](https://www.npmjs.com/package/@aurodesignsystem/design-tokens)
[](https://www.apache.org/licenses/LICENSE-2.0)
## 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
```bash
npm install @aurodesignsystem/design-tokens
```
## Quick Start
### CSS Custom Properties
For most web applications, using CSS Custom Properties is recommended:
```js
// In a React or similar application
import "@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css"
```
```html
```
### With Sass
When working with Sass:
```scss
@import "~@aurodesignsystem/design-tokens/dist/alaska/primitives--alaska.scss";
```
### JavaScript Usage
```js
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 `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 |
## Theme Scoping
Apply different themes using the `data-aag-theme` attribute:
```html
Alaska Airlines Content
Hawaiian Airlines Content
```
## Documentation
For comprehensive documentation, please see our:
- [Architecture Guide](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/architecture)
- [Theme Guide](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/themes)
- [Migration Guide](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/migration)
- [API Reference](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference)
- [Complete Documentation - Auro Docs](https://auro.alaskaair.com/getting-started/developers/design-tokens)
## Package Structure
The npm package provides pre-processed resources in the `./dist/` directory organized by theme.
## Contributing
Please read our [contributing guidelines](.github/CONTRIBUTING.md) 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](./LICENSE) file for details.