@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/card/_variables.scss

@@ -1,14 +1,13 @@
 @use "sass:map";
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "../core/" as *;
 @use "../button/_variables.scss" as *;
 
 /// Horizontal padding of the card.
 /// @group card
-$kendo-card-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the card.
 /// @group card
-$kendo-card-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Width of the border around the card.
 /// @group card
 $kendo-card-border-width: 0px !default;
@@ -28,7 +27,7 @@ $kendo-card-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Spacing between the cards in the card deck.
 /// @group card
-$kendo-card-deck-gap: map-get( $kendo-spacing, 4 ) !default;
+$kendo-card-deck-gap: map.get( $kendo-spacing, 4 ) !default;
 
 /// Background color of the card.
 /// @group card
@@ -61,10 +60,10 @@ $kendo-card-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 $kendo-card-header-font-weight: var( --kendo-font-weight, initial ) !default;
 /// Horizontal padding of the card header.
 /// @group card
-$kendo-card-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Verical padding of the card header.
 /// @group card
-$kendo-card-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Bottom border width of the card header.
 /// @group card
 $kendo-card-header-border-width: 0 !default;
@@ -80,10 +79,10 @@ $kendo-card-header-border: inherit !default; // header-border
 
 /// Horizontal padding of the card body.
 /// @group card
-$kendo-card-body-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-body-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the card body.
 /// @group card
-$kendo-card-body-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-body-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the card footer.
 /// @group card
@@ -99,20 +98,20 @@ $kendo-card-footer-border-width: 0 !default;
 $kendo-card-footer-bg: inherit !default;
 /// Text color of the card footer.
 /// @group card
-$kendo-card-footer-text: inherit !default; // $header-text
+$kendo-card-footer-text: inherit !default; // $kendo-component-header-text
 /// Border color of the card footer.
 /// @group card
-$kendo-card-footer-border: inherit !default; // $header-border
+$kendo-card-footer-border: inherit !default; // $kendo-component-header-border
 
 /// Text weight of the card title.
 /// @group card
 $kendo-card-title-font-weight: $kendo-card-header-font-weight !default;
 /// Bottom margin of the card title.
 /// @group card
-$kendo-card-title-margin-bottom: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-title-margin-bottom: map.get( $kendo-spacing, 3 ) !default;
 /// Bottom margin of the card subtitle.
 /// @group card
-$kendo-card-subtitle-margin-bottom: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-subtitle-margin-bottom: map.get( $kendo-spacing, 3 ) !default;
 /// Text color of the card subtitle.
 /// @group card
 $kendo-card-subtitle-text: $kendo-subtle-text !default;
@@ -129,16 +128,16 @@ $kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
 
 /// Horizontal padding of the card actions.
 /// @group card
-$kendo-card-actions-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-actions-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the card actions.
 /// @group card
-$kendo-card-actions-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-card-actions-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Top border of the card actions.
 /// @group card
 $kendo-card-actions-border-width: 0 !default;
 /// Spacing between the card actions.
 /// @group card
-$kendo-card-actions-gap: map-get( $kendo-spacing, 2 ) !default;
+$kendo-card-actions-gap: map.get( $kendo-spacing, 2 ) !default;
 
 /// Border radius of the scroll button in the card deck.
 /// @group card
@@ -150,15 +149,15 @@ $kendo-card-deck-scroll-button-offset: ( -1 * $kendo-button-border-width ) !defa
 $kendo-card-callout-size: 20px !default;
 
 /// Theme variations for the card.
-$kendo-card-brand-colors: ( primary, error, warning, success, info );
+$kendo-card-brand-colors: ( primary, error, warning, success, info ) !default;
 
 // Matrix with card theme colors in the order: bg, color, border
 $_tc-card-matrix: (
     (normal: (20, 160, 20)),
-);
+) !default;
 
 /// Theme colors map for the card variations.
