From 4870d66609a0e19bd61b7970a3829c54894fba18 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 4 May 2024 20:06:51 +0300
Subject: [PATCH] Refactored Menu component tokens

---
 .../lib/contextmenu/style/ContextMenuStyle.js | 18 ++---
 .../lib/megamenu/style/MegaMenuStyle.js       | 20 ++---
 components/lib/menu/style/MenuStyle.js        | 14 ++--
 components/lib/menubar/style/MenubarStyle.js  | 18 ++---
 .../lib/panelmenu/style/PanelMenuStyle.js     | 24 +++---
 components/lib/steps/style/StepsStyle.js      | 16 ++--
 components/lib/tabmenu/style/TabMenuStyle.js  | 14 ++--
 .../lib/themes/aura/breadcrumb/index.js       | 37 +++------
 .../lib/themes/aura/contextmenu/index.js      | 56 +++++--------
 components/lib/themes/aura/index.js           | 32 ++++++++
 components/lib/themes/aura/megamenu/index.js  | 80 ++++++-------------
 components/lib/themes/aura/menu/index.js      | 62 +++++---------
 components/lib/themes/aura/menubar/index.js   | 71 ++++++----------
 components/lib/themes/aura/panelmenu/index.js | 44 +++-------
 components/lib/themes/aura/steps/index.js     | 46 +++--------
 components/lib/themes/aura/tabmenu/index.js   | 34 +++-----
 .../lib/themes/aura/tieredmenu/index.js       | 56 +++++--------
 .../lib/tieredmenu/style/TieredMenuStyle.js   | 18 ++---
 doc/megamenu/BasicDoc.vue                     |  6 +-
 doc/megamenu/VerticalDoc.vue                  |  6 +-
 20 files changed, 256 insertions(+), 416 deletions(-)

diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js
index f8b16e0bd..54e9244e0 100644
--- a/components/lib/contextmenu/style/ContextMenuStyle.js
+++ b/components/lib/contextmenu/style/ContextMenuStyle.js
@@ -79,33 +79,33 @@ const theme = ({ dt }) => `
 }
 
 .p-contextmenu-item.p-focus > .p-contextmenu-item-content {
-    color: ${dt('contextmenu.item.focus.color')};
-    background: ${dt('contextmenu.item.focus.background')};
+    color: ${dt('contextmenu.item.hover.color')};
+    background: ${dt('contextmenu.item.hover.background')};
 }
 
 .p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon,
 .p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
-    color: ${dt('contextmenu.item.icon.focus.color')};
+    color: ${dt('contextmenu.item.icon.hover.color')};
 }
 
 .p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {
-    color: ${dt('contextmenu.item.focus.color')};
-    background: ${dt('contextmenu.item.focus.background')};
+    color: ${dt('contextmenu.item.hover.color')};
+    background: ${dt('contextmenu.item.hover.background')};
 }
 
 .p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon,
 .p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
-    color: ${dt('contextmenu.item.icon.focus.color')};
+    color: ${dt('contextmenu.item.icon.hover.color')};
 }
 
 .p-contextmenu-item-active > .p-contextmenu-item-content {
-    color: ${dt('contextmenu.item.focus.color')};
-    background: ${dt('contextmenu.item.focus.background')};
+    color: ${dt('contextmenu.item.hover.color')};
+    background: ${dt('contextmenu.item.hover.background')};
 }
 
 .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon,
 .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
-    color: ${dt('contextmenu.item.icon.focus.color')};
+    color: ${dt('contextmenu.item.icon.hover.color')};
 }
 
 .p-contextmenu-separator {
diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js
index 46c075c0f..9146d91c0 100644
--- a/components/lib/megamenu/style/MegaMenuStyle.js
+++ b/components/lib/megamenu/style/MegaMenuStyle.js
@@ -46,33 +46,33 @@ const theme = ({ dt }) => `
 }
 
 .p-megamenu-item.p-focus > .p-megamenu-item-content {
-    color: ${dt('megamenu.item.focus.color')};
-    background: ${dt('megamenu.item.focus.background')};
+    color: ${dt('megamenu.item.hover.color')};
+    background: ${dt('megamenu.item.hover.background')};
 }
 
 .p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon,
 .p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    color: ${dt('megamenu.item.icon.focus.color')};
