diff --git a/docs/theming.md b/docs/theming.md
index 32f5e6754e6..5ed851192e4 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -249,6 +249,10 @@ provide, as part of the Sass definitions in `mdc-theme`. Pretty simple!
 the [color section](https://material.io/go/design-theming) in the Material Design spec to inform your pick of an
 alternative palette.
 
+If you want to go a step further with your theming then you can override any SASS variable throughout the codebase by
+redefining it in your application's SASS file. Exercise caution when doing this, however, as modifying internal variables
+may have unintended consequences.
+
 
 ### Step 4: Changing the theme with CSS Custom Properties
 
diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss
index 840dfcc53c6..3a622f09cf3 100644
--- a/packages/mdc-button/_variables.scss
+++ b/packages/mdc-button/_variables.scss
@@ -20,9 +20,9 @@
 // THE SOFTWARE.
 //
 
-$mdc-button-height: 36px;
-$mdc-button-horizontal-padding: 8px;
-$mdc-button-contained-horizontal-padding: 16px;
-$mdc-dense-button-height: 32px;
+$mdc-button-height: 36px !default;
+$mdc-button-horizontal-padding: 8px !default;
+$mdc-button-contained-horizontal-padding: 16px !default;
+$mdc-dense-button-height: 32px !default;
 
-$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
+$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
diff --git a/packages/mdc-card/_variables.scss b/packages/mdc-card/_variables.scss
index a7cb60d69f6..7e457d46b8e 100644
--- a/packages/mdc-card/_variables.scss
+++ b/packages/mdc-card/_variables.scss
@@ -22,5 +22,5 @@
 
 @import "@material/theme/mixins";
 
-$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
-$mdc-card-outline-width: 1px;
+$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !default;
+$mdc-card-outline-width: 1px !default;
diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
index bae3e2223fd..c716ddebd5f 100644
--- a/packages/mdc-chips/_variables.scss
+++ b/packages/mdc-chips/_variables.scss
@@ -23,38 +23,38 @@
 @import "@material/animation/variables";
 @import "@material/theme/variables";
 
-$mdc-chip-fill-color-default: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
-$mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87);
-$mdc-chip-horizontal-padding: 12px;
-$mdc-chip-vertical-padding: 7px;
-$mdc-chip-height-default: 32px;
+$mdc-chip-fill-color-default: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !default;
+$mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87) !default;
+$mdc-chip-horizontal-padding: 12px !default;
+$mdc-chip-vertical-padding: 7px !default;
+$mdc-chip-height-default: 32px !default;
 
-$mdc-chip-icon-color: mdc-theme-prop-value(on-surface);
-$mdc-chip-icon-opacity: .54;
-$mdc-chip-trailing-icon-hover-opacity: .62;
-$mdc-chip-trailing-icon-focus-opacity: .87;
-$mdc-chip-leading-icon-size: 20px;
-$mdc-chip-trailing-icon-size: 18px;
-$mdc-chip-leading-icon-delay: -50ms; // Speed up delay to bridge gap between leading icon and checkmark transition.
-$mdc-chip-checkmark-with-leading-icon-delay: 80ms;
+$mdc-chip-icon-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-chip-icon-opacity: .54 !default;
+$mdc-chip-trailing-icon-hover-opacity: .62 !default;
+$mdc-chip-trailing-icon-focus-opacity: .87 !default;
+$mdc-chip-leading-icon-size: 20px !default;
+$mdc-chip-trailing-icon-size: 18px !default;
+$mdc-chip-leading-icon-delay: -50ms !default; // Speed up delay to bridge gap between leading icon and checkmark transition.
+$mdc-chip-checkmark-with-leading-icon-delay: 80ms !default;
 
-$mdc-chip-checkmark-animation-delay: 50ms;
-$mdc-chip-checkmark-animation-duration: 150ms;
-$mdc-chip-width-animation-duration: 150ms;
-$mdc-chip-opacity-animation-duration: 75ms;
+$mdc-chip-checkmark-animation-delay: 50ms !default;
+$mdc-chip-checkmark-animation-duration: 150ms !default;
+$mdc-chip-width-animation-duration: 150ms !default;
+$mdc-chip-opacity-animation-duration: 75ms !default;
 
-$mdc-chip-leading-icon-margin-top: -4px;
-$mdc-chip-leading-icon-margin-right: 4px;
-$mdc-chip-leading-icon-margin-bottom: -4px;
-$mdc-chip-leading-icon-margin-left: -4px;
+$mdc-chip-leading-icon-margin-top: -4px !default;
+$mdc-chip-leading-icon-margin-right: 4px !default;
+$mdc-chip-leading-icon-margin-bottom: -4px !default;
+$mdc-chip-leading-icon-margin-left: -4px !default;
 
-$mdc-chip-trailing-icon-margin-top: 0;
-$mdc-chip-trailing-icon-margin-right: -4px;
-$mdc-chip-trailing-icon-margin-bottom: 0;
-$mdc-chip-trailing-icon-margin-left: 4px;
+$mdc-chip-trailing-icon-margin-top: 0 !default;
+$mdc-chip-trailing-icon-margin-right: -4px !default;
+$mdc-chip-trailing-icon-margin-bottom: 0 !default;
+$mdc-chip-trailing-icon-margin-left: 4px !default;
 
 $mdc-chip-exit-transition:
   opacity 75ms $mdc-animation-standard-curve-timing-function,
   width 150ms $mdc-animation-deceleration-curve-timing-function,
   padding 100ms linear,
