fix(radio): Update colors to latest guidance (#2623)

williamernest · web-flow · commit e164a2424d13 · 2018-04-20T18:05:27.000-07:00
diff --git a/packages/mdc-radio/_variables.scss b/packages/mdc-radio/_variables.scss
@@ -14,9 +14,13 @@
 // limitations under the License.
 //
 
+@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);
diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss
@@ -23,7 +23,7 @@
 
 // postcss-bem-linter: define radio
 .mdc-radio {
-  @include mdc-radio-unchecked-stroke-color(text-secondary-on-background);
+  @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color);
   @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color);
   @include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
   @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
@@ -149,11 +149,11 @@
     cursor: default;
 
     .mdc-radio__outer-circle {
-      border-color: rgba(black, .26);
+      border-color: $mdc-radio-circle-color;
     }
 
     .mdc-radio__inner-circle {
-      background-color: rgba(black, .26);
+      background-color: $mdc-radio-circle-color;
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`
`24`	`24`	`// postcss-bem-linter: define radio`
`25`	`25`	`.mdc-radio {`
`26`		`- @include mdc-radio-unchecked-stroke-color(text-secondary-on-background);`
	`26`	`+ @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color);`
`27`	`27`	`@include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color);`
`28`	`28`	`@include mdc-radio-ink-color($mdc-radio-baseline-theme-color);`
`29`	`29`	`@include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);`
`@@ -149,11 +149,11 @@`
`149`	`149`	`cursor: default;`
`150`	`150`
`151`	`151`	`.mdc-radio__outer-circle {`
`152`		`- border-color: rgba(black, .26);`
	`152`	`+ border-color: $mdc-radio-circle-color;`
`153`	`153`	`}`
`154`	`154`
`155`	`155`	`.mdc-radio__inner-circle {`
`156`		`- background-color: rgba(black, .26);`
	`156`	`+ background-color: $mdc-radio-circle-color;`
`157`	`157`	`}`
`158`	`158`	`}`
`159`	`159`	`}`