feat(alert): add sass variables for checkbox and radio button text color (#10331)

* feat(alert): add sass variables for checkbox and radio button text color

* style(alert): remove extra spaces

* Replace initial value with `initial` instead of `null`

* Remove submodule

* fix ios variable usage

* style(alert wp): remove whitespace

Author: alan-agius4

src/components/alert/alert.ios.scss

@@ -120,6 +120,9 @@ $alert-ios-list-border-top:                     $alert-ios-button-border-width $
 /// @prop - Padding on the label for the radio alert
 $alert-ios-radio-label-padding:                 13px !default;
 
+/// @prop - Text color of the label for the radio alert
+$alert-ios-radio-label-text-color:              initial !default;
+
 /// @prop - Text color of the label for the checked radio alert
 $alert-ios-radio-label-text-color-checked:      $alert-ios-button-text-color !default;
 
@@ -153,6 +156,9 @@ $alert-ios-radio-icon-transform:                rotate(45deg) !default;
 /// @prop - Padding of the label for the checkbox in the alert
 $alert-ios-checkbox-label-padding:              13px !default;
 
+/// @prop - Text color of the label for the checkbox in the alert
+$alert-ios-checkbox-label-text-color:           initial !default;
+
 /// @prop - Text color of the label for the checked checkbox in the alert
 $alert-ios-checkbox-label-text-color-checked:   initial !default;
 
@@ -314,6 +320,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  color: $alert-ios-radio-label-text-color;
 }
 
 
@@ -369,6 +377,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  color: $alert-ios-checkbox-label-text-color;
 }
 
 .alert-ios [aria-checked=true] .alert-checkbox-label {

src/components/alert/alert.md.scss

@@ -124,6 +124,9 @@ $alert-md-list-border-bottom:                 $alert-md-list-border-top !default
 /// @prop - Padding on the label for the radio alert
 $alert-md-radio-label-padding:                13px 26px !default;
 
+/// @prop - Text color of the label for the radio alert
+$alert-md-radio-label-text-color:             initial !default;
+
 /// @prop - Text color of the label for the checked radio alert
 $alert-md-radio-label-text-color-checked:     $alert-md-button-text-color !default;
 
@@ -181,7 +184,10 @@ $alert-md-radio-icon-transition:              transform 280ms cubic-bezier(.4, 0
 /// @prop - Padding of the label for the checkbox in the alert
 $alert-md-checkbox-label-padding:             13px 26px !default;
 
-/// @prop - Text color of the label for the checked checkbox in the  alert
+/// @prop - Text color of the label for the checkbox in the alert
+$alert-md-checkbox-label-text-color:          initial !default;
+
+/// @prop - Text color of the label for the checked checkbox in the alert
 $alert-md-checkbox-label-text-color-checked:  initial !default;
 
 
@@ -339,6 +345,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  color: $alert-md-radio-label-text-color;
 }
 
 // Material Design Alert Radio Unchecked Circle
@@ -405,6 +413,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  color: $alert-md-checkbox-label-text-color;
 }
 
 .alert-md [aria-checked=true] .alert-checkbox-label {

src/components/alert/alert.wp.scss

@@ -130,6 +130,9 @@ $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 /// @prop - Padding of the label for the radio alert
 $alert-wp-radio-label-padding:                 13px 26px !default;
 
+/// @prop - Text color of the label for the radio alert
+$alert-wp-radio-label-text-color:              initial !default;
+
 /// @prop - Text color of the label for the checked radio alert
 $alert-wp-radio-label-text-color-checked:      $alert-wp-button-text-color !default;
 
@@ -175,6 +178,9 @@ $alert-wp-radio-icon-border-radius:            $alert-wp-radio-border-radius !de
 /// @prop - Padding of the label for the checkbox in the alert
 $alert-wp-checkbox-label-padding:              13px 26px !default;
 
+/// @prop - Text color of the label for the checkbox in the alert
+$alert-wp-checkbox-label-text-color:           initial !default;
+
 /// @prop - Text color of the label for the checked checkbox in the alert
 $alert-wp-checkbox-label-text-color-checked:   initial !default;
 
@@ -337,6 +343,8 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  color: $alert-wp-radio-label-text-color;
 }
 
 // Windows Alert Radio Unchecked Circle
@@ -403,6 +411,8 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  color: $alert-wp-checkbox-label-text-color;
 }
 
 .alert-wp [aria-checked=true] .alert-checkbox-label {