@carbon/ibm-products 2.83.0 → 2.84.0

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -11,9 +11,11 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/type/scss/font-family' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/config' as carbon-config;
 @use '@carbon/styles/scss/utilities';
 
+@use '../../global/styles/project-settings' as c4p-settings;
+
 // NotificationsPanel uses the following IBM Products components:
 // NotificationsEmptyState
 @use '../EmptyStates/empty-state';
@@ -96,6 +98,10 @@ $block-size: 38.5rem;
   border-block-end: 1px solid $border-subtle-02;
   border-inline-start: 1px solid $border-subtle-02;
   box-shadow: 0 $spacing-01 $spacing-02 $overlay;
+  clip-path: inset(
+    0 calc(-1 * var(--cds-spacing-01)) calc(-1 * var(--cds-spacing-02))
+      calc(-1 * var(--cds-spacing-01))
+  );
   color: $text-primary;
   inset-block-start: $spacing-09;
   inset-inline-end: 0;
@@ -120,7 +126,7 @@ $block-size: 38.5rem;
     .#{$block-class}__do-not-disturb-toggle {
       padding-block-end: $spacing-03;
 
-      .#{c4p-settings.$carbon-prefix}--toggle__label-text {
+      .#{carbon-config.$prefix}--toggle__label-text {
         @include utilities.visually-hidden;
       }
     }
@@ -236,7 +242,7 @@ $block-size: 38.5rem;
         padding: 0;
         min-inline-size: 5.5rem;
 
-        .#{c4p-settings.$carbon-prefix}--btn__icon {
+        .#{carbon-config.$prefix}--btn__icon {
           // stylelint-disable-next-line carbon/motion-easing-use
           transition: transform $duration-moderate-02 ease;
           /* stylelint-disable-next-line max-nesting-depth */
@@ -245,18 +251,18 @@ $block-size: 38.5rem;
           }
         }
         &.#{$block-class}__notification-read-more-button {
-          .#{c4p-settings.$carbon-prefix}--btn__icon {
+          .#{carbon-config.$prefix}--btn__icon {
             transform: rotate(0deg);
           }
         }
         &.#{$block-class}__notification-read-less-button {
-          .#{c4p-settings.$carbon-prefix}--btn__icon {
+          .#{carbon-config.$prefix}--btn__icon {
             transform: rotate(180deg);
           }
         }
       }
     }
-    .#{c4p-settings.$carbon-prefix}--popover-container {
+    .#{carbon-config.$prefix}--popover-container {
       position: initial;
     }
     .#{$block-class}__dismiss-single-button {
@@ -342,8 +348,7 @@ $block-size: 38.5rem;
       min-block-size: 2.5rem;
       min-inline-size: 2.5rem;
     }
-    .#{$block-class}__settings-button
-      .#{c4p-settings.$carbon-prefix}--btn__icon {
+    .#{$block-class}__settings-button .#{carbon-config.$prefix}--btn__icon {
       margin: 0;
     }
   }

package/scss/components/OptionsTile/_options-tile.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 2025
 //
 // 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,8 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins' as *;
 
@@ -42,12 +44,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__toggle
-  .#{c4p-settings.$carbon-prefix}--toggle-input__label
-  .#{c4p-settings.$carbon-prefix}--toggle__switch {
+  .#{carbon-config.$prefix}--toggle-input__label
+  .#{carbon-config.$prefix}--toggle__switch {
   margin: 0;
 }
 
-.#{$block-class}__toggle .#{c4p-settings.$carbon-prefix}--toggle__label-text {
+.#{$block-class}__toggle .#{carbon-config.$prefix}--toggle__label-text {
   @include visually-hidden;
 }
 
@@ -153,8 +155,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__content
-  > .#{c4p-settings.$carbon-prefix}--fieldset
-  > .#{c4p-settings.$carbon-prefix}--label:empty {
+  > .#{carbon-config.$prefix}--fieldset
+  > .#{carbon-config.$prefix}--label:empty {
   display: none;
 }
 

package/scss/components/PageHeader/_page-header.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2023
+// Copyright IBM Corp. 2020, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -13,7 +13,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/utilities';
-@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 
 // Standard imports.
 @use '../../global/styles/project-settings' as *;
@@ -329,18 +329,19 @@ $duration: 1000ms;
     }
   }
 
-  .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item {
+  .#{$block-class}__breadcrumb .#{carbon-config.$prefix}--breadcrumb-item {
     margin-inline-end: $spacing-02;
   }
 
-  .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item::after {
+  .#{$block-class}__breadcrumb
+    .#{carbon-config.$prefix}--breadcrumb-item::after {
     margin-inline-start: $spacing-02;
   }
 
-  .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item,
+  .#{$block-class}__breadcrumb .#{carbon-config.$prefix}--breadcrumb-item,
   .#{$block-class}__breadcrumb
-    .#{$carbon-prefix}--breadcrumb-item
-    .#{$carbon-prefix}--link {
+    .#{carbon-config.$prefix}--breadcrumb-item
+    .#{carbon-config.$prefix}--link {
     @include type.type-style('label-01');
   }
 
@@ -505,8 +506,8 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__page-actions
-    .#{$carbon-prefix}--btn-set
-    .#{$carbon-prefix}--btn {
+    .#{carbon-config.$prefix}--btn-set
+    .#{carbon-config.$prefix}--btn {
     inline-size: initial;
   }
 
@@ -564,14 +565,15 @@ $duration: 1000ms;
     @include type.type-style('body-01');
   }
 
-  .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term {
+  .#{$block-class}__subtitle-tooltip
+    .#{carbon-config.$prefix}--definition-term {
     border-block-end: 0;
     letter-spacing: inherit;
   }
 
   // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the header
   .#{$block-class}__subtitle-tooltip
-    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
+    .#{carbon-config.$prefix}--popover-content.#{carbon-config.$prefix}--definition-tooltip {
     max-inline-size: fit-content;
   }
 
@@ -606,13 +608,13 @@ $duration: 1000ms;
     flex-wrap: wrap-reverse;
     margin-block-start: 0;
 
-    .#{$carbon-prefix}--content-switcher {
+    .#{carbon-config.$prefix}--content-switcher {
       box-sizing: content-box;
       padding-block-end: $spacing-05;
     }
   }
 
-  .#{$block-class}__navigation-row .#{$carbon-prefix}--tab-content {
+  .#{$block-class}__navigation-row .#{carbon-config.$prefix}--tab-content {
     display: none; /* need to figure out how to handle the tab content */
   }
 
@@ -658,7 +660,8 @@ $duration: 1000ms;
     text-align: initial;
   }
 
-  .#{$block-class}__navigation-row .#{$carbon-prefix}--content-switcher-btn {
+  .#{$block-class}__navigation-row
+    .#{carbon-config.$prefix}--content-switcher-btn {
     background-color: $background;
   }
 
@@ -669,7 +672,8 @@ $duration: 1000ms;
     inset-inline-end: 0;
   }
 
-  .#{$block-class}__collapse-expand-toggle .#{$carbon-prefix}--btn__icon {
+  .#{$block-class}__collapse-expand-toggle
+    .#{carbon-config.$prefix}--btn__icon {
     // transform: rotate(-90deg); // accordion does this, but it feels odd in page header
     transition: all $duration-slow-01 motion(standard, productive);
   }
@@ -691,18 +695,18 @@ $duration: 1000ms;
   inset-block-start: var(--#{$block-class}--tagset-tooltip-offset) !important;
 }
 
-.#{$block-class}__navigation-tags-overflow.#{$carbon-prefix}--tooltip {
+.#{$block-class}__navigation-tags-overflow.#{carbon-config.$prefix}--tooltip {
   z-index: $z-index-header-minus;
 }
 
-.#{$block-class}__action-bar-menu-options.#{$carbon-prefix}--overflow-menu-options,
-.#{$carbon-prefix}--breadcrumb-menu-options.#{$carbon-prefix}--overflow-menu-options,
-.#{$block-class}__button-set-menu-options.#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class}__action-bar-menu-options.#{carbon-config.$prefix}--overflow-menu-options,
+.#{carbon-config.$prefix}--breadcrumb-menu-options.#{carbon-config.$prefix}--overflow-menu-options,
+.#{$block-class}__button-set-menu-options.#{carbon-config.$prefix}--overflow-menu-options {
   z-index: $z-index-header-minus;
 }
 
 .#{$block-class}__button-set-menu-options
-  > button.#{$carbon-prefix}--menu-button__trigger {
+  > button.#{carbon-config.$prefix}--menu-button__trigger {
   min-inline-size: 0;
 }
 
@@ -787,7 +791,7 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__breadcrumb__content-actions {
-    inline-size: fit-content;
+    inline-size: 100%;
     margin-inline-end: $spacing-04;
   }
 

package/scss/components/RemoveModal/_remove-modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,17 +7,18 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--remove-modal;
 
 .#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--modal-footer
-  .#{c4p-settings.$carbon-prefix}--btn {
+  .#{carbon-config.$prefix}--modal-footer
+  .#{carbon-config.$prefix}--btn {
   max-inline-size: none;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
+.#{$block-class} .#{carbon-config.$prefix}--modal-content {
   padding-inline-end: $spacing-05;
 }
 

package/scss/components/Saving/_saving.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 2025
 //
 // 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,8 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--saving;
@@ -34,7 +36,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--saving;
 }
 
 .#{$block-class}__buttons
