helix-front/client/theme.scss

@import '~@angular/material/theming';

// Include the common styles for Angular Material
@include mat-core();

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  line-height: $size;
  height: $size;
  width: $size;
}

// Customized palette designed by vivo
$hi-nuage: (
  50: #E0EFF6,
  100: #B3D6E9,
  200: #80BBDA,
  300: #4DA0CB,
  400: #268BC0,
  500: #0077B5,
  600: #006FAE,
  700: #0064A5,
  800: #005A9D,
  900: #00478D,
  A100: #B9D7FF,
  A200: #86BAFF,
  A400: #539DFF,
  A700: #3A8FFF,
  contrast: map-get($mat-indigo, contrast)
);

// Define the palettes for the theme using the Material Design palettes available in palette.scss
// For each palette, optionally specify a default, lighter, and darker hue.
$hi-primary: mat-palette($hi-nuage);
$hi-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$hi-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$hi-theme: mat-light-theme($hi-primary, $hi-accent, $hi-warn);

// Include theme styles for core and each component used in the app
@include angular-material-theme($hi-theme);

// Additional adjusts by vivo
.mat-toolbar {
  background-color: #fff;

  .mat-icon.secondary {
    vertical-align: bottom;
  }

  .mat-toolbar-row.information {
    height: 24px;
    margin-bottom: 24px;
  }
}