@broxus/react-uikit 0.17.4 → 0.19.0

package/{dist/esm/styles → styles}/variables.scss

@@ -4,8 +4,8 @@
 //
 // ========================================================================
 
-@import 'mixin.scss';
-
+@use 'sass:color';
+@use 'sass:math';
 
 // Breakpoints
 // ========================================================================
@@ -16,6 +16,7 @@
 // Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
 // Desktop:          Galaxy Tab (1280x800), iPad Pro (1366x1024)
 
+$breakpoint-2xsmall:                                            320px !default;
 $breakpoint-xsmall:                                             480px !default;  // Phone portrait
 $breakpoint-small:                                              640px !default;  // Phone landscape
 $breakpoint-medium:                                             960px !default;  // Tablet Landscape
@@ -24,6 +25,7 @@ $breakpoint-xlarge:                                             1600px !default;
 $breakpoint-2xlarge:                                            2560px !default; // Wide Screens
 $breakpoint-3xlarge:                                            3440px !default; // Ultra Wide Screens
 
+$breakpoint-2xsmall-max:                                        ($breakpoint-2xsmall - 1) !default;
 $breakpoint-xsmall-max:                                         ($breakpoint-small - 1) !default;
 $breakpoint-small-max:                                          ($breakpoint-medium - 1) !default;
 $breakpoint-medium-max:                                         ($breakpoint-large - 1) !default;
@@ -63,6 +65,12 @@ $global-muted-color:                                            #999 !default;
 $global-link-color:                                             #1e87f0 !default;
 $global-link-hover-color:                                       #0f6ecd !default;
 $global-inverse-color:                                          #fff !default;
+$global-primary-color:                                          #1e87f0 !default;
+$global-secondary-color:                                        #222 !default;
+$global-tertiary-color:                                         #b8b8b8 !default;
+$global-success-color:                                          #1cb57c !default;
+$global-warning-color:                                          #ffbc60 !default;
+$global-danger-color:                                           #f5604b !default;
 
 //
 // Backgrounds
@@ -71,12 +79,12 @@ $global-inverse-color:                                          #fff !default;
 $global-background:                                             #fff !default;
 $global-default-background:                                     #e5e5e5 !default;
 $global-muted-background:                                       #f8f8f8 !default;
-$global-primary-background:                                     #1e87f0 !default;
-$global-secondary-background:                                   #222 !default;
-$global-tertiary-background:                                    #b8b8b8 !default;
-$global-success-background:                                     #1cb57c !default;
-$global-warning-background:                                     #ffbc60 !default;
-$global-danger-background:                                      #f5604b !default;
+$global-primary-background:                                     $global-primary-color !default;
+$global-secondary-background:                                   $global-secondary-color !default;
+$global-tertiary-background:                                    $global-tertiary-color !default;
+$global-success-background:                                     $global-success-color !default;
+$global-warning-background:                                     $global-warning-color !default;
+$global-danger-background:                                      $global-danger-color !default;
 
 //
 // Borders
@@ -84,13 +92,17 @@ $global-danger-background:                                      #f5604b !default
 
 $global-border-width:                                           1px !default;
 $global-border-style:                                           solid !default;
-$global-border:                                                 darken($global-default-background, 3%) !default;
+$global-border:                                                 color.scale($global-default-background, $lightness: -3%) !default;
 $global-muted-border:                                           $global-muted-background !default;
-$global-primary-border:                                         $global-primary-background !default;
-$global-secondary-border:                                       $global-secondary-background !default;
-$global-tertiary-border:                                        $global-tertiary-background !default;
+$global-primary-border:                                         $global-primary-color !default;
+$global-secondary-border:                                       $global-secondary-color !default;
+$global-tertiary-border:                                        $global-tertiary-color !default;
+$global-success-border:                                         $global-success-color !default;
+$global-warning-border:                                         $global-warning-color !default;
+$global-danger-border:                                          $global-danger-color !default;
 $global-border-radius:                                          0 !default;
 $global-small-border-radius:                                    0 !default;
+$global-xsmall-border-radius:                                   0 !default;
 
 //
 // Box-Shadows
@@ -120,6 +132,7 @@ $global-small-gutter:                                           15px !default;
 $global-medium-gutter:                                          40px !default;
 $global-large-gutter:                                           70px !default;
 $global-xlarge-gutter:                                          100px !default;
+$global-2xlarge-gutter:                                         140px !default;
 
 //
 // Controls
@@ -200,7 +213,7 @@ $accordion-title-line-height:                                   1.4 !default;
 $accordion-title-color:                                         $global-emphasis-color !default;
 $accordion-title-hover-color:                                   $global-color !default;
 $accordion-header-extra-margin-left:                            $global-small-margin !default;
-$accordion-content-margin-top:                                  $global-margin !default;
+$accordion-panel-margin-top:                                    $global-margin !default;
 $accordion-icon-margin-right:                                   $global-small-margin !default;
 $accordion-icon-color:                                          $global-color !default;
 $accordion-icon-size:                                           1.4rem !default;
@@ -222,14 +235,14 @@ $alert-background:                                              $global-muted-ba
 $alert-color:                                                   $global-color !default;
 $alert-close-top:                                               $alert-padding !default;
 $alert-close-right:                                             $alert-padding !default;
-$alert-primary-background:                                      lighten(mix(white, $global-primary-background, 40%), 20%) !default;
-$alert-primary-color:                                           $global-primary-background !default;
-$alert-success-background:                                      lighten(mix(white, $global-success-background, 40%), 25%) !default;
-$alert-success-color:                                           $global-success-background !default;
-$alert-warning-background:                                      lighten(mix(white, $global-warning-background, 45%), 15%) !default;
-$alert-warning-color:                                           $global-warning-background !default;
-$alert-danger-background:                                       lighten(mix(white, $global-danger-background, 40%), 20%) !default;
-$alert-danger-color:                                            $global-danger-background !default;
+$alert-primary-background:                                      color.scale(color.mix(white, $global-primary-background, 40%), $lightness: 20%) !default;
+$alert-primary-color:                                           $global-primary-color !default;
+$alert-success-background:                                      color.scale(color.mix(white, $global-success-background, 40%), $lightness: 25%) !default;
+$alert-success-color:                                           $global-success-color !default;
+$alert-warning-background:                                      color.scale(color.mix(white, $global-warning-background, 45%), $lightness: 15%) !default;
+$alert-warning-color:                                           $global-warning-color !default;
+$alert-danger-background:                                       color.scale(color.mix(white, $global-danger-background, 40%), $lightness: 20%) !default;
+$alert-danger-color:                                            $global-danger-color !default;
 
 
 // Align
@@ -412,33 +425,33 @@ $button-large-padding-horizontal:                               $global-large-gu
 $button-xlarge-padding-horizontal:                              $global-xlarge-gutter !default;
 $button-default-background:                                     $global-muted-background !default;
 $button-default-color:                                          $global-emphasis-color !default;
-$button-default-hover-background:                               darken($button-default-background, 5%) !default;
+$button-default-hover-background:                               color.scale($button-default-background, $lightness: -5%) !default;
 $button-default-hover-color:                                    $global-emphasis-color !default;
