[CalloutCard] Fix dismiss button UI inconsistencies (#12967)

### WHY are these changes introduced?

Fixes #12968

The dismiss button on the CalloutCard does not match the UI of the
dismiss button on the Banner, which is very apparent when the components
are rendered near each other.

### WHAT is this pull request doing?

This makes four changes to the CalloutCard dismiss button:

- Use tertiary button variant
- Use regular sized X icon
- Adjust position to match Banner
- Add translated label

<details>
<summary>Before</summary>

<img width="983" alt="04-30-17lmm-1zbu4"
src="https://github.com/user-attachments/assets/9aee2357-c91b-4dee-90bc-a998eff97c3f">

</details>

<details>
<summary>After</summary>

<img width="1004" alt="04-31-awl5i-59kp8"
src="https://github.com/user-attachments/assets/24cb1c09-6bce-471a-9730-9da8f2cef564">

</details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [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)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] 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

.changeset/real-laws-draw.md

@@ -0,0 +1,10 @@
+---
+'@shopify/polaris': patch
+---
+
+CalloutCard dismiss button improvements:
+
+- Use tertiary button variant
+- Use regular sized X icon
+- Adjust position to match Banner
+- Add translated label

polaris-react/src/components/CalloutCard/CalloutCard.module.css

@@ -35,7 +35,7 @@
 }
 
 .Dismiss {
-  right: var(--p-space-400);
+  right: var(--p-space-300);
   top: var(--p-space-400);
   position: absolute;
 
@@ -45,5 +45,5 @@
 }
 
 .hasDismiss {
-  padding-right: calc(var(--p-space-800) + var(--p-space-200));
+  padding-right: calc(var(--p-space-800) + var(--p-space-300));
 }

polaris-react/src/components/CalloutCard/CalloutCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {XSmallIcon} from '@shopify/polaris-icons';
+import {XIcon} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
+import {useI18n} from '../../utilities/i18n';
 import type {IconableAction} from '../../types';
 // eslint-disable-next-line import/no-deprecated
 import {LegacyCard} from '../LegacyCard';
@@ -37,6 +38,7 @@ export function CalloutCard({
   secondaryAction,
   onDismiss,
 }: CalloutCardProps) {
+  const i18n = useI18n();
   const primaryActionMarkup = buttonFrom(primaryAction);
   const secondaryActionMarkup = secondaryAction
     ? buttonFrom(secondaryAction, {
@@ -56,10 +58,10 @@ export function CalloutCard({
   const dismissButton = onDismiss ? (
     <div className={styles.Dismiss}>
       <Button
-        variant="plain"
-        icon={XSmallIcon}
+        variant="tertiary"
+        icon={XIcon}
         onClick={onDismiss}
-        accessibilityLabel="Dismiss card"
+        accessibilityLabel={i18n.translate('Polaris.Banner.dismissButton')}
       />
     </div>
   ) : null;