-  margin 100ms linear;
+  margin 100ms linear !default;
diff --git a/packages/mdc-dialog/_variables.scss b/packages/mdc-dialog/_variables.scss
index 55e110e7a01..2ce201d17c4 100644
--- a/packages/mdc-dialog/_variables.scss
+++ b/packages/mdc-dialog/_variables.scss
@@ -20,19 +20,19 @@
 // THE SOFTWARE.
 //
 
-$mdc-dialog-scrim-color: on-surface;
-$mdc-dialog-title-ink-color: on-surface;
-$mdc-dialog-content-ink-color: on-surface;
-$mdc-dialog-scroll-divider-color: on-surface;
+$mdc-dialog-scrim-color: on-surface !default;
+$mdc-dialog-title-ink-color: on-surface !default;
+$mdc-dialog-content-ink-color: on-surface !default;
+$mdc-dialog-scroll-divider-color: on-surface !default;
 
-$mdc-dialog-scrim-opacity: .32;
-$mdc-dialog-title-ink-opacity: .87;
-$mdc-dialog-content-ink-opacity: .6;
-$mdc-dialog-scroll-divider-opacity: .12;
+$mdc-dialog-scrim-opacity: .32 !default;
+$mdc-dialog-title-ink-opacity: .87 !default;
+$mdc-dialog-content-ink-opacity: .6 !default;
+$mdc-dialog-scroll-divider-opacity: .12 !default;
 
-$mdc-dialog-min-width: 280px;
-$mdc-dialog-max-width: 560px;
-$mdc-dialog-margin: 16px;
-$mdc-dialog-title-bottom-padding: 9px;
+$mdc-dialog-min-width: 280px !default;
+$mdc-dialog-max-width: 560px !default;
+$mdc-dialog-margin: 16px !default;
+$mdc-dialog-title-bottom-padding: 9px !default;
 
-$mdc-dialog-z-index: 7;
+$mdc-dialog-z-index: 7 !default;
diff --git a/packages/mdc-drawer/_variables.scss b/packages/mdc-drawer/_variables.scss
index 8438b24bf54..92ff9c9065c 100644
--- a/packages/mdc-drawer/_variables.scss
+++ b/packages/mdc-drawer/_variables.scss
@@ -23,34 +23,34 @@
 @import "@material/theme/variables";
 
 // Colors
-$mdc-drawer-title-ink-color: mdc-theme-prop-value(on-surface);
-$mdc-drawer-subtitle-ink-color: mdc-theme-prop-value(on-surface);
-$mdc-drawer-item-inactive-ink-color: mdc-theme-prop-value(on-surface);
-$mdc-drawer-item-activated-ink-color: mdc-theme-prop-value(primary);
-$mdc-drawer-divider-color: mdc-theme-prop-value(on-surface);
-$mdc-drawer-surface-fill-color: mdc-theme-prop-value(surface);
+$mdc-drawer-title-ink-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-drawer-subtitle-ink-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-drawer-item-inactive-ink-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-drawer-item-activated-ink-color: mdc-theme-prop-value(primary) !default;
+$mdc-drawer-divider-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-drawer-surface-fill-color: mdc-theme-prop-value(surface) !default;
 
 // Opacity
-$mdc-drawer-title-ink-opacity: mdc-theme-text-emphasis(high);
-$mdc-drawer-subtitle-ink-opacity: mdc-theme-text-emphasis(medium);
-$mdc-drawer-item-inactive-icon-ink-opacity: mdc-theme-text-emphasis(medium);
-$mdc-drawer-item-inactive-text-ink-opacity: mdc-theme-text-emphasis(high);
-$mdc-drawer-item-active-icon-ink-opacity: 1;
-$mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high);
-$mdc-drawer-divider-opacity: .12;
+$mdc-drawer-title-ink-opacity: mdc-theme-text-emphasis(high) !default;
+$mdc-drawer-subtitle-ink-opacity: mdc-theme-text-emphasis(medium) !default;
+$mdc-drawer-item-inactive-icon-ink-opacity: mdc-theme-text-emphasis(medium) !default;
+$mdc-drawer-item-inactive-text-ink-opacity: mdc-theme-text-emphasis(high) !default;
+$mdc-drawer-item-active-icon-ink-opacity: 1 !default;
+$mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high) !default;
+$mdc-drawer-divider-opacity: .12 !default;
 
 // Widths
-$mdc-drawer-width: 256px;
-$mdc-drawer-list-item-spacing: 4px;
-$mdc-drawer-surface-padding: 16px;
+$mdc-drawer-width: 256px !default;
+$mdc-drawer-list-item-spacing: 4px !default;
+$mdc-drawer-surface-padding: 16px !default;
 
 // Animations
-$mdc-drawer-animation-enter: 250ms;
-$mdc-drawer-animation-exit: 200ms;
+$mdc-drawer-animation-enter: 250ms !default;
+$mdc-drawer-animation-exit: 200ms !default;
 
 // Scrim
-$mdc-drawer-modal-scrim-color: mdc-theme-prop-value(on-surface);
-$mdc-drawer-modal-scrim-opacity: .32;
+$mdc-drawer-modal-scrim-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-drawer-modal-scrim-opacity: .32 !default;
 