-$button-default-active-background:                              darken($button-default-background, 10%) !default;
+$button-default-active-background:                              color.scale($button-default-background, $lightness: -10%) !default;
 $button-default-active-color:                                   $global-emphasis-color !default;
 $button-primary-background:                                     $global-primary-background !default;
 $button-primary-color:                                          $global-inverse-color !default;
-$button-primary-hover-background:                               darken($button-primary-background, 5%) !default;
+$button-primary-hover-background:                               color.scale($button-primary-background, $lightness: -5%) !default;
 $button-primary-hover-color:                                    $global-inverse-color !default;
-$button-primary-active-background:                              darken($button-primary-background, 10%) !default;
+$button-primary-active-background:                              color.scale($button-primary-background, $lightness: -10%) !default;
 $button-primary-active-color:                                   $global-inverse-color !default;
 $button-secondary-background:                                   $global-secondary-background !default;
 $button-secondary-color:                                        $global-inverse-color !default;
-$button-secondary-hover-background:                             lighten($button-secondary-background, 5%) !default;
+$button-secondary-hover-background:                             color.scale($button-secondary-background, $lightness: 5%) !default;
 $button-secondary-hover-color:                                  $global-inverse-color !default;
-$button-secondary-active-background:                            darken($button-secondary-background, 10%) !default;
+$button-secondary-active-background:                            color.scale($button-secondary-background, $lightness: -10%) !default;
 $button-secondary-active-color:                                 $global-inverse-color !default;
 $button-tertiary-background:                                    $global-tertiary-background !default;
 $button-tertiary-color:                                         $global-inverse-color !default;
-$button-tertiary-hover-background:                              darken($button-tertiary-background, 5%) !default;
+$button-tertiary-hover-background:                              color.scale($button-tertiary-background, $lightness: -5%) !default;
 $button-tertiary-hover-color:                                   $global-inverse-color !default;
-$button-tertiary-active-background:                             darken($button-tertiary-background, 10%) !default;
+$button-tertiary-active-background:                             color.scale($button-tertiary-background, $lightness: -10%) !default;
 $button-tertiary-active-color:                                  $global-inverse-color !default;
 $button-danger-background:                                      $global-danger-background !default;
 $button-danger-color:                                           $global-inverse-color !default;
-$button-danger-hover-background:                                darken($button-danger-background, 5%) !default;
+$button-danger-hover-background:                                color.scale($button-danger-background, $lightness: -5%) !default;
 $button-danger-hover-color:                                     $global-inverse-color !default;
-$button-danger-active-background:                               darken($button-danger-background, 10%) !default;
+$button-danger-active-background:                               color.scale($button-danger-background, $lightness: -10%) !default;
 $button-danger-active-color:                                    $global-inverse-color !default;
 $button-circle-border-radius:                                   40px !default;
 $button-round-border-radius:                                    4px !default;
@@ -458,27 +471,27 @@ $button-link-disabled-color:                                    $global-muted-co
 $inverse-button-color:                                          $inverse-global-inverse-color !default;
 $inverse-button-default-background:                             $inverse-global-primary-background !default;
 $inverse-button-default-color:                                  $inverse-global-inverse-color !default;
-$inverse-button-default-hover-background:                       darken($inverse-button-default-background, 5%) !default;
+$inverse-button-default-hover-background:                       color.scale($inverse-button-default-background, $lightness: -5%) !default;
 $inverse-button-default-hover-color:                            $inverse-global-inverse-color !default;
-$inverse-button-default-active-background:                      darken($inverse-button-default-background, 10%) !default;
+$inverse-button-default-active-background:                      color.scale($inverse-button-default-background, $lightness: -10%) !default;
 $inverse-button-default-active-color:                           $inverse-global-inverse-color !default;
 $inverse-button-primary-background:                             $inverse-global-primary-background !default;
 $inverse-button-primary-color:                                  $inverse-global-inverse-color !default;
-$inverse-button-primary-hover-background:                       darken($inverse-button-primary-background, 5%) !default;
+$inverse-button-primary-hover-background:                       color.scale($inverse-button-primary-background, $lightness: -5%) !default;
 $inverse-button-primary-hover-color:                            $inverse-global-inverse-color !default;
-$inverse-button-primary-active-background:                      darken($inverse-button-primary-background, 10%) !default;
+$inverse-button-primary-active-background:                      color.scale($inverse-button-primary-background, $lightness: -10%) !default;
 $inverse-button-primary-active-color:                           $inverse-global-inverse-color !default;
 $inverse-button-secondary-background:                           $inverse-global-primary-background !default;
 $inverse-button-secondary-color:                                $inverse-global-inverse-color !default;
-$inverse-button-secondary-hover-background:                     darken($inverse-button-secondary-background, 5%) !default;
+$inverse-button-secondary-hover-background:                     color.scale($inverse-button-secondary-background, $lightness: -5%) !default;
 $inverse-button-secondary-hover-color:                          $inverse-global-inverse-color !default;
-$inverse-button-secondary-active-background:                    darken($inverse-button-secondary-background, 10%) !default;
+$inverse-button-secondary-active-background:                    color.scale($inverse-button-secondary-background, $lightness: -10%) !default;
 $inverse-button-secondary-active-color:                         $inverse-global-inverse-color !default;
 $inverse-button-tertiary-background:                            $inverse-global-primary-background !default;
 $inverse-button-tertiary-color:                                 $inverse-global-inverse-color !default;
-$inverse-button-tertiary-hover-background:                      darken($inverse-button-tertiary-background, 5%) !default;
+$inverse-button-tertiary-hover-background:                      color.scale($inverse-button-tertiary-background, $lightness: -5%) !default;
 $inverse-button-tertiary-hover-color:                           $inverse-global-inverse-color !default;
-$inverse-button-tertiary-active-background:                     darken($inverse-button-tertiary-background, 10%) !default;
+$inverse-button-tertiary-active-background:                     color.scale($inverse-button-tertiary-background, $lightness: -10%) !default;
 $inverse-button-tertiary-active-color:                          $inverse-global-inverse-color !default;
 $inverse-button-danger-background:                              $button-danger-background !default;
 $inverse-button-danger-color:                                   $button-danger-color !default;
@@ -501,13 +514,13 @@ $card-body-padding-vertical:                                    $global-gutter !
 $card-body-padding-horizontal-l:                                $global-medium-gutter !default;
 $card-body-padding-vertical-l:                                  $global-medium-gutter !default;
 $card-header-padding-horizontal:                                $global-gutter !default;
-$card-header-padding-vertical:                                  round(($global-gutter * 0.5)) !default;
+$card-header-padding-vertical:                                  math.round(($global-gutter * 0.5)) !default;
 $card-header-padding-horizontal-l:                              $global-medium-gutter !default;
-$card-header-padding-vertical-l:                                round(($global-medium-gutter * 0.5)) !default;
+$card-header-padding-vertical-l:                                math.round(($global-medium-gutter * 0.5)) !default;
 $card-footer-padding-horizontal:                                $global-gutter !default;
-$card-footer-padding-vertical:                                  round(($global-gutter * 0.5)) !default;
+$card-footer-padding-vertical:                                  math.round(($global-gutter * 0.5)) !default;
 $card-footer-padding-horizontal-l:                              $global-medium-gutter !default;
