feat: Signal Orange is replaced by Emerald Green for focus state

dnbexperience · Jan 21, 2019 · d3d0575 · d3d0575
1 parent 2373907
commit d3d0575
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 27 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -297,7 +297,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
     border-color: var(--color-mint-green-50);
     outline: none; }
     html[data-whatinput='keyboard'] .dnb-button--primary:not([disabled]):focus {
-      box-shadow: 0 0 0 2px var(--color-signal-orange);
+      box-shadow: 0 0 0 2px var(--color-emerald-green);
       border-color: transparent; }
   .dnb-button--primary[disabled] {
     color: var(--color-white);
@@ -323,7 +323,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
     border-color: var(--color-mint-green-50);
     outline: none; }
     html[data-whatinput='keyboard'] .dnb-button--secondary:not([disabled]):focus {
-      box-shadow: 0 0 0 2px var(--color-signal-orange);
+      box-shadow: 0 0 0 2px var(--color-emerald-green);
       border-color: transparent; }
   .dnb-button--secondary[disabled] {
     color: var(--color-sea-green-alt-30);
@@ -377,7 +377,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
     border-color: transparent;
     outline: none; }
     html[data-whatinput='keyboard'] .dnb-button--tertiary:not([disabled]):focus {
-      box-shadow: 0 0 0 2px var(--color-signal-orange);
+      box-shadow: 0 0 0 2px var(--color-emerald-green);
       border-color: transparent; }
   .dnb-button--tertiary[disabled] {
     cursor: not-allowed;
@@ -399,7 +399,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
     border-color: var(--color-signal-yellow);
     outline: none; }
     html[data-whatinput='keyboard'] .dnb-button--signal:not([disabled]):focus {
-      box-shadow: 0 0 0 2px var(--color-signal-orange);
+      box-shadow: 0 0 0 2px var(--color-emerald-green);
       border-color: transparent; }
   .dnb-button--signal[disabled] {
     color: #b0b0b0;
@@ -697,7 +697,7 @@ exports[`Button scss have to match snapshot 1`] = `
     .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     html[data-whatinput='mouse']
 .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus),

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
@@ -12,7 +12,10 @@
     background-color: $background-color;
     border-color: $background-color;
 
-    box-shadow: 0 0 0 var(--button-border-width--hover) $background-color;
+    @include extendBorder(
+      $background-color,
+      var(--button-border-width--hover)
+    );
 
     &:not([disabled]):active {
       @include fakeBorder(transparent);

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -475,7 +475,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     html[data-whatinput='mouse']
 .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus),
@@ -741,7 +741,7 @@ a.dnb-button {
         box-shadow: 0 0 0 2px;
         outline: none; }
         html[data-whatinput='keyboard'] .dnb-dropdown__option--active .dnb-dropdown__option__inner {
-          box-shadow: 0 0 0 2px var(--color-signal-orange);
+          box-shadow: 0 0 0 2px var(--color-emerald-green);
           border-color: transparent; }
     .no-touch .dnb-dropdown__option:hover[disabled] {
       cursor: not-allowed; }
@@ -865,7 +865,7 @@ a.dnb-button {
       box-shadow: 0 0 0 2px;
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-dropdown__value-holder-input:focus ~ .dnb-dropdown__trigger {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     .dnb-dropdown__value-holder-input:focus ~ .dnb-dropdown__options {
       z-index: 8;

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -332,7 +332,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     html[data-whatinput='mouse']
 .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus),

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -208,14 +208,13 @@ exports[`Input scss have to match default theme snapshot 1`] = `
     .dnb-input__shell[data-input-state='focus'] {
       background-color: var(--color-white);
       border-color: var(--input-border-color--active);
+      box-shadow: 0 0 0 1px var(--input-border-color--active);
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-input__shell[data-input-state='focus'] {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
   .dnb-input__status--error .dnb-input__shell {
     border-color: var(--color-cherry-red); }
-    .dnb-input__status--error .dnb-input__shell[data-input-state='focus'] {
-      box-shadow: 0 0 0 1px var(--color-cherry-red); }
   .dnb-input__placeholder {
     color: var(--color-sea-green); }
   .dnb-input__shell[data-input-state='focus'][data-has-content='false'] .dnb-input__placeholder {
@@ -517,7 +516,7 @@ exports[`Input scss have to match snapshot 1`] = `
     .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     html[data-whatinput='mouse']
 .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus),

diff --git a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss
@@ -36,13 +36,8 @@
 
     &[data-input-state='focus'] {
       background-color: var(--color-white);
-
-      // In case we want to change the "active" border color
       border-color: var(--input-border-color--active);
-
-      // In case we want to have a larger border size on the input
-      // box-shadow: 0 0 0 1px var(--color-emerald-green);
-
+      @include extendBorder(var(--input-border-color--active));
       @include fakeFocus();
     }
   }
@@ -51,9 +46,10 @@
   &__status--error &__shell {
     border-color: var(--color-cherry-red);
 
+    &,
     &[data-input-state='focus'] {
       // In case we want to have a larger border size on the input
-      box-shadow: 0 0 0 1px var(--color-cherry-red);
+      // @include extendBorder(var(--color-cherry-red));
     }
   }
 

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -701,7 +701,7 @@ exports[`Modal scss have to match snapshot 1`] = `
     .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     html[data-whatinput='mouse']
 .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus),

diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -270,7 +270,7 @@ exports[`Slider scss have to match snapshot 1`] = `
     .dnb-slider .slider__thumb:focus {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-slider .slider__thumb:focus {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
   .dnb-slider .slider__state--disabled .slider__thumb {
     border: none;

diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -278,7 +278,7 @@ exports[`Switch scss have to match snapshot 1`] = `
     clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
     outline: none; }
     html[data-whatinput='keyboard'] .dnb-switch__focus {
-      box-shadow: 0 0 0 2px var(--color-signal-orange);
+      box-shadow: 0 0 0 2px var(--color-emerald-green);
       border-color: transparent; }
   .dnb-switch__inner:not([disabled]) .dnb-switch__background,
   .dnb-switch__inner:not([disabled]) .dnb-switch__button {
@@ -338,7 +338,7 @@ exports[`Switch scss have to match snapshot 1`] = `
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard']
       .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        box-shadow: 0 0 0 2px var(--color-emerald-green);
         border-color: transparent; }
     .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus,
     .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {

diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -285,7 +285,7 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 .dnb-tabs__tabs .dnb-tablink:not([disabled]):not(:active):not(.selected):focus {
   outline: none; }
   html[data-whatinput='keyboard'] .dnb-tabs__tabs .dnb-tablink:not([disabled]):not(:active):not(.selected):focus {
-    box-shadow: 0 0 0 2px var(--color-signal-orange);
+    box-shadow: 0 0 0 2px var(--color-emerald-green);
     border-color: transparent; }
   .dnb-tabs__tabs .dnb-tablink:not([disabled]):not(:active):not(.selected):focus::after {
     border-bottom: 2px solid transparent; }

diff --git a/packages/dnb-ui-lib/src/style/core/utilities.scss b/packages/dnb-ui-lib/src/style/core/utilities.scss
@@ -58,7 +58,7 @@
 
 @mixin fakeFocus(
   $whatinput: 'keyboard',
-  $color: var(--color-signal-orange)
+  $color: var(--color-emerald-green)
 ) {
   outline: none;
 
@@ -78,6 +78,10 @@
   }
 }
 
+@mixin extendBorder($color: null, $width: 1px) {
+  box-shadow: 0 0 0 $width $color;
+}
+
 @mixin _drawUnderline() {
   content: '';
   position: absolute;