@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/switch/_layout.scss

@@ -1,50 +1,11 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/switch/_layout.scss" as *;
 
 @mixin kendo-switch--layout() {
+    @include kendo-switch--layout-base();
 
-    .k-switch {
-        box-sizing: border-box;
-        width: var( --kendo-switch-width, auto );
-        height: var( --kendo-switch-height, auto );
-        font-family: var( --kendo-switch-font-family, #{$kendo-switch-font-family} );
-        font-size: var( --kendo-switch-font-size, 1rem );
-        outline: 0;
-        display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
-        line-height: 1;
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        &.k-switch-on .k-switch-thumb-wrap {
-            inset-inline-start: calc( 100% - ( var( --kendo-switch-thumb-width, auto ) / 2 ) - var( --kendo-switch-thumb-offset, 0 ) );
-        }
-        &.k-switch-off .k-switch-thumb-wrap {
-            inset-inline-start: calc( ( var( --kendo-switch-thumb-width, auto ) / 2 ) + var( --kendo-switch-thumb-offset, 0 ) );
-        }
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        [type="checkbox"] {
-            display: none;
-        }
-
-        &[aria-readonly="true"] {
-            pointer-events: none;
-        }
-    }
-
-
-    // Focus
     .k-switch:focus,
     .k-switch.k-focus {
         &::after {
@@ -55,111 +16,14 @@
         }
     }
 
-
-    // Readonly
-    .k-switch.k-readonly {
-        pointer-events: none;
-    }
-
-
-    // Switch track
     .k-switch-track {
-        width: var( --kendo-switch-width, auto );
-        height: var( --kendo-switch-height, auto );
-        border-width: var( --kendo-switch-track-border-width, #{$kendo-switch-track-border-width} );
-        border-style: if( $kendo-switch-track-border-width == null, null, solid );
-        outline: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 1 0 auto;
-        position: relative;
         transition: all 100ms ease-in-out;
     }
 
-
-    // Switch thumb
     .k-switch-thumb-wrap {
-        width: 0;
-        height: 0;
-        overflow: visible;
-        position: absolute;
         transition: inset-inline-start 100ms ease-in-out;
-        top: 50%;
     }
     .k-switch-thumb {
-        width: var( --kendo-switch-thumb-width, auto );
-        height: var( --kendo-switch-thumb-height, auto );
-        border-width: var( --kendo-switch-thumb-border-width, #{$kendo-switch-thumb-border-width} );
-        border-style: if( $kendo-switch-thumb-border-width == null, null, solid );
-        display: block;
-        position: absolute;
-        transform: translate( -50%, -50% );
         transition: all 100ms ease-in-out;
     }
-
-
-    // Switch label
-    .k-switch-label-on,
-    .k-switch-label-off {
-        text-transform: var( --kendo-switch-label-text-transform, #{$kendo-switch-label-text-transform} );
-        display: var( --kendo-switch-label-display, #{$kendo-switch-label-display} );
-        position: absolute;
-        top: 50%;
-        transform: translateY( -50% );
-        overflow: hidden;
-    }
-    .k-switch-label-on {
-        inset-inline-start: var( --kendo-switch-label-offset, 0 );
-    }
-    .k-switch-label-off {
-        inset-inline-end: var( --kendo-switch-label-offset, 0 );
-    }
-
-
-    // Switch sizes
-    @each $size, $size-props in $kendo-switch-sizes {
-
-        $_font-size: map.get( $size-props, font-size );
-        $_track-width: map.get( $size-props, track-width );
-        $_track-height: map.get( $size-props, track-height );
-        $_thumb-width: map.get( $size-props, thumb-width );
-        $_thumb-height: map.get( $size-props, thumb-height );
-        $_thumb-offset: map.get( $size-props, thumb-offset );
-        $_label-offset: map.get( $size-props, label-offset );
-
-        .k-switch-#{$size} {
-            --kendo-switch-width: var( --kendo-switch-#{$size}-width, #{$_track-width} );
-            --kendo-switch-height: var( --kendo-switch-#{$size}-height, #{$_track-height} );
-            --kendo-switch-font-size: var( --kendo-switch-#{$size}-font-size, #{$_font-size} );
-
-            .k-switch-label-on,
-            .k-switch-label-off {
-                --kendo-switch-label-offset: var( --kendo-switch-#{$size}-label-offset, #{$_label-offset} );
-            }
-
-            .k-switch-thumb,
-            .k-switch-thumb-wrap {
-                --kendo-switch-thumb-width: var( --kendo-switch-#{$size}-thumb-width, #{$_thumb-width} );
-                --kendo-switch-thumb-height: var( --kendo-switch-#{$size}-thumb-height, #{$_thumb-height} );
-            }
-            .k-switch-thumb-wrap {
-                --kendo-switch-thumb-offset: var( --kendo-switch-#{$size}-thumb-offset, #{$_thumb-offset} );
-            }
-        }
-
-    }
-
-
-    // RTL
-    .k-switch[dir="rtl"],
-    [dir="rtl"] .k-switch,
-    .k-switch.k-rtl,
-    .k-rtl .k-switch {
-
-        .k-switch-thumb {
-            transform: translate( 50%, -50% );
-        }
-
-    }
-
 }

package/scss/switch/_theme.scss

@@ -1,9 +1,10 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/switch/_theme.scss" as *;
 
 @mixin kendo-switch--theme() {
+    @include kendo-switch--theme-base();
 
-    // Switch
     .k-switch {
         &:focus,
         &.k-focus {
@@ -17,139 +18,4 @@
             background-color: transparent;
         }
     }
-
-
-    // Switch OFF
-    .k-switch-off {
-
-        // Normal state
-        .k-switch-track {
-            @include fill(
-                var( --kendo-switch-off-track-text, #{$kendo-switch-off-track-text} ),
-                var( --kendo-switch-off-track-bg, #{$kendo-switch-off-track-bg} ),
-                var( --kendo-switch-off-track-border, #{$kendo-switch-off-track-border} )
-            );
-        }
-        .k-switch-thumb {
-            @include fill(
-                var( --kendo-switch-off-thumb-text, #{$kendo-switch-off-thumb-text} ),
-                var( --kendo-switch-off-thumb-bg, #{$kendo-switch-off-thumb-bg} ),
-                var( --kendo-switch-off-thumb-border, #{$kendo-switch-off-thumb-border} )
-            );
-        }
-
-        // Hover
-        &:hover,
-        &.k-hover {
-            .k-switch-track {
-                --kendo-switch-off-track-text: var( --kendo-switch-off-track-hover-text, #{$kendo-switch-off-track-hover-text} );
-                --kendo-switch-off-track-bg: var( --kendo-switch-off-track-hover-bg, #{$kendo-switch-off-track-hover-bg} );
-                --kendo-switch-off-track-border: var( --kendo-switch-off-track-hover-border, #{$kendo-switch-off-track-hover-border} );
-            }
-
-            .k-switch-thumb {
-                --kendo-switch-off-thumb-text: var( --kendo-switch-off-thumb-hover-text, #{$kendo-switch-off-thumb-hover-text} );
-                --kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-hover-bg, #{$kendo-switch-off-thumb-hover-bg} );
-                --kendo-switch-off-thumb-border: var( --kendo-switch-off-thumb-hover-border, #{$kendo-switch-off-thumb-hover-border} );
-            }
-        }
-
-        // Focus
-        &:focus,
-        &.k-focus {
-            .k-switch-track {
-                --kendo-switch-off-track-text: var( --kendo-switch-off-track-focus-text, #{$kendo-switch-off-track-focus-text} );
-                --kendo-switch-off-track-bg: var( --kendo-switch-off-track-focus-bg, #{$kendo-switch-off-track-focus-bg} );
-                --kendo-switch-off-track-border: var( --kendo-switch-off-track-focus-border, #{$kendo-switch-off-track-focus-border} );
-            }
-        }
-
-        // Disabled
-        &:disabled,
-        &.k-disabled {
-            .k-switch-track {
-                --kendo-switch-off-track-text: var( --kendo-switch-off-track-disabled-text, #{$kendo-switch-off-track-disabled-text} );
-                --kendo-switch-off-track-bg: var( --kendo-switch-off-track-disabled-bg, #{$kendo-switch-off-track-disabled-bg} );
-                --kendo-switch-off-track-border: var( --kendo-switch-off-track-disabled-border, #{$kendo-switch-off-track-disabled-border} );
-            }
-
-            .k-switch-thumb {
-                --kendo-switch-off-thumb-text: var( --kendo-switch-off-thumb-disabled-text, #{$kendo-switch-off-thumb-disabled-text} );
-                --kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-disabled-bg, #{$kendo-switch-off-thumb-disabled-bg} );
-                --kendo-switch-off-thumb-border: var( --kendo-switch-off-thumb-disabled-border, #{$kendo-switch-off-thumb-disabled-border} );
-            }
-        }
-
-        .k-switch-label-on {
-            color: transparent;
-        }
-    }
-
-
-    // Switch ON
-    .k-switch-on {
-
-        // Normal state
-        .k-switch-track {
-            @include fill(
-                var( --kendo-switch-on-track-text, #{$kendo-switch-on-track-text} ),
-                var( --kendo-switch-on-track-bg, #{$kendo-switch-on-track-bg} ),
-                var( --kendo-switch-on-track-border, #{$kendo-switch-on-track-border} )
-            );
-        }
-        .k-switch-thumb {
-            @include fill(
-                var( --kendo-switch-on-thumb-text, #{$kendo-switch-on-thumb-text} ),
-                var( --kendo-switch-on-thumb-bg, #{$kendo-switch-on-thumb-bg} ),
-                var( --kendo-switch-on-thumb-border, #{$kendo-switch-on-thumb-border} )
-            );
-        }
-
-        // Hover
-        &:hover,
-        &.k-hover {
-            .k-switch-track {
-                --kendo-switch-on-track-text: var( --kendo-switch-on-track-hover-text, #{$kendo-switch-on-track-hover-text} );
-                --kendo-switch-on-track-bg: var( --kendo-switch-on-track-hover-bg, #{$kendo-switch-on-track-hover-bg} );
-                --kendo-switch-on-track-border: var( --kendo-switch-on-track-hover-border, #{$kendo-switch-on-track-hover-border} );
-            }
-
-            .k-switch-thumb {
-                --kendo-switch-on-thumb-text: var( --kendo-switch-on-thumb-hover-text, #{$kendo-switch-on-thumb-hover-text} );
-                --kendo-switch-on-thumb-bg: var( --kendo-switch-on-thumb-hover-bg, #{$kendo-switch-on-thumb-hover-bg} );
-                --kendo-switch-on-thumb-border: var( --kendo-switch-on-thumb-hover-border, #{$kendo-switch-on-thumb-hover-border} );
-            }
-        }
-
-        // Focus
-        &:focus,
-        &.k-focus {
-            .k-switch-track {
-                --kendo-switch-on-track-text: var( --kendo-switch-on-track-focus-text, #{$kendo-switch-on-track-focus-text} );
-                --kendo-switch-on-track-bg: var( --kendo-switch-on-track-focus-bg, #{$kendo-switch-on-track-focus-bg} );
-                --kendo-switch-on-track-border: var( --kendo-switch-on-track-focus-border, #{$kendo-switch-on-track-focus-border} );
-            }
-        }
-
-        // Disabled
-        &:disabled,
-        &.k-disabled {
-            .k-switch-track {
-                --kendo-switch-on-track-text: var( --kendo-switch-on-track-disabled-text, #{$kendo-switch-on-track-disabled-text} );
-                --kendo-switch-on-track-bg: var( --kendo-switch-on-track-disabled-bg, #{$kendo-switch-on-track-disabled-bg} );
-                --kendo-switch-on-track-border: var( --kendo-switch-on-track-disabled-border, #{$kendo-switch-on-track-disabled-border} );
-            }
-
-            .k-switch-thumb {
-                --kendo-switch-on-thumb-text: var( --kendo-switch-on-thumb-disabled-text, #{$kendo-switch-on-thumb-disabled-text} );
-                --kendo-switch-on-thumb-bg: var( --kendo-switch-on-thumb-disabled-bg, #{$kendo-switch-on-thumb-disabled-bg} );
-                --kendo-switch-on-thumb-border: var( --kendo-switch-on-thumb-disabled-border, #{$kendo-switch-on-thumb-disabled-border} );
-            }
-        }
-
-        .k-switch-label-off {
-            color: transparent;
-        }
-    }
-
 }

package/scss/switch/_variables.scss

@@ -2,23 +2,23 @@
 
 /// The font family of the Switch.
 /// @group switch
-$kendo-switch-font-family: var( --kendo-font-family, normal ) !default;
+$kendo-switch-font-family: var( --kendo-switch-font-family, var( --kendo-font-family, normal ) ) !default;
 
 /// The border width of the Switch track.
 /// @group switch
-$kendo-switch-track-border-width: 1px !default;
+$kendo-switch-track-border-width: var( --kendo-switch-track-border-width, 1px ) !default;
 
 /// The border width of the Switch thumb.
 /// @group switch
-$kendo-switch-thumb-border-width: 0 !default;
+$kendo-switch-thumb-border-width: var( --kendo-switch-thumb-border-width, 0 ) !default;
 
 /// The text transform of the Switch label.
 /// @group switch
-$kendo-switch-label-text-transform: uppercase !default;
+$kendo-switch-label-text-transform: var( --kendo-switch-label-text-transform, uppercase ) !default;
 
 /// The display of the Switch label.
 /// @group switch
-$kendo-switch-label-display: none !default;
+$kendo-switch-label-display: var( --kendo-switch-label-display, none ) !default;
 
 /// The map with the different Switch sizes.
 /// @group switch
@@ -30,145 +30,195 @@ $kendo-switch-sizes: (
 
 /// The ring around the focused Switch.
 /// @group switch
-$kendo-switch-focus-ring: 1px solid k-color(base-emphasis) !default;
+$kendo-switch-focus-ring: var( --kendo-switch-focus-ring, 1px solid k-color(base-emphasis) ) !default;
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: k-color(surface-alt) !default;
+$kendo-switch-off-track-bg: var( --kendo-switch-off-track-bg, k-color(surface-alt) ) !default;
 /// The text color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-text: k-color(on-app-surface) !default;
+$kendo-switch-off-track-text: var( --kendo-switch-off-track-text, k-color(on-app-surface) ) !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: k-color(border) !default;
+$kendo-switch-off-track-border: var( --kendo-switch-off-track-border, k-color(border) ) !default;
 
 /// The background of the track when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-hover-bg: k-color(surface-alt) !default;
+$kendo-switch-off-track-hover-bg: var( --kendo-switch-off-track-hover-bg, k-color(surface-alt) ) !default;
 /// The text color of the track when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-hover-text: k-color(on-app-surface) !default;
+$kendo-switch-off-track-hover-text: var( --kendo-switch-off-track-hover-text, k-color(on-app-surface) ) !default;
 /// The border color of the track when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-hover-border: k-color(border-alt) !default;
+$kendo-switch-off-track-hover-border: var( --kendo-switch-off-track-hover-border, k-color(border-alt) ) !default;
 
 /// The background of the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-bg: k-color(surface-alt) !default;
+$kendo-switch-off-track-focus-bg: var( --kendo-switch-off-track-focus-bg, k-color(surface-alt) ) !default;
 /// The text color of the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-text: k-color(on-app-surface) !default;
+$kendo-switch-off-track-focus-text: var( --kendo-switch-off-track-focus-text, k-color(on-app-surface) ) !default;
 /// The border color of the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-border: k-color(border) !default;
+$kendo-switch-off-track-focus-border: var( --kendo-switch-off-track-focus-border, k-color(border) ) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-bg: k-color(surface-alt) !default;
+$kendo-switch-off-track-disabled-bg: var( --kendo-switch-off-track-disabled-bg, k-color(surface-alt) ) !default;
 /// The text color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-text: k-color(on-app-surface) !default;
+$kendo-switch-off-track-disabled-text: var( --kendo-switch-off-track-disabled-text, k-color(on-app-surface) ) !default;
 /// The border color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-switch-off-track-disabled-border: var( --kendo-switch-off-track-disabled-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: k-color(subtle) !default;
+$kendo-switch-off-thumb-bg: var( --kendo-switch-off-thumb-bg, k-color(subtle) ) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-text: inherit !default;
+$kendo-switch-off-thumb-text: var( --kendo-switch-off-thumb-text, inherit ) !default;
 /// The border color of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-border: k-color(border) !default;
+$kendo-switch-off-thumb-border: var( --kendo-switch-off-thumb-border, k-color(border) ) !default;
 
 /// The background of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-bg: k-color(on-app-surface) !default;
+$kendo-switch-off-thumb-hover-bg: var( --kendo-switch-off-thumb-hover-bg, k-color(on-app-surface) ) !default;
 /// The text color of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-text: inherit !default;
+$kendo-switch-off-thumb-hover-text: var( --kendo-switch-off-thumb-hover-text, inherit ) !default;
 /// The border color of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-border: k-color(border-alt) !default;
+$kendo-switch-off-thumb-hover-border: var( --kendo-switch-off-thumb-hover-border, k-color(border-alt) ) !default;
 
 /// The background of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-switch-off-thumb-disabled-bg: var( --kendo-switch-off-thumb-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
 /// The text color of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-text: inherit !default;
+$kendo-switch-off-thumb-disabled-text: var( --kendo-switch-off-thumb-disabled-text, inherit ) !default;
 /// The border color of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
-
+$kendo-switch-off-thumb-disabled-border: var( --kendo-switch-off-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: k-color(primary) !default;
+$kendo-switch-on-track-bg: var( --kendo-switch-on-track-bg, k-color(primary) ) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: k-color(app-surface) !default;
+$kendo-switch-on-track-text: var( --kendo-switch-on-track-text, k-color(app-surface) ) !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
+$kendo-switch-on-track-border: var( --kendo-switch-on-track-border, $kendo-switch-on-track-bg ) !default;
 
 /// The background of the track when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-track-hover-bg: k-color(primary-hover) !default;
+$kendo-switch-on-track-hover-bg: var( --kendo-switch-on-track-hover-bg, k-color(primary-hover) ) !default;
 /// The text color of the track when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-track-hover-text: k-color(app-surface) !default;
+$kendo-switch-on-track-hover-text: var( --kendo-switch-on-track-hover-text, k-color(app-surface) ) !default;
 /// The border color of the track when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-track-hover-border: $kendo-switch-on-track-hover-bg !default;
+$kendo-switch-on-track-hover-border: var( --kendo-switch-on-track-hover-border, $kendo-switch-on-track-hover-bg ) !default;
 
 /// The background of the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-bg: k-color(primary) !default;
+$kendo-switch-on-track-focus-bg: var( --kendo-switch-on-track-focus-bg, k-color(primary) ) !default;
 /// The text color of the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-text: k-color(app-surface) !default;
+$kendo-switch-on-track-focus-text: var( --kendo-switch-on-track-focus-text, k-color(app-surface) ) !default;
 /// The border color of the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-bg !default;
+$kendo-switch-on-track-focus-border: var( --kendo-switch-on-track-focus-border, $kendo-switch-on-track-focus-bg ) !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-switch-on-track-disabled-bg: var( --kendo-switch-on-track-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-text: k-color(app-surface) !default;
+$kendo-switch-on-track-disabled-text: var( --kendo-switch-on-track-disabled-text, k-color(app-surface) ) !default;
 /// The border color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-border: transparent !default;
+$kendo-switch-on-track-disabled-border: var( --kendo-switch-on-track-disabled-border, transparent ) !default;
 
 /// The background of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-bg: k-color(app-surface) !default;
+$kendo-switch-on-thumb-bg: var( --kendo-switch-on-thumb-bg, k-color(app-surface) ) !default;
 /// The text color of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-text: inherit !default;
+$kendo-switch-on-thumb-text: var( --kendo-switch-on-thumb-text, inherit ) !default;
 /// The border color of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-border: inherit !default;
+$kendo-switch-on-thumb-border: var( --kendo-switch-on-thumb-border, inherit ) !default;
 
 /// The background of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-bg: k-color(app-surface) !default;
+$kendo-switch-on-thumb-hover-bg: var( --kendo-switch-on-thumb-hover-bg, k-color(app-surface) ) !default;
 /// The text color of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-text: inherit !default;
+$kendo-switch-on-thumb-hover-text: var( --kendo-switch-on-thumb-hover-text, inherit ) !default;
 /// The border color of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-border: inherit !default;
+$kendo-switch-on-thumb-hover-border: var( --kendo-switch-on-thumb-hover-border, inherit ) !default;
 
 /// The background of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-bg: k-color(surface) !default;
+$kendo-switch-on-thumb-disabled-bg: var( --kendo-switch-on-thumb-disabled-bg, k-color(surface) ) !default;
 /// The text color of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-text: inherit !default;
+$kendo-switch-on-thumb-disabled-text: var( --kendo-switch-on-thumb-disabled-text, inherit ) !default;
 /// The border color of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-border: color-mix(in srgb, k-color(on-app-surface) 6%, transparent) !default;
+$kendo-switch-on-thumb-disabled-border: var( --kendo-switch-on-thumb-disabled-border, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with (
+    $kendo-switch-font-family: $kendo-switch-font-family,
+    $kendo-switch-track-border-width: $kendo-switch-track-border-width,
+    $kendo-switch-thumb-border-width: $kendo-switch-thumb-border-width,
+    $kendo-switch-label-text-transform: $kendo-switch-label-text-transform,
+    $kendo-switch-label-display: $kendo-switch-label-display,
+    $kendo-switch-sizes: $kendo-switch-sizes,
+    $kendo-switch-off-track-bg: $kendo-switch-off-track-bg,
+    $kendo-switch-off-track-text: $kendo-switch-off-track-text,
+    $kendo-switch-off-track-border: $kendo-switch-off-track-border,
+    $kendo-switch-off-track-hover-bg: $kendo-switch-off-track-hover-bg,
+    $kendo-switch-off-track-hover-text: $kendo-switch-off-track-hover-text,
+    $kendo-switch-off-track-hover-border: $kendo-switch-off-track-hover-border,
+    $kendo-switch-off-track-focus-bg: $kendo-switch-off-track-focus-bg,
+    $kendo-switch-off-track-focus-text: $kendo-switch-off-track-focus-text,
+    $kendo-switch-off-track-focus-border: $kendo-switch-off-track-focus-border,
+    $kendo-switch-off-track-disabled-bg: $kendo-switch-off-track-disabled-bg,
+    $kendo-switch-off-track-disabled-text: $kendo-switch-off-track-disabled-text,
+    $kendo-switch-off-track-disabled-border: $kendo-switch-off-track-disabled-border,
+    $kendo-switch-off-thumb-bg: $kendo-switch-off-thumb-bg,
+    $kendo-switch-off-thumb-text: $kendo-switch-off-thumb-text,
+    $kendo-switch-off-thumb-border: $kendo-switch-off-thumb-border,
+    $kendo-switch-off-thumb-hover-bg: $kendo-switch-off-thumb-hover-bg,
+    $kendo-switch-off-thumb-hover-text: $kendo-switch-off-thumb-hover-text,
+    $kendo-switch-off-thumb-hover-border: $kendo-switch-off-thumb-hover-border,
+    $kendo-switch-off-thumb-disabled-bg: $kendo-switch-off-thumb-disabled-bg,
+    $kendo-switch-off-thumb-disabled-text: $kendo-switch-off-thumb-disabled-text,
+    $kendo-switch-off-thumb-disabled-border: $kendo-switch-off-thumb-disabled-border,
+    $kendo-switch-on-track-bg: $kendo-switch-on-track-bg,
+    $kendo-switch-on-track-text: $kendo-switch-on-track-text,
+    $kendo-switch-on-track-border: $kendo-switch-on-track-border,
+    $kendo-switch-on-track-hover-bg: $kendo-switch-on-track-hover-bg,
+    $kendo-switch-on-track-hover-text: $kendo-switch-on-track-hover-text,
+    $kendo-switch-on-track-hover-border: $kendo-switch-on-track-hover-border,
+    $kendo-switch-on-track-focus-bg: $kendo-switch-on-track-focus-bg,
+    $kendo-switch-on-track-focus-text: $kendo-switch-on-track-focus-text,
+    $kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-border,
+    $kendo-switch-on-track-disabled-bg: $kendo-switch-on-track-disabled-bg,
+    $kendo-switch-on-track-disabled-text: $kendo-switch-on-track-disabled-text,
+    $kendo-switch-on-track-disabled-border: $kendo-switch-on-track-disabled-border,
+    $kendo-switch-on-thumb-bg: $kendo-switch-on-thumb-bg,
+    $kendo-switch-on-thumb-text: $kendo-switch-on-thumb-text,
+    $kendo-switch-on-thumb-border: $kendo-switch-on-thumb-border,
+    $kendo-switch-on-thumb-hover-bg: $kendo-switch-on-thumb-hover-bg,
+    $kendo-switch-on-thumb-hover-text: $kendo-switch-on-thumb-hover-text,
+    $kendo-switch-on-thumb-hover-border: $kendo-switch-on-thumb-hover-border,
+    $kendo-switch-on-thumb-disabled-bg: $kendo-switch-on-thumb-disabled-bg,
+    $kendo-switch-on-thumb-disabled-text: $kendo-switch-on-thumb-disabled-text,
+    $kendo-switch-on-thumb-disabled-border: $kendo-switch-on-thumb-disabled-border,
+);