@carbon/ibm-products 2.83.0 → 2.84.0

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 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.
@@ -7,6 +7,8 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
 
@@ -20,24 +22,24 @@
 
 .#{variables.$block-class}
   .#{variables.$block-class}__row-size-radio-button
-  .#{c4p-settings.$carbon-prefix}--radio-button__label {
+  .#{carbon-config.$prefix}--radio-button__label {
   color: $text-primary;
 }
 
 .#{variables.$block-class}
   .#{variables.$block-class}__row-size-toggle-tip
-  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  .#{carbon-config.$prefix}--popover-caret {
   background-color: $layer-02;
 }
 
 .#{variables.$block-class}
-  .#{c4p-settings.$carbon-prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
-  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  .#{carbon-config.$prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
+  .#{carbon-config.$prefix}--popover-caret {
   // Used to fix layout issue with IconButton caret inside of Popover component
   inset-inline-start: -$spacing-02;
 }
 
-.#{variables.$block-class}__row-size-toggle-tip-button.#{c4p-settings.$carbon-prefix}--toggletip-button {
+.#{variables.$block-class}__row-size-toggle-tip-button.#{carbon-config.$prefix}--toggletip-button {
   display: flex;
   justify-content: center;
   block-size: $spacing-09;
@@ -46,10 +48,10 @@
 
 // Top align cell content for xl row size
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
   td,
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
   td {
   align-items: flex-start;
   padding-block: $spacing-05;
@@ -61,34 +63,34 @@
 
 // Top align header content for xl row size
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
   th,
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
   th {
-  .#{c4p-settings.$carbon-prefix}--table-header-label {
+  .#{carbon-config.$prefix}--table-header-label {
     align-items: flex-start;
   }
 }
 
 // Top align checkbox row header for xl row size
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
   .#{variables.$block-class}__checkbox-cell
-  th.cds--table-column-checkbox {
+  th.#{carbon-config.$prefix}--table-column-checkbox {
   align-items: flex-start;
   padding-block-start: $spacing-04;
 }
 
-.#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+.#{variables.$block-class}__row-size__row-settings-trigger--open.#{carbon-config.$prefix}--btn--ghost {
   background-color: $layer-02;
 }
 
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
   td.#{variables.$block-class}__expandable-row-cell,
 .#{variables.$block-class}
-  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  table.#{carbon-config.$prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
   td.#{variables.$block-class}__expandable-row-cell {
   padding-block-start: $spacing-03;
 }

package/scss/components/Datagrid/styles/addons/_animations.scss

@@ -30,11 +30,11 @@
     inline-size: 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% {
-    inline-size: var(--panel-transform);
+    inline-size: var(--panel-transform, 320px);
     opacity: 1;
     transform: translateX(0);
   }
@@ -42,7 +42,7 @@
 
 @keyframes filter-panel-exit-left {
   0% {
-    inline-size: var(--panel-transform);
+    inline-size: var(--panel-transform, 320px);
     opacity: 1;
     transform: translateX(0);
   }
@@ -51,6 +51,6 @@
     inline-size: 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));
   }
 }

package/scss/components/DescriptionList/_description-list.scss

@@ -1,20 +1,22 @@
 //
-// 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 '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--description-list;
-$carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
+$carbon-block-class: #{carbon-config.$prefix}--structured-list;
 
 .#{$block-class} .#{$carbon-block-class} {
   margin-block-end: $spacing-07;

package/scss/components/EditInPlace/_edit-in-place.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 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,12 +8,14 @@
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '../../global/styles/project-settings' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
+@use '../../global/styles/project-settings' as *;
 
 $block-class: #{$pkg-prefix}--edit-in-place;
-$carbon-input: #{$carbon-prefix}--text-input;
+$carbon-input: #{carbon-config.$prefix}--text-input;
 
 .#{$block-class} {
   --#{$block-class}--size: #{$spacing-07};
@@ -101,12 +103,6 @@ $carbon-input: #{$carbon-prefix}--text-input;
   outline: none;
 }
 
-// .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
-// .#{$block-class}-readonly
-//   .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
-//   cursor: not-allowed;
-// }
-
 .#{$block-class}__text-input.#{$carbon-input}:focus,
 .#{$block-class}__text-input.#{$carbon-input}:active {
   outline: none;

package/scss/components/EditSidePanel/_edit-side-panel.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.
@@ -8,6 +8,8 @@
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins' as *;
 
@@ -19,11 +21,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
 $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 
 .#{$block-class} {
