diff --git a/apps/e2e/help-inline-storybook-e2e/src/e2e/help-inline.component.cy.ts b/apps/e2e/help-inline-storybook-e2e/src/e2e/help-inline.component.cy.ts
index 99c55a7b96..0d3305b310 100644
--- a/apps/e2e/help-inline-storybook-e2e/src/e2e/help-inline.component.cy.ts
+++ b/apps/e2e/help-inline-storybook-e2e/src/e2e/help-inline.component.cy.ts
@@ -22,5 +22,5 @@ describe('indicators-storybook', () => {
         );
       });
     });
-  });
+  }, true);
 });
diff --git a/apps/e2e/help-inline-storybook/project.json b/apps/e2e/help-inline-storybook/project.json
index d6dd834e97..171386e2ab 100644
--- a/apps/e2e/help-inline-storybook/project.json
+++ b/apps/e2e/help-inline-storybook/project.json
@@ -18,7 +18,8 @@
         "styles": [
           "apps/e2e/help-inline-storybook/src/styles.scss",
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ],
         "scripts": []
       },
@@ -79,7 +80,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {
@@ -99,7 +101,8 @@
         "compodoc": false,
         "styles": [
           "libs/components/theme/src/lib/styles/sky.scss",
-          "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
         ]
       },
       "configurations": {
diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss
index 2dec82c112..a33afd0f4a 100644
--- a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss
+++ b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss
@@ -1,28 +1,48 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
 @use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
   as modernMixins;
 
+@include compatMixins.sky-modern-overrides('.sky-help-inline') {
+  --sky-override-help-inline-color-hover: #{darken(
+      $sky-background-color-primary-dark,
+      10%
+    )};
+  --sky-override-help-inline-padding-sides: var(--modern-size-6);
+  --sky-override-help-inline-border-radius: var(--modern-size-3);
+  --sky-override-help-inline-font-size: #{$sky-font-size-base};
+}
+
+@include compatMixins.sky-modern-v2('.sky-help-inline') {
+  line-height: 1;
+}
+
 @include mixins.sky-component('modern', '.sky-help-inline') {
-  font-size: $sky-font-size-base;
-  display: inline-block;
-  border-radius: 3px;
-
-  // The 0px and 5px padding is because we want 1px top/bottom and 6px left/right but the mixin
-  // adds a pixel to account for standard button drop shadows that do not exist on this button.
-  @include modernMixins.sky-theme-modern-button-variant(
-    $sky-theme-modern-background-color-primary-dark,
-    transparent,
-    transparent,
-    $sky-theme-modern-background-color-primary-dark,
-    0px 5px
+  border: none;
+  outline: none;
+  padding: var(--sky-space-inset-pillarbox-1_4-top-xs)
+    var(
+      --sky-override-help-inline-padding-sides,
+      var(--sky-space-inset-pillarbox-1_4-right-xs)
+    )
+    var(--sky-space-inset-pillarbox-1_4-bottom-xs)
+    var(
+      --sky-override-help-inline-padding-sides,
+      var(--sky-space-inset-pillarbox-1_4-left-xs)
+    );
+  border-radius: var(
+    --sky-override-help-inline-border-radius,
+    var(--sky-border-radius-s)
   );
-
-  &:hover {
-    color: darken($sky-background-color-primary-dark, 10%);
-    transition: color $sky-transition-time-short;
-    cursor: pointer;
-  }
+  color: var(--sky-color-icon-action);
+  background-color: var(--sky-color-background-action-tertiary-base);
+  // The font size here is to size the icon stack to the correct size.
+  // This implementation is likely to change in tokenization pass 2.
+  font-size: var(--sky-override-help-inline-font-size, 12.8px);
+  display: inline-block;
+  box-shadow: inset 0 0 0 var(--sky-border-width-action-base)
+    var(--sky-color-border-action-tertiary-base);
 
   ::ng-deep {
     .fa-stack-2x {
@@ -33,6 +53,56 @@
       font-size: 10px;
     }
   }
+
+  &:hover {
+    background-color: var(--sky-color-background-action-tertiary-hover);
+    box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
+      var(--sky-color-border-action-tertiary-hover);
+    color: var(
+      --sky-override-help-inline-color-hover,
+      var(--sky-color-icon-action)
+    );
+    transition: color $sky-transition-time-short;
+    cursor: pointer;
+  }
+
+  &:active,
+  &.sky-btn-active {
+    background-color: var(--sky-color-background-action-tertiary-active);
+    box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
+      var(--sky-color-border-action-tertiary-active);
+  }
+
+  &:focus-visible:not(:active) {
+    background-color: var(--sky-color-background-action-tertiary-focus);
+    box-shadow:
+      inset 0 0 0 var(--sky-border-width-action-focus)
+        var(--sky-color-border-action-tertiary-focus),
+      var(--sky-elevation-focus);
+  }
+
+  &.sky-btn-disabled,
+  &[disabled] {
+    &,
+    &:hover,
+    &:focus-visible,
+    &.sky-btn-focus,
+    &:active,
+    &.sky-btn-active {
+      box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
+        var(--sky-color-border-action-tertiary-disabled);
+      background-color: var(--sky-color-background-action-tertiary-disabled);
+
+      &:focus-visible,
+      &.sky-btn-focus {
+        box-shadow: var(
+          --sky-override-button-icon-disabled-box-shadow,
+          inset 0 0 0 var(--sky-border-width-action-disabled)
+            var(--sky-color-border-action-tertiary-disabled)
+        );
+      }
+    }
+  }
 }
 
 @include mixins.sky-component('modern', '.sky-help-inline-hidden') {
diff --git a/libs/components/theme/src/lib/styles/themes/modern/_compat-tokens-mixins.scss b/libs/components/theme/src/lib/styles/themes/modern/_compat-tokens-mixins.scss
index 5a863d1800..4adbd99a88 100644
--- a/libs/components/theme/src/lib/styles/themes/modern/_compat-tokens-mixins.scss
+++ b/libs/components/theme/src/lib/styles/themes/modern/_compat-tokens-mixins.scss
@@ -27,10 +27,15 @@
   }
 }
 