-  .#{c4p-settings.$carbon-prefix}--btn
-  .#{c4p-settings.$carbon-prefix}--inline-loading {
+  .#{carbon-config.$prefix}--btn
+  .#{carbon-config.$prefix}--inline-loading {
   min-block-size: auto;
 }

package/scss/components/SearchBar/_search-bar.scss

@@ -1,16 +1,17 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 // Standard imports.
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/styles/scss/utilities' as *;
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--search-bar;
 
@@ -19,7 +20,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--search-bar;
   display: flex;
 
   .#{c4p-settings.$pkg-prefix}--search-bar__scopes {
-    .#{c4p-settings.$carbon-prefix}--label {
+    .#{carbon-config.$prefix}--label {
       position: absolute;
     }
   }

package/scss/components/SidePanel/_animations.scss

@@ -29,7 +29,7 @@
   0% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
+    transform: translateX(var(--panel-transform, 320px));
   }
 
   100% {
@@ -42,7 +42,7 @@
   0% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 
   100% {
@@ -60,7 +60,7 @@
   100% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
+    transform: translateX(var(--panel-transform, 320px));
   }
 }
 
@@ -73,6 +73,6 @@
   100% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 }

package/scss/components/SidePanel/_side-panel.scss

@@ -1,4 +1,3 @@
-//cspell: disable
 //
 // Copyright IBM Corp. 2020, 2025
 //
@@ -6,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:list';
 @use 'sass:map';
 
 // Other Carbon settings.
@@ -16,7 +16,8 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/utilities';
-@use '@carbon-labs/react-resizer/scss/resizer';
+@use '@carbon/styles/scss/config' as carbon-config;
+@use '@carbon-labs/react-resizer/scss/resizer' as resizer;
 @use '@carbon/styles/scss/components/button/tokens' as *;
 
 // Standard imports.
@@ -31,7 +32,7 @@
 
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
-$clabs-prefix: 'clabs';
+$clabs-prefix: resizer.$prefix;
 
 @property --panel-transform {
   inherits: true;
@@ -82,7 +83,6 @@ $clabs-prefix: 'clabs';
   background-color: $layer-01;
   block-size: calc(100% - 3rem);
   color: $text-primary;
-
   /* if the title does not scroll then we have a child scrolling section. */
   grid-template-rows: auto 1fr auto; /* titles content and actions */
   inset-block-start: $spacing-09;
@@ -93,6 +93,7 @@ $clabs-prefix: 'clabs';
   transition-behavior: allow-discrete;
   transition-duration: $duration-moderate-01;
   transition-property: display, opacity, transform;
+
   &:not(.#{$block-class}--slide-in) {
     // enableSidepanelResizer flag class
     &.#{$block-class}--enable-sidepanel-resizer {
@@ -301,9 +302,9 @@ $clabs-prefix: 'clabs';
     }
 
     &:has(
-        .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+        .#{$block-class}__navigation-back-button.#{carbon-config.$prefix}--btn--md
       ),
-    &.#{$block-class}__header--has-navigation-back.#{c4p-settings.$carbon-prefix}--btn--md {
+    &.#{$block-class}__header--has-navigation-back.#{carbon-config.$prefix}--btn--md {
       padding-block-start: $spacing-08;
     }
 
@@ -335,7 +336,7 @@ $clabs-prefix: 'clabs';
     }
 
     &.#{$block-class}__header--on-detail-step
-      .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      .#{$block-class}__navigation-back-button.#{carbon-config.$prefix}--btn--md
       ~ .#{$block-class}__collapsed-title-text {
       inset-block-start: $spacing-06;
     }
@@ -490,14 +491,14 @@ $clabs-prefix: 'clabs';
     margin-inline-end: $spacing-03;
   }
 
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
+  .#{carbon-config.$prefix}--btn.#{$block-class}__navigation-back-button {
     position: fixed;
     z-index: 5;
     inset-block-start: 0;
     inset-inline-start: 0;
   }
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
+  .#{carbon-config.$prefix}--btn.#{$block-class}__navigation-back-button,
+  .#{carbon-config.$prefix}--btn.#{$block-class}__close-button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -518,8 +519,8 @@ $clabs-prefix: 'clabs';
     }
   }
 
-  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__navigation-back-button,
-  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__close-button {
+  .#{carbon-config.$prefix}--btn--md.#{$block-class}__navigation-back-button,
+  .#{carbon-config.$prefix}--btn--md.#{$block-class}__close-button {
     block-size: $spacing-08;
     inline-size: $spacing-08;
   }
@@ -533,6 +534,7 @@ $clabs-prefix: 'clabs';
     block-size: $spacing-07;
     inset-block-start: 0;
     inset-inline-end: 0;
+
     /* stylelint-disable-next-line max-nesting-depth */
     @media (prefers-reduced-motion) {
       position: absolute;
@@ -566,6 +568,23 @@ $clabs-prefix: 'clabs';
       block-size: var(--#{$block-class}--actions-height);
     }
   }
