Glass Styles & Visual Effects Hardening

[nicolethoen]

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

• Implement Glass Design Tokens: Codify the glass effect values (blur, opacity, saturation) into design tokens based on user research. [done]
• 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.
  • Done in Hackathon summary
• Global Glass Utility Class: Create the global class structure to activate glass styles system-wide. [done as part of hackday]
• 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. [investigation done as part of hackday - CSS driven]
• Documentation Site Toggle: Add a "Glass Mode" toggle to the docs site. [done]
• 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. [investigation done as part of hackday]
• Component Wiring: Apply glass/clear logic to individual components based on the Audit results.

---

Jira Issue: PF-3177