add nav & footer color maps & minor fixes

kitconcept · Oct 29, 2024 · 8b47403 · 8b47403
1 parent 750dfed
commit 8b47403
Show file tree

Hide file tree

Showing 8 changed files with 381 additions and 74 deletions.
diff --git a/cypress/tests/a11y/accordionBlock.cy.js b/cypress/tests/a11y/accordionBlock.cy.js
@@ -27,6 +27,8 @@ describe('a11y tests', () => {
         },
       ],
     });
+    // To prevent color contrast error during css transition
+    cy.wait(200);
     cy.checkAccessibility();
   });
 });
diff --git a/packages/volto-light-theme/src/theme/_bgcolor-blocks-layout.scss b/packages/volto-light-theme/src/theme/_bgcolor-blocks-layout.scss
@@ -22,7 +22,7 @@
     color: var(--theme-foreground-color);
   }
 
-  :not(.teaser >) a:not(.item) {
+  a:not(.item):not(:has(> .teaser-item), :has(> .listing-body)) {
     text-decoration: underline;
   }
 
@@ -82,7 +82,7 @@
 #page-document .blocks-group-wrapper.grey .block.slider,
 .block-editor-slider.has--backgroundColor--grey {
   .slider-dot:not(.slider-dot--selected)::after {
-    background: #fff;
+    background: $white;
   }
 }
 
@@ -97,7 +97,7 @@
   // --theme-color: #fff;
   // --theme-high-contrast-color: #ecebeb;
   // --theme-foreground-color: #000;
-  // --theme-low-contrast-foreground-color: #666;
+  // --theme-low-contrast-foreground-color: #555555;
 
   // Page title
   h1.documentFirstHeading {
@@ -139,9 +139,6 @@
 
     // Teaser
     &.teaser {
-      // Victor 2024-10-24: Commented out. Why is the reason of this padding?
-      // padding-top: 25px;
-
       .teaser-item {
         border-color: var(--theme-foreground-color);
       }
@@ -672,6 +669,15 @@
         }
       }
 
+      // Use values assigned to the parent Grid block
+      .block {
+        --theme-high-contrast-color: inherit !important;
+        --theme-color: inherit !important;
+        --theme-high-contrast-color: inherit !important;
+        --theme-foreground-color: inherit !important;
+        --theme-low-contrast-foreground-color: inherit !important;
+      }
+
       .block.teaser {
         padding-top: 0;
         background: var(--theme-high-contrast-color);
@@ -752,7 +758,7 @@
       }
       a,
       p {
-        color: white !important;
+        color: $white !important;
       }
     }
   }
@@ -795,6 +801,14 @@
         color: var(--theme-foreground-color);
       }
     }
+    // Inherit colors from parent Accordion
+    .blocks-group-wrapper.default {
+      --theme-high-contrast-color: inherit !important;
+      --theme-color: inherit !important;
+      --theme-high-contrast-color: inherit !important;
+      --theme-foreground-color: inherit !important;
+      --theme-low-contrast-foreground-color: inherit !important;
+    }
   }
 
   table.ui.table.slate-table-block {
@@ -836,7 +850,7 @@
 
       .ui.basic.button.delete-button {
         &:hover {
-          background: white !important;
+          background: $white !important;
         }
       }
 
@@ -907,7 +921,7 @@
 
           .search-sort-wrapper {
             .ui.basic.compact.icon.button:not(.active) {
-              background: white !important;
+              background: $white !important;
             }
           }
         }
@@ -930,20 +944,79 @@
       }
     }
   }