-$mdc-drawer-z-index: 6;
-$mdc-drawer-modal-elevation: 16;
+$mdc-drawer-z-index: 6 !default;
+$mdc-drawer-modal-elevation: 16 !default;
diff --git a/packages/mdc-elevation/_variables.scss b/packages/mdc-elevation/_variables.scss
index a2edabae7a1..4b9c9d5f275 100644
--- a/packages/mdc-elevation/_variables.scss
+++ b/packages/mdc-elevation/_variables.scss
@@ -22,10 +22,10 @@
 
 @import "@material/animation/variables";
 
-$mdc-elevation-baseline-color: black;
-$mdc-elevation-umbra-opacity: .2;
-$mdc-elevation-penumbra-opacity: .14;
-$mdc-elevation-ambient-opacity: .12;
+$mdc-elevation-baseline-color: black !default;
+$mdc-elevation-umbra-opacity: .2 !default;
+$mdc-elevation-penumbra-opacity: .14 !default;
+$mdc-elevation-ambient-opacity: .12 !default;
 
 $mdc-elevation-umbra-map: (
   0: "0px 0px 0px 0px",
@@ -53,7 +53,7 @@ $mdc-elevation-umbra-map: (
   22: "0px 10px 14px -6px",
   23: "0px 11px 14px -7px",
   24: "0px 11px 15px -7px"
-);
+) !default;
 
 $mdc-elevation-penumbra-map: (
   0: "0px 0px 0px 0px",
@@ -81,7 +81,7 @@ $mdc-elevation-penumbra-map: (
   22: "0px 22px 35px 3px",
   23: "0px 23px 36px 3px",
   24: "0px 24px 38px 3px"
-);
+) !default;
 
 $mdc-elevation-ambient-map: (
   0: "0px 0px 0px 0px",
@@ -109,7 +109,7 @@ $mdc-elevation-ambient-map: (
   22: "0px 8px 42px 7px",
   23: "0px 9px 44px 8px",
   24: "0px 9px 46px 8px"
-);
+) !default;
 
 // The css property used for elevation. In most cases this should not be changed. It is exposed
 // as a variable for abstraction / easy use when needing to reference the property directly, for
diff --git a/packages/mdc-fab/_variables.scss b/packages/mdc-fab/_variables.scss
index c0886e99829..0a17d6b9642 100644
--- a/packages/mdc-fab/_variables.scss
+++ b/packages/mdc-fab/_variables.scss
@@ -20,8 +20,8 @@
 // THE SOFTWARE.
 //
 
-$mdc-fab-extended-icon-padding: 12px;
-$mdc-fab-extended-label-padding: 20px;
-$mdc-fab-height: 56px;
-$mdc-fab-mini-height: 40px;
-$mdc-fab-extended-height: 48px;
+$mdc-fab-extended-icon-padding: 12px !default;
+$mdc-fab-extended-label-padding: 20px !default;
+$mdc-fab-height: 56px !default;
+$mdc-fab-mini-height: 40px !default;
+$mdc-fab-extended-height: 48px !default;
diff --git a/packages/mdc-floating-label/_variables.scss b/packages/mdc-floating-label/_variables.scss
index d620221afa2..8a6b0a123d2 100644
--- a/packages/mdc-floating-label/_variables.scss
+++ b/packages/mdc-floating-label/_variables.scss
@@ -20,5 +20,5 @@
 // THE SOFTWARE.
 //
 
-$mdc-floating-label-position-y: 50%;
-$mdc-floating-label-transition-duration: 150ms;
+$mdc-floating-label-position-y: 50% !default;
+$mdc-floating-label-transition-duration: 150ms !default;
diff --git a/packages/mdc-icon-button/_variables.scss b/packages/mdc-icon-button/_variables.scss
index 0db3502aab5..921a5e65a31 100644
--- a/packages/mdc-icon-button/_variables.scss
+++ b/packages/mdc-icon-button/_variables.scss
@@ -20,4 +20,4 @@
 // THE SOFTWARE.
 //
 
-$mdc-icon-button-size: 24px;
+$mdc-icon-button-size: 24px !default;
diff --git a/packages/mdc-image-list/_variables.scss b/packages/mdc-image-list/_variables.scss
index 9e1d12a3119..67fb08af576 100644
--- a/packages/mdc-image-list/_variables.scss
+++ b/packages/mdc-image-list/_variables.scss
@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-$mdc-image-list-standard-gutter-size: 4px;
-$mdc-image-list-masonry-gutter-size: 16px;
-$mdc-image-list-icon-size: 24px;
-$mdc-image-list-text-protection-background-color: rgba(0, 0, 0, .6);
-$mdc-image-list-text-protection-height: 48px;
-$mdc-image-list-text-protection-horizontal-padding: 16px;
+$mdc-image-list-standard-gutter-size: 4px !default;
+$mdc-image-list-masonry-gutter-size: 16px !default;
+$mdc-image-list-icon-size: 24px !default;
+$mdc-image-list-text-protection-background-color: rgba(0, 0, 0, .6) !default;
+$mdc-image-list-text-protection-height: 48px !default;
+$mdc-image-list-text-protection-horizontal-padding: 16px !default;
diff --git a/packages/mdc-linear-progress/_variables.scss b/packages/mdc-linear-progress/_variables.scss
index 624814606e1..8fecc244045 100644
--- a/packages/mdc-linear-progress/_variables.scss
+++ b/packages/mdc-linear-progress/_variables.scss
@@ -18,4 +18,4 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-$mdc-linear-progress-baseline-buffer-color: #e6e6e6;
+$mdc-linear-progress-baseline-buffer-color: #e6e6e6 !default;
diff --git a/packages/mdc-list/_variables.scss b/packages/mdc-list/_variables.scss
index f07e6d17f28..a197c195a3f 100644
--- a/packages/mdc-list/_variables.scss
+++ b/packages/mdc-list/_variables.scss
@@ -20,5 +20,5 @@
 
 $mdc-list-divider-color-on-light-bg: rgba(0, 0, 0, .12) !default;
 $mdc-list-divider-color-on-dark-bg: rgba(255, 255, 255, .2) !default;
