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

package/CHANGELOG.md

@@ -4,11 +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).
 
-### [0.9.2](https://github.com/eea/volto-eea-design-system/compare/0.9.1...0.9.2) - 27 September 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
 
-- fix(block-editor): Padding [Alin Voinea - [`9072198`](https://github.com/eea/volto-eea-design-system/commit/9072198e89e52075fce845decab8573da3972a85)]
+- fix(List): Ordered list item story - refs #155248 [Alin Voinea - [`c70a2bc`](https://github.com/eea/volto-eea-design-system/commit/c70a2bceecf4ce9497cbe0e9cdb30944fff2287d)]
+- fix(OrderedList): li third level margin left - refs #155248 [Alin Voinea - [`fba5cb9`](https://github.com/eea/volto-eea-design-system/commit/fba5cb9d3897d2827951cd218405b1ae7c8e818a)]
+- fix(card, contentBox): meta font size, removed header override of cards [David Ichim - [`a7f94b9`](https://github.com/eea/volto-eea-design-system/commit/a7f94b9ca8c65a887ced5c4812563a2226fca869)]
+- fix(accordion): Fix content default padding - refs #153783 [Alin Voinea - [`566adf7`](https://github.com/eea/volto-eea-design-system/commit/566adf7a53c48fb24044eeba1d159d5ce715ecc6)]
+- fix(cards): inherit color of card description [David Ichim - [`ceda799`](https://github.com/eea/volto-eea-design-system/commit/ceda79971663785c81292b85ae07b7f9f922213c)]
+
+#### :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)]
+- change(tabs): allow customization of tab active and hover color [David Ichim - [`4370f42`](https://github.com/eea/volto-eea-design-system/commit/4370f4270dcaa29b1193fc2347567b748f6d5d82)]
+- change(site): committed fixed from custom into eea design package [David Ichim - [`9b9a1fd`](https://github.com/eea/volto-eea-design-system/commit/9b9a1fd3648796a502ca4eb3abd08b61b33bdff2)]
+- change(tabs): color for tabs-block section [David Ichim - [`6778c92`](https://github.com/eea/volto-eea-design-system/commit/6778c923618e725194120d7f35e2ee7d66e1be8e)]
+- change(accordion, site): change text color to tertiary instead of black [David Ichim - [`4641058`](https://github.com/eea/volto-eea-design-system/commit/464105842508a62216aa0a3f28e9565af1b93232)]
+- change(cards): by default date is set to appear on the right of the meta section [David Ichim - [`b7b80e8`](https://github.com/eea/volto-eea-design-system/commit/b7b80e86b69a0179f1e48748bef909bbd2a98d58)]
+- change(item): added item image coloring when applying theming classes [David Ichim - [`0403fe4`](https://github.com/eea/volto-eea-design-system/commit/0403fe4974f37a46ec7418d9b8492ad74d7c5688)]
+- change(cards): carousel dots are now relative positioned [David Ichim - [`daa40a4`](https://github.com/eea/volto-eea-design-system/commit/daa40a4ab6532497830d5f7536bf0a7f20d9cd00)]
+
+#### :house: Documentation changes
+
+- docs(typography): token fix to match used values for lineheight [Dora Anastasiou - [`ff41b56`](https://github.com/eea/volto-eea-design-system/commit/ff41b56b4365a3e70ac20e548c7c74671e7c584c)]
+- docs(typography): token fix to match used values for heightheight and letterspacing [Dora Anastasiou - [`91693ec`](https://github.com/eea/volto-eea-design-system/commit/91693ecd2dd367cd83fa2752756557d463e214a7)]
+- docs(typography): remove semibold [Giorgos Stamatis - [`6eb3e08`](https://github.com/eea/volto-eea-design-system/commit/6eb3e0856f01aacf6d294f68e7d845f74f752685)]
+- docs(typography): update, local fonts [Giorgos Stamatis - [`39a32d9`](https://github.com/eea/volto-eea-design-system/commit/39a32d9aa4dec21c0e7df32aa5798432fc6bd403)]
+
+#### :hammer_and_wrench: Others
+
+- test(cypress): Fix md5 dependency [Alin Voinea - [`17f618e`](https://github.com/eea/volto-eea-design-system/commit/17f618e7c5eef01759494e787a8c9cb96449fbca)]
+### [0.9.2](https://github.com/eea/volto-eea-design-system/compare/0.9.1...0.9.2) - 27 September 2022
 
 ### [0.9.1](https://github.com/eea/volto-eea-design-system/compare/0.9.0...0.9.1) - 27 September 2022
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,6 +26,7 @@
     "react-countup": "^6.3.0"
   },
   "devDependencies": {
+    "md5": "^2.3.0",
     "@cypress/code-coverage": "^3.9.5",
     "babel-plugin-transform-class-properties": "^6.24.1"
   },

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/menu.overrides

@@ -287,7 +287,7 @@
     @secondaryPointingItemHorizontalPadding;
   border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
   margin-bottom: -@secondaryPointingctiveItemMarginBottom;
-  color: @secondaryPointingActiveTextColor;
+  color: var(--text-color, @secondaryPointingActiveTextColor);
 }
 
 /* Menu items custom border for responsive issues */

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

@@ -30,7 +30,7 @@
   color @defaultDuration @defaultEasing
 ;
 @itemFontWeight: @normal;
-@itemTextColor: @deepBlue;
+@itemTextColor: var(--text-color, @deepBlue);
 
 /* Divider */
 @dividerSize: 1px;
@@ -254,7 +254,7 @@
 // Pastanaga custom
 @secondaryPointingItemTextTransform: uppercase;
 
-@secondaryPointingHoverTextColor: @textColor;
+@secondaryPointingHoverTextColor: var(--text-color-hover, @textColor);
 
 @secondaryPointingActiveBorderColor: @secondaryColor;
 @secondaryPointingActiveTextColor: @secondaryColor;

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

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

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 {
@@ -125,15 +129,18 @@ textarea.fluid {
 }
 
 .ui.fluid.icon.input.search > input::-webkit-input-placeholder {
-  color: rgba(255, 255, 255, 0.25);
+  opacity: 0.9;
+  color: rgb(255, 255, 255);
 }
 
 .ui.fluid.icon.input.search > input::-moz-placeholder {
-  color: rgba(255, 255, 255, 0.25);
+  opacity: 0.9;
+  color: rgb(255, 255, 255);
 }
 
 .ui.fluid.icon.input.search > input::-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.25);
+  opacity: 0.9;
+  color: rgb(255, 255, 255);
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {

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

@@ -28,11 +28,13 @@ ul.ui.list li:before {
 }
 
 // Third layer margin fix
-.ui.ordered.list .list .list > .item:before {
+.ui.ordered.list .list .list > .item:before,
+.ui.ordered.list .list .list > li:before {
   margin-left: @orderedGrandchildCountOffset;
 }
 
 // Fourth layer margin fix
-.ui.ordered.list .list .list .list > .item:before {
+.ui.ordered.list .list .list .list > .item:before,
+.ui.ordered.list .list .list .list > li:before {
   margin-left: @orderedGreatGrandchildCountOffset;
 }

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,47 +28,40 @@
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
     position: relative;
-    z-index: 1;
   }
 
   &.primary {
     background-color: @contentBoxBackgroundColorPrimary;
     color: @contentBoxColor;
-    .header {
-      color: @contentBoxColor !important;
-    }
   }
-
   &.secondary {
     background-color: @contentBoxBackgroundColorSecondary;
     color: @contentBoxColor;
-    .header {
-      color: @contentBoxColor !important;
-    }
   }
 
   &.tertiary {
     background-color: @contentBoxBackgroundColorTertiary;
     color: @contentBoxColor;
-    .header {
-      color: @contentBoxColor !important;
-    }
   }
 }
 
-// inherit link
-
-
-[class*="content-box"] a {
-  text-decoration: underline;
+.content-box[class*="ary"] {
+  --bg-color: transparent;
+  --border-color-secondary: #FFF;
+  --text-color: #FFF;
+  --text-color-primary: #FFF;
+  --text-color-secondary: #FFF;
+  --text-color-tertiary: #FFF;
+  --text-color-hover: @backgroundColorSupplementary;
 }
-.content-box[class*="ary"] a {
+// inherit link
+.content-box[class*="ary"] a:not(.ui, .item) {
   color: inherit;
+  text-decoration: underline;
 }
 
-// set color of default cards to black when we are inside a content-box which has the ability to set
-// color classes
-.content-box[class*="ary"] [class="ui fluid card"] {
-  color: @grey-6;
-}
-
+// inherit color for slate links within context boxes
+.content-box .slate-editor-link {
+  color: inherit;
+  text-decoration: underline;
+}

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

@@ -6,6 +6,7 @@
 @contentBoxWidth : 100vw;
 @contentBoxColor : @white;
 @contentBoxBackgroundColor: @grey-1;
+@contentBoxNoBackground: transparent;
 @contentBoxColorInverted : inherit;
 
 /* Themes */

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,6 +73,43 @@
   font-weight: 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 {
+    z-index: 0;
+}
+
+// remove margin from block headings overriding blocks.less rule
+.block h1:last-child, .block h2:last-child, .block h3:last-child, .block h4:last-child, .block h5:last-child {
+    margin: 0;
+}
+
 // tweak padding of workflow progress titles now that
 // we have larger font size
 .progress__item .progress__title {