+
+  // Navigation
+  nav.navigation {
+
+    button.item {
+      color: var(--primary-color, $black);
+    }
+    .submenu-wrapper {
+      .submenu.active {
+        background: var(--accent-color, $lightgrey);
+
+        .submenu-inner {
+          a,
+          h2 {
+            color: var(--accent-foreground-color, $black);
+          }
+
+          a span {
+            &:hover {
+              border-color: var(--accent-foreground-color, $black);
+            }
+          }
+
+          .subitem-wrapper {
+            border-color: var(--accent-foreground-color, $black);
+          }
+
+          button.close {
+            background: none;
+            outline: 1px solid var(--accent-color, $lightgrey);
+
+            &:hover,
+            &:focus {
+              outline-color: var(--accent-foreground-color, $black);
+            }
+
+            svg path {
+              fill: var(--accent-foreground-color, $black);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Footer
+  #footer .footer {
+    background: var(--primary-color, $lightgrey);
+
+    .footer-message {
+      color: var(--primary-foreground-color, $black);
+
+      a {
+        color: var(--primary-foreground-color, $black);
+      }
+    }
+
+    a.item,
+    .footer-branding {
+      color: var(--primary-foreground-color, $black);
+    }
+    li.item {
+      border-color: var(--primary-foreground-color, $black);
+
+    }
+  }
 }
 
 body {
   @include use-theme-colors();
   @property --theme-color {
     inherits: true;
-    initial-value: #fff;
+    initial-value: $white;
     syntax: '<color>';
   }
-
-  :root {
-    --primary-color: #ecebeb; // Footer
-    --primary-foreground-color: #000;
-    --accent-color: #ecebeb; // Fat Menu
-    --accent-foreground-color: #000;
-  }
 }
diff --git a/packages/volto-light-theme/src/theme/_header.scss b/packages/volto-light-theme/src/theme/_header.scss
@@ -412,22 +412,23 @@ body.has-toolbar.has-sidebar {
   .item {
     position: relative;
     color: $black;
+    color: var(--primary-color, $black);
     font-size: 18px;
     font-weight: 600;
     line-height: 24px;
     text-transform: initial;
 
     &.active,
     &:hover {
-      color: var(--theme-color, $black);
+      color: var(--accent-color, $black);
     }
 
     &.active::before,
     &:hover::before {
       position: absolute;
       bottom: -49px;
       width: 100%;
-      border-bottom: 9px solid var(--theme-color, $black);
+      border-bottom: 9px solid var(--accent-color, $black);
       content: '';
     }
   }

diff --git a/packages/volto-light-theme/src/theme/_variables.scss b/packages/volto-light-theme/src/theme/_variables.scss
@@ -44,12 +44,6 @@ $layout-container-width: 1440px !default;
 $default-container-width: 940px !default;
 $narrow-container-width: 620px !default;
 
-// Rest of theme variables
-:root {
-  --text-color: #666;
-  --text-size: 18px;
-}
-
 // Colors
 $white: #fff !default;
 $veryLightGrey: #eee !default;
@@ -65,6 +59,18 @@ $greySmoke: #e4e8ec !default;
 $darkBlue: #023d6b !default;
 $secondary-grey: #ececec !default;
 
+// Rest of theme variables
+:root {
+  --text-color: #666;
+  --text-size: 18px;
+  // --primary-color: $lightgrey; // Footer
+  // --primary-foreground-color: $black;
+  // --accent-color: $lightgrey; // Fat Menu
+  // --accent-foreground-color: $black;
+}
+
+
+
 // Image Aspect Ratio
 $aspect-ratio: var(--image-aspect-ratio, 16/9) !default;
 

diff --git a/packages/volto-light-theme/src/theme/blocks/_image.scss b/packages/volto-light-theme/src/theme/blocks/_image.scss
@@ -114,8 +114,6 @@ figure {
 
     &.center {
       width: 100% !important;
-      // Victor 2024-10-24: Commented out. Why is the reason of this padding?
-      // padding-top: $spacing-large;
       margin-right: auto !important;
       margin-bottom: $spacing-large;
       margin-left: auto !important;

diff --git a/packages/volto-light-theme/src/theme/blocks/_introduction.scss b/packages/volto-light-theme/src/theme/blocks/_introduction.scss
@@ -1,5 +1,17 @@
 #page-document .block.introduction {
   @include vertical-space-introduction();
+
+  & + .block.introduction {
+    margin-top: $spacing-medium;
+  }
+
+  &:has(+ .block.introduction) {
+    margin-bottom: 0;
+  }
+
+  &:has(+ .block.__button) {
+    margin-bottom: 0;
+  }
 }
 
 .block.introduction {

diff --git a/packages/volto-light-theme/src/theme/blocks/_slider.scss b/packages/volto-light-theme/src/theme/blocks/_slider.scss
@@ -46,7 +46,7 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     width: 570px;
     min-height: 321px;
     padding: 60px 50px 60px 100px;
-    background: rgba(0, 0, 0, 0.75);
+    background: var(--accent-color, rgba(0, 0, 0, 0.75)) ;
     color: #fff;
     transform: translateY(-50%);