diff --git a/packages/theming/sass/themes/schemas/components/light/_button-group.scss b/packages/theming/sass/themes/schemas/components/light/_button-group.scss
index b8276a9a..0ba0571b 100644
--- a/packages/theming/sass/themes/schemas/components/light/_button-group.scss
+++ b/packages/theming/sass/themes/schemas/components/light/_button-group.scss
@@ -595,7 +595,7 @@ $fluent-button-group: extend(
 /// @prop {Map} item-hover-background [color: ('primary', 600)] - The hover background color for button group items.
 /// @prop {Map} item-hover-text-color [contrast-color: ('primary', 600)] - The hover text color for button group items.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('primary', 600)] - The hover icon color for button group items.
-/// @prop {Map} item-hover-border-color [color: ('primary', 500)] - The hover border color between button group items.
+/// @prop {Map} item-hover-border-color [color: ('primary', 600)] - The hover border color between button group items.
 /// @prop {Map} item-focused-text-color [contrast-color: ('primary', 600)] - The focused text color for button group items.
 /// @prop {Map} item-focused-background [color: ('primary', 500)] - The focused background color for button group items.
 /// @prop {Map} item-focused-hover-background [color: ('primary', 600)] - The focused & hover background color for button group items.
@@ -607,7 +607,7 @@ $fluent-button-group: extend(
 /// @prop {Map} item-selected-icon-color [contrast-color: ('primary', 700)] - The icon color for a selected item in the button group.
 /// @prop {Map} item-selected-border-color [color: ('primary', 700)] - The border color for a selected item from the button group.
 /// @prop {Map} item-selected-hover-background [color: ('primary', 800)] - The background color for a selected item in hover or focus state in the button group.
-/// @prop {Map} item-selected-hover-border-color [color: ('primary', 700)] - The border color for a selected item in hover state in the button group.
+/// @prop {Map} item-selected-hover-border-color [color: ('primary', 800)] - The border color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-hover-text-color [contrast-color: ('primary', 700)] - The text color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-hover-icon-color [contrast-color: ('primary', 700)] - The icon color for a selected item in hover state in the button group.
 /// @prop {Map} item-selected-focus-background [color: ('primary', 700)] - The background color for a selected item in focus state in the button group.
@@ -675,7 +675,7 @@ $bootstrap-button-group: extend(
         item-hover-border-color: (
             color: (
                 'primary',
-                500,
+                600,
             ),
         ),
 
@@ -794,7 +794,7 @@ $bootstrap-button-group: extend(
         item-selected-hover-border-color: (
             color: (
                 'primary',
-                700,
+                800,
             ),
         ),