Skip to content

Conversation

@srambach
Copy link
Member

Fixes #87

Adds a high contrast border on a pseudoelement for filter side panel and vertical tabs when hovered.

Will need PatternFly 6.4 for the high contrast tokens.
Since there is no theme switcher, add pf-v6-theme-high-contrast to the html tag to trigger high contrast mode.

@srambach
Copy link
Member Author

The build for this is failing, and cursor says

"The error indicates that your project is configured to use Yarn 4.5.3 (as specified in the packageManager field), but the CI environment is using Yarn 1.22.22. The solution is to enable Corepack, which manages package manager versions automatically."

and recommends adding

name: Enable Corepack
run: corepack enable

before running yarn install --frozen-lockfile
Can someone advise? @nicole, @wise-king-sullyman ?

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be good to rebase after a PR for workflows was merged in. Just a note below.

Comment on lines 44 to 45
"@patternfly/react-core": "^6.4.0",
"@patternfly/react-styles": "^6.4.0"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nicole had suggested I try keeping the patternfly versions in extensions as what they were, and just updating the docs framework version to the latest (6.28.9). We could try that here so that at least the docs build will allow showing the high contrast styles.

We would also probably want to add to the patternfly-docs.config.js file the following to get the switchers showing up and make it easier to test HC styles:

  hasThemeSwitcher: true,
  hasHighContrastSwitcher: true

@patternfly-build
Copy link

patternfly-build commented Oct 29, 2025

@lboehling
Copy link

The vertical tabs look good in high contrast, but i'm seeing some additional hover states being applied to the filters in this PR. I don't think we need the bkg color/high contrast border on the filter checkbox items. otherwise this looks good!

Screenshot 2025-10-29 at 4 41 35 PM


&:hover {
background-color: var(--pf-t--global--background--color--action--plain--hover);
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lboehling @thatblindgeye I didn't add the hover background, just the outline. Git blame points to a change by @nicolethoen - anyone know why this was added?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is this issue that might handle this: #88

Copy link
Member Author

@srambach srambach Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So it looks like maybe it was applied to the filter side panel by accident and was only meant to be the vertical tabs?
#73 comments talk about a hover background on vertical tabs but it was also applied to the filter side panel, perhaps erroneously?

@srambach srambach assigned srambach and unassigned srambach Oct 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

High contrast theme support

4 participants