diff --git a/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss b/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss index 0cf46e4873..63dc01cef6 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss @@ -14,6 +14,7 @@ @use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/colors' as *; @use '@carbon/react/scss/theme' as *; +@use '@carbon/layout/scss/convert'; @use '@carbon/styles/scss/components/button/tokens' as *; // Other Carbon settings if needed // TODO: @use '@carbon/styles/scss/grid'; @@ -43,7 +44,7 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home; &--is-mounted { bottom: 0; /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */ - transition: transform $duration-moderate-02 motion(exit, productive); + transition: $duration-moderate-02 motion(exit, productive); @media (prefers-reduced-motion) { transition: none; } @@ -60,7 +61,8 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home; bottom: 0; overflow: hidden; pointer-events: none; - transform: perspective(carbon--mini-units(18)) + /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */ + transform: perspective(convert.to-rem(144px)) translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1)); transform-origin: top center; visibility: visible;