docs(sass): add documentation for sass variables

This adds documentation for loading, menu, picker, popover, radio,
refresher, select, and toast. Also removes unused variables.

References #8785

src/components/loading/loading.ios.scss

@@ -3,21 +3,43 @@
 // iOS Loading Indicator
 // --------------------------------------------------
 
+/// @prop - Padding of the loading wrapper
 $loading-ios-padding:                   24px 34px !default;
+
+/// @prop - Max width of the loading wrapper
 $loading-ios-max-width:                 270px !default;
+
+/// @prop - Max height of the loading wrapper
 $loading-ios-max-height:                90% !default;
+
+/// @prop - Border radius of the loading wrapper
 $loading-ios-border-radius:             8px !default;
+
+/// @prop - Text color of the loading wrapper
 $loading-ios-text-color:                #000 !default;
+
+/// @prop - Background of the loading wrapper
 $loading-ios-background:                #f8f8f8 !default;
 
+/// @prop - Font weight of the loading content
 $loading-ios-content-font-weight:       bold !default;
 
+/// @prop - Color of the loading spinner
 $loading-ios-spinner-color:             #69717d !default;
 
+/// @prop - Color of the ios loading spinner
 $loading-ios-spinner-ios-color:         $loading-ios-spinner-color !default;
+
+/// @prop - Color of the bubbles loading spinner
 $loading-ios-spinner-bubbles-color:     $loading-ios-spinner-color !default;
+
+/// @prop - Color of the circles loading spinner
 $loading-ios-spinner-circles-color:     $loading-ios-spinner-color !default;
+
+/// @prop - Color of the crescent loading spinner
 $loading-ios-spinner-crescent-color:    $loading-ios-spinner-color !default;
+
+/// @prop - Color of the dots loading spinner
 $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 
 

src/components/loading/loading.md.scss

@@ -3,21 +3,46 @@
 // Material Design Loading Indicator
 // --------------------------------------------------
 
+/// @prop - Padding of the loading wrapper
 $loading-md-padding:                   24px !default;
+
+/// @prop - Max width of the loading wrapper
 $loading-md-max-width:                 280px !default;
+
+/// @prop - Max height of the loading wrapper
 $loading-md-max-height:                90% !default;
+
+/// @prop - Border radius of the loading wrapper
 $loading-md-border-radius:             2px !default;
+
+/// @prop - Text color of the loading wrapper
 $loading-md-text-color:                rgba(0, 0, 0, .5) !default;
+
+/// @prop - Background of the loading wrapper
 $loading-md-background:                #fafafa !default;
+
+/// @prop - Box shadow color of the loading wrapper
 $loading-md-box-shadow-color:          rgba(0, 0, 0, .4) !default;
+
+/// @prop - Box shadow of the loading wrapper
 $loading-md-box-shadow:                0 16px 20px $loading-md-box-shadow-color !default;
 
+/// @prop - Color of the loading spinner
 $loading-md-spinner-color:             color($colors-md, primary) !default;
 
+/// @prop - Color of the ios loading spinner
 $loading-md-spinner-ios-color:         $loading-md-spinner-color !default;
+
+/// @prop - Color of the bubbles loading spinner
 $loading-md-spinner-bubbles-color:     $loading-md-spinner-color !default;
+
+/// @prop - Color of the circles loading spinner
 $loading-md-spinner-circles-color:     $loading-md-spinner-color !default;
+
+/// @prop - Color of the crescent loading spinner
 $loading-md-spinner-crescent-color:    $loading-md-spinner-color !default;
+
+/// @prop - Color of the dots loading spinner
 $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 
 

src/components/loading/loading.wp.scss

@@ -3,19 +3,40 @@
 // Windows Loading Indicator
 // --------------------------------------------------
 
+/// @prop - Padding of the loading wrapper
 $loading-wp-padding:                   20px !default;
+
+/// @prop - Max width of the loading wrapper
 $loading-wp-max-width:                 280px !default;
+
+/// @prop - Max height of the loading wrapper
 $loading-wp-max-height:                90% !default;
+
+/// @prop - Border radius of the loading wrapper
 $loading-wp-border-radius:             2px !default;
+
+/// @prop - Text color of the loading wrapper
 $loading-wp-text-color:                #fff !default;
