Menu items/components do not get custom colors when slotted inside Navigation

[tyanthony]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When using the Navigation component with a slotted Menu/Menut Items component and setting a custom background color using the variable, the background color does not get applied to the Menu items.

Expected Behavior

• custom background colors should be applied to all elements in the Navigation component

Reproduction Sample

https://codepen.io/tyleranthony/pen/mdaZJqJ?editors=100

Reproduction Steps

1. Implement a Navigation component with a Menu (and Menu Item) component slotted into the Navigation
2. Set the --calcite-navigation-background to a different color
3. Notice the Menu (items) do not change color (there is also no documented way to change the background color of Menus)

Reproduction Version

1.9.2

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Mission

[macandcheese]

Yeah, we need to leverage the new design tokens to solve some inheritance issues / allow more aspects of the component to be overridden.

Once that happens, Menu will offer more customization, or you could set the token overrides up in a way that allows it to inherit from a parent.

Currently it can be themed at the Menu level with the global css properties (https://codepen.io/mac_and_cheese/pen/dywBYOX?editors=100), but once we implement the tokens it should be better documented and easier to implement.

[geospatialem]

Will revisit after the efforts of #7180, where design tokens should encompass the above in a more readily available manner.

[geospatialem]

@tyanthony Calcite does not plan on a full implementation of the above, as the menu component can reside as a standalone outside of navigation. Instead, to achieve the above, component tokens via CSS variables will allow for the customization.

For instance:

calcite-navigation {
  --calcite-navigation-background-color: PapayaWhip;
}
calcite-menu {
  --calcite-menu-background-color: var(--calcite-navigation-background-color);
}

Here's a Codepen from 3.0.0-next.96 showcasing the above. Closing the above ☝ as it is achievable using component tokens / CSS variables for the navigation and menu components.