Design System & Tokens

Description

Elevate Web and it's components uses a Styling model based on a Design System that uses Design Tokens as a way of define the individual styles of such component in detail.

You can review the Web Component Design System definition Figma file and check the specific default Reels Design System styles, definition and token details created by the PD&A team.

Token usage

Extraction and Transformation

Elevate Web includes two separate npm scripts:

pnpm run token:fetch
pnpm run token:transform

In order to been able to execute the fetch script you need to have a .env.local file with PERSONAL_ACCESS_TOKEN and FILE_KEY defined

• PERSONAL_ACCESS_TOKEN is the Figma Personal Access token that you can create (the token must have at least the Read-only Variables scope selected)

• FILE_KEY is a comma separated list of files keys. The file key can be obtained from any Figma file URL: https://www.figma.com/file/{file_key}/{title}.

And a set of utilities based on Figma variable Rest API and Style-Dictionary transformation processes that will result in a set of CSS variables.

note

The result of the token:fetch script will be generated by default in the tokens/output folder

note

The result of the token:transform script will be generated by default in the src/theme/tokens/css folder

Extraction and Transformation using Github Actions

Elevate Web includes a workflow (figma_to_styles.yml) that will do the fetch and transformation and create a PR into the main repo based every time is executed. This is the Recommended way of work with token updates to ensure that everything is aligned.

You will need the following:

• FIGMA_TOKEN secret set in the repo
• execute it with a file_key value based on the files (comma separated) that your project uses (srv17kXqmJKrXsyEK44NYn,kcaiPKFPoGMOp8mV3AUIbD on Elevate Web).

Component usage

Once the tokens from the Design System are integrated into the application from the fetch & transform process, a component can use the CSS variables inside the CSS rules defined for the component as:

.button {
  font-family: var(--desktop-label-medium-font-family);
  font-size: var(--desktop-label-medium-font-size);
  font-weight: var(--desktop-label-medium-font-weight);
  letter-spacing: var(--desktop-label-medium-letter-spacing);
  line-height: var(--desktop-label-medium-line-height);
}

It is important to ensure that we are using the proper upper level, component, breakpoint size, etc specific token as the CSS variables are defined in a hierarchy mode but we need to use the specific ones so changes in some core styles only applies where needed.