@progress/kendo-theme-fluent 10.1.0-dev.5 → 10.1.0

package/scss/colorpalette/_variables.scss

@@ -26,6 +26,25 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+
 /// The outline color of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
@@ -47,3 +66,20 @@ $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-hover-shado
 /// The outline color of the ColorPalette selected hover tile.
 /// @group color-palette
 $kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focus-outline !default;
+
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+) !default;

package/scss/dock-manager/_layout.scss

@@ -154,6 +154,10 @@
         border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
     }
 
+    .k-dock-manager-window:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin  kendo-dock-indicator--layout() {

package/scss/index.scss

@@ -114,6 +114,7 @@
 @forward "./map/_index.scss";
 @forward "./orgchart/_index.scss";
 @forward "./signature/_index.scss";
+@forward "./otp/_index.scss";
 
 
 // Use component modules
@@ -202,6 +203,7 @@
 @use "./switch/index.scss" as *;
 @use "./upload/index.scss" as *;
 @use "./dropzone/index.scss" as *;
+@use "./otp/index.scss" as *;
 
 
 // Command interfaces
@@ -378,6 +380,7 @@
     @include kendo-switch--styles();
     @include kendo-upload--styles();
     @include kendo-dropzone--styles();
+    @include kendo-otp--styles();
 
 
     // Command interfaces

package/scss/input/_layout.scss

@@ -253,6 +253,59 @@
         }
     }
 
+    // Input group
+    .k-input-group {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        box-sizing: border-box;
+        list-style: none;
+        outline: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        > .k-input + .k-input {
+            margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width );
+        }
+
+        > .k-input:hover,
+        > .k-input.k-hover,
+        > .k-input:focus,
+        > .k-input:focus-within,
+        > .k-input.k-focus,
+        > .k-input:active,
+        > .k-input.k-active,
+        > .k-input.k-selected {
+            z-index: 2;
+        }
+
+        .k-input:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+        > .k-input:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+        > .k-input:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+    }
+
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,

package/scss/input/_variables.scss

@@ -449,6 +449,13 @@ $kendo-picker-flat-disabled-bg: none !default;
 /// @group input
 $kendo-picker-flat-disabled-border: $kendo-picker-flat-disabled-text !default;
 
+/// The calculated height of the Input.
+/// @group input
+$kendo-input-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{$kendo-input-sm-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+$kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
+
 /// The sizes map for the Input components.
 /// @group input
 $kendo-input-sizes: (

package/scss/otp/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-otp--styles() {
+    @include import-once( "otp" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-otp--layout();
+        @include kendo-otp--theme();
+    }
+}

package/scss/otp/_layout.scss

@@ -0,0 +1,42 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+@mixin kendo-otp--layout-base() {
+    // OTP
+    .k-otp {
+        display: flex;
+        width: min-content;
+        align-items: center;
+        flex-direction: row;
+        gap: var( --INTERNAL--kendo-otp-gap, 0 );
+
+        .k-otp-input > .k-input-inner {
+            text-align: center;
+            padding-inline: 0;
+        }
+    }
+
+    @each $size, $size-props in $kendo-otp-sizes {
+        $_gap: map.get($size-props, gap);
+        $_separator-padding-x: map.get($size-props, separator-padding-x);
+        $_input-width: map.get($size-props, input-width);
+
+        .k-otp-#{$size} {
+            --INTERNAL--kendo-otp-gap: var( --kendo-otp-#{$size}-gap, #{$_gap} );
+
+            .k-otp-input {
+                min-width: $_input-width;
+            }
+
+            .k-otp-separator:not(:empty) {
+                padding-inline: $_separator-padding-x;
+            }
+        }
+    }
+}
+
+@mixin kendo-otp--layout() {
+    @include kendo-otp--layout-base();
+}

package/scss/otp/_theme.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+@mixin kendo-otp--theme-base() {
+
+    // OTP
+    .k-otp {};
+
+}
+
+@mixin kendo-otp--theme() {
+    @include kendo-otp--theme-base();
+}

package/scss/otp/_variables.scss

@@ -0,0 +1,61 @@
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+// OTP
+
+/// The gap between the items in the OTP.
+/// @group one-time-password
+$kendo-otp-gap: k-spacing(1.5) !default;
+/// The gap between the items in the small OTP.
+/// @group one-time-password
+$kendo-otp-sm-gap: k-spacing(1) !default;
+/// The gap between the items in the medium OTP.
+/// @group one-time-password
+$kendo-otp-md-gap: $kendo-otp-gap !default;
+/// The gap between the items in the large OTP.
+/// @group one-time-password
+$kendo-otp-lg-gap: k-spacing(2) !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
+
+/// The horizontal padding of the OTP separator.
+/// @group one-time-password
+$kendo-otp-input-width: $kendo-input-calc-size !default;
+/// The horizontal padding of the small OTP separator.
+/// @group one-time-password
+$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
+/// The horizontal padding of the medium OTP separator.
+/// @group one-time-password
+$kendo-otp-md-input-width: $kendo-otp-input-width !default;
+/// The horizontal padding of the large OTP separator.
+/// @group one-time-password
+$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
+
+$kendo-otp-sizes: (
+    sm: (
+        gap: $kendo-otp-sm-gap,
+        separator-padding-x: $kendo-otp-sm-separator-padding-x,
+        input-width: $kendo-otp-sm-input-width
+    ),
+    md: (
+        gap: $kendo-otp-md-gap,
+        separator-padding-x: $kendo-otp-md-separator-padding-x,
+        input-width: $kendo-otp-md-input-width
+    ),
+    lg: (
+        gap: $kendo-otp-lg-gap,
+        separator-padding-x: $kendo-otp-lg-separator-padding-x,
+        input-width: $kendo-otp-lg-input-width
+    )
+) !default;

package/scss/radio/_layout.scss

@@ -25,10 +25,6 @@
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
-
-        @if $kendo-radio-indicator-type == "image" {
-            background-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
-        }
     }
 
 
@@ -61,6 +57,15 @@
             top: 50%;
             left: 50%;
         }
