@progress/kendo-theme-fluent 5.7.0

package/scss/stepper/_theme.scss

@@ -0,0 +1,189 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-stepper--theme() {
+
+    // Base
+    .k-stepper {
+        @include fill(
+            var( --kendo-stepper-text, #{$kendo-stepper-text} ),
+            var( --kendo-stepper-bg, #{$kendo-stepper-bg} ),
+            var( --kendo-stepper-border, #{$kendo-stepper-border} )
+        );
+
+
+        // Not done steps
+        .k-step {
+            // Hover
+            &:hover,
+            &.k-hover {
+                .k-step-label {
+                    color: var( --kendo-stepper-label-hover-text, #{$kendo-stepper-label-hover-text} );
+                }
+
+                .k-step-indicator {
+                    @include fill(
+                        var( --kendo-stepper-indicator-hover-text, #{$kendo-stepper-indicator-hover-text} ),
+                        var( --kendo-stepper-indicator-hover-bg, #{$kendo-stepper-indicator-hover-bg} ),
+                        var( --kendo-stepper-indicator-hover-border, #{$kendo-stepper-indicator-hover-border} )
+                    );
+                }
+            }
+
+            &.k-step-focus,
+            &.k-focus,
+            .k-step-link:focus  {
+                // Labels only
+                .k-step-label:only-child {
+                    @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) var( --kendo-component-border, initial ) );
+                }
+            }
+
+            // Disabled
+            &:disabled,
+            &.k-disabled {
+                .k-step-indicator {
+                    @include fill(
+                        var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
+                        var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} ),
+                        var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
+                    );
+                }
+
+                .k-step-label {
+                    @include fill( $color: var( --kendo-stepper-label-disabled-text, #{$kendo-stepper-label-disabled-text} ) );
+                }
+            }
+        }
+        .k-step-indicator {
+            @include fill(
+                var( --kendo-stepper-indicator-text, #{$kendo-stepper-indicator-text} ),
+                var( --kendo-stepper-indicator-bg, #{$kendo-stepper-indicator-bg} ),
+                var( --kendo-stepper-indicator-border, #{$kendo-stepper-indicator-border} )
+            );
+        }
+        .k-step-indicator::after {
+            @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) var( --kendo-component-bg, initial ) );
+        }
+        .k-step-label:only-child {
+            @include fill(
+                var( --kendo-component-text, initial ),
+                var( --kendo-component-bg, transparent ),
+                var( --kendo-component-border, initial )
+            );
+        }
+
+
+        // Done steps
+        .k-step-done {
+
+            .k-step-indicator {
+                @include fill(
+                    var( --kendo-stepper-indicator-done-text, #{$kendo-stepper-indicator-done-text} ),
+                    var( --kendo-stepper-indicator-done-bg, #{$kendo-stepper-indicator-done-bg} ),
+                    var( --kendo-stepper-indicator-done-border, #{$kendo-stepper-indicator-done-border} )
+                );
+            }
+
+
+            // Hover
+            &:hover,
+            &.k-hover,
+            &.k-step-hover {
+                .k-step-indicator {
+                    @include fill(
+                        var( --kendo-stepper-indicator-done-hover-text, #{$kendo-stepper-indicator-done-hover-text} ),
+                        var( --kendo-stepper-indicator-done-hover-bg, #{$kendo-stepper-indicator-done-hover-bg} ),
+                        var( --kendo-stepper-indicator-done-hover-border, #{$kendo-stepper-indicator-done-hover-border} )
+                    );
+                }
+            }
+
+
+            // Disabled
+            &.k-step-disabled,
+            &.k-disabled,
+            &:disabled {
+                .k-step-indicator {
+                    @include fill(
+                        var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
+                        var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} ),
+                        var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
+                    );
+                }
+            }
+        }
+
+
+        // Current
+        .k-step-current {
+
+            .k-step-indicator {
+                @include fill(
+                    var( --kendo-stepper-indicator-current-text, #{$kendo-stepper-indicator-current-text} ),
+                    var( --kendo-stepper-indicator-current-bg, #{$kendo-stepper-indicator-current-bg} ),
+                    var( --kendo-stepper-indicator-current-border, #{$kendo-stepper-indicator-current-border} )
+                );
+            }
+
+
+            // Hover
+            &:hover,
+            &.k-hover,
+            &.k-step-hover {
+                .k-step-indicator {
+                    @include fill(
+                        var( --kendo-stepper-indicator-current-hover-text, #{$kendo-stepper-indicator-current-hover-text} ),
+                        var( --kendo-stepper-indicator-current-hover-bg, #{$kendo-stepper-indicator-current-hover-bg} ),
+                        var( --kendo-stepper-indicator-current-hover-border, #{$kendo-stepper-indicator-current-hover-border} )
+                    );
+                }
+            }
+
+
+            // Disabled
+            &.k-step-disabled,
+            &.k-disabled,
+            &:disabled {
+                .k-step-indicator {
+                    @include fill(
+                        var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
+                        var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} ),
+                        var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
+                    );
+                }
+            }
+        }
+
+        // Label
+        .k-step-label {
+            @include fill( $color: var( --kendo-stepper-label-text, #{$kendo-stepper-label-text} ) );
+        }
+        .k-step-success .k-step-label .k-icon {
+            @include fill( $color: var( --kendo-stepper-label-success-text, #{$kendo-stepper-label-success-text} ) );
+        }
+        .k-step-error .k-step-label {
+            @include fill( $color: var( --kendo-stepper-label-error-text, #{$kendo-stepper-label-error-text} ) );
+        }
+
+        .k-step-error {
+            .k-step-label {
+                @include fill( $color: var( --kendo-stepper-label-error-text, #{$kendo-stepper-label-error-text} ) );
+            }
+
+            &:hover,
+            &.k-hover,
+            &.k-step-hover {
+                .k-step-label {
+                    @include fill( $color: var( --kendo-stepper-label-error-text, #{$kendo-stepper-label-error-text} ) );
+                }
+            }
+        }
+
+        // Optional Label
+        .k-step-label-optional {
+            color: var( --kendo-stepper-optional-label-text, #{$kendo-stepper-optional-label-text} );
+        }
+    }
+
+}

package/scss/stepper/_variables.scss

@@ -0,0 +1,200 @@
+@use "../core/_variables" as *;
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+
+/// Width of the border around the stepper.
+/// @group stepper
+$kendo-stepper-border-width: 0px !default;
+// Font size of the stepper.
+/// @group stepper
+$kendo-stepper-font-size: var( --kendo-font-size, inherit ) !default;
+// Font family of the stepper.
+/// @group stepper
+$kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default;
+// Line height of the stepper.
+/// @group stepper
+$kendo-stepper-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the stepper.
+/// @group stepper
+$kendo-stepper-bg: transparent !default;
+/// Text color of the stepper.
+/// @group stepper
+$kendo-stepper-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the stepper.
+/// @group stepper
+$kendo-stepper-border: transparent !default;
+
+/// Horizontal margin the stepper label.
+/// @group stepper
+$kendo-stepper-label-margin-x: map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal padding the stepper label.
+/// @group stepper
+$kendo-stepper-label-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding the stepper label.
+/// @group stepper
+$kendo-stepper-label-padding-y: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// Horizontal padding the stepper content.
+/// @group stepper
+$kendo-stepper-inline-content-padding-x: map-get( $kendo-spacing, 5 ) !default;
+/// Vertical padding the stepper content.
+/// @group stepper
+$kendo-stepper-inline-content-padding-y: map-get( $kendo-spacing, 3 ) !default;
+
+/// Width of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-width: calc( map-get( $kendo-spacing, 7 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// Height of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-height: $kendo-stepper-indicator-width !default;
+/// Border width of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Border radius of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-border-radius: 50% !default;
+
+/// The focus border width of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-focus-border-width: $kendo-stepper-indicator-border-width !default;
+/// The focus size of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-focus-size: map-get( $kendo-spacing, thin ) !default;
+/// The focus offset of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-focus-offset: calc( map-get( $kendo-spacing, thin ) + map-get( $kendo-spacing, hair ) ) !default;
+/// The focus calculated offset of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) !default;
+
+/// Background color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-border: get-theme-color-var( neutral-110 ) !default;
+
+/// The hover background color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-hover-bg: var( --kendo-hover-bg, initial ) !default;
+/// The hover text color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-hover-text: var( --kendo-hover-text, initial ) !default;
+/// The hover border color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-hover-border: $kendo-stepper-indicator-border !default;
+
+/// The disabled background color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+/// The disabled text color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-disabled-text: var( --kendo-disabled-text, initial) !default;
+/// The disabled border color of the stepper indicator.
+/// @group stepper
+$kendo-stepper-indicator-disabled-border: var( --kendo-disabled-border, initial ) !default;
+
+/// Background color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-bg: get-theme-color-var( primary-100 ) !default;
+/// Text color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-text: $white !default;
+/// Border color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
+
+/// The hover background color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-hover-bg: get-theme-color-var( primary-110 ) !default;
+/// The hover text color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-text !default;
+/// The hover border color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-bg !default;
+
+/// The disabled background color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-disabled-bg: get-theme-color-var( primary-30 ) !default;
+/// The disabled text color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-disabled-text: var( --kendo-disabled-text, initial ) !default;
+/// The disabled border color of the stepper done indicator.
+/// @group stepper
+$kendo-stepper-indicator-done-disabled-border: var( --kendo-disabled-border, initial ) !default;
+
+/// The background color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
+/// The text color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-text: $kendo-stepper-indicator-done-text !default;
+/// The border color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-border: $kendo-stepper-indicator-done-border !default;
+
+/// The Hover background color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-hover-bg: $kendo-stepper-indicator-done-hover-bg !default;
+/// The Hover text color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-hover-text: $kendo-stepper-indicator-done-hover-text !default;
+/// The Hover border color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-hover-border: $kendo-stepper-indicator-done-hover-border !default;
+
+/// The Disabled background color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-disabled-bg: $kendo-stepper-indicator-done-disabled-bg !default;
+/// The Disabled text color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-disabled-text: $kendo-stepper-indicator-done-disabled-text !default;
+/// The Disabled border color of the stepper current indicator.
+/// @group stepper
+$kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-disabled-border !default;
+
+/// The text color of the stepper label.
+/// @group stepper
+$kendo-stepper-label-text: inherit !default;
+/// The success text color of the stepper label.
+/// @group stepper
+$kendo-stepper-label-success-text: get-theme-color-var( success-190 ) !default;
+/// The error text color of the stepper label.
+/// @group stepper
+$kendo-stepper-label-error-text: get-theme-color-var( error-190 ) !default;
+/// The hover text color of the stepper label.
+/// @group stepper
+$kendo-stepper-label-hover-text: $kendo-stepper-text !default;
+/// The disabled text color of the stepper label.
+/// @group stepper
+$kendo-stepper-label-disabled-text: var( --kendo-component-text, initial ) !default;
+
+/// The text color of the stepper optional label.
+/// @group stepper
+$kendo-stepper-optional-label-text: get-theme-color-var( neutral-130 ) !default;
+/// The font size of the stepper optional label.
+/// @group stepper
+$kendo-stepper-optional-label-font-size: inherit !default;
+/// The font style of the stepper optional label.
+/// @group stepper
+$kendo-stepper-optional-label-font-style: italic !default;
+
+/// The size of the stepper progress bar.
+/// @group stepper
+$kendo-stepper-progressbar-size: map-get( $kendo-spacing, thin ) !default;
+
+/// The property name of the stepper transition.
+/// @group stepper
+$kendo-stepper-content-transition-property: none !default;
+/// The duration of the stepper transition.
+/// @group stepper
+$kendo-stepper-content-transition-duration: 300ms !default;
+/// The timing funtion of the stepper transition.
+/// @group stepper
+$kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default;
+

package/scss/stepper/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "stepper",
+    dependencies: (
+        "icon",
+        "progressbar"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "stepper" ) {
+        @include kendo-stepper--layout();
+        @include kendo-stepper--theme();
+    }
+}

package/scss/switch/_layout.scss

@@ -0,0 +1,164 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-switch--layout() {
+
+    .k-switch {
+        box-sizing: border-box;
+        width: var( --INTERNAL--kendo-switch-width, auto );
+        height: var( --INTERNAL--kendo-switch-height, auto );
+        font-family: var( --kendo-switch-font-family, #{$kendo-switch-font-family} );
+        font-size: var( --INTERNAL--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: $rgba-transparent;
+
+        &.k-switch-on .k-switch-thumb-wrap {
+            inset-inline-start: calc( 100% - calc( var( --INTERNAL--kendo-switch-thumb-width, auto ) / 2 ) - var( --INTERNAL--kendo-switch-thumb-offset, 0 ) );
+        }
+        &.k-switch-off .k-switch-thumb-wrap {
+            inset-inline-start: calc( calc( var( --INTERNAL--kendo-switch-thumb-width, auto ) / 2 ) + var( --INTERNAL--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 {
+            content: "";
+            position: absolute;
+            inset: -2px;
+            z-index: 1;
+        }
+    }
+
+
+    // Readonly
+    .k-switch.k-readonly {
+        pointer-events: none;
+    }
+
+
+    // Switch track
+    .k-switch-track {
+        width: var( --INTERNAL--kendo-switch-width, auto );
+        height: var( --INTERNAL--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( --INTERNAL--kendo-switch-thumb-width, auto );
+        height: var( --INTERNAL--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( --INTERNAL--kendo-switch-label-offset, 0 );
+    }
+    .k-switch-label-off {
+        inset-inline-end: var( --INTERNAL--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} {
+            --INTERNAL--kendo-switch-width: var( --kendo-switch-#{$size}-width, #{$_track-width} );
+            --INTERNAL--kendo-switch-height: var( --kendo-switch-#{$size}-height, #{$_track-height} );
+            --INTERNAL--kendo-switch-font-size: var( --kendo-switch-#{$size}-font-size, #{$_font-size} );
+
+            .k-switch-label-on,
+            .k-switch-label-off {
+                --INTERNAL--kendo-switch-label-offset: var( --kendo-switch-#{$size}-label-offset, #{$_label-offset} );
+            }
+
+            .k-switch-thumb,
+            .k-switch-thumb-wrap {
+                --INTERNAL--kendo-switch-thumb-width: var( --kendo-switch-#{$size}-thumb-width, #{$_thumb-width} );
+                --INTERNAL--kendo-switch-thumb-height: var( --kendo-switch-#{$size}-thumb-height, #{$_thumb-height} );
+            }
+            .k-switch-thumb-wrap {
+                --INTERNAL--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% );
+        }
+
+    }
+
+}