Merge remote-tracking branch 'origin/accessibility-refactor' into dmp-refactoring

# Conflicts:
#	frontend/src/app/core/core-service.module.ts
#	frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
#	frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
#	frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts
#	frontend/src/app/ui/description/editor/description-editor.component.html
#	frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html
#	frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts
#	frontend/src/app/ui/description/listing/filtering/description-filter.component.html
#	frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html
#	frontend/src/app/ui/description/overview/description-overview.component.html
#	frontend/src/app/ui/description/overview/description-overview.component.scss
#	frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
#	frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts
#	frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
#	frontend/src/app/ui/plan/overview/plan-overview.component.html
#	frontend/src/app/ui/plan/overview/plan-overview.component.scss
#	frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html

backend/core/src/main/java/org/opencdmp/commons/types/tenantconfiguration/CssColorsTenantConfigurationEntity.java

@@ -2,9 +2,7 @@ package org.opencdmp.commons.types.tenantconfiguration;
 
 public class CssColorsTenantConfigurationEntity {
 	private String primaryColor;
-	private String primaryColor2;
-	private String primaryColor3;
-	private String secondaryColor;
+	private String cssOverride;
 
 	public String getPrimaryColor() {
 		return primaryColor;
@@ -14,27 +12,11 @@ public class CssColorsTenantConfigurationEntity {
 		this.primaryColor = primaryColor;
 	}
 
-	public String getPrimaryColor2() {
-		return primaryColor2;
+	public String getCssOverride() {
+		return cssOverride;
 	}
 
-	public void setPrimaryColor2(String primaryColor2) {
-		this.primaryColor2 = primaryColor2;
-	}
-
-	public String getPrimaryColor3() {
-		return primaryColor3;
-	}
-
-	public void setPrimaryColor3(String primaryColor3) {
-		this.primaryColor3 = primaryColor3;
-	}
-
-	public String getSecondaryColor() {
-		return secondaryColor;
-	}
-
-	public void setSecondaryColor(String secondaryColor) {
-		this.secondaryColor = secondaryColor;
+	public void setCssOverride(String cssOverride) {
+		this.cssOverride = cssOverride;
 	}
 }

backend/core/src/main/java/org/opencdmp/model/builder/tenantconfiguration/CssColorsTenantConfigurationBuilder.java

@@ -44,9 +44,7 @@ public class CssColorsTenantConfigurationBuilder extends BaseBuilder<CssColorsTe
         for (CssColorsTenantConfigurationEntity d : data) {
             CssColorsTenantConfiguration m = new CssColorsTenantConfiguration();
             if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._primaryColor))) m.setPrimaryColor(d.getPrimaryColor());
-            if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._primaryColor2))) m.setPrimaryColor2(d.getPrimaryColor2());
-            if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._primaryColor3))) m.setPrimaryColor3(d.getPrimaryColor3());
-            if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._secondaryColor))) m.setSecondaryColor(d.getSecondaryColor());
+            if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._cssOverride))) m.setCssOverride(d.getCssOverride());
             models.add(m);
         }
         this.logger.debug("build {} items", Optional.of(models).map(List::size).orElse(0));

backend/core/src/main/java/org/opencdmp/model/persist/tenantconfiguration/CssColorsTenantConfigurationPersist.java

@@ -16,12 +16,8 @@ import java.util.List;
 public class CssColorsTenantConfigurationPersist {
 	private String primaryColor;
 	public static final String _primaryColor = "primaryColor";
-	private String primaryColor2;
-	public static final String _primaryColor2 = "primaryColor2";
-	private String primaryColor3;
-	public static final String _primaryColor3 = "primaryColor3";
-	private String secondaryColor;
-	public static final String _secondaryColor = "secondaryColor";
+	private String cssOverride;
+	public static final String _cssOverride = "cssOverride";
 
 	public String getPrimaryColor() {
 		return primaryColor;
@@ -31,32 +27,14 @@ public class CssColorsTenantConfigurationPersist {
 		this.primaryColor = primaryColor;
 	}
 
-	public String getPrimaryColor2() {
-		return primaryColor2;
+	public String getCssOverride() {
+		return cssOverride;
 	}
 
-	public void setPrimaryColor2(String primaryColor2) {
-		this.primaryColor2 = primaryColor2;
+	public void setCssOverride(String cssOverride) {
+		this.cssOverride = cssOverride;
 	}
 
-	public String getPrimaryColor3() {
-		return primaryColor3;
-	}
-
-	public void setPrimaryColor3(String primaryColor3) {
-		this.primaryColor3 = primaryColor3;
-	}
-
-	public String getSecondaryColor() {
-		return secondaryColor;
-	}
-
-	public void setSecondaryColor(String secondaryColor) {
-		this.secondaryColor = secondaryColor;
-	}
-
-
-
 	@Component(CssColorsTenantConfigurationPersist.CssColorsTenantConfigurationPersistValidator.ValidatorName)
 	@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
 	public static class CssColorsTenantConfigurationPersistValidator extends BaseValidator<CssColorsTenantConfigurationPersist> {
@@ -80,16 +58,7 @@ public class CssColorsTenantConfigurationPersist {
 			return Arrays.asList(
 					this.spec()
 							.must(() -> !this.isEmpty(item.getPrimaryColor()))
-							.failOn(CssColorsTenantConfigurationPersist._primaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor}, LocaleContextHolder.getLocale())),
-					this.spec()
-							.must(() -> !this.isEmpty(item.getPrimaryColor2()))
-							.failOn(CssColorsTenantConfigurationPersist._primaryColor2).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor2}, LocaleContextHolder.getLocale())),
-					this.spec()
-							.must(() -> !this.isEmpty(item.getPrimaryColor3()))
-							.failOn(CssColorsTenantConfigurationPersist._primaryColor3).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor3}, LocaleContextHolder.getLocale())),
-					this.spec()
-							.must(() -> !this.isEmpty(item.getSecondaryColor()))
-							.failOn(CssColorsTenantConfigurationPersist._secondaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._secondaryColor}, LocaleContextHolder.getLocale()))
+							.failOn(CssColorsTenantConfigurationPersist._primaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor}, LocaleContextHolder.getLocale()))
 			);
 		}
 	}

backend/core/src/main/java/org/opencdmp/model/tenantconfiguration/CssColorsTenantConfiguration.java