-$card-footer-padding-vertical-l:                                round(($global-medium-gutter * 0.5)) !default;
+$card-footer-padding-vertical-l:                                math.round(($global-medium-gutter * 0.5)) !default;
 $card-title-font-size:                                          $global-large-font-size !default;
 $card-title-line-height:                                        1.4 !default;
 $card-badge-top:                                                $global-small-gutter !default;
@@ -521,35 +534,35 @@ $card-hover-background:                                         $global-muted-ba
 $card-default-background:                                       $global-muted-background !default;
 $card-default-color:                                            $global-color !default;
 $card-default-title-color:                                      $global-emphasis-color !default;
-$card-default-hover-background:                                 darken($card-default-background, 5%) !default;
+$card-default-hover-background:                                 color.scale($card-default-background, $lightness: -5%) !default;
 $card-default-color-mode:                                       dark !default;
 $card-primary-background:                                       $global-primary-background !default;
 $card-primary-color:                                            $global-inverse-color !default;
 $card-primary-title-color:                                      $card-primary-color !default;
-$card-primary-hover-background:                                 darken($card-primary-background, 5%) !default;
+$card-primary-hover-background:                                 color.scale($card-primary-background, $lightness: -5%) !default;
 $card-primary-color-mode:                                       light !default;
 $card-secondary-background:                                     $global-secondary-background !default;
 $card-secondary-color:                                          $global-inverse-color !default;
 $card-secondary-title-color:                                    $card-secondary-color !default;
-$card-secondary-hover-background:                               darken($card-secondary-background, 5%) !default;
+$card-secondary-hover-background:                               color.scale($card-secondary-background, $lightness: -5%) !default;
 $card-secondary-color-mode:                                     light !default;
 $card-tertiary-background:                                      $global-tertiary-background !default;
 $card-tertiary-color:                                           $global-inverse-color !default;
 $card-tertiary-title-color:                                     $card-tertiary-color !default;
-$card-tertiary-hover-background:                                darken($card-tertiary-background, 5%) !default;
+$card-tertiary-hover-background:                                color.scale($card-tertiary-background, $lightness: -5%) !default;
 $card-tertiary-color-mode:                                      light !default;
 $card-small-body-padding-horizontal:                            $global-margin !default;
 $card-small-body-padding-vertical:                              $global-margin !default;
 $card-small-header-padding-horizontal:                          $global-margin !default;
-$card-small-header-padding-vertical:                            round(($global-margin * 0.6667)) !default;
+$card-small-header-padding-vertical:                            math.round(($global-margin * 0.6667)) !default;
 $card-small-footer-padding-horizontal:                          $global-margin !default;
-$card-small-footer-padding-vertical:                            round(($global-margin * 0.6667)) !default;
+$card-small-footer-padding-vertical:                            math.round(($global-margin * 0.6667)) !default;
 $card-large-body-padding-horizontal-l:                          $global-large-gutter !default;
 $card-large-body-padding-vertical-l:                            $global-large-gutter !default;
 $card-large-header-padding-horizontal-l:                        $global-large-gutter !default;
-$card-large-header-padding-vertical-l:                          round(($global-large-gutter * 0.5)) !default;
+$card-large-header-padding-vertical-l:                          math.round(($global-large-gutter * 0.5)) !default;
 $card-large-footer-padding-horizontal-l:                        $global-large-gutter !default;
-$card-large-footer-padding-vertical-l:                          round(($global-large-gutter * 0.5)) !default;
+$card-large-footer-padding-vertical-l:                          math.round(($global-large-gutter * 0.5)) !default;
 
 // Inverse
 $inverse-card-badge-background:                                 $inverse-global-primary-background !default;
@@ -606,6 +619,162 @@ $container-padding-horizontal-s:                                $global-gutter !
 $container-padding-horizontal-m:                                $global-medium-gutter !default;
 
 
