fix: update all internal links from guidelines to elements (#4398)

src/components/A11yStatus/A11yStatus.js

@@ -183,19 +183,19 @@ const A11yStatus = ({ components, layout }) => {
       // link for component name in table
       let componentUrl;
       if (componentName === 'Aspect ratio') {
-        componentUrl = '/guidelines/2x-grid/overview/#aspect-ratio';
+        componentUrl = '/elements/2x-grid/overview/#aspect-ratio';
       } else if (componentName === 'Grid') {
-        componentUrl = '/guidelines/2x-grid/code#css-grid';
+        componentUrl = '/elements/2x-grid/code#css-grid';
       } else if (componentName === 'Flex grid') {
-        componentUrl = '/guidelines/2x-grid/code#flexbox-grid';
+        componentUrl = '/elements/2x-grid/code#flexbox-grid';
       } else if (componentName === 'UI Shell') {
         componentUrl = '/components/UI-shell-header/usage';
       } else if (componentName === 'Theme') {
-        componentUrl = '/guidelines/themes/overview/';
+        componentUrl = '/elements/themes/overview/';
       } else if (componentName === 'Skeleton') {
         componentUrl = '/patterns/loading-pattern/#skeleton-states';
       } else if (componentName === 'Layer') {
-        componentUrl = '/guidelines/color/usage#implementing-layering';
+        componentUrl = '/elements/color/usage#implementing-layering';
       }
 
       // if a parent component is set link to the parent component

src/pages/all-about-carbon/who-uses-carbon.mdx

@@ -51,7 +51,7 @@ Here are some ways designers can begin engaging with Carbon.
 #### Learn the system
 
 - Familiarize yourself with the Carbon
-  [foundational elements](/guidelines/2x-grid/overview), their usage
+  [foundational elements](/elements/2x-grid/overview), their usage
   documentation, and the system's
   [design principles](https://www.ibm.com/design/language/).
 
@@ -128,7 +128,7 @@ Here are some ways developers can begin engaging with Carbon.
 #### Learn the system
 
 - Familiarize yourself with the
-  [Carbon foundational elements](/guidelines/2x-grid/overview/), the usage
+  [Carbon foundational elements](/elements/2x-grid/overview/), the usage
   documentation, and the system's
   [design principles](https://www.ibm.com/design/language/).
 

src/pages/components/button/usage.mdx

@@ -412,7 +412,7 @@ or ghost buttons in layouts with more than three calls to action.
 Ideally, when using groups of related buttons (not including ghost buttons),
 they should all be the same width. This can be achieved in one of two ways, both
 of which are acceptable. The first approach involves using the
-[narrow gutter mode](/guidelines/2x-grid/implementation#gutter-modes). In this
+[narrow gutter mode](/elements/2x-grid/implementation#gutter-modes). In this
 situation each button would be set individually on the column grid. _Note:
 Carbon developers are working on the narrow gutter mode, currently left-hanging
 buttons can only be achieved with an override._

src/pages/components/number-input/style.mdx

@@ -126,8 +126,8 @@ phrase and any proper nouns capitalized.
 
 ### Default input
 
-The add and subtract icons can be found in the
-[icons](/guidelines/icons/library) library.
+The add and subtract icons can be found in the [icons](/elements/icons/library)
+library.
 
 | Element         | Property                    | px / rem | Spacing token |
 | --------------- | --------------------------- | -------- | ------------- |

src/pages/components/overflow-menu/style.mdx

@@ -62,7 +62,7 @@ of the first word capitalized.
 
 The height of an overflow menu is determined by the amount of content in the
 menu. The overflow menu icon can be found in the
-[icons](/guidelines/icons/library) library.
+[icons](/elements/icons/library) library.
 
 | Element     | Property                    | px / rem  | Spacing token |
 | ----------- | --------------------------- | --------- | ------------- |

src/pages/components/progress-indicator/style.mdx

@@ -88,7 +88,7 @@ label. All labels should be set in sentence case.
 
 ## Structure
 
-All icons can be found in the [icons](/guidelines/icons/library) library.
+All icons can be found in the [icons](/elements/icons/library) library.
 
 | Element | Property                 | px / rem | Spacing token |
 | ------- | ------------------------ | -------- | ------------- |

src/pages/components/tabs/usage.mdx

@@ -291,7 +291,7 @@ edge. The tabs in between will flow accordingly and may or may not align to the
 grid but will always be the same size.
 
 Use the
-[2x grid](https://www.carbondesignsystem.com/guidelines/2x-grid/overview#2x-grid-fundamentals)
+[2x grid](https://www.carbondesignsystem.com/elements/2x-grid/overview#2x-grid-fundamentals)
 to drive visual rhythm by spacing content in multiples of two columns and
 aligning the beginning and ending of the tab elements with content below the
 tabs when possible.

src/pages/components/tile/usage.mdx

@@ -803,15 +803,15 @@ For more information on designing for AI, see the
 #### Grid
 
 To learn more about how to build tiles correctly on the grid, see Carbon’s
-[2x grid](/guidelines/2x-grid/implementation).
+[2x grid](/elements/2x-grid/implementation).
 
 #### Aspect ratio
 
 The aspect ratio is important when building tiles and images. For further
 guidance, see Carbon’s
-[aspect ratio](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#aspect-ratio)
+[aspect ratio](https://www.carbondesignsystem.com/elements/2x-grid/overview/#aspect-ratio)
 and its
-[implementation](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#screen-regions).
+[implementation](https://www.carbondesignsystem.com/elements/2x-grid/implementation#screen-regions).
 
 #### Buttons
 
@@ -827,7 +827,7 @@ Link has variants depending on the context. For further guidance, see Carbon’s
 #### Spacing
 
 Spacing helps deliver clear and functional layouts. For further guidance, see
-Carbon’s [spacing](https://carbondesignsystem.com/guidelines/spacing/overview/).
+Carbon’s [spacing](https://carbondesignsystem.com/elements/spacing/overview/).
 
 ## References
 

src/pages/designing/kits/sketch.mdx

@@ -40,7 +40,7 @@ To design with Carbon you must have the **most recent version** of
 
 #### 2. **Choose a theme**.
 
-There are [four Carbon themes](/guidelines/color/overview#themes), two light
+There are [four Carbon themes](/elements/color/overview#themes), two light
 (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its
 own Sketch library. You can subscribe to as many libraries as you'd like.
 
@@ -170,7 +170,7 @@ Sketch to begin designing.
 
 ### Grid
 
-The [IBM 2x Grid](/guidelines/2x-grid/overview/) is fundamental to everything we
+The [IBM 2x Grid](/elements/2x-grid/overview/) is fundamental to everything we
 design. It is the geometric foundation of all the visual elements in the IBM
 Design Language, from typography to columns, boxes, icons, and illustrations.
 The grid provides structure and guidance for all creative decision-making.
@@ -215,7 +215,7 @@ keyboard shortcut `Control+G`.
 
 The layout settings change depending on which size screen you are designing for.
 See
-[breakpoints](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints).
+[breakpoints](https://www.carbondesignsystem.com/elements/2x-grid/overview/#breakpoints).
 
 ### Basic grid
 
@@ -227,7 +227,7 @@ template on the page labeled "Basic grid".
 
 An influencer is a component that affects the content on the page. It can either
 appears on a page as the result of a user action or be part of your product's
-page. These [influencers](/guidelines/2x-grid/overview/#grid-influencers) effect
+page. These [influencers](/elements/2x-grid/overview/#grid-influencers) effect
 the layout grid by scaling and resizing the columns and its content. You can
 find an assortment of examples of grids with an influences in the grid template
 file on the page labeled "Grid influencers".
@@ -247,7 +247,7 @@ specifications for panel combinations and how they impact the grid at all sizes.
 - Total panel width + Left margin = **Offset**
 
 \*Since we are following the Carbon Design responsive guidelines, we referenced
-[this table](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options)
+[this table](https://www.carbondesignsystem.com/elements/2x-grid/implementation#responsive-options)
 to determine our common breakpoint widths and respective gutter specs.
 
 #### Example
@@ -270,7 +270,7 @@ Which also avoids columns that are smaller than 32.
 ### Symbols
 
 Carbon [components](/components/overview), [add-ons](/contributing/add-ons), and
-[icons](/guidelines/icons/library) live in the design kit as Sketch symbols.
+[icons](/elements/icons/library) live in the design kit as Sketch symbols.
 
 ![Carbon symbol menu navigation](/images/carbon-kit.png)
 
@@ -318,12 +318,12 @@ detaching the symbol to change default styles.
 
 Carbon text styles in Sketch are organized similarly to symbols.
 
-- The first text style level displays
-  [theme options](/guidelines/themes/overview) (i.e., white theme).
-- The second level shows the [Carbon type](/guidelines/typography/overview)
-  tokens (i.e., body-long-01).
+- The first text style level displays [theme options](/elements/themes/overview)
+  (i.e., white theme).
+- The second level shows the [Carbon type](/elements/typography/overview) tokens
+  (i.e., body-long-01).
 - The third level selects the type color, which is labeled with a
-  [Carbon color](/guidelines/color/overview) token name.
+  [Carbon color](/elements/color/overview) token name.
 
 ### Layer styles
 
@@ -335,7 +335,7 @@ Layer styles are color selections for any shape in Sketch.
 
 #### Library menu navigation
 
-[Color](/guidelines/color/overview) in Carbon is carefully considered, and we
+[Color](/elements/color/overview) in Carbon is carefully considered, and we
 discourage custom layer styles.
 
 The first layer is the theme selection (i.e., 01 White theme). The second layer

src/pages/developing/angular-tutorial/step-2.mdx

@@ -451,7 +451,7 @@ for now.
 
 We've added basic layout styles in `landing-page.component.scss` and
 `styles.scss`, so now let's add type, color and spacing styles to match the
-design. We'll be using our [spacing tokens](/guidelines/spacing/overview). In
+design. We'll be using our [spacing tokens](/elements/spacing/overview). In
 `landing-page.component.scss`, add these imports at the **top** of the file so
 we can use Carbon breakpoints, tokens, and typography Sass mixins and functions:
 
@@ -492,23 +492,22 @@ that, add:
 }
 ```
 
-Referencing the
-[spacing token table](/guidelines/spacing/overview#spacing-scale), `16px` can be
-set with the `$spacing-05` token. The design calls for `128px` of space below
-the heading and that's not in the spacing scale, we can achieve that in Sass by
-multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem` directly
-in our styling, but using our tokens preserves consistency should the token
-values get updated in the future.
+Referencing the [spacing token table](/elements/spacing/overview#spacing-scale),
+`16px` can be set with the `$spacing-05` token. The design calls for `128px` of
+space below the heading and that's not in the spacing scale, we can achieve that
+in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem`
+directly in our styling, but using our tokens preserves consistency should the
+token values get updated in the future.
 
 Looking at the design, we need a wall-to-wall light gray background behind the
 banner and also behind the third row. This is a great opportunity to use a Sass
 mixin. We will put this at the top of `landing-page.component.scss`.
 
 Per the design we need to use Gray 10 for our banner background color, which can
 be set with the `$ui-01`
-[color token](https://www.carbondesignsystem.com/guidelines/color/usage). Also,
-we want the background to extend into the grid's outermost gutters to go the
-full width of the viewport, so given the DOM structure, we can achieve that by
+[color token](https://www.carbondesignsystem.com/elements/color/usage). Also, we
+want the background to extend into the grid's outermost gutters to go the full
+width of the viewport, so given the DOM structure, we can achieve that by
 setting the background in an absolutely positioned pseudo element.
 
 ```scss path=src/app/home/landing-page/landing-page.component.scss
@@ -554,7 +553,7 @@ Next, we can see that the `h1` is using the `heading-05` type token.
 
 The Sketch symbol naming is consistent with the development Sass tokens to help
 translate design to development. So, looking up the
-[type token](https://www.carbondesignsystem.com/guidelines/typography/productive),
+[type token](https://www.carbondesignsystem.com/elements/typography/productive),
 we know to use `productive-heading-05`:
 
 {/* prettier-ignore-start */}

src/pages/developing/frameworks/react.mdx

@@ -119,7 +119,7 @@ function MyComponent() {
 ```
 
 A full list of available icons is provided in the
-[icon library](/guidelines/icons/library/).
+[icon library](/elements/icons/library/).
 
 For a more in depth introduction to using `@carbon/react` in a webpack-based
 app, [check out our React tutorial](/developing/react-tutorial/overview/).

src/pages/developing/react-tutorial/step-2.mdx

@@ -439,7 +439,7 @@ for now.
 
 We've added basic layout styles in `_landing-page.scss`, so now let's add type,
 color, and spacing styles to match the design. We'll be using our
-[spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing/overview).
+[spacing tokens](https://www.carbondesignsystem.com/elements/spacing/overview).
 In `_landing-page.scss`, add these imports at the **top** of the file (above our
 overrides import) so we can use Carbon breakpoints, tokens, and typography Sass
 mixins and functions:
@@ -481,7 +481,7 @@ below the heading. For that, add:
 ```
 
 Referencing the
-[spacing token table](https://www.carbondesignsystem.com/guidelines/spacing/overview#spacing-scale),
+[spacing token table](https://www.carbondesignsystem.com/elements/spacing/overview#spacing-scale),
 `16px` can be set with the `$spacing-05` token. The design calls for `128px` of
 space below the heading and that's not in the spacing scale. We can achieve this
 in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem`
@@ -496,9 +496,9 @@ practice to place mixins in a dedicated file, so create a `_mixins.scss` file in
 
 Add the following in `_mixins.scss`. Per the design we need to use Gray 10 for
 our banner background color, which can be set with the `$layer-01`
-[color token](https://www.carbondesignsystem.com/guidelines/color/usage). Also,
-we want the background to extend into the grid's outermost gutters to go the
-full width of the viewport, so given the DOM structure, we can achieve that by
+[color token](https://www.carbondesignsystem.com/elements/color/usage). Also, we
+want the background to extend into the grid's outermost gutters to go the full
+width of the viewport, so given the DOM structure, we can achieve that by
 setting the background in an absolutely positioned pseudo element.
 
 ```scss path=src/app/home/_mixins.scss
@@ -549,7 +549,7 @@ Next, we can see that the `h1` is using the `heading-05` type token.
 
 The Sketch symbol naming is consistent with the development Sass tokens to help
 translate design to development. So, looking up the
-[type token](https://www.carbondesignsystem.com/guidelines/typography/productive),
+[type token](https://www.carbondesignsystem.com/elements/typography/productive),
 we know to use `productive-heading-05`:
 
 ```scss path=src/app/home/_landing-page.scss

src/pages/developing/vue-tutorial/step-2.mdx

@@ -387,7 +387,7 @@ for now.
 
 We've added basic layout styles in `LandingPage.vue`, so now let's add type,
 color and spacing styles to match the design. We'll be using our
-[spacing tokens](/guidelines/spacing/overview#spacing-scale). In a new file
+[spacing tokens](/elements/spacing/overview#spacing-scale). In a new file
 `src/styles/_carbon-utils.scss`, add these imports at the **top** of the file so
 we can use Carbon breakpoints, tokens, and typography Sass mixins and functions:
 
@@ -435,13 +435,12 @@ with the other imports and
 }
 ```
 
-Referencing the
-[spacing token table](/guidelines/spacing/overview#spacing-scale), `16px` can be
-set with the `$spacing-05` token. The design calls for `128px` of space below
-the heading and that's not in the spacing scale, we can achieve that in Sass by
-multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem` directly
-in our styling, but using our tokens preserves consistency should the token
-values get updated in the future.
+Referencing the [spacing token table](/elements/spacing/overview#spacing-scale),
+`16px` can be set with the `$spacing-05` token. The design calls for `128px` of
+space below the heading and that's not in the spacing scale, we can achieve that
+in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem`
+directly in our styling, but using our tokens preserves consistency should the
+token values get updated in the future.
 
 Looking at the design, we need a wall-to-wall light gray background behind the
 banner and also behind the third row. This is a great opportunity to use a Sass
@@ -451,9 +450,9 @@ to place mixins in a dedicated file, so create a `_mixins.scss` file in
 
 Add the following in `_mixins.scss`. Per the design we need to use Gray 10 for
 our banner background color, which can be set with the `$ui-01`
-[color token](https://www.carbondesignsystem.com/guidelines/color/usage). Also,
-we want the background to extend into the grid's outermost gutters to go the
-full width of the viewport, so given the DOM structure, we can achieve that by
+[color token](https://www.carbondesignsystem.com/elements/color/usage). Also, we
+want the background to extend into the grid's outermost gutters to go the full
+width of the viewport, so given the DOM structure, we can achieve that by
 setting the background in an absolutely positioned pseudo element.
 
 ```scss path=src/views/LandingPage/_mixins.scss
@@ -512,7 +511,7 @@ Next, we can see that the `h1` is using the `heading-05` type token.
 
 The Sketch symbol naming is consistent with the development Sass tokens to help
 translate design to development. So, looking up the
-[type token](https://www.carbondesignsystem.com/guidelines/typography/productive),
+[type token](https://www.carbondesignsystem.com/elements/typography/productive),
 we know to use `productive-heading-05`:
 
 ```scss path=src/views/LandingPage/LandingPage.vue

src/pages/elements/2x-grid/usage.mdx

@@ -122,8 +122,8 @@ pattern also remains the same, giving users a familiar anchor. However the
 content has become a lot denser as other column configurations begin to emerge
 on the fluid 2x grid. The fixed grid also comes into play here in the data
 visualizations, where content is so dense that fixed spacers (i.e. the
-[mini unit grid](/guidelines/2x-grid/overview/#mini-unit)) need to be used
-rather than fluid columns.
+[mini unit grid](/elements/2x-grid/overview/#mini-unit)) need to be used rather
+than fluid columns.
 
 ![denser layout example](images/usage/03_denser_layout_UI.png)
 
@@ -220,7 +220,7 @@ changes.
 <Caption>
   When a commonly used aspect ratio is not appropriate for the layout, it’s also
   fine to choose a less common aspect ratio or a{' '}
-  <a href="/guidelines/2x-grid/overview/#scaling-multiple">scaling multiple</a>.
+  <a href="/elements/2x-grid/overview/#scaling-multiple">scaling multiple</a>.
 </Caption>
 
 ### Contrast
@@ -306,7 +306,7 @@ _(IBMers only)_.
 
 Style models help designers by simplifying decisions around how foundational
 design elements should be used. For example, all pages on IBM.com and all
-screens within IBM product use the [2x Grid](/guidelines/2x-grid/overview/), but
+screens within IBM product use the [2x Grid](/elements/2x-grid/overview/), but
 the 2x Grid supports a wide range of behaviors and usage. The 2x Grid can be
 left aligned, centered or it can span the maximum width of the browser.
 
@@ -317,7 +317,7 @@ serve.
 In our models, the design elements included are:
 
 - Grid
-- [Screen regions](/guidelines/2x-grid/overview#screen-regions)
+- [Screen regions](/elements/2x-grid/overview#screen-regions)
 - Key components (Masthead, Footer, and Product UI Shell)
 
 The biggest differentiator between the style models is the grid. Specifically in

src/pages/elements/icons/code.mdx

@@ -59,7 +59,7 @@ size `16`. You can change the size of the icon by adding the `size` prop:
 ```
 
 _Note: if you would like to find the import path for an icon, you can reference
-our [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library)_
+our [Icon Library](https://www.carbondesignsystem.com/elements/icons/library)_
 
 ### Icon fill