rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/Toggle/styles/index.css

@@ -12,10 +12,12 @@
   box-sizing: border-box;
 }
 :root {
+  --rs-font-size-3xs: 0.5rem;
   --rs-font-size-2xs: 0.625rem;
   --rs-font-size-xs: 0.75rem;
   --rs-font-size-sm: 0.875rem;
   --rs-font-size-md: 1rem;
+  --rs-font-size-lg: 1.125rem;
   --rs-radius-full: calc(infinity * 1px);
 }
 :root,
@@ -25,7 +27,6 @@
   --rs-gray-100: #f2f2f5;
   --rs-gray-200: #e5e5ea;
   --rs-gray-300: #d9d9d9;
-  --rs-gray-400: #b6b7b8;
   --rs-gray-500: #939393;
   --rs-gray-600: #717273;
   --rs-gray-800: #343434;
@@ -52,7 +53,7 @@
   --rs-violet-600: #5f2bb3;
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-toggle-bg: var(--rs-gray-400);
+  --rs-toggle-bg: var(--rs-gray-500);
   --rs-toggle-thumb: #fff;
   --rs-toggle-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
   --rs-toggle-loader-rotor: var(--rs-gray-0);
@@ -79,7 +80,6 @@
   --rs-gray-100: #cbced4;
   --rs-gray-200: #a4a9b3;
   --rs-gray-300: #858b94;
-  --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
@@ -106,7 +106,7 @@
   --rs-violet-600: #5f2bb3;
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-toggle-bg: var(--rs-gray-400);
+  --rs-toggle-bg: var(--rs-gray-500);
   --rs-toggle-thumb: #fff;
   --rs-toggle-hover-bg: var(--rs-gray-300);
   --rs-toggle-disabled-bg: var(--rs-gray-600);
@@ -129,7 +129,6 @@
   --rs-gray-100: #cbced4;
   --rs-gray-200: #a4a9b3;
   --rs-gray-300: #858b94;
