@eeacms/volto-eea-design-system 0.9.2 → 0.9.4

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

@@ -10,13 +10,13 @@
 @titlePadding: 1rem 1.563rem;
 @titlePadding: @rectangleMedium;
 @titleFontSize: 1.125rem;
-@titleColor: @textColor;
+@titleColor: @textColorCSSVar;
 @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;
@@ -32,7 +32,7 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
-@iconColorHover: @grey-5;
+@iconColorHover: @titleColorHover;
 @iconInactive: "\ea4e"; // Icon of closed accordion
 @iconActive: "\EA78"; // Icon of open accordion
 @iconOrder: 1; // Icon after text of the title
@@ -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: var(--bg-color, @white);
 @activeTitleColor: @grey-5;
 @activeTitleBorderBottom: 0;
 
@@ -72,7 +73,7 @@
 
 /* Styled */
 @styledWidth: 600px;
-@styledBackground: @white;
+@styledBackground: @activeTitleBackground;
 @styledBorderRadius: 0;
 @styledBoxShadow: none;
 

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.overrides

@@ -70,6 +70,19 @@
   }
 }
 
+// color item images that are svg files
+.item.primary img {
+  filter: @itemPrimaryFilterColor;
+}
+
+.item.secondary img {
+  filter: @itemSecondaryFilterColor;
+}
+
+.item.tertiary img {
+  filter: @itemTertiaryFilterColor;
+}
+
 // 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

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;
@@ -109,7 +113,7 @@
 @descriptionMaxWidth: auto;
 @descriptionFontSize: 1em;
 @descriptionLineHeight: @lineHeight;
-@descriptionColor: @textColor;
+@descriptionColor: @textColorCSSVar;
 
 /* Content Image */
 @contentImageWidth: '';

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

@@ -9,10 +9,10 @@
 @mobileStatisticWidth: 100%;
 @tabletStatisticWidth: inherit;
 
-@secondaryValueColor: @secondaryColor;
-@primaryLabelColor: @primaryColor;
+@secondaryValueColor: @secondaryColorCSSVar;
+@primaryLabelColor: @primaryColorCSSVar;
 
-@verticalMargin: 1em;
+@verticalMargin: 1.5em;
 @margin: @verticalMargin 0em;
 @textAlign: center;
 @maxWidth: auto;
@@ -20,7 +20,7 @@
 /* Group */
 @horizontalSpacing: 1.5em;
 @rowSpacing: 2em;
-@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
+@groupMargin: @verticalMargin 0;
 
 /* Group Element */
 @elementMargin: @rowSpacing @horizontalSpacing @rowSpacing;
@@ -36,7 +36,7 @@
 @valueFont: @pageFont;
 @valueFontWeight: @normal;
 @valueLineHeight: 1.5em;
-@valueColor: @secondaryColor;
+@valueColor: @secondaryColorCSSVar;
 @valueTextTransform: none;
 
 /* Label */
@@ -45,7 +45,7 @@
 @bottomLabelDistance: 0rem;
 @labelFont: @headerFont;
 @labelFontWeight: @bold;
-@labelColor: @primaryColor;
+@labelColor: @primaryColorCSSVar;
 @labelLineHeight: @relativeLarge;
 @labelTextTransform: none;