Add support for color attribute to radio

src/demo-app/radio/radio-demo.html

@@ -4,6 +4,12 @@ <h1>Basic Example</h1>
   <md-radio-button name="group1">Option 2</md-radio-button>
   <md-radio-button name="group1" disabled="true">Option 3 (disabled)</md-radio-button>
 </section>
+<h1>Color Example</h1>
+<section class="demo-section">
+  <md-radio-button name="group2" color="primary">Primary</md-radio-button>
+  <md-radio-button name="group2" color="accent">Accent</md-radio-button>
+  <md-radio-button name="group2" color="warn">Warn</md-radio-button>
+</section>
 <h1>Dynamic Example</h1>
 <section class="demo-section">
   <div>

src/lib/radio/_radio-theme.scss

@@ -12,28 +12,64 @@
   .mat-radio-outer-circle {
     border-color: mat-color($foreground, secondary-text);
 
-    .mat-radio-checked & {
-      border-color: mat-color($accent);
-    }
-
     .mat-radio-disabled & {
       border-color: mat-color($foreground, disabled);
     }
   }
 
   .mat-radio-inner-circle {
-    background-color: mat-color($accent);
-
     .mat-radio-disabled & {
       background-color: mat-color($foreground, disabled);
     }
   }
 
   .mat-radio-ripple .mat-ripple-element {
-    background-color: mat-color($accent, 0.26);
-
     .mat-radio-disabled & {
       background-color: mat-color($foreground, disabled);
     }
   }
+
+  .mat-radio-button.mat-radio-checked {
+    &.mat-primary {
+      .mat-radio-outer-circle{
+        border-color: mat-color($primary);
+      }
+
+      .mat-radio-inner-circle {
+        background-color: mat-color($primary);
+      }
+
+      .mat-radio-ripple .mat-ripple-element {
+        background-color: mat-color($primary, 0.26);
+      }
+    } 
+
+    &.mat-accent {
+      .mat-radio-outer-circle{
+        border-color: mat-color($accent);
+      }
+
+      .mat-radio-inner-circle {
+        background-color: mat-color($accent);
+      }
+
+      .mat-radio-ripple .mat-ripple-element {
+        background-color: mat-color($accent, 0.26);
+      }
+    } 
+
+    &.mat-warn {
+      .mat-radio-outer-circle{
+        border-color: mat-color($warn);
+      }
+
+      .mat-radio-inner-circle {
+        background-color: mat-color($warn);
+      }
+
+      .mat-radio-ripple .mat-ripple-element {
+        background-color: mat-color($warn, 0.26);
+      }
+    } 
+  }
 }

src/lib/radio/radio.ts

@@ -374,6 +374,16 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
     this._disabled = (value != null && value !== false) ? true : null;
   }
 
+  /** The color of the button. Can be `primary`, `accent`, or `warn`. */
+  @Input()
+  get color(): string { 
+    return this._color; 
+  }
+
+  set color(value: string) { 
+    this._updateColor(value); 
+  }
+
   /**
    * Event emitted when the checked state of this radio button changes.
    * Change events are only emitted when the value changes due to user interaction with
@@ -402,6 +412,9 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
   /** Whether the ripple effect on click should be disabled. */
   private _disableRipple: boolean;
 
+  /** Current color. Can be `primary`, `accent`, or `warn`. */
+  private _color: string;
+
   /** The child ripple instance. */
   @ViewChild(MdRipple) _ripple: MdRipple;
 
@@ -498,6 +511,18 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  _updateColor(newColor: string) {
+    this._setElementColor(this._color, false);
+    this._setElementColor(newColor, true);
+    this._color = newColor;
+  }
+
+  _setElementColor(color: string, isAdd: boolean) {
+    if (color != null && color != '') {
+      this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
+    }
+  }
+
   /** Function is called whenever the focus changes for the input element. */
   private _onInputFocusChange(focusOrigin: FocusOrigin) {
     if (!this._focusRipple && focusOrigin === 'keyboard') {