Context menu value for `--menu-bg` is overridden as `#fff` instead of the value of the theme

[thargosu]

Hi and thanks for this awesome GitHub action!

The default CSS provides a context menu with white background and light grey text which is very hard to read and differs from the original org-roam-ui chakra CSS.

Expected output:

It seems the background value is set to var(--menu-bg) in the chakra-menu__menuitem class. So far, so good.

.css-18esm8n {
    text-decoration: none;
    color: inherit;
    user-select: none;
    display: flex;
    width: 100%;
    -moz-box-align: center;
    align-items: center;
    text-align: start;
    flex: 0 0 auto;
    outline: transparent solid 2px;
    outline-offset: 2px;
    padding-top: var(--chakra-space-1-5);
    padding-bottom: var(--chakra-space-1-5);
    padding-inline-start: var(--chakra-space-3);
    padding-inline-end: var(--chakra-space-3);
    transition-property: var(--chakra-transition-property-background);
    transition-duration: var(--chakra-transition-duration-ultra-fast);
    transition-timing-function: var(--chakra-transition-easing-ease-in);
    background: var(--menu-bg);
}

It seems the --menu-bg value is defined to --chakra-colors-gray-100

.css-18esm8n:focus, .css-18esm8n[data-focus] {
    --menu-bg: var(--chakra-colors-gray-100);
}

This value seems to be overridden for the chakra-menu__menu-list. Here --menu-bg is set to #fff;

.css-q87w88 {
    outline: transparent solid 2px;
    outline-offset: 2px;
    --menu-bg: #fff;
    --menu-shadow: var(--chakra-shadows-sm);
    min-width: var(--chakra-sizes-3xs);
    padding-top: var(--chakra-space-2);
    padding-bottom: var(--chakra-space-2);
    border-radius: var(--chakra-radii-md);
    border-width: 1px;
    background-position-x: ;
    background-position-y: ;
    background-repeat: ;
    background-attachment: ;
    background-image: ;
    background-size: ;
    background-origin: ;
    background-clip: ;
    z-index: var(--chakra-zIndices-overlay);
    background-color: var(--chakra-colors-white);
    color: var(--chakra-colors-black);
    position: absolute;
    left: 1120px;
    top: 419px;
    font-size: var(--chakra-fontSizes-xs);
    box-shadow: var(--chakra-shadows-xl);
}

I was able to find such a mention in one of the js chunks in org-roam-ui/out/_next/static/chunks when I build with the local.sh script, but the --bg-menu value seems to be generated with some code as it is not directly present in the js file.

Should we add some new CSS definition into the index.html to unset these values for the chakra-menu__menu-list? I'm not sure of the best way to proceed, as I'm not able to really find the source of this extraneous --bg-menu addition.

Thanks!

[ikoamu]

Thank you for your report! Indeed, the menu background color is not functioning correctly. I will check this and make the necessary corrections.

[ikoamu]

@thargosu I've made a fix so that the background color of the Menu is set correctly. Please check it out!

[thargosu]

Thanks a lot for this fix ! I can confirm it works. It's perfect ! :tada: