From b301572d7e55e73d204f5c6e903a0d83781915f9 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Wed, 27 May 2026 14:35:03 -0400 Subject: [PATCH] docs(glass-mode-handbook): Fixes a few inconsistencies. --- .../styles/theming/glass-mode-handbook.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/glass-mode-handbook.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/glass-mode-handbook.md index 22da0c0106..5a30d644ff 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/glass-mode-handbook.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/glass-mode-handbook.md @@ -20,14 +20,14 @@ Additionally, glass can be manually enabled on the following components, via the - Hero - Panel -Many components also support the `isPlain` prop, which removes their default solid background color so they can sit directly on a glass-enabled surface without obscuring the intended depth effect. +Many components also support the `isPlain` prop, which removes their default borders and solid background colors so they can sit directly on a glass-enabled surface without obscuring the intended depth effect. ## Glass-specific component variants When glass is enabled, two component variants are automatically applied in place of their standard counterparts to help anchor the experience: -- **Banded masthead:** Adds a solid fill color and shadowed border to the masthead, setting it apart as a persistent dock above the rest of the page. -- **Floating side navigation:** Adds a solid fill color and shadowed border to the side navigation, insetting it to make it visually elevated and clearly readable as a navigation resource within the glass context. +- **Banded masthead:** Adds transparency, blur, and a shadowed border to the masthead, setting it apart as a persistent dock above the rest of the page. +- **Floating side navigation:** Adds transparency, blur, and a shadowed border to the side navigation, insetting it to make it visually elevated and clearly readable as a navigation resource within the glass context. ## Background images @@ -94,7 +94,7 @@ There are a few technical constraints to abide by when using glass in your produ - **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 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. 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. +- **User controls and preferences:** 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. Products should also respect the OS-level `prefers-reduced-transparency` and `prefers-contrast` media queries, disabling glass or replacing it with a solid high-opacity background to accommodate users appropriately. ## Glass design tokens