-  .#{c4p-settings.$carbon-prefix}--form.#{$block-class}__form {
+  .#{carbon-config.$prefix}--form.#{$block-class}__form {
     padding-block-start: $spacing-05;
   }
 
-  .#{$block-class}__form.#{c4p-settings.$carbon-prefix}--fieldset {
+  .#{$block-class}__form.#{carbon-config.$prefix}--fieldset {
     padding-block-start: $spacing-03;
   }
 
@@ -42,7 +44,7 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   }
 
   &.#{$side-panel-block-class}
-    .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
+    .#{carbon-config.$prefix}--btn.#{$side-panel-block-class}__close-button {
     display: none;
   }
 }

package/scss/components/EditTearsheet/_edit-tearsheet.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/motion';
+@use '@carbon/styles/scss/config' as carbon-config;
 
 // Standard imports.
 @use '../../global/styles/project-settings' as c4p-settings;
@@ -74,9 +75,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
   padding-block: $spacing-06;
 }
 
-.#{$block-class}
-  .#{$block-class}__content
-  .#{c4p-settings.$carbon-prefix}--css-grid {
+.#{$block-class} .#{$block-class}__content .#{carbon-config.$prefix}--css-grid {
   margin-inline-start: 0;
   padding-inline: $spacing-03;
 }
@@ -86,23 +85,23 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
 }
 
 .#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--btn-set
-  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--disabled {
+  .#{carbon-config.$prefix}--btn-set
+  .#{carbon-config.$prefix}--btn.#{carbon-config.$prefix}--btn--disabled {
   box-shadow: -0.0625rem 0 0 0 $button-separator;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
+.#{$block-class} .#{carbon-config.$prefix}--side-nav--ux {
   position: initial;
   background-color: transparent;
   inline-size: 100%;
   max-inline-size: 100%;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__link:hover {
+.#{$block-class} .#{carbon-config.$prefix}--side-nav__link:hover {
   cursor: pointer;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav__overlay-active {
+.#{$block-class} .#{carbon-config.$prefix}--side-nav__overlay-active {
   display: none;
 }
 
@@ -125,7 +124,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-edit__form--fi
   margin-block-end: $spacing-06;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--fieldset {
+.#{$block-class} .#{carbon-config.$prefix}--fieldset {
   margin-block-end: 0;
 }
 

package/scss/components/ExportModal/_export-modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// 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.
@@ -8,18 +8,20 @@
 // Standard imports.
 @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}--export-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
-  .#{c4p-settings.$carbon-prefix}--modal-content {
+.#{$block-class}.#{carbon-config.$prefix}--modal
+  .#{carbon-config.$prefix}--modal-content {
   padding-inline-end: $spacing-05;
 }
 

package/scss/components/FilterPanel/_filter-panel-accordion-item.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.
@@ -9,15 +9,16 @@
 /* stylelint-disable max-nesting-depth */
 
 // Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-accordion-item;
-$carbon: #{c4p-settings.$carbon-prefix};
+$carbon: #{carbon-config.$prefix};
 
 // Remove top and bottom borders.
 html .#{$block-class} {

package/scss/components/FilterPanel/_filter-panel-checkbox-with-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.
@@ -9,15 +9,16 @@
 /* stylelint-disable max-nesting-depth */
 
 // Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox-with-overflow;
-$carbon: #{c4p-settings.$carbon-prefix};
+$carbon: #{carbon-config.$prefix};
 
 .#{$block-class} {
   position: relative;

package/scss/components/FilterPanel/_filter-panel-checkbox.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.
@@ -8,16 +8,17 @@
 /* stylelint-disable max-nesting-depth */
 
 // Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
 $label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
-$carbon: #{c4p-settings.$carbon-prefix};
+$carbon: #{carbon-config.$prefix};
 
 // UNDO Carbon's concept that a Checkbox is always a list item (":last-of-type").
 // This also allows the TruncatedList to calculate the correct height for expanding/collapsing the list.

package/scss/components/FilterPanel/_filter-panel.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.
@@ -8,12 +8,13 @@
 /* stylelint-disable max-nesting-depth */
 
 // Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-
 @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 c4p-settings;
+@use '../../global/styles/mixins';
 
 // FilterPanel uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by FilterPanel
@@ -21,7 +22,7 @@
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel;
-$carbon: #{c4p-settings.$carbon-prefix};
+$carbon: #{carbon-config.$prefix};
 
 .#{$block-class}__title {
   @include type.type-style('body-compact-01');

package/scss/components/FilterSummary/_filter-summary.scss

