diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
index b787db5e..067be337 100644
--- a/components/app_bar/_config.scss
+++ b/components/app_bar/_config.scss
@@ -1,6 +1,6 @@
 $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
-$appbar-title-total-distance: 8 * $unit;
+$appbar-title-total-distance: 8 * $unit !default;
 $appbar-height: 6.4 * $unit !default;
-$appbar-h-padding: 2.4 * $unit;
-$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding;
+$appbar-h-padding: 2.4 * $unit !default;
+$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
index f0aecc64..6fdef1b9 100644
--- a/components/autocomplete/Autocomplete.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -40,7 +40,7 @@ class Autocomplete extends React.Component {
 
  componentWillReceiveProps (nextProps) {
    if (!this.props.multiple) {
-     this.setState({query: nextProps.value});
+     this.setState({query: this.query(nextProps.value)});
    }
  }
 
diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index 4e06dc08..e0280558 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -1,7 +1,7 @@
 $autocomplete-color-primary-contrast: $color-primary-contrast !default;
 $autocomplete-color-primary: $color-primary !default;
-$autocomplete-overflow-max-height: 45vh;
+$autocomplete-overflow-max-height: 45vh !default;
 $autocomplete-suggestion-active-background: $palette-grey-200 !default;
-$autocomplete-suggestion-padding: $unit;
+$autocomplete-suggestion-padding: $unit !default;
 $autocomplete-suggestions-background: $color-white !default;
-$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 45ec2f95..8dc4f510 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -9,13 +9,13 @@ $button-accent-color-hover: rgba($color-accent, 0.20) !default;
 $button-accent-color: $color-accent !default;
 $button-disabled-text-color: rgba($color-black, 0.26) !default;
 $button-disabled-background-color: rgba($color-black, 0.12) !default;
-$button-border-radius: 0.2 * $unit;
-$button-floating-font-size: $unit * 2.4;
-$button-floating-height: $unit * 5.6;
-$button-floating-mini-height: $unit * 4;
-$button-floating-mini-font-size: $button-floating-mini-height / 2.25;
-$button-height: $unit * 3.6;
-$button-squared-icon-margin: $unit * .6;
-$button-squared-min-width: 9 * $unit;
-$button-squared-padding: 0 $unit * 1.2;
-$button-toggle-font-size: $unit * 2;
+$button-border-radius: 0.2 * $unit !default;
+$button-floating-font-size: $unit * 2.4 !default;
+$button-floating-height: $unit * 5.6 !default;
+$button-floating-mini-height: $unit * 4 !default;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
+$button-height: $unit * 3.6 !default;
+$button-squared-icon-margin: $unit * .6 !default;
+$button-squared-min-width: 9 * $unit !default;
+$button-squared-padding: 0 $unit * 1.2 !default;
+$button-toggle-font-size: $unit * 2 !default;
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 7483abec..c89b3cb5 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -1,7 +1,7 @@
 $card-color-white: $color-white !default;
 $card-text-overlay: rgba($color-black, 0.35) !default;
 $card-background-color: $card-color-white !default;
-$card-padding-sm: .8 * $unit;
-$card-padding: 1.6 * $unit;
-$card-padding-lg: 2 * $unit;
-$card-font-size: $font-size-small;
+$card-padding-sm: .8 * $unit !default;
+$card-padding: 1.6 * $unit !default;
+$card-padding-lg: 2 * $unit !default;
+$card-font-size: $font-size-small !default;
diff --git a/components/date_picker/_config.scss b/components/date_picker/_config.scss
index 857dd366..50242fff 100644
--- a/components/date_picker/_config.scss
+++ b/components/date_picker/_config.scss
@@ -5,14 +5,14 @@ $datepicker-primary-color: $datepicker-primary !default;
 $datepicker-primary-hover-color: rgba($datepicker-primary, 0.20) !default;
 $datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
 $datepicker-primary-dark-color: $datepicker-primary-dark !default;
-$datepicker-dialog-width: 33 * $unit;
-$datepicker-inactive-opacity: .6;
-$datepicker-weekday-line-height: 2 * $unit;
-$datepicker-weekday-font-size: $font-size-small;
-$datepicker-month-font-size: $font-size-big;
-$datepicker-day-font-size: 5 * $unit;
-$datepicker-day-line-height: 4 * $unit;
-$datepicker-year-font-size: $font-size-small;
+$datepicker-dialog-width: 33 * $unit !default;
+$datepicker-inactive-opacity: .6 !default;
+$datepicker-weekday-line-height: 2 * $unit !default;
+$datepicker-weekday-font-size: $font-size-small !default;
+$datepicker-month-font-size: $font-size-big !default;
+$datepicker-day-font-size: 5 * $unit !default;
+$datepicker-day-line-height: 4 * $unit !default;
+$datepicker-year-font-size: $font-size-small !default;
 
 $calendar-primary: $color-primary !default;
 $calendar-primary-contrast: $color-primary-contrast !default;
@@ -20,11 +20,11 @@ $calendar-primary-color: $calendar-primary !default;
 $calendar-primary-contrast-color: $calendar-primary-contrast !default;
 $calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
 $calendar-arrows-color: $palette-grey-600 !default;
-$calendar-arrows-font-size: 2 * $unit;
-$calendar-year-font-size: 2.4;
-$calendar-day-font-size: 1.3 * $unit;
-$calendar-day-disable-opacity: 0.25;
-$calendar-row-height: 3 * $unit;
-$calendar-day-padding: .2 * $unit;
-$calendar-title-height: 3.6 * $unit;
-$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12;
+$calendar-arrows-font-size: 2 * $unit !default;
+$calendar-year-font-size: 2.4 !default;
+$calendar-day-font-size: 1.3 * $unit !default;
+$calendar-day-disable-opacity: 0.25 !default;
+$calendar-row-height: 3 * $unit !default;
+$calendar-day-padding: .2 * $unit !default;
+$calendar-title-height: 3.6 * $unit !default;
+$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12 !default;
diff --git a/components/dialog/_config.scss b/components/dialog/_config.scss
index cc1d6884..c522075c 100644
--- a/components/dialog/_config.scss
+++ b/components/dialog/_config.scss
@@ -1,6 +1,6 @@
-$dialog-border-radius: .2 * $unit;
+$dialog-border-radius: .2 * $unit !default;
 $dialog-color-title: $color-black !default;
 $dialog-color-white: $color-white !default;
-$dialog-content-padding: 2.4 * $unit;
-$dialog-navigation-padding: .8 * $unit;
-$dialog-translate-y: 4 * $unit;
+$dialog-content-padding: 2.4 * $unit !default;
+$dialog-navigation-padding: .8 * $unit !default;
+$dialog-translate-y: 4 * $unit !default;
diff --git a/components/drawer/_config.scss b/components/drawer/_config.scss
index 22012504..2401bc69 100644
--- a/components/drawer/_config.scss
+++ b/components/drawer/_config.scss
@@ -1,4 +1,4 @@
 $drawer-background-color: $palette-grey-50 !default;
 $drawer-border-color: $palette-grey-300 !default;
 $drawer-text-color: $palette-grey-800 !default;
-$drawer-width: 24 * $unit;
+$drawer-width: 24 * $unit !default;
diff --git a/components/dropdown/_config.scss b/components/dropdown/_config.scss
index 9fab8437..364815c0 100644
--- a/components/dropdown/_config.scss
+++ b/components/dropdown/_config.scss
@@ -2,5 +2,5 @@ $dropdown-color-white: $color-white !default;
 $dropdown-color-primary: $color-primary !default;
 $dropdown-color-primary-contrast: $color-primary-contrast !default;
 $dropdown-value-hover-background: $palette-grey-200 !default;
-$dropdown-overflow-max-height: 45vh;
-$dropdown-value-border-radius: .2 * $unit;
+$dropdown-overflow-max-height: 45vh !default;
+$dropdown-value-border-radius: .2 * $unit !default;
diff --git a/components/input/_config.scss b/components/input/_config.scss
index a13dab4d..4c76f14b 100644
--- a/components/input/_config.scss
+++ b/components/input/_config.scss
@@ -1,9 +1,9 @@
-$input-padding: 2 * $unit;
-$input-field-padding: .8 * $unit;
-$input-field-font-size: 1.6 * $unit;
-$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4;
-$input-label-font-size: 1.2 * $unit;
-$input-focus-label-top: .6 * $unit;
+$input-padding: 2 * $unit !default;
+$input-field-padding: .8 * $unit !default;
+$input-field-font-size: 1.6 * $unit !default;
+$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
+$input-label-font-size: 1.2 * $unit !default;
+$input-focus-label-top: .6 * $unit !default;
 $input-text-background-color: transparent !default;
 $input-text-label-color: rgba($color-black, 0.26) !default;
 $input-text-bottom-border-color: rgba($color-black, 0.12) !default;
@@ -12,9 +12,9 @@ $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: rgb(222, 230, 38) !default;
 $input-text-required-color: rgb(222, 50, 38) !default;
-$input-underline-height:  2 * $unit;
-$input-icon-font-size: 2.4 * $unit;
-$input-icon-size: 2 * $input-icon-font-size;
-$input-icon-offset: 1.6 * $unit;
-$input-chevron-offset: .8 * $unit;
+$input-underline-height:  2 * $unit !default;
+$input-icon-font-size: 2.4 * $unit !default;
+$input-icon-size: 2 * $input-icon-font-size !default;
+$input-icon-offset: 1.6 * $unit !default;
+$input-chevron-offset: .8 * $unit !default;
 $input-hint-opacity: 1 !default;
diff --git a/components/list/_config.scss b/components/list/_config.scss
index 3fef370a..a8814551 100644
--- a/components/list/_config.scss
+++ b/components/list/_config.scss
@@ -1,18 +1,18 @@
-$list-vertical-padding: .8 * $unit;
-$list-horizontal-padding: 1.6 * $unit;
-$list-content-left-spacing: 7.2 * $unit;
-$list-subheader-height: 4.8 * $unit;
-$list-subheader-font-size: 1.4 * $unit;
-$list-subheader-font-weight: 500;
-$list-divider-height: .1 * $unit;
-$list-item-min-height: 4.8 * $unit;
-$list-item-min-height-legend: 7.2 * $unit;
+$list-vertical-padding: .8 * $unit !default;
+$list-horizontal-padding: 1.6 * $unit !default;
+$list-content-left-spacing: 7.2 * $unit !default;
+$list-subheader-height: 4.8 * $unit !default;
+$list-subheader-font-size: 1.4 * $unit !default;
+$list-subheader-font-weight: 500 !default;
+$list-divider-height: .1 * $unit !default;
+$list-item-min-height: 4.8 * $unit !default;
+$list-item-min-height-legend: 7.2 * $unit !default;
 $list-item-hover-color: $palette-grey-200 !default;
-$list-item-legend-margin-top: .3 * $unit;
-$list-item-icon-font-size: 2.4 * $unit;
-$list-item-icon-size: 1.8 * $unit;
-$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size;
-$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding;
-$list-item-avatar-height: 4 * $unit;
-$list-item-avatar-margin: .8 * $unit;
-$list-item-child-margin: .8 * $unit;
+$list-item-legend-margin-top: .3 * $unit !default;
+$list-item-icon-font-size: 2.4 * $unit !default;
+$list-item-icon-size: 1.8 * $unit !default;
+$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
+$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
+$list-item-avatar-height: 4 * $unit !default;
+$list-item-avatar-margin: .8 * $unit !default;
+$list-item-child-margin: .8 * $unit !default;
diff --git a/components/menu/_config.scss b/components/menu/_config.scss
index ca1f986f..0b534366 100644
--- a/components/menu/_config.scss
+++ b/components/menu/_config.scss
@@ -2,15 +2,15 @@ $menu-expand-duration: .3s !default;
 $menu-fade-duration: .2s !default;
 $menu-ripple-delay: .3s !default;
 $menu-background-color: $color-white !default;
-$menu-padding: .8 * $unit 0;
-$menu-outline-border-radius: .2 * $unit;
+$menu-padding: .8 * $unit 0 !default;
+$menu-outline-border-radius: .2 * $unit !default;
 $menu-item-hover-background: $palette-grey-200 !default;
 $menu-item-selected-background: transparent !default;
-$menu-item-icon-font-size: 2.4 * $unit;
-$menu-item-icon-size: 1.6 * $menu-item-icon-font-size;
-$menu-item-height: 4.8 * $unit;
-$menu-item-padding: 1.6 * $unit;
-$menu-item-font-size: 1.6 * $unit;
-$menu-divider-height: (4.8 * $unit) / 4;
-$menu-icon-size: 2.3 * $unit;
-$menu-icon-ripple-duration: 650ms;
+$menu-item-icon-font-size: 2.4 * $unit !default;
+$menu-item-icon-size: 1.6 * $menu-item-icon-font-size !default;
+$menu-item-height: 4.8 * $unit !default;
+$menu-item-padding: 1.6 * $unit !default;
+$menu-item-font-size: 1.6 * $unit !default;
+$menu-divider-height: (4.8 * $unit) / 4 !default;
+$menu-icon-size: 2.3 * $unit !default;
+$menu-icon-ripple-duration: 650ms !default;
diff --git a/components/progress_bar/_config.scss b/components/progress_bar/_config.scss
index 2d9d5d2b..f554b346 100644
--- a/components/progress_bar/_config.scss
+++ b/components/progress_bar/_config.scss
@@ -1,6 +1,6 @@
-$progress-height: .4 * $unit;
+$progress-height: .4 * $unit !default;
 $progress-main-color: $color-primary !default;
 $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
-$circle-wrapper-width: 60;
-$circle-radius: 25;
-$scale-ratio: $circle-radius / 20;
+$circle-wrapper-width: 60 !default;
+$circle-radius: 25 !default;
+$scale-ratio: $circle-radius / 20 !default;
diff --git a/components/radio/_config.scss b/components/radio/_config.scss
index 67de4b87..42bc3e9d 100644
--- a/components/radio/_config.scss
+++ b/components/radio/_config.scss
@@ -1,9 +1,9 @@
-$radio-field-margin-bottom: 1.5 * $unit;
+$radio-field-margin-bottom: 1.5 * $unit !default;
 $radio-button-size: 1.6 * $unit !default;
-$radio-inner-margin: $radio-button-size / 4;
+$radio-inner-margin: $radio-button-size / 4 !default;
 $radio-inner-color: $color-primary !default;
 $radio-focus-color: rgba($color-black, 0.1) !default;
 $radio-checked-focus-color: rgba($color-primary, 0.26) !default;
 $radio-text-color: $color-black !default;
 $radio-disabled-color: rgba($color-black, 0.26) !default;
-$radio-text-font-size: 1.4 * $unit;
+$radio-text-font-size: 1.4 * $unit !default;
diff --git a/components/slider/_config.scss b/components/slider/_config.scss
index 30c82699..a5b0799b 100644
--- a/components/slider/_config.scss
+++ b/components/slider/_config.scss
@@ -1,12 +1,12 @@
 $slider-main-color: $color-primary !default;
 $slider-main-color-contrast: $color-primary-contrast !default;
 $slider-snap-color: $color-black !default;
-$slider-knob-size: 3.2 * $unit;
-$slider-inner-knob-size: 1.2 * $unit;
-$slider-snap-size: .2 * $unit;
-$slider-input-width: 5 * $unit;
-$slider-bar-height: .2 * $unit;
-$slider-pin-size: 2.6 * $unit;
-$slider-pin-elevation: 1.7 * $unit;
-$slider-side-separation: 1 * $unit;
-$slider-empty-knob-border: .2 * $unit;
+$slider-knob-size: 3.2 * $unit !default;
+$slider-inner-knob-size: 1.2 * $unit !default;
+$slider-snap-size: .2 * $unit !default;
+$slider-input-width: 5 * $unit !default;
+$slider-bar-height: .2 * $unit !default;
+$slider-pin-size: 2.6 * $unit !default;
+$slider-pin-elevation: 1.7 * $unit !default;
+$slider-side-separation: 1 * $unit !default;
+$slider-empty-knob-border: .2 * $unit !default;
diff --git a/components/switch/_config.scss b/components/switch/_config.scss
index 31319bc2..78408471 100644
--- a/components/switch/_config.scss
+++ b/components/switch/_config.scss
@@ -16,7 +16,7 @@ $switch-thumb-size: 2 * $unit !default;
 $switch-thumb-on-color: $switch-color !default;
 $switch-focus-init-size: .8 * $unit !default;
 $switch-focus-size: $switch-total-height * 2 !default;
-$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2;
+$switch-focus-diff: ($switch-focus-size - $switch-focus-init-size) / 2 !default;
 $switch-ripple-duration: 650ms !default;
 $switch-font-size: $font-size-small !default;
 $switch-field-margin-bottom: 1.5 * $unit !default;
diff --git a/components/table/_config.scss b/components/table/_config.scss
index d08114f0..7ec3b5a2 100644
--- a/components/table/_config.scss
+++ b/components/table/_config.scss
@@ -1,5 +1,5 @@
-$table-row-height: 48px;
+$table-row-height: 48px !default;
 $table-row-divider: solid 1px rgba(0,0,0,.12) !default;
-$table-row-offset: 1.8 * $unit;
+$table-row-offset: 1.8 * $unit !default;
 $table-row-highlight: #eee !default;
 $table-text-color: #757575 !default;
diff --git a/components/tabs/_config.scss b/components/tabs/_config.scss
index 29c4e943..09ad76cb 100644
--- a/components/tabs/_config.scss
+++ b/components/tabs/_config.scss
@@ -1,11 +1,11 @@
-$tab-label-disabled-opacity: .2;
-$tab-label-h-padding: 1.2 * $unit;
-$tab-label-height: 4.8 * $unit;
-$tab-text-height: 1.4 * $unit;
-$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2;
+$tab-label-disabled-opacity: .2 !default;
+$tab-label-h-padding: 1.2 * $unit !default;
+$tab-label-height: 4.8 * $unit !default;
+$tab-text-height: 1.4 * $unit !default;
+$tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
 $tab-navigation-border-color: $color-divider !default;
 $tab-pointer-color: $color-primary !default;
-$tab-pointer-height: .2 * $unit;
+$tab-pointer-height: .2 * $unit !default;
 $tab-text: $color-black !default;
 $tab-text-color: $tab-text !default;
 $tab-text-inactive-color: rgba($tab-text, 0.70) !default;
diff --git a/components/time_picker/_config.scss b/components/time_picker/_config.scss
index 3ae81a87..b0fffb85 100644
--- a/components/time_picker/_config.scss
+++ b/components/time_picker/_config.scss
@@ -1,6 +1,6 @@
-$timepicker-header-font-size: 5.2 * $unit;
-$timepicker-header-padding: $unit;
-$timepicker-ampm-font-size: 1.6 * $unit;
+$timepicker-header-font-size: 5.2 * $unit !default;
+$timepicker-header-padding: $unit !default;
+$timepicker-ampm-font-size: 1.6 * $unit !default;
 $timepicker-primary: $color-primary !default;
 $timepicker-primary-contrast: $color-primary-contrast !default;
 $timepicker-primary-dark: $color-primary-dark !default;
@@ -8,11 +8,11 @@ $timepicker-primary-color: $timepicker-primary !default;
 $timepicker-primary-hover-color: rgba($timepicker-primary, 0.20) !default;
 $timepicker-primary-contrast-color: $timepicker-primary-contrast !default;
 $timepicker-primary-dark-color: $timepicker-primary-dark !default;
-$timepicker-ampm-height: 2.2 * $unit;
-$timepicker-ampm-width: 4 * $unit;
-$timepicker-dialog-width: 30 * $unit;
+$timepicker-ampm-height: 2.2 * $unit !default;
+$timepicker-ampm-width: 4 * $unit !default;
+$timepicker-dialog-width: 30 * $unit !default;
 
-$clock-padding: 1.5 * $unit 2 * $unit;
+$clock-padding: 1.5 * $unit 2 * $unit !default;
 $clock-primary: $color-primary !default;
 $clock-primary-contrast: $color-primary-contrast !default;
 $clock-primary-dark: $color-primary-dark !default;
@@ -20,8 +20,8 @@ $clock-primary-color: $clock-primary !default;
 $clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
 $clock-primary-contrast-color: $clock-primary-contrast !default;
 $clock-primary-dark-color: $clock-primary-dark !default;
-$clock-number-size: 2 * $unit;
-$clock-hand-width: .4 * $unit;
-$clock-hand-dot-size: 1 * $unit;
-$clock-knob-size: 3.4 * $unit;
-$clock-knob-small-size: 1.2 * $unit;
+$clock-number-size: 2 * $unit !default;
+$clock-hand-width: .4 * $unit !default;
+$clock-hand-dot-size: 1 * $unit !default;
+$clock-knob-size: 3.4 * $unit !default;
+$clock-knob-small-size: 1.2 * $unit !default;
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
index c255d40a..a2b11484 100644
--- a/spec/components/autocomplete.jsx
+++ b/spec/components/autocomplete.jsx
@@ -33,9 +33,9 @@ class AutocompleteTest extends React.Component {
 
         <Autocomplete
           label="Choose a country"
+          hint="Elements up to you..."
           multiple={false}
           onChange={this.handleSimpleChange}
-          placeholder="Elements up to you..."
           source={countriesArray}
           value={this.state.simple}
         />