feat(radio): add --border-radius and --inner-border-radius variables (#20140)

core/api.txt

@@ -842,8 +842,10 @@ ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
 ion-radio,event,ionSelect,RadioChangeEventDetail,true
+ion-radio,css-prop,--border-radius
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
+ion-radio,css-prop,--inner-border-radius
 
 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false

core/src/components/radio/radio.ios.scss

@@ -50,7 +50,7 @@
 // -----------------------------------------
 
 :host(.ion-focused) .radio-icon::after {
-  @include border-radius(50%);
+  @include border-radius(var(--inner-border-radius));
   @include position(-8px, null, null, -9px);
 
   display: block;

core/src/components/radio/radio.md.scss

@@ -9,6 +9,7 @@
   --color-checked: #{ion-color(primary, base)};
   --border-width: #{$radio-md-icon-border-width};
   --border-style: #{$radio-md-icon-border-style};
+  --border-radius: #{$radio-md-icon-border-radius};
 
   width: $radio-md-icon-width;
   height: $radio-md-icon-height;
@@ -27,7 +28,7 @@
 
 .radio-icon {
   @include margin(0);
-  @include border-radius($radio-md-icon-border-radius);
+  @include border-radius(var(--border-radius));
 
   border-width: var(--border-width);
   border-style: var(--border-style);
@@ -39,7 +40,7 @@
 // -----------------------------------------
 
 .radio-inner {
-  @include border-radius(50%);
+  @include border-radius(var(--inner-border-radius));
 
   width: calc(50% + var(--border-width));
   height: calc(50% + var(--border-width));
@@ -81,7 +82,7 @@
 // -----------------------------------------
 
 :host(.ion-focused) .radio-icon::after {
-  @include border-radius(50%);
+  @include border-radius(var(--inner-border-radius));
   @include position(-12px, null, null, -12px);
 
   display: block;

core/src/components/radio/radio.scss

@@ -7,7 +7,10 @@
   /**
    * @prop --color: Color of the radio
    * @prop --color-checked: Color of the checked radio
+   * @prop --border-radius: Border radius of the radio
+   * @prop --inner-border-radius: Border radius of the inner checked radio
    */
+  --inner-border-radius: 50%;
 
   display: inline-block;
   position: relative;

core/src/components/radio/readme.md

@@ -129,10 +129,12 @@ export const RadioExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name              | Description                |
-| ----------------- | -------------------------- |
-| `--color`         | Color of the radio         |
-| `--color-checked` | Color of the checked radio |
+| Name                    | Description                              |
+| ----------------------- | ---------------------------------------- |
+| `--border-radius`       | Border radius of the radio               |
+| `--color`               | Color of the radio                       |
+| `--color-checked`       | Color of the checked radio               |
+| `--inner-border-radius` | Border radius of the inner checked radio |
 
 
 ## Dependencies

core/src/components/radio/test/basic/index.html

@@ -75,6 +75,13 @@
             <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
           </ion-item>
         </ion-radio-group>
+        
+        <ion-radio-group allow-empty-selection>
+          <ion-item>
+            <ion-label>Custom</ion-label>
+            <ion-radio slot="end" color="danger" value="custom" style="--border-radius:2px;--inner-border-radius: 10px 0px 10px 0px;" checked></ion-radio>
+          </ion-item>
+        </ion-radio-group>
 
         <ion-item>
           <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Checked</ion-button>