diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 5d7213ea1..3db821edb 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -110,12 +110,12 @@
   text-decoration: none;
 
   &:hover {
-    background-color: lighten($color-midgray, 12);
+    background-color: color.adjust($color-midgray, 12);
     color: $color-white;
   }
 
   &:disabled {
-    background-color: darken($color-midgray, 5);
+    background-color: color.adjust($color-midgray, -5);
     color: $color-midgray;
     cursor: not-allowed;
   }
diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss
index 2db391928..f2219ded0 100644
--- a/src/styles/_filtereditor.scss
+++ b/src/styles/_filtereditor.scss
@@ -8,7 +8,7 @@
 }
 
 .maputnik-filter-editor {
-  @extend .clearfix;
+  @extend .clearfix; /* stylelint-disable-line */
   color: $color-lowgray;
 }
 
@@ -62,7 +62,7 @@
 }
 
 .maputnik-delete-filter {
-  @extend .maputnik-icon-button;
+  @extend .maputnik-icon-button; /* stylelint-disable-line */
 }
 
 .maputnik-filter-editor-block-action {
@@ -79,7 +79,7 @@
 }
 
 .maputnik-radio-as-button {
-  @extend .maputnik-button;
+  @extend .maputnik-button; /* stylelint-disable-line */
 
   border: solid 1px transparent;
 
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 87d6a0a8e..5a7e636c0 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -10,7 +10,7 @@
   padding-right: $margin-2;
   border: none;
   background-color: $color-gray;
-  color: lighten($color-lowgray, 12);
+  color: color.adjust($color-lowgray, 12);
 
   &:invalid {
     border: solid 1px #B71C1C;
@@ -19,7 +19,7 @@
 }
 
 .maputnik-string {
-  @extend .maputnik-input;
+  @extend .maputnik-input; /* stylelint-disable-line */
 
   &--multi {
     resize: vertical;
@@ -43,12 +43,12 @@
 }
 
 .maputnik-number {
-  @extend .maputnik-input;
+  @extend .maputnik-input; /* stylelint-disable-line */
 }
 
 //COLOR PICKER
 .maputnik-color {
-  @extend .maputnik-input;
+  @extend .maputnik-input; /* stylelint-disable-line */
 
   height: 26px;
 }
@@ -95,7 +95,7 @@
 
 // SELECT
 .maputnik-select {
-  @extend .maputnik-input;
+  @extend .maputnik-input; /* stylelint-disable-line */
 
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -117,7 +117,7 @@
 }
 
 .maputnik-button-selected {
-  background-color: lighten($color-midgray, 12);
+  background-color: color.adjust($color-midgray, 12);
   color: white;
 }
 
@@ -133,7 +133,7 @@
   outline: none;
 
   &-wrapper {
-    @extend .maputnik-input;
+    @extend .maputnik-input; /* stylelint-disable-line */
 
     padding-left: 0;
     padding-right: 0;
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index c3cc579ba..22ff541a1 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -48,7 +48,7 @@
     font-weight: 400;
     color: $color-lowgray;
     font-size: $font-size-6;
-    border-bottom-color: lighten($color-black, 0.1);
+    border-bottom-color: color.adjust($color-black, 0.1);
     user-select: none;
     list-style: none;
     z-index: 2000;
@@ -87,7 +87,7 @@
     height: 15px;
 
     svg {
-      fill: darken($color-lowgray, 20);
+      fill: color.adjust($color-lowgray, -20);
 
       &:hover {
         fill: $color-white;
@@ -101,13 +101,13 @@
 
   .maputnik-layer-list-item:hover,
   .maputnik-layer-list-item-selected {
-    background-color: lighten($color-black, 2);
+    background-color: color.adjust($color-black, 2);
 
     .maputnik-layer-list-icon-action {
       display: block;
 
       svg {
-        fill: darken($color-lowgray, 0.5);
+        fill: color.adjust($color-lowgray, -0.5);
       }
     }
   }
@@ -151,7 +151,7 @@
     border: solid 1px transparent;
     font-size: $font-size-6;
     color: $color-lowgray;
-    background-color: lighten($color-black, 2);
+    background-color: color.adjust($color-black, 2);
     user-select: none;
     padding: $margin-2;
 
@@ -185,7 +185,7 @@
 .maputnik-layer-editor-group {
   font-weight: bold;
   font-size: $font-size-5;
-  background-color: lighten($color-black, 2);
+  background-color: color.adjust($color-black, 2);
   color: $color-white;
   cursor: pointer;
   user-select: none;
@@ -232,7 +232,7 @@
 // PROPERTY
 .maputnik-default-property {
   .maputnik-input-block-label {
-    color: darken($color-lowgray, 20%);
+    color: color.adjust($color-lowgray, -20%);
   }
 
   .maputnik-string,
@@ -240,8 +240,8 @@
   .maputnik-color,
   .maputnik-select,
   .maputnik-checkbox-wrapper {
-    background-color: darken($color-gray, 2%);
-    color: darken($color-lowgray, 20%);
+    background-color: color.adjust($color-gray, -2%);
+    color: color.adjust($color-lowgray, -20%);
   }
 
   .maputnik-make-zoom-function svg {
@@ -249,17 +249,17 @@
   }
 
   .maputnik-multibutton .maputnik-button {
-    background-color: darken($color-midgray, 10%);
-    color: darken($color-lowgray, 20%);
+    background-color: color.adjust($color-midgray, -10%);
+    color: color.adjust($color-lowgray, -20%);
 
     &:hover {
-      background-color: lighten($color-midgray, 12);
+      background-color: color.adjust($color-midgray, 12);
       color: $color-white;
     }
   }
 
   .maputnik-multibutton .maputnik-button-selected {
-    background-color: darken($color-midgray, 2%);
+    background-color: color.adjust($color-midgray, -2%);
     color: $color-lowgray;
   }
 }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 3b08ded52..8b6b8e75a 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -72,12 +72,12 @@
 }
 
 .maputnik-modal-header-space {
-  @extend .maputnik-space;
+  @extend .maputnik-space; /* stylelint-disable-line */
 }
 
 //OPEN MODAL
 .maputnik-upload-button {
-  @extend .maputnik-big-button;
+  @extend .maputnik-big-button; /* stylelint-disable-line */
 }
 
 .maputnik-style-gallery-container {
@@ -139,12 +139,12 @@
 }
 
 .maputnik-add-layer {
-  @extend .clearfix;
+  @extend .clearfix; /* stylelint-disable-line */
 }
 
 //ADD MODAL
 .maputnik-add-layer-button {
-  @extend .maputnik-big-button;
+  @extend .maputnik-big-button; /* stylelint-disable-line */
 
   margin-right: $margin-3;
   float: right;
@@ -221,7 +221,7 @@
 }
 
 .maputnik-add-source {
-  @extend .clearfix;
+  @extend .clearfix; /* stylelint-disable-line */
 
   .maputnik-input-block-label {
     width: 30%;
@@ -233,7 +233,7 @@
 }
 
 .maputnik-add-source-button {
-  @extend .maputnik-big-button;
+  @extend .maputnik-big-button; /* stylelint-disable-line */
 
   display: inline-block;
   margin-top: 0;
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index dc62d25e9..90274e605 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -75,7 +75,7 @@
   }
 
   &:hover .maputnik-toolbar-link-wrapper {
-    background-color: lighten($color-midgray, 12);
+    background-color: color.adjust($color-midgray, 12);
     color: $color-white;
   }
 }
@@ -93,13 +93,13 @@
 .maputnik-toolbar-action {
   background: inherit;
   border-width: 0;
-  @extend .maputnik-toolbar-link;
+  @extend .maputnik-toolbar-link; /* stylelint-disable-line */
 }
 
 .maputnik-toolbar-select {
   background: inherit;
   border-width: 0;
-  @extend .maputnik-toolbar-link;
+  @extend .maputnik-toolbar-link; /* stylelint-disable-line */
 
   select {
     margin-left: 6px;
diff --git a/src/styles/_zoomproperty.scss b/src/styles/_zoomproperty.scss
index ae9d72a2d..7a76e6b42 100644
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -5,12 +5,12 @@
   vertical-align: middle;
   padding: 0 $margin-2 0 0;
 
-  @extend .maputnik-icon-button;
+  @extend .maputnik-icon-button; /* stylelint-disable-line */
 }
 
 // ZOOM PROPERTY
 .maputnik-zoom-spec-property {
-  @extend .clearfix;
+  @extend .clearfix; /* stylelint-disable-line */
 }
 
 .maputnik-zoom-spec-property-label {
@@ -49,7 +49,7 @@
   padding-top: 0;
   vertical-align: middle;
 
-  @extend .maputnik-icon-button;
+  @extend .maputnik-icon-button; /* stylelint-disable-line */
 }
 
 .maputnik-add-stop {
@@ -65,7 +65,7 @@
   vertical-align: middle;
   padding: 0 $margin-2 0 0;
 
-  @extend .maputnik-icon-button;
+  @extend .maputnik-icon-button; /* stylelint-disable-line */
 }
 
 .maputnik-data-spec-property {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3b8b69ae4..865cf9944 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -28,9 +28,6 @@
   height: 14px;
 }
 
-.maputnik-data-spec-property {
-}
-
 .maputnik-data-fieldset-inner {
   background: $color-black;
   border: solid 1px $color-midgray;