-  --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
@@ -169,28 +168,152 @@
 }
 .rs-toggle {
   --rs-toggle-transition: 0.2s ease-in-out;
+  --rs-toggle-gap: 10px;
+  --rs-toggle-font-size-xs: var(--rs-font-size-2xs);
+  --rs-toggle-inner-font-size-xs: var(--rs-font-size-3xs);
+  --rs-toggle-line-height-xs: 1;
+  --rs-toggle-gap-xs: 4px;
+  --rs-toggle-handle-gap-xs: 2px;
+  --rs-toggle-size-xs: 14px;
+  --rs-toggle-inner-margin-xs: 4px;
   --rs-toggle-font-size-sm: var(--rs-font-size-xs);
   --rs-toggle-inner-font-size-sm: var(--rs-font-size-2xs);
   --rs-toggle-line-height-sm: 1.4;
+  --rs-toggle-gap-sm: 6px;
+  --rs-toggle-handle-gap-sm: 2px;
+  --rs-toggle-size-sm: 18px;
+  --rs-toggle-inner-margin-sm: 6px;
   --rs-toggle-font-size-md: var(--rs-font-size-sm);
   --rs-toggle-inner-font-size-md: var(--rs-font-size-xs);
   --rs-toggle-line-height-md: 2;
+  --rs-toggle-gap-md: 8px;
+  --rs-toggle-handle-gap-md: 3px;
+  --rs-toggle-size-md: 22px;
+  --rs-toggle-inner-margin-md: 8px;
   --rs-toggle-font-size-lg: var(--rs-font-size-md);
   --rs-toggle-inner-font-size-lg: var(--rs-font-size-sm);
   --rs-toggle-line-height-lg: 2.14285714;
+  --rs-toggle-gap-lg: 10px;
+  --rs-toggle-handle-gap-lg: 4px;
+  --rs-toggle-size-lg: 28px;
+  --rs-toggle-inner-margin-lg: 10px;
+  --rs-toggle-font-size-xl: var(--rs-font-size-lg);
+  --rs-toggle-inner-font-size-xl: var(--rs-font-size-md);
+  --rs-toggle-line-height-xl: 2.14285714;
+  --rs-toggle-gap-xl: 12px;
+  --rs-toggle-handle-gap-xl: 5px;
+  --rs-toggle-size-xl: 34px;
+  --rs-toggle-inner-margin-xl: 12px;
   position: relative;
   display: inline-flex;
   align-items: center;
   font-size: var(--rs-toggle-font-size);
+  gap: var(--rs-toggle-gap);
+}
+.rs-toggle-xs {
+  --rs-toggle-font-size: var(--rs-toggle-font-size-xs);
+  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-xs);
+  --rs-toggle-line-height: var(--rs-toggle-line-height-xs);
+  --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-xs);
+  --rs-toggle-handle-size: calc(var(--rs-toggle-size-xs) - var(--rs-toggle-handle-gap-xs) * 2);
+  --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-xs);
+  --rs-toggle-gap: var(--rs-toggle-gap-xs);
+  --rs-toggle-min-width: calc(var(--rs-toggle-size-xs) * 2 - var(--rs-toggle-handle-gap));
+  --rs-toggle-size: var(--rs-toggle-size-xs);
+  --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
+  --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
+}
+.rs-toggle-sm {
+  --rs-toggle-font-size: var(--rs-toggle-font-size-sm);
+  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-sm);
+  --rs-toggle-line-height: var(--rs-toggle-line-height-sm);
+  --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-sm);
+  --rs-toggle-handle-size: calc(var(--rs-toggle-size-sm) - var(--rs-toggle-handle-gap-sm) * 2);
+  --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-sm);
+  --rs-toggle-gap: var(--rs-toggle-gap-sm);
+  --rs-toggle-min-width: calc(var(--rs-toggle-size-sm) * 2 - var(--rs-toggle-handle-gap));
+  --rs-toggle-size: var(--rs-toggle-size-sm);
+  --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
+  --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
+}
+.rs-toggle-md {
+  --rs-toggle-font-size: var(--rs-toggle-font-size-md);
+  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-md);
+  --rs-toggle-line-height: var(--rs-toggle-line-height-md);
+  --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-md);
+  --rs-toggle-handle-size: calc(var(--rs-toggle-size-md) - var(--rs-toggle-handle-gap-md) * 2);
+  --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-md);
+  --rs-toggle-gap: var(--rs-toggle-gap-md);
+  --rs-toggle-min-width: calc(var(--rs-toggle-size-md) * 2 - var(--rs-toggle-handle-gap));
+  --rs-toggle-size: var(--rs-toggle-size-md);
+  --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
+  --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
+}
+.rs-toggle-lg {
+  --rs-toggle-font-size: var(--rs-toggle-font-size-lg);
+  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-lg);
+  --rs-toggle-line-height: var(--rs-toggle-line-height-lg);
+  --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-lg);
+  --rs-toggle-handle-size: calc(var(--rs-toggle-size-lg) - var(--rs-toggle-handle-gap-lg) * 2);
+  --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-lg);
+  --rs-toggle-gap: var(--rs-toggle-gap-lg);
+  --rs-toggle-min-width: calc(var(--rs-toggle-size-lg) * 2 - var(--rs-toggle-handle-gap));
+  --rs-toggle-size: var(--rs-toggle-size-lg);
+  --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
+  --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
+}
+.rs-toggle-xl {
+  --rs-toggle-font-size: var(--rs-toggle-font-size-xl);
+  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-xl);
+  --rs-toggle-line-height: var(--rs-toggle-line-height-xl);
+  --rs-toggle-inner-margin: var(--rs-toggle-inner-margin-xl);
+  --rs-toggle-handle-size: calc(var(--rs-toggle-size-xl) - var(--rs-toggle-handle-gap-xl) * 2);
+  --rs-toggle-handle-gap: var(--rs-toggle-handle-gap-xl);
+  --rs-toggle-gap: var(--rs-toggle-gap-xl);
+  --rs-toggle-min-width: calc(var(--rs-toggle-size-xl) * 2 - var(--rs-toggle-handle-gap));
+  --rs-toggle-size: var(--rs-toggle-size-xl);
+  --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
+  --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * 1.2 - var(--rs-toggle-handle-gap)) * -1);
+}
+.rs-toggle-red {
+  --rs-toggle-checked-bg: var(--rs-red-500);
+  --rs-toggle-checked-hover-bg: var(--rs-red-600);
+}
+.rs-toggle-orange {
+  --rs-toggle-checked-bg: var(--rs-orange-500);
+  --rs-toggle-checked-hover-bg: var(--rs-orange-600);
+}
+.rs-toggle-yellow {
+  --rs-toggle-checked-bg: var(--rs-yellow-500);
+  --rs-toggle-checked-hover-bg: var(--rs-yellow-600);
+}
+.rs-toggle-green {
+  --rs-toggle-checked-bg: var(--rs-green-500);
+  --rs-toggle-checked-hover-bg: var(--rs-green-600);
+}
+.rs-toggle-cyan {
+  --rs-toggle-checked-bg: var(--rs-cyan-500);
+  --rs-toggle-checked-hover-bg: var(--rs-cyan-600);
+}
+.rs-toggle-blue {
+  --rs-toggle-checked-bg: var(--rs-blue-500);
+  --rs-toggle-checked-hover-bg: var(--rs-blue-600);
+}
+.rs-toggle-violet {
+  --rs-toggle-checked-bg: var(--rs-violet-500);
+  --rs-toggle-checked-hover-bg: var(--rs-violet-600);
+}
+.rs-toggle:where([data-placement='start']) {
+  flex-direction: row-reverse;
 }
 .rs-toggle-label {
   cursor: pointer;
   font-size: inherit;
-  margin-inline-start: 10px;
 }
 .rs-toggle-inner {
   display: flex;
   align-items: center;
+  justify-content: center;
   transition: margin var(--rs-toggle-transition);
   font-size: var(--rs-toggle-inner-font-size);
   line-height: var(--rs-toggle-line-height);
@@ -207,7 +330,7 @@
   inset: 0;
   opacity: 0;
 }
