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

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

@@ -9,7 +9,6 @@
 --------------------*/
 
 @fontName          : 'Roboto';
-@secondaryFontName : 'Archivo';
 @fontSmoothing     : antialiased;
 
 @headerFont        : @fontName, Arial, 'Helvetica Neue', Helvetica, sans-serif;
@@ -71,15 +70,16 @@
   Page Heading
 ---------------*/
 
-@headerLineHeight : 1.25;
+@headerLineHeight : 1.2;
 @headerFontWeight : @font-weight-7;
+@headerColor: inherit;
 
-@h1 : unit((48 / @fontSize), rem);
-@h2 : unit((40 / @fontSize), rem);
-@h3 : unit((36 / @fontSize), rem);
-@h4 : unit((24 / @fontSize), rem);
-@h5 : unit((20 / @fontSize), rem);
-@h6 : unit((18 / @fontSize), rem);
+@h1 : unit((44 / @fontSize), rem);
+@h2 : unit((32 / @fontSize), rem);
+@h3 : unit((26 / @fontSize), rem);
+@h4 : unit((20 / @fontSize), rem);
+@h5 : unit((18 / @fontSize), rem);
+@h6 : unit((16 / @fontSize), rem);
 
 @mobileH1: unit((30 / @fontSize), rem);
 @mobileH2: unit((24 / @fontSize), rem);
@@ -181,6 +181,7 @@
 @lineHeight          : @font-lineheight-3;
 @mobileLineHeight    : @font-lineheight-3;
 @textColor           : rgba(0, 0, 0, 1);
+@contentAreaColor    : @tertiaryColor;
 
 /*-------------------
       Paragraph
@@ -348,7 +349,7 @@
 
 
 /*---  Colors  ---*/
-@orange           : #EBA33D;
+@orange           : #FF9933;
 @yellow           : #F2EB49;
 @olive            : #78AB66;
 @green            : @pineGreen;
@@ -495,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

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

@@ -33,10 +33,15 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
-// Align text
+// Text
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important;}
 .text-right { text-align: right !important; }
+.bold { font-weight: bold !important; }
+
+// Text utilities
+.bold { font-weight: @bold !important; }
+.underline { text-decoration: underline !important; }
 
 // Quotes
 .quoted-wrapper h2::before,

package/theme/themes/eea/tokens/fonts.less

@@ -8,7 +8,7 @@
 @font-weight-8: 800;
 @font-weight-9: 900;
 @font-lineheight-00: .95;
-@font-lineheight-0: 1.1;
+@font-lineheight-0: 1.2;
 @font-lineheight-1: 1.25;
 @font-lineheight-2: 1.375;
 @font-lineheight-3: 1.5;
@@ -16,24 +16,25 @@
 @font-lineheight-5: 2;
 @font-letterspacing-000: -.02em;
 @font-letterspacing-00: -.015em;
-@font-letterspacing-0: -.005em;
-@font-letterspacing-1: .005em;
+@font-letterspacing-0: -.01em;
+@font-letterspacing-1: .01em;
 @font-letterspacing-2: .015em;
 @font-letterspacing-3: .02em;
 @font-letterspacing-4: .075em;
 @font-letterspacing-5: .15em;
 @font-size-00: .75rem;
-@font-size-0: .875rem;
-@font-size-1: 1rem;
-@font-size-2: 1.1rem;
-@font-size-3: 1.25rem;
-@font-size-4: 1.5rem;
-@font-size-5: 2rem;
-@font-size-6: 2.25rem;
-@font-size-7: 2.5rem;
-@font-size-8: 3rem;
-@font-size-9: 3.5rem;
-@font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
-@font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
-@font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
-@font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
+@font-size-0:  .875rem;
+@font-size-1:  1rem;
+@font-size-2:  1.125rem;
+@font-size-3:  1.25rem;
+@font-size-4:  1.5rem;
+@font-size-5:  1.625rem;
+@font-size-6:  1.875rem;
+@font-size-7:  2rem;
+@font-size-8:  2.25rem;
+@font-size-9:  2.5rem;
+@font-size-10: 2.75rem;
+@font-size-fluid-0: clamp(1.125rem, 2vw, 1.25rem);
+@font-size-fluid-1: clamp(1.25rem, 4vw, 1.625rem);
+@font-size-fluid-2: clamp(1.5rem, 6vw, 2rem);
+@font-size-fluid-3: clamp(1.875rem, 9vw, 2.75rem);

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

