Merge pull request #3328 from Andrea-Guevara/AccessibilityCookieSettings

[8.x] Accessibility cookie settings

Author: tdonohue

src/styles/_custom_variables.scss

@@ -147,7 +147,8 @@
   --ds-process-overview-table-user-column-width: 200px;
   --ds-process-overview-table-info-column-width: 250px;
   --ds-process-overview-table-actions-column-width: 80px;
-  
+
   --green1: #1FB300;  // This variable represents the success color for the Klaro cookie banner
   --button-text-color-cookie: #333; // This variable represents the text color for buttons in the Klaro cookie banner
+  --very-dark-cyan: #215E50; // This variable represents the background color of the save cookies button
 }

src/styles/_global-styles.scss

@@ -43,17 +43,39 @@ body {
     .cm-btn.cm-btn-success {
       color: var(--button-text-color-cookie);
       background-color: var(--green1);
-    }
-    .cm-btn.cm-btn-success.cm-btn-accept-all {
-      color: var(--button-text-color-cookie);
-      background-color: var(--green1);
+      font-weight: 600;
     }
   }
 }
 
-.klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a
-{
+.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all {
+  color: var(--button-text-color-cookie);
+  background-color: var(--green1);
+  font-weight: 600;
+}
+
+.klaro .cookie-modal a,
+.klaro .context-notice a,
+.klaro .cookie-notice a {
   color: var(--green1);
+  text-decoration: underline !important;
+}
+
+.klaro .cookie-modal .cm-modal .cm-body span,
+.klaro
+  .cookie-modal
+  .cm-modal
+  .cm-body
+  ul.cm-purposes
+  li.cm-purpose
+  span.cm-required,
+p.purposes,
+.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
+  color: var(--bs-light) !important;
+}
+
+.klaro .cookie-modal .cm-btn.cm-btn-info {
+  background-color: var(--very-dark-cyan) !important;
 }
 
 .media-viewer