[Feature]: Design Token Support for Custom application

[kpanot]

Context

As a Implementation team member I would like to be able to generate the CSS Variable and style metadata from customer Design Token file(s).
To be able to correctly (and comfortably) work with Design Token I should be able to:

• Regenerate automatically my CSS Variables on Design Token change
• Keep the Design Token source file versioned to be able to re-import them to a Figma file (based on the same version)

Proposal

Setup of Design Token into a Custom mono-repository

We will need to distinguish 2 cases:

• Add the Design Token support into an existing Custom mono-repository's Application
• Create a new Custom mono-repository's application with the Design Token Support

In both cases the result of adding the Design Token should result to the following updates:

• The (S)CSS file where the CSS Variables will be generated should be generated and should be imported (or merged) with the main CSS used to customize the application
• The build mechanism (of each application of the mono-repository) should include the CSS Variable Generation process and the Metadata generation process

CSS Template receiving the variable

To make sure to override the variable defined in the white-label (defined on :root), it will be mandatory to have a more restrained scope.
A possible solution is to have something like:

html {
/* --- BEGIN THEME Auto-generated --- */

/* --- END THEME Auto-generated --- */
}

CSS Generator configuration

To generate correctly the CSS Variables and the Metadata for the product, the generator will require 3 inputs:

• Design Token files (resulting of a Figma extraction from the airline)
• The Design Template file provided by the Application/library(ies)
• (Optional) Custom Design Token override provided in the customization)

Note

This may require to define a way for the Application/Library to provide the template file

This may result to the following process:

• Register the CSS generation task in the angular.json (using @03r/design builder)
• Providing the inputs of the builder according to Custom Application parameters
• Provide documentation regarding the way to expose the template file by the libraries and/or applications

Sub-versioning strategy

To be able to re-import the Design Token in the Figma board, the implementation team will need to be keep the Design Token Files in the Git repository.
This will result to the following tasks:

• Provide documentation to explain where the Design Token files should be put
• This documentation should be generated in the add of Design Token feature in a Custom App (or in a new generated App).
• The place where it is generated should be aligned with the configuration provided to the Design Builder