# Alto Tokens

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/va1-a/alto-tokens/blob/main/LICENSE)

[Zeroheight Documentation](https://zeroheight.com/8d62898ee/p/179199-how-to-use-tokens)

## Overview

The @alto-avios/alto-tokens package contains design tokens for IAGL, generated using Style Dictionary to ensure consistent styles across applications for both web and app development.

This package includes pre-built tokens that can be easily integrated into your projects, with support for transforms, filters, and output formats using Style Dictionary. The generated tokens are placed in the dist/alto-tokens folder after build.

## Local Development

### Prerequisites

Before setting up the project, ensure you have the following installed on your local machine:

- **Node.js**: v20.11.1 (as recommended)
- **NPM**: Comes with Node.js
- **nvm**: (Optional, but recommended for managing Node versions)

### Build Tokens

To build tokens, use the following command:

`npm run build:tokens`

### Style Dictionary

We are using Style Dictionary v4 to handle the transformation and generation of the design tokens. Additionally, we utilize the @tokens-studio/sd-transforms package for advanced transformations.

For more information on how to work with Style Dictionary, refer to their documentation.

### Project Structure

`utils/`: Folder which stores the custom config, transforms, filters and formats.
`dist/`: Distribution folder where the generated tokens will be placed after the build process.
`raw-tokens/`: The exported json files from figma.

## Installation

To install the package, run

`npm i @alto-avios/alto-tokens`

Your newly generated tokens can be found in a folder named: `/dist`

## Fonts

Each brand has a fonts.css file containing brand-specific font-face definitions. You can import this file directly into your React or Next.js application to apply the correct fonts for each brand.

To use a brand's fonts in your project:

1. Ensure you’ve installed @alto-avios/alto-tokens as described above.

2. Import the fonts.css file for the brand you need:

`// Example for "aer-lingus" brand in a React component`
`import '@alto-avios/alto-tokens/web/aer-lingus/fonts.css';`

Replace "aer-lingus" with the desired brand, such as "british-airways", "vueling", etc.

### Requesting CORS Access

If you’re using these resources on a domain that is not currently allowed in our CORS policy, please contact us to request access. Provide the exact domains or subdomains that require access (e.g., https://storybook.design.dev.iagl.digital or https://stg.iagl.digital). We will add these domains to the S3 CORS policy to ensure seamless integration.

## Update

Check if an update exists:

`npm outdated`

If an update is available, update the package:

`npm update @alto-avios/alto-tokens`

## License

This project is licensed under the terms of the
[MIT license](/LICENSE).