-// We don't anticipate needing to encapsulate v2 only styles
-@mixin sky-modern-v2($selector: '') {
-  .sky-theme-modern.sky-theme-brand-blackbaud #{$selector} {
-    @content;
+@mixin sky-modern-v2($selector: '', $encapsulate: true) {
+  @if $encapsulate {
+    :host-context(.sky-theme-modern.sky-theme-brand-blackbaud) #{$selector} {
+      @content;
+    }
+  } @else {
+    .sky-theme-modern.sky-theme-brand-blackbaud #{$selector} {
+      @content;
+    }
   }
 }
 
diff --git a/libs/components/theme/src/lib/styles/themes/modern/_theme.scss b/libs/components/theme/src/lib/styles/themes/modern/_theme.scss
index 7c461ede79..df3c2b0041 100644
--- a/libs/components/theme/src/lib/styles/themes/modern/_theme.scss
+++ b/libs/components/theme/src/lib/styles/themes/modern/_theme.scss
@@ -120,7 +120,7 @@
   }
 }
 
-@include compatMixins.sky-modern-v2() {
+@include compatMixins.sky-modern-v2($encapsulate: false) {
   h1,
   .sky-font-heading-1 {
     line-height: var(--sky-font-line_height-heading-1);
diff --git a/libs/components/theme/src/lib/styles/themes/modern/_type.scss b/libs/components/theme/src/lib/styles/themes/modern/_type.scss
index 80b300f113..798607ca05 100644
--- a/libs/components/theme/src/lib/styles/themes/modern/_type.scss
+++ b/libs/components/theme/src/lib/styles/themes/modern/_type.scss
@@ -100,7 +100,7 @@
   }
 }
 
-@include compatMixins.sky-modern-v2() {
+@include compatMixins.sky-modern-v2($encapsulate: false) {
   .sky-font-body-default {
     line-height: var(--sky-font-line_height-body-m);
   }