@eeacms/volto-eea-design-system 0.6.1 → 0.7.1

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

@@ -42,6 +42,8 @@
 .hero-block-image-wrapper {
   position: absolute;
   min-height: @heroBlockImageWrapperMinHeight;
+  width: 100%;
+  height: 100%;
 }
 
 
@@ -68,6 +70,9 @@
   .hero-block-body {
     gap: @tabletHeroBlockBodyGap;
   }
+  .hero-block-inner-wrapper {
+    padding-block: @tableHeroBlockWrapperPadding;
+  }
   .homepage #page-document > .eea.hero-block:first-of-type .hero-block-body {
     margin: @heroBlockHomePageBodyMargin;
   }
@@ -79,6 +84,10 @@
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: @desktopHeroBlockMinHeight;
   }
+
+  .hero-block-inner-wrapper {
+    padding-block: @desktopHeroBlockWrapperPadding;
+  }
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }

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

@@ -3,13 +3,13 @@
 *******************************/
 
 /* Hero block */
-@mobileHeroBlockMinHeight : 360px;
-@tabletHeroBlockMinHeight : 500px;
-@desktopHeroBlockMinHeight: 600px;
+@mobileHeroBlockMinHeight : 412px;
+@tabletHeroBlockMinHeight : 446px;
+@desktopHeroBlockMinHeight: 664px;
 
 @heroBlockPosition: relative;
 @heroBlockHomePagePadding: 0 @rem-space-5;
-@heroBlockHomePageBodyMargin: @rem-space-16 0 0 0;
+@heroBlockHomePageBodyMargin: @rem-space-20 0 0 0;
 
 /* Hero block spaced */
 @heroBlockSpacedMargin: @rem-space-12 0;
@@ -23,7 +23,9 @@
 @heroBlockImageBackgroundPosition : center;
 
 /* Wrapper */
-@heroBlockWrapperPadding : @rem-space-20;
+@heroBlockWrapperPadding : 5rem;
+@tableHeroBlockWrapperPadding: 6rem;
+@desktopHeroBlockWrapperPadding: 194px 96px;
 
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;

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

@@ -61,9 +61,11 @@
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
+@lightTertiaryColor   : @UCLABlue;
 
 @darkPrimaryColor     : @darkMidnightBlue;
 @darkSecondaryColor   : @bottleGreen;
+@darkTertiaryColor    : @japaneseIndigo;
 
 /*--------------
   Page Heading
@@ -932,8 +934,10 @@
 /*---  Colors  ---*/
 @primaryColorHover        : saturate(darken(@primaryColor, 5), 10, relative);
 @secondaryColorHover      : saturate(lighten(@secondaryColor, 5), 10, relative);
+@tertiaryColorHover       : saturate(lighten(@tertiaryColor, 5), 10, relative);
 @lightPrimaryColorHover   : saturate(darken(@lightPrimaryColor, 5), 10, relative);
 @lightSecondaryColorHover : saturate(lighten(@lightSecondaryColor, 5), 10, relative);
+@lightTertiaryColorHover  : saturate(lighten(@lightTertiaryColor, 5), 10, relative);
 
 @redHover                 : saturate(darken(@red, 5), 10, relative);
 @orangeHover              : saturate(darken(@orange, 5), 10, relative);
@@ -992,8 +996,10 @@
 /*---  Colors  ---*/
 @primaryColorFocus        : saturate(darken(@primaryColor, 8), 20, relative);
 @secondaryColorFocus      : saturate(lighten(@secondaryColor, 8), 20, relative);
+@tertiaryColorFocus       : saturate(lighten(@tertiaryColor, 8), 20, relative);
 @lightPrimaryColorFocus   : saturate(darken(@lightPrimaryColor, 8), 20, relative);
 @lightSecondaryColorFocus : saturate(lighten(@lightSecondaryColor, 8), 20, relative);
+@lightTertiaryColorFocus  : saturate(lighten(@lightTertiaryColor, 8), 20, relative);
 
 @redFocus                 : saturate(darken(@red, 8), 20, relative);
 @orangeFocus              : saturate(darken(@orange, 8), 20, relative);
@@ -1053,8 +1059,10 @@
 /*---  Colors  ---*/
 @primaryColorDown        : darken(@primaryColor, 10);
 @secondaryColorDown      : lighten(@secondaryColor, 10);
+@tertiaryColorDown       : lighten(@tertiaryColor, 10);
 @lightPrimaryColorDown   : darken(@lightPrimaryColor, 10);
 @lightSecondaryColorDown : lighten(@lightSecondaryColor, 10);
+@lightTertiaryColorDown : lighten(@lightTertiaryColor, 10);
 
 @redDown                 : darken(@red, 10);
 @orangeDown              : darken(@orange, 10);
@@ -1114,8 +1122,10 @@
 /*---  Colors  ---*/
 @primaryColorActive        : saturate(darken(@primaryColor, 5), 15, relative);
 @secondaryColorActive      : saturate(lighten(@secondaryColor, 5), 15, relative);
+@tertiaryColorActive       : saturate(lighten(@tertiaryColor, 5), 15, relative);
 @lightPrimaryColorActive   : saturate(darken(@lightPrimaryColor, 5), 15, relative);
 @lightSecondaryColorActive : saturate(lighten(@lightSecondaryColor, 5), 15, relative);
