Alto 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:
-
Ensure you’ve installed @alto-avios/alto-tokens as described above.
-
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.