@eeacms/volto-eea-design-system 0.6.0 → 0.7.0

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

@@ -34,6 +34,8 @@
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
 @topSectionZindex                     : @z-index-1;
+@topSectionIconMarginLeft             : 1px;
+@topSectionIconFontSize               : 0.8rem;
 
 /* Dropdown */
 @mobileDropdownMenuMarginTop          : 0;
@@ -149,6 +151,7 @@
 @megaMenuListItemFontSize: @font-size-1;
 @megaMenuListItemFontWeight: @font-weight-4;
 @megaMenuListItemPadding: @rem-space-2 0;
+@megaMenuListItemActiveBorder: 2px solid #FFF;
 
 /* At a glance */
 @megaMenuGlanceBackgroundColor: @secondaryColor;

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

@@ -24,7 +24,7 @@
 @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
 
 
-@bold              : 600;
+@bold              : @font-weight-7;
 @normal            : normal;
 
 /*-------------------
@@ -61,16 +61,18 @@
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
+@lightTertiaryColor   : @UCLABlue;
 
 @darkPrimaryColor     : @darkMidnightBlue;
 @darkSecondaryColor   : @bottleGreen;
+@darkTertiaryColor    : @japaneseIndigo;
 
 /*--------------
   Page Heading
 ---------------*/
 
 @headerLineHeight : 1.25;
-@headerFontWeight : 700;
+@headerFontWeight : @font-weight-7;
 
 @h1 : unit((48 / @fontSize), rem);
 @h2 : unit((40 / @fontSize), rem);
@@ -176,8 +178,8 @@
 @pageBackground      : @white;
 @pageOverflowX       : hidden;
 
-@lineHeight          : 1.5;
-@mobileLineHeight    : 1.5;
+@lineHeight          : @font-lineheight-3;
+@mobileLineHeight    : @font-lineheight-3;
 @textColor           : rgba(0, 0, 0, 1);
 
 /*-------------------
@@ -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

@@ -1,4 +1,11 @@
-// Color utilities
+// Color
+h1, h2, h3, h4, h5, h6, p, span, .header {
+  &.primary { color: @primaryColor !important; }
+  &.secondary { color: @secondaryColor !important; }
+  &.tertiary { color: @tertiaryColor !important; }
+  &.white { color: @white !important; }
+}
+
 .color-fg-primary { color: @primaryColor !important; }
 .color-fg-secondary { color: @secondaryColor !important; }
 .color-fg-tertiary { color: @tertiaryColor !important; }
@@ -20,23 +27,34 @@
   z-index: 0;
 }
 
-// Display utilities
+// Flexbox
 .d-flex { display: flex !important; }
 .flex-items-start { align-items: flex-start !important; }
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
-// Align text utilities
+// Align text
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important;}
 .text-right { text-align: right !important; }
 
-//Quotes utilities
+// 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;
 }
+
+// Borders
+.bordered { 
+  border-bottom: @border-size-1 solid !important;
+  padding-bottom: @rem-space-2 !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;
+  }
 }