Figma Tokens Integration

Explain the use of Figma tokens in the App's theme.

Figma tokens allow us to manage different aspects of the App's theme, integrating via pull requests the changes made in the token JSON files on Figma.

Every Linker-based repository has a Github Action to convert these JSON files into ts files that contain the different token objects with the following supported tokens: Colors, Spacing, Text Sizing, Borders, Radius, Opacity, and Shadow.

Tokens are organized in three different files:

• GeneralTokens.ts: These tokens contain everything related to text sizing and weight, spacing, radius, borders, and opacity.

• LightTokens.ts: Contains colors and shadows for the Light Theme.

• DarkTokens.ts: Contains colors and shadows for the Dark Theme.

General Tokens

radius: Used to define the borderRadius attribute in the styling.

border: Used to define the borderWidth attribute in the styling.

spacing: Used to define padding and margin attributes in the styling.

The scale used for radius, border, and spacing is xs: Extra Small, sm: Small, md: Medium, lg: Large, xl: Extra Large.

opacity: Used to define the opacity attribute in the styling.

Define an opacity value for each use case. Current use case: backdrop.

text: Contains dynamic sub-objects for each component that have text, used to define the fontSize and fontWeight attributes in the Text styling.

Currently defined text tokens:

• button for the Button atom component.

• input for the Input atom component.

• checkbox for the Checkbox atom component.

• heading for the Heading atom component.

• body for the BodyText atom component.

• badge for the Badge atom component.

The scale used for text sizes in the heading and body objects are '100', '200', '300', '400', and '500'. For the rest, a single value without scale is assigned.

Light/Dark Tokens

These tokens should have an equivalent structure, since the intention is to easily support theme switching between light and dark.

color: Used to define the backgroundColor color attributes in the styling.

The color object has the following categories:

• actions: Primary, secondary, tertiary

• text: Button, heading, body

• functional: Success, warning, alert

• surface

shadow: Used to define shadowColor, shadowOpacity, shadowOffset, shadowRadius, and elevation attributes in the styling.

The scale used for color is '100', '200', '300', '400', '500'.

The scale used for shadow is '100', '200', '300', '400', '500'.