PolarisTypography → Tokens
Primitive font scales
The primitive font scales have five key token sets:
- Font Family
- Font Weight
- Letter Spacing
- Font Size
- Line Height
Token structure
The font size and line height token scales adhere to the convention of the size token scale, which translates to pixel values. On the other hand, the font weight and letter spacing scales adopt a contextual approach that is more appropriate for their design requirements.
Semantic text tokens
Polaris introduced a new layer of semantic text tokens that reference the primitive font scales. These semantic tokens create a streamlined approach that enhances consistency and facilitates the assembly of Text variants. By aligning semantic text tokens with the respective font scales, a composite solution is achieved, directly mapping to the various variants available within the Text component.
Token structure
These semantically-routed composite building blocks include properties such as font size, line height, font weight, letter spacing, and font family, and allow for a comprehensive and customizable typographic experience.
How to apply tokens
Polaris React
The Text component provides a variant prop that seamlessly applies font token styling specific to the selected variant, ensuring consistency. Alternatively, when markup access is limited, semantic text tokens offer flexibility for styling elements.
Polaris also exposes font scales in the token styles.css file, allowing users to create custom variants. Using the Text component, semantic (composite) text tokens, and font scales, builders receive both flexibility and system synchronicity.
