@eeacms/volto-eea-design-system 1.18.3 → 1.20.0

package/theme/themes/eea/extras/custom.overrides

@@ -4,7 +4,7 @@
 
 // hide breadcrumbs on homepage
 .homepage .breadcrumbs {
-    display: none !important;
+  display: none !important;
 }
 
 .homepage #page-document > .hero-block h2 {
@@ -13,16 +13,16 @@
 
 // remove padding from homepage content-area since we have the bg image over the header
 .homepage .content-area {
-    padding-top: 0 !important;
+  padding-top: 0 !important;
 }
 
 // show staging banner on homepage
 .homepage .stagingBanner {
-    display: block !important;
+  display: block !important;
 }
 
 // use homepage text color for color of cards that are within a content-box that has a variant class
-.homepage .content-box[class*="ary"] [class="ui fluid card"] {
+.homepage .content-box[class*='ary'] [class='ui fluid card'] {
   color: @blue-grey-5;
 }
 // set carousel arrow to homepage color
@@ -40,17 +40,21 @@
   .content {
     text-align: center;
   }
+
   svg.default {
     background-color: @grey-1;
   }
+
   svg.primary {
     background-color: @primaryColor;
     fill: @white !important;
   }
+
   svg.secondary {
     background-color: @secondaryColor;
     fill: @white !important;
   }
+
   svg.tertiary {
     background-color: @tertiaryColor;
     fill: @white !important;
@@ -68,7 +72,6 @@
   margin: 0;
 }
 
-
 // inherit font weight of styled headers so that if we set 300 weight it's visible also on
 // the edit page
 #page-edit .slate .styled h1,
@@ -87,31 +90,48 @@
 
 // customize error class from volto-slate to our color of red
 .error {
-    color: @red-5;
+  color: @red-5;
 }
 
 .power-user-menu,
-.blocks-chooser {
+.blocks-chooser,
+.tabs-block {
   --text-color: @textColor;
 }
+
 .blocks-chooser {
   .searchbox {
     height: auto !important;
   }
+
   .input {
     width: auto !important;
   }
+
   .clear-search-button {
     padding: 0.5rem;
   }
+
   .icon {
     margin-right: 0 !important;
   }
+
+  /* fix order and color of block choose title block
+   * which receives accordion title styling */
+  .button.title {
+    --text-color: @brown;
+    --text-color-hover: @brown;
+    --accordion-title-icon-order: 0;
+  }
 }
 
 // remove margin from block headings overriding blocks.less rule
-.block h1:last-child, .block h2:last-child, .block h3:last-child, .block h4:last-child, .block h5:last-child {
-    margin: 0;
+.block h1:last-child,
+.block h2:last-child,
+.block h3:last-child,
+.block h4:last-child,
+.block h5:last-child {
+  margin: 0;
 }
 
 // tweak padding of workflow progress titles now that
@@ -134,19 +154,20 @@
 
 // Tabs block border left/top
 .tabs-block {
-  .border-left {
-    border-right: none !important;
-    border-left: 0.0625rem solid @midGray !important;
+  // we don't want to show the active background color on the eea tabs
+  .tabs-accessibility {
+    --tab-active-bg-color: transparent;
+  }
 
-    .item.active {
-      border-right: none !important;
-      border-left-style: solid !important;
-      margin: 0em 0em 0em -0.2rem !important;
-    }
+  // make accordion transformed from rrt_tabs use same color bg as tabs
+  .tabs-accessibility .RRT__panel {
+    --bg-color: @white;
+  }
 
-    .item:active {
-      border-right: none !important;
-    }
+  // remove border from secondary active item so that when we use color
+  // it doesn't show a different color from the active background
+  .ui.secondary.inverted.menu .active.item {
+    border-color: transparent !important;
   }
 
   .border-top {
@@ -162,9 +183,9 @@
     }
 
     .item.active {
-      border-bottom: none !important;
       border-top-style: solid !important;
-      margin: 0em 0em 0em -0.2rem !important;
+      border-bottom: none !important;
+      margin: 0 0 0 -0.2rem !important;
     }
 
     .item:active {

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

@@ -33,7 +33,7 @@
 @topSectionItemFontSize               : @font-size-00;
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
-@topSectionZIndex                     : @z-index-3;
+@topSectionZIndex                     : @z-index-2;
 @dropdownColor                        : @blue-grey-6;
 @mobileDropdownFontSize               : @font-size-00;
 @tabletDropdownFontSize               : @font-size-00;

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

@@ -4,7 +4,8 @@
 
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
 
-html, body {
+html,
+body {
   font-size: @baseFontSize;
 }
 
@@ -16,17 +17,26 @@ html, body {
 button:focus-visible,
 a.button:focus-visible,
 .ui.dropdown:focus-visible,
-.ui.checkbox input[type="checkbox"]:focus-visible,
-.ui.checkbox input[type="radio"]:focus-visible {
+.ui.checkbox input[type='checkbox']:focus-visible,
+.ui.checkbox input[type='radio']:focus-visible {
   outline: @focusVisibleOutline !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  line-height: @font-lineheight-0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   letter-spacing: @font-letterspacing-00;
+  line-height: @font-lineheight-0;
 }
 
-h2, h3, h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: @headerColor;
 }
 
@@ -34,39 +44,35 @@ h2, h3, h4, h5, h6 {
   color: @contentAreaColor;
 }
 
-[id="page-document"] > *,
-.view-wrapper > *
-{
-  margin-left: auto !important;
+[id='page-document'] > *,
+.view-wrapper > * {
   margin-right: auto !important;
+  margin-left: auto !important;
 }
 
-[class~="view-defaultview"] [id="page-document"] > *,
-[class~="view-viewview"] [id="page-document"] > *,
+[class~='view-defaultview'] [id='page-document'] > *,
+[class~='view-viewview'] [id='page-document'] > *,
 #main .container_width,
 #main .has--size--container_width,
-.view-wrapper > *
-{
+.view-wrapper > * {
   max-width: @containerWidth !important;
 }
 
-[class~="narrow_view"] [id="page-document"] > *,
+[class~='narrow_view'] [id='page-document'] > *,
 #main .narrow_width,
-#main .has--size--narrow_width
-{
+#main .has--size--narrow_width {
   max-width: @narrowWidth !important;
 }
 
-[class~="wide_view"] [id="page-document"] > *,
+[class~='wide_view'] [id='page-document'] > *,
 #main .wide_width,
-#main .has--size--wide_width
-{
+#main .has--size--wide_width {
   max-width: @wideWidth !important;
 }
 
 // enlarge wide section when we have a resolution from 1280px to before the laptop hd resolution
 @media screen and (min-width: 1280px) and (max-width: 1365px) {
-  [class~="wide_view"] [id="page-document"] > *,
+  [class~='wide_view'] [id='page-document'] > *,
   #main .wide_width,
   #main .has--size--wide_width {
     max-width: @wideWidthLaptop !important;
@@ -76,15 +82,17 @@ h2, h3, h4, h5, h6 {
 .block-editor-title {
   --layout-max-width: @containerWidth;
 }
-[class~="narrow_view"] {
+
+[class~='narrow_view'] {
   --layout-max-width: @narrowWidth;
 }
-[class~="wide_view"] {
+
+[class~='wide_view'] {
   --layout-max-width: @wideWidth;
 }
 
 // add a 1rem margin top and bottom on all direct styled classes from container
-[class~="container"] > [class*="styled-"] {
+[class~='container'] > [class*='styled-'] {
   margin-top: @rem-space-4;
   margin-bottom: @rem-space-4;
 }
@@ -100,23 +108,35 @@ h2, h3, h4, h5, h6 {
 .caption,
 .discreet,
 small {
-  letter-spacing: @font-letterspacing-1;
   font-size: @font-size-00;
+  letter-spacing: @font-letterspacing-1;
   line-height: @font-lineheight-3;
 }
 
 /* Heading size adjustment */
 @media only screen and (max-width: @largestMobileScreen) {
-  h1 { font-size: @mobileH1; }
-  h2 { font-size: @mobileH2; }
-  h3 { font-size: @mobileH3; }
-  h4 { font-size: @mobileH4; }
+  h1 {
+    font-size: @mobileH1;
+  }
+
+  h2 {
+    font-size: @mobileH2;
+  }
+
+  h3 {
+    font-size: @mobileH3;
+  }
+
+  h4 {
+    font-size: @mobileH4;
+  }
 }
 
 a {
   &:visited {
-    color:  @linkVisitedColor;
+    color: @linkVisitedColor;
   }
+
   &:active {
     color: @linkActiveColor;
   }
@@ -142,12 +162,15 @@ a {
   .block-style-primary {
     color: @primaryColor;
   }
+
   .block-style-secondary {
     color: @secondaryColor;
   }
+
   .block-style-tertiary {
     color: @tertiaryColor;
   }
+
   .active {
     background-color: @grey-2;
   }
@@ -166,24 +189,29 @@ a {
     display: none;
     visibility: hidden;
   }
+
   .logo {
     margin-left: 0;
   }
+
   .static-banner {
     display: none;
     visibility: hidden;
   }
+
   .image {
-   page-break-inside: avoid;
+    page-break-inside: avoid;
   }
+
   img {
-   page-break-inside: avoid;
+    page-break-inside: avoid;
   }
-  .card {
-  page-break-inside: avoid;
 
+  .card {
+    page-break-inside: avoid;
   }
-  .grid-block-teaser .card{
+
+  .grid-block-teaser .card {
     page-break-inside: auto;
   }
 }

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

@@ -124,7 +124,7 @@
 --------------------*/
 
 /* Global focus-visible for accessibility */
-@focusVisibleOutline: .2rem auto var(--focus-visible, @blue-3);
+@focusVisibleOutline: .2rem auto var(--focus-visible, @blue-2);
 
 /* Used on inputs, textarea etc */
 @focusedFormBorderColor: @secondaryColor;
@@ -296,9 +296,6 @@
 /*-------------------
   Pastanaga Toolbar
 --------------------*/
-// legacy variable names kept for tests and older volto versions use the toolbar variables from now on
-@toolbalWidth: 80px;
-@toolbalWidthMin: 20px;
 
 @toolbarWidth: 80px;
 @toolbarWidthMin: 20px;
@@ -626,7 +623,7 @@
 @invertedPressedTextColor    : rgba(255, 255, 255, 1);
 @invertedSelectedTextColor   : rgba(255, 255, 255, 1);
 @invertedDisabledTextColor   : rgba(255, 255, 255, 0.2);
-// check volto core to rename this lowercased variable
+// check volto core to rename this lowercase variable
 @inverteditemlinkcolor       : @white;
 @invertedItemLinkColor       : @white;
 

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

@@ -2,7 +2,8 @@
          Theme Overrides
 *******************************/
 
-.accordion .filter {
+.accordion.inverted > .title,
+.accordion > .filter {
   background-color: var(--bg-color, transparent);
 }
 
@@ -16,6 +17,7 @@
   margin: @itemsMargin;
   transition: @styledTitleTransition;
 
+  // basic has important as such we also need to use important
   .basic {
     color: @titleColorHover !important;
   }
@@ -27,7 +29,7 @@
     color: @titleColorHover !important;
   }
 
-  .title {
+  > .title {
     display: flex;
     align-items: center;
     justify-content: @titleJustifyContent;
@@ -50,7 +52,7 @@
       }
     }
 
-    .icon {
+    > .icon {
       display: flex;
       width: @iconWidth;
       height: @iconHeight;
@@ -75,7 +77,7 @@
     }
   }
 
-  .active.title {
+  > .title.active {
     border-bottom: @activeTitleBorderBottom;
     background-color: @activeTitleBackground;
     color: @activeTitleColor;
@@ -94,9 +96,9 @@
   &.filter-listing {
     .title {
       .icon {
+        margin-left: @filterListingIconMarginLeft !important;
         font-size: @filterListingIconFontSize;
         line-height: @filterListingIconLineHeight;
-        margin-left: @filterListingIconMarginLeft !important;
       }
     }
   }
@@ -129,11 +131,7 @@
      Tabs as accordion (Volto)
 --------------------------------*/
 
-.ui.menu.RRT__accordion {
-  .ui.item {
-    background-color: transparent;
-  }
-
+.ui.accordion.RRT__accordion {
   .ui.item .icon {
     font-size: @iconFontSize;
 
@@ -146,42 +144,56 @@
 /*--------------
    Variations
 ---------------*/
-.ui.accordion[class*='ary'] .active.title,
-.ui.accordion[class*='ary'] .filter {
+.ui.accordion[class*='ary'] > .active.title,
+.ui.accordion[class*='ary'].inverted > .title,
+.ui.accordion[class*='ary'].inverted > .icon,
+.ui.accordion[class*='ary'] > .filter {
   --text-color-hover: white;
   --text-color: white;
 }
 
 /* Primary */
-.ui.accordion.primary .active.title,
-.ui.accordion.primary .filter {
+.ui.accordion.primary > .active.title,
+.ui.accordion.primary.inverted > .title,
+.ui.accordion.primary > .filter,
+.ui.accordion.secondary.primary > .active.title,
+.ui.accordion.secondary.primary.inverted > .title,
+.ui.accordion.secondary.primary > .filter {
   --bg-color: @primaryColorCSSVar;
 }
 
-.ui.accordion.primary .title:not(.active, .filter):hover,
-.ui.accordion.primary .title:not(.active, .filter):focus-visible {
+.ui.accordion.primary:not(.inverted) > .title:not(.active, .filter):hover,
+.ui.accordion.primary:not(.inverted),
+> .title:not(.active, .filter):focus-visible {
   --text-color-hover: @primaryColorCSSVar;
 }
 
 /* Secondary */
-.ui.accordion.secondary .active.title,
-.ui.accordion.secondary .filter {
+.ui.accordion.secondary > .active.title,
+.ui.accordion.secondary.inverted > .title,
+.ui.accordion.secondary > .filter {
   --bg-color: @secondaryColorCSSVar;
 }
 
-.ui.accordion.secondary .title:not(.active, .filter):hover,
-.ui.accordion.secondary .title:not(.active, .filter):focus-visible {
+.ui.accordion.secondary:not(.inverted) > .title:not(.active, .filter):hover,
+.ui.accordion.secondary:not(.inverted),
+> .title:not(.active, .filter):focus-visible {
   --text-color-hover: @secondaryColorCSSVar;
 }
 
 /* Tertiary */
-.ui.accordion.tertiary .active.title,
-.ui.accordion.tertiary .filter {
+.ui.accordion.tertiary > .active.title,
+.ui.accordion.tertiary.inverted > .title,
+.ui.accordion.tertiary > .filter,
+.ui.accordion.secondary.tertiary > .active.title,
+.ui.accordion.secondary.tertiary.inverted > .title,
+.ui.accordion.secondary.tertiary > .filter {
   --bg-color: @tertiaryColorCSSVar;
 }
 
-.ui.accordion.tertiary .title:not(.active, .filter):hover,
-.ui.accordion.tertiary .title:not(.active, .filter):focus-visible {
+.ui.accordion.tertiary:not(.inverted) > .title:not(.active, .filter):hover,
+.ui.accordion.tertiary:not(.inverted),
+> .title:not(.active, .filter):focus-visible {
   --text-color-hover: @tertiaryColorCSSVar;
 }
 

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

@@ -13,7 +13,7 @@
 @titleColor: @textColorCSSVar;
 @titleBorderBottom: @1px solid @silverGray;
 @titleColorHover:var(--text-color-hover, @grey-5);
-@titleJustifyContent: space-between;
+@titleJustifyContent: var(--accordion-title-justify, space-between);
 
 /* Icon */
 @iconColor: var(--text-color, @oldSilver);
@@ -33,7 +33,7 @@
 @iconVerticalAlign: baseline;
 @iconTransform: none;
 @iconColorHover: @titleColorHover;
-@iconOrder: 1; // Icon after text of the title
+@iconOrder: var(--accordion-title-icon-order, 1); // Icon after text of the title
 @filterIconWidth: 3rem;
 @filterIconFontSize: 2rem;
 @filterIconMargin: 0 10px;
@@ -51,7 +51,7 @@
 @contentMargin: 0;
 @contentPaddingBottom: 1.563rem;
 @contentPadding: @squareMedium;
-@contentBackground: @grey-1;
+@contentBackground: var(--bg-color, @grey-1);
 @contentColor: @tertiaryColor;
 
 /*-------------------
@@ -117,5 +117,5 @@
 @styledActiveChildTitleColor: @styledActiveTitleColor;
 
 /* Inverted */
-@invertedTitleColor: @invertedTextColor;
+@invertedTitleColor: @activeTitleColor;
 

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

@@ -9,8 +9,8 @@
 }
 
 // To display focus state
-.ui.checkbox input[type="checkbox"],
-.ui.checkbox input[type="radio"] {
+.ui.checkbox input[type='checkbox'],
+.ui.checkbox input[type='radio'] {
   opacity: 1 !important;
 }
 

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

@@ -7,8 +7,8 @@
 }
 
 .ui.modal .ui.button.close {
-  background: @closeButtonBackground;
   padding: @closeButtonPadding;
+  background: @closeButtonBackground;
 
   i {
     color: @closeColor;
@@ -17,4 +17,4 @@
 
 .ui.modal .ui.button.close:focus-visible {
   outline: @focusVisibleOutline;
-}
+}

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

@@ -1,3 +1,7 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+.react-select__value-container{
+    padding: 8px !important;
+}

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

@@ -2,18 +2,11 @@
          Tab Overrides
 *******************************/
 
-.ui.pointing.secondary.menu {
+.ui.menu.vertical,
+.ui.menu[class*='ary'] {
   .item {
     font-size: @headerSize;
   }
-
-  .item:hover {
-    color: @tabActiveItemHoverColor;
-  }
-}
-
-.tabs-block {
-  color: @tabsBlockColor;
 }
 
 // Contain images inside vertical tab content
@@ -21,18 +14,19 @@
   max-width: @verticalTabPaneImageMaxWidth;
 }
 
-.ui.pointing.secondary.menu::-webkit-scrollbar {
+.ui.menu[class*='ary']::-webkit-scrollbar {
   height: @mobileTabScrollbarHeight;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .ui.pointing.secondary.menu::-webkit-scrollbar {
+  .ui.menu[class*='ary']::-webkit-scrollbar {
     height: @tabletTabScrollbarHeight;
   }
 }
 
 @media only screen and (max-width: @largestMobileScreen) {
-  .ui.pointing.secondary.vertical.menu {
+  .ui.menu.vertical,
+  .ui.menu.vertical.secondary {
     .item {
       padding: @mobileItemPadding;
       font-size: @mobileItemFontSize;

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

@@ -2,7 +2,7 @@
               Tab
 *******************************/
 @tabsBlockColor: @textColor;
-@tabActiveItemHoverColor: @secondaryColor;
+@tabActiveItemHoverColor: @secondaryColorCSSVar;
 
 @mobileItemFontSize: 1rem;
 @mobileItemPadding: 1rem 0.25rem;
@@ -10,6 +10,7 @@
 @headerSize: @h4;
 @headerSizeResponsive: @fontSize;
 @contentSize: @fontSize;
+@tabsColorHover: #fefefe;
 
 /* Loading */
 @loadingMinHeight: 250px;

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

@@ -40,8 +40,8 @@
 
 @blue-0: #A0D7FF;
 @blue-1: #47B3FF;
-@blue-2: #0A99FF;
-@blue-3: #0083E0;
+@blue-2: #008FF5;
+@blue-3: #0079CF;
 @blue-4: #006BB8;
 @blue-5: #004B7F;
 @blue-6: #003052;