+    color: ${dt('megamenu.item.icon.hover.color')};
 }
 
 .p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
-    color: ${dt('megamenu.item.focus.color')};
-    background: ${dt('megamenu.item.focus.background')};
+    color: ${dt('megamenu.item.hover.color')};
+    background: ${dt('megamenu.item.hover.background')};
 }
 
 .p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon,
 .p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
-    color: ${dt('megamenu.item.icon.focus.color')};
+    color: ${dt('megamenu.item.icon.hover.color')};
 }
 
 .p-megamenu-item-active > .p-megamenu-item-content {
-    color: ${dt('megamenu.item.focus.color')};
-    background: ${dt('megamenu.item.focus.background')};
+    color: ${dt('megamenu.item.hover.color')};
+    background: ${dt('megamenu.item.hover.background')};
 }
 
 .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon,
 .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
-    color: ${dt('megamenu.item.icon.focus.color')};
+    color: ${dt('megamenu.item.icon.hover.color')};
 }
 
 .p-megamenu-submenu-icon {
@@ -123,7 +123,7 @@ const theme = ({ dt }) => `
 .p-megamenu-submenu .p-megamenu-submenu-item {
     margin: 0;
     padding: 0.5rem 0.75rem;
-    color: ${dt('megamenu.submenu.header.color')};
+    color: ${dt('megamenu.submenu.item.color')};
     font-weight: 600;
     margin-bottom: 2px;
 }
diff --git a/components/lib/menu/style/MenuStyle.js b/components/lib/menu/style/MenuStyle.js
index b4dd73ddc..9e9aef85a 100644
--- a/components/lib/menu/style/MenuStyle.js
+++ b/components/lib/menu/style/MenuStyle.js
@@ -57,21 +57,21 @@ const theme = ({ dt }) => `
 }
 
 .p-menu-item.p-focus .p-menu-item-content {
-    color: ${dt('menu.item.focus.color')};
-    background: ${dt('menu.item.focus.background')};
+    color: ${dt('menu.item.hover.color')};
+    background: ${dt('menu.item.hover.background')};
 }
 
 .p-menu-item.p-focus .p-menu-item-icon {
-    color: ${dt('menu.item.icon.focus.color')};
+    color: ${dt('menu.item.icon.hover.color')};
 }
 
 .p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
-    color: ${dt('menu.item.focus.color')};
-    background: ${dt('menu.item.focus.background')};
+    color: ${dt('menu.item.hover.color')};
+    background: ${dt('menu.item.hover.background')};
 }
 
 .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
-    color: ${dt('menu.item.icon.focus.color')};
+    color: ${dt('menu.item.icon.hover.color')};
 }
 
 .p-menu-overlay {
@@ -81,7 +81,7 @@ const theme = ({ dt }) => `
 .p-menu-submenu-item {
     margin: 0;
     padding: 0.5rem 0.75rem;
-    color: ${dt('menu.submenu.header.color')};
+    color: ${dt('menu.submenu.item.color')};
     font-weight: 600;
 }
 
diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
index bd4c3be59..fbdb61934 100644
--- a/components/lib/menubar/style/MenubarStyle.js
+++ b/components/lib/menubar/style/MenubarStyle.js
@@ -57,33 +57,33 @@ const theme = ({ dt }) => `
 }
 
 .p-menubar-item.p-focus > .p-menubar-item-content {
-    color: ${dt('menubar.item.focus.color')};
-    background: ${dt('menubar.item.focus.background')};
+    color: ${dt('menubar.item.hover.color')};
+    background: ${dt('menubar.item.hover.background')};
 }
 
 .p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon,
 .p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
-    color: ${dt('menubar.item.icon.focus.color')};
+    color: ${dt('menubar.item.icon.hover.color')};
 }
 
 .p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {
-    color: ${dt('menubar.item.focus.color')};
-    background: ${dt('menubar.item.focus.background')};
+    color: ${dt('menubar.item.hover.color')};
+    background: ${dt('menubar.item.hover.background')};
 }
 
 .p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon,
 .p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
-    color: ${dt('menubar.item.icon.focus.color')};
+    color: ${dt('menubar.item.icon.hover.color')};
 }
 
 .p-menubar-item-active > .p-menubar-item-content {
-    color: ${dt('menubar.item.focus.color')};
-    background: ${dt('menubar.item.focus.background')};
+    color: ${dt('menubar.item.hover.color')};
+    background: ${dt('menubar.item.hover.background')};
 }
 
 .p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon,
 .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
