@eeacms/volto-eea-design-system 0.7.3 → 0.8.0

package/theme/themes/eea/collections/breadcrumb.overrides

@@ -25,6 +25,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
+    &.active {
+      color: @activeColor;
+    }
+
     img {
       width: @breadcrumbImgWidth;
     }

package/theme/themes/eea/collections/breadcrumb.variables

@@ -46,5 +46,5 @@
 /*-------------------
        States
 --------------------*/
-
+@activeColor: @tertiaryColor;
 @activeFontWeight: @normal;

package/theme/themes/eea/extras/banner.less

@@ -7,19 +7,11 @@
       BANNER
 --------------------*/
 
-@font-face {
-  font-display: swap;
-  font-family: 'Archivo';
-  src: url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
-    format('truetype');
-}
-
 .eea.banner {
   width: 100%;
   color: @white;
   background: @bannerBackgroundColor;
   position: relative;
-  font-family: 'Archivo', sans-serif;
 
   .gradient {
     background: @backgroundGradient;

package/theme/themes/eea/extras/custom.overrides

@@ -11,11 +11,14 @@
     display: none !important;
 }
 
+.homepage #page-document > .hero-block h2 {
+  font-size: @h1;
+}
+
 // remove margin and padding from homepage content-area since we have the bg image over the header
 .homepage .content-area {
     margin-top: 0 !important;
     padding-top: 0 !important;
-
 }
 
 // use homepage text color for color of cards that are within a content-box that has a variant class

package/theme/themes/eea/extras/footer.less

@@ -11,10 +11,10 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: @footerBackgroundGrandient;
+  background: @mobileFooterBackgroundGrandient;
   color: @white;
 