+// Form
+// ========================================================================
+
+$form-height:                                                   $global-control-height !default;
+$form-line-height:                                              $form-height !default;
+$form-padding-horizontal:                                       10px !default;
+$form-padding-vertical:                                         math.round($form-padding-horizontal * 0.4) !default;
+$form-background:                                               color.scale($global-muted-background, $lightness: -1%) !default;
+$form-color:                                                    $global-color !default;
+$form-focus-background:                                         color.scale($global-muted-background, $lightness: -2%) !default;
+$form-focus-color:                                              $global-color !default;
+$form-disabled-background:                                      color.scale($global-muted-background, $lightness: -3%) !default;
+$form-disabled-color:                                           $global-color !default;
+$form-placeholder-color:                                        $global-muted-color !default;
+$form-small-height:                                             $global-control-small-height !default;
+$form-small-padding-horizontal:                                 8px !default;
+$form-small-padding-vertical:                                   math.round($form-small-padding-horizontal * 0.4) !default;
+$form-small-line-height:                                        $form-small-height !default;
+$form-small-font-size:                                          $global-small-font-size !default;
+$form-medium-height:                                            $global-control-medium-height !default;
+$form-medium-padding-horizontal:                                15px !default;
+$form-medium-padding-vertical:                                  math.round($form-medium-padding-horizontal * 0.4) !default;
+$form-medium-line-height:                                       $form-medium-height !default;
+$form-medium-font-size:                                         $global-font-size !default;
+$form-large-height:                                             $global-control-large-height !default;
+$form-large-padding-horizontal:                                 12px !default;
+$form-large-padding-vertical:                                   math.round($form-large-padding-horizontal * 0.3) !default;
+$form-large-line-height:                                        $form-large-height !default;
+$form-large-font-size:                                          $global-medium-font-size !default;
+$form-success-color:                                            $global-success-background !default;
+$form-warning-color:                                            $global-warning-background !default;
+$form-danger-color:                                             $global-danger-background !default;
+$form-width-xsmall:                                             50px !default;
+$form-width-small:                                              130px !default;
+$form-width-medium:                                             260px !default;
+$form-width-large:                                              500px !default;
+$form-datalist-padding-right:                                   20px !default;
+$form-datalist-icon-color:                                      $global-color !default;
+$form-legend-font-size:                                         $global-large-font-size !default;
+$form-legend-line-height:                                       1.4 !default;
+$form-label-color:                                              $global-inverse-color !default;
+$form-label-font-size:                                          $global-font-size !default;
+$form-stacked-margin-bottom:                                    $global-small-margin !default;
+$form-horizontal-label-width:                                   200px !default;
+$form-horizontal-label-margin-top:                              7px !default;
+$form-horizontal-controls-margin-left:                          215px !default;
+$form-horizontal-controls-text-padding-top:                     7px !default;
+$form-icon-width:                                               $form-height !default;
+$form-icon-color:                                               $global-muted-color !default;
+$form-icon-hover-color:                                         $global-color !default;
+$form-icon-datalist-image-path:                                 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
+
+// Inverse
+$inverse-form-background:                                       $inverse-global-muted-background !default;
+$inverse-form-color:                                            $inverse-global-color !default;
+$inverse-form-focus-background:                                 $inverse-global-muted-background !default;
+$inverse-form-focus-color:                                      $inverse-global-color !default;
+$inverse-form-placeholder-color:                                $inverse-global-muted-color !default;
+$inverse-form-datalist-icon-color:                              $inverse-global-color !default;
+$inverse-form-icon-color:                                       $inverse-global-muted-color !default;
+$inverse-form-icon-hover-color:                                 $inverse-global-color !default;
+$inverse-form-label-color:                                      $inverse-global-emphasis-color !default;
+
+
+// Control
+// ========================================================================
+
+$control-height:                                                $form-height !default;
+$control-line-height:                                           $control-height !default;
+$control-padding-horizontal:                                    10px !default;
+$control-padding-vertical:                                      math.round($control-padding-horizontal * 0.4) !default;
+$control-background:                                            color.scale($global-muted-background, $lightness: -1%) !default;
+$control-color:                                                 $global-color !default;
+$control-border:                                                $global-border !default;
+$control-border-style:                                          $global-border-style !default;
+$control-border-width:                                          $global-border-width !default;
+$control-border-radius:                                         0 !default;
+$control-hover-background:                                      color.scale($global-muted-background, $lightness: -2%) !default;
+$control-hover-border:                                          color.scale($control-border, $lightness: -4%) !default;
+$control-hover-color:                                           $global-color !default;
+$control-focus-background:                                      color.scale($global-muted-background, $lightness: -2%) !default;
+$control-focus-border:                                          $global-primary-border !default;
+$control-focus-color:                                           $global-color !default;
+$control-disabled-background:                                   color.scale($global-muted-background, $lightness: -3%) !default;
+$control-disabled-border:                                       $control-border !default;
+$control-disabled-color:                                        $global-color !default;
+$control-placeholder-color:                                     $global-muted-color !default;
+$control-small-height:                                          $global-control-small-height !default;
+$control-small-padding-horizontal:                              8px !default;
+$control-small-padding-vertical:                                math.round($control-small-padding-horizontal * 0.4) !default;
+$control-small-line-height:                                     $control-small-height !default;
+$control-small-font-size:                                       $global-small-font-size !default;
+$control-medium-height:                                         $global-control-medium-height !default;
+$control-medium-padding-horizontal:                             15px !default;
+$control-medium-padding-vertical:                               math.round($control-medium-padding-horizontal * 0.4) !default;
+$control-medium-line-height:                                    $control-medium-height !default;
+$control-medium-font-size:                                      $global-font-size !default;
+$control-large-height:                                          $global-control-large-height !default;
+$control-large-padding-horizontal:                              12px !default;
+$control-large-padding-vertical:                                math.round($control-large-padding-horizontal * 0.3) !default;
+$control-large-line-height:                                     $control-large-height !default;
+$control-large-font-size:                                       $global-medium-font-size !default;
+$control-success-border:                                        $global-success-border !default;
+$control-success-color:                                         $global-success-color !default;
+$control-warning-border:                                        $global-warning-border !default;
+$control-warning-color:                                         $global-warning-color !default;
+$control-danger-border:                                         $global-danger-border !default;
+$control-danger-color:                                          $global-danger-color !default;
+$control-blank-border-style:                                    dashed !default;
+$control-blank-focus-border:                                    color.scale($global-muted-background, $lightness: -5%) !default;
+$control-affix-margin:                                          $global-small-margin !default;
+$control-icon-color:                                            $global-muted-color !default;
+$control-icon-hover-color:                                      $global-color !default;
+
+// Inverse
+$inverse-control-background:                                    color.scale($inverse-global-muted-background, $lightness: -60%) !default;
+$inverse-control-border:                                        $inverse-global-border !default;
+$inverse-control-color:                                         $inverse-global-color !default;
+$inverse-control-hover-background:                              color.scale($inverse-global-muted-background, $lightness: -70%) !default;
+$inverse-control-hover-border:                                  color.scale($inverse-control-border, $lightness: -4%) !default;
+$inverse-control-hover-color:                                   $inverse-global-color !default;
+$inverse-control-focus-background:                              color.scale($inverse-global-muted-background, $lightness: -70%) !default;
+$inverse-control-focus-border:                                  $inverse-control-hover-border !default;
+$inverse-control-focus-color:                                   $inverse-global-color !default;
+$inverse-control-disabled-background:                           color.scale($inverse-global-muted-background, $lightness: -30%) !default;
+$inverse-control-disabled-border:                               color.scale($inverse-control-border, $lightness: -4%) !default;
+$inverse-control-placeholder-color:                             $inverse-global-muted-color !default;
+$inverse-control-icon-color:                                    $inverse-global-muted-color !default;
+$inverse-control-icon-hover-color:                              $inverse-global-color !default;
+
+
+// Checkbox
+// ========================================================================
+
+$checkbox-size:                                                 20px !default;
+$checkbox-background:                                           $control-background !default;
+$checkbox-border-width:                                         $control-border-width !default;
+$checkbox-border:                                               $control-border !default;
+$checkbox-border-radius:                                        $control-border-radius !default;
+$checkbox-hover-border:                                         $control-hover-border !default;
+$checkbox-focus-background:                                     $control-focus-background !default;
+$checkbox-focus-border:                                         $control-focus-border !default;
+$checkbox-checked-background:                                   $global-primary-background !default;
+$checkbox-checked-border:                                       $global-primary-border !default;
+$checkbox-checked-icon-color:                                   $global-inverse-color !default;
+$checkbox-control-background:                                   rgba($control-background, 45%) !default;
+$checkbox-checked-control-background:                           rgba($checkbox-checked-background, 15%) !default;
+$checkbox-checked-control-color:                                $global-primary-background !default;
+$checkbox-checked-control-padding:                              10px !default;
+$checkbox-disabled-background:                                  $control-disabled-background !default;
+$checkbox-disabled-border:                                      $control-disabled-border !default;
+$checkbox-disabled-icon-color:                                  $global-muted-color !default;
+$checkbox-checked-icon-border-width:                            2px !default;
+$checkbox-indeterminate-size:                                   $checkbox-size - 10px !default;
+
+
 // Countdown
 // ========================================================================
 
@@ -623,6 +792,21 @@ $countdown-separator-font-size-m:                               3rem !default; /
 // DatePicker
 // ========================================================================
 
+$datepicker-border:                                             $control-border !default;
+$datepicker-border-style:                                       $control-border-style !default;
+$datepicker-border-width:                                       $control-border-width !default;
+$datepicker-height:                                             $control-height - $datepicker-border-width * 2 !default;
+$datepicker-small-height:                                       $control-small-height - $datepicker-border-width * 2 !default;
+$datepicker-medium-height:                                      $control-medium-height - $datepicker-border-width * 2 !default;
+$datepicker-large-height:                                       $control-large-height - $datepicker-border-width * 2 !default;
+$datepicker-success-border:                                     $control-success-border !default;
+$datepicker-success-color:                                      $control-success-color !default;
+$datepicker-warning-border:                                     $control-warning-border !default;
+$datepicker-warning-color:                                      $control-warning-color !default;
+$datepicker-danger-border:                                      $control-danger-border !default;
+$datepicker-danger-color:                                       $control-danger-color !default;
+$datepicker-blank-border-style:                                 $control-blank-border-style !default;
+$datepicker-blank-focus-border:                                 $control-blank-focus-border !default;
 $datepicker-button-font-size:                                   $global-font-size !default;
 $datepicker-button-line-height:                                 $global-control-large-height !default;
 $datepicker-button-padding-horizontal:                          $global-small-gutter !default;
