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

package/CHANGELOG.md

@@ -4,6 +4,41 @@ 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
+
+#### :bug: Bug Fixes
+
+- 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(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
 
 #### :nail_care: Enhancements
@@ -14,6 +49,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)]
 - 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "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/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/definitions/views/item.less

@@ -61,6 +61,18 @@
 /*--------------
       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/container.overrides

@@ -15,10 +15,16 @@
   .container {
     width: auto !important;
   }
+
   [class*="block-editor"] {
-  padding-left: 3rem;
-  padding-right: 3rem;
-}
+    padding-left: 3rem;
+    padding-right: 3rem;
+
+    [class*="block-editor"] {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }
 
 .contentWidth(@offset) {

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

@@ -125,15 +125,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/extras/contentBox.less

@@ -34,41 +34,27 @@
   &.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;
+  --text-color: #FFF;
+  --text-color-hover: @grey-1;
+}
+// inherit link
 .content-box[class*="ary"] a {
   color: inherit;
-}
-
-// 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;
-}
-
+}

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

@@ -74,6 +74,27 @@
   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;
+}
+
+// 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 {

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

@@ -180,7 +180,7 @@
 
 @lineHeight          : @font-lineheight-3;
 @mobileLineHeight    : @font-lineheight-3;
-@textColor           : rgba(0, 0, 0, 1);
+@textColor           : @tertiaryColor;
 @contentAreaColor    : @tertiaryColor;
 
 /*-------------------

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

@@ -62,6 +62,8 @@
 
   .content {
     background: @contentBackground;
+    color: @contentColor;
+    padding: @contentPadding;
   }
 }
 

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

@@ -10,13 +10,13 @@
 @titlePadding: 1rem 1.563rem;
 @titlePadding: @rectangleMedium;
 @titleFontSize: 1.125rem;
-@titleColor: @textColor;
+@titleColor: var(--text-color, @textColor);
 @titleBorderBottom: @1px solid @silverGray;
-@titleColorHover: @grey-5;
+@titleColorHover:var(--text-color-hover, @grey-5);
 @titleJustifyContent: space-between;
 
 /* Icon */
-@iconColor: @oldSilver;
+@iconColor: var(--text-color, @oldSilver);
 @iconColorActive: @white;
 @iconOpacity: 1;
 @iconFontSize: 3rem;
@@ -45,7 +45,8 @@
 @contentMargin: 0;
 @contentPaddingBottom: 1.563rem;
 @contentPadding: @squareMedium;
-@contentBackground: #F9F9F9;
+@contentBackground: @grey-1;
+@contentColor: @tertiaryColor;
 
 /*-------------------
        Coupling
@@ -62,7 +63,7 @@
 --------------------*/
 
 @activeIconTransform: none;
-@activeTitleBackground: @darkWhite;
+@activeTitleBackground: @white;
 @activeTitleColor: @grey-5;
 @activeTitleBorderBottom: 0;
 

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

@@ -12,6 +12,10 @@
   }
 }
 
+.tabs-block {
+  color: @tabsBlockColor;
+}
+
 // Contain images inside vertical tab content
 .stretched.wide.column > .tab img {
   max-width: @verticalTabPaneImageMaxWidth;

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

@@ -1,7 +1,7 @@
 /*******************************
               Tab
 *******************************/
-
+@tabsBlockColor: @textColor;
 @tabActiveItemHoverColor: @secondaryColor;
 
 @mobileItemFontSize: 1rem;

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

@@ -18,6 +18,10 @@
   text-align: var(--text-align, @cardTextAlign);
 }
 
+.card .meta .date {
+  margin-left: @cardMetaDateMarginLeft;
+}
+
 .ui.cards > .card:not(.rounded) > .image,
 .ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
@@ -430,6 +434,7 @@
 /* Custom carousel pagination bullets */
 // avoid dots going over content that follows sliders
 .slick-dots {
+  position: relative;
   bottom: 0;
 }
 .cards-carousel .slick-dots li button:before {

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

@@ -30,6 +30,7 @@
   box-shadow @defaultDuration @defaultEasing,
   transform @defaultDuration @defaultEasing
 ;
+@cardMetaDateMarginLeft: auto;
 
 /* Card Group */
 @horizontalSpacing: 1em;
@@ -87,7 +88,7 @@
 
 /* Metadata */
 @metaJustifyContent: space-between;
-@metaFontSize: @relativeMedium;
+@metaFontSize: @absoluteMedium;
 @metaSpacing: 0.3em;
 @metaColor: @tertiaryColor;
 
@@ -118,7 +119,7 @@
 
 /* Description */
 @descriptionDistance: 0;
-@descriptionColor: @tertiaryColor;
+@descriptionColor: inherit;
 
 /* Content Image */
 @contentImageWidth: '';

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

@@ -20,6 +20,10 @@
 @border: none;
 @zIndex: '';
 @transition: box-shadow @defaultDuration @defaultEasing;
+// black to desired color filter option resulted from https://codepen.io/sosuke/pen/Pjoqqp
+@itemPrimaryFilterColor: invert(9%) sepia(89%) saturate(5332%) hue-rotate(194deg) brightness(98%) contrast(101%);
+@itemSecondaryFilterColor: invert(33%) sepia(14%) saturate(5566%) hue-rotate(139deg) brightness(98%) contrast(101%);
+@itemTertiaryFilterColor: invert(27%) sepia(15%) saturate(1161%) hue-rotate(167deg) brightness(93%) contrast(80%);
 
 /* Responsive */
 @itemSpacing: 1em;