thingsboard/ui-ngx/src/theme.scss

/**
 * Copyright © 2016-2023 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use '@angular/material' as mat;
@import '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
@import './scss/constants';

// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();

$tb-primary-color: #305680;
$tb-secondary-color: #527dad;
$tb-hue3-color: #a7c1de;

$tb-dark-primary-color: #9fa8da;

$tb-mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: $tb-primary-color,
  600: $tb-secondary-color,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: $tb-hue3-color,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  )
);

$tb-primary: mat.define-palette($tb-mat-indigo);
$tb-accent: mat.define-palette(mat.$deep-orange-palette);

$background: (background: map_get(mat.$grey-palette, 200));

$tb-theme-background: map_merge(mat.$light-theme-background-palette, $background);

$tb-mat-theme: mat.define-light-theme(
    $tb-primary,
    $tb-accent
);

$tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background));

$primary: mat.get-color-from-palette($tb-primary);
$accent: mat.get-color-from-palette($tb-accent);

$tb-dark-mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: $tb-dark-primary-color,
  600: $tb-secondary-color,
  700: #303f9f,
  800: $tb-primary-color,
  900: #1a237e,
  A100: $tb-hue3-color,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: rgba(black, 0.87),
    500: map_get($tb-mat-indigo, 900),
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: rgba(black, 0.87),
    A700: rgba(black, 0.87),
  )
);

$tb-dark-primary: mat.define-palette($tb-dark-mat-indigo);

$tb-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($tb-dark-mat-indigo, 900),
  background: map_get($tb-dark-mat-indigo, 800),
  hover:      rgba(white, 0.04),
  card:       map_get($tb-dark-mat-indigo, 800),
  dialog:     map_get($tb-dark-mat-indigo, 800),
  disabled-button: rgba(white, 0.12),
  raised-button: map-get($tb-dark-mat-indigo, 50),
  focused-button: rgba(white, 0.12),
  selected-button: map_get($tb-dark-mat-indigo, 900),
  selected-disabled-button: map_get($tb-dark-mat-indigo, 800),
  disabled-button-toggle: black,
  unselected-chip: map_get($tb-dark-mat-indigo, 700),
  disabled-list-option: black,
  tooltip: map_get(mat.$grey-palette, 700),
);

@function get-tb-dark-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: mat.$dark-theme-foreground-palette,
    background: $tb-dark-theme-background,
  );
}

$tb-dark-theme: get-tb-dark-theme(
    $tb-dark-primary,
    $tb-accent
);

@mixin mat-fab-toolbar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  mat-fab-toolbar {
    .mat-fab-toolbar-background {
      background: mat.get-color-from-palette($background, app-bar);
      color: mat.get-color-from-palette($foreground, text);
    }
    &.mat-primary {
      .mat-fab-toolbar-background {
        background: mat.get-color-from-palette($primary);
        color: mat.get-color-from-palette($primary, default-contrast);
      }
    }
    &.mat-accent {
      .mat-fab-toolbar-background {
        background: mat.get-color-from-palette($accent);
        color: mat.get-color-from-palette($accent, default-contrast);
      }
    }
    &.mat-warn {
      .mat-fab-toolbar-background {
        background: mat.get-color-from-palette($warn);
        color: mat.get-color-from-palette($warn, default-contrast);
      }
    }
  }
}

@mixin _mat-toolbar-inverse-color($palette) {
  background: mat.get-color-from-palette($palette, default-contrast);
  color: rgba(black, 0.87);
}

@mixin mat-fab-toolbar-inverse-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, foreground);
  $foreground: map-get($theme, background);

  mat-fab-toolbar {
    .mat-fab-toolbar-background {
      background: mat.get-color-from-palette($background, app-bar);
      color: mat.get-color-from-palette($foreground, text);
    }
    &.mat-primary {
      .mat-fab-toolbar-background {
        @include _mat-toolbar-inverse-color($primary);
      }
    }
    mat-toolbar {
      &.mat-primary {
        @include _mat-toolbar-inverse-color($primary);
        button.mat-icon-button {
          mat-icon {
            color: mat.get-color-from-palette($primary);
          }
        }
      }
    }
    .mat-fab {
      &.mat-primary {
        background: mat.get-color-from-palette($primary, default-contrast);
        color: mat.get-color-from-palette($primary);
      }
    }
  }

}

@mixin tb-components-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);

  mat-toolbar{
    &.mat-hue-3 {
      background-color: mat.get-color-from-palette($primary, 'A100');
    }
  }

  @include mat-fab-toolbar-theme($tb-theme);

  div.tb-dashboard-page.mobile-app {
    @include mat-fab-toolbar-inverse-theme($tb-theme);
  }

  .same-color.mat-form-field-invalid {
    .mat-form-field-suffix {
      color: mat.get-color-from-palette($warn, text);
    }
  }
}

.tb-default {
  @include mat.all-legacy-component-themes($tb-theme);
  @include mat-datetimepicker-theme($tb-theme);
  @include tb-components-theme($tb-theme);
}

.tb-dark {
  @include mat.all-legacy-component-themes($tb-dark-theme);
}