Skip to content

docs(theming): Adds details around new theme and glass mode.#4983

Open
edonehoo wants to merge 6 commits intopatternfly:mainfrom
edonehoo:iss4952
Open

docs(theming): Adds details around new theme and glass mode.#4983
edonehoo wants to merge 6 commits intopatternfly:mainfrom
edonehoo:iss4952

Conversation

@edonehoo
Copy link
Copy Markdown
Collaborator

@edonehoo edonehoo commented Mar 31, 2026

Makes progress on #4952 and #4951

updated https://pf-org--pr-4983-site.surge.sh/foundations-and-styles/theming
and added https://pf-org--pr-4983-site.surge.sh/foundations-and-styles/theming/glass-mode-handbook

Both of which will need Dev/Design input and validation. Will probably want some images to support the /theming docs (assume these can't be created until the tokens and kit updates are available):

  • Standard page Default theme (can create now)
  • Standard page Felt theme
  • Before/after glass image
  • Figma screenshot for swapping themes
  • theme switcher/theme preferences menu example - what do we want to suggest here?

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Mar 31, 2026

Preview: https://pf-org--pr-4983-site.surge.sh


### Swapping contrast modes

To swap your components to our high contrast mode, change the Semantic Dimension Tokens variable mode to be "High Contrast" and choose either "Light - High Contrast" or "Dark - High Contrast" for the Semantic Color Tokens variable mode:
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

will want to update this to include glass

@phcox
Copy link
Copy Markdown

phcox commented Apr 3, 2026

Just a couple of comments here on the glass mode handbook. Parts of this Opacity section seem to be at odds with the Glass design tokens table below it.

Opacity
The default opacity values used in our components have been tested for accessibility, legibility, and visual appeal.

Felt light typically utilizes a 40% opacity to maintain AAA contrast for standard text.
Felt dark utilizes a 60% opacity to provide better reliability for the dark color scheme.

Given that a variety of opacity percentages are shown in the table, this seems confusing to cite specific ones for each mode. Also, instead of "reliability" did you intend "readability"?

If a product team chooses to override these token values, they are responsible for conducting their own accessibility evaluation to ensure WCAG compliance.

I would not use "token values" in the above sentence, since you only referred to base opacity levels and not the tokens themselves.

I'm not well-versed in the actual values and tokens tha we've eventually decided on, so someone else will have to review those details.

Everything else looked good!

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.

3 participants