Angular theme

The package is a library which contains all UI for initialize frontal applications.

Here are the necessary steps to use the Michelin theme module in your existing Angular project.

Usage

Internal with Artifactory : @michelin/theme External with NPM : @michelin/theme

1. Install Angular Material

Make sure @angular/material is correctly installed.

2. Install Michelin Theme

• Install Michelin maps npm i @michelin/theme

3. Include Michelin Theme style

Michelin theme is manage with Sass mixin, you can use this mixin like the following sample :

@use '@angular/material' as mat;
@import '@michelin/theme/theming';

$theme: mat-light-theme(
  (
    color: (
      primary: mat.m2-define-palette($mic-blue, A400, A100, A700),
      accent: mat.m2-define-palette($mic-yellow, A400, A100, A700),
      warn: mat.m2-define-palette($mic-red, A400, A100, A700)
    ),
    typography: $michelin-typography,
    density: 0
  )
);

@include design-system-theme($theme, true);

Note :

• All theme palette are customizable. The library provide some custom palettes like mic-blue, mic-red, mic-yellow and mic-grey.

• To use theme color in your component, it's necessary to declare one mixin per component. For example :

@import '@angular/material';

@mixin app-component-override($theme) {
  $accent: map-get($theme, accent);

  .accent {
    color: map-get($accent, A400);
  }
}

4. Include Michelin Theme modules

Michelin modules can be imported anywhere in the application

For example :

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import {
  AlertModule,
  LogoModule,
  NavbarModule,
  ScrollbarModule,
  SidebarModule,
  ThemeModule,
  MATERIAL_ICONS_DEFAULT_FONT,
  MaterialIconFonts
} from '@michelin/theme';
import { LayoutComponent } from './layout.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    SidebarModule,
    AlertModule,
    NavbarModule,
    LogoModule,
    ScrollbarModule,
    ThemeModule
  ],
  providers: [{ provide: MATERIAL_ICONS_DEFAULT_FONT, useValue: MaterialIconFonts.filled }],
  declarations: [LayoutComponent]
})
export class LayoutModule {}

Import the modules you need only !

You can configure the Material icons default font using the injection token MATERIAL_ICONS_DEFAULT_FONT.