+  &.#{$block-class}.#{$block-class}--xs
+    .#{$block-class}__actions-container.#{$action-set-block-class}--sm {
+    @include setPanelSize(map.get($side-panel-sizes, xs));
+  }
+}
+
+// form fields should receive correct background color
+.#{$block-class} .#{carbon-config.$prefix}--text-input,
+.#{$block-class} .#{carbon-config.$prefix}--text-area,
+.#{$block-class} .#{carbon-config.$prefix}--search-input,
+.#{$block-class} .#{carbon-config.$prefix}--select-input,
+.#{$block-class} .#{carbon-config.$prefix}--multi-select,
+.#{$block-class} .#{carbon-config.$prefix}--dropdown,
+.#{$block-class} .#{carbon-config.$prefix}--dropdown-list,
+.#{$block-class} .#{carbon-config.$prefix}--number input[type='number'],
+.#{$block-class} .#{carbon-config.$prefix}--date-picker__input {
+  background-color: $field-02;
 }
 
 @keyframes side-panel-overlay-entrance {

package/scss/components/SimpleHeader/_simple-header.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2023, 2023
+// Copyright IBM Corp. 2023, 2025
 //
 // 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/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 @use '../../global/styles/project-settings' as *;
 
@@ -29,9 +30,9 @@ $block-class: #{$pkg-prefix}--simple-header;
   margin-block-start: $spacing-02;
 }
 
-.#{$block-class}__breadcrumbs .#{$carbon-prefix}--breadcrumb-item,
+.#{$block-class}__breadcrumbs .#{carbon-config.$prefix}--breadcrumb-item,
 .#{$block-class}__breadcrumbs
-  .#{$carbon-prefix}--breadcrumb-item
-  .#{$carbon-prefix}--link {
+  .#{carbon-config.$prefix}--breadcrumb-item
+  .#{carbon-config.$prefix}--link {
   @include type.type-style('label-01');
 }

package/scss/components/StatusIcon/_status-icon.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 2025
 //
 // 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,8 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as *;
 
 $colors: (
@@ -115,9 +117,9 @@ $block-class: #{$pkg-prefix}--status-icon;
 @each $theme in $themes {
   @each $icon in $icons {
     @each $theme-key in $themes {
-      .#{$carbon-prefix}--btn--ghost:not([disabled])
+      .#{carbon-config.$prefix}--btn--ghost:not([disabled])
         .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
-      .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger
+      .#{carbon-config.$prefix}--btn.#{carbon-config.$prefix}--btn--icon-only.#{carbon-config.$prefix}--tooltip__trigger
         .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
       .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
         @if $icon == in-progress {

package/scss/components/StatusIndicator/_status-indicator.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -19,6 +19,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--status-indicator;
@@ -70,7 +71,7 @@ $block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
   margin-inline-end: 0;
 }
 .#{$block-class-step}--active
-  .#{c4p-settings.$carbon-prefix}--inline-loading__animation {
+  .#{carbon-config.$prefix}--inline-loading__animation {
   margin-inline-end: to-rem(7px);
 }
 // /Override

package/scss/components/StringFormatter/_string-formatter.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
 // or
@@ -20,7 +21,7 @@
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--string-formatter;
-$popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
+$popover-block-class: #{carbon-config.$prefix}--popover;
 
 .#{$block-class} {
   display: inline-block;
@@ -34,12 +35,12 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
     word-break: break-word;
   }
 
-  button.cds--definition-term {
+  button.#{carbon-config.$prefix}--definition-term {
     border-block-end: none;
     letter-spacing: inherit;
   }
 
-  .cds--popover-container {
+  .#{carbon-config.$prefix}--popover-container {
     display: flex;
   }
 }

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2024, 2024
+// Copyright IBM Corp. 2024, 2025
 //
 // 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/breakpoint' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -126,13 +127,13 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--tag
-    .#{$carbon-prefix}--tag {
+    .#{carbon-config.$prefix}--tag {
     background-color: $background-inverse-hover;
   }
 
   .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default,
   .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default
-    .#{$carbon-prefix}--tag {
+    .#{carbon-config.$prefix}--tag {
     @include type.type-style('body-compact-01');
 
     display: block;
@@ -146,12 +147,12 @@ $block-class-modal: #{$block-class}-modal;
     min-inline-size: initial;
   }
 
-  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon {
-    // undo override by .#{$carbon-prefix}--tooltip button
+  .#{$block-class-popover}__tag .#{carbon-config.$prefix}--tag__close-icon {
+    // undo override by .#{carbon-config.$prefix}--tooltip button
     padding: 0;
   }
 
-  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag--high-contrast {
+  .#{$block-class-popover}__tag .#{carbon-config.$prefix}--tag--high-contrast {
     background-color: $background;
     color: $text-primary;
   }