@eeacms/volto-eea-design-system 0.3.1 → 0.4.2

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

@@ -0,0 +1,87 @@
+@type: 'extra';
+@element: 'downloadLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+        Download Labeled Icon
+*******************************/
+.eea.download.labeled.icon {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: @downloadLabeledIconWidth;
+  min-width: @downloadLabeledIconMinWidth;
+  text-align: @downloadLabeledIconTextAlign;
+
+  .label {
+    width: @downloadLabeledIconLabelWidth;
+    font-size: @downloadLabeledIconLabelFontSize;
+    color: @downloadLabeledIconLabelColor;
+    cursor: pointer;
+  }
+  .icon.wrapper {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    width: @downloadLabeledIconWrapperWidth;
+    padding: @downloadLabeledIconWrapperPadding;
+
+    .icon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: @downloadLabeledIconIconFontSize;
+      color: @downloadLabeledIconColor;
+      width: @downloadLabeledIconIconWidth;
+      height: @downloadLabeledIconWrapperIconHeight;
+    }
+  }
+}
+
+.ui.popup.download-popup {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  .dropdown {
+    position: relative;
+    width: @downloadLabeledIconDropdownWIdth;
+
+    .link.wrapper {
+      cursor: pointer;
+      background-color: @downloadLabeledIconLinkWrapperBackgroundColor;
+      z-index: @downloadLabeledIconLinkWrapperZIndex;
+      width: @downloadLabeledIconLinkWrapperWidth;
+
+      ul {
+        list-style-type: none;
+        margin: @downloadLabeledIconUlMargin;
+        padding: @downloadLabeledIconUlPaddingInlineStart;
+
+        a {
+          display: flex;
+          justify-content: center;
+          font-weight: @downloadLabeledIconALinkFontWeight;
+          font-size: @downloadLabeledIconLinkFontSize;
+          padding: @downloadLabeledIconLinkIconPadding;
+          color: @downloadLabeledIconALinkColor;
+          
+          .icon {
+            font-size: @downloadLabeledIconLinkIconFontSize;
+            line-height: @downloadLabeledIconLinkIconLineHeight;
+          }
+        }
+        a:hover {
+          color: @downloadLabeledIconALinkColorHover;
+        }
+        li:hover {
+          background-color: @downloadLabeledIconLiHover;
+        }
+      }
+    }
+    .link.wrapper.hidden {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+/*******************************
+        Download Labeled Icon
+*******************************/
+
+/* Body */
+@downloadLabeledIconWidth: min-content;
+@downloadLabeledIconMinWidth: 5rem;
+@downloadLabeledIconTextAlign: center;
+
+/* Label */
+@downloadLabeledIconLabelWidth: 100%;
+@downloadLabeledIconLabelFontSize: 0.875rem;
+@downloadLabeledIconLabelColor: @deepBlue;
+
+/* Wrapper */
+@downloadLabeledIconWrapperWidth: 100%;
+@downloadLabeledIconWrapperPadding: 0.5rem;
+
+/* Icon */
+@downloadLabeledIconIconFontSize: 1.563rem;
+@downloadLabeledIconWrapperIconHeight: 1.25rem;
+@downloadLabeledIconIconWidth: 1.25rem;
+@downloadLabeledIconColor: @mediumPersianBlue;
+
+/* Link Wrapper */
+@downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9;
+@downloadLabeledIconLinkWrapperZIndex: 1;
+@downloadLabeledIconLinkWrapperWidth: 100%;
+
+/* Dropdown */
+@downloadLabeledIconDropdownWIdth: 100%;
+
+/* List */
+@downloadLabeledIconUlMargin: 0.25rem 0;
+@downloadLabeledIconUlPaddingInlineStart: 0.25rem 0px;
+@downloadLabeledIconLiHover: @japaneseIndigo;
+
+/* Link */
+@downloadLabeledIconALinkFontWeight: 700;
+@downloadLabeledIconLinkFontSize: 0.875rem;
+@downloadLabeledIconLinkIconFontSize: 1rem;
+@downloadLabeledIconLinkIconPadding: 0.125rem 0.875rem;
+@downloadLabeledIconLinkIconLineHeight: 1.25rem;
+@downloadLabeledIconALinkColor: @japaneseIndigo;
+@downloadLabeledIconALinkColorHover: @white;

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

@@ -0,0 +1,20 @@
+@type: 'extra';
+@element: 'labeledIconGroup';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+        Labeled Icon Group
+*******************************/
+.eea.labeled.icon.group {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: @labeledIconGroupWidth;
+  padding: @labeledIconGroupPadding;
+
+  .group.wrapper {
+    margin-left: @labeledIconGroupWrapperMarginLeft;
+    margin-right: @labeledIconGroupWrapperMarginRight;
+  }
+}

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

@@ -0,0 +1,10 @@
+
+/*******************************
+        Labeled Icon Group
+*******************************/
+
+@labeledIconGroupWidth : 100%;
+@labeledIconGroupPadding : 0 2rem;
+
+@labeledIconGroupWrapperMarginLeft: 0.25rem;
+@labeledIconGroupWrapperMarginRight: 0.25rem;

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

@@ -0,0 +1,81 @@
+@type: 'extra';
+@element: 'languageLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+      Language Labeled Icon
+*******************************/
+
+.eea.language.labeled.icon {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: @languageLabeledIconWidth;
+  min-width: @languageLabeledIconMinWidth;
+  text-align: @languageLabeledIconTextAlign;
+
+  .icon.wrapper {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: @languageLabeledIconIconWrapperFontSize;
+    font-weight: @languageLabeledIconIconWrapperFontWeight;
+    color: @languageLabeledIconIconWrapperColor;
+
+    i {
+      color: @languageLabeledIconIconWrapperIconColor;
+      margin-right: @languageLabeledIconIconWrapperIconMarginRight;
+      font-size: @languageLabeledIconIconWrapperIconFontSize;
+    }
+  }
+
+  .label {
+    color: @languageLabeledIconLabelColor;
+    font-size: @languageLabeledIconLabelFontSize;
+    font-weight: @languageLabeledIconLabelFontWeight;
+    cursor: pointer;
+  }
+}
+
+.ui.popup.language-popup {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  .dropdown {
+
+    .link.wrapper {
+      display: flex;  
+      width: @languageLabeledIconDropdowLinkWrapperWidth;
+      background-color: @languageLabeledIconDropdownBackgroundColor;
+      z-index: 1;
+
+      &.hidden {
+        display: none;
+      }
+
+      ul {
+        list-style-type: none;
+        margin: 0;
+        color: @languageLabeledIconLabelUlColor;
+        padding: @languageLabeledIconLabelUlPadding;
+
+        li {
+          cursor: pointer;
+          padding: @languageLabeledIconLabelUlLiPadding;
+        }
+
+        li:hover {
+          color: @languageLabeledIconLabelUlLiColor;
+          background-color: @languageLabeledIconLabelUlLiBackgroundColor;
+        }
+
+        li span {
+          font-weight: @languageLabeledIconLabelUlLiSpanFontWeight;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+/*******************************
+      Language Labeled Icon
+*******************************/
+
+/* Body  */
+@languageLabeledIconWidth : min-content;
+@languageLabeledIconMinWidth: 7rem;
+@languageLabeledIconTextAlign: center;
+
+/* Icon Wrapper  */
+@languageLabeledIconIconWrapperFontSize : 0.875rem;
+@languageLabeledIconIconWrapperFontWeight : 400;
+@languageLabeledIconIconWrapperColor : @deepBlue;
+
+/* Icon  */
+@languageLabeledIconIconWrapperIconColor: @mediumPersianBlue;
+@languageLabeledIconIconWrapperIconMarginRight: 0.25rem;
+@languageLabeledIconIconWrapperIconFontSize: 1.5rem;
+
+/* Label  */
+@languageLabeledIconLabelColor: @deepBlue;
+@languageLabeledIconLabelFontSize: 0.875rem;
+@languageLabeledIconLabelFontWeight: 400;
+
+/* Dropdown  */
+@languageLabeledIconDropdownBackgroundColor: #f9f9f9;
+
+/* Link  */
+@languageLabeledIconDropdowLinkWrapperWidth: max-content;
+
+
+/* List  */
+@languageLabeledIconLabelUlMargin:0;
+@languageLabeledIconLabelUlColor: @japaneseIndigo;
+@languageLabeledIconLabelUlPadding: 0.25rem;
+
+/* List Item  */
+@languageLabeledIconLabelUlLiPadding: 0.125rem 0.313rem;
+@languageLabeledIconLabelUlLiColor: @white;
+@languageLabeledIconLabelUlLiBackgroundColor: @japaneseIndigo;
+@languageLabeledIconLabelUlLiSpanFontWeight: 700;

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

@@ -0,0 +1,41 @@
+@type: 'extra';
+@element: 'newTabLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+      New Tab Labeled Icon
+*******************************/
+.eea.new.tab.labeled.icon {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: @newTabLabeledIconWidth;
+  min-width: @newTabLabeledIconMinWidth;
+  text-align: @newTabLabeledIconTextAlign;
+
+  .label {
+    width: @newTabLabeledIconLabelWidth;
+    font-size: @newTabLabeledIconLabelFontSize;
+    color: @newTabLabeledIconLabelColor;
+    cursor: pointer;
+  }
+
+  .icon.wrapper {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    width: @newTabLabeledIconIconWrapperWidth;
+    padding: @newTabLabeledIconWrapperPadding;
+
+    .icon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: @newTabLabeledIconIconFontSize;
+      color: @newTabLabeledIconColor;
+      width: @newTabLabeledIconIconWidth;
+      height: @newTabLabeledIconWrapperIconHeight;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+/*******************************
+        New Tab Labeled Icon
+*******************************/
+
+/* Body */
+@newTabLabeledIconWidth: min-content;
+@newTabLabeledIconMinWidth: 7rem;
+@newTabLabeledIconTextAlign: center;
+
+/* Label */
+@newTabLabeledIconLabelWidth: 100%;
+@newTabLabeledIconLabelFontSize: 0.875rem;
+@newTabLabeledIconLabelColor: @deepBlue;
+@newTabLabeledIconColor: @mediumPersianBlue;
+
+/* Icon Wrapper */
+@newTabLabeledIconIconWrapperWidth: 100%;
+@newTabLabeledIconWrapperPadding: 0.5rem;
+
+/* Icon */
+@newTabLabeledIconIconFontSize: 1.563rem;
+@newTabLabeledIconWrapperIconHeight: 1.25rem;
+@newTabLabeledIconIconWidth: 1.25rem;

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

@@ -45,9 +45,9 @@
   }
 
   .info {
-    text-align: @sourceInfoTextAlign;
-    font-weight: @sourceInfoFontWeight;
-    font-size: @sourceInfoFontSize;
+    text-align: @extraTextAlign;
+    font-weight: @extraFontWeight;
+    font-size: @extraFontSize;
   }
 }
 

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

@@ -22,10 +22,10 @@
 @sourceFontSize      : 1.25rem;
 @sourceMargin        : 0;
 
-/* Source Info */
-@sourceInfoTextAlign       : right;
-@sourceInfoFontWeight      : @normal;
-@sourceInfoFontSize        : 1rem;
+/* Extra info */
+@extraTextAlign      : right;
+@extraFontWeight     : @normal;
+@extraFontSize       : 1rem;
 
 /* Icon */
 @mobileQuoteIconSize : 2rem;

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

@@ -2,6 +2,8 @@
         Global Overrides
 *******************************/
 
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
+
 /* Heading size adjustment */
 @media only screen and (min-width: @tabletBreakpoint) {
   h1 {

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

@@ -57,6 +57,7 @@
 
 @primaryColor         : @darkCerulean;
 @secondaryColor       : @pineGreen;
+@tertiaryColor        : @deepBlue;
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
@@ -71,12 +72,12 @@
 @headerLineHeight : 1.25;
 @headerFontWeight : 700;
 
-@h1 : unit((48 / 16), rem);
-@h2 : unit((40 / 16), rem);
-@h3 : unit((36 / 16), rem);
-@h4 : unit((24 / 16), rem);
-@h5 : unit((20 / 16), rem);
-@h6 : unit((18 / 16), rem);
+@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);
 
 /*--------------
    Form Input
@@ -750,6 +751,15 @@
 @62px : unit( (62 / @emSize), rem);
 @63px : unit( (63 / @emSize), rem);
 @64px : unit( (64 / @emSize), rem);
+// extra sizes
+@68px : unit( (68 / @emSize), em);
+@72px : unit( (72 / @emSize), em);
+@76px : unit( (76 / @emSize), em);
+@80px : unit( (80 / @emSize), rem);
+@96px : unit( (96 / @emSize), rem);
+@112px : unit( (112 / @emSize), rem);
+@128px : unit( (128 / @emSize), rem);
+@140px : unit( (140 / @emSize), rem);
 
 @relative1px  : unit( (1 / @emSize), em);
 @relative2px  : unit( (2 / @emSize), em);
@@ -815,6 +825,15 @@
 @relative62px : unit( (62 / @emSize), em);
 @relative63px : unit( (63 / @emSize), em);
 @relative64px : unit( (64 / @emSize), em);
+// extra sizes
+@relative68px : unit( (68 / @emSize), em);
+@relative72px : unit( (72 / @emSize), em);
+@relative76px : unit( (76 / @emSize), em);
+@relative80px : unit( (80 / @emSize), em);
+@relative96px : unit( (96 / @emSize), em);
+@relative112px : unit( (112 / @emSize), em);
+@relative128px : unit( (128 / @emSize), em);
+@relative140px : unit( (140 / @emSize), em);
 
 /* Columns */
 @oneMobile     : (1 / @mobileColumns * 100%);

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

@@ -0,0 +1,31 @@
+// Color utilities
+.color-fg-primary { color: @primaryColor !important; }
+.color-fg-secondary { color: @secondaryColor !important; }
+.color-fg-tertiary { color: @tertiaryColor !important; }
+.color-fg-white { color: @white !important; }
+
+.color-bg-primary { background-color: @primaryColor !important; }
+.color-bg-secondary { background-color: @secondaryColor !important; }
+.color-bg-tertiary { background-color: @tertiaryColor !important; }
+.color-bg-grey { background-color: #F9F9F9 !important; }
+
+// Display utilities
+.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
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important;}
+.text-right { text-align: right !important; }
+
+//Quotes utilities
+.quoted::before {
+  content: "\ec51";
+  font-family: 'remixicon' !important;
+}
+.quoted::after {
+  content: "\ec52";
+  font-family: 'remixicon' !important;
+}

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

@@ -0,0 +1,14 @@
+@border-size-0: 0px;
+@border-size-1: 1px;
+@border-size-2: 2px;
+@border-size-3: 3px;
+@border-size-4: 5px;
+@border-size-5: 10px;
+@radius-0: 0px;
+@radius-1: 2px;
+@radius-2: 5px;
+@radius-3: 1rem;
+@radius-4: 2rem;
+@radius-5: 4rem;
+@radius-6: 8rem;
+@radius-round: 1e5px;

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

@@ -0,0 +1,63 @@
+@brown-0: #FFF6EC;
+@brown-1: #FFEDD8;
+@brown-2: #E7BC91;
+@brown-3: #BC8A5F;
+@brown-4: #8B5E34;
+@brown-5: #603808;
+@brown-6: #3D2201;
+
+@purple-0: #EFEBF2;
+@purple-1: #DFD6E7;
+@purple-2: #BEADCE;
+@purple-3: #9E84B6;
+@purple-4: #7D5B9D;
+@purple-5: #5C3285;
+@purple-6: #3C096C;
+
+@red-0: #FBEEF8;
+@red-1: #F6DDF0;
+@red-2: #E7B2C0;
+@red-3: #D78890;
+@red-4: #C65B59;
+@red-5: #B83230;
+@red-6: #5C1918;
+
+@green-0: #C8FFF8;
+@green-1: #85FFF1;
+@green-2: #00F5D8;
+@green-3: #00CCB4;
+@green-4: #00A390;
+@green-5: #007B6C;
+@green-6: #005248;
+
+@yellow-0: #FEF6CD;
+@yellow-1: #FBEC9B;
+@yellow-2: #FAD936;
+@yellow-3: #FAC50D;
+@yellow-4: #FDAF20;
+@yellow-5: #FF9933;
+@yellow-6: #E56B38;
+
+@blue-0: #A0D7FF;
+@blue-1: #47B3FF;
+@blue-2: #0A99FF;
+@blue-3: #0083E0;
+@blue-4: #006BB8;
+@blue-5: #004B7F;
+@blue-6: #003052;
+
+@blue-grey-0: #DAE8F4;
+@blue-grey-1: #ACCAE5;
+@blue-grey-2: #8EA6C2;
+@blue-grey-3: #6989A5;
+@blue-grey-4: #4C677F;
+@blue-grey-5: #3D5265;
+@blue-grey-6: #2E3E4C;
+
+@grey-0: #FFFFFF;
+@grey-1: #F9F9F9;
+@grey-2: #E6E7E8;
+@grey-3: #BCBEC0;
+@grey-4: #808285;
+@grey-5: #323232;
+@grey-6: #000000;

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

@@ -22,8 +22,8 @@
 @font-letterspacing-5: .500em;
 @font-letterspacing-6: .750em;
 @font-letterspacing-7: 1em;
-@font-size-00: .5rem;
-@font-size-0: .75rem;
+@font-size-00: .75rem;
+@font-size-0: .875rem;
 @font-size-1: 1rem;
 @font-size-2: 1.1rem;
 @font-size-3: 1.25rem;

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

@@ -0,0 +1,41 @@
+@shadow-color: 220, 3%, 15%;
+@shadow-strength: 1%;
+
+@shadow-0: none;
+@shadow-1: 0 1px 2px -1px hsla(@shadow-color, calc(@shadow-strength + 9%));
+@shadow-2: 
+  0 3px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 7px 14px -5px hsla(@shadow-color, calc(@shadow-strength + 5%));
+@shadow-3: 
+  0 -1px 3px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 2px -5px hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 2px 5px -5px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 4px 12px -5px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 12px 15px -5px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@shadow-4: 
+  0 -2px 5px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 2px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 9px 9px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));
+@shadow-5: 
+  0 -1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 2px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 10px 10px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 20px 20px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 40px 40px -2px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@shadow-6: 
+  0 -1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 3px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 7px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 12px 10px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 22px 18px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 41px 33px -2px hsla(@shadow-color, calc(@shadow-strength + 6%)),
+  0 100px 80px -2px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@inner-shadow-0: inset 0 0 0 1px hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-1: inset 0 1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-2: inset 0 1px 4px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-3: inset 0 2px 8px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-4: inset 0 2px 14px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));

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

@@ -0,0 +1,6 @@
+// Blob
+@radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
+@radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
+@radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
+@radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
+@radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;