Alto Tokens

Zeroheight Documentation

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.