@carbon/ibm-products 2.54.0-canary.6 → 2.54.0-canary.64

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -89,7 +89,7 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     text-overflow: ellipsis;
   }
 }
-
-.#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
-  z-index: utilities.z('header');
+.#{$_block-class}__overflow-menu {
+  /* stylelint-disable-next-line carbon/type-use */
+  line-height: 0;
 }

package/scss/components/Card/_card.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// NOTE: Please do not remove the duplicate `slug` and `ai-label` classes. We need both until slug is fully deprecated
+// NOTE: Please do not remove the duplicate `slug` and `decorator` classes. We need both until slug is fully deprecated
 
 // Standard imports.
 @use '@carbon/styles/scss/theme' as *;
@@ -144,25 +144,39 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   position: relative;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--ai-label {
   position: absolute;
   top: $spacing-05;
   right: $spacing-05;
 }
 
+.#{$block-class}__header__inner-wrapper--decorator {
+  position: absolute;
+  top: $spacing-05;
+  right: $spacing-05;
+
+  .#{c4p-settings.$carbon-prefix}--slug,
+  .#{c4p-settings.$carbon-prefix}--ai-label {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+}
+
 .#{$block-class}__header-container--has-slug,
-.#{$block-class}__header-container--has-ai-label {
+.#{$block-class}__header-container--has-decorator {
   width: 100%;
   padding-right: $spacing-07;
 }
 
 .#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions,
-.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--has-actions {
+.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--has-actions {
   padding-right: $spacing-08;
 }
 
 .#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label,
-.#{$block-class}__header-container--has-ai-label.#{$block-class}__header-container--large-tile-or-label {
+.#{$block-class}__header-container--has-decorator.#{$block-class}__header-container--large-tile-or-label {
   padding-right: $spacing-09;
 }
 

package/scss/components/Coachmark/_coachmark-overlay.scss

@@ -7,8 +7,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable carbon/layout-token-use */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable declaration-no-important */
 
 // Standard imports.

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -6,7 +6,7 @@
 //
 
 /* stylelint-disable max-nesting-depth */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable declaration-no-important */
 
 // Standard imports.

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable carbon/motion-easing-use */
 /* stylelint-disable max-nesting-depth */
 //
@@ -44,7 +44,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
         width: $spacing-04;
         height: $spacing-04;
         border-radius: 50%;
-        /* stylelint-disable-next-line carbon/theme-token-use */
+        /* stylelint-disable-next-line carbon/theme-use */
         background-color: $blue-50;
         content: '';
       }
@@ -61,7 +61,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
           height: 18px;
           border-radius: 100%;
           content: '';
-          /* stylelint-disable-next-line carbon/theme-token-use */
+          /* stylelint-disable-next-line carbon/theme-use */
           outline: $spacing-01 $focus solid;
         }
       }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -68,12 +68,12 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     visibility: visible;
 
     &__light {
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       background-color: $gray-90;
     }
 
     &__dark {
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       background-color: $button-tertiary-active;
     }
   }

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -26,7 +26,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   z-index: -1;
   opacity: 0;
   pointer-events: none;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   transform: translateX($translateValue);
   transition: all $duration-fast-02 motion(standard, productive);
 }
@@ -204,24 +204,24 @@ $colors: (
   //this is to select and add color to the new group preview
   .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
     button {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     $next-group-color: list.nth($colors, (($i%list.length($colors)) + 1));
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
   }
 
   //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
   @for $el-index from 1 through 50 {
     $item-index: $el-index;
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     $item-index: ((($item-index - 1) % $group-colors-length) + 1);
     #{$selector} {
       @if $item-index != 1 {
-        /* stylelint-disable-next-line carbon/theme-token-use */
+        /* stylelint-disable-next-line carbon/theme-use */
         --#{$block-class}__condition-wrapper-color: #{list.nth(
             $group-colors,
             $item-index
-          )}; // stylelint-disable-line carbon/theme-token-use
+          )}; // stylelint-disable-line carbon/theme-use
       }
     }
 
