Feat: Add Support for Styling Customization via `part` Attribute

[hccullen]

Summary

This PR introduces the ability to customize the appearance of key elements within the install dialogs (install-dialog) and buttons (button) using the part attribute. This allows developers to style specific parts of the dialogs and buttons without altering the underlying template code.

Note, I have intentionally limited styling to only specific elements. Based on the issues linked, most people only really want to customise some basic colours/shadows etc. More extensive styling ultimately defeats the point of this library, which is intended to feel native.

Key Features:

• Customizable Dialogs and Buttons:

  • The install-dialog and button components now support the part attribute, enabling custom styling through CSS.

• Modifiers:

  • Modifiers such as apple, chrome, mobile, and desktop can be applied to both install-dialog and button.
  • Button-specific modifiers include primary, secondary, and icon, allowing further customization based on button type.

Example Usage:

Developers can now easily target and style elements using the ::part() CSS selector:

pwa-install::part(install-dialog apple mobile) {
    background-color: #f8f9fa;
}

pwa-install::part(button primary) {
    background-color: #007bff;
    color: white;
}

Impact:

This feature gives developers greater flexibility in adapting the look and feel of install dialogs across different platforms (Apple, Chrome) and device types (mobile, desktop) while maintaining component integrity.

Resolves:

• https://github.com/khmyznikov/pwa-install/issues/16
• https://github.com/khmyznikov/pwa-install/issues/55
• https://github.com/khmyznikov/pwa-install/issues/75

[khmyznikov]

Good PR, need to think on a bit more from my side, will try to find some time this week.

[hccullen]

Yeah, agreed. Tried a few different approaches here, including exposing the CSS variables for colours etc. or just supporting a single theme-color like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

Ultimately, I'll let you decide if it's in line with the vision for the lib though.

One thought in favour of some greater customisation though is that this package has currently hard-coded some colours (presumably you've based off Chrome + Safari). Different browsers have (or at least can have) different accent colors. https://developer.mozilla.org/en-US/docs/Web/CSS/system-color#highlight

But that would be a different approach than this one.