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

package/scss/signature/_variables.scss

@@ -3,54 +3,51 @@
 
 /// The default width of the signature component.
 /// @group signature
-$kendo-signature-width: 250px !default;
+$kendo-signature-width: var( --kendo-signature-width, 250px ) !default;
 /// The default height of the signature component.
 /// @group signature
-$kendo-signature-height: 84px !default;
+$kendo-signature-height: var( --kendo-signature-height, 84px ) !default;
 /// The default width of the maximized signature component.
 /// @group signature
-$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-width: var( --kendo-signature-maximized-width, 750px ) !default;
 /// The default height of the maximized signature component.
 /// @group signature
-$kendo-signature-maximized-height: 252px !default;
+$kendo-signature-maximized-height: var( --kendo-signature-maximized-height, 252px ) !default;
 /// The horizontal paddings of the signature component.
 /// @group signature
-$kendo-signature-padding-x: k-spacing(1) !default;
-$kendo-signature-sm-padding-x: $kendo-signature-padding-x !default;
-$kendo-signature-md-padding-x: $kendo-signature-padding-x !default;
-$kendo-signature-lg-padding-x: $kendo-signature-padding-x !default;
+$kendo-signature-sm-padding-x: var( --kendo-signature-sm-padding-x, k-spacing(1) ) !default;
+$kendo-signature-md-padding-x: var( --kendo-signature-md-padding-x, k-spacing(1) ) !default;
+$kendo-signature-lg-padding-x: var( --kendo-signature-lg-padding-x, k-spacing(1) ) !default;
 /// The vertical paddings of the signature component.
 /// @group signature
-$kendo-signature-padding-y: $kendo-signature-padding-x !default;
-$kendo-signature-sm-padding-y: k-spacing(0.5) !default;
-$kendo-signature-md-padding-y: k-spacing(1) !default;
-$kendo-signature-lg-padding-y: k-spacing(1.5) !default;
+$kendo-signature-sm-padding-y: var( --kendo-signature-sm-padding-y, k-spacing(0.5) ) !default;
+$kendo-signature-md-padding-y: var( --kendo-signature-md-padding-y, k-spacing(1) ) !default;
+$kendo-signature-lg-padding-y: var( --kendo-signature-lg-padding-y, k-spacing(1.5) ) !default;
 
 /// The opacity of the disabled signature component.
 /// @group signature
-$kendo-signature-disabled-opacity: .3 !default;
+$kendo-signature-disabled-opacity: var( --kendo-signature-disabled-opacity, .3 ) !default;
 
 /// The bottom-border width of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-width: var( --kendo-signature-line-width, 1px ) !default;
 /// The border style of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-style: var( --kendo-signature-line-style, dashed ) !default;
 /// The color of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-color: color-mix(in srgb, k-color(info) 40%, transparent) !default;
+$kendo-signature-line-color: var( --kendo-signature-line-color, color-mix(in srgb, k-color(info) 40%, transparent) ) !default;
 /// The color of the row line of the disabled signature component.
 /// @group signature
