spfx-glassmorphism-ui

name	spfx-glassmorphism-ui
description	Reuse the Permission Risk + External Sharing glassmorphism design system for new SPFx web parts.

SPFx Glassmorphism UI

Use for

1. Building new SPFx web parts that should match the existing glassmorphism visual language.
2. Refactoring existing web part SCSS to align with the same glass tokens and surfaces.
3. Applying consistent glass card, header, tab, metric, and table treatments.

Do not use for

1. Replacing Fluent UI controls with custom controls when Fluent variants already satisfy the need.
2. Introducing Tailwind, CSS-in-JS, or runtime style frameworks in spfx-solution.
3. Changing business logic when the task is visual consistency only.

Typical target paths (any SPFx project)

1. src/webparts/**/components/*.module.scss
2. src/webparts/**/components/*.tsx
3. src/shared/licensing-ui/*.module.scss

Baseline references (adapt to your solution)

• Use an existing glassmorphism-like web part (if present) as the visual baseline.
• Derive shared tokens (colors, blur, shadows) from that baseline and reuse across new web parts.

Workflow

1. Start each root web part class with shared semantic and glass tokens:
   • --primary, --muted, --accent-blue, --danger, --warning, --ok
   • --glass-bg, --glass-bg-strong, --glass-border, --glass-shadow, --glass-blur
2. Keep the root container transparent with ambient radial backgrounds (::before and optional ::after) and ensure direct children sit above the effect layer with z-index.
3. Apply glass surfaces consistently to structural blocks:
   • Header, side panels, cards, table shells, filter controls.
   • Pattern: background: var(--glass-bg), border: 1px solid var(--glass-border), backdrop-filter, box-shadow.
4. Keep accent usage purposeful:
   • Risk/severity colors only for status communication.
   • Primary accent (--accent-blue) for focus and selected states.
5. Preserve readability and motion constraints:
   • Maintain contrast against translucent backgrounds.
   • Use subtle animation only for high-signal elements (for example pulse/gradient banners), not for every element.
6. Keep SPFx theme compatibility:
   • Prefer SharePoint theme tokens for text and key accents where appropriate ("[theme:..., default: ...]").

Output expectations

1. New web parts visually align with Permission Risk + External Sharing without copy-pasting entire SCSS files.
2. Shared token names remain stable so future updates are centralized and predictable.
3. No runtime dependency changes and no framework drift.