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

package/CHANGELOG.md

@@ -4,9 +4,32 @@ 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.8.1](https://github.com/eea/volto-eea-design-system/compare/0.8.0...0.8.1)
+
+- final Figma files in github as part of the Design System [`#229`](https://github.com/eea/volto-eea-design-system/pull/229)
+- docs(figma): added figma files to repo [`6bd4144`](https://github.com/eea/volto-eea-design-system/commit/6bd4144ffc9c563ce224a07fe942fc4f2615c53f)
+- Autobuild of docusaurus docs [`5c51018`](https://github.com/eea/volto-eea-design-system/commit/5c5101801ed7176d4f526b19d72ce57091d62848)
+- change(footer): removed line between sections and moved actions back to the bottom of footer [`d9f33e4`](https://github.com/eea/volto-eea-design-system/commit/d9f33e4cf5a517acfbae497d6cb2fdccb048c281)
+- Autobuild of docusaurus docs [`677ec42`](https://github.com/eea/volto-eea-design-system/commit/677ec42bbaca04621bc753ed42141288ed01ab0e)
+- change(storybook): headings storybook now uses tertiary color by default reflecting site options [`1061e77`](https://github.com/eea/volto-eea-design-system/commit/1061e7749de2d4fe1233ccdc7f6f835ad491504a)
+- Autobuild of docusaurus docs [`4a09a99`](https://github.com/eea/volto-eea-design-system/commit/4a09a99e7fec7da7d750bd7f2f3b8ede65649fbe)
+- fix(docusaurus): intro page hero title color now that headers are using tertiary color [`618e3cb`](https://github.com/eea/volto-eea-design-system/commit/618e3cb7ac5533b1c087aea10452947c8676ab4e)
+- Autobuild of docusaurus docs [`71850ad`](https://github.com/eea/volto-eea-design-system/commit/71850ad0eeba04d429804b103f6c5b31888bde44)
+- change(message):  use semantic colors for messages #204 from eea/refactor-message [`22d2c43`](https://github.com/eea/volto-eea-design-system/commit/22d2c43cd55a82621f2da3103652677b4b45db1a)
+- refactor(message): remove override with custom background color on error [`9b40cd7`](https://github.com/eea/volto-eea-design-system/commit/9b40cd7ef2cca901e65a812585943c2e2d867b5f)
+- refactor(message): add header controls [`960c2f7`](https://github.com/eea/volto-eea-design-system/commit/960c2f7b524b1f049bb2f666e3e8278feca506da)
+- refactor(messages): mix semantc and token colors for messages [`12efa75`](https://github.com/eea/volto-eea-design-system/commit/12efa75c30956df9958058242be4b8732819a5a1)
+- refactor(emotiveColors): temp update for tests [`61a720c`](https://github.com/eea/volto-eea-design-system/commit/61a720c1ddbbad2c5bab17c8b2f890618f2a747c)
+- refactor(message): restore semantic variables [`1c16621`](https://github.com/eea/volto-eea-design-system/commit/1c16621b4862efc64d82d475798ed40938c65f5e)
+- refactor(message): add container to story [`1259ece`](https://github.com/eea/volto-eea-design-system/commit/1259ecead7162d2a46f5e802ba07e7e0dcb72e42)
+- fix(message): fix size controls [`ee51e1d`](https://github.com/eea/volto-eea-design-system/commit/ee51e1dca4f84aeb9e39be525016f751acc147de)
+
 #### [0.8.0](https://github.com/eea/volto-eea-design-system/compare/0.7.6...0.8.0)
 
+> 20 August 2022
+
 - change(Cards):  All variations accessibility fixes #210 [`#210`](https://github.com/eea/volto-eea-design-system/issues/210)
+- feature(heading): and cards refactoring #227 from eea/develop [`334fbda`](https://github.com/eea/volto-eea-design-system/commit/334fbda2d5b751858d4cc8cae832ca7f5c1ad6c2)
 - Update package.json [`3870cf3`](https://github.com/eea/volto-eea-design-system/commit/3870cf3265f0dab4e181c94a6657b9fa408bf186)
 - Header refactor 153536 #226 from eea/header-refactor-153536 [`87a6fe7`](https://github.com/eea/volto-eea-design-system/commit/87a6fe73211eb028861e099a67e90d365c5111ea)
 - change(typography): inherit header colors with @headerColor variable [`91d9357`](https://github.com/eea/volto-eea-design-system/commit/91d93577772534f67bb74df0c9ed260bbaccdd4c)

package/package.json

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

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

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

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

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

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

@@ -123,34 +123,10 @@ footer .footer-wrapper .menu {
     display: flex;
     flex-direction: column;
   }
-  .copyright {
-    display: none !important;
-  }
-
-  .subfooter {
-    order: 1
-  }
-
-  .menu {
-    order: 2;
-    position: relative;
-    margin: @mobileMenuMargin;
-  }
-  .menu::after {
-    position: absolute;
-    bottom: 0;
-    border: @mobileMenuBorder;
-    content: " ";
-    display: block;
-    width: 100vw;
-    left: @mobileMenuLeft;
-  }
-  footer .footer-wrapper .menu a {
-    font-weight: @mobileMenuFontWeight;
-  }
 
-  .theme-sites {
-    order: 3;
+ footer .footer-wrapper .menu .copyright a {
+    font-size: @mobileMenuCopyrightFontSize;
+    font-weight: @mobileMenuCopyrightFontWeight;
   }
 }
 

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

@@ -64,10 +64,9 @@
 /* Footer Menu */
 
 @menuLinkColor                      : @white;
-@menuFontWeight                     : @font-weight-3;
+@menuFontWeight                     : @font-weight-4;
 @mobileMenuFontSize                 : @font-size-0;
-@mobileMenuMargin                   : @rem-space-4 0;
-@mobileMenuBorder                   : 1px solid rgba(249, 249, 249, 0.25);
-@mobileMenuLeft                     : -20px;
-@mobileMenuFontWeight               : 400;
+@mobileMenuCopyrightFontSize        : @font-size-00;
+@mobileMenuCopyrightFontWeight      : @font-weight-3;
+@mobileMenuFontWeight               : @font-weight-4;
 @computerMenuFontSize               : @font-size-1;

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

@@ -349,7 +349,7 @@
 
 
 /*---  Colors  ---*/
-@orange           : #EBA33D;
+@orange           : #FF9933;
 @yellow           : #F2EB49;
 @olive            : #78AB66;
 @green            : @pineGreen;
@@ -496,32 +496,34 @@
 --------------------*/
 
 /* Positive */
-@positiveColor           : @pineGreen;
-@positiveBackgroundColor : #EDF9F0;
-@positiveBorderColor     : #EDF9F0;
-@positiveHeaderColor     : @pineGreen;
-@positiveTextColor       : @pineGreen;
+@positiveColor           : @green-6;
+@positiveBackgroundColor : #FCFFF5;
+@positiveBorderColor     : @green-4;
+@positiveHeaderColor     : @green-6;
+@positiveTextColor       : @green-6;
 
 /* Negative */
-@negativeColor           : @red;
+@negativeColor           : @red-5;
 @negativeBackgroundColor : @white;
-@negativeBorderColor     : @red; //#FEEFEF;
-@negativeHeaderColor     : @red;
-@negativeTextColor       : @red;
+@negativeBorderColor     : @red-4;
+@negativeHeaderColor     : @red-5;
+@negativeTextColor       : @red-5;
 
 /* Info */
-@infoColor              : @mediumPersianBlue;
-@infoBackgroundColor    : #EEF2FA;
-@infoBorderColor        : #EEF2FA;
-@infoHeaderColor        : @mediumPersianBlue;
-@infoTextColor          : @mediumPersianBlue;
+@infoColor              : @blue-6;
+@infoBackgroundColor    : #F8FFFF;
+@infoBorderColor        : @blue-4;
+@infoHeaderColor        : @blue-6;
+@infoTextColor          : @blue-6;
+
 
 /* Warning */
-@warningColor           : #EBA33D;
-@warningBorderColor     : #FFF4EC;
-@warningBackgroundColor : #FFF4EC;
-@warningHeaderColor     : #EBA33D;
-@warningTextColor       : #EBA33D;
+@warningColor           : @brown-6;
+@warningBackgroundColor : #FFFAF3;
+@warningBorderColor     : @brown-4;
+@warningHeaderColor     : @brown-6;
+@warningTextColor       : @brown-6;
+
 
 /*-------------------
         Paths