Fix menu context bakcground color

web-frontend/modules/builder/components/elements/components/MenuElement.vue

@@ -67,11 +67,10 @@
             @shown="toggleExpanded(item.id)"
             @hidden="toggleExpanded(item.id)"
           >
-            <ThemeProvider>
+            <ThemeProvider class="menu-element__sub-links">
               <div
                 v-for="child in item.children"
                 :key="child.id"
-                class="menu-element__sub-links"
                 :style="getStyleOverride('menu')"
               >
                 <ABLink
@@ -205,7 +204,7 @@ export default {
         contextRef.hide()
       } else {
         const containerRef = event.currentTarget
-        contextRef.show(containerRef, 'bottom', 'left', 0)
+        contextRef.show(containerRef, 'bottom', 'left', 10)
       }
     },
     getItemUrl(item) {

web-frontend/modules/builder/themeConfigBlockTypes.js

@@ -11,6 +11,7 @@ import { FONT_WEIGHTS } from '@baserow/modules/builder/fontWeights'
 import {
   resolveColor,
   colorRecommendation,
+  colorContrast,
 } from '@baserow/modules/core/utils/colors'
 import {
   WIDTHS_NEW,
@@ -50,6 +51,12 @@ export class ThemeStyle {
     )
   }
 
+  addColorContrastIfExists(theme, propName, styleName) {
+    return this.addIfExists(theme, propName, styleName, (v) =>
+      colorContrast(resolveColor(v, this.colorVariables))
+    )
+  }
+
   addFontFamilyIfExists(theme, propName, styleName) {
     return this.addIfExists(theme, propName, styleName, (v) => {
       const fontFamilyType = this.$registry.get('fontFamily', v)
@@ -647,6 +654,16 @@ export class PageThemeConfigBlockType extends ThemeConfigBlockType {
       $registry: this.app.$registry,
     })
     style.addColorIfExists(theme, 'page_background_color')
+    style.addColorRecommendationIfExists(
+      theme,
+      'page_background_color',
+      '--page-background-color-complement'
+    )
+    style.addColorContrastIfExists(
+      theme,
+      'page_background_color',
+      '--page-background-color-contrast'
+    )
     style.addIfExists(
       theme,
       'page_background_file',

web-frontend/modules/core/assets/scss/components/builder/elements/menu_element.scss

@@ -61,6 +61,10 @@
   width: 100%;
   gap: 10px;
   padding: 5px;
+  border-radius: 6px;
+
+  // We want the same color as page background
+  background-color: var(--page-background-color, #fff);
 }
 
 .menu-element__sub-link {
@@ -71,5 +75,5 @@
 }
 
 .menu-element__sub-link:hover {
-  background: $palette-neutral-100;
+  background: var(--page-background-color-contrast, $palette-neutral-100);
 }

web-frontend/modules/core/utils/colors.js

@@ -263,3 +263,19 @@ export const colorRecommendation = (hexColor) => {
     return 'white'
   }
 }
+
+/**
+ * Return the color lighten or darken depending on the initial color.
+ * @param {string} hexColor The hex string of the color.
+ * @returns The contrasted color.
+ */
+export const colorContrast = (hexColor, amount = 10) => {
+  // l is the luminance
+  const hsl = conversionsMap.hex.hsl(hexColor)
+  if (hsl.l > 0.5) {
+    hsl.l -= amount / 100
+  } else {
+    hsl.l += amount / 100
+  }
+  return conversionsMap.hsl.hex(hsl)
+}