@eeacms/volto-eea-design-system 0.7.5 → 0.8.1

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/collections/message.overrides

@@ -2,33 +2,32 @@
          Theme Overrides
 *******************************/
 
-/* Text size and weight */
-.ui.message p {
-  font-size: @messageFontSize;
+/* Old custom messages | update in form refactoring
+
+.field-wrapper .ui.message p {
   font-weight: @messageFontWeight;
 }
-
-/* Text color for non state messages */
-.ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
+.field-wrapper .ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
   color: @messageColor;
 }
 
-/* Align icon next to header */
-.ui.icon.message {
+.field-wrapper .ui.icon.message {
   align-items: @messageItemsAlign;
 }
-
-/* Icon margin to align with header text size */
-div.ui.icon.message > .icon,
-div.ui.icon.message > .icon:not(.close) {
+.field-wrapper div.ui.icon.message > .icon,
+.field-wrapper div.ui.icon.message > .icon:not(.close) {
   margin: @iconMargin;
+  line-height: @iconLineHeight;
 }
+*/
 
-.ui.success.message,
-.ui.warning.message,
-.ui.error.message,
-.ui.info.message,
-.ui.positive.message,
-.ui.negative.message {
-  background: @background;
-}
+// No background or border for form messages
+.field-wrapper .ui.success.message,
+.field-wrapper .ui.warning.message,
+.field-wrapper .ui.error.message,
+.field-wrapper .ui.info.message,
+.field-wrapper .ui.positive.message,
+.field-wrapper .ui.negative.message {
+  background: transparent;
+  box-shadow: none;
+}

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

@@ -2,24 +2,32 @@
             Message
 *******************************/
 
+@messageFontWeight: @bold;
+@messageColor: @black;
+@messageItemsAlign: flex-start;
+@iconLineHeight: 1.29;
+@iconMargin: 0.75rem;
 
 /*-------------------
        Elements
 --------------------*/
 
 @verticalMargin: 1em;
-@verticalPadding: 0.5rem;
-@horizontalPadding: 0;
+@verticalPadding: 1.5em;
+@verticalPadding: 1em;
+@horizontalPadding: 1.5em;
 @padding: @verticalPadding @horizontalPadding;
-@background: transparent;
+@background: #F8F8F9;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
-@messageItemsAlign: flex-start;
 
-@borderRadius: @defaultBorderRadius;
-@borderWidth: 0;
+@borderRadius: 0;
+@borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
 @shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-@boxShadow: none;
+@boxShadow:
+  @borderShadow,
+  @shadowShadow
+;
 
 @transition:
   opacity @defaultDuration @defaultEasing,
@@ -29,7 +37,7 @@
 ;
 
 /* Header */
-@headerFontSize: 0.875rem;
+@headerFontSize: @relativeLarge;
 @headerFontWeight: @bold;
 @headerDisplay: block;
 @headerDistance: 0rem;
@@ -37,11 +45,8 @@
 @headerParagraphDistance: 0.15em;
 
 /* Paragraph */
-@messageTextOpacity: 1;
-@messageParagraphMargin: 0;
-@messageColor: @black;
-@messageFontSize: 0.875rem;
-@messageFontWeight: @bold;
+@messageTextOpacity: 0.85;
+@messageParagraphMargin: 0.75em;
 
 /* List */
 @listOpacity: 0.85;
@@ -51,7 +56,7 @@
 @listItemMargin: 0.3em;
 
 /* Icon */
-@iconDistance: 0.3em;
+@iconDistance: @rem-space-4;
 
 /* Close Icon */
 @closeTopDistance: @verticalPadding - @lineHeightOffset;
@@ -65,9 +70,8 @@
 --------------------*/
 
 /* Icon Message */
-@iconMargin: 0.09rem 0.6rem 0 0;
-@iconSize: 1rem;
-@iconOpacity: 1;
+@iconSize: 2em;
+@iconOpacity: 0.8;
 @iconContentDistance: 0rem;
 @iconVerticalAlign: top;
 
@@ -133,10 +137,28 @@
 ;
 
 /* Warning / Positive / Negative / Info */
-@positiveBoxShadow: none;
-@negativeBoxShadow: none;
-@infoBoxShadow: none;
-@warningBoxShadow: none;
-@errorBoxShadow: none;
-@successBoxShadow: none;
+@positiveBoxShadow:
+  0px 0px 0px @borderWidth @positiveBorderColor inset,
+  @shadowShadow
+;
+@negativeBoxShadow:
+  0px 0px 0px @borderWidth @negativeBorderColor inset,
+  @shadowShadow
+;
+@infoBoxShadow:
+  0px 0px 0px @borderWidth @infoBorderColor inset,
+  @shadowShadow
+;
+@warningBoxShadow:
+  0px 0px 0px @borderWidth @warningBorderColor inset,
+  @shadowShadow
+;
+@errorBoxShadow:
+  0px 0px 0px @borderWidth @errorBorderColor inset,
+  @shadowShadow
+;
+@successBoxShadow:
+  0px 0px 0px @borderWidth @successBorderColor inset,
+  @shadowShadow
+;
 

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,46 @@ footer .theme-sites {
   }
 }
 
+@media only screen and (max-width: @largestMobileScreen) {
+  .footer-wrapper > .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+ footer .footer-wrapper .menu .copyright a {
+    font-size: @mobileMenuCopyrightFontSize;
+    font-weight: @mobileMenuCopyrightFontWeight;
+  }
+}
+
 @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 +168,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 +199,9 @@ footer .theme-sites {
     .header {
       font-size: @computerFooterTitleFontSize;
     }
+    .logos .logo img {
+      margin: @computerThemeSitesLogoMargin;
+    }
   }
 
   .subfooter .logo-header {
@@ -188,26 +210,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 +226,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,38 @@
 @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;
+@menuFontWeight                     : @font-weight-4;
 @mobileMenuFontSize                 : @font-size-0;
+@mobileMenuCopyrightFontSize        : @font-size-00;
+@mobileMenuCopyrightFontWeight      : @font-weight-3;
+@mobileMenuFontWeight               : @font-weight-4;
 @computerMenuFontSize               : @font-size-1;

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

@@ -167,7 +167,7 @@
 /* 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; }