feat(accordion): style inverted theme version to set bg color to them…

…e color

- removed important calls, we should have them only for rules that already have important

theme/themes/eea/modules/accordion.overrides

@@ -2,20 +2,22 @@
          Theme Overrides
 *******************************/
 
+.accordion.inverted .title,
 .accordion .filter {
-  background-color: var(--bg-color, transparent) !important;
+  background-color: var(--bg-color, transparent);
 }
 
 .ui.accordion button.title {
   width: 100%;
   border: none;
-  background: transparent !important;
+  background: transparent;
 }
 
 .ui.accordion {
   margin: @itemsMargin;
   transition: @styledTitleTransition;
 
+  // basic has important as such we also need to use important
   .basic {
     color: @titleColorHover !important;
   }
@@ -77,7 +79,7 @@
 
   .active.title {
     border-bottom: @activeTitleBorderBottom;
-    background-color: @activeTitleBackground !important;
+    background-color: @activeTitleBackground;
     color: @activeTitleColor;
 
     .icon {
@@ -127,35 +129,22 @@
       font-size: @iconFontSize;
     }
   }
-
-  .title {
-      padding: 1rem 1.25rem;
-      font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
-      font-size: 1.125rem;
-      color: var(--text-color, #3D5265);
-  }
 }
 
 /*--------------
    Variations
 ---------------*/
 .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;
-
-
-}
-
-.ui.accordion.inverted{
-  background-color: @green !important;
-    .icon {
-    color: white !important;
-  } 
 }
 
 /* Primary */
 .ui.accordion.primary .active.title,
+.ui.accordion.primary.inverted .title,
 .ui.accordion.primary .filter {
   --bg-color: @primaryColorCSSVar;
 }
@@ -167,6 +156,7 @@
 
 /* Secondary */
 .ui.accordion.secondary .active.title,
+.ui.accordion.secondary.inverted .title,
 .ui.accordion.secondary .filter {
   --bg-color: @secondaryColorCSSVar;
 }
@@ -178,6 +168,7 @@
 
 /* Tertiary */
 .ui.accordion.tertiary .active.title,
+.ui.accordion.tertiary.inverted .title,
 .ui.accordion.tertiary .filter {
   --bg-color: @tertiaryColorCSSVar;
 }

theme/themes/eea/modules/accordion.variables

@@ -113,5 +113,5 @@
 @styledActiveChildTitleColor: @styledActiveTitleColor;
 
 /* Inverted */
-@invertedTitleColor: @invertedTextColor;
+@invertedTitleColor: @activeTitleColor;