@eeacms/volto-eea-design-system 0.9.3 → 0.9.4

package/CHANGELOG.md

@@ -4,7 +4,38 @@ 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).
 
-### [0.9.3](https://github.com/eea/volto-eea-design-system/compare/0.9.2...0.9.3) - 3 October 2022
+### [0.9.4](https://github.com/eea/volto-eea-design-system/compare/0.9.3...0.9.4) - 19 October 2022
+
+#### :bug: Bug Fixes
+
+- fix(header): hero text going over the logo and menu on mobile resolutions [David Ichim - [`1434508`](https://github.com/eea/volto-eea-design-system/commit/1434508f5995d4316dfb2fd18fdc7926a4ece6ee)]
+- fix(edit-interface): block chooser and power user menu item colors when inside content-box [David Ichim - [`7aee4f1`](https://github.com/eea/volto-eea-design-system/commit/7aee4f1619a0d798b5fd8d90844a780c25aca019)]
+- fix(content-box): z-index of box-inner and added underline to slate links [David Ichim - [`c8b7c7e`](https://github.com/eea/volto-eea-design-system/commit/c8b7c7e41df39e1bf6377401a7aad4220287d454)]
+- fix(content-box): adding of underline to links [David Ichim - [`c2f5f0f`](https://github.com/eea/volto-eea-design-system/commit/c2f5f0f45963e48342edb0046d84b945ffe4b6a8)]
+
+#### :nail_care: Enhancements
+
+- change(statistics): tweaked margin of statistics so that they don't overflow over context boxes [David Ichim - [`b4a8e33`](https://github.com/eea/volto-eea-design-system/commit/b4a8e33dfaa716f38ac9ce5448d400c74ef9ba62)]
+- change(Banner): Show label in metadata field [kreafox - [`1acda3c`](https://github.com/eea/volto-eea-design-system/commit/1acda3c53739b610b501a53baf10226769929d2d)]
+- change(Banner): Add subtitle subcomponent [kreafox - [`bb67f4c`](https://github.com/eea/volto-eea-design-system/commit/bb67f4c83a2ff0e17958116fc4a52a426ba64a70)]
+- change(statistics): use theme colors with css variable for easy color customization [David Ichim - [`fb72a01`](https://github.com/eea/volto-eea-design-system/commit/fb72a012e81eba73fbace58317a52b5cdda31ee5)]
+- change(colors): introduced css variables for primary colors #247 [ichim-david - [`ac80825`](https://github.com/eea/volto-eea-design-system/commit/ac8082590f978ab953ece70082e06b124c292ddf)]
+- change(colors): added backgroundColorSupplementary color variable [David Ichim - [`1f5262a`](https://github.com/eea/volto-eea-design-system/commit/1f5262af2b90d2ffd9dd5560232f3bf47bcc85e3)]
+- change(colors): added backgroundColor color variable [David Ichim - [`b7e6831`](https://github.com/eea/volto-eea-design-system/commit/b7e68311f77a724c49a3cf858a76239ca5f6876c)]
+- change(accordion): allow customization of accordion title background color [David Ichim - [`6590baf`](https://github.com/eea/volto-eea-design-system/commit/6590baf1716867eabe897e765ae1924122ba2333)]
+- change(list,bullet): color is no longer primary instead it's text color css variant [David Ichim - [`8c04670`](https://github.com/eea/volto-eea-design-system/commit/8c046704871c7202406ff71b280a8a34e195e54d)]
+- change(quote): use secondary css var for easier color replacement [David Ichim - [`7a32312`](https://github.com/eea/volto-eea-design-system/commit/7a3231228c2eb9b420cc7b59a4a07fba96643e5e)]
+- change(item): moved svg filter definitions to item.overrides [David Ichim - [`de70366`](https://github.com/eea/volto-eea-design-system/commit/de703661065648968903bb6b46efc13d19c51d2b)]
+- change(tags, items): use text color with css variable for content color for easy customization [David Ichim - [`6660e2e`](https://github.com/eea/volto-eea-design-system/commit/6660e2e49c6e732a13283ad7c922c5a5091bffc1)]
+- change(content-box): override primary text color to white as well [David Ichim - [`28b43c7`](https://github.com/eea/volto-eea-design-system/commit/28b43c72b9fcfeb153ac7e734bbbca67f2e42111)]
+- change(colors): in lists and callouts to allow color changes [David Ichim - [`940d1b8`](https://github.com/eea/volto-eea-design-system/commit/940d1b8ed815b1a38f78d7602f0b221b48fe21f9)]
+- change(styling): modified naming of theme css variables [David Ichim - [`a332961`](https://github.com/eea/volto-eea-design-system/commit/a332961e1c4d55cdee3a8bcdf652f53cf03e251b)]
+- change(accordion): accordion titles with themes colors can now be modified by css variables [David Ichim - [`e2ac13e`](https://github.com/eea/volto-eea-design-system/commit/e2ac13ea56a74b2f7a22abc274bc94c770fbe3a2)]
+
+#### :hammer_and_wrench: Others
+
+- Include changes in the storybook [kreafox - [`a4d9fa4`](https://github.com/eea/volto-eea-design-system/commit/a4d9fa4c631a6a1ec0d7d525721fd32c5ff01d9c)]
+### [0.9.3](https://github.com/eea/volto-eea-design-system/compare/0.9.2...0.9.3) - 4 October 2022
 
 #### :bug: Bug Fixes
 
@@ -16,6 +47,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :nail_care: Enhancements
 
+- change(jenkins): added yarn policy for storybook building [ichim-david - [`3d1b844`](https://github.com/eea/volto-eea-design-system/commit/3d1b844efeea40b99c00c9aa97089e0a0be58a57)]
 - change(docusaurus): typography updates [ichim-david - [`60a93a4`](https://github.com/eea/volto-eea-design-system/commit/60a93a4aece4e478ae13c2dfe697fd3703aa178a)]
 - change(accordion): allow customization of accordion title with css variables [David Ichim - [`15e7d27`](https://github.com/eea/volto-eea-design-system/commit/15e7d27f02c640df582f51a51ef36e645723f842)]
 - change(content-box): added css variables that will set text color and background for children [David Ichim - [`86cac53`](https://github.com/eea/volto-eea-design-system/commit/86cac531cc94386b6022e1be80dba826b39f2443)]
@@ -50,6 +82,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Merge pull request #243 from eea/develop [ichim-david - [`576564c`](https://github.com/eea/volto-eea-design-system/commit/576564ce395ee6ac9e74bcb19d5c4f0b4cd3c33b)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`4a5be6e`](https://github.com/eea/volto-eea-design-system/commit/4a5be6eec78dae230626e61ea2c77e7f3c62510d)]
 - Back to dev [Alin Voinea - [`b251255`](https://github.com/eea/volto-eea-design-system/commit/b251255a7ed14d8290717726d86eaf54b87aa2d4)]
 ### [0.9.0](https://github.com/eea/volto-eea-design-system/compare/0.8.1...0.9.0) - 19 September 2022
 
@@ -805,6 +838,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - prettier changes [David Ichim - [`134da52`](https://github.com/eea/volto-eea-design-system/commit/134da52549b9d5eac5a12b7ad3005073500ac2c4)]
+- [JENKINSFILE] remove debug, add error per stage [valentinab25 - [`903eecd`](https://github.com/eea/volto-eea-design-system/commit/903eecdb6bcbb8d73cff5e447d80c85e2a2c906d)]
+- [JENKINSFILE] mention comment author in comment [valentinab25 - [`39a26aa`](https://github.com/eea/volto-eea-design-system/commit/39a26aa1ff0f35e93e8df9f442c29c5ab79ff493)]
+- [JENKINSFILE] format PR comments [valentinab25 - [`739438c`](https://github.com/eea/volto-eea-design-system/commit/739438c64950c745d630d1998314a2bed595b23a)]
+- [JENKINSFILE] Add failure comment, no jenkins fail [valentinab25 - [`c325bf1`](https://github.com/eea/volto-eea-design-system/commit/c325bf14f3fb0da150f2a56cda0a9f03d8d8a628)]
 ### [0.2.3](https://github.com/eea/volto-eea-design-system/compare/0.2.2...0.2.3) - 29 April 2022
 
 #### :rocket: New Features
@@ -1229,6 +1266,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - set profile section overflow to auto [nileshgulia1 - [`71ab47f`](https://github.com/eea/volto-eea-design-system/commit/71ab47f89a433233c14b394c3824e607dd18a393)]
 - remove segment custom width [nileshgulia1 - [`1d3ea40`](https://github.com/eea/volto-eea-design-system/commit/1d3ea40f98bbdc1eab95b4da739a659b5e29ec16)]
 - fix profile section css overflow [nileshgulia1 - [`db5126f`](https://github.com/eea/volto-eea-design-system/commit/db5126fc902e191d1e18fb7e4c54877c8d8786e6)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`647a6e3`](https://github.com/eea/volto-eea-design-system/commit/647a6e3e2093f2c4884c356eb148453551c8f33f)]
 - fix warning related to proptype [nileshgulia1 - [`946c6c6`](https://github.com/eea/volto-eea-design-system/commit/946c6c6bc9dece0985ae4b9f9cad6ece2be0ff2c)]
 - removed override already present in card.less [ichim-david - [`50d2ab2`](https://github.com/eea/volto-eea-design-system/commit/50d2ab26f85c8f409da02ec128cc1df34848ca69)]
 - update [Miu Razvan - [`bbcab87`](https://github.com/eea/volto-eea-design-system/commit/bbcab87ef4c8475f347f0daf4ab7e428e69c2316)]
@@ -1315,6 +1353,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - remove segment custom width [nileshgulia1 - [`4a60d84`](https://github.com/eea/volto-eea-design-system/commit/4a60d84d5fe76578b7760aa1dad6eef9a20916a7)]
 - Reformat header.less [Tiberiu Ichim - [`1f99dfc`](https://github.com/eea/volto-eea-design-system/commit/1f99dfc82c165304ca5600ce5138c1233615ab69)]
 - fix profile section css overflow [nileshgulia1 - [`8fd2654`](https://github.com/eea/volto-eea-design-system/commit/8fd265413149f1b5e033dffa0fbcb5ef5ecad15f)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6051724`](https://github.com/eea/volto-eea-design-system/commit/6051724437a38675e659c797bb5586ef81286ec0)]
 - fix warning related to proptype [nileshgulia1 - [`824b9be`](https://github.com/eea/volto-eea-design-system/commit/824b9beff77aae139882cd50a1d670a02ec6f723)]
 - refactor breadcrumbs component, make it functional and customizable [nileshgulia1 - [`4ec374e`](https://github.com/eea/volto-eea-design-system/commit/4ec374e20565eb0a5aed0ff67a02cd6f77eba1f0)]
 - removed override already present in card.less [ichim-david - [`93c4e5a`](https://github.com/eea/volto-eea-design-system/commit/93c4e5aac9cc85ff2cc6c04180f6655d5f5616dc)]
@@ -1883,6 +1922,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`3af46d2`](https://github.com/eea/volto-eea-design-system/commit/3af46d2b14fa0b1ef44736f25b0f9ac93b23d18d)]
 - Refs #140454  updated eea-design-system readme with extra info on package contents [David Ichim - [`d2efc3d`](https://github.com/eea/volto-eea-design-system/commit/d2efc3ddae7b91efc82cf3bce8fb8e42d696a780)]
 - Refs #140454 add h1 to the list of elements that are max 800px and centered [David Ichim - [`7d3c30f`](https://github.com/eea/volto-eea-design-system/commit/7d3c30f409aa4cb43810839f8960589456cc1b2e)]
+- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`8d657d0`](https://github.com/eea/volto-eea-design-system/commit/8d657d056cde5163cfe90ac66bc973f55d82e5e9)]
 ### [0.1.0](https://github.com/eea/volto-eea-design-system/compare/0.0.1...0.1.0) - 17 November 2021
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.jsx

@@ -49,11 +49,17 @@ Banner.Content = ({ children, actions }) => {
 };
 
 Banner.Title = ({ children }) => <p className="title">{children}</p>;
+Banner.Subtitle = ({ children }) => <p className="subtitle">{children}</p>;
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 
 Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
   if (hidden || !value) return '';
-  return <span className={`field ${type}`}>{value}</span>;
+  return (
+    <span className={`field ${type}`}>
+      {label && <>{label}: </>}
+      {value}
+    </span>
+  );
 };
 
 export default Banner;

package/src/ui/Banner/Banner.stories.jsx

@@ -86,6 +86,7 @@ const Template = (args) => (
         </>
       }
     >
+      <Banner.Subtitle>{args.subtitle}</Banner.Subtitle>
       <Banner.Title>{args.title}</Banner.Title>
       {args.metadata && (
         <Banner.Metadata>
@@ -106,6 +107,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  subtitle: 'Lorem ipsum dolor',
   metadata: [
     { hidden: false, value: 'Briefing', type: 'type' },
     { hidden: false, value: 'Published Date', type: 'date' },

package/src/ui/Header/HeaderSearchPopUp.js

@@ -10,23 +10,41 @@ function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
 
   return (
     <div id="search-box" ref={nodeRef}>
-      <Container>
-        <div className="wrapper">
-          <Input
-            ref={searchInputRef}
-            className="search"
-            icon={{ className: 'ri-search-line', link: true }}
-            placeholder="Search..."
-            fluid
-          />
-          {/* <div className="action">
+      <form>
+        <Container>
+          <div className="wrapper">
+            <Input
+              ref={searchInputRef}
+              className="search"
+              icon={{ className: 'ri-search-line', link: true }}
+              placeholder="Search..."
+              fluid
+            />
+            {/* <div className="action">
             <Button icon labelPosition="left" className="search">
               <Icon name="search" />
               Advanced Search
             </Button>
           </div> */}
-        </div>
-      </Container>
+          </div>
+        </Container>
+      </form>
+
+      <div className="advanced-search">
+        <Container>
+          <p>
+            Looking for more information? Try searching the full EEA website
+            content
+          </p>
+          <a
+            href="/"
+            className="ui button white inverted"
+            title="Advanced search"
+          >
+            Go to full site search
+          </a>
+        </Container>
+      </div>
     </div>
   );
 }

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

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

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

@@ -1,7 +1,7 @@
 /*******************************
              Table
 *******************************/
-@tableHoverBackgroundColor: #F9F9F9;
+@tableHoverBackgroundColor: @backgroundColorCSSVar;
 
 /*-------------------
        Element

package/theme/themes/eea/definitions/views/item.less

@@ -61,18 +61,6 @@
 /*--------------
       Item
 ---------------*/
-// color item images that are svg files
-.item.primary img {
-    filter: @itemPrimaryFilterColor;
-}
-
-.item.secondary img {
-    filter: @itemSecondaryFilterColor;
-}
-
-.item.tertiary img {
-    filter: @itemTertiaryFilterColor;
-}
 
 .ui.items > .item:after {
   display: block;

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

@@ -78,6 +78,9 @@
   max-width: 100%;
 }
 
+.accordion-title:not(.active) .ui.input input {
+  color: @textColorCSSVar;
+}
 .ui.input input {
   border: @border;
 
@@ -115,6 +118,7 @@ textarea.fluid {
     background: transparent;
     color: @white;
     font-size: 16px;
+    font-weight: @bold;
   }
 
   i.icon {

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

@@ -47,7 +47,7 @@
 @imageAlign: top;
 
 /* Item */
-@itemColor: @primaryColor;
+@itemColor: @textColorCSSVar;
 
 /* Content */
 @contentDistance: 0.5em;
@@ -58,7 +58,7 @@
 /* Header */
 @itemHeaderFontFamily: @headerFont;
 @itemHeaderFontWeight: @bold;
-@itemHeaderColor: @textColor;
+@itemHeaderColor: @textColorCSSVar;
 
 /* Description */
 @itemDescriptionColor: rgba(0, 0, 0, 0.7);
@@ -170,19 +170,19 @@
 
 @bulletOpacity: 1;
 @bulletCharacter: '•';
-@bulletColor: @primaryColor;
-@bulletLinkColor: @primaryColor;
+@bulletColor: @textColorCSSVar;
+@bulletLinkColor: @primaryColorCSSVar;
 @bulletVerticalAlign: top;
 @bulletChildDistance: @bulletDistance;
 
 /* Horizontal Bullets */
-@horizontalBulletColor: @primaryColor;
+@horizontalBulletColor: @textColorCSSVar;
 @horizontalBulletSpacing: @bulletDistance + 0.5em;
 
 /* Ordered List */
 @orderedCountName: ordered;
 @orderedCountContent: counters(ordered, ".") " ";
-@orderedCountColor: @primaryColor;
+@orderedCountColor: inherit;
 @orderedCountDistance: 1.25rem;
 @orderedCountOpacity: 1;
 @orderedCountTextAlign: right;

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

@@ -8,10 +8,10 @@
 --------------------*/
 
 .eea.banner {
+  position: relative;
   width: 100%;
-  color: @white;
   background: @bannerBackgroundColor;
-  position: relative;
+  color: @white;
 
   .gradient {
     background: @backgroundGradient;
@@ -32,6 +32,14 @@
         line-height: @mobileTitleLineHeight;
       }
 
+      .subtitle {
+        max-width: @subtitleMaxWidth;
+        margin: @mobileSubtitleMargin;
+        font-size: @mobileSubtitleFontSize;
+        font-weight: @subtitleFontWeight;
+        line-height: @mobileSubtitleLineHeight;
+      }
+
       .metadata {
         font-size: @mobileMetadataFontSize;
         line-height: @mobileMetadataLineHeight;
@@ -47,8 +55,8 @@
 
       .actions {
         display: flex;
-        justify-content: flex-end;
         align-items: @mobileActionsAlignItems;
+        justify-content: flex-end;
 
         .action {
           .ui.basic.inverted.button {
@@ -64,21 +72,22 @@
             }
 
             i.icon {
-              opacity: @bannerActionButtonIconOpacity;
               margin: @mobileBannerActionButtonMargin;
               font-size: @mobileBannerActionButtonIconFontSize;
+              opacity: @bannerActionButtonIconOpacity;
             }
           }
         }
       }
     }
   }
+
   .image {
-    background-repeat: @imageBackgroundRepeat;
-    background-size: @imageBackgroundSize;
-    background-position: @imageBackgroundPosition;
     width: 100%;
     height: 100%;
+    background-position: @imageBackgroundPosition;
+    background-repeat: @imageBackgroundRepeat;
+    background-size: @imageBackgroundSize;
 
     .gradient {
       background-image: @backgroundGradientWithImage;
@@ -104,6 +113,7 @@
 
   .actions {
     flex-flow: column;
+
     i.icon {
       color: @sharePopupActionsIconColor;
     }
@@ -132,9 +142,9 @@
         padding: @tabletContentPadding;
 
         .title {
+          margin: @tabletTitleMargin;
           font-size: @tabletTitleFontSize;
           font-weight: @titleFontWeight;
-          margin: @tabletTitleMargin;
           line-height: @tabletTitleLineHeight;
         }
 
@@ -144,8 +154,8 @@
         }
 
         .actions {
-          align-items: @tabletActionsAlignItems;
           flex-direction: @tabletActionsFlexDirection;
+          align-items: @tabletActionsAlignItems;
 
           .action {
             min-width: @tabletActionsActionMinWidth;
@@ -170,8 +180,8 @@
     min-width: @tabletSharePopupMinWidth;
 
     .actions {
-      flex-flow: row;
       display: flex;
+      flex-flow: row;
 
       .action {
         display: inherit;
@@ -192,10 +202,16 @@
       padding: @computerContentPadding;
 
       .title {
-        font-size: @computerTitleFontSize;
         margin: @computerTitleMargin;
+        font-size: @computerTitleFontSize;
         line-height: @computerTitleLineHeight;
       }
+
+      .subtitle {
+        margin: @computerSubtitleMargin;
+        font-size: @computerSubtitleFontSize;
+        line-height: @computerSubtitleLineHeight;
+      }
     }
   }
 }

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

@@ -36,6 +36,16 @@
 @tabletTitleMargin         : 0 0 0.813rem 0;
 @computerTitleMargin       : 0 0 1.125rem 0;
 
+/* Subtitle */
+@subtitleFontWeight        : @bold;
+@subtitleMaxWidth          : 100%;
+@mobileSubtitleFontSize    : 0.875rem;
+@computerSubtitleFontSize  : 1.125rem;
+@mobileSubtitleLineHeight  : 1rem;
+@computerSubtitleLineHeight: 1.625rem;
+@mobileSubtitleMargin      : 0 0 1.125rem 0;
+@computerSubtitleMargin    : 0 0 1.25rem 0;
+
 /* Metadata */
 @metadataTypeFontWeight    : @bold;
 @mobileMetadataFontSize    : 0.75rem;

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

@@ -2,11 +2,11 @@
             Callout
 *******************************/
 /* Body */
-@mobileCalloutBorderLeft : @5px solid @secondaryColor;
-@tabletCalloutBorderLeft : @10px solid @secondaryColor;
+@mobileCalloutBorderLeft : @5px solid @borderColorSecondaryCSSVar;
+@tabletCalloutBorderLeft : @10px solid @borderColorSecondaryCSSVar;
 
 /* Text */
-@quoteColor            : @japaneseIndigo;
+@quoteColor            : @textColorCSSVar;
 @mobileQuoteFontSize   : 1rem;
 @tabletQuoteFontSize   : @h6;
 @computerQuoteFontSize : @h5;

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

@@ -28,7 +28,6 @@
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
     position: relative;
-    z-index: 1;
   }
 
   &.primary {
@@ -46,15 +45,23 @@
   }
 }
 
-[class*="content-box"] a {
-  text-decoration: underline;
-}
 .content-box[class*="ary"] {
   --bg-color: transparent;
+  --border-color-secondary: #FFF;
   --text-color: #FFF;
-  --text-color-hover: @grey-1;
+  --text-color-primary: #FFF;
+  --text-color-secondary: #FFF;
+  --text-color-tertiary: #FFF;
+  --text-color-hover: @backgroundColorSupplementary;
 }
 // inherit link
-.content-box[class*="ary"] a {
+.content-box[class*="ary"] a:not(.ui, .item) {
   color: inherit;
+  text-decoration: underline;
+}
+
+// inherit color for slate links within context boxes
+.content-box .slate-editor-link {
+  color: inherit;
+  text-decoration: underline;
 }

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

@@ -15,9 +15,8 @@
   font-size: @h1;
 }
 
-// remove margin and padding from homepage content-area since we have the bg image over the header
+// remove 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;
 }
 
@@ -74,16 +73,32 @@
   font-weight: inherit;
 }
 
-// inherit color for slate links within context boxes
-.content-box .slate-editor-link {
-  color: inherit;
-}
 
 // customize error class from volto-slate to our color of red
 .error {
     color: @red-5;
 }
 
+.power-user-menu,
+.blocks-chooser {
+  --text-color: @textColor;
+}
+.blocks-chooser {
+  .searchbox {
+    height: auto !important;
+  }
+  .input {
+    width: auto !important;
+  }
+  .clear-search-button {
+    padding: 0.5rem;
+  }
+  .icon {
+    margin-right: 0 !important;
+  }
+}
+
+
 // ensure background of content-box goes above the content area
 // draft image for non published pages
 .view-viewview:not(.wf-state-published) .content-area {

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

@@ -27,10 +27,10 @@
   background: @topSectionBackground;
 
   .ui.container {
+    z-index: @topSectionZindex;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    z-index: @topSectionZindex;
   }
 }
 
@@ -47,12 +47,12 @@
 }
 
 .top.bar .ui.dropdown {
-  border: none !important;
+  max-width: @dropdownMaxWidth;
   height: auto !important;
+  padding: @mobileDropdownPadding;
+  border: none !important;
   border-radius: @defaultBorderRadius;
   color: @topSectionItemColor;
-  padding: @mobileDropdownPadding;
-  max-width: @dropdownMaxWidth;
 }
 
 .top.bar .ui.active.visible.dropdown {
@@ -71,16 +71,16 @@
 }
 
 .top.bar .ui.dropdown .menu {
-  left: @dropdownMenuLeft;
   right: @dropdownMenuRight;
-  box-shadow: @shadow-4-no-top;
+  left: @dropdownMenuLeft;
   border: none;
+  box-shadow: @shadow-4-no-top;
 }
 
 .top.bar .ui.dropdown .menu,
 .top.bar .ui.dropdown .menu .item {
-  font-size: @dropdownMenuFontSize;
   color: @dropdownColor;
+  font-size: @dropdownMenuFontSize;
 }
 
 .top.bar .ui.dropdown .menu .item {
@@ -96,9 +96,9 @@
 .top.bar .ui.dropdown .wrapper {
   display: flex;
   flex-direction: column;
+  margin: @dropdownMenuWrapperMargin;
   gap: @dropdownMenuWrapperGap;
   white-space: @dropdownMenuContentWhiteSpace;
-  margin: @dropdownMenuWrapperMargin;
 
   &.language-list {
     padding-inline-start: @dropdownMenuLanguageWrapperPaddingInlineStart;
@@ -107,11 +107,11 @@
 
 .top.bar .ui.dropdown i.chevron.down.icon {
   position: absolute;
-  font-size: @topSectionIconFontSize;
-  margin-left: @topSectionIconMarginLeft;
   top: @mobileTopSectionIconTop;
+  margin-left: @topSectionIconMarginLeft;
+  font-size: @topSectionIconFontSize;
   line-height: @topSectionIconLineHeight;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 /* Official union dropdown */
@@ -120,9 +120,9 @@
   gap: @mobileOfficialUnionGap;
 
   img {
-    width: @mobileOfficialUnionImageWidth;
     position: absolute;
     z-index: @z-index-1;
+    width: @mobileOfficialUnionImageWidth;
     padding-left: @rem-space-2;
   }
 
@@ -130,8 +130,8 @@
     padding: @mobileOfficialUnionPadding;
 
     .menu {
-      padding: @officialUnionPadding;
       left: @mobileOfficialUnionMenuLeft;
+      padding: @officialUnionPadding;
 
       .content {
         max-width: @mobileOfficialUnionMaxWidth;
@@ -139,6 +139,7 @@
         p {
           white-space: @dropdownMenuContentWhiteSpace;
         }
+
         a {
           font-weight: @officialUnionLinkFontWeight;
           white-space: @dropdownMenuContentWhiteSpace;
@@ -150,7 +151,6 @@
 
 /* Theme sites dropdown */
 #theme-sites.ui.dropdown .menu {
-
   .wrapper {
     width: @mobileThemeSitesMenuWidth;
 
@@ -171,13 +171,14 @@
 
 /* Language dropdown */
 #language-switcher {
-  padding: @mobileLanguageMenuPadding;
   flex-direction: row-reverse;
+  padding: @mobileLanguageMenuPadding;
 
   img {
     width: @mobileLanguageImageWidth;
     margin-right: @topSectionIconMarginRight;
   }
+
   .menu {
     .wrapper {
       .item {
@@ -202,25 +203,25 @@
 ----------------------------------------------------------------------------*/
 
 .main.bar.transparency:before {
-  background-color: @headerMainSectionTransparency;
-  display: block;
-  content: " ";
-  top: 0;
+  position: absolute;
   z-index: 0;
+  top: 0;
+  display: block;
   width: 100%;
   height: 100%;
-  position: absolute;
+  background-color: @headerMainSectionTransparency;
+  content: ' ';
 }
 
 .main.bar {
-  scrollbar-gutter: stable;
   background: @headerMainSectionBackground;
+  scrollbar-gutter: stable;
 
   .ui.container {
     display: flex;
+    height: @mobileMainSectionHeight;
     align-items: center;
     justify-content: space-between;
-    height: @mobileMainSectionHeight;
 
     .ui.grid {
       // All margins and paddings removed for main header
@@ -229,14 +230,14 @@
 
       // Override grid specific paddings for header
       div:first-child {
-        padding-left: 0;
         padding-top: 0;
         padding-bottom: 0;
+        padding-left: 0;
       }
 
       div:last-child {
-        padding-right: 0;
         padding-top: 0;
+        padding-right: 0;
         padding-bottom: 0;
       }
     }
@@ -245,31 +246,32 @@
 
 .main-menu {
   display: flex;
+  width: 100%;
   align-items: flex-end;
   justify-content: flex-end;
-  width: 100%;
 
   .item {
     a {
+      align-self: @mainMenuItemAlignSelf;
+      border-bottom: @mainMenuItemBorder;
       color: @mainMenuItemColor;
       font-size: @mainMenuItemFontSize;
       font-weight: @mainMenuItemFontWeight;
-      border-bottom: @mainMenuItemBorder;
-      align-self: @mainMenuItemAlignSelf;
     }
+
     a:hover {
       border-bottom: @mainMenuItemActiveBorder;
     }
   }
 
   .item.active a {
-    color: @mainMenuItemActiveColor;
     border-bottom: @mainMenuItemActiveBorder;
+    color: @mainMenuItemActiveColor;
   }
 }
 
 #main .main-menu .item:first-child {
-    display: none; // hide home nav item
+  display: none; // hide home nav item
 }
 
 .main-menu.inverted {
@@ -278,13 +280,13 @@
   }
 
   .item.active a {
-    color: @mainMenuItemInvertedColor;
     border-bottom: @mainMenuInvertedItemActiveBorder;
+    color: @mainMenuItemInvertedColor;
   }
 
   a:hover {
-    color: @mainMenuItemInvertedColor;
     border-bottom: @mainMenuInvertedItemActiveBorder;
+    color: @mainMenuItemInvertedColor;
   }
 }
 
@@ -307,12 +309,13 @@
     height: 100%;
     align-items: baseline;
   }
+
   .wrapper {
     position: relative;
-    width: 100%;
-    margin: @mobilePopupMarginTop 0;
     display: flex;
+    width: 100%;
     flex-direction: column;
+    margin: @mobilePopupMarginTop 0;
     gap: @searchBoxWrapperGap;
 
     .action {
@@ -320,22 +323,46 @@
       justify-content: center;
     }
   }
+
+  .advanced-search {
+    padding: @searchBoxFullSearchPadding;
+    border-top: @searchBoxFullSearchBorder;
+    border-bottom: @searchBoxFullSearchBorder;
+    background-color: @searchBoxFullSearchBackground;
+    box-shadow: @searchBoxFullSearchBoxShadow;
+    color: @searchBoxFullSearchTextColor;
+    font-weight: @searchBoxFullSearchFontWeight;
+
+    .ui.container {
+      justify-content: @searchBoxFullSearchJustifyContent;
+      gap: @searchBoxFullSearchGap;
+
+      @media only screen and (max-width: @tabletBreakpoint) {
+        flex-direction: @tabletSearchBoxFullSearchFlexDirection;
+        align-items: @tabletSearchBoxFullSearchAlignItems;
+        text-align: @tabletSearchBoxFullSearchTextAlign;
+      }
+    }
+  }
 }
 
 @media all and (max-width: @largestMobileScreen) {
+  .homepage .content-area {
+    margin-top: -@mobileMainSectionHeight;
+  }
   .eea.header .top.bar .ui.container {
     width: 100% !important; //override semantic auto to display content with space between them
   }
 }
+
 .homepage .eea.header {
-  position: absolute;
-  top: 0;
+  position: relative;
   z-index: 1;
   width: 100%;
 }
 // reduce width of header when we have toolbar open for better placement
 .has-toolbar.homepage .eea.header {
-    width: 96%;
+  width: 96%;
 }
 
 /*----------------------------------------------------------------------------
@@ -343,12 +370,12 @@
 ----------------------------------------------------------------------------*/
 .burger-action {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
   width: @mobileActionsBoxWidth;
   height: @mobileMainSectionHeight;
+  align-items: center;
+  justify-content: center;
   background-color: @burgerActionBackgroundColor;
+  cursor: pointer;
 }
 
 .burger-action.mobile {
@@ -358,13 +385,13 @@
 }
 
 .search-action {
-  cursor: pointer;
   display: flex;
   width: @mobileActionsBoxWidth;
   height: @mobileMainSectionHeight;
   align-items: center;
   justify-content: center;
   background-color: @secondaryColor;
+  cursor: pointer;
 }
 
 .burger-action,
@@ -375,12 +402,12 @@
   }
   // icon to be used
   i.icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin: 0;
     color: @white;
     font-size: 1em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
 }
 
@@ -404,7 +431,6 @@
     height: @tabletMainSectionHeight;
   }
 
-
   /*----------------------------------------------------------------------------
     HEADER TOP BAR TABLET
   ----------------------------------------------------------------------------*/
@@ -425,7 +451,7 @@
       width: @tabletOfficialUnionImageWidth;
     }
 
-    .ui.dropdown {  
+    .ui.dropdown {
       padding: @tabletOfficialUnionPadding;
 
       .menu {
@@ -472,9 +498,14 @@
     margin-top: @tabletLogoMarginTop;
   }
 
+  .homepage .content-area {
+    margin-top: -@tabletMainSectionHeight !important;
+  }
+
   /* Search box */
   #search-box {
     height: @tabletPopUpHeight;
+
     .wrapper {
       margin: @tabletPopupMarginTop 0;
     }
@@ -482,7 +513,6 @@
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-
   .burger-action.mobile {
     display: none;
   }
@@ -508,13 +538,13 @@
     top: @computerTopSectionIconTop;
   }
 
-  .top.bar .official-union {    
+  .top.bar .official-union {
     .ui.dropdown {
       padding: @computerOfficialUnionPadding;
 
       .menu {
         .content {
-            max-width: @computerOfficialUnionMaxWidth;
+          max-width: @computerOfficialUnionMaxWidth;
         }
       }
     }
@@ -525,7 +555,7 @@
     .wrapper {
       width: @computerThemeSitesMenuWidth;
     }
-  }  
+  }
 
   #language-switcher {
     padding: @computerLanguageMenuPadding;
@@ -544,10 +574,10 @@
       height: @computerMainSectionHeight;
 
       .ui.text.menu {
-        flex-wrap: wrap;
         display: flex;
         width: 88%;
         max-height: 100%;
+        flex-wrap: wrap;
         justify-content: space-between;
         margin: 0;
 
@@ -563,6 +593,10 @@
     margin-top: @computerLogoMarginTop;
   }
 
+  .homepage .content-area {
+    margin-top: -@computerMainSectionHeight !important;
+  }
+
   /* Search box */
   #search-box {
     height: @computerPopUpHeight;
@@ -583,37 +617,37 @@
 
 #mega-menu {
   position: absolute;
+  z-index: @z-index-8;
   right: 0;
   overflow: auto;
-  z-index: @z-index-8;
   width: @mobileMegaMenuWidth;
-  background: @megaMenuBackgroundColor;
-  color: @megaMenuTextColor;
-  max-height: @mobilePopUpHeight;
   min-height: @size-11;
+  max-height: @mobilePopUpHeight;
   padding: @mobileMegaMenuPadding;
+  background: @megaMenuBackgroundColor;
+  color: @megaMenuTextColor;
 
   .ui.container {
     display: inherit;
-    align-items: baseline;
     height: 100%;
+    align-items: baseline;
   }
 
   .title {
     font-size: @megaMenuTitleFontSize;
     font-weight: @megaMenuTitleFontWeight;
+
     .title-img {
       margin-left: @megaMenuTitleImgMarginLeft;
     }
   }
 
   .sub-title {
+    color: @megaMenuTextColor;
     font-size: @megaMenuSubTitleFontSize;
     font-weight: @megaMenuSubTitleFontWeight;
-    color: @megaMenuTextColor;
-
-    &+ .ui.grid {
 
+    & + .ui.grid {
       div.column:first-child {
         padding-left: 0;
       }
@@ -628,16 +662,18 @@
 #mega-menu .ui.list {
   margin: 0;
 }
+
 #mega-menu .item {
   display: flex;
+  padding: @megaMenuListItemPadding;
   font-size: @megaMenuListItemFontSize;
   font-weight: @megaMenuListItemFontWeight;
-  padding: @megaMenuListItemPadding;
 }
 
-#mega-menu  a.item {
-  color: @megaMenuTextColor;
+#mega-menu a.item {
   display: @megaMenuTextDisplay;
+  color: @megaMenuTextColor;
+
   &:hover {
     text-decoration: @megaMenuTextHoverDecoration;
   }
@@ -647,16 +683,15 @@
   }
 }
 
-
 #at-a-glance {
-  background-color: @megaMenuGlanceBackgroundColor;
   // To override the grid column paddings
   padding: @megaMenuGlancePaddingLeft !important;
+  background-color: @megaMenuGlanceBackgroundColor;
 
   .item {
+    margin: @megaMenuGlanceListItemMargin;
     font-size: @megaMenuGlanceListItemFontSize;
     font-weight: @megaMenuGlanceListItemFontWeight;
-    margin: @megaMenuGlanceListItemMargin;
   }
 }
 
@@ -675,24 +710,23 @@
 }
 
 #mega-menu .active:not(.title-link) > span {
-  border-left: @megaMenuListItemActiveBorder;
   padding-left: @megaMenuListItemActivePadding;
+  border-left: @megaMenuListItemActiveBorder;
 }
 
 /*Mega Menu Accordion - Tablet & Mobile */
 #mega-menu .ui.accordion {
   .title {
-    font-size: @megaMenuAccordionTitleFontSize;
-    color: @megaMenuTextColor;
     padding: @megaMenuAccordionTitlePadding;
     border-bottom: @megaMenuAccordionTitleBorderBottom;
+    color: @megaMenuTextColor;
+    font-size: @megaMenuAccordionTitleFontSize;
 
     i:before {
       font-size: @megaMenuAccordionIconFontSize;
     }
 
     &:hover {
-
       i {
         color: @megaMenuTextColor;
       }
@@ -700,21 +734,21 @@
   }
 
   .active.title {
-    background-color: transparent;
     border-bottom: @megaMenuAccordionActiveTitleBorderBottom;
+    background-color: transparent;
   }
 
   .content {
-    background: @megaMenuBackgroundColor;
     padding: @megaMenuAccordionContentPadding;
+    background: @megaMenuBackgroundColor;
 
     .accordion {
       margin: @megaMenuNestedAccordionMargin;
 
       .title {
+        border-bottom: none;
         font-size: @megaMenuNestedAccordionTitleFontSize;
         font-weight: @megaMenuNestedAccordionTitleFontWeight;
-        border-bottom: none;
       }
 
       .content {
@@ -756,18 +790,19 @@
 
 @media all and (min-width: @tabletBreakpoint) {
   #mega-menu {
-    padding: @tabletMegaMenuPadding;
     max-height: @tabletPopUpHeight;
+    padding: @tabletMegaMenuPadding;
   }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
   #mega-menu {
     width: 100%;
-    padding: @computerMegaMenuPadding;
     max-height: @computerPopUpHeight;
+    padding: @computerMegaMenuPadding;
   }
+
   #mega-menu .title > a {
     color: @megaMenuTextColor;
   }
-}
+}

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

@@ -194,6 +194,17 @@
 /* Search box */
 @searchBoxBackgroundGradient : linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
 @searchBoxWrapperGap : 75px;
+@searchBoxFullSearchBackground: rgba(255, 255, 255, 0.1);
+@searchBoxFullSearchBoxShadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
+@searchBoxFullSearchBorder: 1px solid @white;
+@searchBoxFullSearchFontWeight: @bold;
+@searchBoxFullSearchTextColor: @white;
+@searchBoxFullSearchJustifyContent: center;
+@searchBoxFullSearchGap: 1.5rem;
+@searchBoxFullSearchPadding: 2em 0;
+@tabletSearchBoxFullSearchFlexDirection: column;
+@tabletSearchBoxFullSearchAlignItems: center;
+@tabletSearchBoxFullSearchTextAlign: center;
 
 /* Custom shadows for dropdowns */
 @shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));

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

@@ -16,7 +16,7 @@
 @tabletQuotePadding  : 0.5rem 0 1rem;
 
 /* Source */
-@sourceTextColor     : @secondaryColor;
+@sourceTextColor     : @secondaryColorCSSVar;
 @sourceTextAlign     : right;
 @sourceFontWeight    : @bold;
 @sourceFontSize      : 1.25rem;
@@ -30,5 +30,5 @@
 /* Icon */
 @mobileQuoteIconSize : 2rem;
 @tabletQuoteIconSize : 3rem;
-@quoteIconColor      : @secondaryColor;
+@quoteIconColor      : @secondaryColorCSSVar;
 @quoteDownIconFloat  : right;

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

@@ -13,7 +13,7 @@
 
 /* Tag text */
 @tagNameFontSize       : 1rem;
-@tagNameFontColor      : @japaneseIndigo;
+@tagNameFontColor      : @textColorCSSVar;
 @tagNameFontColorWithBackground : @white;
 @tagNameFontWeight     : 500;
 @tagNameLineHeight     : 1.25rem;

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

@@ -6,7 +6,7 @@
 @tagsBodyWidth             : 100%;
 
 /* Tags Title */
-@tagsTitleFontColor        : @japaneseIndigo;
+@tagsTitleFontColor        : @textColorCSSVar;
 @tagsTitleMargin           : 1rem;
 @tagsFontWeight            : 400;
 @tagsFontSize              : 1.125rem;

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

@@ -55,8 +55,11 @@
 --------------------*/
 
 @primaryColor         : @darkCerulean;
+@primaryColorCSSVar   : var(--text-color-primary, @primaryColor);
 @secondaryColor       : @pineGreen;
+@secondaryColorCSSVar : var(--text-color-secondary, @secondaryColor);
 @tertiaryColor        : @deepBlue;
+@tertiaryColorCSSVar  : var(--text-color-tertiary, @tertiaryColor);
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
@@ -181,7 +184,17 @@
 @lineHeight          : @font-lineheight-3;
 @mobileLineHeight    : @font-lineheight-3;
 @textColor           : @tertiaryColor;
+// use this variable when you want it to be replaced by css variables
+@textColorCSSVar     : var(--text-color, @textColor);
+@borderColorCSSVar   : var(--border-color, @grey-3);
+@borderColorPrimaryCSSVar: var(--border-color-primary, @primaryColor);
+@borderColorSecondaryCSSVar: var(--border-color-secondary, @secondaryColor);
+@borderColorTertiaryCSSVar: var(--border-color-tertiary, @tertiaryColor);
 @contentAreaColor    : @tertiaryColor;
+@backgroundColor: @grey-0;
+@backgroundColorCSSVar: var(--bg-color, @backgroundColor);
+@backgroundColorSupplementary: @grey-1;
+@backgroundColorSupplementaryCSSVar: var(--bg-color-supplementary, @backgroundColorSupplementary);
 
 /*-------------------
       Paragraph

package/theme/themes/eea/modules/accordion.overrides

@@ -122,7 +122,7 @@
 }
 .ui.accordion.primary .title:not(.active):hover,
 .ui.accordion.primary .title:not(.active):hover i {
-  color: @primaryColor;
+  color: @primaryColorCSSVar;
 }
 
 /* Secondary */
@@ -131,7 +131,7 @@
 }
 .ui.accordion.secondary .title:not(.active):hover,
 .ui.accordion.secondary .title:not(.active):hover i {
-  color: @secondaryColor;
+  color: @secondaryColorCSSVar;
 }
 
 /* Tertiary */
@@ -140,5 +140,5 @@
 }
 .ui.accordion.tertiary .title:not(.active):hover,
 .ui.accordion.tertiary .title:not(.active):hover i {
-  color: @tertiaryColor;
+  color: @tertiaryColorCSSVar;
 }

package/theme/themes/eea/modules/accordion.variables

@@ -10,7 +10,7 @@
 @titlePadding: 1rem 1.563rem;
 @titlePadding: @rectangleMedium;
 @titleFontSize: 1.125rem;
-@titleColor: var(--text-color, @textColor);
+@titleColor: @textColorCSSVar;
 @titleBorderBottom: @1px solid @silverGray;
 @titleColorHover:var(--text-color-hover, @grey-5);
 @titleJustifyContent: space-between;
@@ -32,7 +32,7 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
-@iconColorHover: @grey-5;
+@iconColorHover: @titleColorHover;
 @iconInactive: "\ea4e"; // Icon of closed accordion
 @iconActive: "\EA78"; // Icon of open accordion
 @iconOrder: 1; // Icon after text of the title
@@ -63,7 +63,7 @@
 --------------------*/
 
 @activeIconTransform: none;
-@activeTitleBackground: @white;
+@activeTitleBackground: var(--bg-color, @white);
 @activeTitleColor: @grey-5;
 @activeTitleBorderBottom: 0;
 
@@ -73,7 +73,7 @@
 
 /* Styled */
 @styledWidth: 600px;
-@styledBackground: @white;
+@styledBackground: @activeTitleBackground;
 @styledBorderRadius: 0;
 @styledBoxShadow: none;
 

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

@@ -70,6 +70,19 @@
   }
 }
 
+// color item images that are svg files
+.item.primary img {
+  filter: @itemPrimaryFilterColor;
+}
+
+.item.secondary img {
+  filter: @itemSecondaryFilterColor;
+}
+
+.item.tertiary img {
+  filter: @itemTertiaryFilterColor;
+}
+
 // decrease margin when using icons instead of images
 // since the icons have themselves extra whitespace
 // and we should aim to get about 32px as seen in the figma design

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

@@ -113,7 +113,7 @@
 @descriptionMaxWidth: auto;
 @descriptionFontSize: 1em;
 @descriptionLineHeight: @lineHeight;
-@descriptionColor: @textColor;
+@descriptionColor: @textColorCSSVar;
 
 /* Content Image */
 @contentImageWidth: '';

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

@@ -9,10 +9,10 @@
 @mobileStatisticWidth: 100%;
 @tabletStatisticWidth: inherit;
 
-@secondaryValueColor: @secondaryColor;
-@primaryLabelColor: @primaryColor;
+@secondaryValueColor: @secondaryColorCSSVar;
+@primaryLabelColor: @primaryColorCSSVar;
 
-@verticalMargin: 1em;
+@verticalMargin: 1.5em;
 @margin: @verticalMargin 0em;
 @textAlign: center;
 @maxWidth: auto;
@@ -20,7 +20,7 @@
 /* Group */
 @horizontalSpacing: 1.5em;
 @rowSpacing: 2em;
-@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
+@groupMargin: @verticalMargin 0;
 
 /* Group Element */
 @elementMargin: @rowSpacing @horizontalSpacing @rowSpacing;
@@ -36,7 +36,7 @@
 @valueFont: @pageFont;
 @valueFontWeight: @normal;
 @valueLineHeight: 1.5em;
-@valueColor: @secondaryColor;
+@valueColor: @secondaryColorCSSVar;
 @valueTextTransform: none;
 
 /* Label */
@@ -45,7 +45,7 @@
 @bottomLabelDistance: 0rem;
 @labelFont: @headerFont;
 @labelFontWeight: @bold;
-@labelColor: @primaryColor;
+@labelColor: @primaryColorCSSVar;
 @labelLineHeight: @relativeLarge;
 @labelTextTransform: none;