Theming in the shell

Note

All theming takes place in your shell Client. The shell Client integrates multiple shell Applications, and each of them automatically receives the theming adjustments defined at shell level.

It is therefore crucial to also use the provided tokens consistently inside your shell Applications — only then will they properly react to the global theming.

Theming in our system exclusively refers to the definition of colors and typography, as provided by Angular Material. Other areas such as density adjustments, which are mentioned in the Angular Material documentation, are not supported in our setup.

It is important to clearly distinguish theming from overrides:

• Theming updates token values according to defined color palettes and typography configurations.
• Overrides are semantic reassignments of tokens (Material System Tokens or Ymt Tokens). They allow for adjustments but are no longer considered classic theming.

Colors

Color palettes are generated with the Material Generator. The Angular CLI provides the following command:

ng generate @angular/material:theme-color

Note

By default, the generator does not create palettes for success and warning. These are specific extensions introduced by yuuvis.

To create custom palettes for them, provide the desired seed colors for success and warning in the generator prompt. The generated palettes can then be copy/pasted into your status color theme configuration.

In the global stylesheet of your shell client:

styles.scss

@use '@yuuvis/material/scss' as ymt;

$new-palettes: (
  primary: (generated values),
  secondary: (generated values),
  tertiary: (generated values),
  neutral: (generated values),
  neutral-variant: (generated values),
  error: (generated values),
  success: (generated values),
  warning: (generated values),
);

$new-theme: (
  color: $new-palettes
);

// adjust theme before loading global styles
@include ymt.theme($new-theme);
@include ymt.global-styles();

Typography

styles.scss

@use '@yuuvis/material/scss' as ymt;

$new-theme: (
  typography: (
      plain-family: Helvetica,
      brand-family: Helvetica,
      bold-weight: 700,
      medium-weight: 500,
      regular-weight: 400
  )
);

// adjust theme before loading global styles
@include ymt.theme($new-theme);
@include ymt.global-styles();

Note

When using custom fonts, make sure they are properly embedded (e.g., via CSS @font-face or through a web font service like Google Fonts).

Overrides

Overrides are semantic reassignments of tokens and are not considered classic theming. There are three relevant levels:

• Material System Token Overrides – adjustments to Material System Tokens
• Material Component Token Overrides – adjustments to Material Component Tokens
• YMT System Token Overrides – adjustments to the custom YMT Tokens

Material System Token

styles.scss

@use '@yuuvis/material/scss' as ymt;

$new-mat-sys-token-overrides: (
  'outline': black
);

@include ymt.theme((), $new-mat-sys-token-overrides);
@include ymt.global-styles();

Material Component Token

styles.scss

@use '@yuuvis/material/scss' as ymt;

@include ymt.global-styles();
@include mat.card-overrides((
  elevated-container-color: red,
  title-text-size: 2rem
));

Ymt System Token

styles.scss

@use '@yuuvis/material/scss' as ymt;

@include ymt.global-styles();
@include ymt.token-overrides((
  brand: mediumpurple,
  surface-app: lavender
));