From 412b54be5f607f9603c4c785ba3d0818c9a25386 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Mon, 23 Sep 2024 16:53:15 +0300
Subject: [PATCH] change gray color var to #707070, add dark gray color var,
 add accessibility rules to plan-overview page

---
 .../multiple-auto-complete.component.html     |  2 +-
 .../guided-tour/guided-tour.component.scss    |  2 +-
 ...n-template-editor-field-set.component.scss |  8 ++---
 ...ption-template-editor-field.component.scss |  2 +-
 ...ate-editor-section-fieldset.component.scss |  2 +-
 ...ion-template-editor-section.component.scss |  4 +--
 ...description-template-editor.component.scss |  8 ++---
 ...escription-template-table-of-contents.scss |  2 +-
 ...mport-plan-blueprint.dialog.component.scss |  2 +-
 ...ser-invite-to-tenant-dialog.component.scss |  4 +--
 .../annotation-dialog.component.scss          |  4 +--
 .../merge-email-confirmation.component.scss   |  2 +-
 .../unlink-email-confirmation.component.scss  |  2 +-
 .../user-invite-confirmation.component.scss   |  2 +-
 .../contact-content.component.scss            |  2 +-
 .../app/ui/dashboard/dashboard.component.html |  6 ++--
 .../app/ui/dashboard/dashboard.component.scss | 26 +++++++--------
 .../recent-edited-activity.component.scss     |  8 ++---
 .../description-copy-dialog.component.scss    |  2 +-
 ...cription-base-fields-editor.component.scss |  8 ++---
 .../editor/description-editor.component.scss  | 28 ++++++++--------
 ...form-fieldset-editor-dialog.component.scss |  2 +-
 .../field-set-title.component.scss            |  6 ++--
 .../form-section/form-section.component.scss  |  2 +-
 .../description-form.component.scss           |  2 +-
 .../form-progress-indication.component.scss   |  2 +-
 .../new-description.component.scss            |  2 +-
 .../table-of-contents-internal.scss           |  2 +-
 .../table-of-contents.component.scss          |  4 +--
 .../description-listing.component.scss        | 12 +++----
 .../description-filter-dialog.component.scss  |  2 +-
 .../description-listing-item.component.scss   | 18 +++++------
 .../description-overview.component.scss       | 14 ++++----
 ...tart-new-description-dialog.component.scss |  2 +-
 .../ui/faq/dialog/faq-dialog.component.scss   |  2 +-
 .../user-dialog/user-dialog.component.scss    |  2 +-
 .../plan-clone-dialog.component.scss          |  4 +--
 .../plan-deposit-dropdown.component.scss      |  2 +-
 .../plan-invitation-dialog.component.scss     |  4 +--
 .../plan-filter-dialog.component.scss         |  2 +-
 .../plan-listing-item.component.scss          | 20 ++++++------
 .../plan/listing/plan-listing.component.scss  | 14 ++++----
 .../plan-new-version-dialog.component.scss    |  4 +--
 .../start-new-plan-dialog.component.scss      |  4 +--
 .../overview/plan-overview.component.html     | 32 +++++++++----------
 .../overview/plan-overview.component.scss     | 22 ++++++-------
 .../plan-authors/plan-authors.component.scss  |  4 +--
 ...an-form-progress-indication.component.scss |  2 +-
 .../plan-editor.component.scss                | 30 ++++++++---------
 .../plan-finalize-dialog.component.scss       |  2 +-
 .../reference-field.component.html            |  4 +--
 .../reference-field.component.ts              |  3 +-
 .../add-account-dialog.component.scss         |  2 +-
 .../user-profile/user-profile.component.scss  | 10 +++---
 frontend/src/assets/i18n/baq.json             |  5 ++-
 frontend/src/assets/i18n/de.json              |  5 ++-
 frontend/src/assets/i18n/en.json              |  5 ++-
 frontend/src/assets/i18n/es.json              |  5 ++-
 frontend/src/assets/i18n/gr.json              |  5 ++-
 frontend/src/assets/i18n/hr.json              |  5 ++-
 frontend/src/assets/i18n/pl.json              |  5 ++-
 frontend/src/assets/i18n/pt.json              |  5 ++-
 frontend/src/assets/i18n/sk.json              |  5 ++-
 frontend/src/assets/i18n/sr.json              |  5 ++-
 frontend/src/assets/i18n/tr.json              |  5 ++-
 ...rm-validation-errors-dialog.component.scss |  2 +-
 frontend/src/styles.scss                      |  5 +--
 67 files changed, 231 insertions(+), 196 deletions(-)

diff --git a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 2e0faeea3..f4d48ba36 100644
--- a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -19,7 +19,7 @@
 				</mat-chip-grid>
 			</div>
 			<div class="col-12">
-				<input matInput #autocompleteInput [id]="id" [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">
diff --git a/frontend/src/app/library/guided-tour/guided-tour.component.scss b/frontend/src/app/library/guided-tour/guided-tour.component.scss
index 9a3ab042d..a1b94cd70 100644
--- a/frontend/src/app/library/guided-tour/guided-tour.component.scss
+++ b/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;
 		}
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
index 3dac1fdef..fd42b1e7d 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
@@ -75,14 +75,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 +93,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,7 +139,7 @@ $blue-color-light: #5cf7f2;
 
 ::ng-deep label {
     margin: 0;
-    color: #212121;
+    color: var(--dark-gray);
 }
 
 .numbering {
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
index 001ac97cd..8dc0cbffa 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
@@ -24,7 +24,7 @@ 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) ;
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
index b6ae5c388..013221f24 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
@@ -66,7 +66,7 @@ $blue-color-light: #5cf7f2;
     }
   }
   .action-list-label{
-    color: #212121;
+    color: var(--dark-gray);
     font-size: small;
     opacity: 0.6;
   }
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss
index 4289ef3d9..678ec6d54 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss
index 513cd1bb0..c17831232 100644
--- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss
+++ b/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;
 }
@@ -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;
 }
 
