@eeacms/volto-eea-design-system 1.0.0-beta.4 → 1.0.0-beta.6

package/CHANGELOG.md

@@ -4,7 +4,72 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.0-beta.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.3...1.0.0-beta.4) - 28 February 2023
+### [1.0.0-beta.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.5...1.0.0-beta.6) - 10 March 2023
+
+#### :rocket: New Features
+
+- feat(site): serve Roboto fonts from eea design system package instead of google fonts  #311 from eea/roboto-library [ichim-david - [`f6a1b3e`](https://github.com/eea/volto-eea-design-system/commit/f6a1b3e3864a0bc8602e9c434ff70746bba59f44)]
+
+#### :bug: Bug Fixes
+
+- fix(storybook): add fontDisplay [Giorgos Stamatis - [`078966a`](https://github.com/eea/volto-eea-design-system/commit/078966a6a5c7277d36fcd31bb4c0704bcc43e523)]
+- fix: full-width is now properly sized [Miu Razvan - [`6e2e348`](https://github.com/eea/volto-eea-design-system/commit/6e2e3482d658febbd692112608df14279bed05e7)]
+
+#### :nail_care: Enhancements
+
+- change(colors:) update the design system colour palette  #312 from eea/update-color-palette [ichim-david - [`a5fb694`](https://github.com/eea/volto-eea-design-system/commit/a5fb69465717dbdc0fe8091640a0e46f66199b65)]
+- change(image): copyright position fixes, moved image floating to image-block-container [David Ichim - [`53422e0`](https://github.com/eea/volto-eea-design-system/commit/53422e0ea345a7cb6e8cb07bf9006b48d86ded58)]
+- refactor(storybook): restored site variables [Giorgos Stamatis - [`a48478b`](https://github.com/eea/volto-eea-design-system/commit/a48478bae9bdf1d9275be999e1ec8382f10a2fec)]
+- refactor(docusaurus): added roboto library [Giorgos Stamatis - [`19de7b1`](https://github.com/eea/volto-eea-design-system/commit/19de7b19fe795870102000bfebbf452d88b3a7b1)]
+- refactor(storybook): added roboto library [Giorgos Stamatis - [`e991621`](https://github.com/eea/volto-eea-design-system/commit/e9916215728dda0ff423f8196e7442588058042e)]
+- change(copyright): implemented copyright hover design [David Ichim - [`6b12441`](https://github.com/eea/volto-eea-design-system/commit/6b1244163de7ff58d1529fdd791502c862ee48ec)]
+- refactor(tokens): update colours [Giorgos Stamatis - [`3a2c1e1`](https://github.com/eea/volto-eea-design-system/commit/3a2c1e1da8f0224e08f9f8afac3f0a74f7ce91d3)]
+
+#### :house: Internal changes
+
+- chore(storybook): switched google fonts to true [Giorgos Stamatis - [`4a8cae4`](https://github.com/eea/volto-eea-design-system/commit/4a8cae46582356cc24ec3cd7ec47e692bc67a6a5)]
+- chore(lint): lint [Giorgos Stamatis - [`9b0f125`](https://github.com/eea/volto-eea-design-system/commit/9b0f1256a8b0a583ac7724a8d88259c615d7e0c7)]
+- chore(storybook): lint [Giorgos Stamatis - [`29bc809`](https://github.com/eea/volto-eea-design-system/commit/29bc809ab2e9fa4207b8b067785e6b17e91db3b4)]
+- chore(colours): changed back yellow 6 [Giorgos Stamatis - [`87c9bbc`](https://github.com/eea/volto-eea-design-system/commit/87c9bbc0ec9a2a0f4bf8eeb03525d43ce6f502be)]
+
+#### :house: Documentation changes
+
+- docs(colours): accessibility [Dora Anastasiou - [`ee342aa`](https://github.com/eea/volto-eea-design-system/commit/ee342aa6af3863d243222eaa89709be2ba61f988)]
+- docs(colours): colours update [Dora Anastasiou - [`161007e`](https://github.com/eea/volto-eea-design-system/commit/161007e2480aa79517c4ca772364a12a0756f1af)]
+
+#### :hammer_and_wrench: Others
+
+- test(cypress): Use latest stable Volto for testing [Alin Voinea - [`2051661`](https://github.com/eea/volto-eea-design-system/commit/20516617ae045f48c37a7ac7ad05c3d1090339b3)]
+- Update What's new section [Alin Voinea - [`caa4b5d`](https://github.com/eea/volto-eea-design-system/commit/caa4b5d93affa7b63a332eaed9e73ea161a508cf)]
+- Prepare final release 1.0.0 [Alin Voinea - [`ef4383d`](https://github.com/eea/volto-eea-design-system/commit/ef4383d05b295cbbb377f877522b9f83cd0873ef)]
+- lint fix [David Ichim - [`599f509`](https://github.com/eea/volto-eea-design-system/commit/599f5098904f607bd694dd5d2e642c8820f11b3c)]
+- Back to dev [Alin Voinea - [`80cd3df`](https://github.com/eea/volto-eea-design-system/commit/80cd3df3534e46e52ba246256c3d990a52753bbd)]
+### [1.0.0-beta.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.4...1.0.0-beta.5) - 7 March 2023
+
+#### :nail_care: Enhancements
+
+- change(footer): removed min width and height from links [David Ichim - [`ac33219`](https://github.com/eea/volto-eea-design-system/commit/ac33219fb77f23bb5148355551a7aad9f453d2e7)]
+- change(carousel): tweak size of carousel dots for better touch interaction [David Ichim - [`e1fb823`](https://github.com/eea/volto-eea-design-system/commit/e1fb8230806de2e157a9a5ea87e63765769565b4)]
+
+#### :house: Internal changes
+
+- style(hiddenStructure): Add hiddenStructure utility to be used with h1 heading on frontpage - refs #158717 [Alin Voinea - [`672cca2`](https://github.com/eea/volto-eea-design-system/commit/672cca2401003f56e5ea104f18103ea090e38fd7)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.5 [Alin Voinea - [`e4417e1`](https://github.com/eea/volto-eea-design-system/commit/e4417e121477511c350ae3fbe4e70aadb445ed86)]
+- better useOnScreen hook [Andrei Grigore - [`c214b6b`](https://github.com/eea/volto-eea-design-system/commit/c214b6b76443f81c795ce2f3aa457562ec088b30)]
+- feature(mobile): increased performance by lazy loading footer images #303 from eea/increase_performance [ichim-david - [`80d1df1`](https://github.com/eea/volto-eea-design-system/commit/80d1df1c459680331d486f9e8e6a95c9db0adbf6)]
+- prettier [David Ichim - [`a7f8384`](https://github.com/eea/volto-eea-design-system/commit/a7f838470c1bcc4e2be115d514d92a1b686a5e9b)]
+- fixed less build failure due to changes in footer.less [David Ichim - [`190bc8c`](https://github.com/eea/volto-eea-design-system/commit/190bc8cfa88191b45808f1e27c6e2737ee3d15b1)]
+- useOnScreen default export [andreiggr - [`3e6cfdd`](https://github.com/eea/volto-eea-design-system/commit/3e6cfdd4dcb814aad328f97be7af41af071ccba6)]
+- lazyload bg img on footer also [andreiggr - [`ae07162`](https://github.com/eea/volto-eea-design-system/commit/ae07162ba1b27bff58fed70eaabc28c78c5f45a3)]
+- lazyload footer images [andreiggr - [`a0633c9`](https://github.com/eea/volto-eea-design-system/commit/a0633c9ec4ccfb63a48eb4e4c4a63c90daac1a37)]
+- use aria-labels on dropdown [andreiggr - [`27e1443`](https://github.com/eea/volto-eea-design-system/commit/27e144315416ceace0f01def03b5b24640f5c7da)]
+- role change for accessibility [andreiggr - [`5e758e0`](https://github.com/eea/volto-eea-design-system/commit/5e758e0a7fa8c56ba688d0a43de5890686f14ea3)]
+- minimum tap dimension for mobile [andreiggr - [`a25e9a8`](https://github.com/eea/volto-eea-design-system/commit/a25e9a8ba8a8a0f24d287ed7513e549ae2caab0f)]
+- Increase performance - mobile friendly [dana-cfc4 - [`07d86c8`](https://github.com/eea/volto-eea-design-system/commit/07d86c8e77568f91d50b3a45248de9427140a295)]
+### [1.0.0-beta.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.3...1.0.0-beta.4) - 1 March 2023
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,7 +21,9 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
+    "@fontsource/roboto": "4.5.8",
     "react-countup": "^6.3.0",
+    "react-lazy-load-image-component": "1.5.6",
     "react-slick": "^0.28.1",
     "remixicon": "2.5.0",
     "slick-carousel": "^1.8.1"

package/src/helpers/index.js

@@ -1,2 +1,3 @@
 export useClickOutside from './useClickOutside';
 export usePrevious from './usePrevious';
+export useOnScreen from './useOnScreen';

package/src/helpers/useOnScreen.js

@@ -0,0 +1,31 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+
+function useOnScreen(ref, rootMargin = '0px') {
+  const [isIntersecting, setIntersecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+        threshold: 0,
+        root: null,
+      },
+    );
+    if (ref?.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref?.current) {
+        observer.unobserve(ref.current);
+      }
+      observer.disconnect();
+    };
+  }, [ref, rootMargin]);
+  return isIntersecting;
+}
+
+export default useOnScreen;

package/src/ui/Footer/Footer.jsx

@@ -12,6 +12,7 @@ import FooterHeader from '@eeacms/volto-eea-design-system/ui/Footer/FooterHeader
 import SubFooter from '@eeacms/volto-eea-design-system/ui/Footer/SubFooter';
 import Social from '@eeacms/volto-eea-design-system/ui/Footer/Social';
 import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
+import useOnScreen from '../../helpers/useOnScreen';
 import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 
 /**
@@ -23,9 +24,15 @@ import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 
 const Footer = (props) => {
   const { children } = props;
+
+  const bgImgRef = React.useRef();
+  const onScreen = useOnScreen(bgImgRef);
   return (
     <footer id={'footer'}>
-      <div className="footer-wrapper">
+      <div
+        ref={bgImgRef}
+        className={onScreen ? 'footer-wrapper' : 'footer-wrapper-nobg'}
+      >
         <Container>{children}</Container>
       </div>
     </footer>

package/src/ui/Footer/FooterSites.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Grid, Image } from 'semantic-ui-react';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+
 import PropTypes from 'prop-types';
 
 const Sites = (props) => {
@@ -11,10 +13,14 @@ const Sites = (props) => {
       column.push(
         <Grid.Column className="logo" key={i}>
           <a className="logo" href={item.link}>
-            <Image src={item.src} alt={item.alt}></Image>
+            <LazyLoadComponent>
+              <Image src={item.src} alt={item.alt}></Image>
+            </LazyLoadComponent>
           </a>
           <a className="logo" href={nextItem.link}>
-            <Image src={nextItem.src} alt={nextItem.alt}></Image>
+            <LazyLoadComponent>
+              <Image src={nextItem.src} alt={nextItem.alt}></Image>
+            </LazyLoadComponent>
           </a>
         </Grid.Column>,
       );

package/src/ui/Footer/SubFooter.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Footer from './Footer';
 
 import { Grid, Image } from 'semantic-ui-react';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 const SubFooter = (props) => {
   if (props.children) {
@@ -23,7 +24,9 @@ const SubFooter = (props) => {
               <div className="item">
                 <div className={manager.className}>
                   <a href={manager.link}>
-                    <Image src={manager.src} alt={manager.alt}></Image>
+                    <LazyLoadComponent>
+                      <Image src={manager.src} alt={manager.alt}></Image>
+                    </LazyLoadComponent>
                   </a>
                 </div>
               </div>
@@ -55,7 +58,9 @@ const SubFooter = (props) => {
               <div className="item">
                 <div className={manager.className}>
                   <a href={manager.link}>
-                    <Image src={manager.src} alt={manager.alt}></Image>
+                    <LazyLoadComponent>
+                      <Image src={manager.src} alt={manager.alt}></Image>
+                    </LazyLoadComponent>
                   </a>
                 </div>
               </div>

package/src/ui/Header/Header.jsx

@@ -62,11 +62,13 @@ const TopDropdownMenu = ({
               text={mobileText || text}
               icon={icon || 'chevron down'}
               aria-label="dropdown"
+              role="dropdown"
+              lazyLoad
               closeOnChange={true}
               closeOnBlur={false}
               closeOnEscape={true}
             >
-              <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+              <Dropdown.Menu role="option">{children}</Dropdown.Menu>
             </Dropdown>
           )
         ) : (
@@ -75,12 +77,14 @@ const TopDropdownMenu = ({
             className={className}
             text={mobileText || text}
             icon={icon || 'chevron down'}
+            role="dropdown"
             aria-label="dropdown"
+            lazyLoad
             closeOnChange={true}
             closeOnBlur={false}
             closeOnEscape={true}
           >
-            <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+            <Dropdown.Menu role="option">{children}</Dropdown.Menu>
           </Dropdown>
         )}
       </>

package/templates/eea.hbs

@@ -2,7 +2,7 @@
 title: What's new
 ---
 
-### EEA Design System (1.0.0-beta)
+### EEA Design System (1.0.0)
 
 #### Components ready to be used
 
@@ -10,13 +10,12 @@ The following components are ready to be used as Volto `blocks`, `slate` integra
 - Accordion `block`
 - Call to Action `block`
 - Callout - part of the Description `block`, `slate`
-- Card - part of the Teaser `block` and Listing `block`, it includes several variations like round card e.g., used for Avatar (except the Landscape card variation- image on left/right)
-- Content Box `block styler`
+- Card - part of the Teaser `block` and Listing `block`, it includes several variations like round card e.g., used for Avatar
 - Divider `block`
 - Headings `slate`
 - Hero `block`
 - Item `block` - used for text with an icon (remixicon or custom SVG/image) on the left/right
-- List `slate` - ordered and unordered (description list still WIP)
+- List `slate` - ordered and unordered
 - Quote `block`
 - Statistic `block`
 - Tag `block`
@@ -24,14 +23,13 @@ The following components are ready to be used as Volto `blocks`, `slate` integra
 - Tabs `block`
 - Timeline `block`
 
-#### Work-in-progress
+#### Future releases
 
 Below is a non-exhaustive list of the work-in-progress which is planned for future releases:
 - Navigation Portlet (used on the left/right hand of content) is still WIP and should not be used
 - When using the Table `block`, please be aware of enabling the responsive design manually (it should be on by default in later releases)
 - Description list (dt, dd) is still missing from slate editor
 - Slate enhancements, e.g. the inclusion of various font weights and text alignment (left, centered, right)
-- Better theming engine across several components, e.g., a consistent way to apply Primary, Secondary, and Tertiary colors to elements and automatic inversion of font text to white when necessary.
 - Spacing/padding system via the `block styler`. We do have design-tokens; however, these are not exposed to the volto block styler. We want to add the ability for editors to consistently apply various spacing/padding on certain components in order to allow a better alignment when components are used together.
 - Harmonize component naming across docusarurus, storybook, code, and Volto.
 - Improve docusaurus and storybook with more components, controls, and variations in order to better reflect what is possible in Volto.

package/theme/theme.config

@@ -135,5 +135,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */

package/theme/theme.less

@@ -48,9 +48,13 @@
        Fonts
 -------------------*/
 
-.loadFonts() when (@importGoogleFonts) {
-  @import (css)
-    url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}');
+.loadFonts() {
+  @import (css) '~@fontsource/roboto/latin-300.css';
+  @import (css) '~@fontsource/roboto/latin-400.css';
+  @import (css) '~@fontsource/roboto/latin-500.css';
+  @import (css) '~@fontsource/roboto/latin-700.css';
+  @import (css) '~@fontsource/roboto/latin-400-italic.css';
+  @import (css) '~@fontsource/roboto/latin-700-italic.css';
 }
 
 /*------------------

package/theme/themes/eea/elements/container.overrides

@@ -120,6 +120,11 @@ body {
   margin-left: -50vw !important;
 }
 
+[class~="view-defaultview"] [id="page-document"] > .full-width,
+[class~="view-viewview"] [id="page-document"] > .full-width {
+  max-width: initial !important;
+}
+
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {
   margin-left: 0;
   margin-right: 0;

package/theme/themes/eea/elements/image.overrides

@@ -47,3 +47,74 @@
 .block .ui.massive.image {
   width: @massiveWidth;
 }
+
+
+/*--------------
+  Image block float changes
+---------------*/
+
+.image-block {
+  position: relative;
+}
+
+// remove block.less margin from image, we set margin on block instead
+.block.image.align img {
+  margin-bottom: 0 !important;
+}
+
+// remove float from images, set on block instead
+.block.image.align.right,
+.block.image.align.left {
+  img {
+    max-width: 100% !important;
+    float: none !important;
+    margin: 0 !important;
+  }
+}
+
+/* edit page fixes for float issues */
+#page-edit  .image {
+  max-width: 100%;
+  min-height: @imageMinHeight;
+}
+#page-edit  .image.left,
+#page-edit  .image.right,
+#page-document > .image.left,
+#page-document > .image.right {
+  float: none;
+}
+
+.image-block-container {
+  position: relative;
+}
+
+/* if the image is smaller than the content area the copyright
+  isn't as big as the image unless the image is inline-block
+*/
+.image-block-container.center {
+  display: inline-block;
+}
+
+.image-block-container.right {
+  margin-left: @imageBlockContainerLeftMargin;
+  float: right;
+}
+
+.image-block-container.left {
+  margin-right: @imageBlockContainerRightMargin;
+  float: left;
+}
+
+/* Set max size on image-block-container, by default it's set to block image */
+.image.align:not(.full, .center) .image-block-container {
+  max-width: @imageAlignLargeMaxWidth;
+}
+
+.image.align:not(.full, .center) .image-block-container.medium {
+  max-width: @imageAlignMediumMaxWidth;
+}
+
+.image.align:not(.full, .center) .image-block-container.small {
+  max-width: @imageAlignSmallMaxWidth;
+}
+

package/theme/themes/eea/elements/image.variables

@@ -13,6 +13,14 @@
 @imageVerticalMargin: 0.5rem;
 @imageBorder: 1px solid rgba(0, 0, 0, 0.1);
 
+/* Image block container */
+@imageBlockContainerLeftMargin: @rem-space-4;
+@imageBlockContainerRightMargin: @rem-space-4;
+@imageMinHeight: @rem-space-6;
+@imageAlignLargeMaxWidth: 50%;
+@imageAlignMediumMaxWidth: 25%;
+@imageAlignSmallMaxWidth: 15%;
+
 /*-------------------
        Types
 --------------------*/

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

@@ -14,6 +14,8 @@
         display: flex;
         color: @copyrightContentColor;
         font-size: @copyrightContentFontSize;
+        min-height: @copyrightMinHeight;
+        align-items: @copyrightAlignItems;
         line-height: @copyrightLineHeight;
         gap: @copyrightContentPaddingRight;
     }
@@ -27,3 +29,23 @@
     margin: 0; // override default
   }
 }
+
+
+.copyright-wrapper {
+  position: absolute;
+  z-index: @z-index-8;
+  bottom: @copyrightWrapperBottom;
+  width: 100%;
+  padding-right: @copyrightWrapperPaddingLeft;
+  padding-left: @copyrightWrapperPaddingRight;
+}
+
+.copyright-hover-container {
+  position: absolute;
+  z-index: @z-index-8;
+  bottom: 0;
+  padding: @copyrightHoverContainerPadding;
+  background-color: @copyrightHoverContainerBackgroundColor;
+  border-radius: @copyrightHoverContainerBorderRadius;
+  color: @copyrightHoverContainerColor;
+}

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

@@ -9,3 +9,19 @@
 @copyrightContentFontSize: @font-size-00;
 @copyrightLineHeight: @font-lineheight-0;
 @copyrightContentPaddingRight: @rem-space-1;
+@copyrightWrapperPaddingLeft: @rem-space-3;
+@copyrightWrapperPaddingRight: @rem-space-3;
+@copyrightWrapperBottom: @rem-space-4;
+@copyrightMinHeight: @rem-space-8;
+@copyrightAlignItems: center;
+
+/* Image block */
+@floatImageLeftMaxWidth: 50%;
+@floatImageRightMaxWidth: 50%;
+
+
+
+@copyrightHoverContainerPadding: @rem-space-1 @rem-space-2;
+@copyrightHoverContainerBackgroundColor: @tertiaryColor;
+@copyrightHoverContainerBorderRadius: @rem-space-1;
+@copyrightHoverContainerColor: @grey-1;

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

@@ -21,6 +21,10 @@ footer {
     background-position: @wrapperBackgroundPosition;
     background-size: @mobileWrapperBackgroundSize;
   }
+  .footer-wrapper-nobg {
+    width: @wrapperWidth;
+    padding: @mobileWrapperPadding;
+  }
 }
 
 footer .theme-sites {
@@ -144,6 +148,10 @@ footer .footer-wrapper .menu {
     font-size: @mobileMenuCopyrightFontSize;
     font-weight: @mobileMenuCopyrightFontWeight;
   }
+
+  .contact-block .subcontact {
+    margin-top: @mobileSubcontactBlockMarginTop;
+  }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -221,38 +229,45 @@ footer .footer-wrapper .menu {
   .subfooter .logo-header {
     // To match the figma align
     margin-left: @computerLogoHeaderMarginLeft;
-  }
 
-  .contact-block .subcontact a {
-    font-size: @computerSubContactIconFontSize;
-    margin-right: @computerSubContactIconMarginRight;
-  }
+    .subfooter .item {
+      .header {
+        margin-bottom: @computerItemHeaderMarginBottom;
+      }
 
-  .subfooter .contact {
-    align-items: center;
-    font-size: @contactFontSize;
-    gap: @contactGap;
+    }
 
-    i.big.icon {
-      font-size: @computerContactIconFontSize;
+    .contact-block .subcontact a {
+      font-size: @computerSubContactIconFontSize;
+      margin-right: @computerSubContactIconMarginRight;
     }
-  }
 
-  .subfooter .footer-description {
-    margin: @computerFooterDescriptionMargin;
+    .subfooter .contact {
+      align-items: center;
+      font-size: @contactFontSize;
+      gap: @contactGap;
 
-    p {
-      font-size: @computerFooterDescriptionFontSize;
+      i.big.icon {
+        font-size: @computerContactIconFontSize;
+      }
     }
-  }
 
-  .subfooter .social {
-    margin: @computerSocialIconsMargin;
-  }
+    .subfooter .footer-description {
+      margin: @computerFooterDescriptionMargin;
 
-  .footer .footer-wrapper .menu {
-    a {
-      font-size: @computerMenuFontSize;
+      p {
+        font-size: @computerFooterDescriptionFontSize;
+      }
+    }
+
+    .subfooter .social {
+      margin: @computerSocialIconsMargin;
+    }
+
+    .footer .footer-wrapper .menu {
+      a {
+        font-size: @computerMenuFontSize;
+      }
     }
   }
 }

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

@@ -42,6 +42,7 @@
 @tabletContactGap                   : @rem-space-4;
 @contactGap                         : @rem-space-8;
 @mobileContactIconMarginRight       : @space-3;
+@mobileSubcontactBlockMarginTop     : @space-3;
 @mobileContactIconFontSize          : @font-size-4;
 @computerContactIconFontSize        : @font-size-9;
 @tabletSubContactIconFontSize       : @font-size-0;

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

@@ -75,6 +75,12 @@ h2, h3, h4, h5, h6 {
   margin-bottom: @rem-space-4;
 }
 
+// clear any floats if we add a columns block as a floated image
+// can modify the width of the column block children
+.styled-columnsBlock {
+  clear: both;
+}
+
 // text smaller than body has extra letterspacing as described in docusaurus
 .tiny,
 .caption,

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

@@ -11,6 +11,7 @@
 
 @fontName          : 'Roboto';
 @fontSmoothing     : antialiased;
+@fontDisplay       : swap;
 
 @headerFont        : @fontName, Arial, 'Helvetica Neue', Helvetica, sans-serif;
 @pageFont          : @fontName, Arial, 'Helvetica Neue', Helvetica, sans-serif;

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

@@ -99,3 +99,16 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .fw-light {
   font-weight: @font-weight-3;
 }
+
+.hiddenStructure {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}

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

@@ -23,10 +23,10 @@
 @red-6: #5C1918;
 
 @green-0: #C8FFF8;
-@green-1: #85FFF1;
-@green-2: #00F5D8;
-@green-3: #00CCB4;
-@green-4: #00A390;
+@green-1: #A0E5DC;
+@green-2: #78CAC0;
+@green-3: #50B0A4;
+@green-4: #289588;
 @green-5: #007B6C;
 @green-6: #005248;
 
@@ -36,7 +36,7 @@
 @yellow-3: #FAC50D;
 @yellow-4: #FDAF20;
 @yellow-5: #FF9933;
-@yellow-6: #E56B38;
+@yellow-6: #C35527;
 
 @blue-0: #A0D7FF;
 @blue-1: #47B3FF;
@@ -48,7 +48,7 @@
 
 @blue-grey-0: #DAE8F4;
 @blue-grey-1: #ACCAE5;
-@blue-grey-2: #8EA6C2;
+@blue-grey-2: #87A7C3;
 @blue-grey-3: #6989A5;
 @blue-grey-4: #4C677F;
 @blue-grey-5: #3D5265;

package/theme/themes/eea/views/card.overrides

@@ -370,6 +370,7 @@
   position: relative;
   bottom: 0;
 }
+
 .cards-carousel .slick-dots li button:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;
@@ -390,11 +391,13 @@
   outline-style: auto;
 }
 
-@media only screen and (min-width: @computerBreakpoint) {
-  .cards-carousel .slick-dots li button:before {
-    width: inherit;
-    height: inherit;
+@media only screen and (max-width: @tabletBreakpoint) {
+  .cards-carousel .slick-dots li,
+  .cards-carousel .slick-dots li button {
+    width: @mobileCarouselDotsButtonWidth;
+    height: @mobileCarouselDotsButtonHeight;
   }
+
 }
 
 /*******************************

package/theme/themes/eea/views/card.variables

@@ -346,8 +346,10 @@
 @carouselDotsBorder: 1px solid @darkCerulean;
 @carouselDotsBackgroundColor: @white;
 @carouselDotsActiveBackgroundColor: @darkCerulean;
-@mobileCarouselDotsWidth: 0.875rem;
-@mobileCarouselDotsHeight: 0.875rem;
+@mobileCarouselDotsWidth: 1.25rem;
+@mobileCarouselDotsHeight: 1.25rem;
+@mobileCarouselDotsButtonWidth: 1.875rem;
+@mobileCarouselDotsButtonHeight: 1.875rem;
 
 /* Slick wrapper */
 @slickListMargin: 0 -0.75em;