-$mdc-list-side-padding: 16px;
-$mdc-list-text-offset: 72px;
+$mdc-list-side-padding: 16px !default;
+$mdc-list-text-offset: 72px !default;
diff --git a/packages/mdc-menu-surface/_variables.scss b/packages/mdc-menu-surface/_variables.scss
index 116c4557b9d..4b32090a919 100644
--- a/packages/mdc-menu-surface/_variables.scss
+++ b/packages/mdc-menu-surface/_variables.scss
@@ -20,8 +20,8 @@
 // THE SOFTWARE.
 //
 
-$mdc-menu-surface-fade-in-duration: .03s;
-$mdc-menu-surface-fade-out-duration: .075s;
-$mdc-menu-surface-scale-duration: .12s;
-$mdc-menu-surface-min-distance-from-edge: 32px;
+$mdc-menu-surface-fade-in-duration: .03s !default;
+$mdc-menu-surface-fade-out-duration: .075s !default;
+$mdc-menu-surface-scale-duration: .12s !default;
+$mdc-menu-surface-min-distance-from-edge: 32px !default;
 $mdc-menu-surface-z-index: 8 !default; // One above mdc-dialog
diff --git a/packages/mdc-menu/_variables.scss b/packages/mdc-menu/_variables.scss
index a918a4eef95..c06c1790471 100644
--- a/packages/mdc-menu/_variables.scss
+++ b/packages/mdc-menu/_variables.scss
@@ -20,5 +20,5 @@
 // THE SOFTWARE.
 //
 
-$mdc-menu-width-base: 56px;
-$mdc-menu-min-width: 2 * $mdc-menu-width-base;
+$mdc-menu-width-base: 56px !default;
+$mdc-menu-min-width: 2 * $mdc-menu-width-base !default;
diff --git a/packages/mdc-notched-outline/_variables.scss b/packages/mdc-notched-outline/_variables.scss
index 655703837b2..cd68c93a370 100644
--- a/packages/mdc-notched-outline/_variables.scss
+++ b/packages/mdc-notched-outline/_variables.scss
@@ -20,14 +20,14 @@
 // THE SOFTWARE.
 //
 
-$mdc-notched-outline-transition-duration: 150ms;
+$mdc-notched-outline-transition-duration: 150ms !default;
 // Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION
-$mdc-notched-outline-min-leading-stroke-edge-position: 12px;
+$mdc-notched-outline-min-leading-stroke-edge-position: 12px !default;
 // The gap between the stroke end and floating label
 // Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE
-$mdc-notched-outline-notch-gutter-size: 4px;
-$mdc-notched-outline-leading-width: 12px;
-$mdc-notched-outline-padding: 4px;
+$mdc-notched-outline-notch-gutter-size: 4px !default;
+$mdc-notched-outline-leading-width: 12px !default;
+$mdc-notched-outline-padding: 4px !default;
 // This variable keeps the before/after JS label centered in the notch when the font-size is changed.
-$mdc-notched-outline-label-adjust: 14%;
+$mdc-notched-outline-label-adjust: 14% !default;
 
diff --git a/packages/mdc-radio/_variables.scss b/packages/mdc-radio/_variables.scss
index 3ab83b31372..8514b20ca34 100644
--- a/packages/mdc-radio/_variables.scss
+++ b/packages/mdc-radio/_variables.scss
@@ -22,11 +22,11 @@
 
 @import "@material/theme/variables";
 
-$mdc-radio-touch-area: 40px;
-$mdc-radio-ui-size: 20px;
-$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
-$mdc-radio-transition-duration: 120ms;
-$mdc-radio-ripple-opacity: .14;
-$mdc-radio-baseline-theme-color: secondary;
-$mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54);
-$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26);
+$mdc-radio-touch-area: 40px !default;
+$mdc-radio-ui-size: 20px !default;
+$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area) !default;
+$mdc-radio-transition-duration: 120ms !default;
+$mdc-radio-ripple-opacity: .14 !default;
+$mdc-radio-baseline-theme-color: secondary !default;
+$mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
+$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;
diff --git a/packages/mdc-ripple/_variables.scss b/packages/mdc-ripple/_variables.scss
index edec310a635..74160408590 100644
--- a/packages/mdc-ripple/_variables.scss
+++ b/packages/mdc-ripple/_variables.scss
@@ -20,10 +20,10 @@
 // THE SOFTWARE.
 //
 
