pfe-primary-detail does not adjust correctly for color context

[zeroedin]

Description of the issue

pfe-primary-detail, when applied to a parent component such as pfe-band with a given color context, has incorrect styles applied.

complement darker darkest

Steps to reproduce

1. Open Color Contrast Preview Demo for pfe-dropdown: https://deploy-preview-1976--patternfly-elements.netlify.app/components/primary-detail/demo/
2. Edit the DOM in the inspector by wrapping the first <pfe-primary-detail> tag in a <pfe-band color-palette="darkest">...</pfe-band> .

You can set the band color-palette attribute to darker|darkest|accent|complement|lighter|lightest to see differing results.

The different values cause varying outcomes in the primary-detail background, link, and text colors.

Expected behavior

The expected behavior is to have the primary-detail background, link, and text colors reflect the color-palette of its parent context. The component could also be self-contained and not allow styles to bleed into it from the parent context.

Suggested Fix

Add color context consumer to pfe-primary-detail.ts Add CSS to swap CSS properties based on on attribute in pfe-primary-detail.scss

[coreyvickery]

@zeroedin Still need design guidance on this?

[zeroedin]

Closing as it is no longer part of this repo on the completion of 1:1 milestone. The component will most likely move in some form to RHDS.