diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index f6c077055b..37e2dc50b9 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -36,7 +36,7 @@ $action-sheet-ios-title-font-weight:                    400 !default;
 /// @prop - Border radius of the action sheet title
 $action-sheet-ios-title-border-radius:                  0 !default;
 
-/// @prop - Min height of the action sheet button
+/// @prop - Minimum height of the action sheet button
 $action-sheet-ios-button-min-height:                    5.6rem !default;
 
 /// @prop - Padding of the action sheet button
diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
index e61b0dd4fa..4988b931ed 100644
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -21,7 +21,7 @@ $action-sheet-md-title-font-size:                       1.6rem !default;
 /// @prop - Padding of the action sheet title
 $action-sheet-md-title-padding:                         11px 16px 17px !default;
 
-/// @prop - Min height of the action sheet button
+/// @prop - Minimum height of the action sheet button
 $action-sheet-md-button-min-height:                     4.8rem !default;
 
 /// @prop - Text color of the action sheet button
diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss
index 443c285628..b3d02d0292 100644
--- a/src/components/alert/alert.ios.scss
+++ b/src/components/alert/alert.ios.scss
@@ -51,7 +51,7 @@ $alert-ios-message-text-color:                  inherit !default;
 /// @prop - Padding of the alert empty message
 $alert-ios-message-padding-empty:               0 0 12px 0 !default;
 
-/// @prop - Max height of the alert content
+/// @prop - Maximum height of the alert content
 $alert-ios-content-max-height:                  240px !default;
 
 /// @prop - Margin top of the alert input
@@ -84,7 +84,7 @@ $alert-ios-button-margin:                       0 !default;
 /// @prop - Min width of the alert button
 $alert-ios-button-min-width:                    50% !default;
 
-/// @prop - Min height of the alert button
+/// @prop - Minimum height of the alert button
 $alert-ios-button-min-height:                   44px !default;
 
 /// @prop - Font size of the alert button
diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss
index 461b175595..2898cadc3d 100644
--- a/src/components/alert/alert.md.scss
+++ b/src/components/alert/alert.md.scss
@@ -42,7 +42,7 @@ $alert-md-message-text-color:                 rgba(0, 0, 0, .5) !default;
 /// @prop - Padding of the alert empty message
 $alert-md-message-padding-empty:              0 !default;
 
-/// @prop - Max height of the alert content
+/// @prop - Maximum height of the alert content
 $alert-md-content-max-height:                 240px !default;
 
 /// @prop - Border width of the alert input
diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss
index 0e83a48690..d835e59cb9 100644
--- a/src/components/alert/alert.wp.scss
+++ b/src/components/alert/alert.wp.scss
@@ -54,7 +54,7 @@ $alert-wp-message-text-color:                  #000 !default;
 /// @prop - Font size of the alert message
 $alert-wp-message-font-size:                   13px !default;
 
-/// @prop - Max height of the alert content
+/// @prop - Maximum height of the alert content
 $alert-wp-content-max-height:                  240px !default;
 
 /// @prop - Margin of the alert input
diff --git a/src/components/loading/loading.ios.scss b/src/components/loading/loading.ios.scss
index 907f8ca8b8..cdb3693811 100644
--- a/src/components/loading/loading.ios.scss
+++ b/src/components/loading/loading.ios.scss
@@ -9,7 +9,7 @@ $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
+/// @prop - Maximum height of the loading wrapper
 $loading-ios-max-height:                90% !default;
 
 /// @prop - Border radius of the loading wrapper
diff --git a/src/components/loading/loading.md.scss b/src/components/loading/loading.md.scss
index 43cdcf8e30..d1c4d5c9a5 100644
--- a/src/components/loading/loading.md.scss
+++ b/src/components/loading/loading.md.scss
@@ -9,7 +9,7 @@ $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
+/// @prop - Maximum height of the loading wrapper
 $loading-md-max-height:                90% !default;
 
 /// @prop - Border radius of the loading wrapper
diff --git a/src/components/loading/loading.wp.scss b/src/components/loading/loading.wp.scss
index 1e19d55929..fefb389eb1 100644
--- a/src/components/loading/loading.wp.scss
+++ b/src/components/loading/loading.wp.scss
@@ -9,7 +9,7 @@ $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
+/// @prop - Maximum height of the loading wrapper
 $loading-wp-max-height:                90% !default;
 
 /// @prop - Border radius of the loading wrapper
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 485bc54060..70874a8bec 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -6,10 +6,10 @@
 /// @prop - Min width of the modal inset
 $modal-inset-min-width:         768px !default;
 
-/// @prop - Min height of the small modal inset
+/// @prop - Minimum height of the small modal inset
 $modal-inset-min-height-small:  600px !default;
 
-/// @prop - Min height of the large modal inset
+/// @prop - Minimum height of the large modal inset
 $modal-inset-min-height-large:  768px !default;
 
 /// @prop - Width of the large modal inset
diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss
index caaffad648..7a983eeab6 100644
--- a/src/components/popover/popover.ios.scss
+++ b/src/components/popover/popover.ios.scss
@@ -9,10 +9,10 @@ $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
+/// @prop - Minimum height of the popover content
 $popover-ios-min-height:                0 !default;
 
