fix(styling): Dark Mode missing focus border styling

Author: ghiscoding

packages/common/src/styles/_variables.scss

@@ -1100,6 +1100,8 @@ $slick-dark-text-color:                                   #d4d4d4 !default;
   --slick-editor-modal-footer-border-top:                 var(--slick-base-dark-menu-border);
   --slick-editor-modal-input-editor-border:               var(--slick-base-dark-menu-border);
   --slick-editor-modal-checkbox-editor-border:            var(--slick-base-dark-menu-border);
+  --slick-editor-modal-large-editor-border:               var(--slick-base-dark-menu-border);
+  --slick-editor-modal-select-editor-border:              var(--slick-base-dark-menu-border);
   --slick-editor-modal-container-box-shadow:              0 0 2px #606060;
   --slick-editor-modal-reset-btn-bg-color:                #383838;
   --slick-editor-modal-close-btn-bg-color:                transparent;

packages/common/src/styles/slick-editors.scss

@@ -399,10 +399,6 @@
         margin: var(--slick-editor-modal-input-editor-margin, v.$slick-editor-modal-input-editor-margin);
         border: var(--slick-editor-modal-input-editor-border, v.$slick-editor-modal-input-editor-border);
         padding: var(--slick-editor-modal-input-editor-padding, v.$slick-editor-modal-input-editor-padding);
-        &:focus {
-          border-color: var(--slick-text-editor-focus-border-color, v.$slick-text-editor-focus-border-color);
-          box-shadow: var(--slick-text-editor-focus-box-shadow, v.$slick-text-editor-focus-box-shadow);
-        }
       }
       .input-group {
         display: flex;
@@ -412,10 +408,6 @@
         border: var(--slick-editor-modal-large-editor-border, v.$slick-editor-modal-large-editor-border);
         border-radius: var(--slick-editor-modal-large-editor-border-radius, v.$slick-editor-modal-large-editor-border-radius);
         padding: var(--slick-editor-modal-large-editor-padding, v.$slick-editor-modal-large-editor-padding);
-        &:focus-within {
-          border-color: var(--slick-text-editor-focus-border-color, v.$slick-text-editor-focus-border-color);
-          box-shadow: var(--slick-text-editor-focus-box-shadow, v.$slick-text-editor-focus-box-shadow);
-        }
         textarea {
           width: 100%;
           height: 100%;
@@ -448,6 +440,15 @@
         }
       }
 
+      input:focus-within,
+      .slick-large-editor-text:focus-within,
+      .ms-parent-open button.ms-choice,
+      button.ms-choice:focus-within {
+        outline: 0;
+        border-color: var(--slick-text-editor-focus-border-color, v.$slick-text-editor-focus-border-color);
+        box-shadow: var(--slick-text-editor-focus-box-shadow, v.$slick-text-editor-focus-box-shadow);
+      }
+
       .autocomplete-container.input-group,
       .vanilla-picker.input-group {
         display: flex;