@carbon/ibm-products 2.54.0-canary.48 → 2.54.0-canary.50

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

@@ -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;
 }
 
@@ -677,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}
     );
@@ -949,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/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;

package/scss/components/InlineTip/_inline-tip.scss

@@ -15,8 +15,8 @@
  * instead of many individual rules.
  */
 
-/* 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 */
 /* stylelint-disable function-no-unknown */
 /* stylelint-disable max-nesting-depth */
@@ -177,7 +177,7 @@ $purple: #7f3ae7;
 }
 
 .#{$block-class} .#{$block-class}__close-icon {
-  padding: to-rem(6px) 0 0 0;
+  padding: to-rem(6px) 0 0;
   block-size: $spacing-07;
   color: $white-0;
   inline-size: $spacing-07;
@@ -221,7 +221,7 @@ $purple: #7f3ae7;
   // Repeating here.
   svg {
     position: absolute;
-    right: 1rem;
+    right: $spacing-05;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -87,7 +87,7 @@ $one-grid-column: calc(100% / 16);
   &--container {
     min-width: 47rem;
     max-width: 82rem;
-    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-token-use
+    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-use
     background-color: $background;
   }
 
@@ -220,17 +220,17 @@ $one-grid-column: calc(100% / 16);
       height: $spacing-09;
       padding-left: $spacing-05;
       border-bottom: 1px solid $border-subtle-01;
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       background-color: $gray-100;
-      /* stylelint-disable-next-line carbon/theme-token-use */
+      /* stylelint-disable-next-line carbon/theme-use */
       color: $gray-10;
-      /* stylelint-disable-next-line carbon/type-token-use */
+      /* stylelint-disable-next-line carbon/type-use */
       font-weight: normal !important; // overrides type style above
-      /* stylelint-disable-next-line carbon/type-token-use */
+      /* stylelint-disable-next-line carbon/type-use */
       line-height: $spacing-09 !important;
 
       b {
-        /* stylelint-disable-next-line carbon/type-token-use */
+        /* stylelint-disable-next-line carbon/type-use */
         font-weight: 600;
       }
     }

package/scss/components/NonLinearReading/_non-linear-reading.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 */
 /* stylelint-disable function-no-unknown */
 
 // Standard imports.
@@ -70,7 +70,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
 }
 // The "up" chevron
 .#{$block-class} .#{$block-class}__keyword svg {
-  margin: to-rem(1px) 0 0 0;
+  margin: to-rem(1px) 0 0;
   vertical-align: text-top;
 }
 

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

@@ -23,7 +23,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 @keyframes fade-in {
   0% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateY(-38.5rem); // the height of the notification panel
   }
 
@@ -41,7 +41,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 
   100% {
     opacity: 0;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     transform: translateY(-38.5rem); // the height of the notification panel
   }
 }
@@ -93,7 +93,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
 
     position: sticky;
     z-index: 2;
-    // stylelint-disable-next-line carbon/layout-token-use
+    // stylelint-disable-next-line carbon/layout-use
     top: 4.8125rem;
     padding: $spacing-03 $spacing-05;
     background-color: $layer-01;

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

@@ -121,12 +121,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 }
 
 .#{$block-class}__summary--warn svg path[fill='none'] {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   fill: $black-100;
 }
 
 .#{$block-class}__summary--warn svg path[fill='none'] {
-  /* stylelint-disable-next-line carbon/theme-token-use */
+  /* stylelint-disable-next-line carbon/theme-use */
   fill: $black-100;
 }
 
@@ -134,7 +134,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   overflow: hidden;
   height: max-content;
   // spacing-05 + toggle width
-  // stylelint-disable-next-line carbon/layout-token-use
+  // stylelint-disable-next-line carbon/layout-use
   padding-right: calc(#{$spacing-05} + 2rem);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -149,7 +149,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 .#{$block-class}__content {
   padding-right: $spacing-05;
   // spacing-05 + chevron size + spacing-05
-  // stylelint-disable-next-line carbon/layout-token-use
+  // stylelint-disable-next-line carbon/layout-use
   padding-left: calc(#{$spacing-05} * 2 + 1rem);
 }
 
@@ -208,14 +208,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
 
 .#{$block-class}--lg .#{$block-class}__toggle {
   // "top" shouldn't be spacing token as it depends on the toggle size
-  // stylelint-disable-next-line carbon/layout-token-use
-  top: 1rem;
+  top: $spacing-05;
 }
 
 .#{$block-class}--xl .#{$block-class}__toggle {
   // "top" shouldn't be spacing token as it depends on the toggle size
-  // stylelint-disable-next-line carbon/layout-token-use
-  top: 1.5rem;
+  top: $spacing-06;
 }
 
 .#{$block-class}--lg .#{$block-class}__summary {