-    color: ${dt('menubar.item.icon.focus.color')};
+    color: ${dt('menubar.item.icon.hover.color')};
 }
 
 .p-menubar-submenu-icon {
diff --git a/components/lib/panelmenu/style/PanelMenuStyle.js b/components/lib/panelmenu/style/PanelMenuStyle.js
index d77eb59ae..70664ee5b 100644
--- a/components/lib/panelmenu/style/PanelMenuStyle.js
+++ b/components/lib/panelmenu/style/PanelMenuStyle.js
@@ -48,23 +48,23 @@ const theme = ({ dt }) => `
 }
 
 .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
+    background: ${dt('panelmenu.item.hover.background')};
+    color: ${dt('panelmenu.item.hover.color')};
 }
 
 .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon,
 .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
-    color: ${dt('panelmenu.item.icon.focus.color')};
+    color: ${dt('panelmenu.item.icon.hover.color')};
 }
 
 .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
+    background: ${dt('panelmenu.item.hover.background')};
+    color: ${dt('panelmenu.item.hover.color')};
 }
 
 .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon,
 .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
-    color: ${dt('panelmenu.item.icon.focus.color')};
+    color: ${dt('panelmenu.item.icon.hover.color')};
 }
 
 .p-panelmenu .p-panelmenu-item {
@@ -110,22 +110,22 @@ const theme = ({ dt }) => `
 }
 
 .p-panelmenu-item.p-focus > .p-panelmenu-item-content {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
+    background: ${dt('panelmenu.item.hover.background')};
+    color: ${dt('panelmenu.item.hover.color')};
 }
 
 .p-panelmenu-item.p-focus > .p-panelmenu-item-icon {
-    color: ${dt('panelmenu.item.focus.color')};
+    color: ${dt('panelmenu.item.hover.color')};
 }
 
 .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
-    background: ${dt('panelmenu.item.focus.background')};
-    color: ${dt('panelmenu.item.focus.color')};
+    background: ${dt('panelmenu.item.hover.background')};
+    color: ${dt('panelmenu.item.hover.color')};
 }
 
 .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon,
 .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
-    color: ${dt('panelmenu.item.icon.focus.color')};
+    color: ${dt('panelmenu.item.icon.hover.color')};
 }
 `;
 
diff --git a/components/lib/steps/style/StepsStyle.js b/components/lib/steps/style/StepsStyle.js
index aff245998..f8694f94c 100644
--- a/components/lib/steps/style/StepsStyle.js
+++ b/components/lib/steps/style/StepsStyle.js
@@ -29,7 +29,7 @@ const theme = ({ dt }) => `
 
 .p-steps-item:before {
     content: " ";
-    border-top: 2px solid ${dt('steps.connector.border.color')};
+    border-top: 2px solid ${dt('steps.separator.background')};
     width: 100%;
     top: 50%;
     left: 0;
@@ -70,7 +70,7 @@ const theme = ({ dt }) => `
     text-overflow: ellipsis;
     max-width: 100%;
     margin-top: 0.5rem;
-    color: ${dt('steps.item.color')};
+    color: ${dt('steps.item.label.color')};
     display: block;
     font-weight: 500;
 }
@@ -79,9 +79,9 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${dt('steps.marker.color')};
-    border: 2px solid ${dt('steps.marker.border.color')};
-    background: ${dt('steps.marker.background')};
+    color: ${dt('steps.item.number.color')};
+    border: 2px solid ${dt('steps.item.number.border.color')};
+    background: ${dt('steps.item.number.background')};
     min-width: 2rem;
     height: 2rem;
     line-height: 2rem;
@@ -106,13 +106,13 @@ const theme = ({ dt }) => `
 }
 
 .p-steps-item-active .p-steps-item-number {
-    background: ${dt('steps.marker.active.background')};
-    color: ${dt('steps.marker.active.color')};
+    background: ${dt('steps.item.number.active.background')};
+    color: ${dt('steps.item.number.active.color')};
 }
 
 .p-steps-item-active .p-steps-item-label {
     font-weight: 500;
-    color: ${dt('steps.item.active.color')};
+    color: ${dt('steps.item.label.active.color')};
 }
 `;
 
diff --git a/components/lib/tabmenu/style/TabMenuStyle.js b/components/lib/tabmenu/style/TabMenuStyle.js
index 07b7955e9..274927f41 100644
--- a/components/lib/tabmenu/style/TabMenuStyle.js
+++ b/components/lib/tabmenu/style/TabMenuStyle.js
@@ -11,8 +11,8 @@ const theme = ({ dt }) => `
     padding: 0;
     list-style-type: none;
     flex: 1 1 auto;