@@ -1,22 +1,18 @@
 //
-// Copyright IBM Corp. 2022, 2023
+// Copyright IBM Corp. 2022, 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.
 //
-@use '../../global/styles/project-settings' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
 
-$block-class: #{$pkg-prefix}--filter-summary;
+@use '../../global/styles/project-settings' as *;
 
-@property --panel-transform {
-  inherits: true;
-  initial-value: 16px;
-  syntax: '<length>';
-}
+$block-class: #{$pkg-prefix}--filter-summary;
 
 .#{$block-class} {
   display: flex;
@@ -44,7 +40,7 @@ $block-class: #{$pkg-prefix}--filter-summary;
 }
 
 .#{$block-class}__expanded
-  .#{$block-class}__clear-all-button.#{$carbon-prefix}--btn {
+  .#{$block-class}__clear-all-button.#{carbon-config.$prefix}--btn {
   margin-inline-end: $spacing-07;
 }
 

package/scss/components/Guidebanner/_guidebanner.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.
@@ -30,6 +30,8 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 
 // Guidebanner uses the following Carbon for IBM Products components:
@@ -155,7 +157,7 @@ $purple-3: #7433e3;
 }
 
 // Button with crossroads icon
-.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--tertiary {
+.#{$block-class}__carousel .#{carbon-config.$prefix}--btn--tertiary {
   border-color: $white-0;
   color: $white-0;
 
@@ -178,7 +180,7 @@ $purple-3: #7433e3;
   }
 }
 
-.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--ghost {
+.#{$block-class}__carousel .#{carbon-config.$prefix}--btn--ghost {
   color: $blue-30;
   margin-inline-start: calc(-1 * $spacing-05);
 

package/scss/components/ImportModal/_import-modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// 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,34 +9,34 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+.#{$block-class} .#{carbon-config.$prefix}--modal-close {
   display: none;
 }
 
 .#{$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
-  .#{c4p-settings.$carbon-prefix}--modal-content {
+.#{$block-class}.#{carbon-config.$prefix}--modal
+  .#{carbon-config.$prefix}--modal-content {
   padding-inline-end: $spacing-05;
 }
 
-.#{c4p-settings.$carbon-prefix}--file
-  .#{c4p-settings.$carbon-prefix}--file-container,
-.#{c4p-settings.$carbon-prefix}--file
-  ~ .#{c4p-settings.$carbon-prefix}--file-container {
+.#{carbon-config.$prefix}--file .#{carbon-config.$prefix}--file-container,
+.#{carbon-config.$prefix}--file ~ .#{carbon-config.$prefix}--file-container {
   margin-block-start: 0;
 }
 
-.#{c4p-settings.$carbon-prefix}--modal-container--sm
-  .#{c4p-settings.$carbon-prefix}--modal-header {
+.#{carbon-config.$prefix}--modal-container--sm
+  .#{carbon-config.$prefix}--modal-header {
   padding-inline-end: calc(20% - #{$spacing-05});
 }
 
@@ -44,7 +44,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
   display: flex;
 }
 
-.#{$block-class}__import-button.#{c4p-settings.$carbon-prefix}--btn {
+.#{$block-class}__import-button.#{carbon-config.$prefix}--btn {
   margin-inline-start: $spacing-03;
 }
 
@@ -68,15 +68,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--import-modal;
   padding-inline-end: calc(20% - #{$spacing-05});
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--file__selected-file {
+.#{$block-class} .#{carbon-config.$prefix}--file__selected-file {
   background: $layer-02;
   max-inline-size: none;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--file {
+.#{$block-class} .#{carbon-config.$prefix}--file {
   margin-block-end: $spacing-05;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--text-input:disabled {
+.#{$block-class} .#{carbon-config.$prefix}--text-input:disabled {
   background: $layer-02;
 }

package/scss/components/InterstitialScreen/_interstitial-screen.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.
@@ -9,13 +9,15 @@
 /* stylelint-disable declaration-no-important */
 
 // Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config' as carbon-config;
+
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
 
 // InterstitialScreen uses the following Carbon for IBM Products components:
 @use '../Carousel/carousel';
@@ -126,7 +128,7 @@ $one-grid-column: calc(100% / 16);
       max-inline-size: none;
       padding-inline-start: $spacing-07;
     }
-    .#{c4p-settings.$carbon-prefix}--inline-loading {
+    .#{carbon-config.$prefix}--inline-loading {
       position: absolute;
       inline-size: $spacing-07;
       inset-block-start: 0;