-$mdc-ripple-fade-in-duration: 75ms;
-$mdc-ripple-fade-out-duration: 150ms;
-$mdc-ripple-translate-duration: 225ms;
-$mdc-states-wash-duration: 15ms;
+$mdc-ripple-fade-in-duration: 75ms !default;
+$mdc-ripple-fade-out-duration: 150ms !default;
+$mdc-ripple-translate-duration: 225ms !default;
+$mdc-states-wash-duration: 15ms !default;
 
 $mdc-ripple-dark-ink-opacities: (
   hover: .04,
@@ -43,5 +43,5 @@ $mdc-ripple-light-ink-opacities: (
 
 // Legacy
 
-$mdc-ripple-pressed-dark-ink-opacity: .16;
-$mdc-ripple-pressed-light-ink-opacity: .32;
+$mdc-ripple-pressed-dark-ink-opacity: .16 !default;
+$mdc-ripple-pressed-light-ink-opacity: .32 !default;
diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
index f9af967415a..b290feb7567 100644
--- a/packages/mdc-select/_variables.scss
+++ b/packages/mdc-select/_variables.scss
@@ -23,43 +23,43 @@
 @import "@material/animation/variables";
 @import "@material/theme/variables";
 
-$mdc-select-arrow-padding: 52px;
-$mdc-select-label-padding: 16px;
-$mdc-select-height: 56px;
-$mdc-select-icon-padding: 48px;
+$mdc-select-arrow-padding: 52px !default;
+$mdc-select-label-padding: 16px !default;
+$mdc-select-height: 56px !default;
+$mdc-select-icon-padding: 48px !default;
 
-$mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
-$mdc-select-dropdown-color: mdc-theme-prop-value(on-surface);
-$mdc-select-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
-$mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), .6);
-$mdc-select-focused-label-color: rgba(mdc-theme-prop-value(primary), .87);
-$mdc-select-bottom-line-idle-color: rgba(mdc-theme-prop-value(on-surface), .42);
-$mdc-select-bottom-line-hover-color: rgba(mdc-theme-prop-value(on-surface), .87);
-$mdc-select-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
+$mdc-select-dropdown-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-select-icon-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
+$mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), .6) !default;
+$mdc-select-focused-label-color: rgba(mdc-theme-prop-value(primary), .87) !default;
+$mdc-select-bottom-line-idle-color: rgba(mdc-theme-prop-value(on-surface), .42) !default;
+$mdc-select-bottom-line-hover-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
+$mdc-select-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .6) !default;
 
-$mdc-select-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%);
+$mdc-select-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%) !default;
 
-$mdc-select-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .24);
-$mdc-select-dropdown-opacity: .54;
+$mdc-select-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .24) !default;
+$mdc-select-dropdown-opacity: .54 !default;
 
 // Disabled Styles
-$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37);
-$mdc-select-disabled-icon-color: rgba(mdc-theme-prop-value(on-surface), .37);
-$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
-$mdc-select-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%);
-$mdc-select-disabled-dropdown-opacity: .37;
+$mdc-select-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-select-disabled-icon-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-select-disabled-fill-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%) !default;
+$mdc-select-disabled-dropdown-opacity: .37 !default;
 
 // should be .06 after mdc-select opacity is applied
-$mdc-select-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .16);
-$mdc-select-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-select-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .16) !default;
+$mdc-select-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87) !default;
 
-$mdc-select-label-position-y: 70%;
-$mdc-select-outline-label-offset: 16px;
-$mdc-select-outlined-label-position-y: 130%;
-$mdc-select-outlined-dense-label-position-y: 110%;
-$mdc-select-outlined-with-leading-icon-label-position-x: 32px;
+$mdc-select-label-position-y: 70% !default;
+$mdc-select-outline-label-offset: 16px !default;
+$mdc-select-outlined-label-position-y: 130% !default;
+$mdc-select-outlined-dense-label-position-y: 110% !default;
+$mdc-select-outlined-with-leading-icon-label-position-x: 32px !default;
 
-$mdc-select-dropdown-transition-duration: 150ms;
+$mdc-select-dropdown-transition-duration: 150ms !default;
 
 // Error colors
-$mdc-select-error-color: error;
+$mdc-select-error-color: error !default;
diff --git a/packages/mdc-shape/_variables.scss b/packages/mdc-shape/_variables.scss
index 6aa8cab71ad..948bd5b5a44 100644
--- a/packages/mdc-shape/_variables.scss
+++ b/packages/mdc-shape/_variables.scss
@@ -30,4 +30,4 @@ $mdc-shape-category-values: (
   small: $mdc-shape-small-component-radius,
   medium: $mdc-shape-medium-component-radius,
   large: $mdc-shape-large-component-radius,
-);
+) !default;
diff --git a/packages/mdc-slider/_variables.scss b/packages/mdc-slider/_variables.scss
index c9696725901..4d11c793fc6 100644
--- a/packages/mdc-slider/_variables.scss
+++ b/packages/mdc-slider/_variables.scss
@@ -20,4 +20,4 @@
 // THE SOFTWARE.
 //
 
-$mdc-slider-baseline-rail-opacity: .26;
+$mdc-slider-baseline-rail-opacity: .26 !default;
diff --git a/packages/mdc-switch/_variables.scss b/packages/mdc-switch/_variables.scss
index 7f202d356cb..de08586d05b 100644
--- a/packages/mdc-switch/_variables.scss
+++ b/packages/mdc-switch/_variables.scss
@@ -22,31 +22,31 @@
 
 @import "@material/theme/variables";
 
