feat: refresher should have global css variable to control background

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly

### Current Behavior

Looks bad. 🤮 👎
(GIF colors are not accurate. In real it looks a bit uglier.)

### Expected Behavior

Look good. 😎 👍

### Steps to Reproduce

The refresher background and border should use either the same colors from item or card like `--ion-card-background` and `--ion-border-color` instead of `--ion-color-step-250` and `--ion-color-step-200`.

The current colors looks ugly if you define all color-step variable for light and dark mode. There are also other issues in Ionic with color-step in light mode. I guess this is only tested for dark mode. But in this case, it looks weird in both themes.

My current workaround:

```css
ion-refresher {
--ion-color-step-250: var(--ion-card-background);
--ion-color-step-200: var(--ion-border-color);
}
```

### Code Reproduction URL

https://codepen.io/infacto/pen/QWmzBez

### Ionic Info

`@ionic/angular: 6.1.8` (ionic info not available, ionic CLI not in use for my monorepo.)

### Additional Information

https://ionicframework.com/docs/api/refresher

https://github.com/ionic-team/ionic-framework/blob/436a8ce50847d26f8fb63ce64ea85be6f5c0bc8e/core/src/components/refresher/refresher.md.vars.scss#L12-L16

You can see e.g. the fallback `#ffffff` (white) of `--ion-color-step-250` which is gray, if set.