-    background: ${dt('tabmenu.nav.background')};
-    border: 1px solid ${dt('tabmenu.nav.border.color')};
+    background: ${dt('tabmenu.tablist.background')};
+    border: 1px solid ${dt('tabmenu.tablist.border.color')};
     border-width: 0 0 1px 0;
     position: relative;
 }
@@ -27,8 +27,8 @@ const theme = ({ dt }) => `
     overflow: hidden;
     border-style: solid;
     border-width: 0 0 1px 0;
-    border-color: transparent transparent ${dt('tabmenu.header.border.color')} transparent;
-    color: ${dt('tabmenu.header.color')};
+    border-color: transparent transparent ${dt('tabmenu.item.link.border.color')} transparent;
+    color: ${dt('tabmenu.item.link.color')};
     padding: 1rem 1.125rem;
     font-weight: 600;
     border-top-right-radius: ${dt('rounded.base')};
@@ -51,11 +51,11 @@ const theme = ({ dt }) => `
     line-height: 1;
 }
 .p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link {
-    color: ${dt('tabmenu.header.hover.color')};
+    color: ${dt('tabmenu.item.link.hover.color')};
 }
 
 .p-tabmenu-item-active .p-tabmenu-item-link {
-    color: ${dt('tabmenu.header.active.border.color')};
+    color: ${dt('tabmenu.item.link.active.border.color')};
 }
 
 .p-tabmenu-ink-bar {
@@ -64,7 +64,7 @@ const theme = ({ dt }) => `
     position: absolute;
     bottom: -1px;
     height: 1px;
-    background-color: ${dt('tabmenu.header.active.border.color')};
+    background-color: ${dt('tabmenu.item.link.active.border.color')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 
diff --git a/components/lib/themes/aura/breadcrumb/index.js b/components/lib/themes/aura/breadcrumb/index.js
index 254fc64fd..ba949e3cd 100644
--- a/components/lib/themes/aura/breadcrumb/index.js
+++ b/components/lib/themes/aura/breadcrumb/index.js
@@ -1,30 +1,13 @@
 export default {
-    colorScheme: {
-        root: {
-            background: '{surface.0}'
-        },
-        light: {
-            item: {
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                iconColor: '{surface.400}'
-            },
-            separator: {
-                color: '{surface.400}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}'
-            },
-            item: {
-                color: '{surface.400}',
-                hoverColor: '{surface.0}',
-                iconColor: '{surface.500}'
-            },
-            separator: {
-                color: '{surface.500}'
-            }
-        }
+    root: {
+        background: '{container.background}'
+    },
+    item: {
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}',
+        iconColor: '{navigation.item.icon.color}'
+    },
+    separator: {
+        color: '{navigation.item.icon.color}'
     }
 };
diff --git a/components/lib/themes/aura/contextmenu/index.js b/components/lib/themes/aura/contextmenu/index.js
index 59771d3f6..8970928f1 100644
--- a/components/lib/themes/aura/contextmenu/index.js
+++ b/components/lib/themes/aura/contextmenu/index.js
@@ -1,42 +1,22 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                icon: {
-                    color: '{surface.400}',
-                    focusColor: '{surface.500}'
-                }
-            },
-            separator: {
-                borderColor: '{surface.200}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                icon: {
-                    color: '{surface.500}',
-                    focusColor: '{surface.400}'
-                }
-            },
-            separator: {
-                borderColor: '{surface.700}'
-            }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    item: {
+        hoverBackground: '{navigation.item.hover.background}',
+        color: '{navigation.item.color}',
+        hoverColor: '{navigation.item.hover.color}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.hover.color}'
         }
+    },
+    submenuItem: {
+        color: '{navigation.submenu.label.color}'
+    },
+    separator: {
+        borderColor: '{content.border.color}'
     }
 };
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index 07c0fbd79..71d4ca7d1 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -195,6 +195,22 @@ export default {
                     borderColor: '{surface.200}',
                     color: '{text.color}',
                     hoverColor: '{text.hover.color}'
+                },
+                navigation: {
+                    item: {
+                        hoverBackground: '{surface.100}',
+                        color: '{text.color}',
+                        hoverColor: '{text.hover.color}',
+                        icon: {
+                            color: '{surface.400}',
+                            hoverColor: '{surface.500}'
+                        }
+                    },
+                    submenu: {
+                        label: {
+                            color: '{surface.400}'
+                        }
+                    }
                 }
             },
             dark: {
@@ -254,6 +270,22 @@ export default {
                     borderColor: '{surface.700}',
                     color: '{text.color}',
                     hoverColor: '{text.hover.color}'
+                },
+                navigation: {
+                    item: {
+                        hoverBackground: '{surface.800}',
+                        color: '{text.color}',
+                        hoverColor: '{text.hover.color}',
+                        icon: {
+                            color: '{surface.500}',
+                            hoverColor: '{surface.400}'
+                        }
+                    },
+                    submenu: {
+                        label: {
+                            color: '{surface.500}'
+                        }
+                    }
                 }
             }
         }
diff --git a/components/lib/themes/aura/megamenu/index.js b/components/lib/themes/aura/megamenu/index.js
index b07588ed6..c41afcf3a 100644
--- a/components/lib/themes/aura/megamenu/index.js
+++ b/components/lib/themes/aura/megamenu/index.js
@@ -1,58 +1,30 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                icon: {
-                    color: '{surface.400}',
-                    focusColor: '{surface.500}'
-                }
-            },
-            submenuHeader: {
-                color: '{surface.400}'
-            },
-            separator: {
-                borderColor: '{surface.200}'
-            },
-            mobileToggle: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}',
-                hoverBackground: '{surface.100}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                icon: {
-                    color: '{surface.500}',
-                    focusColor: '{surface.400}'
-                }
-            },
-            submenuHeader: {
-                color: '{surface.500}'
-            },
-            separator: {
-                borderColor: '{surface.700}'
-            },
-            toggleIcon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
-            }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    item: {
+        hoverBackground: '{navigation.item.hover.background}',
+        color: '{navigation.item.color}',
+        hoverColor: '{navigation.item.hover.color}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.hover.color}'
         }
+    },
+    submenuItem: {
+        color: '{navigation.submenu.label.color}'
+    },
+    separator: {
+        borderColor: '{content.border.color}'
+    },
+    mobileToggle: {
+        color: '{text.muted.color}',
+        hoverColor: '{text.muted.hover.color}',
+        hoverBackground: '{content.hover.background}'
+    },
+    submenuItem: {
+        color: '{navigation.submenu.label.color}'
     }
 };
diff --git a/components/lib/themes/aura/menu/index.js b/components/lib/themes/aura/menu/index.js
index 56ab8a4dc..8970928f1 100644
--- a/components/lib/themes/aura/menu/index.js
+++ b/components/lib/themes/aura/menu/index.js
@@ -1,48 +1,22 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                icon: {
-                    color: '{surface.400}',
-                    focusColor: '{surface.500}'
-                }
-            },
-            submenuHeader: {
-                color: '{surface.400}'
-            },
-            separator: {
-                borderColor: '{surface.200}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                icon: {
-                    color: '{surface.500}',
-                    focusColor: '{surface.400}'
-                }
-            },
-            submenuHeader: {
-                color: '{surface.500}'
-            },
-            separator: {
-                borderColor: '{surface.700}'
-            }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    item: {
+        hoverBackground: '{navigation.item.hover.background}',
+        color: '{navigation.item.color}',
+        hoverColor: '{navigation.item.hover.color}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.hover.color}'
         }
+    },
+    submenuItem: {
+        color: '{navigation.submenu.label.color}'
+    },
+    separator: {
+        borderColor: '{content.border.color}'
     }
 };
diff --git a/components/lib/themes/aura/menubar/index.js b/components/lib/themes/aura/menubar/index.js
index e5796991d..d37d78e83 100644
--- a/components/lib/themes/aura/menubar/index.js
+++ b/components/lib/themes/aura/menubar/index.js
@@ -1,52 +1,27 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                icon: {
-                    color: '{surface.400}',
-                    focusColor: '{surface.500}'
-                }
-            },
-            separator: {
-                borderColor: '{surface.200}'
-            },
-            mobileToggle: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}',
-                hoverBackground: '{surface.100}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                icon: {
-                    color: '{surface.500}',
-                    focusColor: '{surface.400}'
-                }
-            },
-            separator: {
-                borderColor: '{surface.700}'
-            },
-            mobileToggle: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
-            }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    item: {
+        hoverBackground: '{navigation.item.hover.background}',
+        color: '{navigation.item.color}',
+        hoverColor: '{navigation.item.hover.color}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.hover.color}'
         }
+    },
+    submenuItem: {
+        color: '{navigation.submenu.label.color}'
+    },
+    separator: {
+        borderColor: '{content.border.color}'
+    },
+    mobileToggle: {
+        color: '{text.muted.color}',
+        hoverColor: '{text.muted.hover.color}',
+        hoverBackground: '{content.hover.background}'
     }
 };
diff --git a/components/lib/themes/aura/panelmenu/index.js b/components/lib/themes/aura/panelmenu/index.js
index 9328b39a6..1351802ea 100644
--- a/components/lib/themes/aura/panelmenu/index.js
+++ b/components/lib/themes/aura/panelmenu/index.js
@@ -1,36 +1,16 @@
 export default {
-    colorScheme: {
-        light: {
-            panel: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                icon: {
-                    color: '{surface.400}',
-                    focusColor: '{surface.500}'
-                }
-            }
-        },
-        dark: {
-            panel: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                icon: {
-                    color: '{surface.500}',
-                    focusColor: '{surface.400}'
-                }
-            }
+    panel: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    item: {
+        hoverBackground: '{navigation.item.hover.background}',
+        color: '{navigation.item.color}',
+        hoverColor: '{navigation.item.hover.color}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.hover.color}'
         }
     }
 };
diff --git a/components/lib/themes/aura/steps/index.js b/components/lib/themes/aura/steps/index.js
index b82cee3e4..e113ada66 100644
--- a/components/lib/themes/aura/steps/index.js
+++ b/components/lib/themes/aura/steps/index.js
@@ -1,36 +1,16 @@
 export default {
-    colorScheme: {
-        light: {
-            connector: {
-                borderColor: '{surface.200}'
-            },
-            item: {
-                color: '{surface.700}',
-                activeColor: '{primary.color}'
-            },
-            marker: {
-                background: '{surface.0}',
-                activeBackground: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.500}',
-                activeColor: '{primary.color}'
-            }
-        },
-        dark: {
-            connector: {
-                borderColor: '{surface.700}'
-            },
-            item: {
-                color: '{surface.0}',
-                activeColor: '{primary.color}'
-            },
-            marker: {
-                background: '{surface.900}',
-                activeBackground: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.400}',
-                activeColor: '{primary.color}'
-            }
-        }
+    separator: {
+        background: '{content.border.color}'
+    },
+    itemLabel: {
+        color: '{text.color}',
+        activeColor: '{primary.color}'
+    },
+    itemNumber: {
+        background: '{content.background}',
+        activeBackground: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{text.muted.color}',
+        activeColor: '{primary.color}'
     }
 };
diff --git a/components/lib/themes/aura/tabmenu/index.js b/components/lib/themes/aura/tabmenu/index.js
index b1ba81b9e..229336322 100644
--- a/components/lib/themes/aura/tabmenu/index.js
+++ b/components/lib/themes/aura/tabmenu/index.js
@@ -1,28 +1,12 @@
 export default {
-    colorScheme: {
-        light: {
-            nav: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}'
-            },
-            header: {
-                borderColor: '{surface.200}',
-                activeBorderColor: '{primary.color}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}'
-            }
-        },
-        dark: {
-            nav: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}'
-            },
-            header: {
-                borderColor: '{surface.700}',
-                activeBorderColor: '{primary.color}',
-                color: '{surface.400}',
-                hoverColor: '{surface.0}'
-            }
-        }
+    tablist: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}'
+    },
+    itemLink: {
+        borderColor: '{content.border.color}',
+        activeBorderColor: '{primary.color}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}'
     }
 };
diff --git a/components/lib/themes/aura/tieredmenu/index.js b/components/lib/themes/aura/tieredmenu/index.js
index 59771d3f6..8970928f1 100644
--- a/components/lib/themes/aura/tieredmenu/index.js
+++ b/components/lib/themes/aura/tieredmenu/index.js
@@ -1,42 +1,22 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                icon: {
-                    color: '{surface.400}',
-                    focusColor: '{surface.500}'
-                }
-            },
-            separator: {
-                borderColor: '{surface.200}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                icon: {
-                    color: '{surface.500}',
-                    focusColor: '{surface.400}'
-                }
-            },
-            separator: {
-                borderColor: '{surface.700}'
-            }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    item: {
+        hoverBackground: '{navigation.item.hover.background}',
+        color: '{navigation.item.color}',
+        hoverColor: '{navigation.item.hover.color}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.hover.color}'
         }
+    },
+    submenuItem: {
+        color: '{navigation.submenu.label.color}'
+    },
+    separator: {
+        borderColor: '{content.border.color}'
     }
 };
diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
index 363a0c946..38b32d446 100644
--- a/components/lib/tieredmenu/style/TieredMenuStyle.js
+++ b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -79,33 +79,33 @@ const theme = ({ dt }) => `
 }
 
 .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