-$mdc-switch-track-width: 32px;
-$mdc-switch-track-height: 14px;
-$mdc-switch-thumb-diameter: 20px;
-$mdc-switch-tap-target-size: 48px;
+$mdc-switch-track-width: 32px !default;
+$mdc-switch-track-height: 14px !default;
+$mdc-switch-thumb-diameter: 20px !default;
+$mdc-switch-tap-target-size: 48px !default;
 
 // Amount the edge of the thumb should be offset from the edge of the track.
-$mdc-switch-thumb-offset: 4px;
+$mdc-switch-thumb-offset: 4px !default;
 
 // Position for the tap target that contains the thumb to align the thumb correctly offset from the track.
 $mdc-switch-tap-target-initial-position:
   -$mdc-switch-tap-target-size / 2 + $mdc-switch-thumb-diameter / 2 -
-  $mdc-switch-thumb-offset;
+  $mdc-switch-thumb-offset !default;
 
 // Value to cover the whole switch area (including the ripple) with the native control.
 $mdc-switch-native-control-width:
   $mdc-switch-track-width +
   ($mdc-switch-tap-target-size - $mdc-switch-thumb-diameter) +
-  $mdc-switch-thumb-offset * 2;
+  $mdc-switch-thumb-offset * 2 !default;
 
-$mdc-switch-thumb-active-margin: $mdc-switch-track-width - $mdc-switch-thumb-diameter + $mdc-switch-thumb-offset * 2;
+$mdc-switch-thumb-active-margin: $mdc-switch-track-width - $mdc-switch-thumb-diameter + $mdc-switch-thumb-offset * 2 !default;
 
-$mdc-switch-toggled-off-thumb-color: mdc-theme-prop-value(surface);
-$mdc-switch-toggled-off-track-color: mdc-theme-prop-value(on-surface);
-$mdc-switch-toggled-off-ripple-color: #9e9e9e;
-$mdc-switch-disabled-thumb-color: mdc-theme-prop-value(surface);
-$mdc-switch-disabled-track-color: mdc-theme-prop-value(on-surface);
+$mdc-switch-toggled-off-thumb-color: mdc-theme-prop-value(surface) !default;
+$mdc-switch-toggled-off-track-color: mdc-theme-prop-value(on-surface) !default;
+$mdc-switch-toggled-off-ripple-color: #9e9e9e !default;
+$mdc-switch-disabled-thumb-color: mdc-theme-prop-value(surface) !default;
+$mdc-switch-disabled-track-color: mdc-theme-prop-value(on-surface) !default;
 
-$mdc-switch-baseline-theme-color: secondary;
+$mdc-switch-baseline-theme-color: secondary !default;
diff --git a/packages/mdc-tab/_variables.scss b/packages/mdc-tab/_variables.scss
index d007678ac4a..9463990cb96 100644
--- a/packages/mdc-tab/_variables.scss
+++ b/packages/mdc-tab/_variables.scss
@@ -20,8 +20,8 @@
 // THE SOFTWARE.
 //
 
-$mdc-tab-icon-size: 24px;
-$mdc-tab-height: 48px;
-$mdc-tab-stacked-height: 72px;
-$mdc-tab-text-label-opacity: .6;
-$mdc-tab-icon-opacity: .54;
+$mdc-tab-icon-size: 24px !default;
+$mdc-tab-height: 48px !default;
+$mdc-tab-stacked-height: 72px !default;
+$mdc-tab-text-label-opacity: .6 !default;
+$mdc-tab-icon-opacity: .54 !default;
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index e1861f8153a..0f372d28098 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -19,46 +19,46 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 //
-$mdc-text-field-error: error;
-$mdc-text-field-fullwidth-bottom-line-color: rgba(mdc-theme-prop-value(on-surface), .12);
-$mdc-text-field-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06);
-$mdc-text-field-disabled-icon: rgba(mdc-theme-prop-value(on-surface), .3);
-$mdc-text-field-bottom-line-hover: rgba(mdc-theme-prop-value(on-surface), .87);
-$mdc-text-field-bottom-line-idle: rgba(mdc-theme-prop-value(on-surface), .42);
-$mdc-text-field-label: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-text-field-error: error !default;
+$mdc-text-field-fullwidth-bottom-line-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
+$mdc-text-field-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06) !default;
+$mdc-text-field-disabled-icon: rgba(mdc-theme-prop-value(on-surface), .3) !default;
+$mdc-text-field-bottom-line-hover: rgba(mdc-theme-prop-value(on-surface), .87) !default;
+$mdc-text-field-bottom-line-idle: rgba(mdc-theme-prop-value(on-surface), .42) !default;
+$mdc-text-field-label: rgba(mdc-theme-prop-value(on-surface), .6) !default;
 
-$mdc-text-field-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
-$mdc-text-field-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .6);
-$mdc-text-field-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
-$mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value(primary), .87);
+$mdc-text-field-ink-color: rgba(mdc-theme-prop-value(on-surface), .87) !default;
+$mdc-text-field-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .6) !default;
+$mdc-text-field-icon-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
+$mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value(primary), .87) !default;
 
-$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37);
-$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
-$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .37);
+$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
+$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
 
-$mdc-text-field-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%);
-$mdc-text-field-disabled-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%);
-$mdc-text-field-secondary-text: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-text-field-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%) !default;
+$mdc-text-field-disabled-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%) !default;
+$mdc-text-field-secondary-text: rgba(mdc-theme-prop-value(on-surface), .6) !default;
 