+@lightTertiaryColorActive  : saturate(lighten(@lightTertiaryColor, 5), 15, relative);
 
 @redActive                 : saturate(darken(@red, 5), 15, relative);
 @orangeActive              : saturate(darken(@orange, 5), 15, relative);

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

@@ -39,10 +39,15 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-right { text-align: right !important; }
 
 // Quotes
+.quoted-wrapper h2::before,
+.quoted-wrapper h3::before,
 .quoted::before {
   content: "\ec51";
   font-family: 'remixicon' !important;
 }
+
+.quoted-wrapper  h2::after,
+.quoted-wrapper  h3::after,
 .quoted::after {
   content: "\ec52";
   font-family: 'remixicon' !important;

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

@@ -78,6 +78,10 @@
      Styled
 ---------------*/
 
+.ui.styled.accordion  .title,
+.ui.styled.accordion  .title:hover {
+  background-color: @styledActiveTitleBackground;
+}
 .ui.styled.accordion .active.title input {
   color: @styledActiveTitleColor;
 }
@@ -99,3 +103,40 @@
     }
   }
 }
+
+/*--------------
+   Variations
+---------------*/
+.ui.accordion:not([class*='ary']) .active.title i {
+   color: @tertiaryColor;
+}
+.ui.accordion[class*='ary'] .active.title {
+  color: white;
+}
+
+/* Primary */
+.ui.accordion.primary .active.title {
+  background-color: @primaryColor;
+}
+.ui.accordion.primary .title:not(.active):hover,
+.ui.accordion.primary .title:not(.active):hover i {
+  color: @primaryColor;
+}
+
+/* Secondary */
+.ui.accordion.secondary .active.title {
+  background-color: @secondaryColor;
+}
+.ui.accordion.secondary .title:not(.active):hover,
+.ui.accordion.secondary .title:not(.active):hover i {
+  color: @secondaryColor;
+}
+
+/* Tertiary */
+.ui.accordion.tertiary .active.title {
+  background-color: @tertiaryColor;
+}
+.ui.accordion.tertiary .title:not(.active):hover,
+.ui.accordion.tertiary .title:not(.active):hover i {
+  color: @tertiaryColor;
+}

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

@@ -12,7 +12,7 @@
 @titleFontSize: 1.125rem;
 @titleColor: @textColor;
 @titleBorderBottom: @1px solid @silverGray;
-@titleColorHover: @secondaryColor;
+@titleColorHover: @grey-5;
 @titleJustifyContent: space-between;
 
 /* Icon */
@@ -32,7 +32,7 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
-@iconColorHover: @secondaryColor;
+@iconColorHover: @grey-5;
 @iconInactive: "\ea4e"; // Icon of closed accordion
 @iconActive: "\EA78"; // Icon of open accordion
 @iconOrder: 1; // Icon after text of the title
@@ -62,8 +62,8 @@
 --------------------*/
 
 @activeIconTransform: none;
-@activeTitleBackground: @secondaryColor;
-@activeTitleColor: @white;
+@activeTitleBackground: @darkWhite;
+@activeTitleColor: @grey-5;
 @activeTitleBorderBottom: 0;
 
 /*-------------------
@@ -99,9 +99,9 @@
 
 /* Styled Title States */
 @styledTitleHoverBackground: transparent;
-@styledTitleHoverColor: @activeTitleBackground;
+@styledTitleHoverColor: @activeTitleColor;
 @styledActiveTitleBackground: @activeTitleBackground;
-@styledActiveTitleColor: @white;
+@styledActiveTitleColor: @activeTitleColor;
 
 /* Styled Child Title States */
 @styledHoverChildTitleBackground: @styledTitleHoverBackground;

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

@@ -45,6 +45,10 @@
   }
 }
 
+.card .header-link:hover {
+  text-decoration: @contentLinkTextDecoration;
+}
+
 .ui.left.card {
   margin-right: auto;
 }

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

@@ -98,8 +98,8 @@
 @likeActiveColor: #FF2733;
 
 /* Links */
-@contentLinkColor: @white;
-@contentLinkHoverColor: @white;
+@contentLinkColor: @tertiaryColor;
+@contentLinkHoverColor: @tertiaryColor;
 @contentLinkFontWeight: @bold;
 @contentLinkTransition: color @defaultDuration @defaultEasing;
 @contentLinkTextDecoration: underline;

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

@@ -70,6 +70,17 @@
   }
 }
 
+// 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
+.item .icon {
+  width: auto;
+  margin-right: 0;
+}
+.ui.items > .item > .icon + .content {
+  padding-left: @tabletItemSpacing;
+}
+
 .item .tile.image,
 .block .item .tile.image {
   width: @tileImageWidth;
@@ -80,7 +91,7 @@
   margin: @mobileRowItemMargin;
 }
 
-// As semantic does for non unstacable items
+// As semantic does for non unstackable items
 // so columns does not affect margin in mobiles
 .ui.items.row > .item:last-child {
   margin-bottom: 0;
@@ -150,11 +161,18 @@
 ---------------*/
 
 .ui.items > .item {
-  &.primary > .icon {
+  &.primary,
+  > .icon.primary
+  {
     color: @primaryColor;
   }
 
-  &.secondary > .icon {
+  &.secondary,
+  > .icon.secondary {
     color: @secondaryColor;
   }
+  &.tertiary,
+  > .icon.tertiary {
+    color: @tertiaryColor;
+  }
 }