style tabs with situations where we have secondary plus theme classes

- use --tab-naming making it clear which color we are changing
eea · Oct 25, 2023 · 41ee835 · 41ee835
1 parent e036f90
commit 41ee835
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/theme/themes/eea/collections/menu.overrides b/theme/themes/eea/collections/menu.overrides
@@ -373,6 +373,10 @@
   --text-color: @primaryColorCSSVar;
 }
 
+.primary.secondary.menu {
+  --text-color-secondary: @primaryColorCSSVar;
+}
+
 .primary.inverted.menu {
   --bg-color: @primaryColorCSSVar;
 }
@@ -442,24 +446,32 @@
   --text-color: @brown;
 }
 
+.black.menu,
 .black.inverted.menu {
   --bg-color: @black;
   --text-color: @black;
 }
 
-.ui.secondary.inverted.menu {
-  --inverted-text-color: @invertedItemTextColor;
-  --inverted-active-text-color: @white;
-  --inverted-hover-text-color: @white;
-  --inverted-bg-color: var(--bg-color, @secondaryColorCSSVar);
-  --inverted-secondary-border-color: @secondaryPointingInvertedBorderColor;
-  background-color: var(--bg-color, @secondaryColorCSSVar);
+.ui.inverted.menu {
+  --tab-inverted-text-color: @invertedItemTextColor;
+  --tab-inverted-active-text-color: @white;
+  --tab-inverted-hover-text-color: @white;
+  --tab-inverted-bg-color: var(--bg-color, @secondaryColorCSSVar);
+  --tab-inverted-secondary-active-border-color: @secondaryPointingInvertedBorderColor;
+}
+
+.ui.secondary.pointing.menu {
+  background-color: var(--tab-inverted-bg-color);
 }
 
 .tertiary.menu {
   --text-color: @tertiaryColorCSSVar;
 }
 
+.tertiary.secondary.menu {
+  --text-color-secondary: @tertiaryColorCSSVar;
+}
+
 .menu.inverted {
   --text-active-color: @white;
 }

diff --git a/theme/themes/eea/collections/menu.variables b/theme/themes/eea/collections/menu.variables
@@ -270,8 +270,8 @@
 
 @secondaryPointingHoverTextColor: var(--text-color-hover, @textColor);
 
-@secondaryPointingActiveBorderColor: @secondaryColorCSSVar;
-@secondaryPointingActiveTextColor: @secondaryColorCSSVar;
+@secondaryPointingActiveBorderColor: var(--text-color, @secondaryColor);
+@secondaryPointingActiveTextColor: var(--text-color, @secondaryColor);
 @secondaryPointingActiveFontWeight: @normal;
 
 @secondaryPointingActiveDropdownBorderColor: transparent;

diff --git a/theme/themes/eea/extras/custom.overrides b/theme/themes/eea/extras/custom.overrides
@@ -154,6 +154,11 @@
 
 // Tabs block border left/top
 .tabs-block {
+  // we don't want to show the active background color on the eea tabs
+  .tabs-accessibility {
+    --tab-active-bg-color: transparent;
+  }
+
   // make accordion transformed from rrt_tabs use same color bg as tabs
   .tabs-accessibility .RRT__panel {
     --bg-color: @white;