+
+        @if $kendo-radio-indicator-type == "image" {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            mask-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
+            mask-repeat: no-repeat;
+        }
     }
 
 
@@ -68,7 +73,10 @@
     .k-radio:hover,
     .k-radio.k-hover {
         @if $kendo-radio-indicator-type == "image" {
-            background-image: var( --kendo-radio-hover-image, #{ $kendo-radio-hover-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-radio-hover-image, #{ $kendo-radio-hover-image } );
+            }
         }
 
         @if $kendo-radio-indicator-type == "pseudo" {
@@ -96,7 +104,10 @@
     .k-radio:checked,
     .k-radio.k-checked {
         @if $kendo-radio-indicator-type == "image" {
-            background-image: var( --kendo-radio-checked-image, #{ $kendo-radio-checked-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-radio-checked-image, #{ $kendo-radio-checked-image } );
+            }
         }
 
         @if $kendo-radio-indicator-type == "pseudo" {

package/scss/radio/_variables.scss

@@ -140,7 +140,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// The image of the checked RadioButton indicator.
 /// @group radio
-$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#0078d4'/></svg>") ) !default;
 /// The image of the disabled and checked RadioButton indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

package/scss/tabstrip/_layout.scss

@@ -1,3 +1,5 @@
+
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -160,15 +162,97 @@
     // Scrolling
     .k-tabstrip-scrollable {
         > .k-tabstrip-items-wrapper {
-
             > .k-tabstrip-items {
                 flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
+
+                &.k-tabstrip-items-scroll {
+                    scrollbar-width: none;
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+                }
+            }
+
+            &.k-tabstrip-top,
+            &.k-tabstrip-bottom {
+                .k-tabstrip-items.k-tabstrip-items-scroll {
+                    overflow-x: auto;
+                }
+            }
+
+            &.k-tabstrip-left,
+            &.k-tabstrip-right {
+                .k-tabstrip-items.k-tabstrip-items-scroll {
+                    overflow-y: auto;
+                }
             }
         }
     }
 
+    .k-tabstrip-scrollable-overlay {
+        .k-tabstrip-items-wrapper {
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                z-index: 3;
+            }
+        }
+
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before,
+                &::after {
+                    height: 100%;
+                    aspect-ratio: 1;
+                }
+                &::before {
+                    inset-inline-start: 0;
+                }
+
+                &::after {
+                    inset-inline-end: 0;
+                }
+            }
+        }
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            .k-tabstrip-items-wrapper {
+                &::before,
+                &::after {
+                    width: 100%;
+                }
+                &::before {
+                    inset-block-start: 0;
+                }
+
+                &::after {
+                    inset-block-end: 0;
+                }
+            }
+        }
+
+        &.k-tabstrip-scrollable-start {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    display: none;
+                }
+            }
+        }
+
+        &.k-tabstrip-scrollable-end {
+            .k-tabstrip-items-wrapper {
+                &::after {
+                    display: none;
+                }
+            }
+        }
+    }
 
     // Tabstrip orientation
     .k-tabstrip-horizontal {
@@ -330,4 +414,28 @@
 
     }
 
