[ActionList.SearchField] Fix text and focus styles (#10287)

### WHY are these changes introduced?

Fixes focus ring and text input styles on ActionList.SearchField with
beta flag enabled.

### WHAT is this pull request doing?

- Fixes focus ring styling
- FIxes text color on input
    <details>
      <summary>ActionList with search — before</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/e31a6b6b-6ca5-46f3-a240-ef1a76ae42cb"
alt="ActionList with search — before">
    </details>
    <details>
      <summary>ActionList with search — after</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/c7e7c729-3d55-4ffb-937f-7df379a15d10"
alt="ActionList with search — after">
    </details>

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

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this new story code in
<code>ActionList.stories.tsx</code> to test:</summary>

```jsx

export function WithSearch() {
  const [active, setActive] = useState(true);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const activator = (
    <Button onClick={toggleActive} disclosure>
      More actions
    </Button>
  );

  return (
    <div style={{height: '250px'}}>
      <Popover
        active={active}
        activator={activator}
        autofocusTarget="first-node"
        onClose={toggleActive}
      >
        <ActionList
          actionRole="menuitem"
          sections={[
            {
              items: [
                {content: 'Import file', icon: ImportMinor},
                {content: 'Export file', icon: ExportMinor},
              ],
            },
            {
              items: [
                {content: 'Edit', icon: EditMinor},
                {content: 'Delete', icon: DeleteMinor},
              ],
            },
            {
              items: [
                {
                  content: 'Blog posts',
                  helpText: 'Manage your blog articles',
                },
                {
                  content: 'Blogs',
                  helpText: 'Manage blogs published to your Online Store',
                },
                {
                  active: true,
                  content: 'Active blogs',
                  helpText: 'This is helpful text',
                  icon: ImportMinor,
                  suffix: <Icon source={TickSmallMinor} />,
                },
                {
                  disabled: true,
                  content: 'Disabled blogs',
                  helpText: 'This is also helpful text',
                  icon: ImportMinor,
                  suffix: <Icon source={TickSmallMinor} />,
                },
              ],
            },
          ]}
        />
      </Popover>
    </div>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] 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

Author: laurkim

.changeset/tough-frogs-speak.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed focus ring and input text styles on `ActionList.SearchField` component

polaris-react/src/components/ActionList/components/SearchField/SearchField.scss

@@ -34,7 +34,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   color: var(--p-color-text);
 
   #{$se23} & {
-    color: var(--p-color-text-inverse);
+    color: var(--p-color-text);
   }
 
   &::placeholder {
@@ -229,8 +229,13 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   pointer-events: none;
 
   #{$se23} & {
+    // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
+    @include no-focus-ring;
     border-radius: var(--p-border-radius-2);
     border-width: var(--p-border-width-1-experimental);
     background-color: var(--p-color-bg-input);
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-05);
   }
 }