Banner color token updates (#10678)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #10352  <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
* Replaces `-on-color` and `-text-[tone]-strong` tokens with
`-on-bg-fill` tokens
<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-sxhearubxs.chromatic.com/?path=/story/all-components-banner--all)
<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Sara Hill <sara.hill@shopify.com>

polaris-react/src/components/Banner/Banner.scss

@@ -51,28 +51,32 @@
   }
 }
 
-.icon-on-color.icon-on-color.icon-on-color {
-  @include recolor-icon(var(--p-color-icon-on-color));
+.text-success-on-bg-fill.text-success-on-bg-fill.text-success-on-bg-fill {
+  @include recolor-icon(var(--p-color-text-success-on-bg-fill));
 }
 
 .icon-success-strong-experimental.icon-success-strong-experimental.icon-success-strong-experimental {
   @include recolor-icon(var(--p-color-icon-success-strong-experimental));
 }
 
-.text-warning-strong.text-warning-strong.text-warning-strong {
-  @include recolor-icon(var(--p-color-text-warning-strong));
+.text-warning-on-bg-fill.text-warning-on-bg-fill.text-warning-on-bg-fill {
+  @include recolor-icon(var(--p-color-text-warning-on-bg-fill));
 }
 
 .icon-warning-strong-experimental.icon-warning-strong-experimental.icon-warning-strong-experimental {
   @include recolor-icon(var(--p-color-icon-warning-strong-experimental));
 }
 
+.text-critical-on-bg-fill.text-critical-on-bg-fill.text-critical-on-bg-fill {
+  @include recolor-icon(var(--p-color-text-critical-on-bg-fill));
+}
+
 .icon-critical-strong-experimental.icon-critical-strong-experimental.icon-critical-strong-experimental {
   @include recolor-icon(var(--p-color-icon-critical-strong-experimental));
 }
 
-.text-info-strong.text-info-strong.text-info-strong {
-  @include recolor-icon(var(--p-color-text-info-strong));
+.text-info-on-bg-fill.text-info-on-bg-fill.text-info-on-bg-fill {
+  @include recolor-icon(var(--p-color-text-info-on-bg-fill));
 }
 
 .icon-info-strong-experimental.icon-info-strong-experimental.icon-info-strong-experimental {

polaris-react/src/components/Banner/utilities.ts

@@ -31,8 +31,8 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
   success: {
     withinPage: {
       background: 'bg-success-strong',
-      text: 'text-on-color',
-      icon: 'icon-on-color',
+      text: 'text-success-on-bg-fill',
+      icon: 'text-success-on-bg-fill',
     },
     withinContentContainer: {
       background: 'bg-success-subdued',
@@ -44,8 +44,8 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
   warning: {
     withinPage: {
       background: 'bg-warning-strong-experimental',
-      text: 'text-warning-strong',
-      icon: 'text-warning-strong',
+      text: 'text-warning-on-bg-fill',
+      icon: 'text-warning-on-bg-fill',
     },
     withinContentContainer: {
       background: 'bg-warning-subdued-experimental',
@@ -57,8 +57,8 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
   critical: {
     withinPage: {
       background: 'bg-critical-strong',
-      text: 'text-on-color',
-      icon: 'icon-on-color',
+      text: 'text-critical-on-bg-fill',
+      icon: 'text-critical-on-bg-fill',
     },
     withinContentContainer: {
       background: 'bg-critical-subdued',
@@ -70,8 +70,8 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
   info: {
     withinPage: {
       background: 'bg-info-strong',
-      text: 'text-info-strong',
-      icon: 'text-info-strong',
+      text: 'text-info-on-bg-fill',
+      icon: 'text-info-on-bg-fill',
     },
     withinContentContainer: {
       background: 'bg-info-subdued',