@@ -248,7 +248,7 @@ $colors: (
       .#{$block-class}__add-button,
       .#{$block-class}__add-condition-sub-group
     ) {
-    /* stylelint-disable-next-line carbon/theme-token-use */
+    /* stylelint-disable-next-line carbon/theme-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
 }

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -16,7 +16,7 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
 @keyframes influencer-menu-entrance {
   0% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateX($influencerAnimationStart);
   }
 
@@ -33,7 +33,7 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
 
   100% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateX($influencerAnimationStart);
   }
 }

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -24,8 +24,7 @@
 @keyframes step-content-entrance {
   0% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-0.75rem);
+    transform: translateY(-$spacing-04);
   }
 
   100% {

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -133,7 +133,7 @@ $header-cell-background: $layer-accent-01;
     overflow: hidden;
     min-width: initial;
     min-height: initial;
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
     margin: 0;
     background-color: $body-cell-background;
@@ -158,7 +158,7 @@ $header-cell-background: $layer-accent-01;
     overflow: hidden;
     width: fit-content;
     max-width: var(--#{$block-class}--total-width);
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
     visibility: hidden;
 
@@ -177,10 +177,10 @@ $header-cell-background: $layer-accent-01;
     overflow: hidden;
     // Could be fixed by using border-right but the fact that
     // this element is positioned absolute prevents that from working
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     padding-right: calc(#{$spacing-03} - 1px);
     padding-bottom: $spacing-01;
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     padding-left: calc(#{$spacing-03} - #{$spacing-01});
     border: $spacing-01 solid $background-brand;
     background-color: $body-cell-background;

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -44,7 +44,7 @@
 
       .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
         position: sticky;
-        z-index: 1;
+        z-index: 10;
         left: 0;
       }
     }
@@ -57,7 +57,7 @@
 
     td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
     th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-      /* stylelint-disable-next-line carbon/layout-token-use */
+      /* stylelint-disable-next-line carbon/layout-use */
       padding-top: 0.6875rem;
 
       &.#{$block-class}__checkbox-cell {
@@ -158,7 +158,6 @@
 
 /* This section to be removed after support for slug dropped  - start */
 .#{$block-class} th.#{$block-class}__with-slug {
-  /* stylelint-disable-next-line carbon/theme-token-use */
   box-shadow: inset 0 1px $ai-border-strong;
 }
 
@@ -185,7 +184,7 @@
   .#{c4p-settings.$carbon-prefix}--data-table
   tbody
   tr.#{$block-class}__slug--row {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   box-shadow: inset 1px 0 $ai-border-strong;
 }
 
@@ -232,7 +231,6 @@
 /* This section to be removed after support for slug dropped  - end */
 
 .#{$block-class} th.#{$block-class}__with-ai-label {
-  /* stylelint-disable-next-line carbon/theme-token-use */
   box-shadow: inset 0 1px $ai-border-strong;
 }
 
@@ -259,7 +257,6 @@
   .#{c4p-settings.$carbon-prefix}--data-table
   tbody
   tr.#{$block-class}__ai-label--row {
-  /* stylelint-disable-next-line carbon/theme-token-use */
   box-shadow: inset 1px 0 $ai-border-strong;
 }
 
@@ -413,17 +410,27 @@
     }
   }
 
-  .#{$block-class}__carbon-row td {
+  .#{$block-class}__carbon-row .#{$block-class}__left-sticky-column-cell,
+  .#{$block-class}__carbon-row .#{$block-class}__right-sticky-column-cell,
+  .#{$block-class}__carbon-row .#{$block-class}__checkbox-cell-sticky-left {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: $layer-01;
   }
 
-  .#{$block-class}__carbon-row:hover td {
+  .#{$block-class}__carbon-row:hover .#{$block-class}__left-sticky-column-cell,
+  .#{$block-class}__carbon-row:hover .#{$block-class}__right-sticky-column-cell,
+  .#{$block-class}__carbon-row:hover
+    .#{$block-class}__checkbox-cell-sticky-left {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: $layer-hover-01;
   }
 
-  .#{c4p-settings.$carbon-prefix}--data-table--selected td {
+  .#{c4p-settings.$carbon-prefix}--data-table--selected
+    .#{$block-class}__left-sticky-column-cell,
+  .#{c4p-settings.$carbon-prefix}--data-table--selected
+    .#{$block-class}__right-sticky-column-cell,
+  .#{c4p-settings.$carbon-prefix}--data-table--selected
+    .#{$block-class}__checkbox-cell-sticky-left {
     /* stylelint-disable-next-line declaration-no-important */
     background-color: $layer-selected-01;
   }
