@douyinfe/semi-foundation 2.24.0-alpha.0 → 2.24.0-beta.0

package/cascader/cascader.scss

@@ -159,23 +159,47 @@ $module: #{$prefix}-cascader;
             background: transparent;
             margin-left: $spacing-cascader_selection_tagInput-marginLeft;
         }
-
+        
         .#{$prefix}-tagInput {
+            &-wrapper {
+                &-default {
+                    min-height: $height-cascader_selection_tagInput_wrapper_default;
+                }
+    
+                &-small {
+                    min-height: $height-cascader_selection_tagInput_wrapper_small;
+                }
+    
+                &-large {
+                    min-height: $height-cascader_selection_tagInput_wrapper_large;
+                }
+            }
+
             .#{$prefix}-input-wrapper {
-                height: $height-cascader_selection_tagInput_input_default;
+                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
                     padding-left: 0;
                 }
-            }
 
-            .#{$prefix}-input-wrapper-small {
-                height: $height-cascader_selection_tagInput_input_small;
-            }
-            .#{$prefix}-input-wrapper-large {
-                height: $height-cascader_selection_tagInput_input_large;
+                &-default {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
+    
+                &-large {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
             }
+
+            // .#{$prefix}-input-wrapper-small {
+            //     height: $height-cascader_selection_tagInput_input_small;
+            // }
+            // .#{$prefix}-input-wrapper-large {
+            //     height: $height-cascader_selection_tagInput_input_large;
+            // }
         }
 
         &-text {

package/cascader/variables.scss

@@ -93,9 +93,9 @@ $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
-$height-cascader_selection_tagInput_input_small: 22px;
-$height-cascader_selection_tagInput_input_default: 30px;
-$height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
+$height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
+$height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
 $height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距

package/form/foundation.ts

@@ -8,7 +8,7 @@ import scrollIntoView, { Options as scrollIntoViewOptions } from 'scroll-into-vi
 
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
 
-export { BaseFormAdapter };
+export type { BaseFormAdapter };
 
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
 

package/highlight/constants.ts

@@ -0,0 +1,7 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-highlight`,
+} as const;
+
+export { cssClasses };

package/highlight/highlight.scss

@@ -0,0 +1,11 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$highlight: #{$prefix}-highlight;
+$tag: #{$prefix}-highlight-tag;
+
+.#{$tag} {
+    color: $color-highlight-text-default;
+    background-color: $color-highlight-text-bg-default;
+    font-weight: $font-highlight-text-fontWeight;
+}

package/highlight/variables.scss

@@ -0,0 +1,5 @@
+
+$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
+$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+
+$font-highlight-text-fontWeight: 600; // 高亮文字字重

package/image/previewInnerFoundation.ts

@@ -18,7 +18,9 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     setStopTiming: (value: boolean) => void;
     getStartMouseDown: () => {x: number; y: number};
     setStartMouseDown: (x: number, y: number) => void;
-    setMouseActiveTime: (time: number) => void
+    setMouseActiveTime: (time: number) => void;
+    disabledBodyScroll: () => void;
+    enabledBodyScroll: () => void
 }
 
 const NOT_CLOSE_TARGETS = ["icon", "footer"];
@@ -31,10 +33,12 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     beforeShow() {
         this._adapter.registerKeyDownListener();
+        this._adapter.disabledBodyScroll();
     }
 
     afterHide() {
         this._adapter.unregisterKeyDownListener();
+        this._adapter.enabledBodyScroll();
     }
 
     handleRatio(type: string) {
@@ -125,7 +129,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             rotation: 0,
         } as any);
         this._adapter.notifyRotateChange(0);
-    }  
+    }
 
     handleDownload = () => {
         const { currentIndex, imgSrc } = this.getStates();
@@ -194,7 +198,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             callback(e);
         };
         Img.onerror = callback;
-        Img.src = preloadImages[0];  
+        Img.src = preloadImages[0];
     }
 
     // 在切换左右图片时，当被切换图片完成加载后，根据方向决定下一个预加载的图片
@@ -260,5 +264,5 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         } else {
             this.preloadSingleImage();
         }
-    }   
-}
+    }
+}

package/lib/cjs/cascader/cascader.css

@@ -136,18 +136,28 @@
   background: transparent;
   margin-left: -4px;
 }
+.semi-cascader-selection .semi-tagInput-wrapper-default {
+  min-height: 30px;
+}
+.semi-cascader-selection .semi-tagInput-wrapper-small {
+  min-height: 22px;
+}
+.semi-cascader-selection .semi-tagInput-wrapper-large {
+  min-height: 38px;
+}
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {
-  height: 30px;
   margin-left: 4px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input {
   padding-left: 0;
 }
-.semi-cascader-selection .semi-tagInput .semi-input-wrapper-small {
-  height: 22px;
+.semi-cascader-selection .semi-tagInput .semi-input-wrapper-default {
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large {
-  height: 38px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 .semi-cascader-selection-text-inactive {
   color: var(--semi-color-text-2);

package/lib/cjs/cascader/cascader.scss

@@ -159,23 +159,47 @@ $module: #{$prefix}-cascader;
             background: transparent;
             margin-left: $spacing-cascader_selection_tagInput-marginLeft;
         }
-
+        
         .#{$prefix}-tagInput {
+            &-wrapper {
+                &-default {
+                    min-height: $height-cascader_selection_tagInput_wrapper_default;
+                }
+    
+                &-small {
+                    min-height: $height-cascader_selection_tagInput_wrapper_small;
+                }
+    
+                &-large {
+                    min-height: $height-cascader_selection_tagInput_wrapper_large;
+                }
+            }
+
             .#{$prefix}-input-wrapper {
-                height: $height-cascader_selection_tagInput_input_default;
+                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
                     padding-left: 0;
                 }
-            }
 
-            .#{$prefix}-input-wrapper-small {
-                height: $height-cascader_selection_tagInput_input_small;
-            }
-            .#{$prefix}-input-wrapper-large {
-                height: $height-cascader_selection_tagInput_input_large;
+                &-default {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
+    
+                &-large {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
             }
+
+            // .#{$prefix}-input-wrapper-small {
+            //     height: $height-cascader_selection_tagInput_input_small;
+            // }
+            // .#{$prefix}-input-wrapper-large {
+            //     height: $height-cascader_selection_tagInput_input_large;
+            // }
         }
 
         &-text {

package/lib/cjs/cascader/variables.scss

@@ -93,9 +93,9 @@ $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
-$height-cascader_selection_tagInput_input_small: 22px;
-$height-cascader_selection_tagInput_input_default: 30px;
-$height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
+$height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
+$height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
 $height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距

package/lib/cjs/form/foundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation from '../base/foundation';
 import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
-export { BaseFormAdapter };
+export type { BaseFormAdapter };
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     data: FormState;
     fields: Map<string, FieldStaff>;

package/lib/cjs/highlight/constants.d.ts

@@ -0,0 +1,4 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-highlight";
+};
+export { cssClasses };

package/lib/cjs/highlight/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-highlight")
+};
+exports.cssClasses = cssClasses;

package/lib/cjs/highlight/highlight.css

@@ -0,0 +1,8 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-highlight-tag {
+  color: rgba(var(--semi-yellow-4), 1);
+  background-color: transparent;
+  font-weight: 600;
+}

package/lib/cjs/highlight/highlight.scss

@@ -0,0 +1,11 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$highlight: #{$prefix}-highlight;
+$tag: #{$prefix}-highlight-tag;
+
+.#{$tag} {
+    color: $color-highlight-text-default;
+    background-color: $color-highlight-text-bg-default;
+    font-weight: $font-highlight-text-fontWeight;
+}

package/lib/cjs/highlight/variables.scss

@@ -0,0 +1,5 @@
+
+$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
+$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+
+$font-highlight-text-fontWeight: 600; // 高亮文字字重

package/lib/cjs/image/previewInnerFoundation.d.ts

@@ -19,6 +19,8 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     };
     setStartMouseDown: (x: number, y: number) => void;
     setMouseActiveTime: (time: number) => void;
+    disabledBodyScroll: () => void;
+    enabledBodyScroll: () => void;
 }
 export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewInnerAdapter<P, S>, P, S> {
     constructor(adapter: PreviewInnerAdapter<P, S>);

package/lib/cjs/image/previewInnerFoundation.js

@@ -324,10 +324,14 @@ class PreviewInnerFoundation extends _foundation.default {
 
   beforeShow() {
     this._adapter.registerKeyDownListener();
+
+    this._adapter.disabledBodyScroll();
   }
 
   afterHide() {
     this._adapter.unregisterKeyDownListener();
+
+    this._adapter.enabledBodyScroll();
   }
 
   handleRatio(type) {

package/lib/cjs/select/foundation.d.ts

@@ -42,6 +42,10 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     getActiveElement(): any;
     setIsFocusInContainer(isFocusInContainer: boolean): void;
     getIsFocusInContainer(): boolean;
+    on(eventName: string, eventCallback: () => void): void;
+    off(eventName: string): void;
+    emit(eventName: string): void;
+    once(eventName: string, eventCallback: () => void): void;
 }
 declare type LabelValue = string | number;
 declare type PropValue = LabelValue | Record<string, any>;
@@ -67,7 +71,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     handleClick(e: any): void;
     open(acInput?: string, originalOptions?: BasicOptionProps[]): void;
     toggle2SearchInput(isShow: boolean): void;
-    close(e?: any): void;
+    close(e?: any, closeCb?: () => void): void;
     onSelect(option: BasicOptionProps, optionIndex: number, event: MouseEvent | KeyboardEvent): void;
     _handleSingleSelect({ value, label, ...rest }: BasicOptionProps, event: any): void;
     _handleMultipleSelect({ value, label, ...rest }: BasicOptionProps, event: MouseEvent | KeyboardEvent): void;
@@ -126,5 +130,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     checkMultipleProps(props?: Record<string, any>): void;
     updateScrollTop(): void;
     updateIsFullTags(): void;
+    handlePopoverClose(): void;
 }
 export {};

package/lib/cjs/select/foundation.js

@@ -430,16 +430,8 @@ class SelectFoundation extends _foundation.default {
     }
   }
 
-  close(e) {
+  close(e, closeCb) {
     // to support A11y, closing the panel trigger does not necessarily lose focus
-    const isFilterable = this._isFilterable();
-
-    if (isFilterable) {
-      // this.unBindKeyBoardEvent();
-      this.clearInput();
-      this.toggle2SearchInput(false);
-    }
-
     this._adapter.closeMenu();
 
     this._adapter.notifyDropdownVisibleChange(false);
@@ -450,6 +442,22 @@ class SelectFoundation extends _foundation.default {
 
     this._adapter.unregisterClickOutsideHandler(); // this._adapter.updateFocusState(false);
 
+
+    const isFilterable = this._isFilterable();
+
+    if (isFilterable) {
+      this.toggle2SearchInput(false);
+    }
+
+    this._adapter.once('popoverClose', () => {
+      if (isFilterable) {
+        this.clearInput();
+      }
+
+      if (closeCb) {
+        closeCb();
+      }
+    });
   }
 
   onSelect(option, optionIndex, event) {
@@ -493,21 +501,24 @@ class SelectFoundation extends _foundation.default {
       value,
       label
     }, rest)); // If it is a controlled component, directly notify
+    // Make sure that the operations of updating updateOptions are done after the animation ends
+    // otherwise the content will be updated when the popup layer is not collapsed, and it looks like it will flash once when it is closed
 
 
     if (this._isControlledComponent()) {
-      this._notifyChange(selections);
-
-      this.close(event);
+      this.close(event, () => {
+        this._notifyChange(selections);
+      });
     } else {
       this._adapter.updateSelection(selections); // notify user
 
 
-      this._notifyChange(selections); // Update the selected item in the drop-down box
-
+      this._notifyChange(selections);
 
-      this.close(event);
-      this.updateOptionsActiveStatus(selections);
+      this.close(event, () => {
+        // Update the selected item in the drop-down box
+        this.updateOptionsActiveStatus(selections);
+      });
     }
   }
 
@@ -1398,6 +1409,10 @@ class SelectFoundation extends _foundation.default {
     }
   }
 
+  handlePopoverClose() {
+    this._adapter.emit('popoverClose');
+  }
+
 }
 
 exports.default = SelectFoundation;

package/lib/cjs/switch/rtl.scss

@@ -7,12 +7,12 @@ $module: #{$prefix}-switch;
 
         &-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked-translateX);
+                transform: translateX(-$spacing-switch_checked-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($width-switch_knob_expand - $motion-switch_checked-translateX);
+                    transform: translateX($width-switch_knob_expand - $spacing-switch_checked-translateX);
                 }
             }
         }
@@ -34,51 +34,51 @@ $module: #{$prefix}-switch;
 
     .#{$module}-loading {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked-translateX);
         }
     
         &.#{$module}-checked {
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked-translateX);
+                transform: translateX(-$spacing-switch_spin_checked-translateX);
             }
         }
     }
     
     .#{$module}-loading.#{$module}-small {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked_small-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked_small-translateX);
         }
         &.#{$module}-checked{
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked_small-translateX);
+                transform: translateX(-$spacing-switch_spin_checked_small-translateX);
             }
         }
     }
     
     .#{$module}-loading.#{$module}-large {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked_large-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked_large-translateX);
         }
     
         &.#{$module}-checked {
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked_large-translateX);
+                transform: translateX(-$spacing-switch_spin_checked_large-translateX);
             }
         }
     }
 
     .#{$module}-large {
         .#{$module}-knob {
-            transform: translateX(-$motion-switch_unchecked_large-translateX);
+            transform: translateX(-$spacing-switch_unchecked_large-translateX);
         }
         &.#{$module}-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked_large-translateX);
+                transform: translateX(-$spacing-switch_checked_large-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($motion-switch_expand_large-translateX - $motion-switch_checked_large-translateX);
+                    transform: translateX($spacing-switch_expand_large-translateX - $spacing-switch_checked_large-translateX);
                 }
             }
         }
@@ -86,16 +86,16 @@ $module: #{$prefix}-switch;
 
     .#{$module}-small {
         .#{$module}-knob {
-            transform: translateX(-$motion-switch_unchecked_small-translateX);
+            transform: translateX(-$spacing-switch_unchecked_small-translateX);
         }
         &.#{$module}-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked_small-translateX);
+                transform: translateX(-$spacing-switch_checked_small-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($motion-switch_expand_small-translateX - $motion-switch_checked_small-translateX);
+                    transform: translateX($spacing-switch_expand_small-translateX - $spacing-switch_checked_small-translateX);
                 }
             }
         }

package/lib/cjs/switch/switch.scss

@@ -44,12 +44,12 @@ $module: #{$prefix}-switch;
         }
 
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked-translateX);
+            transform: translateX($spacing-switch_checked-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked-translateX - $width-switch_knob_expand);
+                transform: translateX($spacing-switch_checked-translateX - $width-switch_knob_expand);
             }
         }
     }
@@ -157,7 +157,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked-translateX);
+        transform: translateX($spacing-switch_spin_unchecked-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-default;
@@ -169,7 +169,7 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_spin_checked-bg-default;
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked-translateX);
+            transform: translateX($spacing-switch_spin_checked-translateX);
         }
     }
 }
@@ -177,7 +177,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading.#{$module}-small {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked_small-translateX);
+        transform: translateX($spacing-switch_spin_unchecked_small-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-small;
@@ -187,7 +187,7 @@ $module: #{$prefix}-switch;
     &.#{$module}-checked{
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked_small-translateX);
+            transform: translateX($spacing-switch_spin_checked_small-translateX);
         }
     }
 }
@@ -195,7 +195,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading.#{$module}-large {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked_large-translateX);
+        transform: translateX($spacing-switch_spin_unchecked_large-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-large;
@@ -206,7 +206,7 @@ $module: #{$prefix}-switch;
     &.#{$module}-checked {
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked_large-translateX);
+            transform: translateX($spacing-switch_spin_checked_large-translateX);
         }
     }
 }
@@ -224,16 +224,16 @@ $module: #{$prefix}-switch;
         height: $width-switch_knob_large;
         top: $spacing-switch_knob_large-padding;
         border-radius: $width-switch_knob_large * 0.5;
-        transform: translateX($motion-switch_unchecked_large-translateX);
+        transform: translateX($spacing-switch_unchecked_large-translateX);
     }
     &.#{$module}-checked {
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked_large-translateX);
+            transform: translateX($spacing-switch_checked_large-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked_large-translateX - $motion-switch_expand_large-translateX);
+                transform: translateX($spacing-switch_checked_large-translateX - $spacing-switch_expand_large-translateX);
             }
         }
     }
@@ -259,16 +259,16 @@ $module: #{$prefix}-switch;
         height: $width-switch_knob_large_small;
         top: $spacing-switch_knob_small-padding;
         border-radius: $width-switch_knob_large_small * 0.5;
-        transform: translateX($motion-switch_unchecked_small-translateX);
+        transform: translateX($spacing-switch_unchecked_small-translateX);
     }
     &.#{$module}-checked {
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked_small-translateX);
+            transform: translateX($spacing-switch_checked_small-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked_small-translateX - $motion-switch_expand_small-translateX);
+                transform: translateX($spacing-switch_checked_small-translateX - $spacing-switch_expand_small-translateX);
             }
         }
     }