nomulus/console-webapp/src/theme.scss

@use "sass:map";
@use "sass:math";
@use "@angular/material" as mat;

$secondary-color: #80868b;
$border-color: #dadce0;
$hue-undefined: "undefined";
$blue-palette: (
  50: #e8f0fe,
  100: #d2e3fc,
  200: #aecbfa,
  300: #8ab4f8,
  400: #669df6,
  500: #4285f4,
  600: #1a73e8,
  700: #1967d2,
  800: #185abc,
  900: #174ea6,
  A100: $hue-undefined,
  A200: $hue-undefined,
  A400: $hue-undefined,
  A700: $hue-undefined,
  contrast: (
    50: #174ea6,
    100: #174ea6,
    200: #174ea6,
    300: #174ea6,
    400: #174ea6,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: $hue-undefined,
    A200: $hue-undefined,
    A400: $hue-undefined,
    A700: $hue-undefined,
  ),
);

@function rem($valueInPixels, $rootbase: 16px) {
  @return math.div($valueInPixels, $rootbase) * 1rem;
}

/** Copied from docs section **/

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

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

/** 
** Application specific section - Global styles and mixins
**/

$theme-primary: mat.define-palette($blue-palette);

$typographyConfig: mat.define-typography-config(
  $headline-1:
    mat.define-typography-level(
      rem(29px),
      rem(36px),
      500,
      "Google Sans",
      normal
    ),
  $headline-4:
    mat.define-typography-level(
      rem(28px),
      rem(36px),
      500,
      "Google Sans",
      normal
    ),
  $headline-5:
    mat.define-typography-level(
      rem(20px),
      rem(28px),
      400,
      "Google Sans",
      normal
    ),
  $headline-6:
    mat.define-typography-level(rem(16px), rem(2px), 500, "Google Sans", normal),
  $body-1:
    mat.define-typography-level(
      rem(16px),
      rem(24px),
      400,
      "Google Sans Text",
      normal
    ),
  $body-2:
    mat.define-typography-level(
      rem(14px),
      rem(20px),
      400,
      "Google Sans Text",
      normal
    ),
  $caption:
    mat.define-typography-level(
      rem(14px),
      rem(24px),
      400,
      "Google Sans",
      0.15px
    ),
  $overline:
    mat.define-typography-level(rem(14px), rem(20px), 500, "Google Sans", 0.5px),
);

@include mat.typography-hierarchy($typographyConfig);
@mixin form-field-density($density) {
  $field-typography: mat.define-typography-config(
    $body-1: mat.define-typography-level(12px, 24px, 400),
  );
  @include mat.typography-level($field-typography, "body-1");
  @include mat.form-field-density($density);
}

// Define lowest possible density class to be used in application
// In the same manner -1...-5 classes can be defined
.mat-form-field-density-5 {
  @include form-field-density(-5);
}

/** 
** Light theme
**/
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-primary,
      warn: $theme-warn,
    ),
    density: 0,
    typography: $typographyConfig,
  )
);

// Access and define a class with secondary color exposed
.secondary-text {
  color: $secondary-color;
}

.text-xl {
  font-size: 18px;
}
.text-l {
  font-size: 16px;
}

mat-row:nth-child(odd) {
  background-color: var(--lightest-highlight);
}

mat-row:hover {
  background-color: $border-color;
}

:root {
  --text: #5f6368;
  --primary: #{mat.get-color-from-palette($blue-palette, 500)};
  --lightest: #{mat.get-color-from-palette($blue-palette, 100)};
  --light-highlight: #e8eaed;
  --lightest-highlight: #f8f9fa;
  --secondary: #{$secondary-color};
  --border: #{$border-color};
}

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