Add visible outline to focused button (#2009)

The focus state of buttons should be clearly visible in all modes to help find the focused element. Buttons are especially important and therefore receive a special outline in a unique color. The colored outline can be set with CSS-variables.

scm-ui/ui-styles/src/components/_main.scss

@@ -334,6 +334,16 @@ a.has-text-secondary-most:focus {
     }
   }
 
+  &:focus,
+  &.is-focused {
+    outline: $focus-outline-style;
+    outline-color: $focus-outline-color;
+    outline-offset: $focus-outline-offset;
+    &:not(:active) {
+      box-shadow: none !important;
+    }
+  }
+
   &.is-primary:hover,
   &.is-primary.is-hovered {
     background-color: scale-color($primary, $lightness: -10%);