From 43f95d21fd98255928e1ee9384bc368933c44aa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=A0Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Tue, 8 Oct 2024 17:04:18 -0500
Subject: [PATCH] Unify focus states in <Checkbox>, <Radio>, <Toggle>, and
 <YesNo> components

[MAILPOET-4546]
---
 mailpoet/assets/css/src/generic/_forms-checkbox.scss | 2 +-
 mailpoet/assets/css/src/generic/_forms-radio.scss    | 2 +-
 mailpoet/assets/css/src/generic/_forms-toggle.scss   | 6 ++++++
 mailpoet/assets/css/src/generic/_forms-yesno.scss    | 7 +++++++
 mailpoet/assets/css/src/settings/_colors.scss        | 2 ++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/mailpoet/assets/css/src/generic/_forms-checkbox.scss b/mailpoet/assets/css/src/generic/_forms-checkbox.scss
index 1292f1fc59..b5cf02546e 100644
--- a/mailpoet/assets/css/src/generic/_forms-checkbox.scss
+++ b/mailpoet/assets/css/src/generic/_forms-checkbox.scss
@@ -21,7 +21,7 @@
 
     &:focus {
       ~ .mailpoet-form-checkbox-control {
-        border: 2px solid $color-input-border;
+        border-color: $color-input-border-focus;
       }
     }
   }
diff --git a/mailpoet/assets/css/src/generic/_forms-radio.scss b/mailpoet/assets/css/src/generic/_forms-radio.scss
index 705738ce63..412dcdd530 100644
--- a/mailpoet/assets/css/src/generic/_forms-radio.scss
+++ b/mailpoet/assets/css/src/generic/_forms-radio.scss
@@ -21,7 +21,7 @@
 
     &:focus {
       ~ .mailpoet-form-radio-control {
-        border: 2px solid $color-input-border;
+        border-color: $color-input-border-focus;
       }
     }
   }
diff --git a/mailpoet/assets/css/src/generic/_forms-toggle.scss b/mailpoet/assets/css/src/generic/_forms-toggle.scss
index 0e38903183..03e2d7cda7 100644
--- a/mailpoet/assets/css/src/generic/_forms-toggle.scss
+++ b/mailpoet/assets/css/src/generic/_forms-toggle.scss
@@ -12,6 +12,12 @@
     opacity: 0;
     position: absolute;
     width: 1px;
+
+    &:focus {
+      ~ .mailpoet-form-toggle-control {
+        border-color: $color-input-border-focus;
+      }
+    }
   }
 }
 
diff --git a/mailpoet/assets/css/src/generic/_forms-yesno.scss b/mailpoet/assets/css/src/generic/_forms-yesno.scss
index 9043c31caf..c3fb430ee4 100644
--- a/mailpoet/assets/css/src/generic/_forms-yesno.scss
+++ b/mailpoet/assets/css/src/generic/_forms-yesno.scss
@@ -25,6 +25,13 @@
     opacity: 0;
     position: absolute;
     width: 1px;
+
+    &:focus {
+      ~ .mailpoet-form-yesno-control {
+        box-shadow: 0 0 0 1px $color-input-border-focus;
+        z-index: 1;
+      }
+    }
   }
 }
 
diff --git a/mailpoet/assets/css/src/settings/_colors.scss b/mailpoet/assets/css/src/settings/_colors.scss
index 8434f2fcb8..4c6dd65101 100644
--- a/mailpoet/assets/css/src/settings/_colors.scss
+++ b/mailpoet/assets/css/src/settings/_colors.scss
@@ -31,6 +31,7 @@ $color-tertiary-hover: darken($color-tertiary, 10%);
 $color-tertiary-light: #dcdcde;
 $color-grey-0: #f6f7f7;
 $color-tertiary-light-hover: darken($color-tertiary-light, 10%);
+$color-tertiary-light-focus: #777;
 $color-tertiary-light-background: rgba($color-tertiary-light, 0.3);
 $color-destructive: #b52727;
 $color-destructive-hover: #a02222;
@@ -46,6 +47,7 @@ $color-text-dark: #2c3338;
 // Form colors
 $color-input-background: #fdfdff;
 $color-input-border: $color-tertiary-light-hover;
+$color-input-border-focus: $color-tertiary-light-focus;
 $color-input-error: #f00;
 $color-input-success: #7ed321;