Merge pull request #12 from primefaces/issue-11

Fixed #11 - Add new focus variables
primefaces · Jun 26, 2023 · 561f69d · 561f69d
2 parents e7ce013 + 4b0b8fc
commit 561f69d
Show file tree

Hide file tree

Showing 31 changed files with 205 additions and 8 deletions.
diff --git a/theme-base/_mixins.scss b/theme-base/_mixins.scss
@@ -72,6 +72,92 @@
 	}
 }
 
+@mixin menuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: $menuitemFocusBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
 @mixin horizontal-rootmenuitem-link {
 	padding: $horizontalMenuRootMenuitemPadding;
 	color: $horizontalMenuRootMenuitemTextColor;

diff --git a/theme-base/components/menu/_menu.scss b/theme-base/components/menu/_menu.scss
@@ -6,8 +6,12 @@
     border-radius: $borderRadius;
     width: $menuWidth;
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    // .p-menuitem-link {
+    //     @include menuitem-link();
+    // }
+
+    .p-menuitem {
+        @include menuitem();
     }
 
     &.p-menu-overlay {
@@ -31,13 +35,13 @@
         margin: $menuSeparatorMargin;
     }
 
-    .p-menuitem {
-        margin: $verticalMenuitemMargin;
+    // .p-menuitem {
+    //     margin: $verticalMenuitemMargin;
 
-        &:last-child {
-            margin: 0;
-        }
-    }
+    //     &:last-child {
+    //         margin: 0;
+    //     }
+    // }
 
     .p-menuitem-badge {
         @include menuitem-badge();

diff --git a/themes/arya/_variables.scss b/themes/arya/_variables.scss
@@ -647,9 +647,13 @@ $menuitemIconColor:$shade100 !default;
 $menuitemTextHoverColor:$shade000 !default;
 $menuitemIconHoverColor:$shade000 !default;
 $menuitemHoverBg:$hoverBg !default;
+$menuitemTextFocusColor:$shade000 !default;
+$menuitemIconFocusColor:$shade000 !default;
+$menuitemFocusBg:rgba(255,255,255,.09) !default;
 $menuitemTextActiveColor:$shade000 !default;
 $menuitemIconActiveColor:$shade000 !default;
 $menuitemActiveBg:$hoverBg !default;
+$menuitemActiveFocusBg:$hoverBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss b/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss
@@ -649,9 +649,13 @@ $menuitemIconColor:$shade100 !default;
 $menuitemTextHoverColor:$shade000 !default;
 $menuitemIconHoverColor:$shade000 !default;
 $menuitemHoverBg:$hoverBg !default;
+$menuitemTextFocusColor:$shade000 !default;
+$menuitemIconFocusColor:$shade000 !default;
+$menuitemFocusBg:rgba(255,255,255,.12) !default;
 $menuitemTextActiveColor:$shade000 !default;
 $menuitemIconActiveColor:$shade000 !default;
 $menuitemActiveBg:$shade900 !default;
+$menuitemActiveFocusBg:$shade900 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/bootstrap4/bootstrap4-light/_variables_light.scss b/themes/bootstrap4/bootstrap4-light/_variables_light.scss
@@ -649,9 +649,13 @@ $menuitemIconColor:$shade900 !default;
 $menuitemTextHoverColor:$shade900 !default;
 $menuitemIconHoverColor:$shade900 !default;
 $menuitemHoverBg:$shade200 !default;
+$menuitemTextFocusColor:$shade900 !default;
+$menuitemIconFocusColor:$shade900 !default;
+$menuitemFocusBg:$shade300 !default;
 $menuitemTextActiveColor:$shade900 !default;
 $menuitemIconActiveColor:$shade900 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/fluent/fluent-light/_variables.scss b/themes/fluent/fluent-light/_variables.scss
@@ -60,6 +60,7 @@ $errorColor:#a4252c !default;
 //highlight
 $highlightBg: $neutralLight !default;
 $highlightTextColor: $neutralPrimary !default;
+$highlightFocusBg: $neutralQuaternaryAlt !default;
 
 //scale
 $scaleSM:0.875 !default;
@@ -667,9 +668,13 @@ $menuitemIconColor:$themePrimary !default;
 $menuitemTextHoverColor:$neutralPrimary !default;
 $menuitemIconHoverColor:$themePrimary !default;
 $menuitemHoverBg:$neutralLighter !default;
+$menuitemTextFocusColor:$neutralPrimary !default;
+$menuitemIconFocusColor:$neutralPrimary !default;
+$menuitemFocusBg:$neutralQuaternaryAlt !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$themePrimary !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem .5rem !default;

diff --git a/themes/lara/lara-dark/_variables.scss b/themes/lara/lara-dark/_variables.scss
@@ -648,9 +648,13 @@ $menuitemIconColor:$shade100 !default;
 $menuitemTextHoverColor:$shade000 !default;
 $menuitemIconHoverColor:$shade000 !default;
 $menuitemHoverBg:$hoverBg !default;
+$menuitemTextFocusColor:$shade000 !default;
+$menuitemIconFocusColor:$shade000 !default;
+$menuitemFocusBg:$shade600 !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$highlightTextColor !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1.25rem !default;

diff --git a/themes/lara/lara-dark/blue/theme.scss b/themes/lara/lara-dark/blue/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #1c2127 !default;
 
 $highlightBg:rgba(147, 197, 253, .16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-dark/indigo/theme.scss b/themes/lara/lara-dark/indigo/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #1c2127 !default;
 
 $highlightBg:rgba(165, 180, 252, .16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-dark/purple/theme.scss b/themes/lara/lara-dark/purple/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #1c2127 !default;
 
 $highlightBg:rgba(196, 181, 253, .16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-dark/teal/theme.scss b/themes/lara/lara-dark/teal/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #1c2127 !default;
 
 $highlightBg:rgba(94, 234, 212, .16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-light/_variables.scss b/themes/lara/lara-light/_variables.scss
@@ -650,9 +650,13 @@ $menuitemIconColor:$shade600 !default;
 $menuitemTextHoverColor:$shade700 !default;
 $menuitemIconHoverColor:$shade600 !default;
 $menuitemHoverBg:$shade200 !default;
+$menuitemTextFocusColor:$shade700 !default;
+$menuitemIconFocusColor:$shade700 !default;
+$menuitemFocusBg:$shade300 !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$highlightTextColor !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1.25rem !default;

diff --git a/themes/lara/lara-light/blue/theme.scss b/themes/lara/lara-light/blue/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: #EFF6FF !default;
 $highlightTextColor: $primaryDarkerColor !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-light/indigo/theme.scss b/themes/lara/lara-light/indigo/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: #EEF2FF !default;
 $highlightTextColor: $primaryDarkerColor !default;
+$highlightFocusBg: #E0E7FF !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-light/purple/theme.scss b/themes/lara/lara-light/purple/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: #F5F3FF !default;
 $highlightTextColor: $primaryDarkerColor !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/lara/lara-light/teal/theme.scss b/themes/lara/lara-light/teal/theme.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: #F0FDFA !default;
 $highlightTextColor: $primaryDarkerColor !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
 @import '../../../../theme-base/_components';

diff --git a/themes/luna/_variables.scss b/themes/luna/_variables.scss
@@ -637,9 +637,13 @@ $menuitemIconColor: #dedede !default;
 $menuitemTextHoverColor: #dedede !default;
 $menuitemIconHoverColor: #dedede !default;
 $menuitemHoverBg: #4c4c4c !default;
+$menuitemTextFocusColor: $textColor !default;
+$menuitemIconFocusColor: $textColor !default;
+$menuitemFocusBg:#3c3c3c !default;
 $menuitemTextActiveColor: $primaryTextColor !default;
 $menuitemIconActiveColor: $primaryTextColor !default;
 $menuitemActiveBg: $primaryColor !default;
+$menuitemActiveFocusBg: $primaryColor !default;
 $menuitemSubmenuIconFontSize: .875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.857rem !default;

diff --git a/themes/material/material-dark/_variables.scss b/themes/material/material-dark/_variables.scss
@@ -646,9 +646,13 @@ $menuitemIconColor:$textSecondaryColor !default;
 $menuitemTextHoverColor:$textColor !default;
 $menuitemIconHoverColor:$textSecondaryColor !default;
 $menuitemHoverBg:rgba(255,255,255,.04) !default;
+$menuitemTextFocusColor:$textColor !default;
+$menuitemIconFocusColor:$textColor !default;
+$menuitemFocusBg:hsla(0,0%,100%,.12) !default;
 $menuitemTextActiveColor:$textColor !default;
 $menuitemIconActiveColor:$textSecondaryColor !default;
 $menuitemActiveBg:rgba(255,255,255,.04) !default;
+$menuitemActiveFocusBg:rgba(255,255,255,.04) !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:1rem !default;

diff --git a/themes/material/material-light/_variables.scss b/themes/material/material-light/_variables.scss
@@ -646,9 +646,13 @@ $menuitemIconColor:$textSecondaryColor !default;
 $menuitemTextHoverColor:$textColor !default;
 $menuitemIconHoverColor:$textSecondaryColor !default;
 $menuitemHoverBg:rgba(0,0,0,.04) !default;
+$menuitemTextFocusColor:$textColor !default;
+$menuitemIconFocusColor:$textColor !default;
+$menuitemFocusBg:rgba(0,0,0,.12) !default;
 $menuitemTextActiveColor:$textColor !default;
 $menuitemIconActiveColor:$textSecondaryColor !default;
 $menuitemActiveBg:rgba(0,0,0,.04) !default;
+$menuitemActiveFocusBg:rgba(0,0,0,.04) !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:1rem !default;

diff --git a/themes/mira/_variables.scss b/themes/mira/_variables.scss
@@ -672,9 +672,13 @@ $menuitemIconColor:$primaryColorAlt !default;
 $menuitemTextHoverColor:$black100 !default;
 $menuitemIconHoverColor:$primaryColorAlt !default;
 $menuitemHoverBg:$white !default;
+$menuitemTextFocusColor:$black100 !default;
+$menuitemIconFocusColor:$black100 !default;
+$menuitemFocusBg:$white200 !default;
 $menuitemTextActiveColor:$black100 !default;
 $menuitemIconActiveColor:$primaryColorAlt !default;
 $menuitemActiveBg:$white !default;
+$menuitemActiveFocusBg:$white !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/mytheme/variables/_menu.scss b/themes/mytheme/variables/_menu.scss
@@ -78,6 +78,18 @@ $menuitemIconHoverColor: $textSecondaryColor;
 /// @group menu
 $menuitemHoverBg: #e9ecef;
 
+/// Text color of a menuitem in focus state
+/// @group menu
+$menuitemTextFocusColor: $textColor;
+
+/// Icon color of a menuitem in focus state
+/// @group menu
+$menuitemIconFocusColor: $textColor;
+
+/// Background of a menuitem in focus state
+/// @group menu
+$menuitemFocusBg: #f8f9fa;
+
 /// Text color of a menuitrem in active state
 /// @group menu
 $menuitemTextActiveColor: $textColor;
@@ -90,6 +102,10 @@ $menuitemIconActiveColor: $textSecondaryColor;
 /// @group menu
 $menuitemActiveBg: #e9ecef;
 
+/// Background of a menuitem in active and focus states
+/// @group menu
+$menuitemActiveFocusBg: #e9ecef;
+
 /// Font size of an icon indicating the itrem has a submenu
 /// @group menu
 $menuitemSubmenuIconFontSize: .875rem;

diff --git a/themes/nano/_variables.scss b/themes/nano/_variables.scss
@@ -659,9 +659,13 @@ $menuitemIconColor:$shade600 !default;
 $menuitemTextHoverColor:$shade700 !default;
 $menuitemIconHoverColor:$shade600 !default;
 $menuitemHoverBg:$shade200 !default;
+$menuitemTextFocusColor:$shade700 !default;
+$menuitemIconFocusColor:$shade700 !default;
+$menuitemFocusBg:#d2d6db !default;
 $menuitemTextActiveColor:$shade700 !default;
 $menuitemIconActiveColor:$shade600 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.25rem .5rem !default;

diff --git a/themes/nova/_variables.scss b/themes/nova/_variables.scss
@@ -637,9 +637,13 @@ $menuitemIconColor: $textColor !default;
 $menuitemTextHoverColor: $textColor !default;
 $menuitemIconHoverColor: $textColor !default;
 $menuitemHoverBg: #eaeaea !default;
+$menuitemTextFocusColor:$textColor !default;
+$menuitemIconFocusColor:$textColor !default;
+$menuitemFocusBg:#d6d6d6 !default;
 $menuitemTextActiveColor: $textColor !default;
 $menuitemIconActiveColor: $textColor !default;
 $menuitemActiveBg: #eaeaea !default;
+$menuitemActiveFocusBg: #eaeaea !default;
 $menuitemSubmenuIconFontSize: .875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.857rem !default;