fix: subsite light colors contrast (#513)

* fix: light colors contrast * fix: more fixes for subsite and info block * fix: search icon mobile * fix: info and search * fix: search page * fix: search page and pagination * fix: toggles and external links * chore: release.md * fix: block form * fix: small changes subsites * chore: release.md
RedTurtle · Feb 13, 2024 · 1c917f8 · 1c917f8
1 parent 2ee03bd
commit 1c917f8
Show file tree

Hide file tree

Showing 17 changed files with 288 additions and 20 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -32,8 +32,15 @@
 
 ## Versione X.X.X (dd/mm/yyyy)
 
+### Migliorie
+
+- ...
+
 ### Fix
 
+- Sono stati apportati alcuni aggiustamenti ai sottositi con l'intento di migliorare l'esperienza e aumentare l'accessibilità. Ci sono state modifiche, principalmente riguardanti i colori, alla visualizzazione della ricerca, ai blocchi info, al blocco contenuto in primo piano e al blocco icone.
+- È stata corretta la visualizzazione dei pulsanti nel blocco testo per i sottositi.
+- Sono stati corretti alcuni errori nel menu mobile per i sottositi. Ora la lente di ingrandimento è visibile nei sottositi con colori scuri e la freccia nei pulsanti "link ad altro" è del colore del sottosito.
 - Reso il link ai diversi social elencati parlante, ora viene riportato "Seguici su nome_del_social"
 - Sistemato lo skiplink "Vai al contenuto" nella pagina principale di ricerca del sito
 - Migliorato l'HTML semantico per le card del blocco rss per migliorare l'esperienza d'uso con Screen Reader

diff --git a/src/components/ItaliaTheme/Blocks/Info/Edit.jsx b/src/components/ItaliaTheme/Blocks/Info/Edit.jsx
@@ -9,12 +9,8 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { injectIntl } from 'react-intl';
 import cx from 'classnames';
-import {
-  Container,
-  Row,
-  Col,
-  Icon,
-} from 'design-react-kit/dist/design-react-kit';
+import { Container, Row, Col } from 'design-react-kit/dist/design-react-kit';
+import { Icon } from '@italia/components/ItaliaTheme';
 
 import { createContent } from '@plone/volto/actions';
 import { SidebarPortal } from '@plone/volto/components';

diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
@@ -110,7 +110,7 @@ SelectContainer.propTypes = {
 const Option = injectLazyLibs('reactSelect')((props) => {
   const components = props.reactSelect.components;
   return (
-    <div className="select-pill text-primary">
+    <div className="select-pill">
       <components.Option {...props} />
     </div>
   );

diff --git a/theme/ItaliaTheme/Blocks/_info.scss b/theme/ItaliaTheme/Blocks/_info.scss
@@ -37,10 +37,19 @@ $tertiary-hover: darken($gray-border, 10%);
       &.bg-color-true {
         .draftjs-buttons a {
           background-color: #fff;
+          border: 1px solid transparent;
           color: $text-color;
+          span {
+            color: $text-color;
+          }
+
           &:hover {
-            background-color: #000;
+            background-color: $primary;
+            border-color: #fff;
             color: #fff;
+            span {
+              color: #fff;
+            }
           }
         }
       }

diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss
@@ -0,0 +1,51 @@
+@use '../../all_variables' as *;
+
+@mixin info($subsite-primary, $subsite-secondary, $subsite-light-theme) {
+  .public-ui {
+    .infoblock {
+      .bg-alert-primary,
+      .bg-alert-secondary,
+      .bg-alert-tertiary {
+        &.bg-color-true {
+          .draftjs-buttons {
+            a {
+              &:hover {
+                border-color: $body-color;
+                background-color: $subsite-primary;
+                @if $subsite-light-theme {
+                  color: $body-color;
+                  span {
+                    color: $body-color;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .bg-alert-primary {
+        svg.icon {
+          color: $subsite-primary;
+          fill: $subsite-primary;
+        }
+        &.bg-color-true {
+          p,
+          span,
+          svg.icon {
+            color: $body-color;
+            fill: $body-color;
+          }
+        }
+        .draftjs-buttons {
+          a {
+            background-color: $subsite-secondary;
+            color: #fff;
+            span {
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss
@@ -1,6 +1,11 @@
 @use '../../all_variables' as *;
 
-@mixin block($subsite-primary, $subsite-secondary, $subsite-secondary-text) {
+@mixin block(
+  $subsite-primary,
+  $subsite-secondary,
+  $subsite-secondary-text,
+  $subsite-light-theme
+) {
   .container .block {
     .searchSections {
       @if $subsite-secondary != $subsite-primary {
@@ -27,6 +32,11 @@
             }
           }
         }
+        @if $subsite-light-theme {
+          button.rounded-right svg {
+            fill: $body-color !important;
+          }
+        }
       }
     }
   }

diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss
@@ -0,0 +1,18 @@
+@use '../all_variables' as *;
+
+@mixin cms-ui($subsite-primary, $subsite-secondary, $subsite-primary-text) {
+  &.cms-ui {
+    .color-list-widget {
+      .button {
+        &.primary,
+        &.primary.active {
+          background-color: $subsite-primary;
+        }
+        &.secondary,
+        &.secondary.active {
+          background-color: $subsite-secondary;
+        }
+      }
+    }
+  }
+}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss
@@ -0,0 +1,59 @@
+@use '../all_variables' as *;
+
+@mixin main(
+  $subsite-primary,
+  $subsite-secondary,
+  $subsite-primary-text,
+  $subsite-link-color
+) {
+  &.public-ui,
+  &.cms-ui {
+    .draftjs-buttons {
+      a {
+        background-color: $subsite-primary;
+        border-radius: $subsite-primary;
+        color: $subsite-primary-text;
+
+        &:hover,
+        &:active {
+          background-color: darken($subsite-primary, 8);
+          color: $subsite-primary-text;
+        }
+      }
+    }
+    .pagination {
+      .page-item {
+        .page-link {
+          &[aria-current] {
+            border: 1px solid $subsite-primary;
+            color: $subsite-primary;
+          }
+          &:hover {
+            color: $subsite-link-color;
+            svg {
+              fill: $subsite-link-color !important;
+            }
+          }
+        }
+      }
+    }
+    .bg-primary {
+      background-color: $subsite-primary !important;
+    }
+    .bg-alert-primary {
+      border-color: $subsite-primary;
+      &.bg-color-true {
+        background-color: $subsite-primary !important;
+      }
+    }
+    .bg-secondary {
+      background-color: $subsite-secondary !important;
+    }
+    .bg-alert-secondary {
+      border-color: $subsite-secondary;
+      &.bg-color-true {
+        background-color: $subsite-secondary !important;
+      }
+    }
+  }
+}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss
@@ -0,0 +1,13 @@
+@mixin search($subsite-link-color) {
+  .search-results-wrapper {
+    .ordering-widget {
+      .react-select__option--is-focused {
+        border-color: $subsite-link-color !important;
+        box-shadow: 0 0 0 2px $subsite-link-color !important;
+      }
+    }
+  }
+  .toggles label input[type='checkbox']:checked + .lever:after {
+    background-color: $subsite-link-color;
+  }
+}
diff --git a/theme/ItaliaTheme/Subsites/_common.scss b/theme/ItaliaTheme/Subsites/_common.scss
@@ -7,6 +7,7 @@
 @import '~bootstrap-italia/src/scss/functions';
 @import '~bootstrap-italia/src/scss/utilities/colors_vars';
 @import '~bootstrap-italia/src/scss/variables';
+@import 'templates/light-theme-common';
 @import 'mixin';
 @import 'homepage';
 @import '../../site-variables';
diff --git a/theme/ItaliaTheme/Subsites/_mixin.scss b/theme/ItaliaTheme/Subsites/_mixin.scss
@@ -9,6 +9,7 @@
 @use 'bootstrap-italia/custom/buttons' as bs-buttons;
 @use 'bootstrap-italia/custom/chips' as bs-chips;
 @use 'bootstrap-italia/custom/card' as bs-card;
+@use 'bootstrap-italia/custom/forms' as bs-forms;
 @use 'bootstrap-italia/custom/dropdown' as bs-dropdown;
 @use 'bootstrap-italia/custom/linklist' as bs-linklist;
 @use 'bootstrap-italia/custom/navscroll' as bs-navscroll;
@@ -19,8 +20,12 @@
 @use 'ItaliaTheme/Blocks/highlitedContent' as it-highlight;
 @use 'ItaliaTheme/Blocks/argumentsInEvidence' as it-args-evidence;
 @use 'ItaliaTheme/Blocks/searchSections' as it-search-sections;
+@use 'ItaliaTheme/Blocks/info' as it-info;
 @use 'ItaliaTheme/Views/common' as it-views;
 @use 'ItaliaTheme/common' as it-common;
+@use 'ItaliaTheme/cms-ui' as it-cms-ui;
+@use 'ItaliaTheme/search' as it-search;
+@use 'ItaliaTheme/main' as it-main;
 
 @mixin define-subsite(
   $subsite-style,
@@ -78,10 +83,23 @@
         $subsite-secondary-text
       );
       @include bs-card.card($subsite-primary, $subsite-link-color);
+      @include bs-forms.forms($subsite-link-color);
       @include bs-dropdown.dropdown($subsite-link-color);
       @include bs-linklist.linklist($subsite-primary, $subsite-link-color);
       @include bs-navscroll.navscroll($subsite-link-color);
       @include it-footer.footer($subsite-primary, $subsite-primary-text);
+      @include it-main.main(
+        $subsite-primary,
+        $subsite-secondary,
+        $subsite-primary-text,
+        $subsite-link-color
+      );
+      @include it-cms-ui.cms-ui(
+        $subsite-primary,
+        $subsite-secondary,
+        $subsite-primary-text
+      );
+      @include it-search.search($subsite-link-color);
       @include it-card-image-evidence.card($subsite-link-color);
       @include it-complete-link.block(
         $subsite-secondary,
@@ -93,8 +111,15 @@
       @include it-search-sections.block(
         $subsite-primary,
         $subsite-secondary,
-        $subsite-secondary-text
+        $subsite-secondary-text,
+        $subsite-light-theme
       );
+      @include it-info.info(
+        $subsite-primary,
+        $subsite-secondary,
+        $subsite-light-theme
+      );
+
       @include it-views.common(
         $subsite-primary,
         $subsite-secondary,
@@ -111,10 +136,12 @@
           color: color-hover($subsite-link-color);
         }
       }
-
-      .icon-primary {
-        fill: $subsite-primary !important;
-      }
+    }
+    .icon-primary {
+      fill: $subsite-primary !important;
+    }
+    .btn-link {
+      color: $subsite-link-color;
     }
   }
 }
diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss
@@ -0,0 +1,18 @@
+@use '../../all_variables' as *;
+
+@mixin forms($subsite-link-color) {
+  .public-ui .form-check {
+    [type='checkbox'],
+    [type='radio'] {
+      &:checked + label {
+        &::after {
+          border-color: $subsite-link-color;
+          background-color: $subsite-link-color;
+        }
+        &::before {
+          border-color: $subsite-link-color;
+        }
+      }
+    }
+  }
+}
diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss
@@ -44,13 +44,12 @@
           a {
             &.rounded-icon {
               svg {
-                @if $subsite-light-theme {
-                  fill: $subsite-primary-text;
-                } @else {
-                  fill: $subsite-primary;
-                }
+                fill: $subsite-primary-text;
               }
             }
+            &.search-link {
+              outline-color: $subsite-primary-text !important;
+            }
           }
         }
       }

diff --git a/theme/ItaliaTheme/Subsites/templates/_light-pink.scss b/theme/ItaliaTheme/Subsites/templates/_light-pink.scss
@@ -17,5 +17,13 @@ body.subsite-light-pink {
         }
       }
     }
+    .infoblock {
+      .bg-alert-primary {
+        svg.icon {
+          color: $subsite-light-pink-secondary;
+          fill: $subsite-light-pink-secondary;
+        }
+      }
+    }
   }
 }