@@ -522,7 +529,7 @@
 }
 
 .#{$block-class}__resizableColumn:hover {
-  background-color: $background-selected-hover;
+  background-color: $layer-selected-hover;
 
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $border-strong-01;
@@ -562,7 +569,7 @@
 
   &.#{$block-class}__select-all-sticky-left {
     position: sticky;
-    z-index: 1;
+    z-index: 10;
     left: 0;
     background-color: $layer-accent-01;
   }
@@ -667,9 +674,9 @@
   &.#{$block-class}__carbon-row-expanded-hover-active::before {
     position: absolute;
     z-index: 2;
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     top: var(--#{$block-class}--row-height);
-    /* stylelint-disable-next-line carbon/layout-token-use */
+    /* stylelint-disable-next-line carbon/layout-use */
     left: calc(
       var(--#{$block-class}--indicator-offset-amount) + #{$spacing-05}
     );
@@ -939,7 +946,7 @@
   .#{$block-class}__col-resizer-range:focus
   + .#{$block-class}__col-resize-indicator::after {
   position: absolute;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   top: calc(var(--#{$block-class}--row-height) - 20px);
   right: $spacing-02;
   width: 1px;

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -35,7 +35,7 @@
   width: 100%;
   height: $spacing-09;
   border: 2px dashed $focus;
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   background-color: colors.$blue-10; // not good in dark mode
 }
 
@@ -82,7 +82,7 @@
   width: 100%;
   align-items: center;
   padding-left: $spacing-05;
-  /* stylelint-disable-next-line carbon/type-token-use */
+  /* stylelint-disable-next-line carbon/type-use */
   line-height: 1; // center align text within row
   transition-property: opacity;
 }

package/scss/components/Datagrid/styles/_useColumnRightAlign.scss

@@ -18,7 +18,7 @@
 
 .#{variables.$block-class}__right-align-cell-renderer {
   width: 100%;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   padding-right: 23px;
   text-align: right;
 }

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -24,7 +24,7 @@
 .#{variables.$block-class}
   .#{variables.$block-class}__expanded-row-content::before {
   position: absolute;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   top: -1px;
   right: 0;
   width: calc(100% - #{$spacing-09});

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -54,7 +54,7 @@ $row-heights: (
 }
 
 @mixin input-outline($color: $focus) {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   outline: $spacing-01 solid $color;
   outline-offset: calc(-1 * #{$spacing-01});
 

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -42,7 +42,7 @@
   tr.#{$block-class}__carbon-nested-row
   + :not(tr.#{$block-class}__carbon-nested-row)::after {
   position: absolute;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   top: -1px;
   left: 0;
   width: 100%;
@@ -91,7 +91,7 @@
   td.#{$block-class}__expandable-row-cell
   + td::before {
   position: absolute;
-  /* stylelint-disable-next-line carbon/layout-token-use */
+  /* stylelint-disable-next-line carbon/layout-use */
   bottom: -1px;
   left: 0;
   width: 1rem;

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -36,7 +36,7 @@
 .#{variables.$block-class}__left-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
-  z-index: 1;
+  z-index: 10;
   left: 0;
   border-right: 1px solid $border-subtle;
 }
@@ -67,6 +67,6 @@
 
 .#{variables.$block-class}__select-all-toggle-on.#{variables.$block-class}__select-all-sticky-left {
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   left: 0;
 }

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// stylelint-disable carbon/layout-token-use
+// stylelint-disable carbon/layout-use
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing';

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// stylelint-disable carbon/layout-token-use
+// stylelint-disable carbon/layout-use
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/layout/scss/convert' as *;

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

@@ -41,7 +41,7 @@
   position: relative;
   z-index: 0;
   overflow: auto;
-  padding: 0 $spacing-05 $spacing-10 $spacing-05;
+  padding: 0 $spacing-05 $spacing-10;
   overscroll-behavior: contain;
 }
 

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

@@ -32,8 +32,7 @@
   .#{c4p-settings.$carbon-prefix}--popover--bottom-right.#{variables.$block-class}__row-height-settings-popover
   .#{c4p-settings.$carbon-prefix}--popover-caret {
   // Used to fix layout issue with IconButton caret inside of Popover component
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  left: -4px;
+  left: -$spacing-02;
 }
 
 .#{variables.$block-class}__row-size-toggle-tip-button.#{c4p-settings.$carbon-prefix}--toggletip-button {

package/scss/components/DecoratorBase/_decorator-base-mixins.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 
 @use '@carbon/styles/scss/theme' as *;
 

package/scss/components/DecoratorBase/_decorator-base.scss

@@ -1,6 +1,6 @@
-/* stylelint-disable carbon/theme-token-use */
-/* stylelint-disable carbon/type-token-use */
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/theme-use */
+/* stylelint-disable carbon/type-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable function-no-unknown */
 
 //

package/scss/components/DecoratorDualButton/_decorator-dual-button.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable function-no-unknown */
 
 //

package/scss/components/DecoratorSingleButton/_decorator-single-button.scss

@@ -1,5 +1,5 @@
 /* stylelint-disable function-no-unknown */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/theme-use */
 
 //
 // Copyright IBM Corp. 2024, 2024

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

@@ -29,8 +29,7 @@
 @keyframes form-content-entrance {
   0% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-0.75rem);
+    transform: translateY(-$spacing-04);
   }
 
   100% {

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -31,11 +31,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
     .#{c4p-settings.$pkg-prefix}--card__header,
     .#{c4p-settings.$pkg-prefix}--card__footer {
       button {
-        // stylelint-disable-next-line carbon/theme-token-use
+        // stylelint-disable-next-line carbon/theme-use
         color: $white-0;
 
         &:hover {
-          // stylelint-disable-next-line carbon/theme-token-use
+          // stylelint-disable-next-line carbon/theme-use
           background-color: $blue-60-hover;
         }
 
@@ -45,7 +45,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
 
         svg {
           path {
-            // stylelint-disable-next-line carbon/theme-token-use
+            // stylelint-disable-next-line carbon/theme-use
             fill: $white-0;
           }
         }
@@ -59,9 +59,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
     }
 
     .#{c4p-settings.$pkg-prefix}--card__footer {
-      // stylelint-disable-next-line carbon/theme-token-use
+      // stylelint-disable-next-line carbon/theme-use
       background-color: $blue-60;
-      // stylelint-disable-next-line carbon/theme-token-use
+      // stylelint-disable-next-line carbon/theme-use
       color: $white-0;
     }
 
@@ -85,9 +85,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
   &:not(.#{$block-class}__actions-bottom) {
     &##{$block-class}--edit {
       .#{c4p-settings.$pkg-prefix}--card__header {
-        // stylelint-disable-next-line carbon/theme-token-use
+        // stylelint-disable-next-line carbon/theme-use
         background-color: $blue-60;
-        // stylelint-disable-next-line carbon/theme-token-use
+        // stylelint-disable-next-line carbon/theme-use
         color: $white-0;
       }
     }

