feat: ✨ update menu and navbar styles for improved theming and responsiveness

src/themes/scss/theme/components/_menu.scss

@@ -17,8 +17,8 @@
         top: calc(100% + var.get('measure/.5x')) !important;
         border-radius: var.get('measure/.75x') !important;
         transition: opacity .2s ease !important;
-        box-shadow: 0px 6px 12px -3px rgba(#{color.get('elevation/1', 'rgb')}, 0.5),
-                    0px 6px 18px 0px rgba(#{color.get('elevation/1', 'rgb')}, 0.1) !important;
+        box-shadow: 0px 6px 12px -3px rgba(var(--color-shadow-rgb), 0.5), 
+                    0px 6px 18px 0px rgba(var(--color-shadow-rgb), 0.1) !important;
 
         .divider {
             margin-top: var.get('measure/.5x') !important;

src/themes/scss/theme/modules/repo/_secondary-navbar.scss

@@ -123,7 +123,7 @@
                 }
 
                 &:hover {
-                    background-color: color.get('elevation/4') !important;
+                    background-color: var(--color-secondary-nav-hover-bg) !important;
                     color: var(--color-text-light-2) !important;
                 }
 

src/themes/scss/theme/vars/_colors.scss

@@ -307,8 +307,11 @@
         --color-markup-code-inline: #{color.get('elevation/4')};
         --color-button: #{color.get('elevation/4')};
         --color-code-bg: #{color.get('elevation/3')};
-        --color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5);
-        --color-shadow-opaque: #{color.get('elevation/1')};
+        --color-shadow: #{if($is-dark, rgba(#{color.get('elevation/1', 'rgb')}, 0.5), rgba(#{color.get('elevation/6', 'rgb')}, 0.5))};
+        --color-shadow-opaque: #{if($is-dark, color.get('elevation/1'), color.get('elevation/6'))};
+
+        --color-shadow-rgb: #{if($is-dark, color.get('elevation/1', 'rgb'), color.get('elevation/6', 'rgb'))};
+
         --color-secondary-bg: #{color.get('elevation/4')};
         --color-expand-button: #{color.get('elevation/6')};
         --color-placeholder-text: #{color.get('elevation/9')};
@@ -318,15 +321,16 @@
         --color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
         --color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
         --color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
-        --color-tooltip-text: var(--color-text);
-        --color-tooltip-bg: #{color.get('elevation/7')};
+        --color-tooltip-text: #{if($is-dark, color.get('text'), color.get('elevation/1'))};
+        --color-tooltip-bg: #{if($is-dark, color.get('elevation/7'), color.get('elevation/10'))};
         --color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
 
         // navbar
-        --color-nav-bg:           #{color.get('elevation/2')};;
-        --color-nav-hover-bg:     #{color.get('elevation/5')};
-        --color-nav-text:         var(--color-text);
-        --color-secondary-nav-bg: #{color.get('elevation/2')};;
+        --color-nav-bg:                 #{color.get('navbar/bg', $default: if($is-dark, color.get('elevation/1'), color.get('elevation/4')))};
+        --color-nav-hover-bg:           #{color.get('navbar/hover', $default: if($is-dark, color.get('elevation/4'), color.get('elevation/5')))};
+        --color-nav-text:               #{color.get('navbar/fg', $default: var(--color-text))};
+        --color-secondary-nav-bg:       #{if($is-dark, color.get('elevation/1'), color.get('elevation/4'))};
+        --color-secondary-nav-hover-bg: #{if($is-dark, color.get('elevation/4'), color.get('elevation/5'))};
 
         // label
         --color-label-text: var(--color-text);