feat(chore): optional outline on focus

src/definitions/collections/form.less

@@ -162,6 +162,9 @@
     font-family: @inputFont;
     line-height: @textAreaLineHeight;
     resize: @textAreaResize;
+    &:focus when not (@textAreaFocusOutline = none) {
+        outline: @textAreaFocusOutline;
+    }
 }
 .ui.form textarea:not([rows]) {
     height: @textAreaHeight;
@@ -424,6 +427,9 @@
     border-radius: @inputFocusBorderRadius;
     background: @inputFocusBackground;
     box-shadow: @inputFocusBoxShadow;
+    & when not (@inputFocusOutline = none) {
+        outline: @inputFocusOutline;
+    }
 }
 & when (@variationInputAction) {
     .ui.form .ui.action.input:not([class*="left action"]) {

src/definitions/elements/button.less

@@ -76,6 +76,9 @@
     color: @focusColor;
     background-image: @focusBackgroundImage;
     box-shadow: @focusBoxShadow;
+    & when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 .ui.button:focus .icon {

src/definitions/elements/input.less

@@ -56,6 +56,9 @@
         transition: @iconTransition;
         cursor: pointer;
     }
+    &:focus when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 /* --------------------

src/definitions/modules/calendar.less

@@ -37,7 +37,7 @@
 
 .ui.calendar .calendar:focus,
 .ui.calendar.popup:focus {
-    outline: 0;
+    outline: @focusOutline;
 }
 
 /*******************************

src/definitions/modules/checkbox.less

@@ -36,6 +36,9 @@
     font-size: @relativeMedium;
     line-height: @checkboxLineHeight;
     min-width: @checkboxSize;
+    &:focus when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 /* HTML Checkbox */
@@ -50,6 +53,9 @@
     z-index: 3;
     width: @checkboxSize;
     height: @checkboxSize;
+    &:focus when not (@inputFocusOutline = none) {
+        outline: @inputFocusOutline;
+    }
 }
 
 .ui.checkbox label {
@@ -58,6 +64,9 @@
     display: block;
     outline: none;
     font-size: @labelFontSize;
+    &:focus when not (@labelFocusOutline = none) {
+        outline: @labelFocusOutline;
+    }
 }
 
 .ui.checkbox:not(.invisible) label {

src/definitions/modules/dropdown.less

@@ -30,6 +30,9 @@
     transition: @transition;
     user-select: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    &:focus when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 /*******************************
@@ -59,6 +62,9 @@
     transition: @menuTransition;
     z-index: @menuZIndex;
     will-change: transform, opacity;
+    &:focus when not (@menuFocusOutline = none) {
+        outline: @menuFocusOutline;
+    }
 }
 
 .ui.dropdown .menu > * {
@@ -387,7 +393,7 @@ select.ui.dropdown {
         word-wrap: break-word;
         line-height: 1em;
         white-space: normal;
-        outline: 0;
+        outline: none;
         transform: rotateZ(0);
         min-width: @selectionMinWidth;
         min-height: @selectionMinHeight;
@@ -399,6 +405,9 @@ select.ui.dropdown {
         border: @selectionBorder;
         border-radius: @selectionBorderRadius;
         transition: @selectionTransition;
+        &:focus when not (@selectionFocusOutline = none) {
+            outline: @selectionFocusOutline;
+        }
     }
     .ui.selection.dropdown.visible,
     .ui.selection.dropdown.active {
@@ -448,6 +457,9 @@ select.ui.dropdown {
         width: @menuMinWidth;
         box-shadow: @selectionMenuBoxShadow;
         transition: @selectionMenuTransition;
+        &:focus when not (@selectionMenuFocusOutline = none) {
+            outline: @selectionMenuFocusOutline;
+        }
     }
     .ui.selection.dropdown:not(.pointing):not(.floating) .menu {
         border-top-width: 0;
@@ -705,6 +717,9 @@ select.ui.dropdown {
         outline: none;
         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
         padding: inherit;
+        &:focus when not (@searchFocusOutline = none) {
+            outline: @searchFocusOutline;
+        }
     }
 
     /* Text Layering */

src/definitions/modules/flyout.less

@@ -40,6 +40,9 @@
     z-index: @topLayer;
     background: #fff;
     outline: none;
+    &:focus when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 /* GPU Layers for Child Elements */
@@ -71,6 +74,9 @@
     opacity: 1;
     outline: none;
 }
+.ui.flyout > .close:focus when not (@closeFocusOutline = none) {
+    outline: @closeFocusOutline;
+}
 
 /* --------------
    Header

src/definitions/modules/modal.less

@@ -35,6 +35,9 @@
     user-select: text;
     will-change: top, left, margin, transform, opacity;
     outline: none;
+    &:focus when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 .ui.modal > :first-child:not(.close):not(.dimmer),
@@ -80,6 +83,9 @@
     opacity: 1;
     outline: none;
 }
+.ui.modal > .close:focus when not (@closeFocusOutline = none) {
+    outline: @closeFocusOutline;
+}
 
 /* --------------
      Header

src/definitions/modules/search.less

@@ -183,6 +183,9 @@
     border-color: @promptFocusBorderColor;
     background: @promptFocusBackground;
     color: @promptFocusColor;
+    & when not (@focusOutline = none) {
+        outline: @focusOutline;
+    }
 }
 
 & when (@variationSearchLoading) {

src/definitions/modules/slider.less

@@ -27,7 +27,7 @@
 }
 
 .ui.slider:not(.checkbox):focus {
-    outline: 0;
+    outline: @focusOutline;
 }
 
 .ui.slider .inner {

src/themes/default/collections/form.variables

@@ -91,13 +91,15 @@
 @inputFocusColor: @selectedTextColor;
 @inputFocusBoxShadow: @inputFocusPointerSize 0 0 0 @selectedBorderColor inset;
 @inputFocusBorderRadius: @inputBorderRadius;
+@inputFocusOutline: @focusOutline;
 
 /* Text Area Focus */
 @textAreaFocusBackground: @inputFocusBackground;
 @textAreaFocusBorderColor: @inputFocusBorderColor;
 @textAreaFocusColor: @inputFocusColor;
 @textAreaFocusBoxShadow: @inputFocusBoxShadow;
 @textAreaFocusBorderRadius: @inputFocusBorderRadius;
+@textAreaFocusOutline: @focusOutline;
 
 /* Disabled */
 @disabledLabelOpacity: @disabledOpacity;

src/themes/default/globals/site.variables

@@ -1138,6 +1138,7 @@
 /* -------------------
         Focus
 -------------------- */
+@focusOutline: none;
 
 /* ---  Colors  --- */
 @primaryColorFocus: if(iscolor(@primaryColor), saturate(darken(@primaryColor, 8), 20, relative), @primaryColor);

src/themes/default/modules/checkbox.variables

@@ -50,6 +50,8 @@
 @checkboxFocusBorderColor: @focusedFormMutedBorderColor;
 @checkboxFocusCheckColor: @selectedTextColor;
 @labelFocusColor: @selectedTextColor;
+@labelFocusOutline: @focusOutline;
+@inputFocusOutline: @focusOutline;
 
 /* Active */
 @labelActiveColor: @selectedTextColor;

src/themes/default/modules/dropdown.variables

@@ -32,6 +32,7 @@
 @menuPadding: 0;
 @menuTop: 100%;
 @menuTextAlign: left;
+@menuFocusOutline: @focusOutline;
 
 @menuBorderWidth: 1px;
 @menuBorderColor: @borderColor;
@@ -202,6 +203,8 @@
 @selectionFocusBorderColor: @focusedFormMutedBorderColor;
 @selectionFocusBoxShadow: none;
 @selectionFocusMenuBoxShadow: @raisedShadow;
+@selectionFocusOutline: @focusOutline;
+@selectionMenuFocusOutline: @focusOutline;
 
 /* Visible */
 @selectionVisibleTextFontWeight: @normal;
@@ -224,6 +227,7 @@
 -------------- */
 
 @searchMinWidth: "";
+@searchFocusOutline: @focusOutline;
 
 /* Search Selection */
 @searchSelectionLineHeight: @inputLineHeight;

src/themes/default/modules/flyout.variables

@@ -11,6 +11,9 @@
 @duration: 500ms;
 @easing: @defaultEasing;
 
+/* Focus */
+@closeFocusOutline: @focusOutline;
+
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);
 @dimmerTransition: all @duration;

src/themes/default/modules/modal.variables

@@ -16,6 +16,7 @@
 @closeOpacityDimmed: 0.1;
 @closeSize: 1.25em;
 @closeColor: @white;
+@closeFocusOutline: @focusOutline;
 
 @closeHitbox: 2.25rem;
 @closeDistance: 0.25rem;