diff --git a/src/components/ColorPalette/ColorPalette.module.scss b/src/components/ColorPalette/ColorPalette.module.scss
index c4c99342203..f4ff8b4c95b 100644
--- a/src/components/ColorPalette/ColorPalette.module.scss
+++ b/src/components/ColorPalette/ColorPalette.module.scss
@@ -80,9 +80,7 @@
 }
 
 .palette-switcher
-  :global(
-    .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover
-  ) {
+  :global(.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) {
   background-color: $hover-ui;
 }
 
diff --git a/src/pages/components/menu-buttons/code.mdx b/src/pages/components/menu-buttons/code.mdx
index 2d5df9d40fa..d774fcd58f1 100644
--- a/src/pages/components/menu-buttons/code.mdx
+++ b/src/pages/components/menu-buttons/code.mdx
@@ -4,5 +4,4 @@ description: add
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
-
 TODO
diff --git a/src/pages/components/menu/code.mdx b/src/pages/components/menu/code.mdx
index c461b729c6f..a5033eecae8 100644
--- a/src/pages/components/menu/code.mdx
+++ b/src/pages/components/menu/code.mdx
@@ -1,7 +1,7 @@
----
-title: Menu
-description: add
-tabs: ['Usage', 'Style', 'Code', 'Accessibility']
----
-
-TODO
+---
+title: Menu
+description: add
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+TODO
diff --git a/src/pages/guidelines/motion/code.mdx b/src/pages/guidelines/motion/code.mdx
index 7a2d9592702..db4b9b8a3f5 100644
--- a/src/pages/guidelines/motion/code.mdx
+++ b/src/pages/guidelines/motion/code.mdx
@@ -83,9 +83,7 @@ You can configure parts of the `@carbon/motion` package with Sass Modules. For
 example, you can change the `$prefix` used by writing the following:
 
 ```scss
-@use '@carbon/motion' with (
-  $prefix: 'custom-prefix'
-);
+@use '@carbon/motion' with ($prefix: 'custom-prefix');
 ```
 
 For a full list of options that you can configure, check out the table below.
diff --git a/src/pages/guidelines/spacing/code.mdx b/src/pages/guidelines/spacing/code.mdx
index 31cf78b4c2d..04cdcac1489 100644
--- a/src/pages/guidelines/spacing/code.mdx
+++ b/src/pages/guidelines/spacing/code.mdx
@@ -78,9 +78,7 @@ Sass Modules. For example, you can change the `$base-font-size` by writing the
 following:
 
 ```scss
-@use '@carbon/layout' with (
-  $base-font-size: 18px
-);
+@use '@carbon/layout' with ($base-font-size: 18px);
 ```
 
 ## Resources
diff --git a/src/pages/guidelines/themes/code.mdx b/src/pages/guidelines/themes/code.mdx
index 146e9127577..63b9d16fed4 100644
--- a/src/pages/guidelines/themes/code.mdx
+++ b/src/pages/guidelines/themes/code.mdx
@@ -61,9 +61,7 @@ example:
 
 ```scss
 @use '@carbon/themes/scss/themes' as *;
-@use '@carbon/themes' with (
-  $theme: $g100
-);
+@use '@carbon/themes' with ($theme: $g100);
 ```
 
 Inline theming of theme switching can be done by using the mixin. For example:
@@ -93,12 +91,13 @@ Themes can also be extended with your own custom tokens:
 
 ```scss
 @use '@carbon/themes/scss/themes';
-@use '@carbon/themes' with (
-  $fallback: themes.$g100,
-  $theme: (
-    token-01: #000000,
-  )
-);
+@use '@carbon/themes' with
+  (
+    $fallback: themes.$g100,
+    $theme: (
+      token-01: #000000,
+    )
+  );
 ```
 
 ### JavaScript
diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx
index 8a9fd4647ec..dd798727f88 100755
--- a/src/pages/guidelines/themes/overview.mdx
+++ b/src/pages/guidelines/themes/overview.mdx
@@ -53,9 +53,7 @@ configure the sass module using `with`.
 
 ```scss
 @use '@carbon/react/scss/themes';
-@use '@carbon/react/scss/theme' with (
-  $theme: themes.$g100
-);
+@use '@carbon/react/scss/theme' with ($theme: themes.$g100);
 ```
 
 ## Customizing a theme
@@ -68,13 +66,14 @@ using `with` which can replace the values of the default theme or add new custom
 tokens as well.
 
 ```scss
-@use '@carbon/react/scss/theme' with (
-  $theme: (
-    background: #e2e2e2,
-    text-primary: #ffffff,
-    custom-token-01: #000000,
-  )
-);
+@use '@carbon/react/scss/theme' with
+  (
+    $theme: (
+      background: #e2e2e2,
+      text-primary: #ffffff,
+      custom-token-01: #000000,
+    )
+  );
 ```
 
 ## Tokens
diff --git a/src/pages/migrating/faq.mdx b/src/pages/migrating/faq.mdx
index 90c3bba1ed4..5e06a899f56 100644
--- a/src/pages/migrating/faq.mdx
+++ b/src/pages/migrating/faq.mdx
@@ -170,20 +170,20 @@ like so:
 @use '@carbon/react/scss/themes' as *;
 
 //overriding theme tokens and adding a custom token
-@use '@carbon/react/scss/theme' with (
-  $theme: (
-    // add a completely new token
-    custom-token: #bada44,
-    // redefine existing tokens to new values
-    text-error: rebeccapurple,
-    focus: pink,
-  )
-);
+@use '@carbon/react/scss/theme' with
+  (
+    $theme: (
+      // add a completely new token
+      custom-token: #bada44,
+      // redefine existing tokens to new values
+      text-error: rebeccapurple,
+      focus: pink,
+    )
+  );
 
 // override a component token
-@use '@carbon/react/scss/components/button/tokens' as button-tokens with (
-  $button-primary: #3f51b5
-);
+@use '@carbon/react/scss/components/button/tokens' as button-tokens with
+  ($button-primary: #3f51b5);
 @use '@carbon/react';
 
 :root {
@@ -268,10 +268,7 @@ If you were providing any configuration options before you imported Carbon you
 can now provide them using the `with` syntax:
 
 ```scss
-@use '@carbon/react' with (
-  $css--default-type: true,
-  $css--reset: true
-);
+@use '@carbon/react' with ($css--default-type: true, $css--reset: true);
 ```
 
 If you were using any feature flags in v10, you can safely remove them in v11.
diff --git a/src/pages/migrating/guide/develop.mdx b/src/pages/migrating/guide/develop.mdx
index ed82c74ac0d..2bfccb1bb3d 100644
--- a/src/pages/migrating/guide/develop.mdx
+++ b/src/pages/migrating/guide/develop.mdx
@@ -199,10 +199,7 @@ If you were providing any configuration options before you imported Carbon you
 can now provide them using the `with` syntax:
 
 ```scss
-@use '@carbon/react' with (
-  $css--default-type: true,
-  $css--reset: true
-);
+@use '@carbon/react' with ($css--default-type: true, $css--reset: true);
 ```
 
 If you were using any feature flags in v10, you can safely remove them in v11.
@@ -216,10 +213,8 @@ For cases where your projects does't need to include everything via
 ```scss
 // Configure feature flags if needed, if not these
 // lines can be removed
-@use '@carbon/react/scss/config' with (
-  $font-path: '@ibm/plex',
-  $use-flexbox-grid: 'true'
-);
+@use '@carbon/react/scss/config' with
+  ($font-path: '@ibm/plex', $use-flexbox-grid: 'true');
 
 // Emit the css reset
 @use '@carbon/react/scss/reset';
@@ -833,10 +828,7 @@ If you were providing any configuration options before you imported Carbon you
 can now provide them using the `with` syntax:
 
 ```scss
-@use '@carbon/styles' with (
-  $css--default-type: true,
-  $css--reset: true
-);
+@use '@carbon/styles' with ($css--default-type: true, $css--reset: true);
 ```
 
 For cases where your projects does't need to include everything via
@@ -844,9 +836,7 @@ For cases where your projects does't need to include everything via
 
 ```scss
 // configure feature flags if needed, if not this line can be removed
-@use '@carbon/styles/scss/config' with (
-  $font-path: '@ibm/plex'
-);
+@use '@carbon/styles/scss/config' with ($font-path: '@ibm/plex');
 
 // ensure the css reset is included
 @use '@carbon/styles/scss/reset';
@@ -925,13 +915,9 @@ Carbon's configuration to use `bx` as the prefix by writing the following:
 
 ```scss
 // Option A
-@use '@carbon/styles' with (
-  $prefix: 'bx'
-);
+@use '@carbon/styles' with ($prefix: 'bx');
 // Option B
-@use '@carbon/styles/scss/config' with (
-  $prefix: 'bx'
-);
+@use '@carbon/styles/scss/config' with ($prefix: 'bx');
 ```
 
 ### Step 5: Enable flexbox grid