change sass variables to customizable

src/styles/scss/colors.scss

@@ -11,17 +11,17 @@
 // $dark: black;
 // $white: white;
 
-$init: #f4f4f4; // default
-$primary: #9100ff;
+$init: #f4f4f4 !default; // default
+$primary: #9100ff !default;
 $secondary: desaturate($primary, 85);
 $success: adjust_hue(desaturate($primary, 45), 200);
 $danger: adjust_hue($primary, 60);
 $warning: adjust_hue($primary, 125);
 $info: adjust_hue($primary, 275);
 $dark: darken($primary, 45);
 $light: lighten($primary, 45);
-$white: #ffffff;
-$code: #f0f0f0;
+$white: #ffffff !default;
+$code: #f0f0f0 !default;
 
 // THEME 2
 // $init: #f4f4f4; // default

src/styles/scss/typography.scss

@@ -1,23 +1,23 @@
-$base-body-font-family: inherit;
-$base-body-font-family-mono: inherit;
-$base-body-font-size: 1rem;
-$base-body-line-height: 1.5rem;
+$base-body-font-family: inherit !default;
+$base-body-font-family-mono: inherit !default;
+$base-body-font-size: 1rem !default;
+$base-body-line-height: 1.5rem !default;
 
-$base-heading-font-family: inherit;
-$base-heading-font-weight: 700;
-$base-heading-font-size: 16px;
-$base-heading-line-height: 2rem;
+$base-heading-font-family: inherit !default;
+$base-heading-font-weight: 700 !default;
+$base-heading-font-size: 16px !default;
+$base-heading-line-height: 2rem !default;
 
-$props-types-name-text: red;
-$props-types-name-bg: #fff0f1;
+$props-types-name-text: red !default;
+$props-types-name-bg: #fff0f1 !default;
 
-$props-types-text: $dark;
-$props-types-bg: $white;
-$props-types-border: none;
+$props-types-text: $dark !default;
+$props-types-bg: $white !default;
+$props-types-border: none !default;
 
-$base-heading-h1-font-size: 36px;
-$base-heading-h2-font-size: 30px;
-$base-heading-h3-font-size: 24px;
-$base-heading-h4-font-size: 20px;
-$base-heading-h5-font-size: 18px;
-$base-heading-h6-font-size: 16px;
+$base-heading-h1-font-size: 36px !default;
+$base-heading-h2-font-size: 30px !default;
+$base-heading-h3-font-size: 24px !default;
+$base-heading-h4-font-size: 20px !default;
+$base-heading-h5-font-size: 18px !default;
+$base-heading-h6-font-size: 16px !default;

src/styles/scss/variables.scss

@@ -1,24 +1,23 @@
 // BORDERS
-$base-border-radius: 4px;
+$base-border-radius: 4px !default;
 
 //TYPOGRAPHY
-$base-font-weight-bold: bold;
-$base-line-height: 1.8;
-$base-font-size: 16px;
+$base-font-weight-bold: bold !default;
+$base-line-height: 1.8 !default;
+$base-font-size: 16px !default;
 
-$base-font-size-h1: 26px;
-$base-font-size-h2: 24px;
-$base-font-size-h3: 22px;
-$base-font-size-h4: 20px;
-$base-font-size-h5: 18px;
-$base-font-size-h6: 16px;
+$base-font-size-h1: 26px !default;
+$base-font-size-h2: 24px !default;
+$base-font-size-h3: 22px !default;
+$base-font-size-h4: 20px !default;
+$base-font-size-h5: 18px !default;
+$base-font-size-h6: 16px !default;
 
 //SPACING
-$base-box-padding: 10px;
+$base-box-padding: 10px !default;
 
 // ANIMATIONS
-
-$base-transition-speed: 0.2s;
+$base-transition-speed: 0.2s !default;
 
 // TABLES
-$base-table-cell-padding: 10px;
+$base-table-cell-padding: 10px !default;