-$kendo-card-theme-colors: ();
+$kendo-card-theme-colors: () !default;
 
 @each $ui-states in $_tc-card-matrix {
     @each $brand-color in $kendo-card-brand-colors {

package/scss/card/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/chat/_layout.scss

@@ -1,7 +1,6 @@
 @use "sass:math";
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-chat--layout() {
     .k-chat {
@@ -20,7 +19,7 @@
         flex-direction: column;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
 
         // Message list

package/scss/chat/_theme.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-chat--theme() {
 
@@ -65,7 +65,7 @@
         .k-quick-reply {
             @include fill(
                 var( --kendo-chat-quick-reply-text, #{ $kendo-chat-quick-reply-text } ),
-                var( --kendo-chat-quick-reply-bg, #{ $kendo-chat-quick-reply-bg  } ),
+                var( --kendo-chat-quick-reply-bg, #{ $kendo-chat-quick-reply-bg } ),
                 var( --kendo-chat-quick-reply-border, #{ $kendo-chat-quick-reply-border } )
             );
         }

package/scss/chat/_variables.scss

@@ -1,24 +1,24 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../toolbar/_variables.scss" as *;
 
 // Chat
 
 /// The box shadow transition of the chat.
 /// @group chat
-$kendo-chat-transition: var( --kendo-transition, inherit );
+$kendo-chat-transition: var( --kendo-transition, inherit ) !default;
 /// The hover text of links in the bubble of the chat.
 /// @group chat
-$kendo-chat-link-hover-text: var( --kendo-link-hover-text, inherit );
+$kendo-chat-link-hover-text: var( --kendo-link-hover-text, inherit ) !default;
 /// The text of links in the bubble of the chat.
 /// @group chat
-$kendo-chat-link-text: var( --kendo-link-text, inherit );
+$kendo-chat-link-text: var( --kendo-link-text, inherit ) !default;
 /// The horizontal padding of the chat.
 /// @group chat
-$kendo-chat-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-chat-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// The vertical padding of the chat.
 /// @group chat
-$kendo-chat-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-chat-padding-y: map.get( $kendo-spacing, 4 ) !default;
 /// the width of the chat.
 /// @group chat
 $kendo-chat-width: 500px !default;
@@ -47,10 +47,10 @@ $kendo-chat-typing-indicator-dot-spacing: 5px !default;
 
 /// The horizontal spacing between items of the chat.
 /// @group chat
-$kendo-chat-item-spacing-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chat-item-spacing-x: map.get( $kendo-spacing, 2 ) !default;
 /// The vertical spacing between items of the chat.
 /// @group chat
-$kendo-chat-item-spacing-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-chat-item-spacing-y: map.get( $kendo-spacing, 4 ) !default;
 
 /// The horizontal padding of message list of the chat.
 /// @group chat
@@ -80,27 +80,27 @@ $kendo-chat-timestamp-bg: normal !default;
 
 /// The horizontal padding of the bubble message.
 /// @group chat
-$kendo-chat-bubble-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-chat-bubble-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// The vertical padding of the bubble message.
 /// @group chat
-$kendo-chat-bubble-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chat-bubble-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// The spacing of the bubble message.
 /// @group chat
-$kendo-chat-bubble-spacing: map-get( $kendo-spacing, thin ) !default;
+$kendo-chat-bubble-spacing: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// The line height of the bubble message.
 /// @group chat
 $kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The padding of the scroll button in the chat.
 /// @group chat
-$kendo-chat-scroll-button: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chat-scroll-button: map.get( $kendo-spacing, 2 ) !default;
 /// The size of the card deck scrollbar in the chat.
 /// @group chat
 $kendo-card-deck-scrollbar-size: 20px !default;
 
 /// The border radius of the bubble message.
 /// @group chat
-$kendo-chat-bubble-border-radius: map-get( $kendo-spacing, 3 ) !default;
+$kendo-chat-bubble-border-radius: map.get( $kendo-spacing, 3 ) !default;
 /// The border radius of the small bubble message
 /// @group chat
 $kendo-chat-bubble-border-radius-sm: var( --kendo-border-radius, 0 ) !default;
@@ -114,13 +114,13 @@ $kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
 
 /// The horizontal padding of the toolbar in the chat.
 /// @group chat
-$kendo-chat-toolbar-padding-x: $kendo-toolbar-padding-x !default;
+$kendo-chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
 /// The vertical padding of the toolbar in the chat.
 /// @group chat
-$kendo-chat-toolbar-padding-y: $kendo-toolbar-padding-y !default;
+$kendo-chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
 /// The spacing of the toolbar in the chat.
 /// @group chat
-$kendo-chat-toolbar-spacing: $kendo-toolbar-spacing !default;
+$kendo-chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
 /// The background of the toolbar in the chat.
 /// @group chat
 $kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
@@ -133,13 +133,13 @@ $kendo-chat-toolbar-border: inherit !default;
 
 /// The horizontal padding of the quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-chat-quick-reply-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// The vertical padding of the quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chat-quick-reply-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// The spacing of the quick reply in the chat.
 /// @group chat
-$kendo-chat-quick-reply-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-chat-quick-reply-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// The line height of the quick reply in the chat.
 /// @group chat
 $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;

package/scss/chat/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/checkbox/_layout.scss

@@ -1,6 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/_variables.scss" as *;
-@use "../core/mixins/_disabled.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-checkbox--layout() {
 
@@ -8,8 +8,8 @@
     .k-checkbox {
         margin: 0;
         padding: 0;
-        width: var( --INTERNAL--kendo-checkbox-width, #{ $kendo-checkbox-width });
-        height: var( --INTERNAL--kendo-checkbox-height, #{ $kendo-checkbox-height });
+        width: var( --INTERNAL--kendo-checkbox-width, 1em );
+        height: var( --INTERNAL--kendo-checkbox-height, 1em );
         line-height: initial;
         border-width: var( --kendo-checkbox-border-width, #{$kendo-checkbox-border-width} );
         border-style: solid;
@@ -23,17 +23,35 @@
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
+
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
+        }
     }
 
 
     // Checkbox indicator
     .k-checkbox::before {
+        @if $kendo-checkbox-indicator-type == "pseudo" {
+            content: "";
+            width: var( --INTERNAL--kendo-checkbox-indicator-size, 1em );
+            height: var( --INTERNAL--kendo-checkbox-indicator-size, 1em );
+            border-width: 0;
+            border-radius: var( --kendo-checkbox-indicator-border-radius );
+            background-color: currentColor;
+            overflow: hidden;
+            transform: scale(0) translate(-50%, -50%);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
         @if $kendo-checkbox-indicator-type == "glyph" {
             content: $kendo-checkbox-checked-glyph;
             width: 1em;
             height: 1em;
-            font-size: var( --INTERNAL-kendo-glyph-size, ( map-get( $kendo-spacing, 4 ) - map-get( $kendo-spacing, thin ) ) );
             font-family: var( --kendo-checkbox-glyph-font-family, #{ $kendo-checkbox-glyph-font-family } );
+            font-size: var( --INTERNAL--kendo-checkbox-glyph-size, 1em );
             line-height: 1;
             transform: translate(-50%, -50%) scale(0);
             overflow: hidden;
@@ -44,11 +62,17 @@
     }
 
 
-    // Checked state
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
+    // Hover state
+    .k-checkbox:hover,
+    .k-checkbox.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+            background-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
+        }
+
+        @if $kendo-checkbox-indicator-type == "pseudo" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "glyph" {
@@ -58,38 +82,80 @@
         }
     }
 
+
+    // Focus state
     .k-checkbox:focus,
     .k-checkbox.k-focus {
-        &::before {
-            content: '';
-            display: block;
-            position: absolute;
-            margin: -4px;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            border: 1px solid #ccc;
+        outline-offset: $kendo-checkbox-focus-outline-offset;
+    }
+
+
+    // Checked state
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+        }
+
+        @if $kendo-checkbox-indicator-type == "pseudo" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+
+        @if $kendo-checkbox-indicator-type == "glyph" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
         }
     }
 
+
     // Indeterminate state
     .k-checkbox:indeterminate,
     .k-checkbox.k-indeterminate {
-        &::after {
-            content: "";
-            width: var( --INTERNAL--kendo-checkbox-indeterminate-width, #{ $kendo-checkbox-indeterminate-width });
-            height: var( --INTERNAL--kendo-checkbox-indeterminate-height, #{ $kendo-checkbox-indeterminate-height });
-            border-width: var( --INTERNAL--kendo-checkbox-indeterminate-border-width, 5px);
-            border-style: solid;
-            border-radius: 2px;
-            box-sizing: border-box;
-            position: absolute;
-            top: var( --INTERNAL--kendo-checkbox-indeterminate-top, #{ $kendo-checkbox-indeterminate-top });
-            left: var( --INTERNAL--kendo-checkbox-indeterminate-left, #{ $kendo-checkbox-indeterminate-left });
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
+            background-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
+        }
+
+        @if $kendo-checkbox-indicator-type == "pseudo" {
+            &::before {
+                width: var( --INTERNAL--kendo-checkbox-indeterminate-size, 1em );
+                height: var( --INTERNAL--kendo-checkbox-indeterminate-size, 1em );
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+
+        @if $kendo-checkbox-indicator-type == "glyph" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+    }
+    .k-checkbox:indeterminate:hover,
+    .k-checkbox.k-indeterminate.k-hover {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
         }
     }
 
+
+    // Disabled state
+    .k-checkbox:checked:disabled,
+    .k-checkbox.k-checked.k-disabled {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
+        }
+    }
+    .k-checkbox:indeterminate:disabled,
+    .k-checkbox.k-indeterminate.k-disabled {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
+        }
+    }
+
+
     // Checkbox wrap
     .k-checkbox-wrap {
         flex: none;
@@ -163,7 +229,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: map-get( $kendo-spacing, 2 );
+        gap: map.get( $kendo-spacing, 2 );
 
         .k-checkbox-label {
             margin: 0;
@@ -181,8 +247,8 @@
     .k-ripple-container {
         .k-checkbox::after {
             content: "";
-            width: var( --INTERNAL-kendo-ripple-size-width, ( map-get( $kendo-spacing, 5 ) * 3 ));
-            height: var( --INTERNAL-kendo-ripple-size-height, ( map-get( $kendo-spacing, 5 ) * 3 ));
+            width: var( --INTERNAL--kendo-ripple-size-width, 300% );
+            height: var( --INTERNAL--kendo-ripple-size-height, 300% );
             display: block;
             position: absolute;
             left: 50%;
@@ -196,8 +262,8 @@
 
         .k-checkbox:focus,
         .k-checkbox.k-focus {
-            outline-style: solid;
-            outline-offset: 5rem;
+            box-shadow: none !important; // sass-lint:disable-line no-important
+            outline: none !important; // sass-lint:disable-line no-important
         }
 
         .k-checkbox:disabled::after,
@@ -209,40 +275,26 @@
 
     // Checkbox size
     @each $size, $size-props in $kendo-checkbox-sizes {
-        $_size: map-get( $size-props, size );
-        $_glyph-size: map-get( $size-props, glyph-size );
-        $_ripple-size: map-get( $size-props, ripple-size );
+        $_size: map.get( $size-props, size );
+        $_glyph-size: map.get( $size-props, glyph-size );
+        $_indicator-size: map.get( $size-props, indicator-size );
+        $_indeterminate-size: map.get( $size-props, indeterminate-size );
+        $_ripple-size: map.get( $size-props, ripple-size );
 
         .k-checkbox-#{$size} {
-            --INTERNAL--kendo-checkbox-width: #{ $_size };
-            --INTERNAL--kendo-checkbox-height: #{ $_size };
-
-            &::before {
-                --INTERNAL-kendo-glyph-size: #{ $_glyph-size };
-            }
+            --INTERNAL--kendo-checkbox-width: #{$_size};
+            --INTERNAL--kendo-checkbox-height: #{$_size};
+            --INTERNAL--kendo-checkbox-glyph-size: #{$_glyph-size};
+            --INTERNAL--kendo-checkbox-indicator-size: #{$_indicator-size};
+            --INTERNAL--kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
         }
+
         .k-ripple-container {
             .k-checkbox-#{size}::after {
-                --INTERNAL-kendo-ripple-size-width: #{ $_ripple-size };
-                --INTERNAL-kendo-ripple-size-height: #{ $_ripple-size };
+                --INTERNAL--kendo-ripple-size-width: #{ $_ripple-size };
+                --INTERNAL--kendo-ripple-size-height: #{ $_ripple-size };
             }
         }
     }
 
-    @each $size, $size-props in $kendo-checkbox-indeterminate-sizes {
-        $_size: map-get( $size-props, size );
-        $_position: map-get( $size-props, position );
-        $_border-width: map-get( $size-props, border-width);
-
-        .k-checkbox-#{$size}:indeterminate,
-        .k-checkbox-#{$size}.k-indeterminate {
-                &::after {
-                    --INTERNAL--kendo-checkbox-indeterminate-width: #{ $size };
-                    --INTERNAL--kendo-checkbox-indeterminate-height: #{ $size };
-                    --INTERNAL--kendo-checkbox-indeterminate-top: #{  $_position };
-                    --INTERNAL--kendo-checkbox-indeterminate-left: #{  $_position };
-                    --INTERNAL--kendo-checkbox-indeterminate-border-width: #{ $_border-width };
-                }
-        }
-    }
 }