Hot Graphic background color when using graphics as pins

[swashbuck]

Subject of the issue

When using graphics as pins, the button.hotgraphic__pin element inherits the background color from .btn-icon. As such, you can see the button's background color when using transparent PNGs.

In this example, standard buttons have a gray background. This color is visible behind the star pin graphics:

Your environment

• Framework 5.24.8
• Vanilla theme 9.3.1
• Hot Graphic 6.5.2

Steps to reproduce

1. Add a Hotgraphic.
2. Configure to use a graphic for a pin with the_pin option:

"_pin": {
    "src": "course/en/images/hotgraphic-pin.png",
    "alt": ""
}

Suggested next steps

Couple ideas for this:

1. (preferred) Always use a transparent background for graphic pins.

.hotgraphic__pin.has-pin-image {
  background-color: transparent;
}

2. Add a new setting called _isTransparent that would live in the _pin object. When this is true, the background color would be set to transparent.

[github-actions]

🎉 This issue has been resolved in version 9.7.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