-/// @prop - Max height of the popover content
+/// @prop - Maximum height of the popover content
 $popover-ios-max-height:                90% !default;
 
 /// @prop - Border radius of the popover content
diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss
index 89d33243fa..ed69dd02d3 100644
--- a/src/components/popover/popover.md.scss
+++ b/src/components/popover/popover.md.scss
@@ -9,10 +9,10 @@ $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
+/// @prop - Minimum height of the popover content
 $popover-md-min-height:                0 !default;
 
-/// @prop - Max height of the popover content
+/// @prop - Maximum height of the popover content
 $popover-md-max-height:                90% !default;
 
 /// @prop - Border radius of the popover content
diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss
index 960814c730..0ab4aa10f7 100644
--- a/src/components/popover/popover.wp.scss
+++ b/src/components/popover/popover.wp.scss
@@ -9,10 +9,10 @@ $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
+/// @prop - Minimum height of the popover content
 $popover-wp-min-height:                0 !default;
 
-/// @prop - Max height of the popover content
+/// @prop - Maximum height of the popover content
 $popover-wp-max-height:                90% !default;
 
 /// @prop - Border of the popover content
diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 24eb24c0c3..973d7cbcf2 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -3,33 +3,70 @@
 // iOS Range
 // --------------------------------------------------
 
+/// @prop - Padding top/bottom of the range
 $range-ios-padding-vertical:                  8px !default;
+
+/// @prop - Padding left/right of the range
 $range-ios-padding-horizontal:                16px !default;
 
+/// @prop - Height of the range slider
 $range-ios-slider-height:                     42px !default;
 
+/// @prop - Width of the area that will select the range knob
 $range-ios-hit-width:                         42px !default;
+
+/// @prop - Height of the area that will select the range knob
 $range-ios-hit-height:                        $range-ios-slider-height !default;
 
+/// @prop - Height of the range bar
 $range-ios-bar-height:                        1px !default;
+
+/// @prop - Background of the range bar
 $range-ios-bar-background-color:              #bdbdbd !default;
+
+/// @prop - Background of the active range bar
 $range-ios-bar-active-background-color:       color($colors-ios, primary) !default;
 
+/// @prop - Width of the range knob
 $range-ios-knob-width:                        28px !default;
+
+/// @prop - Height of the range knob
 $range-ios-knob-height:                       $range-ios-knob-width !default;
+
+/// @prop - Box shadow of the range knob
 $range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default;
+
+/// @prop - Border radius of the range knob
 $range-ios-knob-border-radius:                50% !default;
+
+/// @prop - Background of the range knob
 $range-ios-knob-background-color:             #fff !default;
 
+/// @prop - Width of the range tick
 $range-ios-tick-width:                        $range-ios-bar-height !default;
+
+/// @prop - Height of the range tick
 $range-ios-tick-height:                       8px !default;
+
+/// @prop - Border radius of the range tick
 $range-ios-tick-border-radius:                0 !default;
+
+/// @prop - Background of the range tick
 $range-ios-tick-background-color:             $range-ios-bar-background-color !default;
+
+/// @prop - Background of the active range tick
 $range-ios-tick-active-background-color:      $range-ios-bar-active-background-color !default;
 
+/// @prop - Background of the range pin
 $range-ios-pin-background-color:              transparent !default;
+
+/// @prop - Color of the range pin
 $range-ios-pin-color:                         $text-ios-color !default;
+
+/// @prop - Font size of the range pin
 $range-ios-pin-font-size:                     12px !default;
+
+/// @prop - Padding of the range pin
 $range-ios-pin-padding:                       8px !default;
 
 
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 9db94123e9..3a4395d829 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -3,37 +3,76 @@
 // Material Design Range
 // --------------------------------------------------
 
+/// @prop - Padding top/bottom of the range
 $range-md-padding-vertical:                  8px !default;
+
+/// @prop - Padding left/right of the range
 $range-md-padding-horizontal:                8px !default;
 
+/// @prop - Height of the range slider
 $range-md-slider-height:                     42px !default;
 
+/// @prop - Width of the area that will select the range knob
 $range-md-hit-width:                         42px !default;
+
+/// @prop - Height of the area that will select the range knob
 $range-md-hit-height:                        $range-md-slider-height !default;
 
+/// @prop - Height of the range bar
 $range-md-bar-height:                        2px !default;
+
+/// @prop - Background of the range bar
 $range-md-bar-background-color:              #bdbdbd !default;
+
+/// @prop - Background of the active range bar
 $range-md-bar-active-background-color:       color($colors-md, primary) !default;
 
+/// @prop - Width of the range knob
 $range-md-knob-width:                        18px !default;
+
+/// @prop - Height of the range knob
 $range-md-knob-height:                       $range-md-knob-width !default;
+
+/// @prop - Background of the range knob
 $range-md-knob-background-color:             $range-md-bar-active-background-color !default;
 
+/// @prop - Background of the range knob when the value is the minimum
 $range-md-knob-min-background-color:         $background-md-color !default;
+
+/// @prop - Border of the range knob when the value is the minimum
 $range-md-knob-min-border:                   2px solid $range-md-bar-background-color !default;
 
