added default variable values for SCSS

Author: AlexKrupko

src/sass/DatePickerX.scss

@@ -1,10 +1,7 @@
-.date-picker-x {
-    $background: #444;
-    $active: #06f;
-    $daySize: 44px;
-    $weekdaySize: 24px;
+@import "variables";
 
-    background: $background;
+.date-picker-x {
+    background: $dpxBackgroundColor;
     box-sizing: content-box;
     color: #fff;
     display: none;
@@ -13,11 +10,11 @@
     position: absolute;
     transform: translateY(15px);
     user-select: none;
-    width: $daySize * 7;
+    width: $dpxDaySize * 7;
     z-index: 1;
 
     &::before {
-        border-color: $background transparent;
+        border-color: $dpxBackgroundColor transparent;
         border-style: solid;
         border-width: 0 10px 10px;
         bottom: 100%;
@@ -67,7 +64,7 @@
         box-sizing: content-box;
         display: flex;
         flex-wrap: wrap;
-        height: $weekdaySize + $daySize * 6;
+        height: $dpxWeekdaySize + $dpxDaySize * 6;
         justify-content: center;
         padding-top: 10px;
     }
@@ -91,23 +88,23 @@
             cursor: pointer;
 
             &:hover {
-                box-shadow: inset 0 0 0 2px lighten($active, 10%), inset 0 0 0 4px $background;
+                box-shadow: inset 0 0 0 2px lighten($dpxActiveColor, 10%), inset 0 0 0 4px $dpxBackgroundColor;
             }
         }
     }
     .dpx-weekday {
         font-size: 15px;
-        height: $weekdaySize !important;
+        height: $dpxWeekdaySize !important;
     }
     &[data-dpx-type="day"] .dpx-item {
-        flex-basis: $daySize;
-        height: $daySize;
+        flex-basis: $dpxDaySize;
+        height: $dpxDaySize;
     }
     .dpx-current {
-        box-shadow: inset 0 0 0 2px lighten($active, 20%);
+        box-shadow: inset 0 0 0 2px lighten($dpxActiveColor, 20%);
     }
     .dpx-selected {
-        background: $active;
+        background: $dpxActiveColor;
     }
     .dpx-weekend {
         color: #f99;
@@ -121,7 +118,7 @@
         box-shadow: none !important;
 
         &.dpx-current {
-            box-shadow: inset 0 0 0 2px lighten($active, 20%) !important;
+            box-shadow: inset 0 0 0 2px lighten($dpxActiveColor, 20%) !important;
         }
     }
 }

src/sass/_variables.scss

@@ -0,0 +1,4 @@
+$dpxBackgroundColor: #444 !default;
+$dpxActiveColor: #06f !default;
+$dpxDaySize: 44px !default;
+$dpxWeekdaySize: 24px !default;