fix(button): buttons using fill and color properties now account for hover and focused variables

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: resolves #23441

What is the new behavior?

• Set default css variables on the host given selector and then apply background and opacity on the ::after pseudo element

Does this introduce a breaking change?

• Yes
• No

Other information

[brandyscarney]

Components with the color property set are not supposed to be overridden by CSS variables. If you were to write the following for example:

ion-button {
  --background: red;
}

you would want it to apply to all buttons except when the color property is set. Here's a Codepen example: https://codepen.io/brandyscarney/pen/ExWMrwv?editors=1100

This PR breaks this