+/// @prop - Width of the range tick
 $range-md-tick-width:                        2px !default;
+
+/// @prop - Height of the range tick
 $range-md-tick-height:                       $range-md-tick-width !default;
+
+/// @prop - Border radius of the range tick
 $range-md-tick-border-radius:                50% !default;
+
+/// @prop - Background of the range tick
 $range-md-tick-background-color:             #000 !default;
+
+/// @prop - Background of the active range tick
 $range-md-tick-active-background-color:      $range-md-tick-background-color !default;
 
+/// @prop - Background of the range pin
 $range-md-pin-background-color:              $range-md-bar-active-background-color !default;
+
+/// @prop - Color of the range pin
 $range-md-pin-color:                         color-contrast($colors-md, $range-md-bar-active-background-color) !default;
+
+/// @prop - Font size of the range pin
 $range-md-pin-font-size:                     12px !default;
+
+/// @prop - Padding top/bottom of the range pin
 $range-md-pin-padding-vertical:              8px !default;
+
+/// @prop - Padding left/right of the range pin
 $range-md-pin-padding-horizontal:            0 !default;
 
+/// @prop - Background of the range pin when the value is the minimum
 $range-md-pin-min-background-color:          $range-md-bar-background-color !default;
 
 
diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
index fb82eb6c60..c5e6e3555e 100644
--- a/src/components/range/range.wp.scss
+++ b/src/components/range/range.wp.scss
@@ -3,32 +3,67 @@
 // Windows Range
 // --------------------------------------------------
 
+/// @prop - Padding top/bottom of the range
 $range-wp-padding-vertical:                  8px !default;
+
+/// @prop - Padding left/right of the range
 $range-wp-padding-horizontal:                8px !default;
 
+/// @prop - Height of the range slider
 $range-wp-slider-height:                     42px !default;
 
+/// @prop - Width of the area that will select the range knob
 $range-wp-hit-width:                         42px !default;
+
+/// @prop - Height of the area that will select the range knob
 $range-wp-hit-height:                        $range-wp-slider-height !default;
 
+/// @prop - Height of the range bar
 $range-wp-bar-height:                        2px !default;
+
+/// @prop - Background of the range bar
 $range-wp-bar-background-color:              #bdbdbd !default;
+
+/// @prop - Background of the active range bar
 $range-wp-bar-active-background-color:       color($colors-wp, primary) !default;
 
+/// @prop - Width of the range knob
 $range-wp-knob-width:                        8px !default;
+
+/// @prop - Height of the range knob
 $range-wp-knob-height:                       $range-wp-knob-width * 3 !default;
+
+/// @prop - Background of the range knob
 $range-wp-knob-background-color:             $range-wp-bar-active-background-color !default;
+
+/// @prop - Border radius of the range knob
 $range-wp-knob-border-radius:                $range-wp-knob-width / 2 !default;
 
+/// @prop - Width of the range tick
 $range-wp-tick-width:                        $range-wp-bar-height !default;
+
+/// @prop - Height of the range tick
 $range-wp-tick-height:                       $range-wp-tick-width * 3 !default;
+
+/// @prop - Border radius of the range tick
 $range-wp-tick-border-radius:                $range-wp-knob-width / 2 !default;
+
+/// @prop - Background of the range tick
 $range-wp-tick-background-color:             $range-wp-bar-background-color !default;
+
+/// @prop - Background of the active range tick
 $range-wp-tick-active-background-color:      $range-wp-bar-active-background-color !default;
 
+/// @prop - Background of the range pin
 $range-wp-pin-background-color:              $range-wp-bar-active-background-color !default;
+
+/// @prop - Color of the range pin
 $range-wp-pin-color:                         color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;
+
+/// @prop - Font size of the range pin
 $range-wp-pin-font-size:                     12px !default;
+
+/// @prop - Padding of the range pin
 $range-wp-pin-padding:                       8px !default;
 
 
diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
index 5ed74cb645..a84695474f 100644
--- a/src/components/searchbar/searchbar.ios.scss
+++ b/src/components/searchbar/searchbar.ios.scss
@@ -3,34 +3,66 @@
 // iOS Searchbar
 // --------------------------------------------------
 
-$searchbar-ios-padding-top-bottom:        0 !default;
-$searchbar-ios-padding-left-right:        8px !default;
+/// @prop - Padding top/bottom of the searchbar
+$searchbar-ios-padding-vertical:        0 !default;
+
+/// @prop - Padding left/right of the searchbar
+$searchbar-ios-padding-horizontal:        8px !default;
+
+/// @prop - Background of the searchbar
 $searchbar-ios-background-color:          rgba(0, 0, 0, .2) !default;
+
+/// @prop - Border color of the searchbar
 $searchbar-ios-border-color:              rgba(0, 0, 0, .05) !default;
+
+/// @prop - Minimum height of the searchbar
 $searchbar-ios-min-height:                44px !default;
 
+/// @prop - Color of the searchbar input search icon
 $searchbar-ios-input-search-icon-color:   rgba(0, 0, 0, .5) !default;
+
+/// @prop - Svg for the searchbar input search icon
 $searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
+
+/// @prop - Size of the searchbar input search icon
 $searchbar-ios-input-search-icon-size:    13px !default;
 
