nomulus/console-webapp/src/theme.scss

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

$secondary-color: #80868b;
$border-color: #dadce0;

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

// 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.elevation-classes();
@include mat.app-background();

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

.text-xl {
  font-size: 1.1rem;
}
.text-l {
  font-size: 1rem;
}

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

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

:root {
  --text: #5f6368;
  --primary: #4285f4;
  --lightest: #d2e3fc;
  --light-highlight: #e8eaed;
  --lightest-highlight: #f8f9fa;
  --secondary: #{$secondary-color};
  --border: #{$border-color};
  --mat-tree-node-text-font: "Google Sans Text";
  --mat-tree-node-text-size: 0.95rem;
  --mat-sidenav-container-width: 280px;
}

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

.primary-text {
  color: var(--primary);
}

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$blue-palette,
    ),
    typography: (
      plain-family: "Google Sans",
      brand-family: "Google Sans Text",
      bold-weight: 600,
    ),
  )
);

html {
  @include mat.all-component-themes($theme);
  @include mat.typography-hierarchy($typographyConfig);
  .field-small {
    @include mat.form-field-density(-3);
  }
}