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 13 commits intopatternfly:mainfrom
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
|
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 wait to do a follow up once our design kit is updated, so that the Figma-related instructions are fully accurate and cover the new options. Will also want to add an image for glass mode and maybe the default vs project felt theme, but also need the design kit to be updated first |
| When turned on, glass applies to the following components, including their uses within our extensions: | ||
| - Card | ||
| - Drawer | ||
| - Login page | ||
| - Masthead | ||
| - Navigation | ||
| - Page | ||
| - Panel |
There was a problem hiding this comment.
| When turned on, glass applies to the following components, including their uses within our extensions: | |
| - Card | |
| - Drawer | |
| - Login page | |
| - Masthead | |
| - Navigation | |
| - Page | |
| - Panel | |
| When turned on, glass applies to the following components, including their uses within our extensions: | |
| - Login page | |
| - Masthead | |
| - Navigation | |
| - Page | |
| Additionally, glass can be manually enabled on the following components, via the `isGlass` prop: | |
| - Card | |
| - Drawer | |
| - Panel |
5 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):