@@ -3,12 +3,9 @@ package org.opencdmp.model.tenantconfiguration;
 public class CssColorsTenantConfiguration {
 	private String primaryColor;
 	public static final String _primaryColor = "primaryColor";
-	private String primaryColor2;
-	public static final String _primaryColor2 = "primaryColor2";
-	private String primaryColor3;
-	public static final String _primaryColor3 = "primaryColor3";
-	private String secondaryColor;
-	public static final String _secondaryColor = "secondaryColor";
+
+	private String cssOverride;
+	public static final String _cssOverride = "cssOverride";
 
 	public String getPrimaryColor() {
 		return primaryColor;
@@ -18,27 +15,11 @@ public class CssColorsTenantConfiguration {
 		this.primaryColor = primaryColor;
 	}
 
-	public String getPrimaryColor2() {
-		return primaryColor2;
+	public String getCssOverride() {
+		return cssOverride;
 	}
 
-	public void setPrimaryColor2(String primaryColor2) {
-		this.primaryColor2 = primaryColor2;
-	}
-
-	public String getPrimaryColor3() {
-		return primaryColor3;
-	}
-
-	public void setPrimaryColor3(String primaryColor3) {
-		this.primaryColor3 = primaryColor3;
-	}
-
-	public String getSecondaryColor() {
-		return secondaryColor;
-	}
-
-	public void setSecondaryColor(String secondaryColor) {
-		this.secondaryColor = secondaryColor;
+	public void setCssOverride(String cssOverride) {
+		this.cssOverride = cssOverride;
 	}
 }

backend/core/src/main/java/org/opencdmp/service/tenantconfiguration/TenantConfigurationServiceImpl.java

@@ -238,9 +238,7 @@ public class TenantConfigurationServiceImpl implements TenantConfigurationServic
         CssColorsTenantConfigurationEntity data = new CssColorsTenantConfigurationEntity();
         if (persist == null) return data;
         data.setPrimaryColor(persist.getPrimaryColor());
-        data.setPrimaryColor2(persist.getPrimaryColor2());
-        data.setPrimaryColor3(persist.getPrimaryColor3());
-        data.setSecondaryColor(persist.getSecondaryColor());
+        data.setCssOverride(persist.getCssOverride());
         return data;
     }
 

frontend/angular.json

@@ -26,8 +26,8 @@
 						],
 						"styles": [
 							"node_modules/bootstrap/dist/css/bootstrap.min.css",
-							"src/styles.scss",
 							"src/assets/scss/material-dashboard.scss",
+							"src/styles.scss",
 							"node_modules/cookieconsent/build/cookieconsent.min.css"
 						],
 						"scripts": [
@@ -113,8 +113,8 @@
 						"tsConfig": "src/tsconfig.spec.json",
 						"scripts": [],
 						"styles": [
-							"src/styles.scss",
                             "src/assets/scss/material-dashboard.scss",
+							"src/styles.scss",
 							"node_modules/tinymce/tinymce.min.js"
 						],
 						"assets": [

frontend/package.json

@@ -18,11 +18,12 @@
     "@angular/compiler": "^18.0.2",
     "@angular/core": "^18.0.2",
     "@angular/forms": "^18.0.2",
-    "@angular/material-moment-adapter": "^18.0.2",
+    "@angular/material-moment-adapter": "^18.2.7",
     "@angular/platform-browser": "^18.0.2",
     "@kolkov/angular-editor": "^2.1.0",
     "@mat-datetimepicker/core": "^13.0.2",
     "@mat-datetimepicker/moment": "^13.0.2",
+    "@material/material-color-utilities": "^0.3.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "@swimlane/ngx-datatable": "^20.1.0",
@@ -53,11 +54,11 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.0.3",
-    "@angular/cdk": "^18.0.2",
+    "@angular/cdk": "^18.2.7",
     "@angular/cli": "18.0.3",
     "@angular/compiler-cli": "^18.0.2",
     "@angular/language-service": "^18.0.2",
-    "@angular/material": "^18.0.2",
+    "@angular/material": "^18.2.7",
     "@angular/platform-browser-dynamic": "^18.0.2",
     "@angular/router": "^18.0.2",
     "@types/dragula": "^3.7.5",

frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html

@@ -8,16 +8,16 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto " *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
+					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -41,7 +41,7 @@
 							</div>
 							<div class="col-12 mt-1">
 								<div class="container-fluid">
-									<div class="row">
+									<div class="row gap-1-rem">
 										<div class="col-12">
 											<mat-form-field class="w-100">
 												<input matInput placeholder="{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.LABEL' | translate}}" [formControl]="formGroup.get('label')" required>
@@ -52,7 +52,7 @@
 										<div class="col-12">
 											<mat-form-field class="w-100">
 												<mat-label>{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
-													<mat-select [formControl]="formGroup.get('internalStatus')">
+													<mat-select [formControl]="formGroup.get('internalStatus')" required>
 														<mat-option *ngFor="let internalStatus of internalStatusEnum" [value]="internalStatus">{{enumUtils.toInternalStatusString(internalStatus)}}</mat-option>
 														<mat-option [value]="null">{{'ANNOTATION-SERVICE.STATUS-EDITOR.DEFAULT-VALUE.NONE' | translate}}</mat-option>
 													</mat-select>

frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts

@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
 import { IsActive } from '@notification-service/core/enum/is-active.enum';
 import { nameof } from 'ts-simple-nameof';
 import { StatusFilter } from '@annotation-service/core/query/status.lookup';
 import { InternalStatus } from '@annotation-service/core/enum/internal-status.enum';
 import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/enum-utils.service';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-status-listing-filters',
@@ -12,7 +13,7 @@ import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/
 	styleUrls: ['./status-listing-filters.component.scss']
 })
 export class StatusListingFiltersComponent extends BaseComponent implements OnInit, OnChanges {
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	@Input() readonly filter: StatusFilter;
 	@Output() filterChange = new EventEmitter<StatusFilter>();
 	internalStatusEnumValues = this.enumUtils.getEnumValues<InternalStatus>(InternalStatus)
@@ -23,6 +24,7 @@ export class StatusListingFiltersComponent extends BaseComponent implements OnIn
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: AnnotationServiceEnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html

@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditStatus)"
 						[routerLink]="routerUtils.generateUrl(['/annotation-statuses/new'])">
 						<mat-icon>add</mat-icon>
@@ -76,7 +76,7 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">

frontend/src/app/app.component.html

@@ -1,20 +1,23 @@
-<div class="wrapper" *ngIf="!showOnlyRouterOutlet">
+<div [class.accessibility-theme]="fontService.isLargeText()">
+    <ngx-guided-tour *ngIf="!showOnlyRouterOutlet"
+        [skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
+        [nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
+    ></ngx-guided-tour>
+    <button class="skip-to-main-content" (click)="skipToMain()" tabindex="0">{{'ALT-TEXT.SKIP-TO-MAIN-CONTENT' | translate}}</button>
+    <div id="cookies-consent"></div>
+    <div class="wrapper" *ngIf="!showOnlyRouterOutlet">
         <app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
         <mat-sidenav-container fullscreen class="main-container">
             <mat-sidenav #sidenav mode="side" opened class="sidenav" [fixedInViewport]="true" [fixedTopGap]="80">
                 <app-sidebar></app-sidebar>
             </mat-sidenav>
             <mat-sidenav-content class="sidenav-content">
-			<div id="main-page">
+                <div id="main-page" tabindex="0">
                     <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
                 </div>
             </mat-sidenav-content>
         </mat-sidenav-container>
+    </div>
+    <app-notification *ngIf="!showOnlyRouterOutlet"></app-notification>
+    <router-outlet *ngIf="showOnlyRouterOutlet"></router-outlet>
 </div>
-<app-notification *ngIf="!showOnlyRouterOutlet"></app-notification>
-<router-outlet *ngIf="showOnlyRouterOutlet"></router-outlet>
-
-<ngx-guided-tour *ngIf="!showOnlyRouterOutlet"
-	[skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
-	[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
-></ngx-guided-tour>

frontend/src/app/app.component.scss

@@ -23,6 +23,12 @@
 	opacity: 1;
 }
 
+@media (max-width: 500px) {
+    .sidenav {
+        width: 100% !important;
+    }
+}
+
 .sidenav-content {
 	background-color: whitesmoke;
 }
@@ -35,3 +41,15 @@
 ::ng-deep .mat-chip {
   height: auto !important;
 }
+
+.skip-to-main-content {
+    position: fixed;
+    left: -190px;
+    z-index: -1;
+   &:focus, &:active {
+        background-color: var(--sys-primary);
+        z-index: 1001;
+        left: 50vw;
+        color: var(--sys-on-primary);
+   } 
+}

frontend/src/app/app.component.ts

@@ -1,7 +1,7 @@
 
 import { of as observableOf, Subscription } from 'rxjs';
 
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, computed, HostBinding, OnInit, Signal, signal, ViewChild } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { filter, map, switchMap } from 'rxjs/operators';
@@ -20,6 +20,7 @@ import { TimezoneService } from './core/services/timezone/timezone-service';
 import { BreadcrumbService } from './ui/misc/breadcrumb/breadcrumb.service';
 import { TenantHandlingService } from './core/services/tenant/tenant-handling.service';
 import { MatIconRegistry } from '@angular/material/icon';
+import { FontAccessibilityService } from './core/services/font-accessibility.service';
 
 
 declare const gapi: any;
@@ -40,6 +41,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 	cssConfigLoaded = false;
 
 	@ViewChild('sidenav') sidenav: MatSidenav;
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	constructor(
 		private router: Router,
@@ -59,6 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 		private breadcrumbService: BreadcrumbService,
 		private sanitizer: DomSanitizer,
 		public iconRegistry: MatIconRegistry,
+        protected fontService: FontAccessibilityService
 	) {
 		this.initializeServices();
 		this.matomoService.init();
@@ -134,6 +137,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 						if (child.snapshot.data && child.snapshot.data.showOnlyRouterOutlet) {
 							this.showOnlyRouterOutlet = true;
 							this.ccService.getConfig().enabled = false;
+                            this.ccService.getConfig().container = document.getElementById('cookies-consent');
 							this.ccService.destroy();
 							this.ccService.init(this.ccService.getConfig());
 						} else {
@@ -143,6 +147,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 							} else {
 								this.ccService.getConfig().enabled = true;
 							}
+                            this.ccService.getConfig().container = document.getElementById('cookies-consent');
 							this.ccService.destroy();
 							this.ccService.init(this.ccService.getConfig());
 						}
@@ -261,5 +266,9 @@ export class AppComponent implements OnInit, AfterViewInit {
 	toggleNavbar(event) {
 		document.getElementById('hamburger').classList.toggle("change");
 	}
+
+    skipToMain() {
+        document.getElementById('main-page')?.focus();
+    }
 }
 

frontend/src/app/core/core-service.module.ts

@@ -1,4 +1,8 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard';
+import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
+import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
+import { FilterService } from '@common/modules/text-filter/filter-service';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthGuard } from './auth-guard.service';
 import { AuthService } from './services/auth/auth.service';
@@ -6,53 +10,51 @@ import { ContactSupportService } from './services/contact-support/contact-suppor
 import { CultureService } from './services/culture/culture-service';
 import { LanguageInfoService } from './services/culture/language-info-service';
 import { DashboardService } from './services/dashboard/dashboard.service';
+import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service';
 import { DepositService } from './services/deposit/deposit.service';
+import { DescriptionStatusService } from './services/description-status/description-status.service';
 import { DescriptionTemplateTypeService } from './services/description-template-type/description-template-type.service';
-import { PlanBlueprintService } from './services/plan/plan-blueprint.service';
-import { PlanService } from './services/plan/plan.service';
+import { DescriptionTemplateService } from './services/description-template/description-template.service';
+import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service';
+import { DescriptionService } from './services/description/description.service';
+import { EvaluatorHttpService } from './services/evaluator/evaluator.http.service';
+import { FileTransformerHttpService } from './services/file-transformer/file-transformer.http.service';
+import { FileTransformerService } from './services/file-transformer/file-transformer.service';
+import { FontAccessibilityService } from './services/font-accessibility.service';
 import { BaseHttpV2Service } from './services/http/base-http-v2.service';
+import { PrincipalService } from './services/http/principal.service';
+import { LanguageHttpService } from './services/language/language.http.service';
 import { LanguageService } from './services/language/language.service';
 import { LockService } from './services/lock/lock.service';
 import { LoggingService } from './services/logging/logging-service';
-import { UiNotificationService } from './services/notification/ui-notification-service';
-import { ProgressIndicationService } from './services/progress-indication/progress-indication-service';
-import { TimezoneService } from './services/timezone/timezone-service';
-import { CollectionUtils } from './services/utilities/collection-utils.service';
-import { TypeUtils } from './services/utilities/type-utils.service';
-import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard';
-import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
-import { FilterService } from '@common/modules/text-filter/filter-service';
-import { DescriptionTemplateService } from './services/description-template/description-template.service';
-import { DescriptionService } from './services/description/description.service';
-import { FileTransformerService } from './services/file-transformer/file-transformer.service';
-import { PrincipalService } from './services/http/principal.service';
-import { LanguageHttpService } from './services/language/language.http.service';
 import { MaintenanceService } from './services/maintenance/maintenance.service';
+import { UiNotificationService } from './services/notification/ui-notification-service';
+import { PlanBlueprintService } from './services/plan/plan-blueprint.service';
+import { PlanStatusService } from './services/plan/plan-status.service';
+import { PlanWorkflowService } from './services/plan/plan-workflow.service';
+import { PlanService } from './services/plan/plan.service';
+import { PrefillingSourceService } from './services/prefilling-source/prefilling-source.service';
+import { ProgressIndicationService } from './services/progress-indication/progress-indication-service';
 import { ReferenceTypeService } from './services/reference-type/reference-type.service';
 import { ReferenceService } from './services/reference/reference.service';
+import { RouterUtilsService } from './services/router/router-utils.service';
+import { SemanticsService } from './services/semantic/semantics.service';
+import { StorageFileService } from './services/storage-file/storage-file.service';
 import { SupportiveMaterialService } from './services/supportive-material/supportive-material.service';
 import { TagService } from './services/tag/tag.service';
+import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service';
+import { TenantHandlingService } from './services/tenant/tenant-handling.service';
 import { TenantService } from './services/tenant/tenant.service';
+import { TimezoneService } from './services/timezone/timezone-service';
+import { UsageLimitService } from './services/usage-limit/usage.service';
 import { UserSettingsHttpService } from './services/user-settings/user-settings-http.service';
 import { UserSettingsService } from './services/user-settings/user-settings.service';
 import { UserService } from './services/user/user.service';
+import { CollectionUtils } from './services/utilities/collection-utils.service';
 import { FileUtils } from './services/utilities/file-utils.service';
 import { QueryParamsService } from './services/utilities/query-params.service';
-import { FileTransformerHttpService } from './services/file-transformer/file-transformer.http.service';
-import { SemanticsService } from './services/semantic/semantics.service';
-import { PrefillingSourceService } from './services/prefilling-source/prefilling-source.service';
-import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
-import { StorageFileService } from './services/storage-file/storage-file.service';
-import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service';
-import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service';
-import { TenantHandlingService } from './services/tenant/tenant-handling.service';
-import { RouterUtilsService } from './services/router/router-utils.service';
-import { UsageLimitService } from './services/usage-limit/usage.service';
-import { PlanStatusService } from './services/plan/plan-status.service';
-import { DescriptionStatusService } from './services/description-status/description-status.service';
-import { PlanWorkflowService } from './services/plan/plan-workflow.service';
-import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service';
-import { EvaluatorHttpService } from './services/evaluator/evaluator.http.service';
+import { TypeUtils } from './services/utilities/type-utils.service';
+
 //
 //
 // This is shared module that provides all the services. Its imported only once on the AppModule.
@@ -125,7 +127,8 @@ export class CoreServiceModule {
 				PlanStatusService,
 				DescriptionStatusService,
 				PlanWorkflowService,
-                DescriptionWorkflowService
+				DescriptionWorkflowService,
+				FontAccessibilityService
 			],
 		};
 	}

frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts

@@ -14,9 +14,7 @@ export interface TenantConfiguration extends BaseEntity{
 
 export interface CssColorsTenantConfiguration{
 	primaryColor: string;
-	primaryColor2: string;
-	primaryColor3: string;
-	secondaryColor: string;
+	cssOverride: string;
 }
 
 export interface DefaultUserLocaleTenantConfiguration{
@@ -70,9 +68,7 @@ export interface TenantConfigurationPersist extends BaseEntityPersist{
 
 export interface CssColorsTenantConfigurationPersist{
 	primaryColor: string;
-	primaryColor2: string;
-	primaryColor3: string;
-	secondaryColor: string;
+	cssOverride: string;
 }
 
 export interface DefaultUserLocaleTenantConfigurationPersist{

frontend/src/app/core/services/configuration/configuration.service.ts

@@ -294,9 +294,7 @@ export class ConfigurationService extends BaseComponent {
 		if (config.defaultCssColors) {
 			this._cssColorsTenantConfiguration =  {
 				primaryColor: config.defaultCssColors.primaryColor,
-				primaryColor2: config.defaultCssColors.primaryColor2,
-				primaryColor3: config.defaultCssColors.primaryColor3,
-				secondaryColor: config.defaultCssColors.secondaryColor,
+				cssOverride: config.defaultCssColors.cssOverride
 			}
 		}
 	}

frontend/src/app/core/services/font-accessibility.service.ts

@@ -0,0 +1,23 @@
+import { computed, Injectable, Signal, signal } from '@angular/core';
+import { toggleFontSize } from '@app/ui/misc/theme-helper';
+
+@Injectable()
+export class FontAccessibilityService {
+
+    private _accessibleFontSignal = signal<boolean>(false);
+    public accessibleFontSignal = computed(() => this._accessibleFontSignal())
+
+    constructor() {
+        this._accessibleFontSignal.set(localStorage.getItem('largeText') === 'true');
+    }
+    public isLargeText(): boolean {
+        return this._accessibleFontSignal();
+    }
+
+    public toggleFontSize(){
+        const nextValue = this.isLargeText() ? 'false' : 'true';
+        localStorage.setItem('largeText', nextValue);
+        this._accessibleFontSignal.set(!this._accessibleFontSignal())
+        toggleFontSize(this.isLargeText());
+    }
+}

frontend/src/app/core/services/tenant/tenant-handling.service.ts

@@ -7,6 +7,7 @@ import { BaseService } from '@common/base/base.service';
 import { Observable, takeUntil } from 'rxjs';
 import { nameof } from 'ts-simple-nameof';
 import { TenantConfigurationService } from '../tenant-configuration/tenant-configuration.service';
+import { generateDynamicTheme, overrideCss } from '@app/ui/misc/theme-helper';
 
 @Injectable()
 export class TenantHandlingService extends BaseService {
@@ -74,19 +75,19 @@ export class TenantHandlingService extends BaseService {
 		return this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors, [
 			nameof<TenantConfiguration>(x => x.type),
 			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
-			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
-			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
-			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
+			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.cssOverride)].join('.')
 		]);
 	}
 
 	public applyTenantCssColors(cssColors: CssColorsTenantConfiguration) {
 
 		if (cssColors) {
-			if (cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, cssColors.primaryColor);
-			if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, cssColors.primaryColor2);
-			if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, cssColors.primaryColor3);
-			if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor);
+			if (cssColors.primaryColor){
+                generateDynamicTheme(cssColors.primaryColor);
+            }
+			if (cssColors.cssOverride){
+                overrideCss(cssColors.cssOverride);
+            }
 		}
 	}
 }

frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html

@@ -11,7 +11,7 @@
 						}" />
 								<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
 							</ng-container>
-							<button matChipRemove *ngIf="!disabled && _canRemoveItem(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
+							<button matChipRemove *ngIf="!disabled && _canRemoveItem(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)" [attr.aria-label]="'COMMONS.ACTIONS.REMOVE' | translate">
 								<mat-icon>cancel</mat-icon>
 							</button>
 						</mat-chip-row>
@@ -19,7 +19,7 @@
 				</mat-chip-grid>
 			</div>
 			<div class="col-12">
-				<input matInput #autocompleteInput [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
+				<input matInput #autocompleteInput [id]="id" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
 			</div>
 			<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)" [classList]="['myClass']">
 				<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">

frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss

@@ -65,7 +65,7 @@
 	line-clamp: 1;
 }
 
-::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
+::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary {
 	margin: 0 !important;
 	width: 100%;
 }
@@ -80,7 +80,7 @@
 	}
 
 	mat-icon:hover {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 }
 

frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts

@@ -54,6 +54,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 
 	@Input()
 	separatorKeysCodes = [];
+	@Input({required: false}) id: string = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
 
 	// Selected Option Event
 	@Output() optionSelected: EventEmitter<any> = new EventEmitter();
@@ -62,7 +63,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	@Output() optionActionClicked: EventEmitter<any> = new EventEmitter();
 
 
-	id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
 	stateChanges = new Subject<void>();
 
 	valueOnBlur = new BehaviorSubject<any>(null);

frontend/src/app/library/auto-complete/single/single-auto-complete.component.html

@@ -1,5 +1,5 @@
 <div class="row auto-complete">
-	<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
+	<input matInput #autocompleteInput class="col-12" [id]="id" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
 	<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
 	<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> -->
 	<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>

frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss

@@ -35,7 +35,7 @@
 	}
 }
 
-::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
+::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary {
 	margin: 0 !important;
 	width: 100%;
 }
@@ -45,7 +45,7 @@
 		margin: 0px 5px 0px 10px;
 	}
 	mat-icon:hover {
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 }
 

frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts

@@ -40,6 +40,8 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
 	@ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef;
 
 	@Input() initialSelectedData: any;
