[ENG-9625], [ENG-8845], [ENG-9076] Fix contrast accessibility issues

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.html

@@ -8,7 +8,12 @@
             {{ 'toast.cookie-consent.message' | translate }}
           </div>
           <div class="row-fixed flex justify-content-end">
-            <p-button link [label]="'toast.cookie-consent.accept' | translate" (onClick)="acceptCookies()"> </p-button>
+            <p-button
+              class="btn-link-dark-blue"
+              link
+              [label]="'toast.cookie-consent.accept' | translate"
+              (onClick)="acceptCookies()"
+            />
           </div>
         </div>
       </ng-template>

src/app/features/project/overview/components/project-overview-toolbar/project-overview-toolbar.component.scss

@@ -1,5 +1,5 @@
 .inactive {
-  color: var(--grey-1);
+  color: var(--grey-4);
 }
 
 .storage {

src/app/shared/components/resource-card/resource-card.component.html

@@ -55,7 +55,7 @@ <h2>
         <div class="flex flex-row gap-1 line-height-3">
           <p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
           <a
-            class="block line-height-4 white-space-normal word-break-word"
+            class="block white-space-normal word-break-word"
             [href]="resource().isPartOf!.absoluteUrl"
             target="_blank"
             rel="noopener noreferrer"
@@ -69,7 +69,7 @@ <h2>
         <div class="flex flex-row gap-1 line-height-3">
           <p class="white-space-nowrap">{{ 'resourceCard.labels.from' | translate }}</p>
           <a
-            class="block line-height-4 white-space-normal"
+            class="block white-space-normal"
             [href]="resource().isContainedBy!.absoluteUrl"
             target="_blank"
             rel="noopener noreferrer"

src/styles/_variables.scss

@@ -30,6 +30,7 @@ $base-font-size: 16px;
   --grey-1: #8b97a4;
   --grey-2: #e0e1e2;
   --grey-3: #eff0f1;
+  --grey-4: #606b7b;
   --grey-outline: #00000029;
   --white: #ffffff;
 

src/styles/overrides/button.scss

@@ -73,3 +73,7 @@
 .copy-icon-btn .p-button {
   height: 1.5rem;
 }
+
+.btn-link-dark-blue {
+  --p-button-link-color: var(--dark-blue-2);
+}

src/styles/overrides/tag.scss

@@ -5,7 +5,7 @@
   --p-tag-warn-background: var(--yellow-2);
   --p-tag-warn-color: var(--yellow-1);
 
-  --p-tag-secondary-background: var(--grey-1);
+  --p-tag-secondary-background: var(--grey-4);
   --p-tag-secondary-color: var(--white);
 
   --p-tag-info-background: var(--bg-blue-2);