angular-awesome-theming

What problem does it solve?

Applying consistent branding and fine-grained visual customization to Web Awesome components wrapped by Angular directives can be fragmented and time-consuming; developers need a predictable way to override defaults, apply semantic variants, and control layout without changing component internals.

Core Features & Use Cases

• Design tokens & variants: Use semantic variant, appearance, and size tokens to apply brand colors and intent-driven styles across components.
• CSS custom properties & parts: Override internal spacing, colors, and dimensions via CSS custom properties and style shadow DOM internals with exported ::part selectors.
• Layout utilities: Compose responsive UIs with attribute-based utilities like waStack, waCluster, waGrid, waGap, waAlignItems, waSplit, waFlank, and waFrame to control spacing and alignment.
• Use Case: Apply a company color palette to all wa-button instances, adjust toast widths and gaps globally, and arrange cards in a responsive grid using the provided layout classes.

Quick Start

Apply a brand color palette and adjust component spacing by updating CSS custom properties and using layout utilities like waStack and wa-gap classes.