diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
index df80775b52bbbb..310fb0072666be 100644
--- a/docs/src/app/components/pages/components/switches.jsx
+++ b/docs/src/app/components/pages/components/switches.jsx
@@ -202,9 +202,9 @@ var SwitchesPage = React.createClass({
           },
           {
             name: 'setSelectedValue',
-            header: 'RadioButtonGroup.setSelectedValue(newSelection)',
+            header: 'RadioButtonGroup.setSelectedValue(newSelectionValue)',
             desc: 'Sets the selected radio button to the radio button whose value matches ' +
-                  'newSelection'
+                  'newSelectionValue'
           },
           {
             name: 'clearValue',
@@ -338,7 +338,7 @@ var SwitchesPage = React.createClass({
             name="checkboxName2" 
             value="checkboxValue2"
             label="fed the dog"
-            defaultSwitched={true}/>
+            defaultChecked={true}/>
         </div>
         <div className="switches-example-container">
           <Checkbox
@@ -384,7 +384,6 @@ var SwitchesPage = React.createClass({
             label="initiate self-destruct sequence" 
             disabled={true}/>
         </div>
-
       </div>
     );
   },
diff --git a/src/js/checkbox.jsx b/src/js/checkbox.jsx
index 3b4eb2f9c90b69..411cd6fdb94529 100644
--- a/src/js/checkbox.jsx
+++ b/src/js/checkbox.jsx
@@ -1,39 +1,101 @@
 var React = require('react');
 var EnhancedSwitch = require('./enhanced-switch');
-var Classable = require('./mixins/classable');
+var StylePropable = require('./mixins/style-propable.js');
+var Transitions = require('./styles/mixins/transitions.js');
 var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank');
 var CheckboxChecked = require('./svg-icons/toggle-check-box-checked');
+var CustomVariables = require('./styles/variables/custom-variables.js');
 
 var Checkbox = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     onCheck: React.PropTypes.func,
   },
 
+  getInitialState: function() {
+    return {
+      switched: 
+        this.props.checked ||
+        this.props.defaultChecked || 
+        (this.props.valueLink && this.props.valueLink.value) || 
+        false,
+    }
+  },
+
   render: function() {
     var {
       onCheck,
       ...other
     } = this.props;
 
-    var classes = this.getClasses("mui-checkbox");
+    var checkboxSize = 24;
+
+    var iconStyles = {
+        height: checkboxSize,
+        width: checkboxSize,
+    }
+
+    var checkStyles = {
+        positiion: 'absolute',
+        opacity: 0,
+        transform: 'scale(0)',
+        transitionOrigin: '50% 50%',
+        transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + 
+                    Transitions.easeOut('0ms', 'transform', '450ms'),
+        fill: CustomVariables.checkboxCheckedColor   
+    }
+
+    var boxStyles = {
+        position: 'absolute',
+        opacity: 1,
+        fill: CustomVariables.checkboxBoxColor,          
+        transition: Transitions.easeOut('2s', null, '200ms') 
+    }
+
+    if (this.state.switched) {
+      checkStyles = this.mergePropStyles(checkStyles, {
+          opacity: 1,
+          transform: 'scale(1)',
+          transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + 
+                      Transitions.easeOut('800ms', 'transform', '0ms')
+        });
+      boxStyles = this.mergePropStyles(boxStyles, {
+          transition: Transitions.easeOut('100ms', null, '0ms'),
+          fill: CustomVariables.checkboxCheckedColor
+        });
+    }
+
+    if (this.props.disabled) {
+      checkStyles = this.mergePropStyles(checkStyles, {
+          opacity: 0.3,
+          fill: CustomVariables.disabledColor,
+        });
+      boxStyles = this.mergePropStyles(boxStyles, {
+          opacity: 0.3,
+          fill: CustomVariables.disabledColor,
+        });
+    }
+
+    if (this.state.switched && this.props.disabled) boxStyles.opacity = 0;
 
     var checkboxElement = (
       <div>
-        <CheckboxOutline className="mui-checkbox-box" />
-        <CheckboxChecked className="mui-checkbox-check" />
+        <CheckboxOutline style={boxStyles} />
+        <CheckboxChecked style={checkStyles} />
       </div>
     );
 
     var enhancedSwitchProps = {
       ref: "enhancedSwitch",
       inputType: "checkbox",
+      switched: this.state.switched,
       switchElement: checkboxElement,
-      className: classes,
-      iconClassName: "mui-checkbox-icon",
+      iconStyle: iconStyles,
       onSwitch: this._handleCheck,
+      onParentShouldUpdate: this._handleStateChange,
+      defaultSwitched: this.props.defaultChecked,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
     };
 
@@ -54,7 +116,12 @@ var Checkbox = React.createClass({
 
   _handleCheck: function(e, isInputChecked) {
     if (this.props.onCheck) this.props.onCheck(e, isInputChecked);
+  },
+
+  _handleStateChange: function(newSwitched) {
+    this.setState({switched: newSwitched});
   }
+
 });
 
 module.exports = Checkbox;
diff --git a/src/js/enhanced-switch.jsx b/src/js/enhanced-switch.jsx
index ea05a676e4c3f9..53714904e82ad0 100644
--- a/src/js/enhanced-switch.jsx
+++ b/src/js/enhanced-switch.jsx
@@ -1,9 +1,10 @@
 var React = require('react');
 var KeyCode = require('./utils/key-code');
-var Classable = require('./mixins/classable');
 var DomIdable = require('./mixins/dom-idable');
 var StylePropable = require('./mixins/style-propable.js');
+var Transitions = require('./styles/mixins/transitions.js');
 var WindowListenable = require('./mixins/window-listenable');
+var CustomVariables = require('./styles/variables/custom-variables.js');
 var FocusRipple = require('./ripples/focus-ripple');
 var TouchRipple = require('./ripples/touch-ripple');
 var Paper = require('./paper');
@@ -11,14 +12,18 @@ var Theme = require('./styles/theme.js').get();
 
 var EnhancedSwitch = React.createClass({
 
-  mixins: [Classable, DomIdable, WindowListenable, StylePropable],
+  mixins: [DomIdable, WindowListenable, StylePropable],
 
 	propTypes: {
       id: React.PropTypes.string,
       inputType: React.PropTypes.string.isRequired,
       switchElement: React.PropTypes.element.isRequired,
-      iconClassName: React.PropTypes.string.isRequired,
+      onParentShouldUpdate: React.PropTypes.func.isRequired,
+      switched: React.PropTypes.bool.isRequired,
       rippleStyle: React.PropTypes.object,
+      iconStyle: React.PropTypes.object,
+      thumbStyle: React.PropTypes.object,
+      trackStyle: React.PropTypes.object,
       name: React.PropTypes.string,
 	    value: React.PropTypes.string,
 	    label: React.PropTypes.string,
@@ -28,7 +33,7 @@ var EnhancedSwitch = React.createClass({
 	    defaultSwitched: React.PropTypes.bool,
       labelPosition: React.PropTypes.oneOf(['left', 'right']),
       disableFocusRipple: React.PropTypes.bool,
-      disableTouchRipple: React.PropTypes.bool
+      disableTouchRipple: React.PropTypes.bool,
 	  },
 
   windowListeners: {
@@ -36,23 +41,27 @@ var EnhancedSwitch = React.createClass({
     'keyup': '_handleWindowKeyup'
   },
 
-  getDefaultProps: function() {
-    return {
-      iconClassName: ''
-    };
-  },
-
   getInitialState: function() {
     return {
-      switched: this.props.defaultSwitched ||
-        (this.props.valueLink && this.props.valueLink.value),
       isKeyboardFocused: false
     }
   },
 
+  getEvenWidth: function(){
+    return (
+      parseInt(window
+        .getComputedStyle(this.getDOMNode())
+        .getPropertyValue('width'), 10)
+    );
+  },
+
   componentDidMount: function() {
     var inputNode = this.refs.checkbox.getDOMNode();
-    this.setState({switched: inputNode.checked});
+    if (!this.props.switched || 
+        this.props.switched == undefined ||
+        inputNode.checked != this.props.switched) this.props.onParentShouldUpdate(inputNode.checked);
+  
+    this.setState({parentWidth: this.getEvenWidth()});
   },
 
   componentWillReceiveProps: function(nextProps) {
@@ -72,7 +81,7 @@ var EnhancedSwitch = React.createClass({
       newState.switched = nextProps.checkedLink.value;
     }
 
-    if (newState) this.setState(newState);
+    if (newState.switched != undefined && (newState.switched != this.props.switched)) this.props.onParentShouldUpdate(newState.switched);
   },
 
   render: function() {
@@ -92,20 +101,52 @@ var EnhancedSwitch = React.createClass({
       onTouchEnd,
       disableTouchRipple,
       disableFocusRipple,
-      iconClassName,
       ...other
     } = this.props;
 
-    var classes = this.getClasses('mui-enhanced-switch', {
-      'mui-is-switched': this.state.switched,
-      'mui-is-disabled': this.props.disabled,
-      'mui-is-required': this.props.required
+    var switchWidth = 60 - CustomVariables.spacing.desktopGutterLess;
+    var labelWidth = this.state.parentWidth - switchWidth - 30;
+    var styles = this.mergePropStyles({
+        position: 'relative',
+        cursor: this.props.disabled ? 'default' : 'pointer',
+        overflow: 'visible',
+        display: 'table',
+        height: 'auto',
+        width: '100%'
     });
+    var inputStyles = {
+        position: 'absolute',
+        cursor: this.props.disabled ? 'default' : 'pointer',
+        pointerEvents: 'all',
+        opacity: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 2,
+        left: 0
+    };
+    var wrapStyles = this.mergePropStyles({
+        transition: Transitions.easeOut(),
+        float: 'left',
+        position: 'relative',
+        display: 'table-column',
+        width: switchWidth,
+        marginRight: (this.props.labelPosition == 'right') ? 
+          CustomVariables.spacing.desktopGutterLess : 0,
+        marginLeft: (this.props.labelPosition == 'left') ? 
+          CustomVariables.spacing.desktopGutterLess : 0
+    }, this.props.iconStyle);
+    var labelStyles = {
+        float: 'left',
+        position: 'relative',
+        display: 'table-column',
+        width: labelWidth,
+        lineHeight: '24px'
+    }
 
     var inputId = this.props.id || this.getDomId();
     
     var labelElement = this.props.label ? (
-      <label className="mui-switch-label" htmlFor={inputId}>
+      <label style={labelStyles} htmlFor={inputId}>
         {this.props.label}
       </label>
     ) : null;
@@ -133,7 +174,7 @@ var EnhancedSwitch = React.createClass({
       <input 
         {...other} 
         {...inputProps}
-        className="mui-enhanced-switch-input"/>
+        style={inputStyles}/>
     );
 
     var rippleStyle = this.mergePropStyles({
@@ -148,7 +189,7 @@ var EnhancedSwitch = React.createClass({
         ref="touchRipple"
         key="touchRipple"
         style={rippleStyle}
-        color={this.state.switched ? Theme.primary1Color : Theme.textColor}
+        color={this.props.switched ? Theme.primary1Color : Theme.textColor}
         centerRipple={true} />
     );
 
@@ -156,7 +197,7 @@ var EnhancedSwitch = React.createClass({
       <FocusRipple
         key="focusRipple"
         innerStyle={rippleStyle}
-        color={this.state.switched ? Theme.primary1Color : Theme.textColor}
+        color={this.props.switched ? Theme.primary1Color : Theme.textColor}
         show={this.state.isKeyboardFocused} />
     );
 
@@ -165,17 +206,17 @@ var EnhancedSwitch = React.createClass({
       this.props.disabled || disableFocusRipple ? null : focusRipple
     ];
 
-    iconClassName += ' mui-enhanced-switch-wrap';
-
-    var switchElement = (this.props.iconClassName.indexOf("toggle") == -1) ? (
-        <div className={iconClassName}>
+    // If toggle component (indicated by whether the style includes thumb) manually lay out 
+    // elements in order to nest ripple elements
+    var switchElement = !this.props.thumbStyle ? (
+        <div style={wrapStyles}>
           {this.props.switchElement}
           {ripples}
         </div>
       ) : (
-        <div className={iconClassName}>
-          <div className="mui-toggle-track" />
-          <Paper className="mui-toggle-thumb" zDepth={1}> {ripples} </Paper>
+        <div style={wrapStyles}>
+          <div style={this.props.trackStyle}/>
+          <Paper style={this.props.thumbStyle} zDepth={1}> {ripples} </Paper>
         </div>      
     );
 
@@ -196,7 +237,7 @@ var EnhancedSwitch = React.createClass({
     );
 
     return (
-      <div className={classes}>
+      <div style={styles}>
           {inputElement}
           {elementsInOrder}
       </div>
@@ -211,7 +252,8 @@ var EnhancedSwitch = React.createClass({
   // no callback here because there is no event
   setSwitched: function(newSwitchedValue) {
     if (!this.props.hasOwnProperty('checked') || this.props.checked == false) {
-      this.setState({switched: newSwitchedValue});  
+
+      this.props.onParentShouldUpdate(newSwitchedValue);  
       this.refs.checkbox.getDOMNode().checked = newSwitchedValue;
     } else {
       var message = 'Cannot call set method while checked is defined as a property.';
@@ -228,7 +270,6 @@ var EnhancedSwitch = React.createClass({
   },
 
   _handleChange: function(e) {
-    
     this._tabPressed = false;
     this.setState({
       isKeyboardFocused: false
@@ -236,7 +277,7 @@ var EnhancedSwitch = React.createClass({
 
     var isInputChecked = this.refs.checkbox.getDOMNode().checked;
     
-    if (!this.props.hasOwnProperty('checked')) this.setState({switched: isInputChecked});
+    if (!this.props.hasOwnProperty('checked')) this.props.onParentShouldUpdate(isInputChecked);
     if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked);
   },
 
diff --git a/src/js/radio-button-group.jsx b/src/js/radio-button-group.jsx
index 4cf31725bae842..62cdf131571448 100644
--- a/src/js/radio-button-group.jsx
+++ b/src/js/radio-button-group.jsx
@@ -1,13 +1,10 @@
 var React = require('react');
 var Paper = require('./paper');
-var Classable = require('./mixins/classable');
 var EnhancedSwitch = require('./enhanced-switch');
 var RadioButton = require('./radio-button');
 
 var RadioButtonGroup = React.createClass({
 
-	mixins: [Classable],
-
 	propTypes: {
 		name: React.PropTypes.string.isRequired,
     valueSelected: React.PropTypes.string,
@@ -99,8 +96,8 @@ var RadioButtonGroup = React.createClass({
     return this.state.selected;
   },
 
-  setSelectedValue: function(newSelection) {
-    this._updateRadioButtons(newSelection);  
+  setSelectedValue: function(newSelectionValue) {
+    this._updateRadioButtons(newSelectionValue);  
   },
 
   clearValue: function() {
diff --git a/src/js/radio-button.jsx b/src/js/radio-button.jsx
index e68195d321007b..dd53b75acf768e 100644
--- a/src/js/radio-button.jsx
+++ b/src/js/radio-button.jsx
@@ -1,12 +1,14 @@
 var React = require('react');
-var Classable = require('./mixins/classable');
+var StylePropable = require('./mixins/style-propable.js');
+var Transitions = require('./styles/mixins/transitions.js');
+var CustomVariables = require('./styles/variables/custom-variables.js');
 var EnhancedSwitch = require('./enhanced-switch');
 var RadioButtonOff = require('./svg-icons/toggle-radio-button-off');
 var RadioButtonOn = require('./svg-icons/toggle-radio-button-on');
 
 var RadioButton = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     onCheck: React.PropTypes.func
@@ -19,20 +21,69 @@ var RadioButton = React.createClass({
       ...other
     } = this.props;
 
+    var radioButtonSize = 24;
+    var iconStyles = {
+        height: radioButtonSize,
+        width: radioButtonSize
+    };
+    var targetStyles = {
+        transition: Transitions.easeOut(),
+        position: 'absolute',
+        opacity: 1,
+        transform: 'scale(1)',
+        fill: CustomVariables.radioButtonBorderColor
+    };
+    var fillStyles = {
+        position: 'absolute',
+        opacity: 1,
+        transform: 'scale(0)',
+        transformOrigin: '50% 50%',
+        transition: Transitions.easeOut(),
+        fill: CustomVariables.radioButtonCheckedColor
+    };
+
+    if (this.props.checked) {
+      targetStyles = this.mergePropStyles(targetStyles, {
+        opacity: 0,
+        transform: 'scale(0)'
+      });
+      fillStyles = this.mergePropStyles(fillStyles, {
+        opacity: 1,
+        transform: 'scale(1)'
+      });
+    }
+
+    if (this.props.disabled) {
+      targetStyles = this.mergePropStyles(targetStyles, {
+        opacity: 0.3,
+        fill: CustomVariables.radioButtonDisabledColor
+      });
+      fillStyles = this.mergePropStyles(fillStyles, {
+        opacity: 0.3,
+        fill: CustomVariables.radioButtonDisabledColor
+      });
+    }
+
+    if (this.props.checked && this.props.disabled) {
+      targetStyles.opacity = 0.3;
+      fillStyles.opacity = 0.3;
+    }
+
     var radioButtonElement = (
       <div>
-          <RadioButtonOff className="mui-radio-button-target" />
-          <RadioButtonOn className="mui-radio-button-fill" />
+          <RadioButtonOff style={targetStyles} />
+          <RadioButtonOn style={fillStyles} />
       </div>
     );
 
     var enhancedSwitchProps = {
       ref: "enhancedSwitch",
       inputType: "radio",
+      switched: this.props.checked,
       switchElement: radioButtonElement,
-      className: "mui-radio-button",
-      iconClassName: "mui-radio-button-icon",
+      iconStyle: iconStyles,
       onSwitch: this._handleCheck,
+      onParentShouldUpdate: this._handleStateChange,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
     };
 
@@ -48,18 +99,23 @@ var RadioButton = React.createClass({
     if (this.props.onCheck) this.props.onCheck(e, this.props.value);
   },
 
+  _handleStateChange: function(newSwitched) {
+  },
+
   isChecked: function() {
     return this.refs.enhancedSwitch.isSwitched();
   },
 
+  // Use RadioButtonGroup.setSelectedValue(newSelectionValue) to set a 
+  // RadioButton's checked value.
   setChecked: function(newCheckedValue) {
     this.refs.enhancedSwitch.setSwitched(newCheckedValue);
-    this.setState({switched: newCheckedValue});
   },
   
   getValue: function() {
     return this.refs.enhancedSwitch.getValue();
   }
+
 });
 
 module.exports = RadioButton;
diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
index e534bbfbdcde71..389422185151e3 100644
--- a/src/js/toggle.jsx
+++ b/src/js/toggle.jsx
@@ -1,11 +1,13 @@
 var React = require('react');
-var Classable = require('./mixins/classable');
+var StylePropable = require('./mixins/style-propable.js');
+var Transitions = require('./styles/mixins/transitions.js');
+var CustomVariables = require('./styles/variables/custom-variables.js');
 var Paper = require('./paper');
 var EnhancedSwitch = require('./enhanced-switch');
 
 var Toggle = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     onToggle: React.PropTypes.func,
@@ -13,16 +15,74 @@ var Toggle = React.createClass({
     defaultToggled: React.PropTypes.bool
   },
 
+  getInitialState: function() {
+    return {
+      switched: 
+        this.props.toggled ||
+        this.props.defaultToggled || 
+        (this.props.valueLink && this.props.valueLink.value) || 
+        false,
+    }
+  },
+
   render: function() {
     var {
       onToggle,
       ...other
     } = this.props;
 
+    var toggleSize = 20;
+    var toggleTrackWidth = 36;
+    var iconStyles = {
+        padding: '4px 0px 6px 2px'
+    };
+    var trackStyles = {
+        transition: Transitions.easeOut(),
+        width: toggleTrackWidth,
+        height: 14,
+        borderRadius: 30,
+        opacity: this.props.disabled ? 1 : 0.5,  
+        backgroundColor: this.props.disabled ? CustomVariables.toggleTrackDisabledColor :
+                         this.state.switched ? CustomVariables.toggleTrackOnColor : 
+                         CustomVariables.toggleTrackOffColor
+    };
+    var thumbStyles = {
+        transition: Transitions.easeOut(),
+        position: 'absolute',
+        top: 1,
+        left: this.state.switched ? 18 : 2,
+        width: toggleSize,
+        height: toggleSize,
+        lineHeight: '24px',
+        borderRadius: '50%',
+        backgroundColor: this.props.disabled ? CustomVariables.toggleThumbDisabledColor :
+                         this.state.switched ? CustomVariables.toggleThumbOnColor : 
+                         CustomVariables.toggleThumbOffColor
+    };
+
+    if (this.state.switched) {
+      this.mergePropStyles(trackStyles, {
+        backgroundColor: CustomVariables.toggleTrackOnColor
+      });
+      this.mergePropStyles(thumbStyles, {
+        left: 18,
+        backgroundColor: CustomVariables.toggleThumbOnColor
+      });
+    }
+
+    if (this.props.disabled) {
+      this.mergePropStyles(trackStyles, {
+        backgroundColor: CustomVariables.toggleTrackDisabledColor
+      });
+      this.mergePropStyles(thumbStyles, {
+        backgroundColor: CustomVariables.toggleThumbDisabledColor
+      });
+    }
+
     var toggleElement = (
       <div>
-        <div className="mui-toggle-track" />
-        <Paper className="mui-toggle-thumb" zDepth={1}/>
+        <div style={trackStyles} />
+        <Paper style={thumbStyles} zDepth={1}/>
       </div>
     );
 
@@ -37,8 +97,12 @@ var Toggle = React.createClass({
       switchElement: toggleElement,
       className: "mui-toggle",
       rippleStyle: customRippleStyle,
-      iconClassName: "mui-toggle-icon",
+      iconStyle: iconStyles,
+      trackStyle: trackStyles,
+      thumbStyle: thumbStyles,
+      switched: this.state.switched,
       onSwitch: this._handleToggle,
+      onParentShouldUpdate: this._handleStateChange,
       defaultSwitched: this.props.defaultToggled,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "left"
     };
@@ -62,7 +126,12 @@ var Toggle = React.createClass({
 
   _handleToggle: function(e, isInputChecked) {
     if (this.props.onToggle) this.props.onToggle(e, isInputChecked);
+  },
+
+  _handleStateChange: function(newSwitched) {
+    this.setState({switched: newSwitched});
   }
+
 });
 
 module.exports = Toggle;
diff --git a/src/less/components/checkbox.less b/src/less/components/checkbox.less
deleted file mode 100644
index 745437ca21aaab..00000000000000
--- a/src/less/components/checkbox.less
+++ /dev/null
@@ -1,66 +0,0 @@
-.mui-checkbox {
-  .mui-checkbox-icon {
-    @checkbox-size: 24px;
-
-    height: @checkbox-size;
-    width: @checkbox-size;
-    margin-right: @desktop-gutter-less;
-
-    .mui-checkbox-check {
-      position: absolute;
-      opacity: 0;
-      transform: scale(0);
-      transform-origin: 50% 50%;
-
-      transition:
-        opacity 450ms @ease-out-function 0ms,
-        transform 0ms @ease-out-function 450ms;
-
-      * { fill: @checkbox-checked-color; }
-    }
-
-    .mui-checkbox-box {
-      position: absolute;
-      * {
-        fill: @checkbox-box-color;
-        .ease-out(@duration: 2s; @delay: 200ms);
-      }
-    }
-  }
-
-  &.mui-is-switched {
-    .mui-checkbox-icon {
-      .mui-checkbox-check {
-        .ease-out(@duration: .45s; @delay: 0s);
-        opacity: 1;
-        transform: scale(1);
-        transform-origin: 50% 50%; 
-
-        transition:
-          opacity 0ms @ease-out-function 0ms,
-          transform 800ms @ease-out-function 0ms;
-      }
-      .mui-checkbox-box {
-        .ease-out(@duration: 100s; @delay: 0ms);
-        * { fill: @checkbox-checked-color; }
-      } 
-    }
-  }
-
-  &.mui-is-disabled {
-    .mui-checkbox-icon {
-      .mui-checkbox-check,
-      .mui-checkbox-box {
-        * { fill: @checkbox-disabled-color; }
-      }
-    }
-  }
-
-  &.mui-is-required {
-    .mui-checkbox-icon {
-      .mui-checkbox-box {
-        * { fill: @checkbox-required-color; }
-      } 
-    }
-  }
-}
diff --git a/src/less/components/components.less b/src/less/components/components.less
index f45cd17bf191b2..fed30ee03448ea 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -1,13 +1,11 @@
 @import "app-bar.less";
 @import "card.less";
-@import "checkbox.less";
 @import "date-picker/date-picker.less";
 @import "dialog-window.less";
 @import "dialog.less";
 @import "drop-down-icon.less";
 @import "drop-down-menu.less";
 @import "enhanced-button.less";
-@import "enhanced-switch.less";
 @import "enhanced-textarea.less";
 @import "flat-button.less";
 @import "floating-action-button.less";
@@ -19,7 +17,6 @@
 @import "menu.less";
 @import "menu-item.less";
 @import "paper.less";
-@import "radio-button.less";
 @import "raised-button.less";
 @import "slider.less";
 @import "snackbar.less";
@@ -27,7 +24,6 @@
 @import "table.less";
 @import "tabs.less";
 @import "text-field.less";
-@import "toggle.less";
 @import "toolbar.less";
 @import "tooltip.less";
 @import "transition-groups/slide-in.less";
\ No newline at end of file
diff --git a/src/less/components/enhanced-switch.less b/src/less/components/enhanced-switch.less
deleted file mode 100644
index f953ff2d8d0ca4..00000000000000
--- a/src/less/components/enhanced-switch.less
+++ /dev/null
@@ -1,36 +0,0 @@
-.mui-enhanced-switch {
-  @mui-switch-width: 60px;
-
-  position: relative;
-  cursor: pointer;
-  overflow: visible;
-  display: table;
-  height: auto;
-  width: 100%;
-
-  .mui-enhanced-switch-input {
-    position: absolute;
-    cursor: pointer;
-    pointer-events: all;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    left: 0;
-  }
-
-  .mui-enhanced-switch-wrap {
-    .ease-out();
-    float: left;
-    position: relative;
-    display: table-column;
-  }
-  
-  .mui-switch-label {
-    float: left;
-    position: relative;
-    display: table-column;
-    width: calc(~"100% - @{mui-switch-width}");
-    line-height: 24px;
-  }
-}
\ No newline at end of file
diff --git a/src/less/components/radio-button.less b/src/less/components/radio-button.less
deleted file mode 100644
index 96686bbd10fddd..00000000000000
--- a/src/less/components/radio-button.less
+++ /dev/null
@@ -1,67 +0,0 @@
-.mui-radio-button {
-  .mui-radio-button-icon {
-    @radio-button-size: 24px;
-
-    height: @radio-button-size;
-    width: @radio-button-size;
-    margin-right: @desktop-gutter-less;
-    
-
-    .mui-radio-button-fill {
-      position: absolute;
-      opacity: 0;
-      transform: scale(0);
-      transform-origin: 50% 50%;
-      .ease-out;
-      * { fill: @radio-button-checked-color; }
-    }
-
-    .mui-radio-button-target {
-      .ease-out();
-      position: absolute;
-      opacity: 1;
-      transform: scale(1);
-      * {
-        fill: @radio-button-border-color;
-        .ease-out(@duration: 2s; @delay: 200ms);
-      }
-    }
-  }
-    
-  &.mui-is-switched {
-    .mui-radio-button-icon {
-      .mui-radio-button-fill {
-        opacity: 1;
-        transform: scale(1);
-      }
-
-      .mui-radio-button-target {
-        opacity: 0;
-        transform: scale(0);
-        * { 
-          fill: @radio-button-checked-color; 
-          .ease-out(@duration: 100s; @delay: 0ms);
-        }
-      }
-    }
-  }
-
-  &.mui-is-disabled {
-    .mui-radio-button-icon {
-      .mui-radio-button-fill,
-      .mui-radio-button-target {
-        * { fill: @radio-button-disabled-color; }
-      }
-    }
-  }
-
-  &.mui-is-required {
-    .mui-radio-button-icon {
-      .mui-radio-button-target {
-        * { fill: @radio-button-required-color; }
-      }
-    }
-  }
-}
-
-
diff --git a/src/less/components/toggle.less b/src/less/components/toggle.less
deleted file mode 100644
index 274bb1a55bbc65..00000000000000
--- a/src/less/components/toggle.less
+++ /dev/null
@@ -1,75 +0,0 @@
-.mui-toggle {
-  @mui-switch-width: 60px;
-  
-  .mui-toggle-icon {
-    @toggle-track-width: 36px;
-    @toggle-padding-right: calc(@mui-switch-width - @toggle-track-width);
-
-    padding: 4px 0px 6px 2px;
-    margin-right: @desktop-gutter-mini;
-
-    .mui-toggle-track {
-      .ease-out;
-      width: @toggle-track-width;
-      height: 14px;
-      border-radius: 30px;
-      background-color: @toggle-track-off-color;
-    }
-
-    .mui-toggle-thumb {
-      .ease-out;
-      position: absolute;
-      top: 1px;
-      left: 2px;
-      width: @toggle-size;
-      height: @toggle-size;
-      line-height: 24px;
-      border-radius: 50%;
-      background-color: @toggle-thumb-off-color;
-
-      .mui-paper-container {
-        border-radius: 50%;
-      }
-    }
-  }
-
-  &.mui-is-switched {
-    .mui-toggle-icon {
-      .mui-toggle-track {
-        background-color: @toggle-track-on-color;
-      }
-      .mui-toggle-thumb {
-        left: 18px;
-        background-color: @toggle-thumb-on-color;
-      }
-    }
-  }
-
-  &.mui-is-disabled {
-    .mui-toggle-icon {
-      cursor: default;
-      .mui-toggle-track {
-        background-color: @toggle-track-disabled-color;
-      }
-      .mui-toggle-thumb {
-        background-color: @toggle-thumb-disabled-color;
-      }
-    }
-  }
-
-  &.mui-is-required {
-    .mui-toggle-icon {
-      .mui-toggle-track {
-        background-color: @toggle-track-required-color;
-      }
-
-      .mui-toggle-thumb {
-        background-color: @toggle-thumb-required-color;
-      }
-    }
-  }
-}
-
-
-
-
diff --git a/src/less/variables/custom-variables.less b/src/less/variables/custom-variables.less
index afb8911480efda..a0e3282f33de59 100644
--- a/src/less/variables/custom-variables.less
+++ b/src/less/variables/custom-variables.less
@@ -109,34 +109,12 @@
 
 // radio button
 @radio-button-size: 24px;
-@radio-button-border-color:  @body-text-color;
-@radio-button-background-color: white;
-@radio-button-checked-color: @primary-1-color;
-@radio-button-required-color: @primary-1-color;
-@radio-button-disabled-color: @disabled-color;
-
-// checkbox
-@checkbox-box-color: @body-text-color;
-@checkbox-checked-color: @primary-1-color;
-@checkbox-required-color: @primary-1-color;
-@checkbox-disabled-color: @disabled-color;
 
 // snackbar
 @mui-snackbar-text-color: white;
 @mui-snackbar-background-color: #323232;
 @mui-snackbar-action-color: @accent-1-color;
 
-// toggle
-@toggle-size: 20px;
-@toggle-thumb-on-color: @primary-1-color;
-@toggle-thumb-off-color: @grey-50;
-@toggle-thumb-disabled-color: @grey-400;
-@toggle-thumb-required-color: @primary-1-color;
-@toggle-track-on-color: fadeout(@toggle-thumb-on-color, 50%);
-@toggle-track-off-color: @min-black;
-@toggle-track-disabled-color: @faint-black;
-@toggle-track-required-color: fadeout(@toggle-thumb-required-color, 50%);
-
 // toolbar
 @toolbar-background-color: darken(#eeeeee, 5%);
 @toolbar-height: 56px;