@@ -645,7 +829,6 @@ $datepicker-dropdown-background:                                $global-muted-ba
 $datepicker-dropdown-border:                                    $global-border !default;
 $datepicker-dropdown-border-style:                              $global-border-style !default;
 $datepicker-dropdown-border-width:                              $global-border-width !default;
-$datepicker-dropdown-border-radius:                             $global-border-radius !default;
 
 
 // Description list
@@ -724,6 +907,7 @@ $drawer-close-padding:                                          5px !default;
 // Drop
 // ========================================================================
 
+$drop-mask-background:                                          none !default;
 $drop-z-index:                                                  $global-z-index + 20 !default;
 $drop-width:                                                    300px !default;
 $drop-margin:                                                   $global-margin !default;
@@ -759,240 +943,6 @@ $inverse-dropdown-nav-sublist-item-color:                       $inverse-global-
 $inverse-dropdown-nav-sublist-item-hover-color:                 $inverse-global-color !default;
 
 
-// Form
-// ========================================================================
-
-$form-height:                                                   $global-control-height !default;
-$form-line-height:                                              $form-height !default;
-$form-padding-horizontal:                                       10px !default;
-$form-padding-vertical:                                         round($form-padding-horizontal * 0.4) !default;
-$form-background:                                               darken($global-muted-background, 1%) !default;
-$form-color:                                                    $global-color !default;
-$form-focus-background:                                         darken($global-muted-background, 2%) !default;
-$form-focus-color:                                              $global-color !default;
-$form-disabled-background:                                      darken($global-muted-background, 3%) !default;
-$form-disabled-color:                                           $global-color !default;
-$form-placeholder-color:                                        $global-muted-color !default;
-$form-small-height:                                             $global-control-small-height !default;
-$form-small-padding-horizontal:                                 8px !default;
-$form-small-padding-vertical:                                   round($form-small-padding-horizontal * 0.4) !default;
-$form-small-line-height:                                        $form-small-height !default;
-$form-small-font-size:                                          $global-small-font-size !default;
-$form-medium-height:                                            $global-control-medium-height !default;
-$form-medium-padding-horizontal:                                15px !default;
-$form-medium-padding-vertical:                                  round($form-medium-padding-horizontal * 0.4) !default;
-$form-medium-line-height:                                       $form-medium-height !default;
-$form-medium-font-size:                                         $global-font-size !default;
-$form-large-height:                                             $global-control-large-height !default;
-$form-large-padding-horizontal:                                 12px !default;
-$form-large-padding-vertical:                                   round($form-large-padding-horizontal * 0.3) !default;
-$form-large-line-height:                                        $form-large-height !default;
-$form-large-font-size:                                          $global-medium-font-size !default;
-$form-success-color:                                            $global-success-background !default;
-$form-warning-color:                                            $global-warning-background !default;
-$form-danger-color:                                             $global-danger-background !default;
-$form-width-xsmall:                                             50px !default;
-$form-width-small:                                              130px !default;
-$form-width-medium:                                             260px !default;
-$form-width-large:                                              500px !default;
-$form-datalist-padding-right:                                   20px !default;
-$form-datalist-icon-color:                                      $global-color !default;
-$form-legend-font-size:                                         $global-large-font-size !default;
-$form-legend-line-height:                                       1.4 !default;
-$form-label-color:                                              $global-inverse-color !default;
-$form-label-font-size:                                          $global-font-size !default;
-$form-stacked-margin-bottom:                                    $global-small-margin !default;
-$form-horizontal-label-width:                                   200px !default;
-$form-horizontal-label-margin-top:                              7px !default;
-$form-horizontal-controls-margin-left:                          215px !default;
-$form-horizontal-controls-text-padding-top:                     7px !default;
-$form-icon-width:                                               $form-height !default;
-$form-icon-color:                                               $global-muted-color !default;
-$form-icon-hover-color:                                         $global-color !default;
-$form-icon-datalist-image-path:                                 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
-
-// Inverse
-$inverse-form-background:                                       $inverse-global-muted-background !default;
-$inverse-form-color:                                            $inverse-global-color !default;
-$inverse-form-focus-background:                                 $inverse-global-muted-background !default;
-$inverse-form-focus-color:                                      $inverse-global-color !default;
-$inverse-form-placeholder-color:                                $inverse-global-muted-color !default;
-$inverse-form-datalist-icon-color:                              $inverse-global-color !default;
-$inverse-form-icon-color:                                       $inverse-global-muted-color !default;
-$inverse-form-icon-hover-color:                                 $inverse-global-color !default;
-$inverse-form-label-color:                                      $inverse-global-emphasis-color !default;
-
-
-// Control
-// ========================================================================
-
-$control-height:                                                $form-height !default;
-$control-line-height:                                           $control-height !default;
-$control-padding-horizontal:                                    10px !default;
-$control-padding-vertical:                                      round($control-padding-horizontal * 0.4) !default;
-$control-background:                                            darken($global-muted-background, 1%) !default;
-$control-color:                                                 $global-color !default;
-$control-border:                                                $global-border !default;
-$control-border-style:                                          $global-border-style !default;
-$control-border-width:                                          $global-border-width !default;
-$control-border-radius:                                         0 !default;
-$control-hover-background:                                      darken($global-muted-background, 2%) !default;
-$control-hover-border:                                          darken($control-border, 4%) !default;
-$control-hover-color:                                           $global-color !default;
-$control-focus-background:                                      darken($global-muted-background, 2%) !default;
-$control-focus-border:                                          $global-primary-border !default;
-$control-focus-color:                                           $global-color !default;
-$control-disabled-background:                                   darken($global-muted-background, 3%) !default;
-$control-disabled-border:                                       $control-border !default;
-$control-disabled-color:                                        $global-color !default;
-$control-placeholder-color:                                     $global-muted-color !default;
-$control-small-height:                                          $global-control-small-height !default;
-$control-small-padding-horizontal:                              8px !default;
-$control-small-padding-vertical:                                round($control-small-padding-horizontal * 0.4) !default;
-$control-small-line-height:                                     $control-small-height !default;
-$control-small-font-size:                                       $global-small-font-size !default;
-$control-medium-height:                                         $global-control-medium-height !default;
-$control-medium-padding-horizontal:                             15px !default;
-$control-medium-padding-vertical:                               round($control-medium-padding-horizontal * 0.4) !default;
-$control-medium-line-height:                                    $control-medium-height !default;
-$control-medium-font-size:                                      $global-font-size !default;
-$control-large-height:                                          $global-control-large-height !default;
-$control-large-padding-horizontal:                              12px !default;
-$control-large-padding-vertical:                                round($control-large-padding-horizontal * 0.3) !default;
-$control-large-line-height:                                     $control-large-height !default;
-$control-large-font-size:                                       $global-medium-font-size !default;
-$control-success-border:                                        $global-success-background !default;
-$control-success-color:                                         $global-success-background !default;
-$control-warning-border:                                        $global-warning-background !default;
-$control-warning-color:                                         $global-warning-background !default;
-$control-danger-border:                                         $global-danger-background !default;
-$control-danger-color:                                          $global-danger-background !default;
-$control-danger-color:                                          $global-danger-background !default;
-$control-blank-border-style:                                    dashed !default;
-$control-blank-focus-border:                                    darken($global-muted-background, 5%) !default;
-$control-affix-margin:                                          $global-small-margin !default;
-$control-icon-color:                                            $global-muted-color !default;
-$control-icon-hover-color:                                      $global-color !default;
-
-// Inverse
-$inverse-control-background:                                    darken($inverse-global-muted-background, 60%) !default;
-$inverse-control-border:                                        $inverse-global-border !default;
-$inverse-control-color:                                         $inverse-global-color !default;
-$inverse-control-hover-background:                              darken($inverse-global-muted-background, 70%) !default;
-$inverse-control-hover-border:                                  darken($inverse-control-border, 4%) !default;
-$inverse-control-hover-color:                                   $inverse-global-color !default;
-$inverse-control-focus-background:                              darken($inverse-global-muted-background, 70%) !default;
-$inverse-control-focus-color:                                   $inverse-global-color !default;
-$inverse-control-focus-border:                                  $inverse-control-hover-border !default;
-$inverse-control-placeholder-color:                             $inverse-global-muted-color !default;
-$inverse-control-icon-color:                                    $inverse-global-muted-color !default;
-$inverse-control-icon-hover-color:                              $inverse-global-color !default;
-
-
-// Checkbox
-// ========================================================================
-
-$checkbox-size:                                                 20px !default;
-$checkbox-background:                                           $control-background !default;
-$checkbox-border-width:                                         $control-border-width !default;
-$checkbox-border:                                               $control-border !default;
-$checkbox-border-radius:                                        $control-border-radius !default;
-$checkbox-hover-border:                                         $global-primary-border !default;
-$checkbox-focus-background:                                     $control-focus-background !default;
-$checkbox-focus-border:                                         $global-primary-border !default;
-$checkbox-checked-background:                                   $global-primary-background !default;
-$checkbox-checked-border:                                       $global-primary-border !default;
-$checkbox-checked-icon-color:                                   $global-inverse-color !default;
-$checkbox-control-background:                                   rgba($control-background, 45%) !default;
-$checkbox-checked-control-background:                           rgba($checkbox-checked-background, 15%) !default;
-$checkbox-checked-control-color:                                $global-primary-background !default;
-$checkbox-checked-control-padding:                              10px !default;
-$checkbox-disabled-background:                                  $control-disabled-background !default;
-$checkbox-disabled-border:                                      $control-disabled-border !default;
-$checkbox-disabled-icon-color:                                  $global-muted-color !default;
-$checkbox-checked-icon-border-width:                            2px !default;
-$checkbox-indeterminate-size:                                   $checkbox-size - 10px !default;
-
-
-// Radio
-// ========================================================================
-
-$radio-size:                                                    20px !default;
-$radio-background:                                              $control-background !default;
-$radio-border-width:                                            $control-border-width !default;
-$radio-border:                                                  $control-border !default;
-$radio-hover-border:                                            $global-primary-border !default;
-$radio-focus-background:                                        $control-focus-background !default;
-$radio-focus-border:                                            $control-focus-border !default;
-$radio-checked-background:                                      transparent !default;
-$radio-checked-border:                                          $global-primary-border !default;
-$radio-checked-icon-color:                                      $global-primary-background !default;
-$radio-control-background:                                      rgba($control-background, 45%) !default;
-$radio-checked-control-background:                              rgba($radio-checked-icon-color, 15%) !default;
-$radio-checked-control-color:                                   $global-primary-background !default;
-$radio-disabled-background:                                     $control-disabled-background !default;
-$radio-disabled-border:                                         $control-disabled-border !default;
-$radio-disabled-icon-color:                                     $global-emphasis-color !default;
-
-
-// Select
-// ========================================================================
-
-$select-border:                                                 $control-border !default;
-$select-border-style:                                           $control-border-style !default;
-$select-border-width:                                           $control-border-width !default;
-$select-border-radius:                                          $control-border-radius !default;
-$select-hover-border:                                           $control-hover-border !default;
-$select-focus-border:                                           $control-focus-border !default;
-$select-disabled-border:                                        $control-disabled-border !default;
-$select-height:                                                 $control-height !default;
-$select-small-height:                                           $control-small-height !default;
-$select-medium-height:                                          $control-medium-height !default;
-$select-large-height:                                           $control-large-height !default;
-$select-arrow-icon-size:                                        24px !default;
-$select-gutter:                                                 5px !default;
-$select-small-gutter:                                           5px !default;
-$select-medium-gutter:                                          15px !default;
-$select-large-gutter:                                           12px !default;
-$select-selector-padding-horizontal:                            $control-padding-horizontal !default;
-$select-selector-medium-padding-horizontal:                     $control-medium-padding-horizontal !default;
-$select-selector-large-padding-horizontal:                      $control-large-padding-horizontal !default;
-$select-selection-search-input-color:                           $control-color !default;
-$select-selection-placeholder-color:                            $control-placeholder-color !default;
-$select-selection-item-background:                              $global-background !default;
-$select-selection-item-border-radius:                           $control-border-radius !default;
-$select-selection-item-font-size:                               14px !default;
-$select-selection-item-line-height:                             24px !default;
-$select-selection-item-remove-icon-size:                        $select-selection-item-font-size !default;
-$select-selection-item-remove-icon-hover-color:                 $global-primary-background !default;
-$select-dropdown-background:                                    darken($global-background, 5%) !default;
-$select-dropdown-border:                                        $control-border !default;
-$select-dropdown-border-style:                                  $control-border-style !default;
-$select-dropdown-border-width:                                  $control-border-width !default;
-$select-dropdown-border-radius:                                 $control-border-radius !default;
-$select-icon-color:                                             $control-icon-color !default;
-$select-icon-hover-color:                                       $control-icon-hover-color !default;
-$select-icon-disabled-color:                                    $control-disabled-color !default;
-$select-item-color:                                             $control-color !default;
-$select-item-line-height:                                       24px !default;
-$select-item-active-background:                                 $global-default-background !default;
-$select-item-selected-background:                               darken($global-background, 10%) !default;
-$select-item-selected-state-color:                              $global-primary-background !default;
-$select-item-disabled-color:                                    $control-disabled-color !default;
-$select-item-group-color:                                       $global-muted-color !default;
-$select-item-group-font-size:                                   $global-small-font-size !default;
-$select-item-group-text-transform:                              uppercase !default;
-
-
-// Textarea
-// ========================================================================
-
-$textarea-counter-background:                                   $global-default-background;
-$textarea-counter-border-radius:                                $control-border-radius;
-$textarea-counter-color:                                        $global-muted-color;
-$textarea-counter-font-size:                                    0.8em;
-
-
 // Grid
 // ========================================================================
 