+/// @prop - Height of the searchbar input
 $searchbar-ios-input-height:              3rem !default;
+
+/// @prop - Color of the searchbar input placeholder
 $searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, .5) !default;
+
+/// @prop - Color of the searchbar input text
 $searchbar-ios-input-text-color:          #000 !default;
+
+/// @prop - Background of the searchbar input
 $searchbar-ios-input-background-color:    #fff !default;
+
+/// @prop - Transition of the searchbar input
 $searchbar-ios-input-transition:          all 300ms ease !default;
+
+/// @prop - Transition of the searchbar input cancel button
 $searchbar-ios-cancel-transition:         all 300ms ease !default;
 
+/// @prop - Color of the searchbar input clear icon
 $searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
+
+/// @prop - Svg for the searchbar input clear icon
 $searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+
+/// @prop - Size of the searchbar input clear icon
 $searchbar-ios-input-clear-icon-size:     18px !default;
 
+/// @prop - Background of the searchbar input inside of a toolbar
 $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 
+
 // Searchbar
 // -----------------------------------------
 
 .searchbar-ios {
-  padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
+  padding: $searchbar-ios-padding-vertical $searchbar-ios-padding-horizontal;
 
   min-height: $searchbar-ios-min-height;
 
diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss
index f34cb1b6c0..b697874830 100644
--- a/src/components/searchbar/searchbar.md.scss
+++ b/src/components/searchbar/searchbar.md.scss
@@ -3,23 +3,49 @@
 // Material Design Searchbar
 // --------------------------------------------------
 
+/// @prop - Padding of the searchbar
 $searchbar-md-padding:                   8px !default;
+
+/// @prop - Background of the searchbar
 $searchbar-md-background-color:          inherit !default;
 
+/// @prop - Color of the searchbar input search icon
 $searchbar-md-input-search-icon-color:   #5b5b5b !default;
+
+/// @prop - Svg for the searchbar input search icon
 $searchbar-md-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
+
+/// @prop - Size of the searchbar input search icon
 $searchbar-md-input-search-icon-size:    20px !default;
 
+/// @prop - Height of the searchbar input
 $searchbar-md-input-height:              auto !default;
+
+/// @prop - Line height of the searchbar input
 $searchbar-md-input-line-height:         3rem !default;
+
+/// @prop - Box shadow of the searchbar input
 $searchbar-md-input-box-shadow:          0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+
+/// @prop - Color of the searchbar input placeholder
 $searchbar-md-input-placeholder-color:   #aeaeae !default;
+
+/// @prop - Color of the searchbar input text
 $searchbar-md-input-text-color:          #141414 !default;
+
+/// @prop - Background of the searchbar input
 $searchbar-md-input-background-color:    #fff !default;
+
+/// @prop - Border radius of the searchbar input
 $searchbar-md-input-border-radius:       2px !default;
 
+/// @prop - Color of the searchbar input clear icon
 $searchbar-md-input-clear-icon-color:    #5b5b5b !default;
+
+/// @prop - Svg for the searchbar input clear icon
 $searchbar-md-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
+
+/// @prop - Size of the searchbar input clear icon
 $searchbar-md-input-clear-icon-size:     22px !default;
 
 
diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss
index 72e889a93d..9b52bdad42 100644
--- a/src/components/searchbar/searchbar.wp.scss
+++ b/src/components/searchbar/searchbar.wp.scss
@@ -3,29 +3,67 @@
 // Windows Searchbar
 // --------------------------------------------------
 
+/// @prop - Padding of the searchbar
 $searchbar-wp-padding:                   8px !default;
+
+/// @prop - Background of the searchbar
 $searchbar-wp-background-color:          transparent !default;
+
+/// @prop - Border width of the searchbar
 $searchbar-wp-border-width:              2px !default;
+
+/// @prop - Border color of the searchbar
 $searchbar-wp-border-color:              $input-wp-border-color !default;
+
+/// @prop - Border color of the searchbar on focus
 $searchbar-wp-border-color-focused:      color($colors-wp, primary) !default;
 
+/// @prop - Color of the searchbar input search icon
 $searchbar-wp-input-search-icon-color:   #858585 !default;
+
+/// @prop - Svg for the searchbar input search icon
 $searchbar-wp-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-wp-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
+
+/// @prop - Size of the searchbar input search icon
 $searchbar-wp-input-search-icon-size:    20px !default;
 
+/// @prop - Padding top/bottom of the searchbar input
 $searchbar-wp-input-padding-vertical:    0 !default;
+
+/// @prop - Padding left/right of the searchbar input
 $searchbar-wp-input-padding-horizontal:  8px !default;
+
+/// @prop - Height of the searchbar input
 $searchbar-wp-input-height:              auto !default;
+
+/// @prop - Line height of the searchbar input
 $searchbar-wp-input-line-height:         3rem !default;
+
+/// @prop - Color of the searchbar input placeholder
 $searchbar-wp-input-placeholder-color:   #858585 !default;
+
+/// @prop - Color of the searchbar input text
 $searchbar-wp-input-text-color:          #141414 !default;
+
+/// @prop - Background of the searchbar input
 $searchbar-wp-input-background-color:    #fff !default;
+
+/// @prop - Border radius of the searchbar input
 $searchbar-wp-input-border-radius:       0 !default;
+
+/// @prop - Font size of the searchbar input
 $searchbar-wp-input-font-size:           1.4rem !default;
+
+/// @prop - Font weight of the searchbar input
 $searchbar-wp-input-font-weight:         400 !default;
 
+/// @prop - Color of the searchbar input clear icon
 $searchbar-wp-input-clear-icon-color:    #858585 !default;
+
+/// @prop - Svg for the searchbar input clear icon
 $searchbar-wp-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-wp-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
+
+/// @prop - Size of the searchbar input clear icon
 $searchbar-wp-input-clear-icon-size:     22px !default;
 
 
diff --git a/src/components/segment/segment.ios.scss b/src/components/segment/segment.ios.scss
index 4b7b24812e..3f3e9e6f75 100644
--- a/src/components/segment/segment.ios.scss
+++ b/src/components/segment/segment.ios.scss
@@ -3,32 +3,73 @@
 // iOS Segment
 // --------------------------------------------------
 
+/// @prop - Background of the segment button
 $segment-button-ios-background-color:           transparent !default;
+
+/// @prop - Background of the activated segment button
 $segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
 
+/// @prop - Text color of the segment button
 $segment-button-ios-text-color:                 color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;
+
+/// @prop - Transition of the activated segment button
 $segment-button-ios-transition-activated:       100ms all linear !default;
+
+/// @prop - Transition of the segment button on hover
 $segment-button-ios-transition-hover:           100ms all linear !default;
+
+/// @prop - Transition of the segment button when pressed
 $segment-button-ios-transition-active:          100ms all linear !default;
 
+/// @prop - Opacity of the segment button on hover
 $segment-button-ios-opacity-hover:              .1 !default;
+
+/// @prop - Opacity of the segment button when pressed
 $segment-button-ios-opacity-active:             .16 !default;
+
+/// @prop - Opacity of the activated segment button
 $segment-button-ios-opacity-activated:          1 !default;
+
+/// @prop - Opacity of the disabled segment button
 $segment-button-ios-opacity-disabled:           .3 !default;
 
+/// @prop - Border width of the segment button
 $segment-button-ios-border-width:               1px !default;
+
+/// @prop - Height of the segment button
 $segment-button-ios-height:                     3.2rem !default;
+
+/// @prop - Line height of the segment button
 $segment-button-ios-line-height:                3rem !default;
+
+/// @prop - Font size of the segment button
 $segment-button-ios-font-size:                  1.3rem !default;
+
+/// @prop - Border radius of the segment button
 $segment-button-ios-border-radius:              4px !default;
+
+/// @prop - Size of an icon in the segment button
 $segment-button-ios-icon-size:                  2.6rem !default;
+
+/// @prop - Line height of an icon in the segment button
 $segment-button-ios-icon-line-height:           2.8rem !default;
 
+/// @prop - Max width of the segment button in a toolbar
 $segment-button-ios-toolbar-button-max-width:   100px !default;
+
+/// @prop - Height of the segment button in a toolbar
 $segment-button-ios-toolbar-button-height:      2.6rem !default;
+
+/// @prop - Line height of the segment button in a toolbar
 $segment-button-ios-toolbar-line-height:        2.5rem !default;
+
+/// @prop - Font size of the segment button in a toolbar
 $segment-button-ios-toolbar-font-size:          1.2rem !default;
+
+/// @prop - Size of an icon in the segment button in a toolbar
 $segment-button-ios-toolbar-icon-size:          2.2rem !default;
+
+/// @prop - Line height of an icon in the segment button in a toolbar
 $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 
diff --git a/src/components/segment/segment.md.scss b/src/components/segment/segment.md.scss
index 6f670a2563..7444bfcb65 100644
--- a/src/components/segment/segment.md.scss
+++ b/src/components/segment/segment.md.scss
@@ -3,21 +3,43 @@
 // Material Design Segment
 // --------------------------------------------------
 
+/// @prop - Text color of the activated segment button
 $segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
+
+/// @prop - Border color of the activated segment button
 $segment-button-md-border-color-activated:     $toolbar-md-active-color !default;
 
+/// @prop - Width of the bottom border on the segment button
 $segment-button-md-border-bottom-width:        2px !default;
+
+/// @prop - Color of the bottom border on the segment button
 $segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
 
+/// @prop - Opacity of the segment button
 $segment-button-md-opacity:                    .7 !default;
+
+/// @prop - Opacity of the activated segment button
 $segment-button-md-opacity-activated:          1 !default;
+
+/// @prop - Opacity of the disabled segment button
 $segment-button-md-opacity-disabled:           .3 !default;
 
+/// @prop - Padding of the segment button
 $segment-button-md-padding:                    0 6px !default;
+
+/// @prop - Height of the segment button
 $segment-button-md-height:                     4.2rem !default;
+
+/// @prop - Line height of the segment button
 $segment-button-md-line-height:                4rem !default;
+
+/// @prop - Font size of the segment button
 $segment-button-md-font-size:                  1.2rem !default;
+
+/// @prop - Size of an icon in the segment button
 $segment-button-md-icon-size:                  2.6rem !default;
+
+/// @prop - Line height of an icon in the segment button
 $segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
 
 
diff --git a/src/components/segment/segment.wp.scss b/src/components/segment/segment.wp.scss
index a7485c7d7f..9903e06dd7 100644
--- a/src/components/segment/segment.wp.scss
+++ b/src/components/segment/segment.wp.scss
@@ -3,24 +3,49 @@
 // Windows Segment
 // --------------------------------------------------
 
-$segment-button-wp-text-color-activated:       $toolbar-wp-text-color !default;
-
-$segment-button-wp-padding:                    0 6px !default;
-$segment-button-wp-height:                     4rem !default;
-$segment-button-wp-line-height:                4rem !default;
-$segment-button-wp-font-size:                  1.3rem !default;
-$segment-button-wp-text-transform:             uppercase !default;
-$segment-button-wp-font-weight:                bold !default;
-$segment-button-wp-icon-size:                  2.6rem !default;
-$segment-button-wp-icon-line-height:           $segment-button-wp-line-height !default;
+/// @prop - Background of the segment button
 $segment-button-wp-background-color:           transparent !default;
 
+/// @prop - Text color of the activated segment button
+$segment-button-wp-text-color-activated:       $toolbar-wp-text-color !default;
+
+/// @prop - Padding of the segment button
+$segment-button-wp-padding:                    0 6px !default;
+
+/// @prop - Height of the segment button
+$segment-button-wp-height:                     4rem !default;
+
+/// @prop - Line height of the segment button
+$segment-button-wp-line-height:                4rem !default;
+
+/// @prop - Font size of the segment button
+$segment-button-wp-font-size:                  1.3rem !default;
+
+/// @prop - Text transform of the segment button
+$segment-button-wp-text-transform:             uppercase !default;
+
+/// @prop - Font weight of the segment button
+$segment-button-wp-font-weight:                bold !default;
+
+/// @prop - Opacity of the segment button
 $segment-button-wp-opacity:                    .5 !default;
+
+/// @prop - Opacity of the activated segment button
 $segment-button-wp-opacity-activated:          1 !default;
+
+/// @prop - Opacity of the disabled segment button
 $segment-button-wp-opacity-disabled:           .3 !default;
 
+/// @prop - Size of an icon in the segment button
+$segment-button-wp-icon-size:                  2.6rem !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-wp-icon-line-height:           $segment-button-wp-line-height !default;
+
+/// @prop - Position of the buttons in the segment
 $segment-button-wp-buttons-justify-content:    flex-start !default;
 
+
 .segment-wp {
   justify-content: $segment-button-wp-buttons-justify-content;
 }
diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss
index 4282f4d653..b44d90e033 100644
--- a/src/components/tabs/tabs.ios.scss
+++ b/src/components/tabs/tabs.ios.scss
@@ -12,7 +12,7 @@ $tabs-ios-tab-padding:              0 2px !default;
 /// @prop - Max width of the tab button
 $tabs-ios-tab-max-width:            240px !default;
 
-/// @prop - Min height of the tab button
+/// @prop - Minimum height of the tab button
 $tabs-ios-tab-min-height:           49px !default;
 
 /// @prop - Text color of the inactive tab button
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
index 19f03786db..5cf7409e6c 100644
--- a/src/components/tabs/tabs.md.scss
+++ b/src/components/tabs/tabs.md.scss
@@ -6,7 +6,7 @@
 /// @prop - Padding on the tab button
 $tabs-md-tab-padding:                         0 !default;
 
-/// @prop - Min height of the tab button
+/// @prop - Minimum height of the tab button
 $tabs-md-tab-min-height:                      5.6rem !default;
 
 /// @prop - Font size of the inactive tab button text
diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
index a448a92ff3..18e8a4f48f 100644
--- a/src/components/tabs/tabs.wp.scss
+++ b/src/components/tabs/tabs.wp.scss
@@ -6,7 +6,7 @@
 /// @prop - Padding on the tab button
 $tabs-wp-tab-padding:                   12px 10px 5px 10px !default;
 
-/// @prop - Min height of the tab button
+/// @prop - Minimum height of the tab button
 $tabs-wp-tab-min-height:                4.8rem !default;
 
 /// @prop - Font size of the tab button text
diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss
index 706a2550b7..16d3bf7d37 100644
--- a/src/components/toggle/toggle.ios.scss
+++ b/src/components/toggle/toggle.ios.scss
@@ -3,30 +3,55 @@
 // iOS Toggle
 // --------------------------------------------------
 
+/// @prop - Width of the toggle
 $toggle-ios-width:                     51px !default;
+
+/// @prop - Height of the toggle
 $toggle-ios-height:                    32px !default;
+
+/// @prop - Border width of the toggle
 $toggle-ios-border-width:              2px !default;
+
+/// @prop - Border radius of the toggle
 $toggle-ios-border-radius:             $toggle-ios-height / 2 !default;
 
+/// @prop - Background color of the unchecked toggle
 $toggle-ios-background-color-off:      $list-ios-background-color !default;
+
+/// @prop - Border color of the unchecked toggle
 $toggle-ios-border-color-off:          grayscale(lighten($list-ios-border-color, 11%)) !default;
 
+/// @prop - Background color of the checked toggle
 $toggle-ios-background-color-on:       color($colors-ios, primary) !default;
 
+/// @prop - Width of the toggle handle
 $toggle-ios-handle-width:              $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
+
+/// @prop - Height of the toggle handle
 $toggle-ios-handle-height:             $toggle-ios-handle-width !default;
+
+/// @prop - Border radius of the toggle handle
 $toggle-ios-handle-border-radius:      $toggle-ios-handle-height / 2 !default;
+
+/// @prop - Box shadow of the toggle handle
 $toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
 
+/// @prop - Background color of the toggle handle
 $toggle-ios-handle-background-color:   $toggle-ios-background-color-off !default;
 
+/// @prop - Margin of the toggle handle
 $toggle-ios-media-margin:              0 !default;
 
+/// @prop - Transition duration of the toggle icon
 $toggle-ios-transition-duration:       300ms !default;
 
+/// @prop - Opacity of the disabled toggle
 $toggle-ios-disabled-opacity:          .3 !default;
 
+/// @prop - Padding of the toggle positioned on the left in an item
 $toggle-ios-item-left-padding:         6px 16px 5px 0 !default;
+
+/// @prop - Padding of the toggle positioned on the right in an item
 $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
 
 
diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss
index d32875e121..296ff1d7af 100644
--- a/src/components/toggle/toggle.md.scss
+++ b/src/components/toggle/toggle.md.scss
@@ -3,27 +3,52 @@
 // Material Design Toggle
 // --------------------------------------------------
 
+/// @prop - Color of the active toggle
 $toggle-md-active-color:                 color($colors-md, primary) !default;
 
+/// @prop - Width of the toggle track
 $toggle-md-track-width:                  36px !default;
+
+/// @prop - Height of the toggle track
 $toggle-md-track-height:                 14px !default;
+
+/// @prop - Background color of the toggle track
 $toggle-md-track-background-color-off:   $list-md-border-color !default;
+
+/// @prop - Background color of the checked toggle track
 $toggle-md-track-background-color-on:    lighten($toggle-md-active-color, 25%) !default;
 
+/// @prop - Width of the toggle handle
 $toggle-md-handle-width:                 20px !default;
+
+/// @prop - Height of the toggle handle
 $toggle-md-handle-height:                20px !default;
-$toggle-md-handle-background-color-off:  $background-md-color !default;
-$toggle-md-handle-background-color-on:   $toggle-md-active-color !default;
-$toggle-md-handle-box-shadow:            0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+
+/// @prop - Border radius of the toggle handle
 $toggle-md-handle-border-radius:         50% !default;
 
+/// @prop - Box shadow of the toggle handle
+$toggle-md-handle-box-shadow:            0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+
+/// @prop - Background color of the toggle handle
+$toggle-md-handle-background-color-off:  $background-md-color !default;
+
+/// @prop - Background color of the checked toggle handle
+$toggle-md-handle-background-color-on:   $toggle-md-active-color !default;
+
+/// @prop - Margin of the toggle
 $toggle-md-media-margin:                 0 !default;
 
+/// @prop - Transition duration of the toggle icon
 $toggle-md-transition-duration:          300ms !default;
 
+/// @prop - Opacity of the disabled toggle
 $toggle-md-disabled-opacity:             .3 !default;
 
+/// @prop - Padding of the toggle positioned on the left in an item
 $toggle-md-item-left-padding:            12px 18px 12px 2px !default;
+
+/// @prop - Padding of the toggle positioned on the right in an item
 $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
 
 
diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss
index 50fe370e31..fc0aed8bb7 100644
--- a/src/components/toggle/toggle.wp.scss
+++ b/src/components/toggle/toggle.wp.scss
@@ -3,33 +3,67 @@
 // Windows Toggle
 // --------------------------------------------------
 
+/// @prop - Color of the toggle
 $toggle-wp-inactive-color:               #323232 !default;
+
+/// @prop - Color of the checked toggle
 $toggle-wp-active-color:                 color($colors-wp, primary) !default;
 
+/// @prop - Width of the toggle track
 $toggle-wp-track-width:                  40px !default;
+
+/// @prop - Height of the toggle track
 $toggle-wp-track-height:                 18px !default;
+
+/// @prop - Background color of the toggle track
 $toggle-wp-track-background-color-off:   transparent !default;
+
+/// @prop - Background color of the checked toggle track
 $toggle-wp-track-background-color-on:    $toggle-wp-active-color !default;
 
+/// @prop - Border width of the toggle track
 $toggle-wp-track-border-width:           2px !default;
+
+/// @prop - Border color of the toggle track
 $toggle-wp-track-border-color-off:       $toggle-wp-inactive-color !default;
+
+/// @prop - Border color of the checked toggle track
 $toggle-wp-track-border-color-on:        $toggle-wp-active-color !default;
 
+/// @prop - Width of the toggle handle
 $toggle-wp-handle-width:                 10px !default;
+
+/// @prop - Height of the toggle handle
 $toggle-wp-handle-height:                10px !default;
+
+/// @prop - Top of the toggle handle
 $toggle-wp-handle-top:                   2px !default;
+
+/// @prop - Left of the toggle handle
 $toggle-wp-handle-left:                  2px !default;
-$toggle-wp-handle-background-color-off:  $toggle-wp-inactive-color !default;
-$toggle-wp-handle-background-color-on:   color-contrast($colors-wp, $toggle-wp-active-color) !default;
+
+/// @prop - Border radius of the toggle handle
 $toggle-wp-handle-border-radius:         50% !default;
 
+/// @prop - Background color of the toggle handle
+$toggle-wp-handle-background-color-off:  $toggle-wp-inactive-color !default;
+
+/// @prop - Background color of the checked toggle handle
+$toggle-wp-handle-background-color-on:   color-contrast($colors-wp, $toggle-wp-active-color) !default;
+
+/// @prop - Margin of the toggle
 $toggle-wp-media-margin:                 0 !default;
 
+/// @prop - Transition duration of the toggle icon
 $toggle-wp-transition-duration:          300ms !default;
 
+/// @prop - Opacity of the disabled toggle
 $toggle-wp-disabled-opacity:             .3 !default;
 
+/// @prop - Padding of the toggle positioned on the left in an item
 $toggle-wp-item-left-padding:            12px 18px 12px 2px !default;
+
+/// @prop - Padding of the toggle positioned on the right in an item
 $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
 
 
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index 081c582cd8..9c0177ce90 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -3,6 +3,7 @@
 // iOS Toolbar
 // --------------------------------------------------
 
+/// @prop - Order of the toolbar elements
 $toolbar-order-ios: (
   back-button: 0,
   menu-toggle-start: 1,
@@ -14,16 +15,28 @@ $toolbar-order-ios: (
   menu-toggle-end: 7,
 );
 
+/// @prop - Font size of the toolbar button
 $toolbar-ios-button-font-size:              1.7rem !default;
 
+/// @prop - Font size of the toolbar title
 $toolbar-ios-title-font-size:               1.7rem !default;
+
+/// @prop - Font weight of the toolbar title
 $toolbar-ios-title-font-weight:             600 !default;
+
+/// @prop - Text alignment of the toolbar title
 $toolbar-ios-title-text-align:              center !default;
+
+/// @prop - Text color of the toolbar title
 $toolbar-ios-title-text-color:              color-contrast($colors-ios, $toolbar-ios-background) !default;
 
+/// @prop - Text color of the toolbar button
 $toolbar-ios-button-color:                  color-contrast($colors-ios, $toolbar-ios-background, ios) !default;
+
+/// @prop - Border radius of the toolbar button
 $toolbar-ios-button-border-radius:          4px !default;
 
+/// @prop - Height of the navigation bar
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
 
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index 9b0fbff00c..6bede27e3d 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -3,6 +3,7 @@
 // Material Design Toolbar
 // --------------------------------------------------
 
+/// @prop - Order of the toolbar elements
 $toolbar-order-md: (
   back-button: 0,
   menu-toggle-start: 1,
@@ -14,14 +15,22 @@ $toolbar-order-md: (
   menu-toggle-end: 7,
 );
 
+/// @prop - Font size of the toolbar title
 $toolbar-md-title-font-size:             2rem !default;
+
+/// @prop - Text color of the toolbar title
 $toolbar-md-title-text-color:            color-contrast($colors-md, $toolbar-md-background, md) !default;
 
+/// @prop - Font size of the toolbar button
 $toolbar-md-button-font-size:            1.4rem !default;
 
+/// @prop - Text color of the toolbar button
 $toolbar-md-button-color:                $toolbar-md-title-text-color !default;
+
+/// @prop - Border radius of the toolbar button
 $toolbar-md-button-border-radius:        2px !default;
 
+/// @prop - Height of the navigation bar
 $navbar-md-height:                       $toolbar-md-height !default;
 
 
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
index da30c1f57e..d51b23e4fb 100644
--- a/src/components/toolbar/toolbar.wp.scss
+++ b/src/components/toolbar/toolbar.wp.scss
@@ -3,6 +3,7 @@
 // Windows Toolbar
 // --------------------------------------------------
 
+/// @prop - Order of the toolbar elements
 $toolbar-order-wp: (
   back-button: 0,
   menu-toggle-start: 1,
@@ -14,16 +15,31 @@ $toolbar-order-wp: (
   menu-toggle-end: 7,
 );
 
+/// @prop - Padding of the toolbar title
 $toolbar-wp-title-padding:               0 6px !default;
+
+/// @prop - Font size of the toolbar title
 $toolbar-wp-title-font-size:             1.5rem !default;
+
+/// @prop - Font weight of the toolbar title
 $toolbar-wp-title-font-weight:           bold !default;
+
+/// @prop - Text transform of the toolbar title
 $toolbar-wp-title-text-transform:        uppercase !default;
+
+/// @prop - Text color of the toolbar title
 $toolbar-wp-title-text-color:            color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
 
+/// @prop - Font size of the toolbar button
 $toolbar-wp-button-font-size:            1.4rem !default;
+
+/// @prop - Text color of the toolbar button
 $toolbar-wp-button-color:                color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
+
+/// @prop - Border radius of the toolbar button
 $toolbar-wp-button-border-radius:        2px !default;
 
+/// @prop - Height of the navigation bar
 $navbar-wp-height:                       $toolbar-wp-height !default;