chore(mdx): use mdx exts for i-u folders (#3457)

docs/angular/your-first-app.mdx

@@ -25,7 +25,7 @@ Here’s the finished app running on all 3 platforms:
 ></iframe>
 
 :::note
-Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md)
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.mdx)
 :::
 
 ## What We'll Build

docs/api/action-sheet.mdx

@@ -99,7 +99,7 @@ import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-
 
 ### Screen Readers
 
-Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app.
+Action Sheets set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app.
 
 #### Role
 

docs/api/alert.mdx

@@ -113,7 +113,7 @@ import Customization from '@site/static/usage/v8/alert/customization/index.md';
 
 ### Screen Readers
 
-Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app.
+Alerts set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app.
 
 #### Role
 

docs/api/col.mdx

@@ -25,7 +25,7 @@ See the [grid](./grid) documentation for more information.
 
 ## Column Alignment
 
-By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.
+By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior.
 
 
 

docs/api/content.mdx

@@ -22,7 +22,7 @@ The content component provides an easy to use content area with some useful meth
 to control the scrollable area. There should only be one content in a single
 view.
 
-Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
+Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
 
 
 ## Basic Usage
@@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
 
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 

docs/api/datetime.mdx

@@ -308,7 +308,7 @@ Developers can provide their own buttons for advanced custom behavior.
 
 Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
 
-When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](../theming/colors), etc.
+When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](../theming/colors.mdx), etc.
 
 To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
 
@@ -332,7 +332,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays
 
 ### Global Theming
 
-Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.
+Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes.mdx#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.
 
 The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme.
 

docs/api/fab.mdx

@@ -43,7 +43,7 @@ import Positioning from '@site/static/usage/v8/fab/positioning/index.md';
 
 ### Safe Area
 
-If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables).
+If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced.mdx#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced.mdx#application-variables).
 
 When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
 

docs/api/grid.mdx

@@ -31,15 +31,15 @@ The grid is a powerful mobile-first flexbox system for building custom layouts.
 - Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide.
 - Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
 - There is padding between individual columns. However, the padding can be removed from the grid and
-  columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](../layout/css-utilities) for more styles that can be applied to the grid.
+  columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](../layout/css-utilities.mdx) for more styles that can be applied to the grid.
 - There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
 - Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them
   (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices).
 - Grids can be customized via CSS variables. See [Customizing the Grid](#customizing-the-grid).
 
 ## Default Breakpoints
 
-The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced#variables-in-media-queries).
+The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries).
 
 | Name | Value  | Width Property | Offset Property | Push Property | Pull Property | Description                          |
 | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ |
@@ -151,7 +151,7 @@ import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/
 
 ### Vertical Alignment
 
-All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties).
+All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties).
 
 import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/index.md';
 
@@ -160,7 +160,7 @@ import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/ind
 
 ### Horizontal Alignment
 
-All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties).
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.mdx#flex-container-properties).
 
 import HorizontalAlignment from '@site/static/usage/v8/grid/horizontal-alignment/index.md';
 

docs/api/item.mdx

@@ -25,7 +25,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
 
 ## Basic Usage
 
-Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
+Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities.mdx) for more classes that can be added to an item to transform the text.
 
 import Basic from '@site/static/usage/v8/item/basic/index.md';
 
@@ -186,7 +186,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but
 --item-detail-push-show: true;
 ```
 
-See the [theming documentation](/docs/theming/css-variables) for more information. */}
+See the [theming documentation](/docs/theming/css-variables.mdx) for more information. */}
 
 ## Item Lines
 

docs/api/nav.mdx

@@ -22,7 +22,7 @@ Nav is a standalone component for loading arbitrary components and pushing new c
 Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
 
 :::note
-`ion-nav` is not meant to be used for routing.  Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects.
+`ion-nav` is not meant to be used for routing.  Instead, see the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx), or [`ion-router`](./router) for vanilla JavaScript projects.
 :::
 
 ## Using NavLink

docs/api/router.mdx

@@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
 
 :::note
- Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
+ Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx) for framework-specific routing solutions.
 :::
 
 

docs/api/row.mdx

@@ -25,7 +25,7 @@ See the [grid](./grid) documentation for more information.
 
 ## Row Alignment
 
-By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior.
+By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior.
 
 
 

docs/api/tabs.mdx

@@ -42,7 +42,7 @@ import Router from '@site/static/usage/v8/tabs/router/index.md';
 
 :::tip Best Practices
 
-Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information.
+Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](../angular/navigation.mdx#working-with-tabs), [React](../react/navigation.mdx#working-with-tabs), and [Vue](../vue/navigation.mdx#working-with-tabs) for additional information.
 
 :::
 

docs/api/text.mdx

@@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v8/text/basic/index.md';
 
 ## Theming
 
-The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
+The text component can be customized by changing any of the default [colors](../theming/colors.mdx) Ionic provides.
 
 ## Properties
 <Props />

docs/api/toast.mdx

@@ -110,7 +110,7 @@ Toasts are intended to be subtle notifications and are not intended to interrupt
 
 ### Screen Readers
 
-Toasts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app.
+Toasts set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app.
 
 #### Role
 

docs/cli.md

@@ -11,7 +11,7 @@ sidebar_label: Overview
   />
 </head>
 
-The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps.
+The Ionic command-line interface ([CLI](/docs/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps.
 
 ## Installation
 
@@ -41,14 +41,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t
 
 ## Architecture
 
-The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">GitHub repository</a>.
+The Ionic CLI is built with [TypeScript](/docs/reference/glossary.mdx#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source <a href="https://github.com/ionic-team/ionic-cli" target="_blank">GitHub repository</a>.
 
 ## Troubleshooting
 
 To troubleshoot issues with the Ionic CLI, the following may be useful:
 
 - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`.
-- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup.
+- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment.mdx#node-npm) environment setup.
 - The `--verbose` flag prints debugging messages, which may narrow down the issue.
 - Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying.
 - The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables).

docs/cli/configuration.mdx

@@ -121,7 +121,7 @@ module.exports = function (ctx) {
   <em>Available in CLI 6.2.0+</em>
 </small>
 
-The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo).
+The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo).
 
 :::note
 These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework.