Glass Styles & Visual Effects Hardening #282
Description
Summary: Formalize the "Glass" styling implementation. This involves defining tokens, creating the architectural logic for application (CSS vs. React Context), and ensuring components render correctly on clear vs. glass backgrounds. This requires close collaboration with design to audit all components.
Scope / Child Issues:
- Implement Glass Design Tokens: Codify the glass effect values (blur, opacity, saturation) into design tokens based on user research.
- Component Audit (Glass vs. Clear): Collaborate with Design to categorize components:
- Group A: Components needing a clear background (to sit inside a glass container).
- Group B: Components needing glass styles applied directly.
- Global Glass Utility Class: Create the global class structure to activate glass styles system-wide.
- Component Wiring: Apply glass/clear logic to individual components based on the Audit results.
- Architecture Decision (Context vs. CSS): Determine if glass toggling requires React Application Context or if it can be handled purely via CSS to support distributed platform plugins.
- Documentation Site Toggle: Add a "Glass Mode" toggle to the docs site.
- Constraint: Ensure "High Contrast" and "Glass" cannot be active simultaneously (mutex logic).
- Consider whether table styles should accommodate glass in such a way that table headers and footers are styled differently from the table body, especially if they are fixed. This would be in line with Nexus early POCs.
- there is a tfoot element being created (Table - support for table footer patternfly#8035)
- All fixed items may need a similar treatment if we enable this.
- Glass needs to be applied to CompassPanel and Panel with isScrollable enabled