@@ -140,7 +140,7 @@ $blue-color-light: #5cf7f2;
 		}
 	}
 	.action-list-label{
-	 color: #212121;
+	 color: var(--dark-gray);
 	 font-size: small;
 	 opacity: 0.6;
 	}
diff --git a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss
index 4bdae917f..cd28e5e0f 100644
--- a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss
+++ b/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;
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
index 3517fba29..687e34f96 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
@@ -9,7 +9,7 @@
 	border-radius: 30px;
 min-width: 101px;
 	height: 43px;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: 500;
 }
 
diff --git a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss
index 1bd8b81b9..5769aa12e 100644
--- a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss
+++ b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss
@@ -23,7 +23,7 @@
 	.hint {
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 	}
 
@@ -45,7 +45,7 @@
 	.select-role {
 		width: 50% !important;
 		font-size: 14px;
-		color: var(--gray-text);
+		color: var(--gray);
 		height: min-content;
 		margin-right: 2rem;
 		border: none;
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
index 65582240f..eadc9692d 100644
--- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
+++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss
@@ -45,10 +45,10 @@ $mat-card-header-size: 40px !default;
 
 .upload-btn {
 	background-color: white;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: bold;
 	box-shadow: 0px 3px 6px #1e202029;
-	border: 2px solid #212121;
+	border: 2px solid var(--dark-gray);
 }
 
 .actions {
diff --git a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss
index e3c437802..ccc605d4a 100644
--- a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss
+++ b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss
@@ -6,7 +6,7 @@
 
 .merge-account-title {
   font-size: 1.25rem;
-  color: #212121;
+  color: var(--dark-gray);
   padding-top: 4.1875rem;
   padding-left: 3.75rem;
   padding-bottom: 4.0625rem;
diff --git a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss
index 36639eb22..7bce22e4a 100644
--- a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss
+++ b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss
@@ -6,7 +6,7 @@
 
 .unlink-account-title {
   font-size: 1.25rem;
-  color: #212121;
+  color: var(--dark-gray);
   padding-top: 4.1875rem;
   padding-left: 3.75rem;
   padding-bottom: 4.0625rem;
diff --git a/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss b/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss
index 608916719..d34c8b83f 100644
--- a/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss
+++ b/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss
@@ -6,7 +6,7 @@
 
 .user-invite-title {
   font-size: 1.25rem;
-  color: #212121;
+  color: var(--dark-gray);
   padding-top: 4.1875rem;
   padding-left: 3.75rem;
   padding-bottom: 4.0625rem;
diff --git a/frontend/src/app/ui/contact/contact-content/contact-content.component.scss b/frontend/src/app/ui/contact/contact-content/contact-content.component.scss
index f969c7a15..2add7b7ed 100644
--- a/frontend/src/app/ui/contact/contact-content/contact-content.component.scss
+++ b/frontend/src/app/ui/contact/contact-content/contact-content.component.scss
@@ -58,6 +58,6 @@ img {
 	opacity: 1;
 min-width: 101px;
 	height: 43px;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: 500;
 }
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html
index 48da01968..ac27a42f7 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.html
+++ b/frontend/src/app/ui/dashboard/dashboard.component.html
@@ -6,7 +6,7 @@
 					<div class="col-12 col-xl-10">
 						<div class="row">
 							<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 pt-2 mr-4">
-								<button mat-icon-button aria-label="close release notifications" (click)="dismissNewReleaseNotification()">
+								<button mat-icon-button aria-label="{{'ALT-TEXT.CLOSE-RELEASE' | translate}}" (click)="dismissNewReleaseNotification()">
                                     <mat-icon>close</mat-icon>
                                 </button>
 								<div class="row new-releases-hint-container m-0">
@@ -27,7 +27,7 @@
 								</div>
 							</div>
 							<div class="card col-auto mt-0 pt-2" [style.display]="isIntroCardVisible ? 'block' : 'none'">
-								<button mat-icon-button  aria-label="close intro card" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
+								<button mat-icon-button  aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
                                     <mat-icon>close</mat-icon>
                                 </button>
 
@@ -168,7 +168,7 @@
 					<div class="col-12 col-xl">
 						<div class="row">
 							<div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
-								<button mat-icon-button (click)="dismissIntroCard()" aria-label="close intro card">
+								<button mat-icon-button (click)="dismissIntroCard()" aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}">
                                     <mat-icon>close</mat-icon>
                                 </button>
 								<div class="d-flex flex-column align-items-center non-auth-title-container">
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss
index ce63b4652..bdd964c05 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -23,7 +23,7 @@
 	text-align: left;
 	font: Bold 20px/30px Roboto;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	padding-left: 40px;
 	padding-right: 55px;
 	opacity: 1;
@@ -34,7 +34,7 @@
 	font-weight: 300;
 	font-size: 1rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	padding-left: 40px;
 	padding-top: 36px;
 	padding-right: 55px;
@@ -43,7 +43,7 @@
 
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 }
 
@@ -108,7 +108,7 @@
 	text-align: left;
 	font: Bold 48px/30px Roboto;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.85;
 	padding-top: 2.5rem;
 	padding-bottom: 0.5rem;
@@ -129,7 +129,7 @@
 	font-weight: 300;
 	font-size: 1rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.6;
 }
 
@@ -138,7 +138,7 @@
 	font-weight: 300;
 	font-size: 1.25rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.6;
 	padding-bottom: 1.2rem;
 }
@@ -192,7 +192,7 @@ input[type="text"] {
 	line-height: 2.8;
 	font-size: 0.875rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: 400;
 }
 
@@ -218,12 +218,12 @@ input[type="text"] {
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .description-card-actions a,
 .plan-card-actions a {
-	color: var(--gray-text) !important;
+	color: var(--gray) !important;
 	text-decoration: none !important;
 }
 
@@ -262,11 +262,11 @@ input[type="text"] {
 }
 
 .empty-list {
-	color: #212121;
+	color: var(--dark-gray);
 	font-size: 1.25rem;
 	font-weight: 300;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.6;
 	display: flex;
 	padding-top: 4.68rem;
@@ -380,7 +380,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
 	text-align: left;
 	font: Bold 30px/34px Roboto;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	padding-left: 40px;
 	padding-right: 55px;
 	opacity: 1;
@@ -391,7 +391,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
 	font-weight: 300;
 	font-size: 1rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	padding-left: 40px;
 	font: normal normal normal 16px/24px Roboto;
 	padding-top: 36px;
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
index bc7a87659..69f697617 100644
--- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
+++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
@@ -34,7 +34,7 @@ input[type="text"] {
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .description-card-actions,
@@ -43,12 +43,12 @@ input[type="text"] {
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .description-card-actions a,
 .plan-card-actions a {
-	color: var(--gray-text) !important;
+	color: var(--gray) !important;
 	text-decoration: none !important;
 }
 
@@ -115,7 +115,7 @@ input[type="text"] {
 	font-weight: 300;
 	font-size: 1.25rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.6;
   }
 
diff --git a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss
index 875ae1252..deeff4946 100644
--- a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss
+++ b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss
@@ -12,7 +12,7 @@
 	border-radius: 30px;
 min-width: 101px;
 	height: 43px;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: 500;
 }
 
diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
index fb703da1e..e0b9481b5 100644
--- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
+++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
@@ -4,7 +4,7 @@
 		text-align: left;
 		font-weight: 400;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 1;
 		margin: 3rem 0rem 3rem 0rem;
 	}
@@ -14,7 +14,7 @@
 		font-weight: 700;
 		font-size: 18px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-top: 1.625rem;
 		margin-bottom: 0.625rem;
@@ -25,7 +25,7 @@
 		font-weight: 400;
 		font-size: 16px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-bottom: 2.125rem;
 	}
@@ -44,7 +44,7 @@
 
 	.input-btn {
 		border: none;
-		color: var(--gray-text);
+		color: var(--gray);
 		background-color: #ffffff00;
 		cursor: pointer;
 	}
diff --git a/frontend/src/app/ui/description/editor/description-editor.component.scss b/frontend/src/app/ui/description/editor/description-editor.component.scss
index 7a19c5ac5..6f5b69968 100644
--- a/frontend/src/app/ui/description/editor/description-editor.component.scss
+++ b/frontend/src/app/ui/description/editor/description-editor.component.scss
@@ -75,7 +75,7 @@
 
   .more-horiz {
     font-size: 28px;
-    color: var(--gray-text);
+    color: var(--gray);
   }
 
   .more-icon :hover {
@@ -112,7 +112,7 @@
   .description-title {
     text-align: left;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     opacity: 0.9;
     font-size: 14px;
     font-weight: 400;
@@ -132,7 +132,7 @@
   .description-subtitle {
     text-align: left;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     font-weight: 700;
     font-size: 16px;
     opacity: 0.9;
@@ -143,7 +143,7 @@
 
 
   .description-discard-btn {
-    border: 1px solid #212121;
+    border: 1px solid var(--dark-gray);
     background-color: transparent;
     font-weight: 700;
     display: flex;
@@ -183,7 +183,7 @@
     text-align: left;
     font-weight: 700;
     font-size: 1rem;
-    color: #212121;
+    color: var(--dark-gray);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -209,7 +209,7 @@
 	height: calc(100vh - 650px);
     overflow-y: auto;
     .main-info {
-      color: #21212194;
+      color: var(--dark-gray)94;
       font-weight: 400;
       cursor: pointer;
     }
@@ -224,7 +224,7 @@
     padding-left: 0.5rem;
     font-size: 0.875rem;
     letter-spacing: 0px;
-    color: var(--gray-text);
+    color: var(--gray);
     opacity: 1;
   }
 
@@ -233,7 +233,7 @@
     font-weight: 300;
     font-size: 20px;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     opacity: 0.6;
     margin: 2.875rem 0rem 2.25rem 0rem;
     padding-left: 1rem;
@@ -245,7 +245,7 @@
         text-align: left;
         font-weight: 400;
         letter-spacing: 0px;
-        color: #212121;
+        color: var(--dark-gray);
         padding: 0.3rem 0.1rem;
         opacity: 0.6;
         cursor: pointer;
@@ -260,13 +260,13 @@
   }
 
   .stepper-list .active {
-    color: #212121;
+    color: var(--dark-gray);
     font-weight: 700;
     opacity: 1;
   }
 
   .stepper-list .active-description {
-    color: #212121;
+    color: var(--dark-gray);
     font-weight: 700;
     opacity: 1;
     .label {
@@ -321,10 +321,10 @@
   }
 
   .previous {
-	color: #212121;
+	color: var(--dark-gray);
 	background: #f5f5f5 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
-	border: 2px solid #212121;
+	border: 2px solid var(--dark-gray);
 	font-weight: 500;
 	cursor: pointer;
   }
@@ -339,7 +339,7 @@
 
   .description-next {
 	background: var(--secondary-color) 0% 0% no-repeat padding-box;
-	color: #212121;
+	color: var(--dark-gray);
 	box-shadow: 0px 3px 6px #1e202029;
 	font-weight: 700;
 	cursor: pointer;
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss
index 9c226f284..f6d1fa6c8 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss
@@ -3,6 +3,6 @@
 	font-weight: 700;
 	font-size: 18px;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.81;
 }
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
index c7e9e0fb0..6c0d5ff2d 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss
@@ -4,7 +4,7 @@
 	font-weight: 700;
 	font-size: 18px;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.81;
 	margin-top: 1.625rem;
 	margin-bottom: 0.625rem;
@@ -47,12 +47,12 @@ h6 {
 
 @keyframes titleFocus {
   0% {
-    color: #212121;
+    color: var(--dark-gray);
   }
 	50% {
 		color: var(--primary-color);
 	}
   100% {
-    color: #212121;
+    color: var(--dark-gray);
   }
 }
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss
index f258b4d1c..6bbccd236 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss
@@ -15,7 +15,7 @@
 		font-weight: 700;
 		font-size: 1rem;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-top: 1.625rem;
 		margin-bottom: 0.625rem;
diff --git a/frontend/src/app/ui/description/editor/description-form/description-form.component.scss b/frontend/src/app/ui/description/editor/description-form/description-form.component.scss
index 4d0a47df9..65fd9b975 100644
--- a/frontend/src/app/ui/description/editor/description-form/description-form.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/description-form.component.scss
@@ -13,7 +13,7 @@
 	text-align: left;
 	font-weight: 400;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 1;
 	margin: 3rem 0rem 3rem 0rem;
 }
diff --git a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
index ef44b4af5..ef9efdf90 100644
--- a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
+++ b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
@@ -1,5 +1,5 @@
 .percentage {
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.7;
 	font-weight: 400;
 	font-size: 0.875rem;
diff --git a/frontend/src/app/ui/description/editor/new-description/new-description.component.scss b/frontend/src/app/ui/description/editor/new-description/new-description.component.scss
index f1065963f..906b8eb3c 100644
--- a/frontend/src/app/ui/description/editor/new-description/new-description.component.scss
+++ b/frontend/src/app/ui/description/editor/new-description/new-description.component.scss
@@ -4,7 +4,7 @@
 		width: 100%;
 		height: 60px;
 		background-color: var(--secondary-color);
-		color: #212121;
+		color: var(--dark-gray);
 		font-size: 1.25rem;
 	}
 
diff --git a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss
index c9978f6a4..0d99002fc 100644
--- a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss
+++ b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss
@@ -24,7 +24,7 @@
 }
 
 .selected {
-  color: #212121;
+  color: var(--dark-gray);
   font-weight: 700 !important;
   opacity: 1 !important;
 }
diff --git a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
index eec33bd38..85082fd8b 100644
--- a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
+++ b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
@@ -35,7 +35,7 @@ span {
   text-decoration: none;
   display: block;
   overflow: hidden;
-  color: #21212194;
+  color: var(--dark-gray)94;
   font-weight: 400;
 
   span {
@@ -48,7 +48,7 @@ span {
 }
 
 .selected {
-  color: #212121 !important;
+  color: var(--dark-gray) !important;
   font-weight: 700 !important;
   opacity: 1 !important;
 }
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.scss b/frontend/src/app/ui/description/listing/description-listing.component.scss
index b6518306f..dd11f92c1 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.scss
+++ b/frontend/src/app/ui/description/listing/description-listing.component.scss
@@ -2,7 +2,7 @@
   text-align: left;
   font-size: 1.25rem;
   font-weight: 300;
-  color: #212121;
+  color: var(--dark-gray);
   padding: 0px;
 }
 
@@ -43,7 +43,7 @@
   text-align: left;
   font: Bold 20px/30px Roboto;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
   padding-left: 40px;
   padding-right: 55px;
   opacity: 1;
@@ -53,7 +53,7 @@
   text-align: left;
   font-weight: 300;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
   padding-left: 40px;
   padding-top: 36px;
   padding-right: 55px;
@@ -62,7 +62,7 @@
 
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 }
 
@@ -78,7 +78,7 @@
   font-weight: 300;
   font-size: 1rem;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
 }
 
 .filter-btn {
@@ -123,7 +123,7 @@
   font-weight: 300;
   font-size: 1.25rem;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
   opacity: 0.6;
 }
 
diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss b/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss
index 6ad258085..ffc035659 100644
--- a/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss
+++ b/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss
@@ -1,6 +1,6 @@
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 }
 
diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
index 1d8a2408b..4b08087eb 100644
--- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
+++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
@@ -1,6 +1,6 @@
 .gray-container {
   letter-spacing: 5px;
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 .container-header {
@@ -12,7 +12,7 @@
 
 .container-header p {
   letter-spacing: 5px;
-  color: var(--gray-text);
+  color: var(--gray);
   padding-top: 10px;
   margin-bottom: 0px;
 }
@@ -57,7 +57,7 @@ h4 > span {
   margin-left: auto;
   margin-bottom: 0px;
   padding-top: 7px;
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 p {
@@ -106,7 +106,7 @@ input[type="text"] {
 	font-weight: 300;
 	line-height: 2.4;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.6;
 }
 
@@ -130,7 +130,7 @@ input[type="text"] {
 	font-size: 0.875rem;
 	font-weight: 400;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 }
 
 .plan-title,
@@ -140,7 +140,7 @@ input[type="text"] {
 	font-size: 1rem;
 	padding-top: 0.75rem;
 	padding-bottom: 0.55rem;
-	color: #212121;
+	color: var(--dark-gray);
 }
 
 .description-subtitle {
@@ -151,7 +151,7 @@ input[type="text"] {
 	font-size: 0.875rem;
 	opacity: 1;
 	align-items: center;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .description-title-draft {
@@ -185,12 +185,12 @@ input[type="text"] {
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .description-card-actions a,
 .plan-card-actions a {
-	color: var(--gray-text) !important;
+	color: var(--gray) !important;
 	text-decoration: none !important;
 }
 
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss
index b50c3dd15..299573ee8 100644
--- a/frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -12,7 +12,7 @@
 .mat-mini-fab {
   width: 2.5em;
   height: 2.5em;
-  color: #212121;
+  color: var(--dark-gray);
   background-color: var(--secondary-color);
 }
 
@@ -82,7 +82,7 @@
 }
 
 .frame-btn {
-  border: 1px solid #212121;
+  border: 1px solid var(--dark-gray);
   color: black;
   background: #ffffff;
 }
@@ -108,7 +108,7 @@
   height: 2.9em;
   background: #ffffff;
   box-shadow: 0px 3px 6px #1e202029;
-  border: 2px solid #212121;
+  border: 2px solid var(--dark-gray);
   border-radius: 30px;
 }
 
@@ -139,7 +139,7 @@
 
 .label-txt,
 .label2-txt {
-  color: var(--gray-text);
+  color: var(--gray);
   font-weight: 400;
 }
 
@@ -167,13 +167,13 @@
 .description-label,
 .header {
   font-size: 1.25em;
-  color: #212121;
+  color: var(--dark-gray);
 }
 
 .desc-txt {
   width: 48.25em;
   font-size: 1em;
-  color: #212121;
+  color: var(--dark-gray);
   margin-bottom: 1.875em;
 }
 
@@ -191,7 +191,7 @@
 
 .doi-label {
   font-size: 1em;
-  color: #212121;
+  color: var(--dark-gray);
   opacity: 0.6;
   margin-bottom: 0.3em;
 }
diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
index db6cbd662..4b42933ac 100644
--- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
+++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss
@@ -29,7 +29,7 @@
 	font-weight: 500;
 	font-size: 1.25rem;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 1;
 }
 
diff --git a/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss b/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss
index a176c4f54..0402f3395 100644
--- a/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss
+++ b/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss
@@ -14,7 +14,7 @@
 
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 	width: auto !important;
 	height: auto !important;
diff --git a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
index d91f7b9b3..3b3965ab5 100644
--- a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
+++ b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
@@ -4,7 +4,7 @@
 }
 
 .profile-settings {
-  color: #212121;
+  color: var(--dark-gray);
   text-align: left;
 }
 
diff --git a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss
index 3d5d641b7..2e857a87c 100644
--- a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss
+++ b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss
@@ -6,7 +6,7 @@
 		font-weight: 700;
 		font-size: 18px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-bottom: 0.625rem;
 	}
@@ -16,7 +16,7 @@
 		font-weight: 700;
 		font-size: 20px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-bottom: 0.625rem;
 	}
diff --git a/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.scss b/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.scss
index 4d8681e21..177e36aa6 100644
--- a/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.scss
+++ b/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.scss
@@ -1,5 +1,5 @@
 .frame-btn {
-	border: 1px solid #212121;
+	border: 1px solid var(--dark-gray);
 	color: black;
 	background: #ffffff;
 	box-shadow: 0px 2px 6px #00000029;
diff --git a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss
index fa7274e68..7238bd021 100644
--- a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss
+++ b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss
@@ -23,7 +23,7 @@
 	.hint {
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 	}
 
@@ -45,7 +45,7 @@
 	.select-role {
 		width: 50% !important;
 		font-size: 14px;
-		color: var(--gray-text);
+		color: var(--gray);
 		height: min-content;
 		margin-right: 2rem;
 		border: none;
diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss b/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss
index 818303e45..f506d1215 100644
--- a/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss
+++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss
@@ -1,6 +1,6 @@
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 }
 
diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
index 678ce7d7d..4eefa35eb 100644
--- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
+++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
@@ -1,6 +1,6 @@
 .gray-container {
   letter-spacing: 5px;
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 .container-header {
@@ -12,7 +12,7 @@
 
 .container-header p {
   letter-spacing: 5px;
-  color: var(--gray-text);
+  color: var(--gray);
   margin-bottom: 0px;
 }
 
@@ -53,7 +53,7 @@ h4 > span {
   margin-left: auto;
   margin-bottom: 0px;
   padding-top: 7px;
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 p {
@@ -61,7 +61,7 @@ p {
 }
 
 .draft-icon {
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 .lock-icon {
@@ -70,7 +70,7 @@ p {
 
 .more-horiz {
   font-size: 28px;
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 .published-icon {
@@ -137,7 +137,7 @@ input[type="text"] {
 	font-weight: 300;
 	line-height: 2.4;
 	letter-spacing: 0px;
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.6;
 }
 
@@ -158,7 +158,7 @@ input[type="text"] {
 	font-size: 1rem;
 	padding-top: 0.75rem;
 	padding-bottom: 0.55rem;
-	color: #212121;
+	color: var(--dark-gray);
 }
 
 .description-subtitle,
@@ -170,7 +170,7 @@ input[type="text"] {
 	font-size: 0.875rem;
 	opacity: 1;
 	align-items: center;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .plan-title-draft,
@@ -205,12 +205,12 @@ input[type="text"] {
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
 	line-height: 4;
-	color: var(--gray-text);
+	color: var(--gray);
 }
 
 .description-card-actions a,
 .plan-card-actions a {
-	color: var(--gray-text) !important;
+	color: var(--gray) !important;
 	text-decoration: none !important;
 }
 
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
index 1a774e5b7..cc2bbae2c 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
@@ -53,7 +53,7 @@
 
 .more-horiz {
   font-size: 28px;
-  color: var(--gray-text);
+  color: var(--gray);
 }
 
 .more-icon :hover {
@@ -64,7 +64,7 @@
   text-align: left;
   font-size: 1.25rem;
   font-weight: 300;
-  color: #212121;
+  color: var(--dark-gray);
   padding: 0px;
 }
 
@@ -105,7 +105,7 @@
   text-align: left;
   font: Bold 20px/30px Roboto;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
   padding-left: 40px;
   padding-right: 55px;
   opacity: 1;
@@ -115,7 +115,7 @@
   text-align: left;
   font-weight: 300;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
   padding-left: 40px;
   padding-top: 38px;
   padding-right: 55px;
@@ -124,7 +124,7 @@
 
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 }
 
@@ -140,7 +140,7 @@
   font-weight: 300;
   font-size: 1rem;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
 }
 
 .filter-btn {
@@ -179,7 +179,7 @@
   font-weight: 300;
   font-size: 1.25rem;
   letter-spacing: 0px;
-  color: #212121;
+  color: var(--dark-gray);
   opacity: 0.6;
 }
 
diff --git a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss
index f5e76a72e..77e50cbb2 100644
--- a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss
+++ b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss
@@ -6,7 +6,7 @@
 		font-weight: 700;
 		font-size: 18px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-bottom: 0.625rem;
 	}
@@ -16,7 +16,7 @@
 		font-weight: 700;
 		font-size: 20px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-bottom: 0.625rem;
 	}
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
index 8d201b43f..3b9ed079e 100644
--- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
+++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
@@ -44,9 +44,9 @@
 
 .upload-btn {
 	background-color: white;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: bold;
-	border: 2px solid #212121;
+	border: 2px solid var(--dark-gray);
 }
 
 .actions {
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.html b/frontend/src/app/ui/plan/overview/plan-overview.component.html
index 5b5abc602..a25271a40 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.html
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.html
@@ -7,7 +7,7 @@
 				</div>
 				<div class="col-12 mb-4 pl-1">
 					<a (click)="goBack()" role="button">
-						<mat-icon class="back-icon pointer">chevron_left</mat-icon>
+						<mat-icon class="back-icon pointer" aria-hidden>chevron_left</mat-icon>
 						<span class="label-txt pointer">{{'PLAN-OVERVIEW.ACTIONS.BACK' | translate}}</span>
 					</a>
 				</div>
@@ -60,24 +60,24 @@
 					<div class="row mb-4" *ngIf="!lockStatus || canClonePlan() || (canDeletePlan() && !isLocked)">
                         <div class="col-auto pr-0">
                             @if(isActive && canEditPlan(plan) && !lockStatus){
-                                <button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
+                                <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.EDIT' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
                                     <mat-icon class="mat-mini-fab-icon">create</mat-icon>
                                 </button>
                             } @else {
                                 @if(!isPublicView){
-                                    <button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
+                                    <button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate" (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.PREVIEW' | translate}}" matTooltipPosition="above">
                                         <mat-icon class="mat-mini-fab-icon">visibility</mat-icon>
                                     </button>
                                 }
                             }
                         </div>
 						<div *ngIf="canClonePlan()" class="col-auto pr-0">
-							<button (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
+							<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.CLONE' | translate" (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
 								<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
 							</button>
 						</div>
 						<div *ngIf="canDeletePlan() && !isLocked" class="col-auto pr-0">
-							<button (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
+							<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.DELETE' | translate" (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
 								<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
 							</button>
 						</div>
@@ -162,10 +162,10 @@
 												<span class="text-truncate">{{selectedModel.doi}}</span>
 											</div>
 											<div class="col-auto d-flex">
-												<button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
+												<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.COPY' | translate" (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
 													<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
 												</button>
-												<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
+												<button [attr.aria-label]="'PLAN-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate" *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'PLAN-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
 													<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank">
 														<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
 													</a>
@@ -182,10 +182,10 @@
 							<div class="col-12">
 								<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
 									<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
-										<div class="row align-items-center" (click)="finalize(plan)">
-											<div class="col-auto pr-0">
+										<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
+											<div class="col-auto pr-0" aria-hidden>
 												<button mat-mini-fab class="finalize-btn">
-													<mat-icon class="mat-mini-fab-icon">check</mat-icon>
+													<mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
 												</button>
 											</div>
 											<div class="col-auto pl-0">
@@ -200,8 +200,8 @@
 									</ng-container>
 									<app-plan-deposit-dropdown *ngIf="(hasDoi(plan) || moreDeposit()) && isFinalizedPlan(plan) && !this.isPublicView && canDepositPlan(plan) && inputRepos.length > 0" [inputRepos]="inputRepos" [plan]="plan" (outputReposEmitter)="afterDeposit($event)"></app-plan-deposit-dropdown>
 									<ng-container *ngIf="isFinalizedPlan(plan) && hasDoi(plan) && !isPublishedPlan(plan) && canFinalizePlan(plan)">
-										<div (click)="reverseFinalization()" class="row mb-3 align-items-center">
-											<div class="col-auto pr-0">
+										<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.REVERSE' | translate }}" (click)="reverseFinalization()" class="row mb-3 align-items-center">
+											<div class="col-auto pr-0" aria-hidden>
 												<button mat-mini-fab class="frame-btn">
 													<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
 												</button>
@@ -214,7 +214,7 @@
 									<ng-container *ngIf="canExportPlan() && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0">
 										<div class="row mb-3 align-items-center">
 											<div class="col-auto pr-0">
-												<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+												<button [attr.aria-label]="'ALT-TEXT.OPEN-MENU' | translate" mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
 													<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
 												</button>
 											</div>
@@ -224,8 +224,8 @@
 										</div>
 									</ng-container>
 									<ng-container *ngIf="canCreateNewVersion()">
-										<div class="row mb-3 align-items-center" (click)="newVersionClicked()">
-											<div class="col-auto pr-0">
+										<div role="button" class="row mb-3 align-items-center" (click)="newVersionClicked()">
+											<div class="col-auto pr-0" aria-hidden>
 												<button mat-mini-fab class="frame-btn">
 													<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
 												</button>
@@ -259,7 +259,7 @@
                                 />
 								<div *ngIf="canInvitePlanUsers()" class="col-12 d-flex align-items-center justify-content-center mt-2">
 									<button mat-raised-button class="invite-btn" (click)="openShareDialog(plan.id,plan.label)">
-										<mat-icon>group_add</mat-icon>
+										<mat-icon ara-hidden>group_add</mat-icon>
 										{{'PLAN-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
 									</button>
 								</div>
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
index 563f40107..90357088b 100644
--- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss
+++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss
@@ -48,7 +48,7 @@
 	background-color: var(--secondary-color);
 	border-radius: 4px;
 	justify-content: space-between;
-	color: #212121;
+	color: #1b1b1b;
 }
 
 .description-finalized-btn {
@@ -56,7 +56,7 @@
 	background-color: #b2f772;
 	border-radius: 4px;
 	justify-content: space-between;
-	color: #212121;
+	color: #1b1b1b;
 }
 
 .show-more-btn {
@@ -68,7 +68,7 @@
 }
 
 .frame-btn {
-	border: 1px solid #212121;
+	border: 1px solid #1b1b1b;
 	color: black;
 }
 
@@ -98,7 +98,7 @@
 	height: 2.9em;
 	background: #ffffff;
 	box-shadow: 0px 3px 6px #1e202029;
-	border: 2px solid #212121;
+	border: 2px solid #1b1b1b;
 	border-radius: 30px;
 }
 // ********TEXT********
@@ -123,7 +123,7 @@
 
 .label-txt,
 .label2-txt {
-	color: var(--gray-text);
+	color: var(--dark-gray);
 	font-weight: 400;
 }
 
@@ -150,12 +150,12 @@
 .plan-label,
 .header {
 	font-size: 1.25em;
-	color: #212121;
+	color: #1b1b1b;
 }
 
 .desc-txt {
 	font-size: 1em;
-	color: #212121;
+	color: #1b1b1b;
 	margin-bottom: 1.875em;
 }
 
@@ -165,7 +165,7 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	letter-spacing: 0px;
-	color: #212121;
+	color: #1b1b1b;
 	opacity: 0.8;
 	font-style: normal;
 	padding-bottom: 0.5rem;
@@ -255,7 +255,7 @@
 }
 
 .add-description-btn {
-	color: #212121 !important;
+	color: #1b1b1b !important;
 }
 
 .add-description-btn:hover {
@@ -268,7 +268,7 @@
 }
 
 ::ng-deep .mat-select-value {
-	color: var(--gray-text) !important;
+	color: var(--gray) !important;
 }
 
 .versions-select {
@@ -276,7 +276,7 @@
 }
 
 .select-repo {
-	border-bottom: 1px solid #212121;
+	border-bottom: 1px solid #1b1b1b;
 }
 
 .plan-btn {
diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss
index 0a1885ba2..1252bb20f 100644
--- a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss
+++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss
@@ -10,11 +10,11 @@
         border-radius: 3px;
     }
     .author-role {
-        color: #a8a8a8;
+        color: var(--gray);
     }
 
     .author-label {
-        color: #212121;
+        color: var(--dark-gray);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss
index 2a203a6dd..c4146ec10 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss
@@ -1,5 +1,5 @@
 .percentage {
-	color: #212121;
+	color: var(--dark-gray);
 	opacity: 0.7;
 	font-weight: 400;
 	font-size: 0.875rem;
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
index bea4b2dff..17d99bb3f 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
@@ -44,13 +44,13 @@
     text-align: left;
     font-weight: 400;
     font-size: 14px;
-    color: #ffffff;
+    color: var(--primary-text);
     opacity: 0.75;
 }
 
 .subtitle {
     text-align: left;
-    color: #ffffff;
+    color: var(--primary-text);
     font-weight: 700;
     font-size: 16px;
     opacity: 1;
@@ -93,7 +93,7 @@
     font-weight: 300;
     font-size: 20px;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     opacity: 0.6;
     margin: 2.875rem 0rem 2.875rem 0rem;
     padding-left: 1rem;
@@ -103,7 +103,7 @@
     text-align: left;
     font-weight: 400;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     padding: 0.3rem 0.1rem;
     opacity: 0.6;
     cursor: pointer;
@@ -116,13 +116,13 @@
 }
   
 .stepper-list .active {
-    color: #212121;
+    color: var(--dark-gray);
     font-weight: 700;
     opacity: 1;
 }
   
 .stepper-list .active-description {
-    color: #212121;
+    color: var(--dark-gray);
     font-weight: 700;
     opacity: 1;
     .label {
@@ -181,10 +181,10 @@ mat-icon.size-16 {
 }
   
 .previous {
-    color: #212121;
+    color: var(--dark-gray);
     background: #f5f5f5 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #1e202029;
-    border: 2px solid #212121;
+    border: 2px solid var(--dark-gray);
     font-weight: 500;
     cursor: pointer;
 }
@@ -229,7 +229,7 @@ mat-icon.size-16 {
     text-align: left;
     font-weight: 400;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     opacity: 1;
     margin: 1rem 0rem 3rem 0rem;
 }
@@ -277,7 +277,7 @@ a:hover {
 		text-align: left;
 		font-weight: 400;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 1;
 		margin: 3rem 0rem 3rem 0rem;
 	}
@@ -298,7 +298,7 @@ a:hover {
 		font-weight: 700;
 		font-size: 18px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-top: 1.625rem;
 		margin-bottom: 0.625rem;
@@ -309,7 +309,7 @@ a:hover {
 		font-weight: 400;
 		font-size: 16px;
 		letter-spacing: 0px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		margin-bottom: 2.125rem;
 	}
@@ -328,7 +328,7 @@ a:hover {
         font-size: 0.875rem;
         font-weight: 400;
         padding: 0rem 0.5rem 0rem 0rem;
-        color: #212121;
+        color: var(--dark-gray);
     }
 
     .disabled-toggle {
@@ -341,7 +341,7 @@ a:hover {
 
     .input-btn {
         border: none;
-        color: var(--gray-text);
+        color: var(--gray);
         background-color: #ffffff00;
         cursor: pointer;
     }
@@ -356,7 +356,7 @@ a:hover {
     font-weight: 700;
     font-size: 18px;
     letter-spacing: 0px;
-    color: #212121;
+    color: var(--dark-gray);
     opacity: 0.81;
     margin-top: 1.625rem;
     margin-bottom: 0.625rem;
diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss
index 66c94be9f..f84d80a7b 100644
--- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss
+++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss
@@ -118,7 +118,7 @@
 	opacity: 1;
 	font-size: 0.87rem;
 	font-weight: 500;
-	color: #212121;
+	color: var(--dark-gray);
 	cursor: pointer;
 }
 
diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.html b/frontend/src/app/ui/reference/reference-field/reference-field.component.html
index a64bbf996..648d6982e 100644
--- a/frontend/src/app/ui/reference/reference-field/reference-field.component.html
+++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.html
@@ -1,6 +1,6 @@
 <mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
 	<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
-	<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
+	<app-multiple-auto-complete [id]="id" placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
 	</app-multiple-auto-complete>
 	<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
 	<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@@ -12,7 +12,7 @@
 </mat-form-field>
 <mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration">
 	<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
-	<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
+	<app-single-auto-complete [id]="id" placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
 	</app-single-auto-complete>
 	<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
 	<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.ts b/frontend/src/app/ui/reference/reference-field/reference-field.component.ts
index 664e044c0..96baa5dcf 100644
--- a/frontend/src/app/ui/reference/reference-field/reference-field.component.ts
+++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.ts
@@ -20,7 +20,7 @@ import { FormService } from '@common/forms/form-service';
 	styleUrls: ['./reference-field.component.scss']
 })
 export class ReferenceFieldComponent extends BaseComponent implements OnInit, OnChanges {
-
+    static nextId = 0
 	@Input() referenceType: ReferenceType = null;
 	@Input() form: UntypedFormGroup = null;
 	@Input() label: string = null;
@@ -29,6 +29,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit, On
 	@Input() hint: string;
 	@Input() placeholder: string;
 	@Input() dependencies: UntypedFormGroup = null;
+    @Input() id: string = `multiple-autocomplete-${ReferenceFieldComponent.nextId++}`;
 
 	referenceToUse: Reference[]= [];
 
diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
index 0f03d9885..f19b398de 100644
--- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
+++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss
@@ -12,7 +12,7 @@
 	.title {
 		font-weight: 700;
 		font-size: 1.25rem;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 1;
 	}
 
diff --git a/frontend/src/app/ui/user-profile/user-profile.component.scss b/frontend/src/app/ui/user-profile/user-profile.component.scss
index 2d74a8c58..9d5020e6a 100644
--- a/frontend/src/app/ui/user-profile/user-profile.component.scss
+++ b/frontend/src/app/ui/user-profile/user-profile.component.scss
@@ -21,7 +21,7 @@
 
 	.user-profile-title {
 		font-size: 1.25rem;
-		color: #212121;
+		color: var(--dark-gray);
 		padding-top: 4.1875rem;
 		padding-left: 3.75rem;
 		padding-bottom: 4.0625rem;
@@ -73,7 +73,7 @@
 	}
 
 	.field-title {
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 0.81;
 		font-size: 1.125rem;
 		font-weight: 500;
@@ -117,7 +117,7 @@
 .mail-text {
 	line-height: 2;
 	letter-spacing: 0.15px;
-	color: #212121;
+	color: var(--dark-gray);
 }
 
 .check-icon {
@@ -128,7 +128,7 @@
 
 .clear-icon {
 	cursor: pointer;
-	color: #212121;
+	color: var(--dark-gray);
 	padding: 0.4rem;
 }
 
@@ -182,7 +182,7 @@
 	span {
 		font-weight: 500;
 		letter-spacing: -0.35px;
-		color: #212121;
+		color: var(--dark-gray);
 		opacity: 1;
 	}
 }
diff --git a/frontend/src/assets/i18n/baq.json b/frontend/src/assets/i18n/baq.json
index f27ff1836..cbb74f4dd 100644
--- a/frontend/src/assets/i18n/baq.json
+++ b/frontend/src/assets/i18n/baq.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json
index 01fcd006a..c9953fe05 100644
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index 02e462b29..2e6c2758e 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -2592,6 +2592,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/es.json b/frontend/src/assets/i18n/es.json
index e496f8f5e..66e473664 100644
--- a/frontend/src/assets/i18n/es.json
+++ b/frontend/src/assets/i18n/es.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/gr.json b/frontend/src/assets/i18n/gr.json
index 37e0eddbe..62fbdf809 100644
--- a/frontend/src/assets/i18n/gr.json
+++ b/frontend/src/assets/i18n/gr.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/hr.json b/frontend/src/assets/i18n/hr.json
index 49d207677..25b5fe848 100644
--- a/frontend/src/assets/i18n/hr.json
+++ b/frontend/src/assets/i18n/hr.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/pl.json b/frontend/src/assets/i18n/pl.json
index 89ad1a65c..b58a2fc8b 100644
--- a/frontend/src/assets/i18n/pl.json
+++ b/frontend/src/assets/i18n/pl.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/pt.json b/frontend/src/assets/i18n/pt.json
index 3b0b3c646..3a49826fd 100644
--- a/frontend/src/assets/i18n/pt.json
+++ b/frontend/src/assets/i18n/pt.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/sk.json b/frontend/src/assets/i18n/sk.json
index 4ab109b3d..9ce4deb38 100644
--- a/frontend/src/assets/i18n/sk.json
+++ b/frontend/src/assets/i18n/sk.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/sr.json b/frontend/src/assets/i18n/sr.json
index 9a2a637c6..439d70042 100644
--- a/frontend/src/assets/i18n/sr.json
+++ b/frontend/src/assets/i18n/sr.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/assets/i18n/tr.json b/frontend/src/assets/i18n/tr.json
index 71f5d7a77..f2f531bb0 100644
--- a/frontend/src/assets/i18n/tr.json
+++ b/frontend/src/assets/i18n/tr.json
@@ -2591,6 +2591,9 @@
         "OPEN-FILTERS": "Open filters",
         "OPEN-PLAN-OVERVIEW": "Open plan overview",
         "OPEN-DESCRIPTION-OVERVIEW": "Open description overview",
-        "MORE-ACTIONS": "More actions"
+        "MORE-ACTIONS": "More actions",
+        "OPEN-MENU-FOR": "Open menu",
+        "CLOSE-RELEASE": "Close release notifications",
+        "CLOSE-INTRO-CARD": "Close intro card"
     }
 }
diff --git a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
index ca17ea154..a5dde4724 100644
--- a/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
+++ b/frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.scss
@@ -51,7 +51,7 @@
 	border-radius: 30px;
 min-width: 101px;
 	height: 43px;
-	color: #212121;
+	color: var(--dark-gray);
 	font-weight: 500;
 }
 
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index efd3f57eb..5592d344d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -11,8 +11,9 @@
     --warning-color: #f44336;
     --primary-text: #ffffff;
     --secondary-text: #000000;
-    --gray-text: #757575; //previously #848484
-    --light-gray: #aaaaaa
+    --gray: #707070; //previously #848484
+    --light-gray: #aaaaaa;
+    --dark-gray: #212121;
 }
 
 // Define your theme with color palettes, typography and density