+
+/// @prop - Background of the loading wrapper
 $loading-wp-background:                #000 !default;
 
+/// @prop - Color of the loading spinner
 $loading-wp-spinner-color:             $loading-wp-text-color !default;
 
+/// @prop - Color of the ios loading spinner
 $loading-wp-spinner-ios-color:         $loading-wp-spinner-color !default;
+
+/// @prop - Color of the bubbles loading spinner
 $loading-wp-spinner-bubbles-color:     $loading-wp-spinner-color !default;
+
+/// @prop - Color of the circles loading spinner
 $loading-wp-spinner-circles-color:     $loading-wp-spinner-color !default;
+
+/// @prop - Color of the crescent loading spinner
 $loading-wp-spinner-crescent-color:    $loading-wp-spinner-color !default;
+
+/// @prop - Color of the dots loading spinner
 $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 
 

src/components/menu/menu.ios.scss

@@ -3,8 +3,13 @@
 // iOS Menu
 // --------------------------------------------------
 
+/// @prop - Background of the menu
 $menu-ios-background:            $background-ios-color !default;
+
+/// @prop - Box shadow color of the menu
 $menu-ios-box-shadow-color:      rgba(0, 0, 0, .25) !default;
+
+/// @prop - Box shadow of the menu
 $menu-ios-box-shadow:            0 0 10px $menu-ios-box-shadow-color !default;
 
 

src/components/menu/menu.md.scss

@@ -3,8 +3,13 @@
 // Material Design Menu
 // --------------------------------------------------
 
+/// @prop - Background of the menu
 $menu-md-background:            $background-md-color !default;
+
+/// @prop - Box shadow color of the menu
 $menu-md-box-shadow-color:      rgba(0, 0, 0, .25) !default;
+
+/// @prop - Box shadow of the menu
 $menu-md-box-shadow:            0 0 10px $menu-md-box-shadow-color !default;
 
 

src/components/menu/menu.wp.scss

@@ -3,6 +3,7 @@
 // Windows Menu
 // --------------------------------------------------
 
+/// @prop - Background of the menu
 $menu-wp-background:            #f2f2f2 !default;
 
 

src/components/picker/picker.ios.scss

@@ -3,24 +3,49 @@
 // iOS Picker
 // --------------------------------------------------
 
+/// @prop - Height of the picker wrapper
 $picker-ios-height:                            260px !default;
+
+/// @prop - Border color of the picker wrapper
 $picker-ios-border-color:                      $list-ios-border-color !default;
+
+/// @prop - Background of the picker wrapper
 $picker-ios-background-color:                  $list-ios-background-color !default;
 
+/// @prop - Height of the picker toolbar
 $picker-ios-toolbar-height:                    44px !default;
+
+/// @prop - Background color of the picker toolbar
 $picker-ios-toolbar-background-color:          $picker-ios-background-color !default;
 
+/// @prop - Height of the picker button
 $picker-ios-button-height:                     $picker-ios-toolbar-height !default;
+
+/// @prop - Text color of the picker button
 $picker-ios-button-text-color:                 color($colors-ios, primary) !default;
+
+/// @prop - Background of the picker button
 $picker-ios-button-background-color:           transparent !default;
 
+/// @prop - Padding of the picker column
 $picker-ios-column-padding:                    0 4px !default;
+
+/// @prop - Perspective of the picker column
 $picker-ios-column-perspective:                1000px !default;
 
+/// @prop - Padding of the picker option
 $picker-ios-option-padding:                    0 !default;
+
+/// @prop - Text color of the picker option
 $picker-ios-option-text-color:                 $list-ios-text-color !default;
+
+/// @prop - Font size of the picker option
 $picker-ios-option-font-size:                  20px !default;
+
+/// @prop - Height of the picker option
 $picker-ios-option-height:                     42px !default;
