# 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 :

```scss
@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 :

```scss
@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 :

```typescript
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`.