+     // TabStrip sizes
+     @each $size, $size-props in $kendo-tabstrip-sizes {
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_item-padding-x: map.get( $size-props, item-padding-x );
+        $_item-padding-y: map.get( $size-props, item-padding-y );
+
+        .k-tabstrip-#{$size} {
+            .k-tabstrip-items .k-link {
+                font-size: $_font-size;
+                line-height: $_line-height;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
+            }
+
+            :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
+                &::before,
+                &::after {
+                    height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
+                }
+            }
+        }
+    }
+
 }

package/scss/tabstrip/_theme.scss

@@ -99,4 +99,51 @@
         }
     }
 
+    // Scrolling
+    .k-tabstrip-scrollable-overlay {
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                }
+            }
+        }
+
+        &.k-tabstrip-left,
+        &.k-tabstrip-right {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(180deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(360deg, $kendo-tabstrip-scroll-overlay);
+                }
+            }
+        }
+    }
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        &.k-tabstrip-scrollable-overlay {
+            &.k-tabstrip-top,
+            &.k-tabstrip-bottom {
+                .k-tabstrip-items-wrapper {
+                    &::before {
+                        background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                    }
+
+                    &::after {
+                        background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
+                    }
+                }
+            }
+        }
+    }
 }

package/scss/tabstrip/_variables.scss

@@ -34,6 +34,26 @@ $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 /// The border width around the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border-width: 0px !default;
+
+/// The font size of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the small TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sm-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the medium TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-md-line-height: $kendo-tabstrip-line-height !default;
+/// The font size of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-font-size: $kendo-tabstrip-font-size !default;
+/// The line height of the large TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default;
+
 /// The background color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-bg: transparent !default;
@@ -49,7 +69,7 @@ $kendo-tabstrip-border: transparent !default;
 $kendo-tabstrip-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !default;
+$kendo-tabstrip-item-padding-y: k-spacing(3) !default;
 /// The border width around the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 0px !default;
@@ -59,6 +79,26 @@ $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
 /// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(2) !default;
+
+/// The horizontal padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the small TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-sm-item-padding-y: k-spacing(2.5) !default;
+/// The horizontal padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-x: $kendo-tabstrip-item-padding-x !default;
+/// The vertical padding of the medium TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-md-item-padding-y: $kendo-tabstrip-item-padding-y !default;
+/// The horizontal padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the large TabStrip items.
+/// @group tabstrip
+$kendo-tabstrip-lg-item-padding-y: k-spacing(3.5) !default;
+
 ///  The background color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-bg: transparent !default;
@@ -149,3 +189,30 @@ $kendo-tabstrip-scrollable-button-padding-x: k-spacing(1) !default;
 // The vertical button padding of the scrollable TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-scrollable-button-padding-y: k-spacing(1) !default;
+
+/// The left and right scroll overlay of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+
+/// The size map of the TabStrip.
+/// @group tabstrip
+$kendo-tabstrip-sizes: (
+    sm: (
+        font-size: $kendo-tabstrip-sm-font-size,
+        line-height: $kendo-tabstrip-sm-line-height,
+        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
+        item-padding-y: $kendo-tabstrip-sm-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-tabstrip-md-font-size,
+        line-height: $kendo-tabstrip-md-line-height,
+        item-padding-x: $kendo-tabstrip-md-item-padding-x,
+        item-padding-y: $kendo-tabstrip-md-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-tabstrip-lg-font-size,
+        line-height: $kendo-tabstrip-lg-line-height,
+        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
+        item-padding-y: $kendo-tabstrip-lg-item-padding-y
+    )
+) !default;