-  .wrapper {
+  .footer-wrapper {
     width: @wrapperWidth;
     padding: @mobileWrapperPadding;
     background-image: @wrapperBackgroundImage;
@@ -26,22 +26,12 @@ footer {
 footer .theme-sites {
   padding: @mobileThemeSitesPadding;
 
-  .header {
-    font-weight: @footerTitleFontWeight;
-  }
-
   .logos .ui.grid {
     align-items: center;
   }
 
-  .logos .logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      margin: auto;
-    }
+  .logos .logo img {
+    margin: @mobileThemeSitesLogoMargin;
   }
 }
 
@@ -50,8 +40,6 @@ footer .theme-sites {
 }
 
 .subfooter .item {
-  margin-top: @mobileItemMarginTop;
-
   .header {
     margin-bottom: @mobileItemHeaderMarginBottom;
     font-size: @mobileFooterTitleFontSize;
@@ -61,15 +49,20 @@ footer .theme-sites {
 }
 
 .subfooter .contact-block {
-  margin-inline: @mobileContactBlockMarginInline;
   margin-bottom: @tabletContactBlockMarginbottom;
 }
 
+.contact-block .subcontact a {
+  font-size: @computerSubcontactIconFontSize;
+  margin-right: @computerSubcontactIconMarginRight;
+  font-weight: @computerSubcontactIconFontWeight;
+}
+
 .subfooter .contact {
-  display: flex;
-  align-items: center;
+  display: block;
   margin: @mobileContactMargin;
-  font-size: @mobileContactFontSize;
+  font-size: @contactFontSize;
+  gap: @contactGap;
 
   a {
     color: @menuLinkColor;
@@ -81,13 +74,10 @@ footer .theme-sites {
   }
 }
 
-.subfooter .address {
-  font-size: @addressFontSize;
-}
-
 .subfooter .social {
   display: flex;
   justify-content: @mobileSocialJustifyContent;
+  margin: @mobileSocialIconsMargin;
   
   a {
     color: @socialIconColor;
@@ -103,18 +93,23 @@ footer .theme-sites {
   }
 }
 
-.subfooter .menu {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: @mobileMenuWidth;
-  margin: @mobileMenuMargin;
+footer .footer-wrapper .menu {
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .copyright {
+    display: flex;
+    justify-content: center;
+  }
 
   a {
     color: @menuLinkColor;
     font-weight: @menuFontWeight;
     font-size: @mobileMenuFontSize;
     cursor: pointer;
+    margin-inline: 12px;
 
     &:hover,
     &:active {
@@ -123,31 +118,70 @@ footer .theme-sites {
   }
 }
 
+@media only screen and (max-width: @largestMobileScreen) {
+  .footer-wrapper > .container {
+    display: flex;
+    flex-direction: column;
+  }
+  .copyright {
+    display: none !important;
+  }
+
+  .subfooter {
+    order: 1
+  }
+
+  .menu {
+    order: 2;
+    position: relative;
+    margin: @mobileMenuMargin;
+  }
+  .menu::after {
+    position: absolute;
+    bottom: 0;
+    border: @mobileMenuBorder;
+    content: " ";
+    display: block;
+    width: 100vw;
+    left: @mobileMenuLeft;
+  }
+  footer .footer-wrapper .menu a {
+    font-weight: @mobileMenuFontWeight;
+  }
+
+  .theme-sites {
+    order: 3;
+  }
+}
+
 @media only screen and (min-width: @tabletBreakpoint) {
+  footer {
+    background: @computerFooterBackgroundGrandient;
+  }
   footer .theme-sites {
     .header {
       font-size: @tabletFooterTitleFontSize;
+      font-weight: @tabletFooterTitleFontWeight;
     }
   }
 
   .subfooter .item {
-    margin-top: @tabletItemMarginTop;
+    .logo img {
+      max-height: 100px;
+    }
 
-    .site.logo {
-      img {
-        width: @tabletSiteLogoWidth;
-        display: @tabletSiteLogoDisplay;
-      }
+    .site.logo img {
+      padding-right: @siteLogoPaddingRight;
+    }
+
+    .contact-block {
+      padding-left: @siteLogoPaddingRight;
     }
 
     .header {
       font-size: @tabletFooterTitleFontSize;
       text-align: left;
     }
-
-    .social a i.icon {
-      font-size: @tabletSocialIconSize;
-    }
   }
 
 
@@ -158,17 +192,26 @@ footer .theme-sites {
   .subfooter .social {
     justify-content: @tabletSocialJustifyContent;
     gap: @tabletSocialGap;
+    margin: @tabletSocialIconsMargin;
+
+    a {
+      i.icon {
+        font-size: @tabletSocialIconSize;
+      }
+    }
   }
 
-  .subfooter .menu {
-    width: @tabletMenuWidth;
-    margin: @tabletMenuMargin;
+  footer .footer-wrapper .menu {
+    .actions {
+      justify-content: flex-end;
+    }
   }
+
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
   footer {
-    .wrapper {
+    .footer-wrapper {
       padding: @computerWrapperPadding;
       background-size: @computerWrapperBackgroundSize;
     }
@@ -180,6 +223,9 @@ footer .theme-sites {
     .header {
       font-size: @computerFooterTitleFontSize;
     }
+    .logos .logo img {
+      margin: @computerThemeSitesLogoMargin;
+    }
   }
 
   .subfooter .logo-header {
@@ -188,26 +234,15 @@ footer .theme-sites {
   }
 
   .subfooter .item {
-    margin-top: @computerItemMarginTop;
-
-    .site.logo {
-      img {
-        width: @computerSiteLogoWidth;
-      }
-    }
-
     .header {
       margin-bottom: @computerItemHeaderMarginBottom;
       font-size: @computerFooterTitleFontSize;
     }
-
-    .social a i.icon {
-      font-size: @computerSocialIconSize;
-    }
   }
 
   .subfooter .contact {
-    font-size: @computerContactFontSize;
+    display: flex;
+    align-items: center;
     margin: @computerContactMargin;
 
     i.big.icon {
@@ -215,8 +250,7 @@ footer .theme-sites {
     }
   }
 
-  .subfooter .menu {
-    width: @computerMenuWidth;
+  .footer .footer-wrapper .menu {
   
     a {
       font-size: @computerMenuFontSize;

package/theme/themes/eea/extras/footer.variables

@@ -2,13 +2,16 @@
             Footer
 *******************************/
 
-@footerBackgroundGrandient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%);
+/* @footerBackgroundGrandient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%); */
+@mobileFooterBackgroundGrandient: linear-gradient(220.4deg, @green-5 8.29%, @blue-grey-6 56.3%, #212D38 89.06%);
+@computerFooterBackgroundGrandient: linear-gradient(212.33deg, @green-5 6.78%, #212D38 69.54%, #212D38 98.23%);
 
 /* Titles */
-@footerTitleFontWeight     : @font-weight-7;
-@mobileFooterTitleFontSize : @font-size-3;
-@tabletFooterTitleFontSize : @font-size-4;
-@computerFooterTitleFontSize: @font-size-6;
+@footerTitleFontWeight      : @font-weight-7;
+@mobileFooterTitleFontSize  : @font-size-1;
+@tabletFooterTitleFontSize  : @font-size-4;
+@computerFooterTitleFontSize: @font-size-4;
+@tabletFooterTitleFontWeight: @font-weight-7;
 
 /* Wrapper */
 @wrapperBackgroundImage              : url(../assets/images/Footer/Extras/footervisual.svg);
@@ -21,13 +24,10 @@
 @computerWrapperPadding              : @space-20 0 @space-18;
 
 /* Theme Sites */
-@mobileThemeSitesPadding            : @space-2 0 @space-8;
-@computerThemeSitesPadding          : @space-4 0 @space-8;
-
-/* Subfooter with logo and contact info */
-@mobileItemMarginTop                : @space-4;
-@tabletItemMarginTop                : @space-8;
-@computerItemMarginTop              : @space-18;
+@mobileThemeSitesPadding            : @space-2 0;
+@computerThemeSitesPadding          : @space-4 0;
+@mobileThemeSitesLogoMargin         : 0 auto @rem-space-8;
+@computerThemeSitesLogoMargin       : 0 auto @rem-space-10;
 
 /* Subfooter Item Header */
 @mobileItemHeaderMarginBottom       : @space-5;
@@ -35,42 +35,39 @@
 @computerLogoHeaderMarginLeft       : -50px;
 
 /* Site Logo */
-@tabletSiteLogoWidth                : 230px;
-@computerSiteLogoWidth              : 250px;
-@tabletSiteLogoDisplay              : inline-block;
+@siteLogoPaddingRight : 20%;
 
 /* Contact Info */
-@mobileContactBlockMarginInline     : 10%;
 @tabletContactBlockMarginInline     : 0;
 @tabletContactBlockMarginbottom     : @space-4;
 @mobileContactMargin                : @space-4 0;
-@computerContactMargin              : @space-5 0;
-@mobileContactFontSize              : @font-size-1;
-@computerContactFontSize            : @font-size-2;
+@computerContactMargin              : @rem-space-050 0;
+@contactFontSize                    : @font-size-3;
+@contactGap                         : @rem-space-8;
 @mobileContactIconMarginRight       : @space-3;
 @mobileContactIconFontSize          : @font-size-4;
-@computerContactIconFontSize        : @font-size-5;
-
-/* Address */
-@addressFontSize                    : @font-size-0;
+@computerContactIconFontSize        : @font-size-9;
+@computerSubcontactIconFontSize     : @font-size-1;
+@computerSubcontactIconMarginRight  : @rem-space-4;
+@computerSubcontactIconFontWeight   : @font-weight-4;
 
 /* Social Icons */
+@mobileSocialIconsMargin            : @rem-space-2 0 @rem-space-8;
+@tabletSocialIconsMargin            : @rem-space-17 0;
 @socialIconColor                    : @white;
 @mobileSocialJustifyContent         : space-around;
-@tabletSocialJustifyContent         : start;
-@tabletSocialGap                    : @space-1;
-@mobileSocialIconSize               : @font-size-5;
-@tabletSocialIconSize               : @font-size-4;
-@computerSocialIconSize             : @font-size-5;
+@tabletSocialJustifyContent         : center;
+@tabletSocialGap                    : @space-3;
+@mobileSocialIconSize               : @font-size-9;
+@tabletSocialIconSize               : @font-size-9;
 
 /* Footer Menu */
-@mobileMenuMargin                   : @space-8 auto 0;
-@tabletMenuMargin                   : @space-13 auto 0;
-@computerMenuMargin                 : @space-20 auto 0;
-@mobileMenuWidth                    : 100%;
-@tabletMenuWidth                    : 350px;
-@computerMenuWidth                  : 500px;
+
 @menuLinkColor                      : @white;
 @menuFontWeight                     : @font-weight-3;
 @mobileMenuFontSize                 : @font-size-0;
+@mobileMenuMargin                   : @rem-space-4 0;
+@mobileMenuBorder                   : 1px solid rgba(249, 249, 249, 0.25);
+@mobileMenuLeft                     : -20px;
+@mobileMenuFontWeight               : 400;
 @computerMenuFontSize               : @font-size-1;

package/theme/themes/eea/extras/header.less

@@ -565,7 +565,11 @@
     }
   }
 }
-#mega-menu .ui.list .item {
+
+#mega-menu .ui.list {
+  margin: 0;
+}
+#mega-menu .item {
   display: flex;
   font-size: @megaMenuListItemFontSize;
   font-weight: @megaMenuListItemFontWeight;
@@ -574,6 +578,10 @@
 
 #mega-menu  a.item {
   color: @megaMenuTextColor;
+  display: @megaMenuTextDisplay;
+  &:hover {
+    text-decoration: @megaMenuTextHoverDecoration;
+  }
 
   i.icon {
     color: @megaMenuTextColor;
@@ -586,7 +594,7 @@
   // To override the grid column paddings
   padding: @megaMenuGlancePaddingLeft !important;
 
-  .ui.list .item {
+  .item {
     font-size: @megaMenuGlanceListItemFontSize;
     font-weight: @megaMenuGlanceListItemFontWeight;
     margin: @megaMenuGlanceListItemMargin;
@@ -607,8 +615,9 @@
   padding-top: @megaMenuContentPaddingTop;
 }
 
-#mega-menu .active > span {
-  border-bottom: 2px solid #FFF;
+#mega-menu .active:not(.title-link) > span {
+  border-left: @megaMenuListItemActiveBorder;
+  padding-left: @megaMenuListItemActivePadding;
 }
 
 /*Mega Menu Accordion - Tablet & Mobile */

package/theme/themes/eea/extras/header.variables

@@ -133,7 +133,9 @@
 /* Mega menu */
 @mobileMegaMenuWidth: 94%;
 @megaMenuBackgroundColor: @darkMidnightBlue;
+@megaMenuTextDisplay: flex;
 @megaMenuTextColor: @white;
+@megaMenuTextHoverDecoration: underline;
 @mobileMegaMenuPadding: @rem-space-4 0;
 @tabletMegaMenuPadding: @rem-space-9;
 @computerMegaMenuPadding: @rem-space-10 0 0 0;
@@ -152,19 +154,20 @@
 @megaMenuListItemFontSize: @font-size-1;
 @megaMenuListItemFontWeight: @font-weight-4;
 @megaMenuListItemPadding: @rem-space-2 0;
-@megaMenuListItemActiveBorder: 2px solid #FFF;
+@megaMenuListItemActiveBorder: 4px solid #FFF;
+@megaMenuListItemActivePadding: 8px;
 
 /* At a glance */
 @megaMenuGlanceBackgroundColor: @secondaryColor;
 @megaMenuGlancePaddingLeft:  @rem-space-8 @rem-space-5;
 @megaMenuGlanceListItemFontSize: @font-size-2;
-@megaMenuGlanceListItemFontWeight: @font-weight-6;
-@megaMenuGlanceListItemMargin: @rem-space-6 0;
+@megaMenuGlanceListItemFontWeight: @font-weight-4;
+@megaMenuGlanceListItemMargin: @rem-space-4 0;
 
 /* Accordion */
 @megaMenuAccordionTitleFontSize: @font-size-3;
 @megaMenuAccordionTitlePadding: @rem-space-2 0;
-@megaMenuAccordionIconFontSize: @font-size-5;
+@megaMenuAccordionIconFontSize: @font-size-9;
 @megaMenuAccordionContentPadding: @rem-space-4 0;
 @megaMenuAccordionTitleBorderBottom: 1px solid rgba(255, 255, 255, 0.25);
 @megaMenuAccordionActiveTitleBorderBottom: 1px solid @white;

package/theme/themes/eea/globals/site.overrides

@@ -4,6 +4,26 @@
 
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
 
+h1, h2, h3, h4, h5, h6 {
+  line-height: @font-lineheight-0;
+  letter-spacing: @font-letterspacing-00;
+}
+
+h2, h3, h4, h5, h6 {
+  color: @headerColor;
+}
+
+.content-area {
+  color: @contentAreaColor;
+}
+
+// text smaller than body has extra letterspacing as described in docusaurus
+.tiny,
+.caption,
+.discreet {
+  letter-spacing: @font-letterspacing-1;
+}
+
 /* Heading size adjustment */
 @media only screen and (max-width: @largestMobileScreen) {
   h1 { font-size: @mobileH1; }

package/theme/themes/eea/globals/site.variables

@@ -9,7 +9,6 @@
 --------------------*/
 
 @fontName          : 'Roboto';
-@secondaryFontName : 'Archivo';
 @fontSmoothing     : antialiased;
 
 @headerFont        : @fontName, Arial, 'Helvetica Neue', Helvetica, sans-serif;
@@ -71,15 +70,16 @@
   Page Heading
 ---------------*/
 
-@headerLineHeight : 1.25;
+@headerLineHeight : 1.2;
 @headerFontWeight : @font-weight-7;
+@headerColor: inherit;
 
-@h1 : unit((48 / @fontSize), rem);
-@h2 : unit((40 / @fontSize), rem);
-@h3 : unit((36 / @fontSize), rem);
-@h4 : unit((24 / @fontSize), rem);
-@h5 : unit((20 / @fontSize), rem);
-@h6 : unit((18 / @fontSize), rem);
+@h1 : unit((44 / @fontSize), rem);
+@h2 : unit((32 / @fontSize), rem);
+@h3 : unit((26 / @fontSize), rem);
+@h4 : unit((20 / @fontSize), rem);
+@h5 : unit((18 / @fontSize), rem);
+@h6 : unit((16 / @fontSize), rem);
 
 @mobileH1: unit((30 / @fontSize), rem);
 @mobileH2: unit((24 / @fontSize), rem);
@@ -181,6 +181,7 @@
 @lineHeight          : @font-lineheight-3;
 @mobileLineHeight    : @font-lineheight-3;
 @textColor           : rgba(0, 0, 0, 1);
+@contentAreaColor    : @tertiaryColor;
 
 /*-------------------
       Paragraph

package/theme/themes/eea/globals/utilities.less

@@ -33,10 +33,15 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
-// Align text
+// Text
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important;}
 .text-right { text-align: right !important; }
+.bold { font-weight: bold !important; }
+
+// Text utilities
+.bold { font-weight: @bold !important; }
+.underline { text-decoration: underline !important; }
 
 // Quotes
 .quoted-wrapper h2::before,

package/theme/themes/eea/tokens/fonts.less

@@ -8,7 +8,7 @@
 @font-weight-8: 800;
 @font-weight-9: 900;
 @font-lineheight-00: .95;
-@font-lineheight-0: 1.1;
+@font-lineheight-0: 1.2;
 @font-lineheight-1: 1.25;
 @font-lineheight-2: 1.375;
 @font-lineheight-3: 1.5;
@@ -16,24 +16,25 @@
 @font-lineheight-5: 2;
 @font-letterspacing-000: -.02em;
 @font-letterspacing-00: -.015em;
-@font-letterspacing-0: -.005em;
-@font-letterspacing-1: .005em;
+@font-letterspacing-0: -.01em;
+@font-letterspacing-1: .01em;
 @font-letterspacing-2: .015em;
 @font-letterspacing-3: .02em;
 @font-letterspacing-4: .075em;
 @font-letterspacing-5: .15em;
 @font-size-00: .75rem;
-@font-size-0: .875rem;
-@font-size-1: 1rem;
-@font-size-2: 1.1rem;
-@font-size-3: 1.25rem;
-@font-size-4: 1.5rem;
-@font-size-5: 2rem;
-@font-size-6: 2.25rem;
-@font-size-7: 2.5rem;
-@font-size-8: 3rem;
-@font-size-9: 3.5rem;
-@font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
-@font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
-@font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
-@font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
+@font-size-0:  .875rem;
+@font-size-1:  1rem;
+@font-size-2:  1.125rem;
+@font-size-3:  1.25rem;
+@font-size-4:  1.5rem;
+@font-size-5:  1.625rem;
+@font-size-6:  1.875rem;
+@font-size-7:  2rem;
+@font-size-8:  2.25rem;
+@font-size-9:  2.5rem;
+@font-size-10: 2.75rem;
+@font-size-fluid-0: clamp(1.125rem, 2vw, 1.25rem);
+@font-size-fluid-1: clamp(1.25rem, 4vw, 1.625rem);
+@font-size-fluid-2: clamp(1.5rem, 6vw, 2rem);
+@font-size-fluid-3: clamp(1.875rem, 9vw, 2.75rem);