@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/form/_form.scss

@@ -40,6 +40,7 @@ $disable-radio: $disable-everything !default;
 $disable-uncontrolled-input-toggles: false !default;
 $disable-switch: $disable-everything !default;
 $disable-switch-circular-progress: progress.$disable-circular !default;
+$disable-switch-icon: false !default;
 $disable-menu-item-checkbox: $disable-checkbox !default;
 $disable-menu-item-radio: $disable-radio !default;
 $disable-menu-item-switch: $disable-switch !default;
@@ -78,7 +79,7 @@ $label-typography: map.merge(
 ) !default;
 $label-floating-top: 1rem !default;
 $label-floating-top-dense: 0.9rem !default;
-$label-floating-font-size: 0.75em !default;
+$label-floating-scale: 0.75 !default;
 $label-floating-padding: 0.25rem !default;
 
 $message-typography-styles: map.merge(
@@ -196,9 +197,9 @@ $switch-track-background-color: theme.get-default-color(
   $switch-track-light-background-color,
   $switch-track-dark-background-color
 ) !default;
+$switch-icon-size: 1em !default;
 $switch-circular-progress-width: 12 !default;
-
-$menu-item-switch-spacing: calc(icon.$spacing + $switch-ball-size) !default;
+$switch-circular-progress-size: 1em !default;
 
 $slider-size: 2rem !default;
 $slider-vertical-size: 15rem !default;
@@ -255,6 +256,7 @@ $slider-thumb-mask-scale: 0.8 !default;
 $slider-thumb-disabled-color: $slider-track-disabled-color !default;
 $slider-tooltip-caret-size: 0.3rem !default;
 $slider-tooltip-offset: -($slider-thumb-size + icon.$spacing) !default;
+$slider-tooltip-z-index: 0 !default;
 $slider-container-padding: $slider-thumb-size * 0.5 !default;
 $slider-container-addon-spacing: $slider-thumb-size !default;
 $slider-transition-duration: transition.$linear-duration !default;
@@ -264,169 +266,58 @@ $slider-transition-timing-function: transition.$linear-timing-function !default;
 $_disable-text-field-container: $disable-text-field and $disable-password and
   $disable-textarea and $disable-select and $disable-native-select;
 
-$var-lookup: (
-  active-color: (
-    var: --rmd-form-active-color,
-    value: $active-color,
-  ),
-  focus-color: (
-    var: --rmd-form-focus-color,
-    value: $focus-color,
-  ),
-  floating-top: (
-    var: --rmd-form-label-floating-top,
-    value: $label-floating-top,
-  ),
-  label-left-offset: (
-    var: --rmd-form-label-left-offset,
-    value: 0px,
-  ),
-  label-top-offset: (
-    var: --rmd-form-label-top-offset,
-    value: 0px,
-  ),
-  label-active-padding: (
-    var: --rmd-form-label-active-padding,
-    value: 0px,
-  ),
-  label-active-background-color: (
-    var: --rmd-form-label-active-background-color,
-    value: transparent,
-  ),
-  text-height: (
-    var: --rmd-form-text-height,
-    value: $text-field-height,
-  ),
-  text-padding-left: (
-    var: --rmd-form-text-padding-left,
-    value: 0px,
-  ),
-  text-padding-right: (
-    var: --rmd-form-text-padding-right,
-    value: 0px,
-  ),
-  text-padding-top: (
-    var: --rmd-form-text-padding-top,
-    value: 0px,
-  ),
-  text-border-color: (
-    var: --rmd-form-text-border-color,
-    value: $text-field-border-color,
-  ),
-  text-hover-border-color: (
-    var: --rmd-form-text-hover-border-color,
-    value: $text-field-hover-border-color,
-  ),
-  text-filled-color: (
-    var: --rmd-form-text-filled-color,
-    value: $text-field-filled-background-color,
-  ),
-  textarea-height: (
-    var: --rmd-form-textarea-height,
-    value: 0px,
-  ),
-  textarea-padding: (
-    var: --rmd-form-textarea-padding,
-    value: $textarea-vertical-padding,
-  ),
-  addon-top: (
-    var: --rmd-form-addon-top,
-    value: auto,
-  ),
-  addon-margin-top: (
-    var: --rmd-form-addon-margin-top,
-    value: 0px,
-  ),
-  switch-track-background-color: (
-    var: --rmd-switch-track-background-color,
-    value: $switch-track-background-color,
-  ),
-  switch-ball-background-color: (
-    var: --rmd-switch-ball-background-color,
-    value: $switch-ball-background-color,
-  ),
-  slider-color: (
-    var: --rmd-slider-color,
-    value: $slider-track-color,
-  ),
-  slider-active-color: (
-    var: --rmd-slider-active-color,
-    value: $slider-track-active-color,
-  ),
-  slider-inactive-color: (
-    var: --rmd-slider-inactive-color,
-    value: $slider-track-inactive-color,
-  ),
-  slider-size: (
-    var: --rmd-slider-size,
-    value: $slider-size,
-  ),
-  slider-active-size: (
-    var: --rmd-slider-active-size,
-    value: $slider-track-active-size,
-  ),
-  slider-inactive-size: (
-    var: --rmd-slider-inactive-size,
-    value: $slider-track-inactive-size,
-  ),
-  slider-vertical-size: (
-    var: --rmd-slider-vertical-size,
-    value: $slider-vertical-size,
-  ),
-  slider-offset-1: (
-    var: --rmd-slider-offset-1,
-    value: 0,
-  ),
-  slider-offset-2: (
-    var: --rmd-slider-offset-2,
-    value: 0,
-  ),
-  slider-tooltip-scale: (
-    var: --rmd-slider-tooltip-scale,
-    value: 1,
-  ),
-  slider-tooltip-translate: (
-    var: --rmd-slider-tooltip-translate,
-    value: -50%,
-  ),
-  slider-mark-offset: (
-    var: --rmd-slider-mark-offset,
-    value: 0%,
-  ),
-  slider-mark-active-color: (
-    var: --rmd-slider-mark-active-color,
-    value: $slider-mark-active-color,
-  ),
-  slider-mark-active-opacity: (
-    var: --rmd-slider-mark-active-opacity,
-    value: $slider-mark-active-opacity,
-  ),
-  slider-mark-inactive-color: (
-    var: --rmd-slider-mark-inactive-color,
-    value: $slider-mark-inactive-color,
-  ),
-  slider-mark-inactive-opacity: (
-    var: --rmd-slider-mark-inactive-opacity,
-    value: $slider-mark-inactive-opacity,
-  ),
+$variables: (
+  active-color,
+  focus-color,
+  addon-top,
+  addon-margin-top,
+  label-floating-top,
+  label-left-offset,
+  label-top-offset,
+  label-active-padding,
+  label-active-background-color,
+  text-field-height,
+  text-field-padding-left,
+  text-field-padding-right,
+  text-field-padding-top,
+  text-field-border-color,
+  text-field-hover-border-color,
+  text-field-filled-color,
+  textarea-height,
+  textarea-padding,
+  switch-track-background-color,
+  switch-ball-background-color,
+  slider-color,
+  slider-active-color,
+  slider-inactive-color,
+  slider-size,
+  slider-active-size,
+  slider-inactive-size,
+  slider-vertical-size,
+  slider-offset-1,
+  slider-offset-2,
+  slider-tooltip-scale,
+  slider-tooltip-translate,
+  slider-mark-offset,
+  slider-mark-active-color,
+  slider-mark-active-opacity,
+  slider-mark-inactive-color,
+  slider-mark-inactive-opacity
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "form var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "form");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "form var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "form")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -435,13 +326,13 @@ $var-lookup: (
 
 @mixin use-light-theme {
   @if not $disable-everything {
-    @include set-var(text-border-color, $text-field-light-border-color);
+    @include set-var(text-field-border-color, $text-field-light-border-color);
     @include set-var(
-      text-hover-border-color,
+      text-field-hover-border-color,
       $text-field-light-hover-border-color
     );
     @include set-var(
-      text-filled-color,
+      text-field-filled-color,
       $text-field-light-filled-background-color
     );
     @if not $disable-switch {
@@ -486,13 +377,13 @@ $var-lookup: (
 
 @mixin use-dark-theme {
   @if not $disable-everything {
-    @include set-var(text-border-color, $text-field-dark-border-color);
+    @include set-var(text-field-border-color, $text-field-dark-border-color);
     @include set-var(
-      text-hover-border-color,
+      text-field-hover-border-color,
       $text-field-dark-hover-border-color
     );
     @include set-var(
-      text-filled-color,
+      text-field-filled-color,
       $text-field-dark-filled-background-color
     );
     @if not $disable-switch {
@@ -604,7 +495,7 @@ $var-lookup: (
     align-items: center;
     display: inline-flex;
     transition-duration: transition.$linear-duration;
-    transition-property: background-color, color, font-size, transform;
+    transition-property: background-color, transform;
 
     $active-selector: "&--active";
     @if not $_disable-text-field-container {
@@ -622,8 +513,8 @@ $var-lookup: (
           left: auto;
           right: 0;
           transform: translate(
-            utils.negate-var(get-var(text-padding-left)),
-            get-var(floating-top)
+            utils.negate-var(get-var(text-field-padding-left)),
+            get-var(label-floating-top)
           );
         }
 
@@ -634,12 +525,14 @@ $var-lookup: (
         pointer-events: none;
         position: absolute;
         top: 0;
-        transform: translate(get-var(text-padding-left), get-var(floating-top));
-        will-change: font-size, transform;
+        transform: translate(
+          get-var(text-field-padding-left),
+          get-var(label-floating-top)
+        );
       }
 
       &--floating-dense {
-        @include set-var(floating-top, $label-floating-top-dense);
+        @include set-var(label-floating-top, $label-floating-top-dense);
       }
 
       $floating-active-selector: "&--floating-active";
@@ -660,19 +553,17 @@ $var-lookup: (
 
       #{$floating-active-selector} {
         @include utils.rtl {
-          transform: translate(
-            utils.negate-var(get-var(label-left-offset)),
-            get-var(label-top-offset)
-          );
+          transform: scale($label-floating-scale)
+            translate(
+              utils.negate-var(get-var(label-left-offset)),
+              get-var(label-top-offset)
+            );
         }
         @include use-var(background-color, label-active-background-color);
         @include use-var(padding, label-active-padding);
 
-        font-size: $label-floating-font-size;
-        transform: translate(
-          get-var(label-left-offset),
-          get-var(label-top-offset)
-        );
+        transform: scale($label-floating-scale)
+          translate(get-var(label-left-offset), get-var(label-top-offset));
         z-index: 1;
       }
     }
@@ -707,7 +598,7 @@ $var-lookup: (
 
 @mixin text-field-container-styles {
   .rmd-text-field-container {
-    @include use-var(height, text-height);
+    @include use-var(height, text-field-height);
 
     align-items: center;
     display: flex;
@@ -715,11 +606,11 @@ $var-lookup: (
 
     @if not $disable-text-field-container-dense {
       &--dense {
-        @include set-var(text-height, $text-field-dense-height);
+        @include set-var(text-field-height, $text-field-dense-height);
       }
 
       &--dense-label {
-        @include set-var(text-height, $text-field-label-dense-height);
+        @include set-var(text-field-height, $text-field-label-dense-height);
       }
     }
 
@@ -733,7 +624,7 @@ $var-lookup: (
     }
 
     &--label {
-      @include set-var(text-height, $text-field-label-height);
+      @include set-var(text-field-height, $text-field-label-height);
     }
 
     &--error {
@@ -747,22 +638,31 @@ $var-lookup: (
         $disable-text-field-underlined-theme or not
         $disable-text-field-outlined-theme
       {
-        @include set-var(text-border-color, theme.theme-get-var(error-color));
         @include set-var(
-          text-hover-border-color,
+          text-field-border-color,
+          theme.theme-get-var(error-color)
+        );
+        @include set-var(
+          text-field-hover-border-color,
           theme.theme-get-var(error-color)
         );
       }
     }
 
     &--hoverable:hover {
-      @include set-var(text-border-color, get-var(text-hover-border-color));
+      @include set-var(
+        text-field-border-color,
+        get-var(text-field-hover-border-color)
+      );
     }
 
     @if not $disable-text-field-outlined-theme {
       &--outline {
-        @include set-var(text-padding-left, $text-field-outlined-padding);
-        @include set-var(text-padding-right, $text-field-outlined-padding);
+        @include set-var(text-field-padding-left, $text-field-outlined-padding);
+        @include set-var(
+          text-field-padding-right,
+          $text-field-outlined-padding
+        );
         @include set-var(
           label-left-offset,
           $text-field-outlined-padding - $label-floating-padding
@@ -773,7 +673,7 @@ $var-lookup: (
           label-active-background-color,
           theme.theme-get-var(background-color)
         );
-        @include use-var(border-color, text-border-color);
+        @include use-var(border-color, text-field-border-color);
 
         border-radius: $text-field-border-radius;
         border-style: solid;
@@ -804,22 +704,22 @@ $var-lookup: (
             $text-field-spacing}
         );
 
-        @include set-var(text-padding-left, $distance);
+        @include set-var(text-field-padding-left, $distance);
       }
 
       &--outline-right {
         $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});
 
-        @include set-var(text-padding-right, $distance);
+        @include set-var(text-field-padding-right, $distance);
       }
     }
 
     @if not $disable-text-field-filled-theme {
       &--filled {
-        @include set-var(text-padding-left, $text-field-filled-padding);
-        @include set-var(text-padding-right, $text-field-filled-padding);
+        @include set-var(text-field-padding-left, $text-field-filled-padding);
+        @include set-var(text-field-padding-right, $text-field-filled-padding);
         @include set-var(label-left-offset, $text-field-filled-padding);
-        @include use-var(background-color, text-filled-color);
+        @include use-var(background-color, text-field-filled-color);
       }
     }
 
@@ -829,14 +729,20 @@ $var-lookup: (
       $disable-text-field-filled-theme
     {
       &--underline {
-        @include use-var(border-color, text-border-color);
+        @include use-var(border-color, text-field-border-color);
 
         border-bottom-style: solid;
         border-bottom-width: $text-field-border-width;
 
         @if $text-field-underlined-padding {
-          @include set-var(text-padding-left, $text-field-underlined-padding);
-          @include set-var(text-padding-right, $text-field-underlined-padding);
+          @include set-var(
+            text-field-padding-left,
+            $text-field-underlined-padding
+          );
+          @include set-var(
+            text-field-padding-right,
+            $text-field-underlined-padding
+          );
         }
 
         &::after {
@@ -859,7 +765,7 @@ $var-lookup: (
       @if $text-field-underlined-placeholder-height {
         &--underline-placeholder {
           @include set-var(
-            text-padding-top,
+            text-field-padding-top,
             $text-field-underlined-placeholder-addon-padding-top
           );
           height: $text-field-underlined-placeholder-height;
@@ -867,7 +773,7 @@ $var-lookup: (
 
         &--underline-placeholder-only {
           @include set-var(
-            text-padding-top,
+            text-field-padding-top,
             $text-field-underlined-placeholder-padding-top
           );
         }
@@ -875,7 +781,7 @@ $var-lookup: (
 
       &--underline-labelled {
         @include set-var(
-          text-padding-top,
+          text-field-padding-top,
           $text-field-underlined-label-padding-top
         );
         @include set-var(addon-margin-top, $text-field-addon-margin);
@@ -911,11 +817,11 @@ $var-lookup: (
         }
 
         &--underline-left-addon {
-          @include set-var(text-padding-left, calc(#{$addon-offset}));
+          @include set-var(text-field-padding-left, calc(#{$addon-offset}));
         }
 
         &--underline-right-addon {
-          @include set-var(text-padding-right, calc(#{$addon-offset}));
+          @include set-var(text-field-padding-right, calc(#{$addon-offset}));
         }
       }
     }
@@ -925,12 +831,12 @@ $var-lookup: (
 @mixin _text-field-base-styles {
   @include utils.map-to-styles($text-field-typography);
   @include utils.rtl {
-    @include use-var(padding-left, text-padding-right);
-    @include use-var(padding-right, text-padding-left);
+    @include use-var(padding-left, text-field-padding-right);
+    @include use-var(padding-right, text-field-padding-left);
   }
-  @include use-var(padding-left, text-padding-left);
-  @include use-var(padding-right, text-padding-right);
-  @include use-var(padding-top, text-padding-top);
+  @include use-var(padding-left, text-field-padding-left);
+  @include use-var(padding-right, text-field-padding-right);
+  @include use-var(padding-top, text-field-padding-top);
 
   background-color: transparent;
   border-width: 0;
@@ -987,7 +893,10 @@ $var-lookup: (
 
 @mixin password-styles {
   .rmd-password {
-    @include set-var(text-padding-right, $password-visibility-toggle-spacing);
+    @include set-var(
+      text-field-padding-right,
+      $password-visibility-toggle-spacing
+    );
 
     &__input {
       @include utils.auto-rtl(margin-right, button.get-var(icon-size));
@@ -1008,7 +917,7 @@ $var-lookup: (
     height: auto;
     max-width: 100%;
     padding-top: calc(
-      #{get-var(text-padding-top)} + #{get-var(textarea-padding)}
+      #{get-var(text-field-padding-top)} + #{get-var(textarea-padding)}
     );
 
     &--cursor:hover {
@@ -1025,7 +934,7 @@ $var-lookup: (
       &--underline-labelled {
         @include set-var(textarea-padding, 0px);
         @include set-var(
-          floating-top,
+          label-floating-top,
           $text-field-underlined-label-padding-top
         );
       }
@@ -1034,7 +943,7 @@ $var-lookup: (
     @if not $disable-textarea-resizing-rows {
       &--height {
         height: calc(
-          #{get-var(text-padding-top)} +
+          #{get-var(text-field-padding-top)} +
             #{get-var(textarea-padding)} +
             #{get-var(textarea-height)}
         );
@@ -1062,8 +971,8 @@ $var-lookup: (
 
 @mixin textarea-styles {
   .rmd-textarea {
-    @include set-var(text-padding-top, 0px);
-    @include use-var(min-height, text-height);
+    @include set-var(text-field-padding-top, 0px);
+    @include use-var(min-height, text-field-height);
 
     height: get-var(textarea-height, 100%);
 
@@ -1133,7 +1042,7 @@ $var-lookup: (
     @if not $disable-text-field-underlined-theme {
       &--underline {
         @include utils.rtl {
-          @include use-var(padding-right, text-padding-left);
+          @include use-var(padding-right, text-field-padding-left);
 
           padding-left: 0;
         }
@@ -1145,7 +1054,7 @@ $var-lookup: (
     @if not $disable-text-field-outlined-theme {
       &--outline {
         @include utils.rtl {
-          @include use-var(padding-right, text-padding-left);
+          @include use-var(padding-right, text-field-padding-left);
 
           padding-left: $text-field-outlined-padding;
         }
@@ -1157,7 +1066,7 @@ $var-lookup: (
     @if not $disable-text-field-filled-theme {
       &--filled {
         @include utils.rtl {
-          @include use-var(padding-right, text-padding-left);
+          @include use-var(padding-right, text-field-padding-left);
 
           padding-left: $text-field-filled-padding;
         }
@@ -1196,7 +1105,7 @@ $var-lookup: (
     .rmd-native-select-container {
       &--multi {
         @include set-var(addon-top, $native-select-addon-top);
-        @include use-var(min-height, text-height);
+        @include use-var(min-height, text-field-height);
 
         height: auto;
       }
@@ -1210,7 +1119,7 @@ $var-lookup: (
         $disable-text-field-underlined-theme
       {
         &--underline {
-          @include set-var(text-padding-top, 0);
+          @include set-var(text-field-padding-top, 0);
         }
 
         &--underline-padded {
@@ -1241,6 +1150,10 @@ $var-lookup: (
       @include use-var(margin-top, addon-margin-top);
     }
 
+    // this makes it so that this container element is the same size as the
+    // child (normally icons). without this, icons would have a height of 30.5px
+    // and no longer be centered
+    display: inline-flex;
     position: absolute;
 
     // Note: Can't use `:first-child` and `:last-child` since
@@ -1361,6 +1274,11 @@ $var-lookup: (
       cursor: pointer;
     }
 
+    &--current-color,
+    &--current-color .rmd-switch__input:checked + .rmd-switch__ball {
+      @include set-var(switch-ball-background-color, currentcolor);
+    }
+
     &__input {
       @include utils.keyboard-only {
         &:focus + .rmd-switch__ball::before {
@@ -1378,6 +1296,19 @@ $var-lookup: (
     }
 
     &__track {
+      @if not $disable-switch-circular-progress {
+        @include progress.set-var(
+          circular-stroke-width,
+          $switch-circular-progress-width
+        );
+        @include progress.set-var(
+          circular-size,
+          $switch-circular-progress-size
+        );
+      }
+      @if not $disable-switch-icon {
+        @include icon.set-var(size, $switch-icon-size);
+      }
       @include use-var(background-color, switch-track-background-color);
 
       border-radius: $switch-track-border-radius;
@@ -1390,16 +1321,6 @@ $var-lookup: (
       &--disabled {
         opacity: $switch-disabled-opacity;
       }
-
-      @if not $disable-switch-circular-progress {
-        &--async {
-          @include progress.set-var(
-            circular-stroke-width,
-            $switch-circular-progress-width
-          );
-          @include progress.set-var(circular-size, $switch-ball-size);
-        }
-      }
     }
 
     &__ball {
@@ -1436,7 +1357,7 @@ $var-lookup: (
         position: absolute;
         top: 25%;
         width: $switch-ball-size;
-        z-index: 1;
+        z-index: 0;
       }
 
       $active-selector: ".rmd-switch__input:checked + &" +
@@ -1471,15 +1392,10 @@ $var-lookup: (
     }
 
     @if not $disable-menu-item-switch {
-      // increase the spacing because the switch's ball extends past the
-      // container's width
-      @if $menu-item-switch-spacing and
-        $menu-item-switch-spacing !=
-        icon.$spacing
-      {
-        &--switch {
-          @include icon.set-var(spacing, $menu-item-switch-spacing);
-        }
+      // this makes it so that the spacing between the switch and the text
+      // aligns with other menu items/icons
+      &__track {
+        @include icon.set-var(size, $switch-track-width);
       }
 
       // decrease the ball size and remove the hover states since it's handled
@@ -1832,6 +1748,7 @@ $var-lookup: (
     .rmd-slider-tooltip {
       opacity: 1;
       position: absolute;
+      z-index: $slider-tooltip-z-index;
 
       // this is used to generate the triangle
       &::after {
@@ -1976,6 +1893,93 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(active-color, $active-color);
+    @include set-var(focus-color, $focus-color);
+
+    @if not $disable-label and not $disable-floating-label {
+      @include set-var(label-floating-top, $label-floating-top);
+      @include set-var(label-left-offset, 0px);
+      @include set-var(label-top-offset, 0px);
+      @include set-var(label-active-padding, 0px);
+      @include set-var(label-active-background-color, transparent);
+    }
+
+    @if not $disable-text-field {
+      @include set-var(text-field-height, $text-field-height);
+      @include set-var(text-field-padding-left, 0px);
+      @include set-var(text-field-padding-right, 0px);
+      @include set-var(text-field-padding-top, 0px);
+      @include set-var(text-field-border-color, $text-field-border-color);
+      @include set-var(
+        text-field-hover-border-color,
+        $text-field-hover-border-color
+      );
+
+      @include set-var(
+        text-field-filled-color,
+        $text-field-filled-background-color
+      );
+    }
+
+    @if not $disable-textarea {
+      @include set-var(textarea-height, $text-field-height);
+      @include set-var(textarea-padding, $textarea-vertical-padding);
+    }
+
+    @if not $disable-text-field-addon {
+      @include set-var(addon-top, auto);
+      @include set-var(addon-margin-top, 0px);
+    }
+
+    @if not $disable-switch {
+      @include set-var(
+        switch-track-background-color,
+        $switch-track-background-color
+      );
+      @include set-var(
+        switch-ball-background-color,
+        $switch-ball-background-color
+      );
+    }
+
+    @if not $disable-slider {
+      @include set-var(slider-color, $slider-track-color);
+      @include set-var(slider-active-color, $slider-track-active-color);
+      @include set-var(slider-inactive-color, $slider-track-inactive-color);
+      @include set-var(slider-size, $slider-size);
+      @include set-var(slider-active-size, $slider-track-active-size);
+      @include set-var(slider-inactive-size, $slider-track-inactive-size);
+      @if not $disable-discrete-slider {
+        @include set-var(slider-tooltip-scale, 1);
+        @include set-var(slider-tooltip-translate, -50%);
+
+        @if not $disable-discrete-slider-marks {
+          @include set-var(slider-mark-offset, 0%);
+          @include set-var(slider-mark-active-color, $slider-mark-active-color);
+          @include set-var(
+            slider-mark-active-opacity,
+            $slider-mark-active-opacity
+          );
+          @include set-var(
+            slider-mark-inactive-color,
+            $slider-mark-inactive-color
+          );
+          @include set-var(
+            slider-mark-inactive-opacity,
+            $slider-mark-inactive-opacity
+          );
+        }
+      }
+
+      @if not $disable-vertical-slider {
+        @include set-var(slider-vertical-size, $slider-vertical-size);
+      }
+    }
+  }
+}
+
 @mixin styles {
   @include theme.default-system-theme {
     @include use-dark-theme;