Focus Behaviour Improvements (#466)

* Improved focus behaviour.

Author: alexnatalia

config/storybook/neu-theme-variables.scss

@@ -24,6 +24,7 @@ $s-color-base-background-hover: #F7F3F4;
 $s-color-base-disabled: #FDF7FB;
 $s-color-base-on-disabled: #A19A9D;
 $s-color-base-on-accent: #FFFFFF;
+$s-color-outline: rgba(0, 0, 0, 0.5);
 // Utility colors
 $s-color-utility-body: #F7F3F4;
 $s-color-utility-surface: #FDF7FB;
@@ -63,6 +64,7 @@ $s-size-mini: 24px;
   --s-color-base-disabled: #{$s-color-base-disabled};
   --s-color-base-on-disabled: #{$s-color-base-on-disabled};
   --s-color-base-on-accent: #{$s-color-base-on-accent};
+  --s-color-outline: #{$s-color-outline};
   --s-color-utility-body: #{$s-color-utility-body};
   --s-color-utility-surface: #{$s-color-utility-surface};
   --s-color-utility-overlay: #{$s-color-utility-overlay};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

src/styles/neumorphism/button.scss

@@ -173,6 +173,10 @@ $neu-button-padding-mini: 3px 6px !default;
   transition: $neu-button-transition;
   text-transform: uppercase;
 
+  &.s-primary, &.s-secondary, &.s-tertiary, &.s-action, &.s-link {
+    @include focus-outline;
+  }
+
   @include size('big', $neu-button-padding-big);
   @include size('medium', $neu-button-padding-medium);
   @include size('small', $neu-button-padding-small);

src/styles/neumorphism/index.scss

@@ -1,3 +1,4 @@
+@import "./mixins";
 @import "./button";
 @import "./input";
 @import "./card";

src/styles/neumorphism/input.scss

@@ -16,6 +16,8 @@ $neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
   height: initial;
   min-height: $s-size-big;
 
+  @include focus-outline(true);
+
   &.s-size-small {
     padding-top: $s-basic-spacing / 2;
     padding-bottom: $s-basic-spacing / 2;

src/styles/neumorphism/mixins.scss

@@ -0,0 +1,11 @@
+@mixin focus-outline($focusWithin: false) {
+  @if $focusWithin == true {
+    &:focus-within {
+      outline: 1px solid var(--s-color-outline);
+    }
+  } @else {
+    &:focus {
+      outline: 1px solid var(--s-color-outline);
+    }
+  }
+}

src/styles/root.scss

@@ -20,6 +20,7 @@
   --s-color-base-disabled: #{$s-color-base-disabled};
   --s-color-base-on-disabled: #{$s-color-base-on-disabled};
   --s-color-base-on-accent: #{$s-color-base-on-accent};
+  --s-color-outline: #{$s-color-outline};
   --s-color-utility-body: #{$s-color-utility-body};
   --s-color-utility-surface: #{$s-color-utility-surface};
   --s-color-utility-overlay: #{$s-color-utility-overlay};
@@ -50,6 +51,7 @@
   --s-color-base-disabled--dark: #{$s-color-base-disabled--dark};
   --s-color-base-on-disabled--dark: #{$s-color-base-on-disabled--dark};
   --s-color-base-on-accent--dark: #{$s-color-base-on-accent--dark};
+  --s-color-outline--dark: #{$s-color-outline--dark};
   --s-color-utility-body--dark: #{$s-color-utility-body--dark};
   --s-color-utility-surface--dark: #{$s-color-utility-surface--dark};
   --s-color-utility-overlay--dark: #{$s-color-utility-overlay--dark};
@@ -170,6 +172,7 @@
   --s-color-base-disabled: var(--s-color-base-disabled--dark);
   --s-color-base-on-disabled: var(--s-color-base-on-disabled--dark);
   --s-color-base-on-accent: var(--s-color-base-on-accent--dark);
+  --s-color-outline: var(--s-color-outline--dark);
   --s-color-utility-body: var(--s-color-utility-body--dark);
   --s-color-utility-surface: var(--s-color-utility-surface--dark);
   --s-color-utility-overlay: var(--s-color-utility-overlay--dark);

src/styles/theme/dark.scss

@@ -22,6 +22,7 @@ $s-color-base-background-hover--dark: #693D81 !default; // ????
 $s-color-base-disabled--dark: rgba(#391057, .5) !default; // ????
 $s-color-base-on-disabled--dark: #5D2F73 !default; // ????
 $s-color-base-on-accent--dark: #391057 !default;
+$s-color-outline--dark: rgba(255, 255, 255, 0.5);
 // Utility colors
 $s-color-utility-body--dark: #5D2F73 !default;
 $s-color-utility-surface--dark: #592D71 !default;

src/styles/variables.scss

@@ -22,6 +22,7 @@ $s-color-base-background-hover: #ECEFF0 !default;
 $s-color-base-disabled: #F5F7F8 !default;
 $s-color-base-on-disabled: #75787B !default;
 $s-color-base-on-accent: #FFFFFF !default;
+$s-color-outline: rgba(0, 0, 0, 0.5);
 // Utility colors
 $s-color-utility-body: #FFFFFF !default;
 $s-color-utility-surface: #FFFFFF !default;