ActionList.Item using wrong colors and get invisible in high-contrast theme

[pablonete]

Description

We're using a <ActionList.Item variant="danger" ... /> and it renders wrong in high-contrast themes (both dark and light) but not on any other theme:

Also wrong on hover:

Interestingly, text color gets fixed on resize (e.g. just opening DevTools) while icon color stays always wrong.

https://github.com/github/github/blob/8d9083549de626e8b3fa9667a2de09840f39642f/app/assets/modules/custom-properties/components/DefinitionsTable.tsx#L74

Steps to reproduce

I'll go with the Monolith Storybook where it's easier:

1. npm run storybook in a github/github codespace
2. Once the page opens :6006, click Color scheme and use light_high_contrast
3. Click on "CustomPropertiesSchemaPage"
4. Click on the ellipsis button at the right to show the actions menu

Expected: label and icon readable
Actual: icon visible and label transparent, the opposite on mouse hover

Some repro videos on slack.

Version

v35.21.0

Browser

Chrome, Firefox

[langermank]

I've got a fix for this in Rails, but looking at the React code for ActionList I'm not sure how to achieve the same thing. We need to target the hover state.

[siddharthkp]

Here's the matching react PR for icon and description: #3045

@langermank There are 2 bugs in this issue, keeping this issue open because we still don't know what causes the strange rendering issue

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.