+    @Input({required: false}) id: string = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
+
 	@Input()
 	get configuration(): SingleAutoCompleteConfiguration { return this._configuration; }
 	set configuration(configuration: SingleAutoCompleteConfiguration) {
@@ -55,7 +57,6 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
 	@Output() optionSelected: EventEmitter<any> = new EventEmitter();
 	@Output() optionActionClicked: EventEmitter<any> = new EventEmitter();
 
-	id = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
 	stateChanges = new Subject<void>();
 	focused = false;
 	controlType = 'single-autocomplete';

frontend/src/app/library/guided-tour/guided-tour.component.html

@@ -10,6 +10,7 @@
 </div>
 <div *ngIf="currentTourStep && !isOrbShowing">
     <div #tourStep *ngIf="currentTourStep"
+        role="alert"
         class="tour-step tour-{{ currentTourStep.orientation }}"
         [ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
         [style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
@@ -26,18 +27,18 @@
                     {{ currentTourStep.title }}
                 </h2>
                 <div class="tour-buttons">
-                    <button *ngIf="!guidedTourService.onResizeMessage" mat-button type="button" class="rounded-btn primary"
+                    <button *ngIf="!guidedTourService.onResizeMessage" mat-flat-button color="primary" type="button" class="padded-shadow-btn"
                         (click)="guidedTourService.nextStep()">
                         {{ nextText }}
                     </button>
-                    <button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
-                        (click)="guidedTourService.skipTour()" class="rounded-btn primary-inverted">
+                    <button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique" mat-stroked-button color="primary" 
+                        (click)="guidedTourService.skipTour()" class="padded-shadow-btn">
                         {{ skipText }}
                     </button>
                 </div>
             </div>
             <div class="col-auto p-0 d-flex align-items-end">
-				<img src="../../../assets/images/guided-tour-side.png">
+				<img src="../../../assets/images/guided-tour-side.png" alt="{{('ALT-TEXT.GUIDED-TOUR-IMG' | translate) ?? 'tour guide image'}}">
 			</div>
         </div>
     </div>

frontend/src/app/library/guided-tour/guided-tour.component.scss

@@ -119,7 +119,7 @@ ngx-guided-tour {
 			padding: 28px 5px 25px 65px;
 			overflow: auto;
 			text-align: left;
-			color: #212121;
+			color: var(--dark-gray);
 			line-height: 26px;
 			white-space: pre-line;
 		}

frontend/src/app/library/guided-tour/guided-tour.module.ts

@@ -3,10 +3,12 @@ import { GuidedTourComponent } from './guided-tour.component';
 import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { WindowRefService } from './windowref.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [GuidedTourComponent],
-    imports: [CommonModule],
+    imports: [CommonModule, TranslateModule, MatButtonModule],
     providers: [WindowRefService],
     exports: [GuidedTourComponent]
 })

frontend/src/app/library/notification/popup/popup-notification.component.html

@@ -14,6 +14,6 @@
 </div>
 <div mat-dialog-actions class="row d-flex">
 	<div class="ml-auto col-auto">
-		<button mat-button tabindex="-1" class="rounded-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
+		<button mat-button class="padded-shadow-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
 	</div>
 </div>

frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss

@@ -3,7 +3,7 @@
 	font-weight: 400;
 	font-size: 16px;
 	line-height: 1.5rem;
-	color: #7d7d7d;
+	color: var(--dark-gray);
 }
 
 .editor-wrapper {

frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts

@@ -1,13 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from "@angular/core";
 import { FormControl } from "@angular/forms";
-import { AngularEditorConfig } from "@kolkov/angular-editor";
+import { AngularEditorComponent, AngularEditorConfig } from "@kolkov/angular-editor";
 import { Subscription } from "rxjs";
 
 @Component({
 	selector: 'rich-text-editor-component',
 	template: `
 		<div class="editor-wrapper" [class]="wrapperClasses">
-			<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
+			<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="name"
 							[config]="editorConfig" [formControl]="form" [required]="required"
 							placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"
 							(paste)="pasteWithoutFormatting($event)"></angular-editor>
@@ -19,9 +19,11 @@ import { Subscription } from "rxjs";
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy {
+    static nextId = 0;
+    @ViewChild(AngularEditorComponent) editor: AngularEditorComponent
 
 	@Input() form: FormControl;
-	@Input() id: string = "editor1";
+	@Input() name: string = `rich-text-editor${RichTextEditorComponent.nextId++}`;
 	@Input() placeholder: string = "Enter text";
 	@Input() required: boolean = false;
 	@Input() wrapperClasses: string = "";
@@ -104,6 +106,10 @@ export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy {
 		window.document.execCommand("insertText", false, text);
 	}
 
+    focus(){
+        this.editor?.focus();
+    }
+
 	private observeFormStatus(): void {
 		this.formTouchSubscription = this.formTouchEvent
 			.subscribe(

frontend/src/app/ui/about/about.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
 	<div class="row">
-		<iframe *ngIf="aboutHTMLUrl" class="iframe" [src]="aboutHTMLUrl"></iframe>
+		<iframe *ngIf="aboutHTMLUrl" title="about" class="iframe" [src]="aboutHTMLUrl"></iframe>
 	</div>
 </div>

frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html

@@ -6,16 +6,16 @@
                     <app-navigation-breadcrumb />
                 </div>
                 <div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
+                    <button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
                 </div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+                    <button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
                         <mat-icon>delete</mat-icon>
                         {{'COMMONS.ACTIONS.DELETE' | translate}}
                     </button>
                 </div>
                 <div class="col-auto" *ngIf="canSave">
-                    <button mat-button class="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'COMMONS.ACTIONS.SAVE' | translate}}
                     </button>
@@ -34,7 +34,7 @@
                                     <mat-error *ngIf="formGroup.controls.name.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                                 </mat-form-field>
                             </div>
-                            <div class="col-12">
+                            <div class="col-12 pt-2">
                                 <mat-form-field class="w-100">
                                     <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
                                     <mat-select [formControl]="formGroup.controls.internalStatus">
@@ -55,12 +55,7 @@
                             <div class="col-12">
                                 <h3>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
                                 <div class="col-12">
-									<rich-text-editor-component 
-                                        [form]="formGroup.controls.description" 
-                                        [placeholder]="'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION'" 
-                                        [editable]="!formGroup.controls.description.disabled"
-                                        [wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''" 
-                                    />
+                                    <rich-text-editor-component [form]="formGroup.controls.description" [placeholder]="'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION'" [editable]="!formGroup.controls.description.disabled" [wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''" />
                                     @if(formGroup.controls.description.hasError('backendError')){
                                     <div class="mat-form-field formGroup-field-subscript-wrapper">
                                         <mat-error>{{formGroup.controls.description.getError('backendError').message}}</mat-error>
@@ -93,7 +88,8 @@
                                         <mat-card-content>
                                             <div class="col-12">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}</mat-label>
+                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}&nbsp;*
+                                                        <small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
                                                         <mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
                                                     </mat-select>
@@ -101,9 +97,9 @@
                                                     <mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                                                 </mat-form-field>
                                             </div>
-                                            <div class="col-12">
+                                            <div class="col-12 pt-2">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}</mat-label>
+                                                    <mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}&nbsp;*<small>{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
                                                         <mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
                                                     </mat-select>
@@ -132,4 +128,3 @@
         </div>
     </div>
 </div>
-

frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts

@@ -1,6 +1,7 @@
-import { Component, effect, EventEmitter, input, Output } from '@angular/core';
+import { Component, computed, effect, EventEmitter, HostBinding, input, Output } from '@angular/core';
 import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
 import { DescriptionStatusFilter } from '@app/core/query/description-status.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { IsActive } from '@notification-service/core/enum/is-active.enum';
@@ -11,6 +12,7 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum';
   styleUrl: './description-status-listing-filters.component.scss'
 })
 export class DescriptionStatusListingFiltersComponent extends BaseComponent{
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
     readonly filter = input<DescriptionStatusFilter>();
 	@Output() filterChange = new EventEmitter<DescriptionStatusFilter>();
 
@@ -19,7 +21,7 @@ export class DescriptionStatusListingFiltersComponent extends BaseComponent{
 
     internalStatusEnum = this.enumUtils.getEnumValues<DescriptionStatusEnum>(DescriptionStatusEnum);
 
-    constructor(protected enumUtils: EnumUtils){
+    constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService){
         super();
         effect(() => {
             const newFilters = this.filter();

frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html

@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-STATUS-LISTING.ACTIONS.CREATE-DESCRIPTION-STATUS' | translate}}
 					</button>
@@ -43,7 +43,7 @@
 <ng-template #actions let-row="row" let-item>
 	<div class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto" *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">

frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html

@@ -2,18 +2,18 @@
 	<div mat-dialog-title class="row d-flex align-items-center header">
 		<div class="col"><span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DESCRIPTION-TEMPLATE-PREVIEW.TEMPLATE' | translate}} - {{descriptionTemplate.label}}</span></div>
 		<div class="col-auto">
-			<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
+			<button mat-icon-button (click)="closeDialog()"><mat-icon>close</mat-icon></button>
 		</div>
 	</div>
 	<div *ngIf="progressIndication" class="progress-bar">
-		<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
+		<mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
 	</div>
 	<div mat-dialog-content class="definition-content">
 		<app-description-form *ngIf="formGroup && formGroup.get('properties')" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionId]="descriptionId" [descriptionTemplate]="descriptionTemplate" [canAnnotate]="false" [visibilityRulesService]="visibilityRulesService" [isNew]="true"></app-description-form>
 	</div>
 	<div mat-dialog-actions *ngIf="formGroup" class="row d-flex pb-2 pt-3">
 		<div class="col-auto ml-auto">
-			<button mat-button type="button" class="rounded-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
+			<button mat-button type="button" class="padded-shadow-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
 		</div>
 	</div>
 </div>

frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss

@@ -3,8 +3,8 @@
 		display: flex;
 		width: 100%;
 		height: 89px;
-		background-color: var(--primary-color);
-		color: #FFFFFF;
+		background-color: var(--sys-primary);
+		color: var(--sys--sys-on-primary);
 		font-size: 1.25rem;
 	}
 

frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
@@ -15,6 +15,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-description-template-preview-dialog-component',
@@ -23,7 +24,7 @@ import { takeUntil } from 'rxjs/operators';
 	providers: [DescriptionFormService],
 })
 export class DescriptionTemplatePreviewDialogComponent extends BaseComponent implements OnInit {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	descriptionTemplateDefinitionFormGroup: UntypedFormGroup;
 	progressIndication = false;
 	editorModel: DescriptionEditorModel;
@@ -40,6 +41,7 @@ export class DescriptionTemplatePreviewDialogComponent extends BaseComponent imp
 		private language: TranslateService,
 		public visibilityRulesService: VisibilityRulesService,
 		private httpErrorHandlingService: HttpErrorHandlingService,
+        protected fontService: FontAccessibilityService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
 		super();

frontend/src/app/ui/admin/description-template/description-template.module.ts

@@ -34,6 +34,7 @@ import { DescriptionFormModule } from '@app/ui/description/editor/description-fo
 import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
 import { DragulaModule } from 'ng2-dragula';
 import { TransitionGroupModule } from '@app/ui/transition-group/transition-group.module';
+import { FormFocusDirective } from '@common/forms/form-focus.directive';
 
 @NgModule({
 	imports: [
@@ -52,6 +53,7 @@ import { TransitionGroupModule } from '@app/ui/transition-group/transition-group
 		DescriptionFormModule,
 		TransitionGroupModule,
 		DragulaModule.forRoot(),
+        FormFocusDirective
 	],
 	declarations: [
 		DescriptionTemplateEditorComponent,

frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html

@@ -159,8 +159,8 @@
 					<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
 						<li class="list-inline-item" *ngIf="!viewOnly">
 
-							<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
-								<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" />
+							<span role="button" [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
+								<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{('DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate) ?? 'add input'}}" />
 								<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
 							</span>
 							<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
@@ -280,7 +280,7 @@
 							</mat-checkbox>
 						</li>
 						<li class="list-inline-item">
-							<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
+							<mat-icon role="button" [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
 							<mat-menu #menu="matMenu">
 								<!-- TODO to check -->
 								<mat-checkbox 

frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss

@@ -1,5 +1,4 @@
 @use 'sass:math';
-@import "assets/scss/core/_variables.scss";
 
 .full-width{
     width: 100%;
@@ -18,7 +17,7 @@
 
 //Palete
 
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
 
 .actions-list{
@@ -75,14 +74,14 @@ $blue-color-light: #5cf7f2;
 
 
 .numbering-label .mat-input-element:disabled{
-    color: #212121;
+    color: var(--dark-gray);
 }
 
 :host ::ng-deep .fieldset-checkbox-action-description-template-editor
 {
   .mat-checkbox-label{
     font-size: 0.8em;
-    color: #212121;
+    color: var(--dark-gray);
     transform: translateY(3px);
   }
   .mat-checkbox-frame{
@@ -93,7 +92,7 @@ $blue-color-light: #5cf7f2;
 .fieldset-new-input-action {
     font-size: 0.8em;
     font-weight: 400;
-    color: #212121;
+    color: var(--dark-gray);
     display: inline-block;
     transform: translateY(1px);
 }
@@ -139,13 +138,12 @@ $blue-color-light: #5cf7f2;
 
 ::ng-deep label {
     margin: 0;
-    color: #212121;
+    color: var(--dark-gray);
 }
 
 .numbering {
     font-size: 21px; 
     font-weight: 400;
-    line-height: $bmd-line-height !important;
     padding-top: var(--mat-form-field-container-vertical-padding);
     padding-bottom: var(--mat-form-field-container-vertical-padding);
     overflow-x: hidden;

frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss

@@ -14,7 +14,7 @@ mat-radio-button{
 }
 
 li.list-inline-item{
-  color: var(--primary-color);
+  color: var(--sys-primary);
   .mat-icon{
     vertical-align: bottom;
   }
@@ -24,10 +24,10 @@ li.list-inline-item{
 {
   .mat-slide-toggle-content{
     font-size: 0.8em;
-    color: #212121;
+    color: var(--dark-gray);
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-    background-color:var(--primary-color) ;
+    background-color:var(--sys-primary) ;
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
     background-color:rgba(0,178,159,0.34);

frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html

@@ -14,7 +14,7 @@
 				<div class="row justify-content-center mt-4 mb-2">
 					<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
 						<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
-							alt="Add Question icon">
+							aria-hidden>
 						<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
 					</div>
 				</div>
@@ -30,7 +30,7 @@
 								<div class="action-list-item" (click)="onAddFieldSet()">
 									<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
 									<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
-										alt="Add Question icon">
+										aria-hidden>
 									<span
 										class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
 										| translate}}</span>
@@ -86,7 +86,7 @@
 								<div class="action-list-item" (click)="onAddFieldSet()">
 									<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
 									<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
-										alt="Add Question icon">
+										aria-hidden>
 									<span
 										class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
 										| translate}}</span>
@@ -98,7 +98,7 @@
 								<div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
 									<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
 									<img src="/assets/images/editor/icons/clone.svg" class="input_icon"
-										alt="Clone icon">
+										aria-hidden>
 									<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' |
 										translate}}</span>
 								</div>
@@ -120,7 +120,7 @@
 					<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)"
 						*ngIf="!viewOnly">
 						<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
-							alt="Add Question icon">
+							aria-hidden>
 						<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
 					</div>
 				</div>

frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss

@@ -1,4 +1,4 @@
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
 
 
@@ -55,7 +55,7 @@ $blue-color-light: #5cf7f2;
       margin-right: 0.5em;
       margin-left: -.09em;
       height: auto;
-      color: var(--primary-color);;
+      color: var(--sys-primary);
     }
     .input_icon{
       width: 14px;
@@ -66,7 +66,7 @@ $blue-color-light: #5cf7f2;
     }
   }
   .action-list-label{
-    color: #212121;
+    color: var(--dark-gray);
     font-size: small;
     opacity: 0.6;
   }
@@ -83,7 +83,7 @@ $blue-color-light: #5cf7f2;
     display:inline-block; 
     margin: 0px auto; 
     cursor: grab;
-    color: var(--secondary-color);
+    color: var(--sys-tertiary);
     opacity: 0.6 !important;
   }
 }

frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html

@@ -1,16 +1,19 @@
 <div [formGroup]="form" class="row description-template-editor">
 	
-	<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} *</div>
+	<label class="heading col-12" for="sectionName">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} 
+        &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+    </label>
 	<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
 	<mat-form-field class="col-12">
-		<input matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
+		<input id="sectionName" matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
 		<mat-error *ngIf="form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error> 
 		<mat-error *ngIf="form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
-	<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
+	<label class="heading col-12" [appFor]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
 	<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
 	<div class="col-12">
 		<rich-text-editor-component [form]="form.get('description')"
+                                    id="sectionDescription"
 									[placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION'"
 									[editable]="!form.disabled">
 		</rich-text-editor-component>

frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss

@@ -14,7 +14,7 @@
 	font-weight: 700;
 	font-size: 18px;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.81;
 	margin-bottom: 0.625rem;
 }
@@ -24,7 +24,7 @@
 	font-weight: 400;
 	font-size: 16px;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.81;
 	margin-bottom: 0.125rem;
 }

frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html

@@ -36,28 +36,34 @@
 			<div class="col-9">
 				<div class="col">
 					<div class="col-12">
-						<div class="heading">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}} *</div>
+						<label class="heading" for="nameInput">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}} 
+                            &nbsp;*<small class="required-text" class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
-							<input matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
+							<input id="nameInput" matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
 							<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
 							<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}} *</div>
+						<label class="heading" for="codeInput">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
-							<input matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
+							<input id="codeInput" matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
 							<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
 							<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}} *</div>
+						<label class="heading" [appFor]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
 						<div class="full-width basic-info-input">
-							<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
+							<rich-text-editor-component id="descriptionInput" [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
 							</rich-text-editor-component>
 							<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
 								<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
@@ -67,21 +73,25 @@
 					</div>
 
 					<div class="col-12">
-						<div class="heading">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}} *</div>
+						<label class="heading" for="typeInput">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}} 
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
 							<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}</mat-label>
-							<app-single-auto-complete [required]="false" [formControl]="formGroup.get('type')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}" [configuration]="singleAutocompleteDescriptionTemplateTypeConfiguration">
+							<app-single-auto-complete [id]="'typeInput'" [required]="false" [formControl]="formGroup.get('type')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}" [configuration]="singleAutocompleteDescriptionTemplateTypeConfiguration">
 							</app-single-auto-complete>
 							<mat-error *ngIf="formGroup.get('type').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error>
 							<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} *</div>
+						<label class="heading" [appFor]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} 
+                            &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                        </label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}</div>
 						<mat-form-field class="full-width basic-info-input">
-							<mat-select [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
+							<mat-select id="languageInput" [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
 								<mat-option *ngFor="let lang of availableLanguages" [value]="lang.code">
 									{{ lang.name }}
 								</mat-option>
@@ -91,7 +101,7 @@
 						</mat-form-field>
 					</div>
 					<div class="col-12">
-						<div class="heading">1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}</div>
+						<label class="heading" for="templateUsersInput">1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}</label>
 						<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS-HINT'| translate}}</div>
 						<div class="full-width basic-info-input">
 							<table class="col-12 user-table">
@@ -107,7 +117,7 @@
 										<td>{{usersMap.get(user?.get('userId')?.value)?.name}}</td>
 										<td>{{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}}</td>
 										<td *ngIf="!viewOnly">
-											<button mat-button class="rounded-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
+											<button mat-button class="padded-shadow-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
 										</td>
 									</tr>
 									<tr *ngIf="formGroup.get('users')?.controls?.length === 0">
@@ -125,7 +135,7 @@
 							<div class="col-12 col-lg-4 d-flex justify-content-end" style="overflow: hidden;">
 								<mat-form-field class="full-width basic-info-input" *ngIf="!viewOnly">
 									<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}</mat-label>
-									<app-single-auto-complete [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
+									<app-single-auto-complete [id]="'templateUsersInput'" [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
 									</app-single-auto-complete>
 									<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 								</mat-form-field>
@@ -172,21 +182,23 @@
 									<formGroup [formGroup]="selectedTocEntry.form">
 										<div class="row">
 											<div class="col-12">
-												<div class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
+												<label for="pageNameInput" class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} 
+                                                    &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                                </label>
 											</div>
 											<div class="col-12">
 												<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
 											</div>
 											<div class="col-12">
 												<mat-form-field class="w-100">
-													<input type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
+													<input id="pageNameInput" type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
 													<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('backendError')">{{selectedTocEntry.form.get('title').getError('backendError').message}}</mat-error>
 													<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 												</mat-form-field>
 											</div>
                                             @if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
                                                 <div class="col-12">
-                                                    <button mat-button class="rounded-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
+                                                    <button mat-button class="padded-shadow-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
                                                 </div>
                                                 <mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
                                             }
@@ -264,11 +276,11 @@
 
 	<ng-container *ngIf="steps && stepper">
 		<div class="floating-btn">
-			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="rounded-btn secondary " (click)="stepper?.previous()">
+			<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="padded-shadow-btn secondary " (click)="stepper?.previous()">
 				<mat-icon class="back-icon pointer">chevron_left</mat-icon>
 				{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
 			</button>
-			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
+			<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="padded-shadow-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
 				<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
 				<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
 			</button>
@@ -280,12 +292,12 @@
 
 <ng-template #actions>
 	<div>
-		<button mat-button class="rounded-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
-		<button *ngIf="!viewOnly" mat-button class="rounded-btn secondary" type="button">
+		<button mat-button class="padded-shadow-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
+		<button *ngIf="!viewOnly" mat-button class="padded-shadow-btn secondary" type="button">
 			<span class="d-flex flex-row row">
 				<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
 				<mat-divider [vertical]="true"></mat-divider>
-				<span class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
+				<span role="button" class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
 					<mat-icon>expand_more</mat-icon>
 				</span>
 			</span>
@@ -295,7 +307,7 @@
 			<button mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
 		</mat-menu>
 
-		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="rounded-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
+		<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="padded-shadow-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
 			{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
 		</button>
 	</div>

frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss

@@ -29,7 +29,7 @@
 	font-weight: 700;
 	font-size: 18px;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.81;
 	margin-bottom: 0.625rem;
 }
@@ -39,7 +39,7 @@
 	font-weight: 400;
 	font-size: 16px;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.81;
 	margin-bottom: 0.125rem;
 }
@@ -66,7 +66,7 @@
 	transition-timing-function: ease-out;
 	transition-delay: 50ms;
 	box-shadow: 0px 1px 2px #bfbfbf;
-	background-color: var(--secondary-color);
+	background-color: var(--sys-tertiary);
 }
 #progress-container{
 	box-shadow: 1px 1px 6px #00000029;;
@@ -74,7 +74,7 @@
 
 
 
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
 
 
@@ -87,7 +87,7 @@ $blue-color-light: #5cf7f2;
 	transition-duration: 200ms;
 	transition-delay: 50ms;
 	transition-timing-function: ease-in-out;
-	color: #212121;
+	color: var(--dark-gray);
 	font-size: 0.9em;
 }
 
@@ -107,7 +107,7 @@ $blue-color-light: #5cf7f2;
 
 
 .actions-list{
-	box-shadow: 0px 3px 12px var(--primary-color)99;
+	box-shadow: 0px 3px 12px var(--sys-primary)99;
 	border-radius: 4px;
 	padding: 1em 0.9em;
 	min-width: 166px;
@@ -129,7 +129,7 @@ $blue-color-light: #5cf7f2;
 			margin-right: 0.5em;
 			margin-left: -.09em;
 			height: auto;
-			color: var(--primary-color);;
+			color: var(--sys-primary);;
 		}
 		.input_icon{
 			width: 14px;
@@ -140,7 +140,7 @@ $blue-color-light: #5cf7f2;
 		}
 	}
 	.action-list-label{
-	 color: #212121;
+	 color: var(--dark-gray);
 	 font-size: small;
 	 opacity: 0.6;
 	}
@@ -215,7 +215,7 @@ $blue-color-light: #5cf7f2;
 	position: fixed;
 	bottom: 20em;
 	right: 2em;
-	color: var(--primary-color) !important;
+	color: var(--sys-primary) !important;
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;

frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss

@@ -28,7 +28,7 @@ $scroller-height: 3em;
 
 
 #guide-steps{
-  color: #212121;
+  color: var(--dark-gray);
   opacity: 0.6;
   font-size: 1.6em;
   margin-top: 0px;

frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html

@@ -84,7 +84,7 @@
 										<!-- Subsection + -->
 									</ng-container>
 									<ng-container *ngSwitchCase="tocEntryType.FieldSet">
-										<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: 0.1em;" class="add-input-icon">
+										<img src="/assets/images/editor/icons/add_input_set.svg" alt="New input icon" style="margin-left: 0.1em;" class="add-input-icon">
 										{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
 									</ng-container>
 
@@ -124,7 +124,7 @@
 				<div class="ml-3">
 					<!-- Give option to generate fieldset (only if parent is section) -->
 					<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
-						<img src="/assets/images/editor/icons/add_input_set.svg" alt="" class="add-input-icon">
+						<img src="/assets/images/editor/icons/add_input_set.svg" alt="New input icon" class="add-input-icon">
 						{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
 					</button>
 
@@ -157,7 +157,7 @@
 						</ng-container>
 						<ng-container *ngSwitchCase="tocEntryType.FieldSet">
 							<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
-								<img src="/assets/images/editor/icons/add_input_set.svg" alt="" class="add-input-icon">
+								<img src="/assets/images/editor/icons/add_input_set.svg" alt="New input set icon" class="add-input-icon">
 								{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
 							</button>
 						</ng-container>

frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss

@@ -23,9 +23,9 @@
 
 
 
-$blue-color : var(--primary-color);
+$blue-color : var(--sys-primary);
 $blue-color-light: #5cf7f2;
-$yellow: var(--secondary-color);
+$yellow: var(--sys-tertiary);
 .badge-ball{
   display: inline-block;
   border-radius: 50%;

frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-button class="rounded-btn import" (click)="import()">
+					<button mat-button class="padded-shadow-btn import" (click)="import()">
 						<span class="button-text">
 							{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto" *ngIf="canCreateNew()">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
 						<mat-icon>add</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
 					</button>
@@ -86,28 +86,28 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="showActions(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/', row.id])">
-					<mat-icon>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<a *ngIf="canAddNewVersion(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/new-version/', row.id])">
-					<mat-icon>queue</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.NEW-VERSION' | translate}}
+					<mat-icon aria-hidden>queue</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.NEW-VERSION' | translate}}
 				</a>
 				<a *ngIf="canClone(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/clone/', row.id])">
-					<mat-icon>content_copy</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.CLONE' | translate}}
+					<mat-icon aria-hidden>content_copy</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.CLONE' | translate}}
 				</a>
 				<a *ngIf="canViewVersions(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/versions/', row.groupId])">
-					<mat-icon>library_books</mat-icon>
+					<mat-icon aria-hidden>library_books</mat-icon>
 					{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
 				</a>
 				<button *ngIf="canDownloadXml(row)" mat-menu-item (click)="export($event, row.id)">
-					<mat-icon>download</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
+					<mat-icon aria-hidden>download</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
 				</button>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button  mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button  mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts

@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { DescriptionTemplateStatus } from '@app/core/common/enum/description-template-status';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { DescriptionTemplateFilter } from '@app/core/query/description-template.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { Guid } from '@common/types/guid';
@@ -21,10 +22,11 @@ export class DescriptionTemplateListingFiltersComponent extends BaseComponent im
 
 	// * State
 	internalFilters: DescriptionTemplateListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html

@@ -4,7 +4,7 @@
 			<h4>{{ data.message }}</h4>
 		</div>
 		<div class="col-auto ml-auto">
-            <button mat-icon-button tabindex="-1" (click)="cancel()">
+            <button mat-icon-button (click)="cancel()">
                 <mat-icon>close</mat-icon>
             </button>
 		</div>
@@ -34,11 +34,11 @@
 				<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
 			</mat-form-field>
 			<div class="col-auto">
-				<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="rounded-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-button color="primary" class="padded-shadow-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>

frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 
 @Component({
@@ -7,7 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./import-description-template.dialog.component.scss']
 })
 export class ImportDescriptionTemplateDialogComponent {
-
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 	sizeError = false;
 	selectFile = false;
 	maxFileSize: number = 1048576;
@@ -15,7 +16,8 @@ export class ImportDescriptionTemplateDialogComponent {
 
 	constructor(
 		public dialogRef: MatDialogRef<ImportDescriptionTemplateDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) { }
 
 

frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html

@@ -8,22 +8,22 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
+					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canFinalize">
-					<button mat-button class="rounded-btn secondary" (click)="save(); finalize()">
+					<button mat-button class="padded-shadow-btn secondary" (click)="save(); finalize()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="save(); formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="save(); formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>

frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss

@@ -7,7 +7,7 @@
 
 .action-btn {
     border-radius: 30px;
-    background-color: var(--secondary-color);
+    background-color: var(--sys-tertiary);
     border: 1px solid transparent;
     padding-left: 2em;
     padding-right: 2em;

frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
 						[routerLink]="routerUtils.generateUrl(['/description-template-type/new'])">
 						<mat-icon>add</mat-icon>
@@ -86,15 +86,15 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!isFinalized(row) || row.belongsToCurrentTenant != false">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!isFinalized(row) || row.belongsToCurrentTenant != false" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-template-type/' + row.id])">
-					<mat-icon>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts

@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { DescriptionTemplateTypeStatus } from '@app/core/common/enum/description-template-type-status';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { DescriptionTemplateTypeFilter } from '@app/core/query/description-template-type.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -20,10 +21,11 @@ export class DescriptionTemplateTypeListingFiltersComponent extends BaseComponen
 
 	// * State
 	internalFilters: DescriptionTemplateTypeListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'LOCK-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -42,12 +42,12 @@
 
 			<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts

@@ -1,7 +1,8 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { LockTargetType } from '@app/core/common/enum/lock-target-type';
 import { LockFilter } from '@app/core/query/lock.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { UserService } from '@app/core/services/user/user.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -24,11 +25,12 @@ export class LockListingFiltersComponent extends BaseComponent implements OnInit
 
 	// * State
 	internalFilters: LockListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
 		public userService: UserService,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/entity-locks/lock-listing.component.html

@@ -66,12 +66,12 @@
 <ng-template #actions let-row="row" let-item>
 	<div  *ngIf="canDelete(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id, row.target)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'LOCK-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/language/editor/language-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="!isNew && this.editorModel.belongsToCurrentTenant != false && canDelete">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'LANGUAGE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -28,7 +28,7 @@
 						<div class="row">
 							<div class="col-12">
 								<div class="container-fluid">
-									<div class="row">
+									<div class="row" style="row-gap: 0.5rem">
 										<div class="col-6" *ngIf="isNew">
 											<mat-form-field class="w-100">
 												<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>

frontend/src/app/ui/admin/language/editor/language-editor.component.scss

@@ -12,7 +12,7 @@
 }
 
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color-3);
+	background-color: var(--sys-primary);
 }
 
 ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {

frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button cmat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button cmat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { TenantFilter } from '@app/core/query/tenant.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,11 @@ export class LanguageListingFiltersComponent extends BaseComponent implements On
 
 	// * State
 	internalFilters: LanguageListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/language/listing/language-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
 						[routerLink]="routerUtils.generateUrl(['/languages/new'])">
 						<mat-icon>add</mat-icon>
@@ -77,15 +77,15 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="canEdit(row) || canDelete(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/languages/', row.id])">
-					<mat-icon>edit</mat-icon>{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'LANGUAGE-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html

@@ -17,8 +17,8 @@
 						</mat-panel-description>
 					</mat-expansion-panel-header>
 					<div class="mt-2">
-						<button mat-button color="primary" (click)="generateIndex($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.GENERATE-INDEX')}}</button>
-						<button mat-button color="primary" (click)="clearIndex($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
+						<button mat-button color="primary" (click)="generateIndex($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.GENERATE-INDEX')}}</button>
+						<button mat-button color="primary" (click)="clearIndex($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
 					</div>
 				</mat-expansion-panel>
 				<mat-expansion-panel>
@@ -32,28 +32,28 @@
 					</mat-expansion-panel-header>
 					<div class="mt-2">
 						<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.MAIN-TITLE')}}</h3>
-						<button mat-button (click)="sendTenantTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
-						<button mat-button (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
-						<button mat-button (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
-						<button mat-button (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
+						<button mat-button (click)="sendTenantTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
+						<button mat-button (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
+						<button mat-button (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
+						<button mat-button (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
 					</div>
 					<div class="mt-2">
 						<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACCOUNTING-TITLE')}}</h3>
-						<button mat-button (click)="sendPlanAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendDescriptionAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendBlueprintAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-BLUEPRINT-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendDescriptionTemplateAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendDescriptionTemplateTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-TYPE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendPrefillingSourceAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PREFILLING-SOURCE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendReferenceTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-REFERENCE-TYPE-ACCOUNTING-ENTRIES')}}</button>
-						<button mat-button (click)="sendUserAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendPlanAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendDescriptionAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendBlueprintAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-BLUEPRINT-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendDescriptionTemplateAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendDescriptionTemplateTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-TYPE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendPrefillingSourceAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PREFILLING-SOURCE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendReferenceTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-REFERENCE-TYPE-ACCOUNTING-ENTRIES')}}</button>
+						<button mat-button (click)="sendUserAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
 					</div>
 					<div class="mt-2">
 						<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.INDICATOR-TITLE')}}</h3>
-						<button mat-button (click)="sendIndicatorCreateEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-CREATE-ENTRY')}}</button>					
-						<button mat-button (click)="sendIndicatorResetEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-RESET-ENTRY')}}</button>					
-						<button mat-button (click)="sendIndicatorAccessEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-ACCESS-ENTRY')}}</button>					
-						<button mat-button (click)="sendIndicatorPointEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>					
+						<button mat-button (click)="sendIndicatorCreateEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-CREATE-ENTRY')}}</button>					
+						<button mat-button (click)="sendIndicatorResetEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-RESET-ENTRY')}}</button>					
+						<button mat-button (click)="sendIndicatorAccessEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-ACCESS-ENTRY')}}</button>					
+						<button mat-button (click)="sendIndicatorPointEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>					
 					</div>
 				</mat-expansion-panel>
 			</mat-accordion>

frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="canDelete">
-					<button [disabled]="isLocked" mat-button class="rounded-btn secondary" type="button" (click)="delete()">
+					<button [disabled]="isLocked" mat-button class="padded-shadow-btn secondary" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-md-auto col-12" *ngIf="canDownloadXML">
-					<button mat-button class="rounded-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
+					<button mat-button class="padded-shadow-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 				</div>
 				<div *ngIf="!hideEditActions && canFinalize" class="col-auto">
-					<button mat-button class="rounded-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
+					<button mat-button class="padded-shadow-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
 				</div>
 			</div>
 			<form *ngIf="formGroup">
@@ -78,7 +78,7 @@
 														</mat-form-field>
 													</div>
 													<div class="col-auto mb-3" *ngIf="!hideEditActions">
-														<button mat-button class="rounded-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+														<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 													</div>
 												</div>
 												<div class="row">
@@ -235,7 +235,7 @@
 																<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</div>
 															<div class="col-auto" *ngIf="!hideEditActions && section.get('hasTemplates').value">
-																<button mat-button class="rounded-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
+																<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
 															</div>
 														</div>
 													</div>
@@ -337,7 +337,7 @@
 							<div class="col-12">
 								<div class="row">
 									<div class="col-auto" *ngIf="!hideEditActions">
-										<button mat-button class="rounded-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
+										<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'PLAN-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
 										<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
 									</div>
@@ -346,11 +346,11 @@
 						</div>
 						<div class="row mt-4">
 							<div class="col-auto">
-								<button mat-button class="rounded-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+								<button mat-button class="padded-shadow-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 							</div>
 							<div class="col"></div>
 							<div class="col-auto" *ngIf="!hideEditActions">
-								<button mat-button class="rounded-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
+								<button mat-button class="padded-shadow-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
 									{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
 								</button>
 							</div>

frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss

@@ -18,7 +18,7 @@
 
 .drag-handle {
 	cursor: move; 
-	color: var(--primary-color);
+	color: var(--sys-primary);
 }
 .drag-handle-disabled {
 	cursor: auto; 
@@ -26,27 +26,13 @@
 }
 
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color-3);
+	background-color: var(--sys-primary);
 }
 
 ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
     background-color: #b0b0b0;
 }
 
-.finalize-btn {
-	border-radius: 30px;
-	border: 1px solid var(--primary-color);
-	background: transparent;
-	padding-left: 2em;
-	padding-right: 2em;
-	box-shadow: 0px 3px 6px #1E202029;
-	color: var(--primary-color);
-    &:disabled{
-		background-color: #CBCBCB;
-		color: #FFF;
-		border: 0px;
-	}
-}
 
 .dlt-section-btn {
 	margin: 0;
@@ -75,13 +61,13 @@
 	.field-delete-icon{
 		font-size: 1.2em;
 		width: 14px;
-		color: var(--primary-color);
+		color: var(--sys-primary);
 	}
 	
 	.field-delete-text{
 		font-size: 1em;
 	margin-left: 0.5em;
-	color: var(--primary-color);
+	color: var(--sys-primary);
 	}
 }
 

frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html

@@ -1,19 +1,19 @@
 <div class="d-flex align-items-center gap-1-rem">
 
-	<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
+	<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
 		<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
 		{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
 	</button>
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid pt-2 pb-2" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
 				</div>
 				<div class="col-auto">
-					<button color="accent" mat-button (click)="clearFilters()">
+					<button mat-button (click)="clearFilters()">
 						{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
 					</button>
 				</div>
@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss

@@ -15,6 +15,7 @@
 .filter-button{
 	padding-top: .6rem;
 	padding-bottom: .6rem;
+    color: #000000;
 }
 
 ::ng-deep .mdc-form-field {

frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts

@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { PlanBlueprintStatus } from '@app/core/common/enum/plan-blueprint-status';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { PlanBlueprintFilter } from '@app/core/query/plan-blueprint.lookup';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 @Component({
 	selector: 'app-plan-blueprint-listing-filters',
@@ -20,10 +21,11 @@ export class PlanBlueprintListingFiltersComponent extends BaseComponent implemen
 
 	// * State
 	internalFilters: PlanBlueprintListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html

@@ -4,7 +4,7 @@
 			<h4>{{ data.message }}</h4>
 		</div>
 		<div class="col-auto ml-auto">
-            <button mat-icon-button tabindex="-1" (click)="cancel()">
+            <button mat-icon-button (click)="cancel()">
                 <mat-icon>close</mat-icon>
             </button>
 		</div>
@@ -34,11 +34,11 @@
 				<input matInput placeholder="{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
 			</mat-form-field>
 			<div class="col-auto">
-				<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
+				<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
 			</div>
 			<div class="col"></div>
 			<div class="col-auto">
-				<button mat-button color="primary" class="rounded-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
+				<button mat-button color="primary" class="padded-shadow-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
 			</div>
 		</div>
 	</mat-dialog-content>

frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss

@@ -9,35 +9,10 @@
 	border-radius: 30px;
 min-width: 101px;
 	height: 43px;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: 500;
 }
 
-.next-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid var(--primary-color);
-	border-radius: 30px;
-	opacity: 1;
-min-width: 101px;
-	height: 43px;
-	color: var(--primary-color);
-	font-weight: 500;
-}
-
-.next-btn[disabled] {
-	width: 100px;
-	height: 43px;
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #b5b5b5;
-	border-radius: 30px;
-	opacity: 1;
-}
-
-.next-btn:not([disabled]):hover {
-	background-color: var(--primary-color);
-	color: #ffffff;
-}
-
 //ngx dropzone
 .drop-file {
 	background-color: #fafafa;

frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts

@@ -1,5 +1,6 @@
-import { Component, Inject } from '@angular/core';
+import { Component, computed, HostBinding, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 
 
 @Component({
@@ -7,6 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 	styleUrls: ['./import-plan-blueprint.dialog.component.scss']
 })
 export class ImportPlanBlueprintDialogComponent {
+    @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
 
 	sizeError = false;
 	selectFile = false;
@@ -15,7 +17,8 @@ export class ImportPlanBlueprintDialogComponent {
 
 	constructor(
 		public dialogRef: MatDialogRef<ImportPlanBlueprintDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any,
+        protected fontService: FontAccessibilityService,
 	) { }
 
 

frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html

@@ -6,7 +6,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn import" (click)="import()">
+					<button mat-button class="padded-shadow-btn import" (click)="import()">
 						<span class="button-text">
 							{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML' | translate}}
 						</span>
@@ -14,7 +14,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-BLUEPRINT-LISTING.CREATE-PLAN-BLUEPRINT' | translate}}
 					</button>
@@ -81,28 +81,28 @@
 <ng-template #actions let-row="row" let-item>
 	<div class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/', row.id])">
-					<mat-icon>edit</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<a *ngIf="canCreateNewVersion(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new-version/', row.id])">
-					<mat-icon>queue</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.NEW-VERSION' | translate}}
+					<mat-icon aria-hidden>queue</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.NEW-VERSION' | translate}}
 				</a>
 				<a mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/clone/', row.id])">
-					<mat-icon>content_copy</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}}
+					<mat-icon aria-hidden>content_copy</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}}
 				</a>
 				<a *ngIf="row.isActive == isActive.Active" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/versions/', row.groupId])">
-					<mat-icon>library_books</mat-icon>
+					<mat-icon aria-hidden>library_books</mat-icon>
 					{{'PLAN-BLUEPRINT-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
 				</a>
 				<button mat-menu-item (click)="export($event, row.id)" *ngIf="canDownloadXML(row)">
-					<mat-icon>download</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
+					<mat-icon aria-hidden>download</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
 				</button>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'PLAN-BLUEPRINT-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html

@@ -6,16 +6,16 @@
                     <app-navigation-breadcrumb />
                 </div>
                 <div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+                    <button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
                 </div>
                 <div class="col-auto" *ngIf="canDelete">
-                    <button mat-raised-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+                    <button mat-raised-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
                         <mat-icon>delete</mat-icon>
                         {{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}}
                     </button>
                 </div>
                 <div class="col-auto" *ngIf="canSave">
-                    <button mat-button class="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
+                    <button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
                         <mat-icon>save</mat-icon>
                         {{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}}
                     </button>
@@ -34,7 +34,7 @@
                                     <mat-error *ngIf="formGroup.controls.name.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                                 </mat-form-field>
                             </div>
-                            <div class="col-12">
+                            <div class="col-12  pt-2">
                                 <mat-form-field class="w-100">
                                     <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
                                     <mat-select [formControl]="formGroup.controls.internalStatus">
@@ -55,12 +55,7 @@
                             <div class="col-12">
                                 <h3>{{'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
                                 <div class="col-12">
-									<rich-text-editor-component 
-                                        [form]="formGroup.controls.description" 
-                                        [placeholder]="'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION'" 
-                                        [editable]="!formGroup.controls.description.disabled"
-                                        [wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''" 
-                                    />
+                                    <rich-text-editor-component [form]="formGroup.controls.description" [placeholder]="'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION'" [editable]="!formGroup.controls.description.disabled" [wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''" />
                                     @if(formGroup.controls.description.hasError('backendError')){
                                     <div class="mat-form-field formGroup-field-subscript-wrapper">
                                         <mat-error>{{formGroup.controls.description.getError('backendError').message}}</mat-error>
@@ -91,7 +86,9 @@
                                         <mat-card-content>
                                             <div class="col-12">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}</mat-label>
+                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}
+                                                        &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                                    </mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
                                                         <mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
                                                     </mat-select>
@@ -99,9 +96,11 @@
                                                     <mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                                                 </mat-form-field>
                                             </div>
-                                            <div class="col-12">
+                                            <div class="col-12  pt-2">
                                                 <mat-form-field class="w-100">
-                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}</mat-label>
+                                                    <mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}
+                                                        &nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
+                                                    </mat-label>
                                                     <mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
                                                         <mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
                                                     </mat-select>

frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -41,12 +41,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts

@@ -1,7 +1,8 @@
-import { Component, effect, EventEmitter, input, Input, Output } from '@angular/core';
+import { Component, computed, effect, EventEmitter, input, Input, Output } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { PlanStatusEnum } from '@app/core/common/enum/plan-status';
 import { PlanStatusFilter } from '@app/core/query/plan-status.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 
@@ -17,8 +18,8 @@ export class PlanStatusListingFiltersComponent extends BaseComponent {
 	internalFilters: PlanStatusListingFilters = this._getEmptyFilters();
 	appliedFilterCount: number = 0;
 	internalStatusEnum = this.enumUtils.getEnumValues<PlanStatusEnum>(PlanStatusEnum);
-
-	constructor(protected enumUtils: EnumUtils) {
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
+	constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService) {
 		super();
 		effect(() => {
 			const newFilters = this.filter();

frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html

@@ -7,7 +7,7 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
+					<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
 						<mat-icon>add</mat-icon>
 						{{'PLAN-STATUS-LISTING.ACTIONS.CREATE-PLAN-STATUS' | translate}}
 					</button>
@@ -43,15 +43,15 @@
 <ng-template #actions let-row="row" let-item>
 	<div class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto" *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-statuses/', row.id])"> 
-					<mat-icon>edit</mat-icon>{{'PLAN-STATUS-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'PLAN-STATUS-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'PLAN-STATUS-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html

@@ -7,16 +7,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -90,7 +90,7 @@
 													</div>
 												</div>
 											</div>
-											<button mat-button class="rounded-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+											<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 										</div>
 									</div>
 								</div>
@@ -133,8 +133,8 @@
 								</div>
 							</div>
                             <div class="row d-flex gap-half-rem">
-                                <button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
-                                <button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+                                <button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+                                <button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
                             </div>
 						</div>
 					</mat-card-content>

frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss

@@ -11,14 +11,6 @@
   }
 }
 
-::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color-3);
-}
-
-::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
-    background-color: #b0b0b0;
-}
-
 ::ng-deep .mdc-form-field {
 	label {
 		margin: 0;

frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'PREFILLING-SOURCE-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { PrefillingSourceFilter } from '@app/core/query/prefilling-source.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,11 @@ export class PrefillingSourceListingFiltersComponent extends BaseComponent imple
 
 	// * State
 	internalFilters: PrefillingSourceListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html

@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)"
 						[routerLink]="routerUtils.generateUrl(['/prefilling-sources/new'])">
 						<mat-icon>add</mat-icon>
@@ -79,15 +79,15 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/prefilling-sources/', row.id])">
-					<mat-icon>edit</mat-icon>{{'PREFILLING-SOURCE-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'PREFILLING-SOURCE-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'PREFILLING-SOURCE-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html

@@ -7,16 +7,16 @@
 				</div>
 
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
+					<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
 						<mat-icon>delete</mat-icon>
 						{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -60,7 +60,7 @@
 													<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
 												</div>
 												<div class="col-auto">
-													<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+													<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 												</div>
 											</div>
 										</div>
@@ -76,7 +76,7 @@
 										<div class="col-12">
 											<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
 												<div class="col-12">
-													<div class="row d-flex align-items-center">
+													<div class="row d-flex align-items-center" style="row-gap: 0.5rem">
 														<div class="col-auto pb-3 d-flex">
 															<span>{{fieldIndex + 1}}</span>
 														</div>
@@ -124,7 +124,7 @@
 													</div>
 												</div>
 											</div>
-											<button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
+											<button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
 										</div>
 										<div class="col-12 mt-3 mb-3">
 											<div class="row d-flex align-items-center">
@@ -132,7 +132,7 @@
 													<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
 												</div>
 												<div class="col-auto">
-													<button mat-button class="rounded-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
+													<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
 												</div>
 											</div>
 										</div>

frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss

@@ -7,18 +7,10 @@
 
   .add {
 	background-color: white;
-    color: #009700;
+    color: #009700; //todo mchouliara
   }
 }
 
-::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color-3);
-}
-
-::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
-    background-color: #b0b0b0;
-}
-
 
 .dlt-section-btn {
 	margin: 0;
@@ -47,12 +39,12 @@
     .field-delete-icon{
       font-size: 1.2em;
       width: 14px;
-      color: var(--primary-color);
+      color: var(--sys-primary);
     }
     
     .field-delete-text{
       font-size: 1em;
 	  margin-left: 0.5em;
-	  color: var(--primary-color);
+	  color: var(--sys-primary);
     }
 }

frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'REFERENCE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -31,12 +31,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { ReferenceTypeFilter } from '@app/core/query/reference-type.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
 import { nameof } from 'ts-simple-nameof';
@@ -17,10 +18,12 @@ export class ReferenceTypeListingFiltersComponent extends BaseComponent implemen
 
 	// * State
 	internalFilters: ReferenceTypeListingFilters = this._getEmptyFilters();
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html

@@ -7,7 +7,7 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn secondary"
+					<button mat-button class="padded-shadow-btn secondary"
 						*ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)"
 						[routerLink]="routerUtils.generateUrl(['/reference-type/new'])">
 						<mat-icon>add</mat-icon>
@@ -80,15 +80,15 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/reference-type/', row.id])">
-					<mat-icon>edit</mat-icon>{{'REFERENCE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'REFERENCE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'REFERENCE-TYPE-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/reference/editor/reference-editor.component.html

@@ -6,16 +6,16 @@
 					<app-navigation-breadcrumb />
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
+					<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
 				</div>
 				<div class="col-auto" *ngIf="canDelete">
-					<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
+					<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
 						<mat-icon>delete</mat-icon>
 						{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
 					</button>
 				</div>
 				<div class="col-auto" *ngIf="canSave">
-					<button mat-button class="rounded-btn primary" (click)="formSubmit()">
+					<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
 						<mat-icon>save</mat-icon>
 						{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
@@ -25,7 +25,7 @@
 			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
 				<mat-card class="pt-3 pb-3" appearance="outlined">
 					<mat-card-content>
-						<div class="row">
+						<div class="row" style="row-gap: 0.5rem">
 							<div class="col-4">
 								<mat-form-field class="w-100">
 									<mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
@@ -92,7 +92,7 @@
 							<div class="col-12">
 								<h3 class="mb-4">
 									{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
-									<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
+									<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
 								</h3>
 								<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
 									<div class="col-12">

frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss

@@ -10,11 +10,3 @@
     color: #009700;
   }
 }
-
-::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: var(--primary-color-3);
-}
-
-::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
-    background-color: #b0b0b0;
-}

frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html

@@ -7,7 +7,7 @@
 
 
 	<mat-menu #filterMenu>
-		<div class="container-fluid" (click)="$event?.stopPropagation?.()">
+		<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
 			<div class="row justify-content-between">
 				<div class="col-auto mt-2">
 					<h4>{{'REFERENCE-LISTING.FILTER.TITLE' | translate}}</h4>
@@ -53,12 +53,12 @@
 
 			<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
+					<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
 						{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
 					</button>
 				</div>
 				<div class="col-auto">
-					<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
+					<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
 						{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
 					</button>
 				</div>

frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts

@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
 import { ReferenceFilter } from '@app/core/query/reference.lookup';
+import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
 import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { BaseComponent } from '@common/base/base.component';
@@ -22,11 +23,12 @@ export class ReferenceListingFiltersComponent extends BaseComponent implements O
 
 	// * State
 	internalFilters: ReferenceListingFilters = this._getEmptyFilters();
-
+    accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
 	protected appliedFilterCount: number = 0;
 	constructor(
 		public enumUtils: EnumUtils,
-		public referenceTypeService: ReferenceTypeService
+		public referenceTypeService: ReferenceTypeService,
+        protected fontService: FontAccessibilityService
 	) { super(); }
 
 	ngOnInit() {

frontend/src/app/ui/admin/reference/listing/reference-listing.component.html

@@ -7,7 +7,7 @@
 				<app-navigation-breadcrumb />
 			</div>
 			<div class="col-auto">
-				<button mat-button class="rounded-btn secondary"
+				<button mat-button class="padded-shadow-btn secondary"
 					*ngIf="authService.hasPermission(authService.permissionEnum.EditReference)"
 					[routerLink]="routerUtils.generateUrl(['/references/new/'])">
 					<mat-icon>add</mat-icon>
@@ -101,15 +101,15 @@
 <ng-template #actions let-row="row" let-item>
 	<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
 		<div class="col-auto">
-			<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
+			<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
 				<mat-icon>more_horiz</mat-icon>
 			</button>
 			<mat-menu #actionsMenu="matMenu">
 				<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/references/', row.id])">
-					<mat-icon>edit</mat-icon>{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}}
+					<mat-icon aria-hidden>edit</mat-icon>{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}}
 				</a>
 				<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
-					<mat-icon>delete</mat-icon>
+					<mat-icon aria-hidden>delete</mat-icon>
 					{{'REFERENCE-LISTING.ACTIONS.DELETE' | translate}}
 				</button>
 			</mat-menu>

frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html

@@ -1,70 +1,44 @@
 <div *ngIf="formGroup" class="container-fluid css-colors">
 	<div class="row">
 		<div class="col-12">
-			<div class="row">
+			<div class="row" style="row-gap: 0.5rem">
 
 				<mat-form-field class="col-12 col-md-6">
-					<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}</mat-label>
-					<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColorInput')" required />
+					<mat-label [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-HINT' | translate">
+                        {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}
+                    </mat-label>
+					<input matInput [formControl]="cssColorForm?.get('primaryColorInput')" required />
 					<ngx-colors
 						class="suffix"
 						matSuffix
 						ngx-colors-trigger
 						[overlayClassName]="mr-1"
-						[formControl]="formGroup.get('cssColors')?.get('primaryColor')"
+						[formControl]="cssColorForm?.get('primaryColor')"
 					></ngx-colors>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor')?.getError('backendError').message}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
+					<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('backendError')">{{cssColorForm?.get('primaryColor')?.getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
 				</mat-form-field>
-				<mat-form-field class="col-12 col-md-6">
-					<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-2' | translate}}</mat-label>
-					<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor2Input')" required />
-					<ngx-colors
-						class="suffix"
-						matSuffix
-						ngx-colors-trigger
-						[formControl]="formGroup.get('cssColors')?.get('primaryColor2')"
-					></ngx-colors>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
-				</mat-form-field>
-				<mat-form-field class="col-12 col-md-6">
-					<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-3' | translate}}</mat-label>
-					<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor3Input')" required />
-					<ngx-colors
-						class="suffix"
-						matSuffix
-						ngx-colors-trigger
-						[formControl]="formGroup.get('cssColors')?.get('primaryColor3')"
-					></ngx-colors>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
-				</mat-form-field>
-				<mat-form-field class="col-12 col-md-6">
-					<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR' | translate}}</mat-label>
-					<input matInput [formControl]="formGroup.get('cssColors')?.get('secondaryColorInput')" required />
-					<ngx-colors
-						class="suffix"
-						matSuffix
-						ngx-colors-trigger
-						[formControl]="formGroup.get('cssColors')?.get('secondaryColor')"
-					></ngx-colors>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('secondaryColor')?.getError('backendError').message}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
+                <mat-form-field  class="col-12 pt-2 pb-2 ">
+                    <mat-label>
+                        {{'TENANT-CONFIGURATION-EDITOR.FIELDS.CSS-OVERRIDE' | translate}}
+                    </mat-label>
+                    <textarea
+                        matInput
+                        class="w-100 css-override"
+                        [formControl]="cssColorForm?.get('cssOverride')" 
+                    ></textarea>
+                    <mat-error *ngIf="cssColorForm?.get('cssOverride')?.hasError('backendError')">{{cssColorForm?.get('cssOverride')?.getError('backendError').message}}</mat-error>
                 </mat-form-field>
 			</div>
 		</div>
 		<div class="col-12">
 			<div class="row actions-row">
-				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
+				<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="delete()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
 					</button>
 				</div>
-				<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
+				<div class="col-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
 						{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
 					</button>
 				</div>