-.rs-toggle-presentation {
+.rs-toggle-track {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -224,69 +347,69 @@
   min-width: var(--rs-toggle-min-width);
   border-radius: var(--rs-radius-full);
 }
-.rs-toggle-presentation::after {
+.rs-toggle-track::after {
   width: var(--rs-toggle-handle-size);
   height: var(--rs-toggle-handle-size);
   inset-inline-start: var(--rs-toggle-handle-gap);
   top: var(--rs-toggle-handle-gap);
   border-radius: var(--rs-radius-full);
 }
-.rs-toggle-presentation:active::after {
+.rs-toggle-track:active::after {
   width: calc(var(--rs-toggle-handle-size) * 1.2);
 }
-.rs-theme-high-contrast .rs-toggle-presentation {
+.rs-theme-high-contrast .rs-toggle-track {
   transition: none;
   box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
 }
-.rs-toggle-input:focus-visible + .rs-toggle-presentation {
+.rs-toggle-input:focus-visible + .rs-toggle-track {
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-presentation {
+.rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-track {
   outline-offset: 2px;
 }
-.rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-presentation {
+.rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-track {
   box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);
 }
-.rs-toggle-presentation:hover {
+.rs-toggle-track:hover {
   background-color: var(--rs-toggle-hover-bg);
 }
-.rs-toggle-presentation::after {
+.rs-toggle-track::after {
   content: '';
   cursor: pointer;
   position: absolute;
   background-color: currentColor;
   transition: left var(--rs-toggle-transition), margin-left var(--rs-toggle-transition), width var(--rs-toggle-transition);
 }
-.rs-toggle-disabled .rs-toggle-presentation {
+.rs-toggle-disabled .rs-toggle-track {
   background-color: var(--rs-toggle-disabled-bg);
   color: var(--rs-toggle-disabled-thumb);
   box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
   pointer-events: none;
 }
-.rs-toggle-checked .rs-toggle-presentation {
+.rs-toggle-checked .rs-toggle-track {
   background-color: var(--rs-toggle-checked-bg);
   color: var(--rs-toggle-checked-thumb);
   box-shadow: none;
 }
-.rs-toggle-checked .rs-toggle-presentation::after {
+.rs-toggle-checked .rs-toggle-track::after {
   inset-inline-start: 100%;
   margin-inline-start: var(--rs-toggle-checked-margin-left);
 }
-.rs-toggle-checked .rs-toggle-presentation:active::after {
+.rs-toggle-checked .rs-toggle-track:active::after {
   margin-inline-start: var(--rs-toggle-active-checked-margin-left);
 }
-.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
+.rs-toggle-checked .rs-toggle-track .rs-toggle-inner {
   margin-inline-end: var(--rs-toggle-size);
   margin-inline-start: var(--rs-toggle-inner-margin);
 }
-.rs-toggle-checked .rs-toggle-presentation:hover {
+.rs-toggle-checked .rs-toggle-track:hover {
   background-color: var(--rs-toggle-checked-hover-bg);
 }
-.rs-toggle-disabled.rs-toggle-checked .rs-toggle-presentation {
+.rs-toggle-disabled.rs-toggle-checked .rs-toggle-track {
   background-color: var(--rs-toggle-checked-disabled-bg);
   color: var(--rs-toggle-checked-disabled-thumb);
 }
-.rs-toggle-loading .rs-toggle-presentation::after {
+.rs-toggle-loading .rs-toggle-track::after {
   display: none;
 }
 .rs-toggle-loader {
@@ -319,67 +442,3 @@
 .rs-theme-high-contrast .rs-toggle-checked .rs-toggle-loader .rs-loader-spin::after {
   border-top-color: var(--rs-gray-500);
 }
-.rs-toggle-red {
-  --rs-toggle-checked-bg: var(--rs-red-500);
-  --rs-toggle-checked-hover-bg: var(--rs-red-600);
-}
-.rs-toggle-orange {
-  --rs-toggle-checked-bg: var(--rs-orange-500);
-  --rs-toggle-checked-hover-bg: var(--rs-orange-600);
-}
-.rs-toggle-yellow {
-  --rs-toggle-checked-bg: var(--rs-yellow-500);
-  --rs-toggle-checked-hover-bg: var(--rs-yellow-600);
-}
-.rs-toggle-green {
-  --rs-toggle-checked-bg: var(--rs-green-500);
-  --rs-toggle-checked-hover-bg: var(--rs-green-600);
-}
-.rs-toggle-cyan {
-  --rs-toggle-checked-bg: var(--rs-cyan-500);
-  --rs-toggle-checked-hover-bg: var(--rs-cyan-600);
-}
-.rs-toggle-blue {
-  --rs-toggle-checked-bg: var(--rs-blue-500);
-  --rs-toggle-checked-hover-bg: var(--rs-blue-600);
-}
-.rs-toggle-violet {
-  --rs-toggle-checked-bg: var(--rs-violet-500);
-  --rs-toggle-checked-hover-bg: var(--rs-violet-600);
-}
-.rs-toggle-sm {
-  --rs-toggle-font-size: var(--rs-toggle-font-size-sm);
-  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-sm);
-  --rs-toggle-line-height: var(--rs-toggle-line-height-sm);
-  --rs-toggle-inner-margin: 6px;
-  --rs-toggle-handle-size: 10px;
-  --rs-toggle-handle-gap: 2px;
-  --rs-toggle-min-width: 26px;
-  --rs-toggle-size: 14px;
-  --rs-toggle-checked-margin-left: -12px;
-  --rs-toggle-active-checked-margin-left: -14.8px;
-}
-.rs-toggle-md {
-  --rs-toggle-font-size: var(--rs-toggle-font-size-md);
-  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-md);
-  --rs-toggle-line-height: var(--rs-toggle-line-height-md);
-  --rs-toggle-inner-margin: 8px;
-  --rs-toggle-handle-size: 18px;
-  --rs-toggle-handle-gap: 3px;
-  --rs-toggle-min-width: 44px;
-  --rs-toggle-size: 24px;
-  --rs-toggle-checked-margin-left: -21px;
-  --rs-toggle-active-checked-margin-left: -25.8px;
-}
-.rs-toggle-lg {
-  --rs-toggle-font-size: var(--rs-toggle-font-size-lg);
-  --rs-toggle-inner-font-size: var(--rs-toggle-inner-font-size-lg);
-  --rs-toggle-line-height: var(--rs-toggle-line-height-lg);
-  --rs-toggle-inner-margin: 10px;
-  --rs-toggle-handle-size: 22px;
-  --rs-toggle-handle-gap: 4px;
-  --rs-toggle-min-width: 55px;
-  --rs-toggle-size: 30px;
-  --rs-toggle-checked-margin-left: -26px;
-  --rs-toggle-active-checked-margin-left: -32px;
-}

package/Toggle/styles/index.less

@@ -8,36 +8,100 @@
 .rs-toggle {
   // CSS Variables
   --rs-toggle-transition: 0.2s ease-in-out;
+  --rs-toggle-gap: 10px;
+
+  // Extra small size
+  --rs-toggle-font-size-xs: var(--rs-font-size-2xs);
+  --rs-toggle-inner-font-size-xs: var(--rs-font-size-3xs);
+  --rs-toggle-line-height-xs: 1;
+  --rs-toggle-gap-xs: 4px;
+  --rs-toggle-handle-gap-xs: 2px;
+  --rs-toggle-size-xs: 14px;
+  --rs-toggle-inner-margin-xs: 4px;
 
   // Small size
   --rs-toggle-font-size-sm: var(--rs-font-size-xs);
   --rs-toggle-inner-font-size-sm: var(--rs-font-size-2xs);
   --rs-toggle-line-height-sm: 1.4;
+  --rs-toggle-gap-sm: 6px;
+  --rs-toggle-handle-gap-sm: 2px;
+  --rs-toggle-size-sm: 18px;
+  --rs-toggle-inner-margin-sm: 6px;
 
   // Medium size
   --rs-toggle-font-size-md: var(--rs-font-size-sm);
   --rs-toggle-inner-font-size-md: var(--rs-font-size-xs);
   --rs-toggle-line-height-md: 2;
+  --rs-toggle-gap-md: 8px;
+  --rs-toggle-handle-gap-md: 3px;
+  --rs-toggle-size-md: 22px;
+  --rs-toggle-inner-margin-md: 8px;
 
   // Large size
   --rs-toggle-font-size-lg: var(--rs-font-size-md);
   --rs-toggle-inner-font-size-lg: var(--rs-font-size-sm);
   --rs-toggle-line-height-lg: 2.14285714;
+  --rs-toggle-gap-lg: 10px;
+  --rs-toggle-handle-gap-lg: 4px;
+  --rs-toggle-size-lg: 28px;
+  --rs-toggle-inner-margin-lg: 10px;
+
+  // Extra large size
+  --rs-toggle-font-size-xl: var(--rs-font-size-lg);
+  --rs-toggle-inner-font-size-xl: var(--rs-font-size-md);
+  --rs-toggle-line-height-xl: 2.14285714;
+  --rs-toggle-gap-xl: 12px;
+  --rs-toggle-handle-gap-xl: 5px;
+  --rs-toggle-size-xl: 34px;
+  --rs-toggle-inner-margin-xl: 12px;
+
+  // Size variants
+  @sizes: xs, sm, md, lg, xl;
+
+  each(@sizes, .(@size) {
+    &-@{size} {
+
+      --rs-toggle-font-size: var(~'--rs-toggle-font-size-@{size}');
+      --rs-toggle-inner-font-size: var(~'--rs-toggle-inner-font-size-@{size}');
+      --rs-toggle-line-height: var(~'--rs-toggle-line-height-@{size}');
+      --rs-toggle-inner-margin: var(~'--rs-toggle-inner-margin-@{size}');
+      --rs-toggle-handle-size: calc(var(~'--rs-toggle-size-@{size}') - var(~'--rs-toggle-handle-gap-@{size}') * 2);
+      --rs-toggle-handle-gap: var(~'--rs-toggle-handle-gap-@{size}');
+      --rs-toggle-gap: var(~'--rs-toggle-gap-@{size}');
+      --rs-toggle-min-width: calc(var(~'--rs-toggle-size-@{size}') * 2 - var(--rs-toggle-handle-gap));
+      --rs-toggle-size: var(~'--rs-toggle-size-@{size}');
+      --rs-toggle-checked-margin-left: calc((var(--rs-toggle-size) - var(--rs-toggle-handle-gap)) * -1);
+      --rs-toggle-active-checked-margin-left: calc((var(--rs-toggle-size) * @toggle-active-scale - var(--rs-toggle-handle-gap)) * -1);
+    }
+  });
+
+  // Colorful
+  each(@spectrum, .(@color) {
+    &-@{color} {
+      --rs-toggle-checked-bg: var(~'--rs-@{color}-500');
+      --rs-toggle-checked-hover-bg: var(~'--rs-@{color}-600');
+    }
+  });
 
   position: relative;
   display: inline-flex;
   align-items: center;
   font-size: var(--rs-toggle-font-size);
+  gap: var(--rs-toggle-gap);
+
+  &:where([data-placement='start']) {
+    flex-direction: row-reverse;
+  }
 
   &-label {
     cursor: pointer;
     font-size: inherit;
-    margin-inline-start: 10px;
   }
 
   &-inner {
     display: flex;
     align-items: center;
+    justify-content: center;
     transition: margin var(--rs-toggle-transition);
     font-size: var(--rs-toggle-inner-font-size);
     line-height: var(--rs-toggle-line-height);
@@ -57,7 +121,7 @@
     opacity: 0;
   }
 
-  &-presentation {
+  &-track {
     position: relative;
     display: inline-block;
     box-sizing: border-box;
@@ -212,40 +276,4 @@
       }
     }
   }
-
-  // Colorful
-  each(@spectrum, .(@color) {
-    &-@{color} {
-      --rs-toggle-checked-bg: var(~'--rs-@{color}-500');
-      --rs-toggle-checked-hover-bg: var(~'--rs-@{color}-600');
-    }
-  });
-
-  // Size variants
-  @sizes: sm, md, lg;
-
-  each(@sizes, .(@size) {
-    &-@{size} {
-
-      @height: ~'toggle-@{size}-height';
-      @min-width: ~'toggle-@{size}-min-width';
-      @handle-gap: ~'toggle-@{size}-handle-gap';
-      @inner-margin: ~'toggle-@{size}-inner-margin';
-      @handle-diameter: (@@height - @@handle-gap * 2);
-      @margin-left: (0 - (@@height - @@handle-gap));
-      @active-margin-left: (0 - (@@height * @toggle-active-scale - @@handle-gap));
-
-      --rs-toggle-font-size: var(~'--rs-toggle-font-size-@{size}');
-      --rs-toggle-inner-font-size: var(~'--rs-toggle-inner-font-size-@{size}');
-      --rs-toggle-line-height: var(~'--rs-toggle-line-height-@{size}');
-      --rs-toggle-inner-margin: @@inner-margin;
-      --rs-toggle-handle-size: @handle-diameter;
-      --rs-toggle-handle-gap: @@handle-gap;
-      --rs-toggle-min-width: @@min-width;
-      --rs-toggle-size: @@height;
-
-      --rs-toggle-checked-margin-left: @margin-left;
-      --rs-toggle-active-checked-margin-left: @active-margin-left;
-    }
-  });
 }