@@ -27,6 +27,24 @@
   }
 }
 
+.ui.cards > .card > i.icon,
+.ui.cards > .card > a > i.icon,
+.ui.card > i.icon,
+.ui.card > a > i.icon {
+  color: @iconColor;
+}
+
+.ui.cards > .card > .content > *:not(:last-child),
+.ui.card > .content > *:not(:last-child) {
+  margin-bottom: @cardContentMarginBottom;
+}
+
+.ui.card .meta {
+  display: flex;
+  justify-content: space-between;
+}
+
+
 .ui.card .meta > .category {
   font-size: @metaFontSize;
 }
@@ -61,7 +79,8 @@
             Primary
 *******************************/
 
-.ui.card.primary {
+.ui.card.primary:not(.inverted),
+.ui.card.primary:not(.inverted) .image {
   background: @primaryBackground;
 }
 
@@ -69,6 +88,10 @@
   color: @primaryHeaderColor;
 }
 
+.ui.card.primary > i.icon,
+.ui.card.primary > a > i.icon,
+.ui.card.primary > .content a,
+.ui.card.primary > .content a:hover,
 .ui.card.primary > .content > .description {
   color: @primaryDescriptionColor;
 }
@@ -81,18 +104,40 @@
   }
 }
 
-.ui.card.primary > .content > .meta {
+.ui.card.primary > .content > .meta,
+.ui.card.primary > .content > .meta a {
   color: @primaryMetaColor;
 }
 
+/* Inverted */
+.ui.card.primary.inverted > i.icon,
+.ui.card.primary.inverted > .content * {
+  color: @invertedPrimaryContentColor;
+}
+
+.ui.card.primary.inverted > a > i.icon,
+.ui.card.primary.inverted > .content a,
+.ui.card.primary.inverted > .extra.content a:not(.ui) {
+  color: @invertedPrimaryContentColor;
+
+  &:hover {
+    color: @invertedPrimaryColorHover;
+  }
+}
+
 /*******************************
             Secondary
 *******************************/
 
-.ui.card.secondary {
+.ui.card.secondary:not(.inverted),
+.ui.card.secondary:not(.inverted) .image {
   background: @secondaryBackground;
 }
 
+.ui.card.secondary > i.icon,
+.ui.card.secondary > a > i.icon,
+.ui.card.secondary > .content a,
+.ui.card.secondary > .content a:hover,
 .ui.card.secondary > .content > .header {
   color: @secondaryHeaderColor;
 }
@@ -109,18 +154,40 @@
   }
 }
 
-.ui.card.secondary > .content > .meta {
+.ui.card.secondary > .content > .meta,
+.ui.card.secondary > .content > .meta a {
   color: @secondaryMetaColor;
 }
 
+/* Inverted */
+.ui.card.secondary.inverted > i.icon,
+.ui.card.secondary.inverted > .content * {
+  color: @invertedSecondaryContentColor;
+}
+
+.ui.card.secondary.inverted > a > i.icon,
+.ui.card.secondary.inverted > .content a,
+.ui.card.secondary.inverted > .extra.content a:not(.ui) {
+  color: @invertedSecondaryContentColor;
+
+  &:hover {
+    color: @invertedSecondaryColorHover;
+  }
+}
+
 /*******************************
             Tertiary
 *******************************/
 
-.ui.card.tertiary {
+.ui.card.tertiary:not(.inverted),
+.ui.card.tertiary:not(.inverted) .image {
   background: @tertiaryBackground;
 }
 
+.ui.card.tertiary > i.icon,
+.ui.card.tertiary > a > i.icon,
+.ui.card.tertiary > .content a,
+.ui.card.tertiary > .content a:hover,
 .ui.card.tertiary > .content > .header {
   color: @tertiaryHeaderColor;
 }
@@ -137,10 +204,27 @@
   }
 }
 
