Active sub-menu entries also don’t meet contrast requirements

[juliusknorr]

Active menu entries also don’t meet contrast requirements, here possibly also work with a dot marker, or left border?

Example would be the different heading styles in the menubar.

May need upstream work in the component library if we reuse the active state from there.

[vinicius73]

To fix it, we must change the NcActions component

https://github.com/nextcloud/nextcloud-vue/blob/e28a7178ca938e7175c1c78ee29055f59cdffaef/src/components/NcActions/NcActions.vue#L1037-L1040

Actual

Expected

Option 1

Just change the background of .action-item--open .action-item__menutoggle

background-color: var(--color-background-hover);

Option 2

Change the background of .action-item--open .action-item__menutoggle and add box shadow:

background-color: var(--color-background-hover);
box-shadow: 0px 0px 0.2rem 0px var(--color-primary-light-text);

[juliusknorr]

@jancborchardt I think the blue bar that we already have should be enough, right? I'm wondering why those were not there during the review call.

[jancborchardt]

@juliushaertl yes, I’d say so too. However, this is not the new menu as per Vue-components? We could put a blue rounded bar here as well though on the left side of the active item.

@vinicius73 regarding the icon highlight: Option 1 looks good, but for contrast reasons we need to color the icon black instead of primary.
And small note: "Show Outline" → "Show outline", we only capitalize the first word as per design guidelines. :)

[vinicius73]

@jancborchardt I've adjusted the style to get closer to the current actions component.