fix(checkbox, radio): not using theme border color (#2744)

* fix(checkbox, radio): not using theme border color

Fixes the checkbox and radio button not using the border color from the theme. The cause of the issue was that both components used the shorthand `border`, which ended up overriding the `border-color` from the theme.

* chore: fix leaking test

Author: crisbeto

src/lib/checkbox/checkbox.scss

@@ -196,7 +196,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-layout {
-  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox
+  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mat-checkbox
   // (e.g. pointer by default, regular when disabled), instead of the browser default.
   cursor: inherit;
   align-items: baseline;
@@ -234,8 +234,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   @extend %mat-checkbox-outer-box;
 
   background-color: transparent;
-  border: $mat-checkbox-border-width solid;
-  transition: border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  transition:
+      border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  border: {
+    width: $mat-checkbox-border-width;
+    style: solid;
+  }
 }
 
 .mat-checkbox-background {

src/lib/radio/radio.scss

@@ -32,15 +32,18 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
 
 // The outer circle for the radio, always present.
 .mat-radio-outer-circle {
-  border: solid 2px;
-  border-radius: 50%;
   box-sizing: border-box;
   height: $mat-radio-size;
   left: 0;
   position: absolute;
   top: 0;
   transition: border-color ease 280ms;
   width: $mat-radio-size;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: 50%;
+  }
 }
 
 // The inner circle for the radio, shown when checked.