subsite light colors contrast

RELEASE.md

@@ -30,6 +30,18 @@
 - ...
 -->
 
+## 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.
+
 ## Versione 7.24.2 (11/01/2024)
 
 ### Migliorie

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';

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>
   );

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;
+            }
           }
         }
       }

theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss

@@ -0,0 +1,37 @@
+@use '../../all_variables' as *;
+
+@mixin info($subsite-primary, $subsite-light-theme) {
+  .public-ui,
+  &.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.bg-color-true {
+        p,
+        span,
+        svg.icon.left-image {
+          color: $body-color;
+          fill: $body-color;
+        }
+      }
+    }
+  }
+}

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;
+          }
+        }
       }
     }
   }

theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss

@@ -0,0 +1,12 @@
+@use '../all_variables' as *;
+
+@mixin cms-ui($subsite-primary, $subsite-primary-text) {
+  &.cms-ui {
+    .color-list-widget {
+      .button.primary,
+      .button.primary.active {
+        background-color: $subsite-primary;
+      }
+    }
+  }
+}

theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss

@@ -0,0 +1,45 @@
+@use '../all_variables' as *;
+
+@mixin main($subsite-primary, $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;
+      }
+    }
+  }
+}

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;
+  }
+}

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';

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,18 @@
         $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-primary-text,
+        $subsite-link-color
+      );
+      @include it-cms-ui.cms-ui($subsite-primary, $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 +106,11 @@
       @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-light-theme);
+
       @include it-views.common(
         $subsite-primary,
         $subsite-secondary,
@@ -111,10 +127,15 @@
           color: color-hover($subsite-link-color);
         }
       }
-
-      .icon-primary {
-        fill: $subsite-primary !important;
+      .external-link {
+        fill: $subsite-link-color !important;
       }
     }
+    .icon-primary {
+      fill: $subsite-primary !important;
+    }
+    .btn-link {
+      color: $subsite-link-color;
+    }
   }
 }

theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss

@@ -0,0 +1,8 @@
+@use '../../all_variables' as *;
+
+@mixin forms($subsite-link-color) {
+  .public-ui .form-check [type='checkbox']:checked + label::after {
+    border-color: $subsite-link-color;
+    background-color: $subsite-link-color;
+  }
+}

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;
+            }
           }
         }
       }

theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss

@@ -0,0 +1,56 @@
+body {
+  &.subsite-light {
+    &-teal,
+    &-pink,
+    &-blue,
+    &-yellow {
+      .public-ui {
+        .icon-primary {
+          fill: $pager-font-color !important;
+        }
+      }
+      &.public-ui,
+      &.cms-ui {
+        .pagination {
+          .page-item {
+            .page-link[aria-current] {
+              border: 1px solid $pager-font-color !important;
+              color: $pager-font-color !important;
+            }
+          }
+        }
+      }
+      .block.highlitedContent {
+        .bg-primary .card .card-body {
+          .card-title a,
+          .card-text {
+            color: $body-color;
+          }
+          .categoryicon-top {
+            .text,
+            .icon,
+            .data {
+              color: $body-color;
+              fill: $body-color;
+            }
+          }
+        }
+      }
+      .search-container {
+        .filter-wrapper {
+          &.select-filter {
+            .react-select__control {
+              .react-select__placeholder,
+              .react-select__single-value {
+                color: $body-color !important;
+              }
+              .react-select__indicators svg {
+                fill: $body-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

theme/bootstrap-override/bootstrap-italia/_headercenter.scss

@@ -15,7 +15,7 @@
 
       .it-search-wrapper {
         a.search-link {
-          outline: $header-center-bg-color 2px solid !important;
+          outline: $header-center-bg-color 1px solid !important;
 
           &:focus {
             box-shadow: 0 0 0 5px $focus-outline-color !important;

theme/extras/_search.scss

@@ -107,6 +107,7 @@ body.search-modal-opened {
     }
 
     .react-select__option--is-focused {
+      color: #fff;
       border-color: var(--focus-outline-color) !important;
       box-shadow: 0 0 0 2px var(--focus-outline-color) !important;
       outline: none !important;