diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 8c84e486a..192206232 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -37,6 +37,7 @@
 .button-primary {
   @include buttonStyle;
   @include flexCenter;
+  @include focusPrimary;
   background-color: var(--button-primary-background-color-rest);
   border: $s-1 solid var(--button-primary-border-color-rest);
   color: var(--button-primary-foreground-color-rest);
@@ -54,17 +55,6 @@
       stroke: var(--button-primary-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--button-primary-background-color-focus);
-    border: $s-1 solid var(--button-primary-border-color-focus);
-    color: var(--button-primary-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-primary-foreground-color-focus);
-    }
-  }
   &:active {
     background-color: var(--button-primary-background-color-active);
     border: $s-1 solid var(--button-primary-border-color-active);
@@ -86,6 +76,7 @@
 .button-secondary {
   @include buttonStyle;
   @include flexCenter;
+  @include focusSecondary;
   border-radius: $br-8;
   background-color: var(--button-secondary-background-color-rest);
   border: $s-1 solid var(--button-secondary-border-color-rest);
@@ -104,17 +95,6 @@
       stroke: var(--button-secondary-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--button-secondary-background-color-focus);
-    border: $s-1 solid var(--button-secondary-border-color-focus);
-    color: var(--button-secondary-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-secondary-foreground-color-focus);
-    }
-  }
   &:active {
     outline: none;
     background-color: var(--button-secondary-background-color-active);
@@ -136,6 +116,7 @@
 .button-tertiary {
   @include buttonStyle;
   @include flexCenter;
+  @include focusTertiary;
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
@@ -153,17 +134,6 @@
       stroke: var(--button-tertiary-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border: $s-1 solid var(--button-tertiary-border-color-focus);
-    background-color: var(--button-tertiary-background-color-focus);
-    color: var(--button-tertiary-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-tertiary-foreground-color-focus);
-    }
-  }
   &:active {
     outline: none;
     border: $s-1 solid transparent;
@@ -185,6 +155,7 @@
 .button-radio {
   @include buttonStyle;
   @include flexCenter;
+  @include focusRadio;
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
   border: $s-1 solid var(--button-radio-background-color-rest);
@@ -201,17 +172,6 @@
       stroke: var(--button-radio-foreground-color-hover);
     }
   }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border: $s-1 solid var(--button-radio-border-color-focus);
-    background-color: var(--button-radio-background-color-focus);
-    color: var(--button-radio-foreground-color-focus);
-    svg,
-    span svg {
-      stroke: var(--button-radio-foreground-color-focus);
-    }
-  }
   &:active {
     outline: none;
     border: $s-1 solid transparent;
@@ -244,27 +204,16 @@
 .button-tag {
   @include buttonStyle;
   @include flexCenter;
+  @include focus;
   &:hover {
     svg {
       stroke: var(--title-foreground-color-hover);
     }
   }
-  &:focus {
-    outline: none;
-    border: 1px solid var(--button-border-focus);
-    background-color: var(--button-background-focus);
-    svg {
-      stroke: var(--button-foreground-focus);
-    }
-  }
   &:active {
     border: none;
     background-color: transparent;
   }
-  &:focus-visible {
-    border: none;
-    outline: none;
-  }
 }
 
 .button-icon {
@@ -291,8 +240,7 @@
   background-color: var(--button-constraint-background-color-rest);
   padding: 0;
   margin: 0;
-  &:hover,
-  &:focus {
+  &:hover {
     outline: $s-4 solid var(--button-constraint-border-color-hover);
     background-color: var(--button-constraint-background-color-hover);
   }
@@ -304,6 +252,7 @@
   @include removeInputStyle;
   @include titleTipography;
   @include textEllipsis;
+  // @include focusInput;
   height: $s-28;
   width: 100%;
   flex-grow: 1;
@@ -311,11 +260,6 @@
   padding: 0 0 0 $s-6;
   border-radius: $br-8;
   color: var(--input-foreground-color-active);
-  &:focus-within,
-  &:active {
-    color: var(--input-foreground-color-active);
-    background-color: var(--input-background-color-active);
-  }
   &[disabled] {
     opacity: 0.5;
     pointer-events: none;
@@ -342,6 +286,7 @@
 
 .input-element {
   @include titleTipography;
+  @include focusInput;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -373,15 +318,6 @@
     }
     background-color: var(--input-background-color-hover);
   }
-
-  &:focus-within,
-  &:active {
-    input {
-      color: var(--input-foreground-color-active);
-    }
-    background-color: var(--input-background-color-active);
-    border: $s-1 solid var(--input-border-color-active);
-  }
 }
 
 .disabled-input {
@@ -459,8 +395,7 @@
   padding: $s-8 $s-12;
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color-hover);
-  &:hover,
-  &:focus-within {
+  &:hover {
     background-color: var(--assets-item-background-color-hover);
     color: var(--assets-item-name-foreground-color-hover);
   }
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index c2297c66b..2793e6f16 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -15,4 +15,5 @@
 @import "common/refactor/shadows.scss";
 @import "common/refactor/z-index.scss";
 @import "common/refactor/mixins.scss";
+@import "common/refactor/focus.scss";
 @import "common/refactor/basic-rules.scss";
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index db7638b9f..de67c5107 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -17,9 +17,9 @@
   // BUTTONS
 
   --button-foreground-hover: var(--color-accent-primary);
-  --button-background-focus: var(--color-background-secondary);
-  --button-foreground-focus: var(--color-foreground-primary);
-  --button-border-focus: var(--color-accent-primary);
+  --button-background-color-focus: var(--color-background-secondary);
+  --button-foreground-color-focus: var(--color-foreground-primary);
+  --button-border-color-focus: var(--color-accent-primary);
   --button-foreground-color-disabled: var(--color-foreground-secondary);
   --button-background-color-disabled: var(--color-background-primary);
   --button-border-color-disabled: var(--color-background-quaternary);
diff --git a/frontend/resources/styles/common/refactor/focus.scss b/frontend/resources/styles/common/refactor/focus.scss
new file mode 100644
index 000000000..8efdeebd5
--- /dev/null
+++ b/frontend/resources/styles/common/refactor/focus.scss
@@ -0,0 +1,50 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@mixin focusType($type) {
+  $realType: "";
+  @if $type {
+    $realType: $type + "-";
+  }
+  &:focus-visible {
+    outline: none;
+    background-color: var(--button-#{$realType}background-color-focus);
+    border: $s-1 solid var(--button-#{$realType}border-color-focus);
+    color: var(--button-#{$realType}foreground-color-focus);
+    svg,
+    span svg {
+      stroke: var(--button-#{$realType}foreground-color-focus);
+    }
+  }
+}
+
+@mixin focusPrimary {
+  @include focusType(primary);
+}
+
+@mixin focusSecondary {
+  @include focusType(secondary);
+}
+
+@mixin focusTertiary {
+  @include focusType(tertiary);
+}
+
+@mixin focusRadio {
+  @include focusType(radio);
+}
+
+@mixin focus {
+  @include focusType(null);
+}
+
+@mixin focusInput {
+  &:focus-within {
+    color: var(--input-foreground-color-active);
+    background-color: var(--input-background-color-active);
+    border: $s-1 solid var(--input-border-color-active);
+  }
+}