chore(styles): properly handle to-rem func calls (#12152)

### Related Ticket(s)

None. Noticed in a Slack conversation.

### Description

There are many instances of using the `to-rem` utliity funcation that don't include the correct module import, hence `to-rem` makes it into compiled CSS, which invalidates the style rule.

### Changelog

**Changed**

- Corrects `to-rem` usage by `@use` the appropriate module.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/styles/scss/components/button-group/_button-group.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 @use '../../globals/vars' as *;
 @use '../lightbox-media-viewer';

packages/styles/scss/components/callout-with-media/_callout-with-media.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/callout/callout' as *;
 @use '../../internal/content-block';

packages/styles/scss/components/card-group/_card-group.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/ratio-base' as *;

packages/styles/scss/components/card-in-card/_card-in-card.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/aspect-ratio';
 @use '../../globals/utils/ratio-base' as *;

packages/styles/scss/components/card-section-offset/_card-section-offset.scss

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../card-group/card-group';
 

packages/styles/scss/components/content-block-media/_content-block-media.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-group';

packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';

packages/styles/scss/components/content-block-simple/_content-block-simple.scss

@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-item/content-item';

packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
 

packages/styles/scss/components/content-item-row/_content-item-row.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';

packages/styles/scss/components/cta-block/_cta-block.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';

packages/styles/scss/components/expressive-modal/_expressive-modal.scss

@@ -14,6 +14,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 
@@ -31,7 +32,7 @@
     .#{$prefix}--modal-container {
       padding: $spacing-05;
       grid-template-rows: 1fr;
-      min-block-size: $spacing-10 + to-rem($icon-size);
+      min-block-size: $spacing-10 + $icon-size;
 
       @include breakpoint(md) {
         padding: $spacing-07;

packages/styles/scss/components/filter-panel/_filter-panel.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/layout' as *;

packages/styles/scss/components/footer/_footer.scss

@@ -487,7 +487,7 @@
     }
 
     .#{$prefix}--list-box__menu {
-      inset-block-end: to-rem($spacing-09);
+      inset-block-end: $spacing-09;
     }
 
     .#{$prefix}--dropdown,

packages/styles/scss/components/footer/_language-selector.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/combo-box/combo-box' as *;
 @use '@carbon/styles/scss/components/list-box/list-box' as *;
 @use '@carbon/styles/scss/components/select/select' as *;

packages/styles/scss/components/global-banner/_global-banner.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../image/index';

packages/styles/scss/components/image/_image.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/colors' as *;
 @use '../lightbox-media-viewer/lightbox-media-viewer';
 

packages/styles/scss/components/leadspace-block/_leadspace-block.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/hang' as *;

packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';

packages/styles/scss/components/leadspace/_leadspace.scss

@@ -15,6 +15,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/utils/ratio-base' as *;

packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/ui-shell/header';
 @use '@carbon/styles/scss/components/ui-shell/side-nav';
 @use '@carbon/styles/scss/components/dropdown';

packages/styles/scss/components/tableofcontents/_table-of-contents.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/carbon-grid' as *;
 @use '../../globals/vars' as *;

packages/styles/scss/components/tabs-extended/_tabs-extended.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
 @use '@carbon/styles/scss/components/tabs/vars' as *;

packages/styles/scss/components/tag-link/_tag-link.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 
 @mixin tag-link {

packages/styles/scss/globals/utils/_content-width.scss

@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 // Sets the Width and Max-Width of the Card to 90% / 640px.
 @mixin content-width {

packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/utilities/convert' as *;
+
 @mixin callout-data {
   .#{$prefix}--callout-data {
     .#{$prefix}--callout {

packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss

@@ -8,6 +8,7 @@
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block"
 @warn 'Deprecated scss import for `leadspace-block`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block`';
 @use '../../../components/leadspace-block';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 @mixin leadspace-block {
   .#{$prefix}--leadspace-block {

packages/styles/scss/patterns/sections/leadspace/_leadspace.scss

@@ -7,6 +7,7 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace"
 @warn 'Deprecated scss import for `leadspace`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace`';
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../../components/leadspace';