You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -81,9 +81,9 @@ High contrast mode is focused on improving accessibility for users who require m
81
81
- Raises non-text element contrast (interactive elements and boundaries) to 4.5:1.
82
82
- Applies global border rules that define clear boundaries in place of shadows and subtle background fills, which can disappear in high contrast environments.
83
83
84
-
High contrast can be enabled manually by users or triggered automatically by OS- and browser-level accessibility settings such as forced colors mode. System-level preferences take precedence over PatternFly theme settings, so users who have already configured high contrast in their OS or browser will get a consistent experience without conflict.
84
+
High contrast can be enabled manually by users or triggered automatically by OS- and browser-level accessibility settings such as forced colors mode. System-level preferences (like `prefers-reduced-transparency` and `prefers-contrast`) take precedence over PatternFly theme settings, so users who have already configured high contrast in their OS or browser will get a consistent experience without conflict.
85
85
86
-
**Note:**Activating high contrast mode will override and disable glass mode—whether triggered manually or via the OS-level `prefers-reduced-transparency` media query.
86
+
**Note:**PatternFly does not automatically prevent glass mode and high contrast mode from being active simultaneously. If both the glass class and the high contrast class are applied, styles will conflict. Product teams are responsible for ensuring these modes are not applied at the same time.
87
87
88
88
For implementation guidance, refer to the [high contrast handbook](/foundations-and-styles/theming/high-contrast-handbook).
89
89
@@ -98,10 +98,10 @@ Glass mode introduces transparency, blur, and depth to the UI, creating a layere
98
98
When glass is enabled, the following changes will apply:
99
99
-**Transparency, blur, and shadows:** Surface-level container backgrounds become semi-transparent and apply blur and shadow adjustments, letting content below subtly show through to create a sense of depth and content hierarchy.
100
100
-**Background image:** A brand-approved background image fills the page body, providing the visual layer that glass containers sit above. Product teams must use approved images and ensure text is never placed outside of a container and directly on top of a background image.
101
-
-**Component-level glass:** Glass automatically applies to the login page, masthead, navigation, and page. It can be manually extended to cards, drawers, and panels.
101
+
-**Component-level glass:** Glass automatically applies to the login page, masthead, navigation, and page. It can be manually extended to cards, drawers, hero, and panels.
102
102
-**Layout variations:** A banded masthead (with a solid fill and shadowed border to anchor it above the page) and a floating side navigation (with a solid fill and shadow to visually separate it from glass content) are automatically used in place of their standard counterparts.
103
103
104
-
Products using glass mode must provide users a clear way to switch to default contrast or high contrast. When high contrast is enabled—manually or via the OS-level `prefers-reduced-transparency`media query—glass effects are automatically disabled.
104
+
Products using glass mode must provide users a clear way to switch to default contrast or high contrast. PatternFly does not automatically disable glass effects based on user preferences, so product teams are responsible for ensuring glass is not active when users have enabled high contrast (whether manually or via OS-level media queries such as `prefers-reduced-transparency`or `prefers-contrast`).
105
105
106
106
For more details, including implementation guidance, refer to the [glass mode handbook](/foundations-and-styles/theming/glass-mode-handbook).
107
107
@@ -132,7 +132,7 @@ To ensure your application is robust, maintainable, and adaptable across differe
132
132
-**Prioritize semantic tokens:** Always use the most relevant semantic token for your use case to ensure the element's purpose is clear and that it receives the correct styling in any theme. If no semantic token exists, you can fall back to a base token.
133
133
-**Never use a palette token**: Do not use palette tokens (like `--pf-t--color--blue--20`) directly in your code, as the value is not guaranteed to be consistent across themes.
134
134
-**Use scalable icons:** For icons, use vector images (SVG) or icon fonts instead of raster or bitmap images (PNG, JPEG, GIF, BMP, and so on). This allows you to control their color with CSS `fill` and `color` properties. By assigning a design token to these properties, your icons will automatically change color to match the active theme.
135
-
- If you must use static images, you might need to hide and show different image files based presence of a theme-specific class (like `pf-v6-theme-dark`).
135
+
- If you must use static images, you might need to hide and show different image files based presence of a theme-specific class (like `.pf-v6-theme-dark`).
0 commit comments