fix(radio): add and document custom properties

references #14850

Author: camwiegert

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);
 }
 
 

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,15 +49,15 @@
 
   transition: transform $radio-md-transition-duration $radio-md-transition-easing;
 
-  background-color: $radio-md-color-on;
+  background: var(--color-checked);
 }
 
 
 // Material Design Radio Outer Circle: Checked
 // -----------------------------------------
 
 :host(.radio-checked) .radio-icon {
-  border-color: $radio-md-color-on;
+  border-color: var(--color-checked);
 }
 
 

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;

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/)*

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>