@yuuvis/material

yuuvis Momentum component library based on Angular Material.

Theming in Consumer Apps

According to Angular Material it is possible to customize the theme in 2 categories: Color and Typography.

Setup Material Color Palette

Generate Material Color Palette with your seed colors: ng generate @angular/material:theme-color.

Include Theme Mixin

Include that mixin before loading @include ymt.global-styles()in the styles.scss of your project with your new colors and typography values.

Only add the color palettes and typography settings that you want to change. If only the primary palette changes, only add this palette.

$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,
    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:
Note: You may have noticed that the generator won't output palettes for success & warning by default. These are custom palettes added by yuuvis. To customize them with your new seed colors for success and warning just put them in prompt of the generator. After that copy/paste them over.

Overriding Material System Token (mat-sys)

In Order to override the Material System Tokens, add a second parameter in the theme mixin.

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

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

Overriding Yuuvis Material Token (ymt)

On top of that you may want to customize some of our ymt token that mostly references mat-sys token under the hood:

@include ymt.token-overrides((
    brand: green,
    surface: white
));

NOTE: Just including ymt.token-overrides() without any surrounding CSS selector, CSS variables will be created under :root{}

License: MIT