@michelin-org/theme
v4.4.2
Published
The package contains Michelin theme, colors and all design system guide lines.
Downloads
4
Readme
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 : @michelin/theme
External : @michelin-org/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 :
@import '@michelin/theme/theming';
$theme: mat-light-theme(
(
color: (
primary: mat-palette($mic-blue, A400, A100, A700),
accent: mat-palette($mic-purple, A400, A100, A700),
warn: mat-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-purple
andmic-grey
.To use theme color in your component, it's necessary to declare one mixin per component. For example :
@import '@angular/material/theming';
@mixin app-component-override($theme) {
$accent: map-get($theme, accent);
.accent {
color: mat-color($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
.