automatically pick active menu item text color

picking text color by contrast instead of hardcoded white for easier color scheme customisation

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index ea708600de0b0301987379850fc8769958638627..0cbb9d0a95437fb3dbca9d8425be68866bc574f5 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -26,6 +26,10 @@ $menu-simple-margin: 1rem !default;
 /// @type Color
 $menu-item-color-active: $white !default;
 
+/// Alternative text color of an active menu item..
+/// @type Color
+$menu-item-color-alt-active: $black !default;
+
 /// Background color of an active menu item.
 /// @type Color
 $menu-item-background-active: get-color(primary) !default;
@@ -350,7 +354,7 @@ $menu-icons-back-compat: true !default;
 
 @mixin menu-state-active {
   background: $menu-item-background-active;
-  color: $menu-item-color-active;
+  color: color-pick-contrast($menu-item-background-active, ($menu-item-color-active, $menu-item-color-alt-active));
 }
 
 @mixin foundation-menu {

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index fb447f895609c0647e4e56167bebe48bd36d8ec6..f06c97dcc11fab73143e62ff7f1eed14eb44fe43 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -473,6 +473,7 @@ $menu-nested-margin: $global-menu-nested-margin;
 $menu-items-padding: $global-menu-padding;
 $menu-simple-margin: 1rem;
 $menu-item-color-active: $white;
+$menu-item-color-alt-active: $black;
 $menu-item-background-active: get-color(primary);
 $menu-icon-spacing: 0.25rem;
 $menu-item-background-hover: $light-gray;