+
+/// @prop - Offset y of the picker option
 $picker-ios-option-offset-y:                   (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
 
 

src/components/picker/picker.md.scss

@@ -3,25 +3,49 @@
 // Material Design Picker
 // --------------------------------------------------
 
+/// @prop - Height of the picker wrapper
 $picker-md-height:                            260px !default;
+
+/// @prop - Border color of the picker wrapper
 $picker-md-border-color:                      $list-md-border-color !default;
+
+/// @prop - Background of the picker wrapper
 $picker-md-background-color:                  $list-md-background-color !default;
 
+/// @prop - Height of the picker toolbar
 $picker-md-toolbar-height:                    44px !default;
+
+/// @prop - Background of the picker toolbar
 $picker-md-toolbar-background-color:          $picker-md-background-color !default;
 
+/// @prop - Height of the picker button
 $picker-md-button-height:                     $picker-md-toolbar-height !default;
+
+/// @prop - Text color of the picker button
 $picker-md-button-text-color:                 color($colors-md, primary) !default;
+
+/// @prop - Background of the picker button
 $picker-md-button-background-color:           transparent !default;
 
+/// @prop - Padding of the picker column
 $picker-md-column-padding:                    0 8px !default;
 
+/// @prop - Padding of the picker option
 $picker-md-option-padding:                    0 !default;
+
+/// @prop - Text color of the picker option
 $picker-md-option-text-color:                 $list-md-text-color !default;
+
+/// @prop - Font size of the picker option
 $picker-md-option-font-size:                  22px !default;
+
+/// @prop - Height of the picker option
 $picker-md-option-height:                     42px !default;
+
+/// @prop - Offset y of the picker option
 $picker-md-option-offset-y:                   (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
 
+/// @prop - Text color of the selected picker option
 $picker-md-option-selected-color:             color($colors-md, primary) !default;
 
 

src/components/picker/picker.scss

@@ -3,7 +3,10 @@
 // Picker
 // --------------------------------------------------
 
+/// @prop - Width of the picker
 $picker-width:                             100% !default;
+
+/// @prop - Max width of the picker
 $picker-max-width:                         500px !default;
 
 

src/components/picker/picker.wp.scss

@@ -3,25 +3,49 @@
 // Windows Picker
 // --------------------------------------------------
 
+/// @prop - Height of the picker wrapper
 $picker-wp-height:                            260px !default;
+
+/// @prop - Border color of the picker wrapper
 $picker-wp-border-color:                      $list-wp-border-color !default;
+
+/// @prop - Background of the picker wrapper
 $picker-wp-background-color:                  $list-wp-background-color !default;
 
+/// @prop - Height of the picker toolbar
 $picker-wp-toolbar-height:                    44px !default;
+
+/// @prop - Background of the picker toolbar
 $picker-wp-toolbar-background-color:          $picker-wp-background-color !default;
 
+/// @prop - Height of the picker button
 $picker-wp-button-height:                     $picker-wp-toolbar-height !default;
+
+/// @prop - Text color of the picker button
 $picker-wp-button-text-color:                 color($colors-wp, primary) !default;
+
+/// @prop - Background of the picker button
 $picker-wp-button-background-color:           transparent !default;
 
+/// @prop - Padding of the picker column
 $picker-wp-column-padding:                    0 4px !default;
 
+/// @prop - Padding of the picker option
 $picker-wp-option-padding:                    0 !default;
+
+/// @prop - Text color of the picker option
 $picker-wp-option-text-color:                 $list-wp-text-color !default;
+
+/// @prop - Font size of the picker option
 $picker-wp-option-font-size:                  22px !default;
+
+/// @prop - Height of the picker option
 $picker-wp-option-height:                     42px !default;
+
+/// @prop - Offset y of the picker option
 $picker-wp-option-offset-y:                   (($picker-wp-height - $picker-wp-toolbar-height) / 2) - ($picker-wp-option-height / 2) - 10 !default;
 
+/// @prop - Text color of the selected picker option
 $picker-wp-option-selected-color:             color($colors-wp, primary) !default;
 
 

src/components/popover/popover.ios.scss

@@ -3,15 +3,28 @@
 // iOS Popover
 // --------------------------------------------------
 
+/// @prop - Width of the popover content
 $popover-ios-width:                     200px !default;
+
+/// @prop - Min width of the popover content
 $popover-ios-min-width:                 0 !default;
+
+/// @prop - Min height of the popover content
 $popover-ios-min-height:                0 !default;
+
+/// @prop - Max height of the popover content
 $popover-ios-max-height:                90% !default;
 
+/// @prop - Border radius of the popover content
 $popover-ios-border-radius:             10px !default;
+
+/// @prop - Text color of the popover content
 $popover-ios-text-color:                $text-ios-color !default;
 
+/// @prop - Background of the popover content
 $popover-ios-background:                $background-ios-color !default;
+
+/// @prop - Background of the popover arrow
 $popover-ios-arrow-background:          $popover-ios-background !default;
 
 

src/components/popover/popover.md.scss

@@ -3,15 +3,31 @@
 // Material Design Popover
 // --------------------------------------------------
 
+/// @prop - Width of the popover content
 $popover-md-width:                     250px !default;
+
+/// @prop - Min width of the popover content
 $popover-md-min-width:                 0 !default;
+
+/// @prop - Min height of the popover content
 $popover-md-min-height:                0 !default;
+
+/// @prop - Max height of the popover content
 $popover-md-max-height:                90% !default;
 
+/// @prop - Border radius of the popover content
 $popover-md-border-radius:             2px !default;
+
+/// @prop - Text color of the popover content
 $popover-md-text-color:                $text-md-color !default;
+
+/// @prop - Background of the popover content
 $popover-md-background:                $background-md-color !default;
+
+/// @prop - Box shadow color of the popover content
 $popover-md-box-shadow-color:          rgba(0, 0, 0, .3) !default;
+
+/// @prop - Box shadow of the popover content
 $popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-color !default;
 
 

src/components/popover/popover.wp.scss

@@ -3,14 +3,28 @@
 // Windows Popover
 // --------------------------------------------------
 
+/// @prop - Width of the popover content
 $popover-wp-width:                     200px !default;
+
+/// @prop - Min width of the popover content
 $popover-wp-min-width:                 0 !default;
+
+/// @prop - Min height of the popover content
 $popover-wp-min-height:                0 !default;
+
+/// @prop - Max height of the popover content
 $popover-wp-max-height:                90% !default;
 
+/// @prop - Border of the popover content
 $popover-wp-border:                    2px solid #ccc !default;
+
+/// @prop - Border radius of the popover content
 $popover-wp-border-radius:             0 !default;
+
+/// @prop - Text color of the popover content
 $popover-wp-text-color:                $text-wp-color !default;
+
+/// @prop - Background of the popover content
 $popover-wp-background:                $background-wp-color !default;
 
 

src/components/radio/radio.ios.scss

@@ -3,16 +3,28 @@
 // iOS Radio
 // --------------------------------------------------
 
+/// @prop - Color of the checked radio
 $radio-ios-color-on:               color($colors-ios, primary) !default;
 
+/// @prop - Width of the radio icon
 $radio-ios-icon-width:             16px !default;
+
+/// @prop - Height of the radio icon
 $radio-ios-icon-height:            21px !default;
+
+/// @prop - Border width of the radio icon
 $radio-ios-icon-border-width:      2px !default;
+
+/// @prop - Border style of the radio icon
 $radio-ios-icon-border-style:      solid !default;
 
+/// @prop - Opacity of the disabled radio
 $radio-ios-disabled-opacity:       .3 !default;
 
+/// @prop - Margin of the item-left in a radio
 $radio-ios-item-left-margin:       8px 21px 8px 3px !default;
+
+/// @prop - Margin of the item-right in a radio
 $radio-ios-item-right-margin:      $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default;
 
 

src/components/radio/radio.md.scss

@@ -3,23 +3,43 @@
 // Material Design Radio
 // --------------------------------------------------
 
+/// @prop - Color of the checked radio
 $radio-md-color-on:               color($colors-md, primary) !default;
+
+/// @prop - Color of the unchecked radio
 $radio-md-color-off:              darken($list-md-border-color, 40%) !default;
 
+/// @prop - Width of the radio icon
 $radio-md-icon-width:             16px !default;
+
+/// @prop - Height of the radio icon
 $radio-md-icon-height:            16px !default;
+
+/// @prop - Border width of the radio icon
 $radio-md-icon-border-width:      2px !default;
+
+/// @prop - Border style of the radio icon
 $radio-md-icon-border-style:      solid !default;
+
+/// @prop - Border radius of the radio icon
 $radio-md-icon-border-radius:     50% !default;
 
+/// @prop - Transition duration of the radio
 $radio-md-transition-duration:    280ms !default;
+
+/// @prop - Transition easing of the radio
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
+/// @prop - Opacity of the disabled radio
 $radio-md-disabled-opacity:       .3 !default;
 
+/// @prop - Margin of the item-left in a radio
 $radio-md-item-left-margin:       11px 36px 10px 4px !default;
+
+/// @prop - Margin of the item-right in a radio
 $radio-md-item-right-margin:      $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default;
 
+
 .radio-md {
   position: relative;
   display: inline-block;

src/components/radio/radio.wp.scss

@@ -3,21 +3,37 @@
 // Windows Radio
 // --------------------------------------------------
 
+/// @prop - Color of the checked radio
 $radio-wp-color-on:               color($colors-wp, primary) !default;
+
+/// @prop - Color of the unchecked radio
 $radio-wp-color-off:              #333 !default;
 
-// Places radio icon on the left of the item
+/// @prop - Order of the radio (places to the left of the item)
 $radio-wp-order:                  -1 !default;
 
+/// @prop - Width of the radio icon
 $radio-wp-icon-width:             16px !default;
+
+/// @prop - Height of the radio icon
 $radio-wp-icon-height:            16px !default;
+
+/// @prop - Border width of the radio icon
 $radio-wp-icon-border-width:      2px !default;
+
+/// @prop - Border style of the radio icon
 $radio-wp-icon-border-style:      solid !default;
+
+/// @prop - Border radius of the radio icon
 $radio-wp-icon-border-radius:     50% !default;
 
+/// @prop - Opacity of the disabled radio
 $radio-wp-disabled-opacity:       .3 !default;
 
+/// @prop - Margin of the item-left in a radio
 $radio-wp-item-left-margin:       9px 20px 9px 4px !default;
+
+/// @prop - Margin of the item-right in a radio
 $radio-wp-item-right-margin:      11px 10px 10px 0 !default;
 
 

src/components/refresher/refresher.scss

@@ -3,14 +3,22 @@
 // Refresher
 // --------------------------------------------------
 
+/// @prop - Height of the refresher
 $refresher-height:             60px !default;
 
+/// @prop - Color of the refresher icon
 $refresher-icon-color:         #000 !default;
+
+/// @prop - Font size of the refresher icon
 $refresher-icon-font-size:     30px !default;
 
+/// @prop - Text color of the refresher content
 $refresher-text-color:         #000 !default;
+
+/// @prop - Font size of the refresher content
 $refresher-text-font-size:     16px !default;
 
+/// @prop - Border color of the refresher
 $refresher-border-color:       #ddd !default;
 
 

src/components/select/select.ios.scss

@@ -3,12 +3,22 @@
 // iOS Select
 // --------------------------------------------------
 
+/// @prop - Padding top of the select
 $select-ios-padding-top:         $item-ios-padding-top !default;
+
+/// @prop - Padding right of the select
 $select-ios-padding-right:       ($item-ios-padding-right / 2) !default;
+
+/// @prop - Padding bottom of the select
 $select-ios-padding-bottom:      $item-ios-padding-bottom !default;
+
+/// @prop - Padding left of the select
 $select-ios-padding-left:        $item-ios-padding-left !default;
 
+/// @prop - Color of the select icon
 $select-ios-icon-color:          #999 !default;
+
+/// @prop - Color of the select placeholder
 $select-ios-placeholder-color:   $select-ios-icon-color !default;
 
 

src/components/select/select.md.scss

@@ -3,12 +3,22 @@
 // Material Design Select
 // --------------------------------------------------
 
+/// @prop - Padding top of the select
 $select-md-padding-top:         $item-md-padding-top !default;
+
+/// @prop - Padding right of the select
 $select-md-padding-right:       ($item-md-padding-right / 2) !default;
+
+/// @prop - Padding bottom of the select
 $select-md-padding-bottom:      $item-md-padding-bottom !default;
+
+/// @prop - Padding left of the select
 $select-md-padding-left:        $item-md-padding-left !default;
 
+/// @prop - Color of the select icon
 $select-md-icon-color:          #999 !default;
+
+/// @prop - Color of the select placeholder
 $select-md-placeholder-color:   $select-md-icon-color !default;
 
 

src/components/select/select.wp.scss

@@ -3,21 +3,40 @@
 // Windows Select
 // --------------------------------------------------
 
+/// @prop - Padding top and bottom of the select
 $select-wp-padding-vertical:    0 !default;
+
+/// @prop - Padding left and right of the select
 $select-wp-padding-horizontal:  ($item-wp-padding-right / 2) !default;
 
+/// @prop - Margin top of the select
 $select-wp-margin-top:          $item-wp-padding-top !default;
+
+/// @prop - Margin right of the select
 $select-wp-margin-right:        ($item-wp-padding-right / 2) !default;
+
+/// @prop - Margin bottom of the select
 $select-wp-margin-bottom:       $item-wp-padding-bottom !default;
+
+/// @prop - Margin left of the select
 $select-wp-margin-left:         ($item-wp-padding-left / 2) !default;
 
+/// @prop - Border width of the select
 $select-wp-border-width:        2px !default;
+
+/// @prop - Border color of the select
 $select-wp-border-color:        $input-wp-border-color !default;
 
+/// @prop - Width of the select icon
 $select-wp-icon-width:          18px !default;
+
+/// @prop - Width of the select icon arrow
 $select-wp-icon-arrow-width:    2px !default;
 
+/// @prop - Color of the select icon
 $select-wp-icon-color:          $select-wp-border-color !default;
+
+/// @prop - Color of the select placeholder
 $select-wp-placeholder-color:   $select-wp-icon-color !default;
 
 

src/components/toast/toast.ios.scss

@@ -3,14 +3,22 @@
 // iOS Toast
 // --------------------------------------------------
 
-$toast-ios-text-align:                            left !default;
+/// @prop - Background of the toast wrapper
 $toast-ios-background:                            rgba(0, 0, 0, .9) !default;
+
+/// @prop - Border radius of the toast wrapper
 $toast-ios-border-radius:                         .65rem !default;
 
+/// @prop - Color of the toast title
 $toast-ios-title-color:                           #fff !default;
+
+/// @prop - Font size of the toast title
 $toast-ios-title-font-size:                       1.4rem !default;
+
+/// @prop - Padding of the toast title
 $toast-ios-title-padding:                         1.5rem !default;
 
+
 .toast-ios .toast-wrapper {
   position: absolute;
   right: 10px;

src/components/toast/toast.md.scss

@@ -3,14 +3,19 @@
 // Material Design Toast
 // --------------------------------------------------
 
-$toast-md-text-align:                            left !default;
+/// @prop - Background of the toast wrapper
 $toast-md-background:                            #333 !default;
-$toast-md-group-margin-bottom:                   8px !default;
 
+/// @prop - Color of the toast title
 $toast-md-title-color:                           #fff !default;
+
+/// @prop - Font size of the toast title
 $toast-md-title-font-size:                       1.5rem !default;
+
+/// @prop - Padding of the toast title
 $toast-md-title-padding:                         19px 16px 17px !default;
 
+
 .toast-md .toast-wrapper {
   position: absolute;
   right: 0;

src/components/toast/toast.scss

@@ -4,7 +4,10 @@
 // Toast
 // --------------------------------------------------
 
+/// @prop - Width of the toast
 $toast-width:                             100% !default;
+
+/// @prop - Max width of the toast
 $toast-max-width:                         700px !default;
 
 

src/components/toast/toast.wp.scss

@@ -3,15 +3,25 @@
 // Windows Phone Toast
 // --------------------------------------------------
 
-$toast-wp-text-align:                            left !default;
+/// @prop - Background of the toast wrapper
 $toast-wp-background:                            rgba(0, 0, 0, 1) !default;
+
+/// @prop - Border radius of the toast wrapper
 $toast-wp-border-radius:                         0 !default;
+
+/// @prop - Color of the toast button
 $toast-wp-button-color:                          #fff !default;
 
+/// @prop - Color of the toast title
 $toast-wp-title-color:                           #fff !default;
+
+/// @prop - Font size of the toast title
 $toast-wp-title-font-size:                       1.4rem !default;
+
+/// @prop - Padding of the toast title
 $toast-wp-title-padding:                         1.5rem !default;
 
+
 .toast-wp .toast-wrapper {
   position: absolute;
   right: 0;