Using Tokens

Tokens in Shell Applications

1. Make sure that the global styles are included globally in your Angular project:

   styles.scss

   @use '@yuuvis/material/scss' as ymt;
   @include ymt.global-styles();

   Note

   When setting up with the CLI, this is already configured automatically.

2. Tokens are available in the frontend as CSS variables with the prefix --ymt-*.
   They can be applied (see Token Usage Guidelines) directly inside components, for example:

   example.component.css

   .my-call-to-action {
      background: var(--ymt-primary);
      color: var(--ymt-on-primary);
      border-radius: var(--ymt-corner-m);
      padding: var(--ymt-spacing-m);
   }

   Note

   How tokens can be configured or overridden at project level is described in Theming.

   By including ymt.global-styles(); alongside tokens, additional global styles (e.g., resets, styles for html native elements) are also provided to ensure consistency across all Shell Applications.

Tokens in Figma

yuuvis® Token in Figma

Design tokens are consumed in Figma through two mechanisms:

• Typography tokens → Text Styles (from the Token library)
• All other tokens → Figma Variables (colors, numbers, opacity, radii, spacing, etc.)

Do

Use semantic tokens — whenever possible avoid using raw values.

Don’ts

• Don’t detach styles or replace variable bindings with raw values.
• Don’t repurpose tokens (see Token Usage Guidelines).

yuuvis® Token Figma Library

Available Figma Design libraries. This chapter focuses on the yuuvis® Token library only.

The token library contains three variable collections:

• yuuvis® Standard Theme Token Reference tokens (e.g., color palettes, typography core values). They are internal building blocks used to compose Material and Ymt tokens and are not for direct use in design files.

• Material System Token The Material System tokens as actually themed/overridden for yuuvis®. They document the configured Material baseline that our system runs on.

• Ymt Token The public system tokens you use in design files.

Note

Tokens from both the Ymt Token and the Material System Token collections are also consumed by yuuvis® material components and yuuvis® components.

Add to new design file

1. Create the file
   In Figma, create a new design file in team yuuvis®.

2. Enable the libraries
   Open Assets → Library (book icon) and add yuuvis® Token.