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

$3

Make sure @angular/material is correctly installed.

$3

- Install Michelin maps npm i @michelin/theme

$3

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);
}
}
`

$3


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