docs(theming): Adds details around new theme and glass mode.#4983
docs(theming): Adds details around new theme and glass mode.#4983edonehoo wants to merge 16 commits into
Conversation
|
|
||
| ### 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: |
There was a problem hiding this comment.
will want to update this to include glass
There was a problem hiding this comment.
also to include the default vs felt theme toggle!
glass has some weirdness where users will have to switch the the "glass" or "plain" style variant of certain components in addition to setting the appearance toggles in order to get the glass mode to appear properly in figma.
|
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 Felt light typically utilizes a 40% opacity to maintain AAA contrast for standard text. 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! |
nicolethoen
left a comment
nicolethoen
left a comment
There was a problem hiding this comment.
This is excellent. Covers all I would expect. I'll defer to others for verifying accuracy of the nuances of tokens and settings.
|
@lboehling @mcoker Could you help verify the accuracy of what I've added in this pr? any suggestions or clarifications are much appreciated! |
Corrected a typo in the Project Felt theme description.
| - Drawer | ||
| - Login page | ||
| - Masthead | ||
| - Navigation (docked) |
There was a problem hiding this comment.
The left navigation gets a glass panel as well for contrast.
There was a problem hiding this comment.
I just removed "(docked)" to just state Navigation. Does that seem okay?
|
|
||
| - **No glass-on-glass layering:** Never layer glass-enabled containers. Doing so can cause significant performance and accessibility problems. For example, child objects inside a blurred parent container can become illegibly blurred themselves. To mitigate this, we have intentionally adjusted the opacity of our background color design tokens to simulate depth without introducing extra blur. | ||
| - **High contrast precedence:** If high-contrast mode is enabled, all glass effects must be automatically disabled to prioritize functional accessibility. | ||
| - **User controls and preferences:** Because glass mode introduces legibility risks, any product utilizing glass must also let users swap between default contrast and high contrast modes via a theme switcher or preferences menu. Products should also respect the OS-level `prefers-reduced-transparency` media query, disabling glass or replacing it with a solid high-opacity background to accommodate users appropriately. |
There was a problem hiding this comment.
Do we want to say something like "Because glass mode may introduce legibility issues for some users..."
Trying to make it sound less like an expected outcome but that;s the best I got!
There was a problem hiding this comment.
Fair point - went with this?
Because some users might experience legibility issues in glass mode, any product utilizing glass must also let users swap to default contrast or high contrast via a theme switcher or preferences menu.
|
note: I'll this could merge first & I could update after, or we could wait. Either way |
|
|
||
| ### Project Felt theme | ||
|
|
||
| The Project Felt theme is designed for products within the Red Hat portfolio, providing closer alignment with the [Red Hat Design System](https://ux.redhat.com/). It is characterized by red accent colors, smooth, rounded borders, Red Hat icons, and [glass contrast mode](#glass). Core interactive elements, such as primary buttons, continue to use blue for usability. |
There was a problem hiding this comment.
| The Project Felt theme is designed for products within the Red Hat portfolio, providing closer alignment with the [Red Hat Design System](https://ux.redhat.com/). It is characterized by red accent colors, smooth, rounded borders, Red Hat icons, and [glass contrast mode](#glass). Core interactive elements, such as primary buttons, continue to use blue for usability. | |
| The Project Felt theme is designed for products within the Red Hat portfolio, providing closer alignment with the [Red Hat Design System](https://ux.redhat.com/). It is characterized by red accent colors, smooth, rounded borders, and Red Hat icons. Core interactive elements, such as primary buttons, continue to use blue for usability. |
per comments in #4990 - don't make glass and felt sound so paired
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
| ### Opacity | ||
|
|
||
| The default opacity values used in our components have been tested for accessibility, legibility, and visual appeal. | ||
| - Project Felt light typically utilizes a 40% opacity to maintain AAA contrast for standard text. |
There was a problem hiding this comment.
Glass surfaces like page, masthead, navigation, etc use 50% opacity in both light and dark mode. They also have the background blur effect applied.
|
Re-reading this sentence: "Background images should be selected for each Red Hat product in collaboration with the Brand team." It's totally true but it kind of implies that product background images need to be created from scratch, when wee have a default set to choose from. Maybe update to "If a Red Hat product team does not want to implement the default product-specific background images, then customized background images must be created in collaboration with the brand team." |
|
|
||
| ### Default theme | ||
|
|
||
| The Default theme creates the standard, open source PatternFly experience. It is characterized by blue branding, modern, square borders, and simple icons. |
There was a problem hiding this comment.
we're updating to red hat icons in both themes, so probably want remove that tidbit!
|
|
||
| ### 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: |
There was a problem hiding this comment.
also to include the default vs felt theme toggle!
glass has some weirdness where users will have to switch the the "glass" or "plain" style variant of certain components in addition to setting the appearance toggles in order to get the glass mode to appear properly in figma.
6 participants
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):