feat(windows): add radio component for wp mode

fixed radio and checkbox in alert, updated toolbar

references #5565

ionic/components.wp.scss

@@ -11,4 +11,5 @@
   "components/badge/badge.wp",
   "components/button/button.wp",
   "components/checkbox/checkbox.wp",
+  "components/radio/radio.wp",
   "components/toolbar/toolbar.wp";

ionic/components/alert/alert.wp.scss

@@ -35,6 +35,9 @@ $alert-wp-button-width:                   49.5% !default;
 $alert-wp-button-margin-right:            1% !default;
 $alert-wp-button-font-weight:             300 !default;
 
+$alert-wp-checkbox-background-color:      map-get($colors-wp, primary) !default;
+$alert-wp-radio-background-color:         map-get($colors-wp, primary) !default;
+
 $alert-wp-buttons-padding:                8px 20px 20px 20px !default;
 $alert-wp-buttons-justify-content:        flex-end !default;
 
@@ -150,11 +153,10 @@ $alert-wp-buttons-justify-content:        flex-end !default;
     left: 2px;
     width: 8px;
     height: 8px;
-    background-color: $alert-wp-button-text-color;
+    background-color: $alert-wp-radio-background-color;
     border-radius: 50%;
     content: '';
-    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
+    display: none;
-    transform: scale3d(0, 0, 0);
   }
 }
 
@@ -166,7 +168,7 @@ $alert-wp-buttons-justify-content:        flex-end !default;
   }
 
   .alert-radio-icon:after {
-    transform: scale3d(1, 1, 1);
+    display: block;
   }
 }
 
@@ -197,8 +199,8 @@ $alert-wp-buttons-justify-content:        flex-end !default;
 }
 
 .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
-  background-color: $alert-wp-button-text-color;
+  background-color: $alert-wp-checkbox-background-color;
-  border-color: $alert-wp-button-text-color;
+  border-color: $alert-wp-checkbox-background-color;
 
   &:after {
     position: absolute;

ionic/components/checkbox/checkbox.wp.scss

@@ -22,7 +22,7 @@ $checkbox-wp-icon-checkmark-color:       $background-wp-color !default;
 $checkbox-wp-icon-border-width:          2px !default;
 $checkbox-wp-icon-border-style:          solid !default;
 $checkbox-wp-icon-border-radius:         0 !default;
-$checkbox-wp-icon-border-color-off:      darken($list-wp-border-color, 40%) !default;
+$checkbox-wp-icon-border-color-off:      #333333 !default;
 $checkbox-wp-icon-border-color-on:       map-get($colors-wp, primary) !default;
 
 $checkbox-wp-transition-duration:        280ms !default;

ionic/components/radio/radio.wp.scss

@@ -0,0 +1,121 @@
+@import "../../globals.wp";
+
+// Windows Radio
+// --------------------------------------------------
+
+$radio-wp-color-on:               map-get($colors-wp, primary) !default;
+$radio-wp-color-off:              #333333 !default;
+
+$radio-wp-icon-width:             16px !default;
+$radio-wp-icon-height:            16px !default;
+$radio-wp-icon-border-width:      2px !default;
+$radio-wp-icon-border-style:      solid !default;
+$radio-wp-icon-border-radius:     50% !default;
+
+$radio-wp-disabled-opacity:       0.3 !default;
+
+
+ion-radio {
+  position: relative;
+  display: inline-block;
+}
+
+
+// Windows Radio Outer Circle: Unchecked
+// -----------------------------------------
+
+.radio-icon {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: $radio-wp-icon-width;
+  height: $radio-wp-icon-height;
+  margin: 0;
+  border-width: $radio-wp-icon-border-width;
+  border-style: $radio-wp-icon-border-style;
+  border-color: $radio-wp-color-off;
+  border-radius: $radio-wp-icon-border-radius;
+}
+
+
+// Windows Radio Inner Circle: Unchecked
+// -----------------------------------------
+
+.radio-inner  {
+  position: absolute;
+  top: $radio-wp-icon-border-width;
+  left: $radio-wp-icon-border-width;
+  width: $radio-wp-icon-width / 2;
+  height: $radio-wp-icon-height / 2;
+  background-color: $radio-wp-color-off;
+  border-radius: 50%;
+  display: none;
+}
+
+
+// Windows Radio Outer Circle: Checked
+// -----------------------------------------
+
+.radio-checked {
+  border-color: $radio-wp-color-on;
+}
+
+
+// Windows Radio Inner Circle: Checked
+// -----------------------------------------
+
+.radio-checked .radio-inner {
+  // transform: scale3d(1, 1, 1);
+  display: block;
+}
+
+
+// Windows Radio: Disabled
+// -----------------------------------------
+
+.radio-disabled,
+.item-radio-disabled ion-label {
+  opacity: $radio-wp-disabled-opacity;
+  pointer-events: none;
+}
+
+
+// Windows Radio Within An Item
+// -----------------------------------------
+
+.item ion-radio {
+  position: static;
+  display: block;
+  margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
+}
+
+.item-radio ion-label {
+  margin-left: 0;
+}
+
+
+// Windows Radio Color Mixin
+// --------------------------------------------------
+
+@mixin radio-theme-wp($color-name, $color-value) {
+
+  ion-radio[#{$color-name}] {
+
+    .radio-checked {
+      border-color: $color-value;
+    }
+
+  }
+
+}
+
+
+// Generate Windows Radio Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+
+  @include radio-theme-wp($color-name, $color-value);
+
+}

ionic/components/toolbar/toolbar.wp.scss

@@ -18,7 +18,9 @@ $toolbar-order-wp: (
 
 $toolbar-wp-padding:                     4px !default;
 $toolbar-wp-height:                      4.6rem !default;
-$toolbar-wp-title-font-size:             2.0rem !default;
+$toolbar-wp-title-font-size:             1.5rem !default;
+$toolbar-wp-title-font-weight:           bold !default;
+$toolbar-wp-title-text-transform:        uppercase !default;
 $toolbar-wp-button-font-size:            1.4rem !default;
 $navbar-wp-height:                       $toolbar-wp-height !default;
 
@@ -58,7 +60,8 @@ ion-navbar-section {
   color: $toolbar-wp-text-color;
   padding: 0 12px;
   font-size: $toolbar-wp-title-font-size;
-  font-weight: 500;
+  font-weight: $toolbar-wp-title-font-weight;
+  text-transform: $toolbar-wp-title-text-transform;
 }
 
 @mixin wp-toolbar-theme($color-name, $color-value) {