feat(IconButton): allow custom colors

[michigg]

Adds variant blank that allows for color overwrites

[Copilot]

Pull Request Overview

This PR adds a new "blank" variant to the IconButton component that allows developers to override default colors using CSS variables. This enables custom styling while maintaining the component's structure and functionality.

• Added a new "blank" variant that provides no default coloring
• Updated transition styles to include color and background-color changes
• Fixed missing Bootstrap class prefix in IconInfoCircle component

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
IconInfoCircle.vue	Fixed missing "bi" class prefix for Bootstrap icon
IconButton.vue	Added "blank" variant with customizable CSS variables and enhanced transitions
IconButton.stories.ts	Added Storybook examples demonstrating custom color usage with the new variant

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The blank variant is missing hover color definition. Consider adding --_icon-button-bg-hover-color: var(--icon-button-bg-hover-color, var(--color-neutral-200)); to ensure consistent hover behavior when custom colors are not provided.

Suggested change

	--_icon-button-bg-color: var(--icon-button-bg-color, transparent);
	--_icon-button-bg-color: var(--icon-button-bg-color, transparent);
	--_icon-button-bg-hover-color: var(--icon-button-bg-hover-color, var(--color-neutral-200));

[Copilot]

The JSDoc comment is incomplete and contains empty lines. It should provide a meaningful description of what this story demonstrates, similar to the CustomColors story above.

Suggested change

	* Custom colors with filled style
	*
	*
	* An example of a custom styled IconButton using CSS variables with a filled background.
	* These styles override the default styles of the IconButton component to demonstrate
	* how to apply custom colors, background, and sizing with a filled appearance.
	*
	* - `--icon-button-color`: The color of the icon.
	* - `--icon-button-bg-color`: The background color of the button.
	* - `--icon-button-bg-hover-color`: The background color of the button on hover.
	* - `--icon-button-font-size`: The size of the icon.
	* - `--icon-button-radius`: The border radius of the button.
	* - `--icon-button-padding`: The padding inside the button.
	*
	* Note: For maintainability, consider using a CSS class or scoped style block
	* instead of inline styles in a real application.