From 0f9a7b4252103c7fecb9b13a1703beef0ffb2db4 Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Thu, 30 Aug 2018 13:20:02 -0500
Subject: [PATCH] fix(radio): add and document custom properties

references #14850
---
 core/src/components/radio/radio.ios.scss         |  6 +++++-
 core/src/components/radio/radio.md.scss          | 16 +++++++++++++---
 core/src/components/radio/radio.scss             |  5 ++++-
 core/src/components/radio/readme.md              |  8 ++++++++
 .../components/radio/test/standalone/index.html  | 11 +++++++++++
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index d55b34b0ea6..9d80ae8da89 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -5,10 +5,14 @@
 // --------------------------------------------------
 
 :host {
+  --color-checked: #{ion-color(primary, base)};
   --width: #{$radio-ios-icon-width};
   --height: #{$radio-ios-icon-height};
 }
 
+:host(.ion-color.radio-checked) .radio-inner {
+  border-color: current-color(base);
+}
 
 .item-radio.item-ios ion-label {
   @include margin-horizontal(0, null);
@@ -32,7 +36,7 @@
   border-top-width: 0;
   border-left-width: 0;
   border-style: $radio-ios-icon-border-style;
-  border-color: $radio-ios-color-on;
+  border-color: var(--color-checked);
 }
 
 
diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
index bcf14484dc4..7e8d9953e3f 100644
--- a/core/src/components/radio/radio.md.scss
+++ b/core/src/components/radio/radio.md.scss
@@ -5,10 +5,20 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$radio-md-color-off};
+  --color-checked: #{ion-color(primary, base)};
   --width: #{$radio-md-icon-width};
   --height: #{$radio-md-icon-height};
 }
 
+:host(.ion-color) .radio-inner {
+  background: current-color(base);
+}
+
+:host(.ion-color.radio-checked) .radio-icon {
+  border-color: current-color(base);
+}
+
 // Material Design Radio Outer Circle: Unchecked
 // -----------------------------------------
 
@@ -19,7 +29,7 @@
 
   border-width: $radio-md-icon-border-width;
   border-style: $radio-md-icon-border-style;
-  border-color: $radio-md-color-off;
+  border-color: var(--color);
 }
 
 
@@ -39,7 +49,7 @@
 
   transition: transform $radio-md-transition-duration $radio-md-transition-easing;
 
-  background-color: $radio-md-color-on;
+  background: var(--color-checked);
 }
 
 
@@ -47,7 +57,7 @@
 // -----------------------------------------
 
 :host(.radio-checked) .radio-icon {
-  border-color: $radio-md-color-on;
+  border-color: var(--color-checked);
 }
 
 
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index dee995889b5..455b7554b90 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -4,7 +4,10 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
+  /**
+   * @prop --color: Color of the radio
+   * @prop --color-checked: Color of the checked radio
+   */
 
   display: inline-block;
   position: relative;
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index c0f3ff3bff4..466a6cdf6cf 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -34,6 +34,14 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
 | `ionStyle`          | Emitted when the styles change.            |
 
 
+## CSS Custom Properties
+
+| Name              | Description                |
+| ----------------- | -------------------------- |
+| `--color`         | Color of the radio         |
+| `--color-checked` | Color of the checked radio |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/radio/test/standalone/index.html b/core/src/components/radio/test/standalone/index.html
index ee9707c99c8..15e7540ac90 100644
--- a/core/src/components/radio/test/standalone/index.html
+++ b/core/src/components/radio/test/standalone/index.html
@@ -40,12 +40,23 @@
     <ion-radio checked color="secondary" disabled></ion-radio>
   </p>
 
+  <p>
+    <ion-radio class="custom"></ion-radio>
+    <ion-radio class="custom" checked></ion-radio>
+    <ion-radio class="custom" checked color="primary"></ion-radio>
+  </p>
+
   <style>
     /* to be able to see the radio buttons */
     .radio-ios {
       border: 1px solid #dedede;
       padding: 10px 5px;
     }
+
+    .custom {
+      --color: orange;
+      --color-checked: hotpink;
+    }
   </style>
 </body>
 </html>