-.ui.card.tertiary > .content > .meta {
+.ui.card.tertiary > .content > .meta,
+.ui.card.tertiary > .content > .meta a {
   color: @tertiaryMetaColor;
 }
 
+/* Inverted */
+.ui.card.tertiary.inverted > i.icon,
+.ui.card.tertiary.inverted > .content * {
+  color: @invertedTertiaryContentColor;
+}
+
+.ui.card.tertiary.inverted > a > i.icon,
+.ui.card.tertiary.inverted > .content a,
+.ui.card.tertiary.inverted > .extra.content a:not(.ui) {
+  color: @invertedTertiaryContentColor;
+
+  &:hover {
+    color: @invertedTertiaryColorHover;
+  }
+}
+
 /*******************************
           Rounded Card
 *******************************/
@@ -151,18 +235,23 @@
 }
 
 .ui.card.rounded {
-  width: @roundedWidth;
+  padding-top: @iconCardPaddingTop;
   border: none;
 
-  .content {
+  .image {
+    display: flex;
     justify-content: center;
-    border-top: none;
 
-    .image {
-      display: flex;
-      justify-content: center;
-      background-color: @white;
+    img {
+      width: @roundedImageWidth;
+      height: @roundedImageHeight;
+      border-radius: @roundedImageBorderRadius;
     }
+  }
+
+  .content {
+    justify-content: center;
+    border-top: none;
 
     .header {
       margin-bottom: @roundedContentTitleMarginBottom;
@@ -173,53 +262,12 @@
 
     .description {
       text-align: center;
+      font-size: @roundedMetadataFontSize;
+      font-weight: @roundedMetadataFontWeight;
     }
   }
 }
 
-.ui.card.rounded.big {
-  .image {
-    display: flex;
-    justify-content: center;
-    background-color: @white;
-
-    img {
-      width: @roundedBigImageWidth;
-      height: @roundedBigImageHeight;
-      border-radius: 50%;
-    }
-  }
-
-  .description {
-    font-size: @roundedBigMetadataFontSize;
-    font-weight: @roundedBigMetadataFontWeight;
-  }
-}
-
-.ui.rounded.small {
-  .image {
-    display: flex;
-    justify-content: center;
-    background-color: @white;
-
-    img {
-      display: flex;
-      width: @roundedSmallImageWidth;
-      height: @roundedSmallImageHeight;
-      border-radius: @roundedImageBorderRadius;
-    }
-  }
-
-  .header {
-    color: @roundedSmallTitleColor;
-  }
-
-  .description {
-    font-size: @roundedSmallMetadataFontSize;
-    font-weight: @roundedSmallMetadataFontWeight;
-  }
-}
-
 /*******************************
         Publication Card
 *******************************/
@@ -239,7 +287,8 @@
     padding: @cardContentPadding;
     background-color: @publicationCardDescriptionColor;
 
-    .meta {
+    .meta,
+    .meta a {
       color: @publicationCardtextColor;
       font-size: @cardMetaFontSize;
       font-weight: @cardMetaTagFontWeight;
@@ -306,35 +355,14 @@
 .cards-carousel {
   position: relative;
 
-  .ui.button.icon.slider-arrow {
-    padding: @carouselButtonPadding;
-    display: none;
-
-    .active, &:focus, &:hover {
-      background: transparent;
-    }
-
-    .icon {
-      color: @carouselButtonIconColor;
-      font-size: @carouselButtonIconFontSize;
-    }
-  }
-
-  .slick-arrow {
-    display: block !important;
-  }
-
-  .slick-prev,
-  .slick-next {
-    display: none !important;
-  }
-
   .slick-list {
-    margin: 0 -0.75em !important;
+    margin: @slickListMargin;
   }
 
   .slick-track {
     display: flex;
+    gap: @slickTrackGap;
+    margin: @slickTrackMargin;
   }
 
   .slick-slide {
@@ -342,69 +370,97 @@
     height: auto;
     flex: 1;
     flex-direction: column;
-    padding: 15px 0.75em !important;
 
     > div {
       height: 100%;
     }
   }
+}
 
-  .slider-arrow {
-    position: absolute;
-    top: 50%;
-    bottom: auto;
-    display: block;
-    padding: 0;
-    border: none;
+/* Carousel arrows */
+.cards-carousel .ui.button.icon.slider-arrow {
+  padding: @carouselButtonPadding;
+
+  .active, &:focus, &:hover {
     background: transparent;
-    cursor: pointer;
-    outline: none;
-    transform: translate(0, -50%);
   }
 
-  .prev-arrow {
-    right: auto;
-    left: @carouselButtonDistance;
+  &:focus-visible {
+    outline: auto;
   }
 
-  .next-arrow {
-    right: @carouselButtonDistance;
-    left: auto;
+  .icon {
+    color: @carouselButtonIconColor;
+    font-size: @carouselButtonIconFontSize;
+    opacity: @carouselButtonIconOpacity;
+    padding-top: @carouselButtonPaddingTop;
+    width: auto;
   }
+}
 
-  .slick-dots {
-    position: relative;
-    bottom: unset;
-  }
+.cards-carousel .slider-arrow {
+  position: absolute;
+  top: 50%;
+  bottom: auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transform: translate(0, -50%);
+}
 
-  .slick-dots li button:before {
-    background-color: @carouselDotsBackgroundColor;
-    color: transparent;
-    border: @carouselDotsBorder;
-    border-radius: @carouselDotsBorderRadius;
-    opacity: @carouselDotsOpacity;
-    width: @mobileCarouselDotsWidth;
-    height: @mobileCarouselDotsHeight;
-  }
+.cards-carousel .prev-arrow {
+  right: auto;
+  left: @carouselButtonDistance;
+}
 
-  .slick-dots li.slick-active button:before {
-    background-color: @carouselDotsActiveBackgroundColor;
-    color: transparent;
+.cards-carousel .next-arrow {
+  right: @carouselButtonDistance;
+  left: auto;
+} 
 
-  }
+/* Custom carousel pagination bullets */
+.cards-carousel .slick-dots li button:before {
+  background-color: @carouselDotsBackgroundColor;
+  color: transparent;
+  border: @carouselDotsBorder;
+  border-radius: @carouselDotsBorderRadius;
+  opacity: @carouselDotsOpacity;
+  width: @mobileCarouselDotsWidth;
+  height: @mobileCarouselDotsHeight;
+}
+
+.cards-carousel .slick-dots li.slick-active button:before {
+  background-color: @carouselDotsActiveBackgroundColor;
+  color: transparent;  
 }
 
+.slick-dots li button:focus-visible {
+  outline: black;
+  outline-style: auto;
+}
 
 @media only screen and (min-width: @computerBreakpoint) {
-  .cards-carousel {
+  .cards-carousel .slick-dots li button:before {
+    width: inherit;
+    height: inherit;
+  }
+}
 
-    .ui.button.icon.slider-arrow {
-      display: block;
-    }
+/*******************************
+          Icon Card
+*******************************/
 
-    .slick-dots li button:before {
-      width: inherit;
-      height: inherit;
+.ui.card.icon {
+  padding-top: @iconCardPaddingTop;
+  .content {
+    border-top: none;
+    .header {
+      word-break: break-word;
     }
   }
-}
+  .icon {
+    margin: auto;
+  }
+}