-$kendo-signature-line-disabled-color: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-signature-line-disabled-color: var( --kendo-signature-line-disabled-color, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
 /// The width of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
-$kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
-$kendo-signature-md-line-size: calc( 100% - 2 * #{$kendo-signature-md-padding-x} ) !default;
-$kendo-signature-lg-line-size: calc( 100% - 2 * #{$kendo-signature-lg-padding-x} ) !default;
+$kendo-signature-sm-line-size: var( --kendo-signature-sm-line-size, calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) ) !default;
+$kendo-signature-md-line-size: var( --kendo-signature-md-line-size, calc( 100% - 2 * #{$kendo-signature-md-padding-x} ) ) !default;
+$kendo-signature-lg-line-size: var( --kendo-signature-lg-line-size, calc( 100% - 2 * #{$kendo-signature-lg-padding-x} ) ) !default;
 /// The bottom offset of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-bottom-offset: 33% !default;
+$kendo-signature-line-bottom-offset: var( --kendo-signature-line-bottom-offset, 33% ) !default;
 
 /// The sizes map of the signature component.
 /// @group signature
@@ -74,12 +71,36 @@ $kendo-signature-sizes: (
 
 /// The gap between individual action items of the signature component
 /// @group signature
-$kendo-signature-actions-gap: k-spacing(1) !default;
+$kendo-signature-actions-gap: var( --kendo-signature-actions-gap, k-spacing(1) ) !default;
 
 /// The bottom-border width of the row line of the maximized signature component.
 /// @group signature
-$kendo-signature-maximized-line-width: 3px !default;
+$kendo-signature-maximized-line-width: var( --kendo-signature-maximized-line-width, 3px ) !default;
 
 /// The min-height of the large size signature component.
 /// @group signature
-$kendo-signature-lg-min-height: 110px !default;
+$kendo-signature-lg-min-height: var( --kendo-signature-lg-min-height, 110px ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/signature/_variables.scss" with (
+    $kendo-signature-width: $kendo-signature-width,
+    $kendo-signature-height: $kendo-signature-height,
+    $kendo-signature-lg-min-height: $kendo-signature-lg-min-height,
+    $kendo-signature-maximized-width: $kendo-signature-maximized-width,
+    $kendo-signature-maximized-height: $kendo-signature-maximized-height,
+    $kendo-signature-sm-padding-x: $kendo-signature-sm-padding-x,
+    $kendo-signature-md-padding-x: $kendo-signature-md-padding-x,
+    $kendo-signature-lg-padding-x: $kendo-signature-lg-padding-x,
+    $kendo-signature-sm-padding-y: $kendo-signature-sm-padding-y,
+    $kendo-signature-md-padding-y: $kendo-signature-md-padding-y,
+    $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-y,
+    $kendo-signature-line-width: $kendo-signature-line-width,
+    $kendo-signature-line-style: $kendo-signature-line-style,
+    $kendo-signature-line-color: $kendo-signature-line-color,
+    $kendo-signature-sm-line-size: $kendo-signature-sm-line-size,
+    $kendo-signature-md-line-size: $kendo-signature-md-line-size,
+    $kendo-signature-lg-line-size: $kendo-signature-lg-line-size,
+    $kendo-signature-line-bottom-offset: $kendo-signature-line-bottom-offset,
+    $kendo-signature-sizes: $kendo-signature-sizes,
+    $kendo-signature-actions-gap: $kendo-signature-actions-gap,
+    $kendo-signature-maximized-line-width: $kendo-signature-maximized-line-width
+);

package/scss/skeleton/_layout.scss

@@ -1,83 +1,6 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/skeleton/_layout.scss" as *;
 
 @mixin kendo-skeleton--layout() {
-
-    .k-skeleton {
-        display: block;
-    }
-
-    // Text
-    .k-skeleton-text {
-        border-radius: var( --kendo-skeleton-text-border-radius, #{$kendo-skeleton-text-border-radius} );
-        transform: var( --kendo-skeleton-text-transform, #{$kendo-skeleton-text-transform} );
-
-        &:empty::before {
-            content: "\200b";
-        }
-    }
-
-    // Shapes
-    .k-skeleton-rect {
-        border-radius: var( --kendo-skeleton-rect-border-radius, #{$kendo-skeleton-rect-border-radius} );
-    }
-
-    .k-skeleton-circle {
-        border-radius: var( --kendo-skeleton-circle-border-radius, #{$kendo-skeleton-circle-border-radius} );
-    }
-
-
-    // Legacy alias
-    .k-placeholder-line {
-        @extend .k-skeleton !optional;
-        @extend .k-skeleton-text !optional;
-    }
-
-    // Wave animation
-    @keyframes k-skeleton-wave {
-        0% {
-            transform: translateX(-100%);
-        }
-        60% {
-            transform: translateX(100%);
-        }
-        100% {
-            transform: translateX(100%);
-        }
-    }
-
-    .k-skeleton-wave .k-skeleton,
-    .k-skeleton-wave.k-skeleton {
-        position: relative;
-        overflow: hidden;
-
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            transform: translateX(-100%);
-            animation: k-skeleton-wave 1.6s linear .5s infinite;
-        }
-    }
-
-    // Pulse
-    @keyframes k-skeleton-pulse {
-        0% {
-            opacity: 1;
-        }
-        50% {
-            opacity: .4;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-
-    .k-skeleton-pulse .k-skeleton,
-    .k-skeleton-pulse.k-skeleton {
-        animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
-    }
-
+    @include kendo-skeleton--layout-base();
 }

package/scss/skeleton/_theme.scss

@@ -1,22 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/skeleton/_theme.scss" as *;
 
 @mixin kendo-skeleton--theme() {
-
-    .k-skeleton {
-        @include fill(
-            $bg: var( --kendo-skeleton-item-bg, #{$kendo-skeleton-item-bg} )
-        );
-    }
-
-    // Wave animation
-    .k-skeleton-wave .k-skeleton::after,
-    .k-skeleton-wave.k-skeleton::after {
-        background-image: linear-gradient(
-            to right,
-            transparent,
-            var( --kendo-skeleton-wave-bg, #{$kendo-skeleton-wave-bg} ),
-            transparent
-        );
-    }
+    @include kendo-skeleton--theme-base();
 }

package/scss/skeleton/_variables.scss

@@ -2,22 +2,31 @@
 
 /// The transform scale of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-transform: scale( 1, .6 ) !default;
+$kendo-skeleton-text-transform: var( --kendo-skeleton-text-transform, scale( 1, .6 ) ) !default;
 /// The border radius of the Skeleton text.
 /// @group skeleton
-$kendo-skeleton-text-border-radius: k-border-radius(md) !default;
+$kendo-skeleton-text-border-radius: var( --kendo-skeleton-text-border-radius, k-border-radius(md) ) !default;
 
 /// The border radius of the rectangular Skeleton.
 /// @group skeleton
-$kendo-skeleton-rect-border-radius: k-border-radius(md) !default;
+$kendo-skeleton-rect-border-radius: var( --kendo-skeleton-rect-border-radius, k-border-radius(md) ) !default;
 
 /// The border radius of the circular Skeleton.
 /// @group skeleton
-$kendo-skeleton-circle-border-radius: 9999px !default;
+$kendo-skeleton-circle-border-radius: var( --kendo-skeleton-circle-border-radius, 9999px ) !default;
 
 /// The background color of the Skeleton item.
 /// @group skeleton
-$kendo-skeleton-item-bg: color-mix(in srgb, k-color(on-app-surface) 23%, transparent) !default;
+$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, color-mix(in srgb, k-color(on-app-surface) 23%, transparent) ) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
-$kendo-skeleton-wave-bg: k-color(base) !default;
+$kendo-skeleton-wave-bg: var( --kendo-skeleton-wave-bg, k-color(base) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/skeleton/_variables.scss" with (
+    $kendo-skeleton-text-transform: $kendo-skeleton-text-transform,
+    $kendo-skeleton-text-border-radius: $kendo-skeleton-text-border-radius,
+    $kendo-skeleton-rect-border-radius: $kendo-skeleton-rect-border-radius,
+    $kendo-skeleton-circle-border-radius: $kendo-skeleton-circle-border-radius,
+    $kendo-skeleton-item-bg: $kendo-skeleton-item-bg,
+    $kendo-skeleton-wave-bg: $kendo-skeleton-wave-bg
+);

package/scss/slider/_layout.scss

@@ -1,43 +1,22 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/slider/_layout.scss" as *;
 
 @mixin kendo-slider--layout() {
 
-    // Slider
+    @include kendo-slider--layout-base();
+
     .k-slider {
         width: min-content;
         height: min-content;
-        border: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-slider-font-family, #{$kendo-slider-font-family} );
-        font-size: var( --kendo-slider-font-size, #{$kendo-slider-font-size} );
-        line-height: var( --kendo-slider-line-height, #{$kendo-slider-line-height} );
-        background: none;
-        display: inline-flex;
-        align-items: center;
-        gap: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
+        gap: $kendo-slider-spacing;
 
         .k-label {
-            width: auto;
             font-size: .875em;
-            line-height: 1;
-            white-space: nowrap;
             pointer-events: all;
-            position: absolute;
         }
 
-
         &[disabled],
         &.k-disabled {
             .k-slider-tick,
@@ -48,33 +27,17 @@
         }
     }
 
-    // Slider button
-    .k-slider-button {
-        flex: none;
-    }
-
-
-    // Slider track
+    // Fluent uses k-slider-thumb instead of k-draghandle
     .k-slider-track-wrap {
         flex-grow: 1;
-        display: flex;
-        flex-flow: inherit;
         justify-content: space-between;
-        position: relative;
-        touch-action: none;
     }
     .k-slider-track {
-        margin: 0;
-        padding: 0;
-        border-radius: var( --kendo-slider-track-border-radius, #{$kendo-slider-track-border-radius} );
-        position: absolute;
+        border-radius: $kendo-slider-track-border-radius;
         z-index: 2;
     }
     .k-slider-selection {
-        margin: 0;
-        padding: 0;
-        border-radius: var( --kendo-slider-track-border-radius, #{$kendo-slider-track-border-radius} );
-        position: absolute;
+        border-radius: $kendo-slider-track-border-radius;
 
         &:active,
         &.k-active {
@@ -82,11 +45,11 @@
         }
     }
     .k-slider-thumb {
-        width: var( --kendo-slider-thumb-size, #{$kendo-slider-thumb-size} );
-        height: var( --kendo-slider-thumb-size, #{$kendo-slider-thumb-size} );
+        width: $kendo-slider-thumb-size;
+        height: $kendo-slider-thumb-size;
         border-style: solid;
-        border-width: var( --kendo-slider-thumb-border-widths, #{$kendo-slider-thumb-border-width} );
-        border-radius: var( --kendo-slider-thumb-border-radius, #{$kendo-slider-thumb-border-radius} );
+        border-width: $kendo-slider-thumb-border-width;
+        border-radius: $kendo-slider-thumb-border-radius;
         background-color: transparent;
         background-repeat: no-repeat;
         outline: 0;
@@ -100,15 +63,12 @@
         }
     }
 
-
     // Slider ticks
     .k-slider-items {
         display: contents;
         pointer-events: none;
     }
     .k-slider-tick {
-        margin: 0;
-        padding: 0;
         background-color: transparent;
         background-position: center center;
         background-repeat: no-repeat;
@@ -128,29 +88,14 @@
         min-height: 100%;
     }
 
-
     // Horizontal slider
     .k-horizontal-slider {
-        width: var( --kendo-slider-size, #{$kendo-slider-size} );
-        flex-flow: row nowrap;
+        width: $kendo-slider-size;
 
-        // Slider track
         .k-slider-track-wrap {
-            height: var( --kendo-slider-alt-size, #{$kendo-slider-alt-size} );
-        }
-        .k-slider-track {
-            width: 100%;
-            height: var( --kendo-slider-track-size, #{$kendo-slider-track-size} );
-            inset-inline-start: 0;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-        .k-slider-selection {
-            width: calc( (var( --kendo-slider-end, 0) - var( --kendo-slider-start, 0)) * 1% );
-            height: 100%;
-            inset-inline-start: calc( var( --kendo-slider-start, 0) * 1% );
-            top: 0;
+            height: $kendo-slider-alt-size;
         }
+
         .k-slider-thumb {
             top: 50%;
             transform: translate(-50%, -50%);
@@ -166,42 +111,6 @@
             inset-inline-start: calc( var( --kendo-slider-end, 0) * 1% );
         }
 
-        // Slider ticks
-        .k-tick { background-position: center -92px; }
-        .k-slider-topleft .k-tick { background-position: center -122px; }
-        .k-slider-bottomright .k-tick { background-position: center -152px; }
-
-        .k-tick-large { background-position: center -2px; }
-        .k-slider-topleft .k-tick-large { background-position: center -32px; }
-        .k-slider-bottomright .k-tick-large { background-position: center -62px; }
-
-        .k-first { background-position: 0 -92px; }
-        .k-tick-large.k-first { background-position: 0 -2px; }
-        .k-slider-topleft .k-first { background-position: 0 -122px; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: 0 -32px; }
-        .k-slider-bottomright .k-first { background-position: 0 -152px; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: 0 -62px; }
-
-        .k-last { background-position: 100% -92px; }
-        .k-tick-large.k-last { background-position: 100% -2px; }
-        .k-slider-topleft .k-last { background-position: 100% -122px; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; }
-        .k-slider-bottomright .k-last { background-position: 100% -152px; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: 100% -62px; }
-
-
-        // Slider labels
-        .k-label {
-            inset-inline-start: 50%;
-            bottom: -1.2em;
-            transform: translateX(-50%);
-        }
-        .k-first .k-label { inset-inline-start: 0; }
-        .k-last .k-label { inset-inline-start: 100%; }
-        .k-slider-topleft .k-label {
-            top: -1.2em;
-        }
-
         // Transitions
         &.k-slider-transitions {
             .k-slider-selection {
@@ -213,27 +122,12 @@
         }
     }
 
-
     // Vertical slider
     .k-vertical-slider {
-        height: var( --kendo-slider-size, #{$kendo-slider-size} );
-        flex-flow: column-reverse nowrap;
+        height: $kendo-slider-size;
 
-        // Slider track
         .k-slider-track-wrap {
-            width: var( --kendo-slider-alt-size, #{$kendo-slider-alt-size} );
-        }
-        .k-slider-track {
-            width: var( --kendo-slider-track-size, #{$kendo-slider-track-size} );
-            height: 100%;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        .k-slider-selection {
-            width: 100%;
-            bottom: calc( var( --kendo-slider-start, 0) * 1% );
-            height: calc( (var( --kendo-slider-end, 0) - var( --kendo-slider-start, 0)) * 1% );
+            width: $kendo-slider-alt-size;
         }
         .k-slider-thumb {
             left: 50%;
@@ -250,54 +144,6 @@
             bottom: calc( var( --kendo-slider-end, 0) * 1% );
         }
 
-
-        // Slider ticks
-        .k-tick {
-            text-align: end;
-            margin-left: 2px;
-        }
-        .k-slider-topleft .k-tick {
-            text-align: start;
-        }
-
-        .k-tick { background-position: -94px center; }
-        .k-slider-topleft .k-tick { background-position: -124px center; }
-        .k-slider-bottomright .k-tick { background-position: -154px center; }
-
-        .k-tick-large { background-position: -4px center; }
-        .k-slider-topleft .k-tick-large { background-position: -34px center; }
-        .k-slider-bottomright .k-tick-large { background-position: -64px center; }
-
-        .k-first { background-position: -94px 100%; }
-        .k-tick-large.k-first { background-position: -4px 100%; }
-        .k-slider-topleft .k-first { background-position: -124px 100%; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
-        .k-slider-bottomright .k-first { background-position: -154px 100%; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
-
-        .k-last { background-position: -94px 0; }
-        .k-tick-large.k-last { background-position: -4px 0; }
-        .k-slider-topleft .k-last { background-position: -124px 0; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
-        .k-slider-bottomright .k-last { background-position: -154px 0; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
-
-
-        // Slider labels
-        .k-label {
-            text-align: start;
-            inset-inline-start: 120%;
-            inset-inline-end: auto;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-        .k-first .k-label { top: 100%; }
-        .k-last .k-label { top: 0; }
-        .k-slider-topleft .k-label {
-            inset-inline-start: auto;
-            inset-inline-end: 120%;
-        }
-
         // Transitions
         &.k-slider-transitions {
             .k-slider-selection {
@@ -307,22 +153,9 @@
                 transition: bottom $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-thumb-transition-speed $kendo-slider-thumb-transition-function;
             }
         }
-
-    }
-
-
-    // Slider readonly
-    .k-slider.k-readonly {
-        .k-slider-button,
-        .k-slider-track,
-        .k-slider-tick,
-        .k-slider-thumb {
-            pointer-events: none;
-        }
     }
 
-
-    // RTL
+    // RTL specific for fluent thumb classes
     .k-slider-rtl {
         &.k-horizontal-slider {
             .k-slider-thumb {
@@ -332,28 +165,10 @@
             .k-slider-thumb:active {
                 transform: if( $kendo-slider-thumb-active-scale, translate(50%, -50%) scale($kendo-slider-thumb-active-scale), null );
             }
-            .k-label {
-                transform: translateX(50%);
-            }
-        }
-        &.k-vertical-slider {
-
         }
     }
-    .k-slider[dir="rtl"],
-    [dir="rtl"] .k-slider,
-    .k-slider.k-rtl,
-    .k-rtl .k-slider {
-        @extend .k-slider-rtl !optional;
-    }
-
-
-    // Angular specific
-    .k-slider kendo-resize-sensor {
-        position: absolute;
-    }
 
-    // Aliases
+    // Aliases - fluent specific thumb classes
     .k-slider .k-button { @extend .k-slider-button !optional; }
     .k-tick { @extend .k-slider-tick !optional; }
     .k-draghandle { @extend .k-slider-thumb !optional; }