fix(core): add and use wcag-compliant error/focus colors

affects: @fremtind/jkl-accordion, @fremtind/jkl-button, @fremtind/jkl-checkbox, @fremtind/jkl-core, @fremtind/jkl-dropdown, @fremtind/jkl-hamburger, @fremtind/jkl-radio-button, @fremtind/jkl-table, @fremtind/jkl-text-input, @fremtind/jkl-toggle-switch
fremtind · Oct 1, 2019 · c714b45 · c714b45
1 parent b849c9d
commit c714b45
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 17 deletions.
diff --git a/packages/accordion/accordion.scss b/packages/accordion/accordion.scss
@@ -53,7 +53,7 @@ $title-padding-bottom: $title-padding - $item-padding-top-bottom - $border-width
         }
 
         html:not([data-mousenavigation]) &:focus {
-            box-shadow: inset 0 0 0 2px $himmel;
+            box-shadow: inset 0 0 0 2px $focus-color;
         }
     }
 

diff --git a/packages/button/button.scss b/packages/button/button.scss
@@ -7,7 +7,7 @@ $button-bg-color: $snohvit;
 $button-bg-color--primary: $svart;
 
 $button-border-color: $svart;
-$button-focus-ring-color: $himmel;
+$button-focus-ring-color: $focus-color;
 
 $button-text-color: $svart;
 $button-text-color--primary: $snohvit;

diff --git a/packages/checkbox/checkbox.scss b/packages/checkbox/checkbox.scss
@@ -5,7 +5,7 @@ $checkbox-size: rem(24px);
 $checkbox-checked-background-color: $svart;
 $checkbox-unchecked-background-color: $snohvit;
 $checkbox-check-mark-color: $checkbox-unchecked-background-color;
-$checkbox-focus-outline-color: $himmel;
+$checkbox-focus-outline-color: $focus-color;
 
 .jkl-checkbox {
     align-items: center;
@@ -42,7 +42,7 @@ $checkbox-focus-outline-color: $himmel;
         }
 
         html:not([data-mousenavigation]) &:focus + .jkl-checkbox__check-mark {
-            box-shadow: 0 0 0 rem(2px) #fff, 0 0px 0 rem(4px) $himmel;
+            box-shadow: 0 0 0 rem(2px) #fff, 0 0px 0 rem(4px) $checkbox-focus-outline-color;
         }
     }
 

diff --git a/packages/core/links.scss b/packages/core/links.scss
@@ -23,7 +23,7 @@
     }
 
     html:not([data-mousenavigation]) &:focus {
-        @include background-color($himmel);
+        @include background-color($focus-color);
     }
 
     &--negative {

diff --git a/packages/core/variables/_colors.scss b/packages/core/variables/_colors.scss
@@ -13,16 +13,17 @@ $jord: #765d4b;
 $hav: #0a3166;
 $skog: #0d5745;
 $blomst: #ff7059;
+
 $helhvit: #ffffff;
+$lys-gra: #e0dfdd;
+$mellomgra: #bab8b6;
 
 // Function colors
 $gress: #50e68c;
 $himmel: #509ce6;
+$ux-rod: #d73704;
+$ux-bla: #1c74ca;
 
 // Colors by use case
-$error-color: change-color(
-    $blomst,
-    $lightness: 45%
-); // TODO: blomst is not wgac compliant check with stg what color to use
-
-$placeholder-text-color: change-color($varm-fjellgra, $lightness: 60%); // FIXME: define grayscale palette and use here
+$error-color: $ux-rod;
+$focus-color: $ux-bla;
diff --git a/packages/dropdown/dropdown.scss b/packages/dropdown/dropdown.scss
@@ -9,7 +9,7 @@ $bg-color: inherit;
 $bg-color--options: $helhvit;
 
 $border-color: $svart;
-$border-color--focus: $himmel;
+$border-color--focus: $focus-color;
 
 $value-height: $line-height-3;
 $value-font-size: $font-size-3;

diff --git a/packages/hamburger/hamburger.scss b/packages/hamburger/hamburger.scss
@@ -2,7 +2,7 @@
 @import "~@fremtind/jkl-core/variables/_colors.scss";
 @import "~@fremtind/jkl-core/_functions.scss";
 
-$button-focus-ring-color: $himmel;
+$button-focus-ring-color: $focus-color;
 
 .jkl-hamburger {
     border: none;

diff --git a/packages/radio-button/radio-button.scss b/packages/radio-button/radio-button.scss
@@ -77,7 +77,7 @@ $radio-button-color: $svart;
         /* Focused state */
         html:not([data-mousenavigation]) &:focus ~ .jkl-radio-button__dot {
             &:before {
-                box-shadow: 0 0 0 rem(2px) #fff, 0 0px 0 rem(4px) $himmel;
+                box-shadow: 0 0 0 rem(2px) #fff, 0 0px 0 rem(4px) $focus-color;
             }
         }
 

diff --git a/packages/table/table.scss b/packages/table/table.scss
@@ -58,7 +58,7 @@ $highlight-color: $helhvit;
         /* Focus-within is not supported by IE/Edge */
         &:focus-within {
             background-color: $highlight-color;
-            box-shadow: 0 0 0 1px inset $himmel;
+            box-shadow: 0 0 0 1px inset $focus-color;
         }
     }
 }
diff --git a/packages/text-input/text-input.scss b/packages/text-input/text-input.scss
@@ -5,7 +5,7 @@ $transition-timing: 200ms cubic-bezier(0.7, 0, 0.3, 1);
 
 $input-bg-color: inherit;
 $border-color: $svart;
-$border-color--focus: $himmel;
+$border-color--focus: $focus-color;
 
 $input-height: $line-height-3;
 $input-font-size: $font-size-3;

diff --git a/packages/toggle-switch/toggle-switch.scss b/packages/toggle-switch/toggle-switch.scss
@@ -4,7 +4,7 @@
 
 $toggle-width: rem(48px);
 $toggle-height: rem(24px);
-$toggle-focus-outline-color: $himmel;
+$toggle-focus-outline-color: $focus-color;
 $focus-ring: 0 0 0 rem(2px) $snohvit, 0 0 0 rem(4px) $toggle-focus-outline-color;
 $toggle-dot-white-line-inset: rem(5px);
-Original file line number
+Diff line change
@@ Expand Up @@
             }
             html:not([data-mousenavigation]) &:focus {
-                box-shadow: inset 0 0 0 2px $himmel;
+                box-shadow: inset 0 0 0 2px $focus-color;
             }
         }
@@ Expand Down @@