package/scss/components/FullPageError/_full-page-error.scss

@@ -49,7 +49,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
   height: 100%;
   padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
   @include breakpoint(md) {
-    padding: auto $spacing-03 $spacing-11 $spacing-03;
+    padding: auto $spacing-03 $spacing-11;
   }
 }
 

package/scss/components/GetStartedCard/_get-started-card.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable max-nesting-depth */
 //
 // Copyright IBM Corp. 2024, 2024

package/scss/components/Guidebanner/_guidebanner.scss

@@ -15,9 +15,9 @@
  * individual rules.
  */
 
-/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/layout-use */
 /* stylelint-disable carbon/motion-duration-use */
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/theme-use */
 /* stylelint-disable declaration-no-important */
 /* stylelint-disable function-no-unknown */
 /* stylelint-disable max-nesting-depth */
@@ -105,7 +105,7 @@ $purple-3: #7433e3;
 
 // Specify Carousel look and feel.
 .#{$block-class}__carousel {
-  padding: 0 0 $spacing-05 0;
+  padding: 0 0 $spacing-05;
   color: $gray-10;
 
   @include when-collapsed() {
@@ -173,7 +173,7 @@ $purple-3: #7433e3;
   // Repeating here.
   svg {
     position: absolute;
-    right: 1rem;
+    right: $spacing-05;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;

package/scss/components/HTTPErrors/_http-errors.scss

@@ -69,7 +69,7 @@ $block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
     transform: scale(1.5);
   }
 }
-/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/theme-use */
 
 .#{$block-class-404}__prefix-cls-1 {
   fill: none;