Bug/74332: Inconsistent contrast type colors when switching themes

[ihordubas99]

Ticket

https://community.openproject.org/projects/communicator-stream/work_packages/74332

What are you trying to accomplish?

Fix ID and parent/meta element colors not adapting correctly across all theme modes.
In dark high contrast mode the ID and meta colors were not bright enough in inline chips,
and were only accidentally correct in block cards due to interfering OpenProject styles.
In bright high contrast and dark no-contrast modes the block cards had a brighter ID color than expected.

What approach did you choose and why?

Introduced a semantic CSS token --op-wp-meta-color defined inside defaultWpVariables:

• Default (light, dark no-contrast, bright high-contrast): uses --bn-colors-highlights-gray-text
• Dark high contrast: uses --bn-colors-editor-text (bright/white)

Both WorkPackageId and MetaItem now reference this token with !important to prevent
OpenProject's global styles from accidentally overriding the correct values.

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[judithroth]

Code looks good to me so far, but there are still some slight inconsistencies:
Regular size type - border is smaller or missing

on block links it looks good on all sizes:

Also not sure why, but also the font color seems to be a bit darker for the inline chips than for the block cards. I see this on the status and also on the ID:

Same for light mode with high contrast: ID and status font color are off, border is missing:

My suggestion: The status thingie should be reused between both, inline and block level (card) components. Keep the one from the block level (card) components as this is working correctly. It also does not contain the caret which does not work.

[judithroth]

Your code looks good so far! The status is now working correct in all modes.
However, the ID color is still off a bit. It's quite funny, there are other OP styles interfering with this one and in one case it makes it look correctly in the block styles and in another it makes it look broken in the block styles 😂

Dark high contrast mode:

The color value of the ID of the inline styles is not bright enough.

For the block styles, it's correct but only because other OP styles interfer:

It should be the bright value also when the extension is used in a different context than OpenProject.

Also the parent element should be in the same brighter color as the ID uses in dark high contrast mode (inline and block level elements):

Bright high contrast mode

The ID and parent should have the darker color for all. In the block level elements the color is overwritten and therefore appears correctly, but only in OpenProject. It should also be the darker color in other contexts.

Dark mode no high contrast

The block elements have a brighter ID. I think we should use the darker value here for all (id + parent and in inline and block level)

Colors are hard...

[judithroth]

Everything now looks the same for inline and block level work packages ✨
Nice work to unify / standardize the variables for colors!