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 6 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! |
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):