-$mdc-text-field-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .24);
-$mdc-text-field-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06);
-$mdc-text-field-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-text-field-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .24) !default;
+$mdc-text-field-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06) !default;
+$mdc-text-field-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87) !default;
 
-$mdc-textarea-border: rgba(mdc-theme-prop-value(on-surface), .73);
-$mdc-textarea-background: rgba(mdc-theme-prop-value(surface), 1);
-$mdc-textarea-disabled-border-color: rgba(mdc-theme-prop-value(on-surface), .26);
+$mdc-textarea-border: rgba(mdc-theme-prop-value(on-surface), .73) !default;
+$mdc-textarea-background: rgba(mdc-theme-prop-value(surface), 1) !default;
+$mdc-textarea-disabled-border-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;
 // cannot be transparent because multiline textarea input
 // will make text unreadable
-$mdc-textarea-disabled-background: rgba(249, 249, 249, 1);
+$mdc-textarea-disabled-background: rgba(249, 249, 249, 1) !default;
 
-$mdc-text-field-height: 56px;
-$mdc-text-field-label-position-y: 50%;
-$mdc-text-field-label-offset: 16px;
-$mdc-text-field-dense-label-position-y: 70%;
-$mdc-text-field-dense-label-scale: .8;
-$mdc-text-field-outlined-label-position-y: 130%;
-$mdc-text-field-outlined-dense-label-position-y: 120%;
-$mdc-text-field-outlined-with-leading-icon-label-position-x: 0;
-$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
-$mdc-text-field-textarea-label-position-y: 130%;
+$mdc-text-field-height: 56px !default;
+$mdc-text-field-label-position-y: 50% !default;
+$mdc-text-field-label-offset: 16px !default;
+$mdc-text-field-dense-label-position-y: 70% !default;
+$mdc-text-field-dense-label-scale: .8 !default;
+$mdc-text-field-outlined-label-position-y: 130% !default;
+$mdc-text-field-outlined-dense-label-position-y: 120% !default;
+$mdc-text-field-outlined-with-leading-icon-label-position-x: 0 !default;
+$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px !default;
+$mdc-text-field-textarea-label-position-y: 130% !default;
 // Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
diff --git a/packages/mdc-textfield/icon/_variables.scss b/packages/mdc-textfield/icon/_variables.scss
index 0bac5b0bd5c..60dfbec7249 100644
--- a/packages/mdc-textfield/icon/_variables.scss
+++ b/packages/mdc-textfield/icon/_variables.scss
@@ -20,9 +20,9 @@
 // THE SOFTWARE.
 //
 
-$mdc-text-field-icon-position: 16px;
-$mdc-text-field-trailing-icon-position: 12px;
-$mdc-text-field-icon-padding: 48px;
-$mdc-text-field-dense-icon-padding: 44px;
-$mdc-text-field-dense-icon-position: 12px;
-$mdc-text-field-dense-icon-padding: 38px;
+$mdc-text-field-icon-position: 16px !default;
+$mdc-text-field-trailing-icon-position: 12px !default;
+$mdc-text-field-icon-padding: 48px !default;
+$mdc-text-field-dense-icon-padding: 44px !default;
+$mdc-text-field-dense-icon-position: 12px !default;
+$mdc-text-field-dense-icon-padding: 38px !default;
diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss
index 5ba73a95ddb..b7510c7be4b 100644
--- a/packages/mdc-theme/_variables.scss
+++ b/packages/mdc-theme/_variables.scss
@@ -69,7 +69,7 @@ $mdc-theme-text-emphasis: (
   high: .87,
   medium: .6,
   disabled: .38,
-);
+) !default;
 
 @function mdc-theme-ink-color-for-fill_($text-style, $fill-color) {
   $contrast-tone: mdc-theme-contrast-tone($fill-color);
@@ -114,7 +114,7 @@ $mdc-theme-property-values: (
   text-hint-on-dark: mdc-theme-ink-color-for-fill_(hint, dark),
   text-disabled-on-dark: mdc-theme-ink-color-for-fill_(disabled, dark),
   text-icon-on-dark: mdc-theme-ink-color-for-fill_(icon, dark)
-);
+) !default;
 
 // If `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.
 // Otherwise, `$style` is treated as a theme property name, and the corresponding value from
diff --git a/packages/mdc-toolbar/_variables.scss b/packages/mdc-toolbar/_variables.scss
index 53cd2d4a9b9..bff6a15d9d1 100644
--- a/packages/mdc-toolbar/_variables.scss
+++ b/packages/mdc-toolbar/_variables.scss
@@ -20,25 +20,25 @@
 // THE SOFTWARE.
 //
 
-$mdc-toolbar-row-height: 64px;
-$mdc-toolbar-mobile-row-height: 56px;
-$mdc-toolbar-mobile-landscape-row-height: 48px;
+$mdc-toolbar-row-height: 64px !default;
+$mdc-toolbar-mobile-row-height: 56px !default;
+$mdc-toolbar-mobile-landscape-row-height: 48px !default;
 
-$mdc-toolbar-element-section-padding: 8px;
-$mdc-toolbar-element-mobile-section-padding: 4px;
+$mdc-toolbar-element-section-padding: 8px !default;
+$mdc-toolbar-element-mobile-section-padding: 4px !default;
 
