Style inverted secondary menu using css variables:

- use inverted colors to set colors in volto-tabs-block which received
  some css to look ok also when we have secondary and inverted options
- inverted non active color is now the white with a bit of opacity as
  requested by Marie with full white on active or hover
- in accordion primary and tertiary also add secondary since that could
  be the option from the tab or accordion option instead of our theme
  in which case primary was overriden by secondary
- Removed the older compatibility typos from site.variables

theme/themes/eea/collections/menu.overrides

@@ -294,7 +294,6 @@
   box-shadow: none;
 }
 
-
 .ui.secondary.vertical.menu > .item,
 .ui.vertical.menu .item {
   padding: @verticalItemPadding;
@@ -444,6 +443,10 @@
 }
 
 .ui.secondary.inverted.menu {
+  --inverted-text-color: @invertedItemTextColor;
+  --inverted-hover-text-color: @white;
+  --inverted-bg-color: var(--bg-color, @secondaryColorCSSVar);
+  --inverted-secondary-border-color: @secondaryPointingInvertedBorderColor;
   background-color: var(--bg-color, @secondaryColorCSSVar);
 }
 

theme/themes/eea/collections/menu.variables

@@ -288,7 +288,7 @@
 @secondaryPointingItemMaxWidth: 15.625rem;
 
 /* Inverted Secondary */
-@secondaryInvertedColor: @white;
+@secondaryInvertedColor: @invertedTextColor;
 
 @secondaryInvertedHoverBackground: @strongTransparentBlack;
 @secondaryInvertedHoverColor: @invertedSelectedTextColor;

theme/themes/eea/globals/site.variables

@@ -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;
@@ -618,7 +615,7 @@
 @selectedTextColor           : rgba(0, 0, 0, 0.95);
 @disabledTextColor           : rgba(0, 0, 0, 0.2);
 
-@invertedTextColor           : @white;
+@invertedTextColor           : rgba(255, 255, 255, 0.9);
 @invertedMutedTextColor      : rgba(255, 255, 255, 0.8);
 @invertedLightTextColor      : rgba(255, 255, 255, 0.7);
 @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);

theme/themes/eea/modules/accordion.overrides

@@ -96,9 +96,9 @@
   &.filter-listing {
     .title {
       .icon {
+        margin-left: @filterListingIconMarginLeft !important;
         font-size: @filterListingIconFontSize;
         line-height: @filterListingIconLineHeight;
-        margin-left: @filterListingIconMarginLeft !important;
       }
     }
   }
@@ -155,12 +155,16 @@
 /* Primary */
 .ui.accordion.primary > .active.title,
 .ui.accordion.primary.inverted > .title,
-.ui.accordion.primary > .filter {
+.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:not(.inverted) > .title:not(.active, .filter):hover,
-.ui.accordion.primary:not(.inverted) > .title:not(.active, .filter):focus-visible {
+.ui.accordion.primary:not(.inverted)
+  > .title:not(.active, .filter):focus-visible {
   --text-color-hover: @primaryColorCSSVar;
 }
 
@@ -172,19 +176,24 @@
 }
 
 .ui.accordion.secondary:not(.inverted) > .title:not(.active, .filter):hover,
-.ui.accordion.secondary:not(.inverted) > .title:not(.active, .filter):focus-visible {
+.ui.accordion.secondary:not(.inverted)
+  > .title:not(.active, .filter):focus-visible {
   --text-color-hover: @secondaryColorCSSVar;
 }
 
 /* Tertiary */
 .ui.accordion.tertiary > .active.title,
 .ui.accordion.tertiary.inverted > .title,
-.ui.accordion.tertiary > .filter {
+.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:not(.inverted) > .title:not(.active, .filter):hover,
-.ui.accordion.tertiary:not(.inverted) > .title:not(.active, .filter):focus-visible {
+.ui.accordion.tertiary:not(.inverted)
+  > .title:not(.active, .filter):focus-visible {
   --text-color-hover: @tertiaryColorCSSVar;
 }