engie-fluid-material-theme

Installation guide

This library provides a Material Theme giving to an application an appearance similar to ENGIE's Fluid Design System.

⚠️ This theme is not perfectly similar to Fluid Design System

Pre requisite

Assuming that you have installed Material components (^18) and the Fluid Design System:

@engie-group/fluid-design-system
@angular/material

Installation

1. Install this package:

npm install --save engie-fluid-material-theme

2. Reference theme file by adding it in styles array in angular.json.

With default style and fluid-design-system declaration, your file should seems to the following

  "styles": [
    "src/styles.scss",
    "node_modules/@engie-group/fluid-design-tokens/lib/css/tokens.css",
    "node_modules/@engie-group/fluid-design-system/lib/fluid-design-system.css",
    "node_modules/engie-fluid-material-theme/dist/index.css"
  ]

3. Load material theme in the main styles.scss file:

@use 'sass:map';
@use 'engie-fluid-material-theme/dist/m3-theme';
@use '@angular/material' as mat;

@include mat.core;

body {
  /*
  
  */

  @include mat.all-component-themes(m3-theme.$light-theme);

  .error-button {
    @include mat.button-color(m3-theme.$light-theme, $color-variant: error);
  }

  .seconday-button {
    @include mat.button-color(m3-theme.$light-theme, $color-variant: secondary);
  }

  &[data-theme="dark"] {
    @include mat.all-component-colors(m3-theme.$dark-theme);
  }
}

4. Configure default material components behavior by importing two providers on your app.config.

• Remove globaly the ripple effect
• 'Outline' appearance for all formfields

{ provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true} },
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'dynamic'}}

Usage

This library is designed so that the default Material components have an appearance similar to Fluid components.

Here few samples:

Form field:

<mat-form-field>
  <mat-label>label</mat-label>
  <input matInput/>
</mat-form-field>

Radio

<mat-radio-button (change)="valueChange()" [checked]="true">Label</mat-radio-button>

Button

<button mat-flat-button (click)="buttonClick()">Button</button>
<button mat-stroked-button (click)="buttonClick()">Button</button>
<button mat-button (click)="buttonClick()">Button</button>

In cases where color variations are needed, it is necessary to add a CSS class.

Button .seconday-button, .error-button

Chip .teal, .orange, .blue, .lime, .yellow

Badge .badge, .badge.information, .badge.discovery, .badge.success, .badge.warning, .badge.danger

Library developper Guide

Theme's code source is located in src folder.

1. Generate a dist folder with packaged css file.

C:\Users\GAIA\source\repos\fluid-material-theme>npm run build 

2. Publish package on public NPM, don't forget to increment version in package.json:

C:\Users\GAIA\source\repos\fluid-material-theme>npm run publish 

3. Run linter

C:\Users\GAIA\source\repos\fluid-material-theme>npm run qa:scss 

On /test folder, you can find an Angular web app which allow to visualize effects of the theme. In developement phase, you can edit the theme, regenerate the build and test it directly on the web app.

C:\Users\GAIA\source\repos\fluid-material-theme>npm run build

C:\Users\GAIA\source\repos\fluid-material-theme\test>npm start