-$mdc-toolbar-element-horizontal-padding-desktop: 24px;
-$mdc-toolbar-element-horizontal-padding-mobile: 16px;
-$mdc-toolbar-title-margin-to-menu-icon-desktop: 8px;
-$mdc-toolbar-title-margin-to-menu-icon-mobile: 16px;
+$mdc-toolbar-element-horizontal-padding-desktop: 24px !default;
+$mdc-toolbar-element-horizontal-padding-mobile: 16px !default;
+$mdc-toolbar-title-margin-to-menu-icon-desktop: 8px !default;
+$mdc-toolbar-title-margin-to-menu-icon-mobile: 16px !default;
 
 $mdc-toolbar-ratio-to-extend-flexible: 4 !default;
 
-$mdc-toolbar-mobile-landscape-width-breakpoint: 959px;
-$mdc-toolbar-mobile-breakpoint: 599px;
+$mdc-toolbar-mobile-landscape-width-breakpoint: 959px !default;
+$mdc-toolbar-mobile-breakpoint: 599px !default;
 
-$mdc-toolbar-icon-padding: 12px;
-$mdc-toolbar-section-horizontal-padding: 12px;
-$mdc-toolbar-mobile-section-horizontal-padding: 4px;
+$mdc-toolbar-icon-padding: 12px !default;
+$mdc-toolbar-section-horizontal-padding: 12px !default;
+$mdc-toolbar-mobile-section-horizontal-padding: 4px !default;
 
-$mdc-toolbar-icon-size: 24px;
+$mdc-toolbar-icon-size: 24px !default;
diff --git a/packages/mdc-top-app-bar/_variables.scss b/packages/mdc-top-app-bar/_variables.scss
index ec6fb1f4418..56f7a0176f6 100644
--- a/packages/mdc-top-app-bar/_variables.scss
+++ b/packages/mdc-top-app-bar/_variables.scss
@@ -21,36 +21,36 @@
 //
 
 // Default styles
-$mdc-top-app-bar-row-height: 64px;
-$mdc-top-app-bar-title-left-padding: 20px;
-$mdc-top-app-bar-section-vertical-padding: 8px;
-$mdc-top-app-bar-section-horizontal-padding: 12px;
+$mdc-top-app-bar-row-height: 64px !default;
+$mdc-top-app-bar-title-left-padding: 20px !default;
+$mdc-top-app-bar-section-vertical-padding: 8px !default;
+$mdc-top-app-bar-section-horizontal-padding: 12px !default;
 
-$mdc-top-app-bar-icon-padding: 12px;
-$mdc-top-app-bar-icon-size: 24px;
+$mdc-top-app-bar-icon-padding: 12px !default;
+$mdc-top-app-bar-icon-size: 24px !default;
 
 $mdc-top-app-bar-mobile-breakpoint: 599px !default;
 
 // Default mobile styles
-$mdc-top-app-bar-mobile-row-height: 56px;
-$mdc-top-app-bar-mobile-section-padding: 4px;
+$mdc-top-app-bar-mobile-row-height: 56px !default;
+$mdc-top-app-bar-mobile-section-padding: 4px !default;
 
 // Short top app bar
-$mdc-top-app-bar-short-collapsed-border-radius: 4px;
-$mdc-top-app-bar-short-collapsed-width: 56px;
-$mdc-top-app-bar-short-collapsed-right-icon-padding: 12px;
+$mdc-top-app-bar-short-collapsed-border-radius: 4px !default;
+$mdc-top-app-bar-short-collapsed-width: 56px !default;
+$mdc-top-app-bar-short-collapsed-right-icon-padding: 12px !default;
 
 // Prominent styles
-$mdc-top-app-bar-prominent-row-height: 128px;
-$mdc-top-app-bar-prominent-title-bottom-padding: 2px;
+$mdc-top-app-bar-prominent-row-height: 128px !default;
+$mdc-top-app-bar-prominent-title-bottom-padding: 2px !default;
 
 // Prominent mobile styles
-$mdc-top-app-bar-prominent-mobile-title-bottom-padding: 6px;
+$mdc-top-app-bar-prominent-mobile-title-bottom-padding: 6px !default;
 
 // Dense styles
-$mdc-top-app-bar-dense-row-height: 48px;
-$mdc-top-app-bar-dense-section-horizontal-padding: 4px;
-$mdc-top-app-bar-dense-title-left-padding: 12px;
+$mdc-top-app-bar-dense-row-height: 48px !default;
+$mdc-top-app-bar-dense-section-horizontal-padding: 4px !default;
+$mdc-top-app-bar-dense-title-left-padding: 12px !default;
 
 // Dense & Prominent styles
-$mdc-top-app-bar-prominent-dense-title-bottom-padding: 9px;
+$mdc-top-app-bar-prominent-dense-title-bottom-padding: 9px !default;
diff --git a/packages/mdc-typography/_variables.scss b/packages/mdc-typography/_variables.scss
index 9b3295329d4..bb798ecfdc3 100644
--- a/packages/mdc-typography/_variables.scss
+++ b/packages/mdc-typography/_variables.scss
@@ -28,7 +28,7 @@ $mdc-typography-base: (
   font-family: $mdc-typography-font-family,
   -moz-osx-font-smoothing: grayscale,
   -webkit-font-smoothing: antialiased,
-);
+) !default;
 
 $mdc-typography-font-weight-values: (
   thin: 100,