-    color: ${dt('tieredmenu.item.focus.color')};
-    background: ${dt('tieredmenu.item.focus.background')};
+    color: ${dt('tieredmenu.item.hover.color')};
+    background: ${dt('tieredmenu.item.hover.background')};
 }
 
 .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon,
 .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
-    color: ${dt('tieredmenu.item.icon.focus.color')};
+    color: ${dt('tieredmenu.item.icon.hover.color')};
 }
 
 .p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {
-    color: ${dt('tieredmenu.item.focus.color')};
-    background: ${dt('tieredmenu.item.focus.background')};
+    color: ${dt('tieredmenu.item.hover.color')};
+    background: ${dt('tieredmenu.item.hover.background')};
 }
 
 .p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon,
 .p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {
-    color: ${dt('tieredmenu.item.icon.focus.color')};
+    color: ${dt('tieredmenu.item.icon.hover.color')};
 }
 
 .p-tieredmenu-item-active > .p-tieredmenu-item-content {
-    color: ${dt('tieredmenu.item.focus.color')};
-    background: ${dt('tieredmenu.item.focus.background')};
+    color: ${dt('tieredmenu.item.hover.color')};
+    background: ${dt('tieredmenu.item.hover.background')};
 }
 
 .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon,
 .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
-    color: ${dt('tieredmenu.item.icon.focus.color')};
+    color: ${dt('tieredmenu.item.icon.hover.color')};
 }
 
 .p-tieredmenu-separator {
diff --git a/doc/megamenu/BasicDoc.vue b/doc/megamenu/BasicDoc.vue
index 1049c0677..475a74ccc 100644
--- a/doc/megamenu/BasicDoc.vue
+++ b/doc/megamenu/BasicDoc.vue
@@ -59,7 +59,7 @@ export default {
                         ],
                         [
                             {
-                                label: 'Home Theather',
+                                label: 'Home Theater',
                                 items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
@@ -170,7 +170,7 @@ export default {
                         ],
                         [
                             {
-                                label: 'Home Theather',
+                                label: 'Home Theater',
                                 items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
@@ -281,7 +281,7 @@ const items = ref([
             ],
             [
                 {
-                    label: 'Home Theather',
+                    label: 'Home Theater',
                     items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                 }
             ],
diff --git a/doc/megamenu/VerticalDoc.vue b/doc/megamenu/VerticalDoc.vue
index bc26481e1..06dbbab24 100644
--- a/doc/megamenu/VerticalDoc.vue
+++ b/doc/megamenu/VerticalDoc.vue
@@ -59,7 +59,7 @@ export default {
                         ],
                         [
                             {
-                                label: 'Home Theather',
+                                label: 'Home Theater',
                                 items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
@@ -170,7 +170,7 @@ export default {
                         ],
                         [
                             {
-                                label: 'Home Theather',
+                                label: 'Home Theater',
                                 items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                             }
                         ],
@@ -281,7 +281,7 @@ const items = ref([
             ],
             [
                 {
-                    label: 'Home Theather',
+                    label: 'Home Theater',
                     items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                 }
             ],