feat(core): add pure white as a supporting color

affects: @fremtind/jkl-core, @fremtind/jkl-datepicker, @fremtind/jkl-dropdown, @fremtind/jkl-table
fremtind · Sep 25, 2019 · 1558fa9 · 1558fa9
1 parent 651dd32
commit 1558fa9
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/packages/core/labels.scss b/packages/core/labels.scss
@@ -5,8 +5,7 @@
 .jkl-form-support-label {
     display: block;
     margin-top: $component-spacing--small;
-    @include font-size(xs);
-    @include line-height(xs);
+    @include text-sizing("xs");
 
     &--help {
         color: $svart;
@@ -19,22 +18,25 @@
 
 .jkl-label {
     display: inline-block;
-    @include font-size("xl");
-    @include line-height("xl");
     margin-bottom: $component-spacing--xl;
-    margin-left: rem(-1px);
+    margin-left: rem(-1px); // adjust visual alignment
+    @include text-sizing("xl");
+    @include small-device {
+        margin-bottom: $component-spacing--large;
+    }
 
     &--secondary {
-        @include font-size("medium");
-        @include line-height("medium");
         margin-bottom: $component-spacing--large;
         margin-left: initial;
+        @include text-sizing("medium");
+        @include small-device {
+            margin-bottom: $component-spacing--small;
+        }
     }
 
     &--small {
-        @include font-size("xs");
-        @include line-height("xs");
         margin-bottom: 0;
         margin-left: initial;
+        @include text-sizing("xs");
     }
 }
diff --git a/packages/core/variables/_colors.scss b/packages/core/variables/_colors.scss
@@ -13,6 +13,7 @@ $jord: #765d4b;
 $hav: #0a3166;
 $skog: #0d5745;
 $blomst: #ff7059;
+$helhvit: #ffffff;
 
 // Function colors
 $gress: #50e68c;

diff --git a/packages/core/variables/_font-size.scss b/packages/core/variables/_font-size.scss
@@ -90,3 +90,9 @@ $line-height--large-device: (
         @include line-height--small-device($size);
     }
 }
+
+// Shorthand for setting both font-size and line-height to same value
+@mixin text-sizing($size) {
+    @include font-size($size);
+    @include line-height($size);
+}
diff --git a/packages/datepicker/datepicker.scss b/packages/datepicker/datepicker.scss
@@ -6,7 +6,7 @@
 $date-width: rem(46px);
 $calendar-padding: $component-spacing--xl;
 $calendar-width: ($date-width * 7) + ($calendar-padding * 2);
-$background-color: white;
+$background-color: $helhvit;
 $bottom-margin: $component-spacing--large;
 
 .jkl-datepicker {

diff --git a/packages/dropdown/dropdown.scss b/packages/dropdown/dropdown.scss
@@ -5,7 +5,8 @@
 $transition-timing: 200ms cubic-bezier(0.7, 0, 0.3, 1);
 
 $dropdown-width: 20rem;
-$dropdown-bg-color: inherit;
+$bg-color: inherit;
+$bg-color--options: $helhvit;
 
 $border-color: $svart;
 $border-color--focus: $himmel;
@@ -38,7 +39,7 @@ $chevron-weight: rem(1px);
 }
 
 .jkl-dropdown {
-    background-color: $dropdown-bg-color;
+    background-color: $bg-color;
     display: block;
     width: $dropdown-width;
     position: relative;
@@ -123,7 +124,7 @@ $chevron-weight: rem(1px);
         top: 100%;
         z-index: $z-index--dropdown;
 
-        background-color: white;
+        background-color: $bg-color--options;
         border: rem(1px) solid $svart;
         border-top: none;
         box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.16);
@@ -149,11 +150,11 @@ $chevron-weight: rem(1px);
         &:focus,
         &:hover {
             background-color: $svart;
-            color: white;
+            color: $bg-color--options;
         }
 
         html:not([data-mousenavigation]) &:focus {
-            background-color: white;
+            background-color: $bg-color--options;
             color: $svart;
             box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px $border-color--focus;
         }

diff --git a/packages/table/table.scss b/packages/table/table.scss
@@ -1,6 +1,7 @@
 @import "~@fremtind/jkl-core/variables/_all.scss";
 
 $bottom-border-size: rem(1px);
+$highlight-color: $helhvit;
 
 .jkl-table {
     border-collapse: collapse;
@@ -41,7 +42,7 @@ $bottom-border-size: rem(1px);
             cursor: pointer;
 
             &:hover {
-                background-color: white;
+                background-color: $highlight-color;
                 box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.2);
             }
 
@@ -56,7 +57,7 @@ $bottom-border-size: rem(1px);
 
         /* Focus-within is not supported by IE/Edge */
         &:focus-within {
-            background-color: white;
+            background-color: $highlight-color;
             box-shadow: 0 0 0 1px inset $himmel;
         }
     }