@@ -1082,14 +1032,14 @@ $height-xlarge-height:                                          600px !default;
 $icon-image-size:                                               20px !default;
 $icon-link-color:                                               $global-muted-color !default;
 $icon-link-hover-color:                                         $global-color !default;
-$icon-link-active-color:                                        darken($global-color, 5%) !default;
+$icon-link-active-color:                                        color.scale($global-color, $lightness: -5%) !default;
 $icon-button-size:                                              36px !default;
 $icon-button-border-radius:                                     500px !default;
 $icon-button-background:                                        $global-muted-background !default;
 $icon-button-color:                                             $global-muted-color !default;
-$icon-button-hover-background:                                  darken($icon-button-background, 5%) !default;
+$icon-button-hover-background:                                  color.scale($icon-button-background, $lightness: -5%) !default;
 $icon-button-hover-color:                                       $global-color !default;
-$icon-button-active-background:                                 darken($icon-button-background, 10%) !default;
+$icon-button-active-background:                                 color.scale($icon-button-background, $lightness: -10%) !default;
 $icon-button-active-color:                                      $global-color !default;
 
 // Inverse
@@ -1098,9 +1048,9 @@ $inverse-icon-link-hover-color:                                 $inverse-global-
 $inverse-icon-link-active-color:                                $inverse-global-color !default;
 $inverse-icon-button-background:                                $inverse-global-muted-background !default;
 $inverse-icon-button-color:                                     $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background:                          darken($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background:                          color.scale($inverse-icon-button-background, $lightness: -5%) !default;
 $inverse-icon-button-hover-color:                               $inverse-global-color !default;
-$inverse-icon-button-active-background:                         darken($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background:                         color.scale($inverse-icon-button-background, $lightness: -10%) !default;
 $inverse-icon-button-active-color:                              $inverse-global-color !default;
 
 
@@ -1122,14 +1072,14 @@ $inverse-iconnav-item-active-color:                             $inverse-global-
 // Label
 // ========================================================================
 
-$label-padding-vertical:                                        0 !default;
 $label-padding-horizontal:                                      $global-small-margin !default;
+$label-padding-vertical:                                        0 !default;
 $label-background:                                              $global-primary-background !default;
 $label-border-radius:                                           0 !default;
 $label-line-height:                                             $global-line-height !default;
 $label-font-size:                                               $global-small-font-size !default;
-$label-large-padding-vertical:                                  $global-xsmall-margin !default;
 $label-large-padding-horizontal:                                $global-margin !default;
+$label-large-padding-vertical:                                  $global-xsmall-margin !default;
 $label-large-line-height:                                       $global-line-height !default;
 $label-large-font-size:                                         $global-font-size !default;
 $label-color:                                                   $global-inverse-color !default;
@@ -1276,7 +1226,7 @@ $modal-close-position:                                          $global-small-ma
 $modal-close-padding:                                           5px !default;
 $modal-close-outside-position:                                  0 !default;
 $modal-close-outside-translate:                                 100% !default;
-$modal-close-outside-color:                                     lighten($global-inverse-color, 20%) !default;
+$modal-close-outside-color:                                     color.scale($global-inverse-color, $lightness: 20%) !default;
 $modal-close-outside-hover-color:                               $global-inverse-color !default;
 
 
@@ -1362,12 +1312,12 @@ $navbar-item-color:                                             $global-color !d
 $navbar-toggle-color:                                           $global-muted-color !default;
 $navbar-toggle-hover-color:                                     $global-color !default;
 $navbar-subtitle-font-size:                                     $global-small-font-size !default;
-$navbar-dropdown-z-index:                                       $global-z-index + 20 !default;
-$navbar-dropdown-width:                                         200px !default;
-$navbar-dropdown-margin:                                        0 !default;
-$navbar-dropdown-padding:                                       15px !default;
 $navbar-dropdown-background:                                    $global-muted-background !default;
 $navbar-dropdown-color:                                         $global-color !default;
+$navbar-dropdown-margin:                                        0 !default;
+$navbar-dropdown-padding:                                       15px !default;
+$navbar-dropdown-width:                                         200px !default;
+$navbar-dropdown-z-index:                                       $global-z-index + 20 !default;
 $navbar-dropdown-grid-gutter-horizontal:                        $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical:                          $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top:                            0 !default;
@@ -1470,6 +1420,27 @@ $progress-background:                                           $global-muted-ba
 $progress-bar-background:                                       $global-primary-background !default;
 
 
+// Radio
+// ========================================================================
+
+$radio-size:                                                    20px !default;
+$radio-background:                                              $control-background !default;
+$radio-border-width:                                            $control-border-width !default;
+$radio-border:                                                  $control-border !default;
+$radio-hover-border:                                            $control-hover-border !default;
+$radio-focus-background:                                        $control-focus-background !default;
+$radio-focus-border:                                            $control-focus-border !default;
+$radio-checked-background:                                      transparent !default;
+$radio-checked-border:                                          $global-primary-border !default;
+$radio-checked-icon-color:                                      $global-primary-background !default;
+$radio-control-background:                                      rgba($control-background, 45%) !default;
+$radio-checked-control-background:                              rgba($radio-checked-icon-color, 15%) !default;
+$radio-checked-control-color:                                   $global-primary-background !default;
+$radio-disabled-background:                                     $control-disabled-background !default;
+$radio-disabled-border:                                         $control-disabled-border !default;
+$radio-disabled-icon-color:                                     $global-emphasis-color !default;
+
+
 // Search
 // ========================================================================
 
@@ -1530,6 +1501,76 @@ $section-tertiary-background:                                   $global-tertiary
 $section-tertiary-color-mode:                                   light !default;
 
 
+// Segmented
+// ========================================================================
+$segmented-background:                                          $global-default-background;
+$segmented-padding-horizontal:                                  $global-xsmall-gutter;
+$segmented-padding-vertical:                                    $global-xsmall-gutter;
+$segmented-border-radius:                                       $global-border-radius;
+$segmented-item-height:                                         $global-control-height;
+$segmented-item-padding-horizontal:                             $global-small-gutter;
+$segmented-item-padding-vertical:                               $global-xsmall-gutter;
+$segmented-item-small-height:                                   $global-control-small-height;
+$segmented-item-medium-height:                                  $global-control-medium-height;
+$segmented-item-large-height:                                   $global-control-large-height;
+$segmented-item-color:                                          $global-color;
+$segmented-item-hover-background:                               $global-muted-background;
+$segmented-item-hover-color:                                    $global-color;
+$segmented-item-selected-background:                            $global-primary-background;
+$segmented-item-selected-color:                                 $global-inverse-color;
+$segmented-item-disabled-background:                            $global-muted-background;
+$segmented-item-disabled-color:                                 $global-muted-color;
+
+
+// Select
+// ========================================================================
+
+$select-border:                                                 $control-border !default;
+$select-border-style:                                           $control-border-style !default;
+$select-border-width:                                           $control-border-width !default;
+$select-border-radius:                                          $control-border-radius !default;
+$select-hover-border:                                           $control-hover-border !default;
+$select-focus-border:                                           $control-focus-border !default;
+$select-disabled-border:                                        $control-disabled-border !default;
+$select-height:                                                 $control-height !default;
+$select-small-height:                                           $control-small-height !default;
+$select-medium-height:                                          $control-medium-height !default;
+$select-large-height:                                           $control-large-height !default;
+$select-arrow-icon-size:                                        24px !default;
+$select-gutter:                                                 5px !default;
+$select-small-gutter:                                           5px !default;
+$select-medium-gutter:                                          15px !default;
+$select-large-gutter:                                           12px !default;
+$select-selector-padding-horizontal:                            $control-padding-horizontal !default;
+$select-selector-medium-padding-horizontal:                     $control-medium-padding-horizontal !default;
+$select-selector-large-padding-horizontal:                      $control-large-padding-horizontal !default;
+$select-selection-search-input-color:                           $control-color !default;
+$select-selection-placeholder-color:                            $control-placeholder-color !default;
+$select-selection-item-background:                              $global-background !default;
+$select-selection-item-border-radius:                           $control-border-radius !default;
+$select-selection-item-font-size:                               14px !default;
+$select-selection-item-line-height:                             24px !default;
+$select-selection-item-remove-icon-size:                        $select-selection-item-font-size !default;
+$select-selection-item-remove-icon-hover-color:                 $global-primary-background !default;
+$select-dropdown-background:                                    $global-muted-background !default;
+$select-dropdown-border:                                        $control-border !default;
+$select-dropdown-border-style:                                  $control-border-style !default;
+$select-dropdown-border-width:                                  $control-border-width !default;
+$select-dropdown-border-radius:                                 $control-border-radius !default;
+$select-icon-color:                                             $control-icon-color !default;
+$select-icon-hover-color:                                       $control-icon-hover-color !default;
+$select-icon-disabled-color:                                    $control-disabled-color !default;
+$select-item-color:                                             $control-color !default;
+$select-item-line-height:                                       24px !default;
+$select-item-active-background:                                 $global-default-background !default;
+$select-item-selected-background:                               color.scale($global-background, $lightness: -10%) !default;
+$select-item-selected-state-color:                              $global-primary-background !default;
+$select-item-disabled-color:                                    $control-disabled-color !default;
+$select-item-group-color:                                       $global-muted-color !default;
+$select-item-group-font-size:                                   $global-small-font-size !default;
+$select-item-group-text-transform:                              uppercase !default;
+
+
 // Slidenav
 // ========================================================================
 
@@ -1569,8 +1610,8 @@ $sortable-empty-height:                                         50px !default;
 
 $spinner-size:                                                  30px !default;
 $spinner-stroke-width:                                          2 !default;
-$spinner-radius:                                                floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default; // Minus stroke width to prevent overflow clipping
-$spinner-circumference:                                         round(2 * 3.141 * $spinner-radius) !default;
+$spinner-radius:                                                math.floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default; // Minus stroke width to prevent overflow clipping
+$spinner-circumference:                                         math.round(2 * math.$pi * $spinner-radius) !default;
 $spinner-duration:                                              1.4s !default;
 
 
@@ -1625,7 +1666,7 @@ $inverse-subnav-item-disabled-color:                            $inverse-global-
 // Switch
 // ========================================================================
 
-$switch-background:                                             darken($global-muted-background, 20%) !default;
+$switch-background:                                             color.scale($global-muted-background, $lightness: -20%) !default;
 $switch-checked-background:                                     $global-success-background !default;
 $switch-border:                                                 $global-border !default;
 $switch-border-style:                                           $global-border-style !default;
@@ -1634,6 +1675,7 @@ $switch-border-radius:                                          100px !default;
 $switch-height:                                                 22px !default;
 $switch-width:                                                  44px !default;
 $switch-handle-background:                                      $global-background !default;
+$switch-handle-checked-background:                              $global-background !default;
 $switch-handle-border-radius:                                   100px !default;
 $switch-handle-offset:                                          2px !default;
 
@@ -1649,15 +1691,15 @@ $tabs-large-tab-padding-horizontal:                             25px !default;
 $tabs-large-tab-padding-vertical:                               20px !default;
 $tabs-tab-font-size:                                            $global-font-size !default;
 $tabs-tab-color:                                                $global-color !default;
-$tabs-tab-hover-color:                                          $global-primary-background !default;
-$tabs-tab-active-color:                                         $global-primary-background !default;
+$tabs-tab-hover-color:                                          $global-primary-color !default;
+$tabs-tab-active-color:                                         $global-primary-color !default;
 $tabs-tab-disabled-color:                                       $global-muted-color !default;
 $tabs-tab-remove-color:                                         $global-muted-color !default;
 $tabs-tab-remove-font-size:                                     $global-small-font-size !default;
-$tabs-tab-remove-hover-color:                                   $global-danger-background !default;
-$tabs-tab-remove-active-color:                                  $global-danger-background !default;
+$tabs-tab-remove-hover-color:                                   $global-danger-color !default;
+$tabs-tab-remove-active-color:                                  $global-danger-color !default;
 $tabs-nav-more-font-size:                                       $global-small-font-size !default;
-$tabs-ink-bar-color:                                            $global-primary-background !default;
+$tabs-ink-bar-color:                                            $global-primary-color !default;
 $tabs-ink-bar-height:                                           2px !default;
 $tabs-ink-bar-width:                                            2px !default;
 $tabs-card-tab-background:                                      $global-muted-background !default;
@@ -1713,7 +1755,7 @@ $table-expand-min-width:                                        150px !default;
 // Inverse
 $inverse-table-header-cell-color:                               $inverse-global-color !default;
 $inverse-table-caption-color:                                   $inverse-global-muted-color !default;
-$inverse-table-row-active-background:                           fade-out($inverse-global-muted-background, 0.02) !default;
+$inverse-table-row-active-background:                           rgba($inverse-global-muted-background, 98%) !default;
 $inverse-table-divider-border:                                  $inverse-global-border !default;
 $inverse-table-striped-row-background:                          $inverse-global-muted-background !default;
 $inverse-table-hover-row-background:                            $inverse-table-row-active-background !default;
@@ -1739,11 +1781,11 @@ $text-large-font-size:                                          $global-large-fo
 $text-large-line-height:                                        1.5 !default;
 $text-muted-color:                                              $global-muted-color !default;
 $text-emphasis-color:                                           $global-emphasis-color !default;
-$text-primary-color:                                            $global-primary-background !default;
-$text-secondary-color:                                          $global-secondary-background !default;
-$text-success-color:                                            $global-success-background !default;
-$text-warning-color:                                            $global-warning-background !default;
-$text-danger-color:                                             $global-danger-background !default;
+$text-primary-color:                                            $global-primary-color !default;
+$text-secondary-color:                                          $global-secondary-color !default;
+$text-success-color:                                            $global-success-color !default;
+$text-warning-color:                                            $global-warning-color !default;
+$text-danger-color:                                             $global-danger-color !default;
 $text-background-color:                                         $global-primary-background !default;
 
 // Inverse
@@ -1756,6 +1798,15 @@ $inverse-text-secondary-color:                                  $inverse-global-
 $inverse-text-tertiary-color:                                   $inverse-global-primary-background !default;
 
 
+// Textarea
+// ========================================================================
+
+$textarea-counter-background:                                   $global-default-background;
+$textarea-counter-border-radius:                                $control-border-radius;
+$textarea-counter-color:                                        $global-muted-color;
+$textarea-counter-font-size:                                    0.8em;
+
+
 // Thumbnav
 // ========================================================================