UI: Enhancement for alarm severity colors

ui-ngx/src/app/shared/components/notification/notification.component.html

@@ -42,7 +42,7 @@
       <mat-icon>check_circle_outline</mat-icon>
     </button>
     <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM && !notification.info.cleared"
-         [style.background-color]="alarmColorSeverity(0.06)">
+         [style.background-color]="alarmColorSeverityBackground()">
       <span [style]="notificationIconColor()" class="severity">
         {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
       </span>

ui-ngx/src/app/shared/components/notification/notification.component.ts

@@ -24,7 +24,11 @@ import {
 } from '@shared/models/notification.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
-import { alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models';
+import {
+  alarmSeverityBackgroundColors,
+  alarmSeverityColors,
+  alarmSeverityTranslations
+} from '@shared/models/alarm.models';
 import tinycolor from 'tinycolor2';
 import { StateObject } from '@core/api/widget-api.models';
 import { objToBase64URI } from '@core/utils';
@@ -133,8 +137,8 @@ export class NotificationComponent implements OnInit {
     }
   }
 
-  alarmColorSeverity(alpha: number) {
+  alarmColorSeverityBackground() {
-    return tinycolor(alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
+    return alarmSeverityBackgroundColors.get(this.notification.info.alarmSeverity);
   }
 
   notificationColor(): string {

ui-ngx/src/app/shared/models/alarm.models.ts

@@ -88,11 +88,21 @@ export const alarmSearchStatusTranslations = new Map<AlarmSearchStatus, string>(
 
 export const alarmSeverityColors = new Map<AlarmSeverity, string>(
   [
-    [AlarmSeverity.CRITICAL, '#D12730'],
+    [AlarmSeverity.CRITICAL, 'var(--tb-alarm-severity-critical, rgb(209, 39, 48))'],
-    [AlarmSeverity.MAJOR, '#FEAC0C'],
+    [AlarmSeverity.MAJOR, 'var(--tb-alarm-severity-major, rgb(246, 103, 22))'],
-    [AlarmSeverity.MINOR, '#F2DA05'],
+    [AlarmSeverity.MINOR, 'var(--tb-alarm-severity-minor, rgb(250, 164, 5))'],
-    [AlarmSeverity.WARNING, '#F66716'],
+    [AlarmSeverity.WARNING, 'var(--tb-alarm-severity-warning, rgb(242, 218, 5))'],
-    [AlarmSeverity.INDETERMINATE, '#00000061']
+    [AlarmSeverity.INDETERMINATE, 'var(--tb-alarm-severity-indeterminate, rgba(0, 0, 0, 0.38))']
+  ]
+);
+
+export const alarmSeverityBackgroundColors = new Map<AlarmSeverity, string>(
+  [
+    [AlarmSeverity.CRITICAL, `var(--tb-alarm-severity-critical-bg, rgba(209, 39, 48, 0.06))`],
+    [AlarmSeverity.MAJOR, 'var(--tb-alarm-severity-major-bg, rgba(246, 103, 22, 0.06))'],
+    [AlarmSeverity.MINOR, 'var(--tb-alarm-severity-minor-bg, rgba(250, 164, 5, 0.06))'],
+    [AlarmSeverity.WARNING, 'var(--tb-alarm-severity-warning-bg, rgba(242, 218, 5, 0.06))'],
+    [AlarmSeverity.INDETERMINATE, 'var(--tb-alarm-severity-indeterminate-bg, rgba(0, 0, 0, 0.06))']
   ]
 );