Fix caution note syntax

Co-authored-by: Katie Langerman <[email protected]>

content/foundations/primitives/migrating.mdx

@@ -37,8 +37,9 @@ Use these values for the internal `padding` (including `p`, `px`, `py`, `pr`, et
 
 ##### Stack margin
 
-> [!CAUTION]
-> Prefer not using `margin` since it leaks space outside of components. Try to convert margins to container `padding` and/or flex layout `gap`.
+<Note variant="warning">
+ Prefer not using `margin` since it leaks space outside of components. Try to convert margins to container `padding` and/or flex layout `gap`.
+</Note>
 
 See padding values above; there are no `margin` primitives.
 
@@ -66,8 +67,9 @@ This is typically the CSS `gap` in `flex` (with `flex-direction: column`) or `gr
 
 [Control stacks](https://primer.style/foundations/primitives/size#controls) are horizontal (inline) rows containing inline items next to each other. For example, a set of buttons or labels. These are usually `display: flex` or `inline-flex` with `flex-direction: row`.
 
-> [!NOTE]
-> The **size** of the control stack depends on the size of the controls inside of it. For example, a stack containing `<IconButton size="small">` is a `small` stack.
+<Note variant="info">
+ The size of the control stack depends on the size of the controls inside of it. For example, a stack containing `<IconButton size="small">` is a `small` stack.
+</Note>
 
 ##### Control stack padding / margin
 
@@ -219,11 +221,13 @@ Prefer these primitives instead of previously used numbers or plain pixel values
 
 These are typically used for breakpoints, heights and widths.
 
-> [!NOTE]
-> For overlays (like dialogs), prefer the [new overlay primitives](https://primer.style/foundations/primitives/size#overlay). These sizes are not a 1:1 mapping with the old keywords.
+<Note variant="info">
+ For overlays (like dialogs), prefer the [new overlay primitives](https://primer.style/foundations/primitives/size#overlay). These sizes are not a 1:1 mapping with the old keywords.
+</Note>
 
-> [!NOTE]
-> CSS variables cannot be used in `@media` or `@container` query expressions. The plain pixel value must be used instead.
+<Note variant="info">
+  CSS variables cannot be used in `@media` or `@container` query expressions. The plain pixel value must be used instead. Stay tuned for future media query support.
+</Note>
 
 `sx` breakpoint keyword | `sx` size keyword | resolved value | primitive
 --- | --- | --- | ---