diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index b8369147a3..d8fb691515 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -59,8 +59,7 @@ $button-icon-span-gap: map.merge(
   }
 
   &:focus-visible {
-    border-color: transparent;
-    outline: 2px solid getCssVar('button', 'border-color');
+    outline: 2px solid getCssVar('button', 'outline-color');
     outline-offset: 1px;
   }
 
@@ -170,8 +169,7 @@ $button-icon-span-gap: map.merge(
       }
 
       &:focus-visible {
-        border-color: transparent;
-        outline: 2px solid getCssVar('button', 'border-color');
+        outline: 2px solid getCssVar('button', 'outline-color');
         outline-offset: 1px;
       }
 
@@ -207,7 +205,8 @@ $button-icon-span-gap: map.merge(
     padding: 2px;
     height: auto;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: getCssVar('button', 'hover', 'link-text-color');
     }
 
@@ -225,6 +224,7 @@ $button-icon-span-gap: map.merge(
       }
 
       &:active {
+        color: getCssVar('button', 'active-color');
         border-color: transparent;
         background-color: transparent;
       }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 3cd8316e9b..8b7ebb1820 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -643,6 +643,9 @@ $button: map.merge(
     'active-text-color': getCssVar('button-hover-text-color'),
     'active-border-color': getCssVar('color-primary'),
     'active-bg-color': getCssVar('button', 'hover-bg-color'),
+    'outline-color': getCssVar('color-primary', 'light-5'),
+    'hover-link-text-color': getCssVar('color-info'),
+    'active-color': getCssVar('text-color', 'primary'),
   ),
   $button
 );
diff --git a/packages/theme-chalk/src/mixins/_button.scss b/packages/theme-chalk/src/mixins/_button.scss
index 5bc4fe19c2..d7b0eaf13a 100644
--- a/packages/theme-chalk/src/mixins/_button.scss
+++ b/packages/theme-chalk/src/mixins/_button.scss
@@ -77,6 +77,16 @@
         'color',
         $type,
       ),
+      'outline-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+      'active-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
     ),
     'hover': (
       'text-color': (