@progress/kendo-theme-fluent 6.2.1-dev.0 → 6.2.1-dev.151

package/scss/chip/_variables.scss

@@ -3,82 +3,98 @@
 
 // Chip
 
-/// Width of the border around the button.
+/// The width of the border around the Chip.
 /// @group chip
 $kendo-chip-border-width: 1px !default;
-/// The spacing between the text and the icons of the chip.
+/// The spacing between the text and the icons of the Chip.
 /// @group chip
 $kendo-chip-spacing: map.get( $kendo-spacing, 1 ) !default;
 
-/// The font family of the chip.
+/// The font family of the Chip.
 /// @group chip
 $kendo-chip-font-family: var( --kendo-font-family, inherit ) !default;
 
-/// The chip avatar width.
+/// The width of the Chip' avatar.
 /// @group chip
 $kendo-chip-avatar-width: 1em !default;
-/// The chip avatar height.
+/// The height of the Chip' avatar.
 /// @group chip
 $kendo-chip-avatar-height: 1em !default;
-/// The chip avatar flex basis.
+/// The flex basis of the Chip' avatar.
 /// @group chip
 $kendo-chip-avatar-flex-basis: 1em !default;
-/// The text color of disabled chip.
+/// The text color of the disabled Chip.
 /// @group chip
 $kendo-chip-disabled-text: var( --kendo-disabled-text, inherit ) !default;
-/// The background of solid disabled chip.
+/// The background color of the solid disabled Chip.
 /// @group chip
 $kendo-chip-solid-disabled-bg: var( --kendo-disabled-bg, transparent ) !default;
-/// The border of solid disabled chip.
+/// The border color of the solid disabled Chip.
 /// @group chip
 $kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !default;
-/// The background of outline disabled chip.
+/// The background color of the outline disabled Chip.
 /// @group chip
 $kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
-/// The border of outline disabled chip.
+/// The border color of the outline disabled Chip.
 /// @group chip
 $kendo-chip-outline-disabled-border: get-theme-color-var( neutral-90 ) !default;
 
-/// Offset of the outline focused chip.
+/// The offset of the outline focused Chip.
 /// @group chip
 $kendo-chip-focus-offset: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-/// Outline width of the outline focused button.
+/// The outline width of the outline focused Chip.
 /// @group chip
 $kendo-chip-focus-outline-width: 1px !default;
-/// Outline style of the outline focused button.
+/// The outline style of the outline focused Chip.
 /// @group chip
 $kendo-chip-focus-outline-style: solid !default;
 
-/// Horizontal padding of the chip.
+/// The horizontal padding of the small Chip.
 /// @group chip
 $kendo-chip-sm-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the medium Chip.
+/// @group chip
 $kendo-chip-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the large Chip.
+/// @group chip
 $kendo-chip-lg-padding-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// Vertical padding of the chip.
+/// The vertical padding of the small Chip.
 /// @group chip
 $kendo-chip-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The vertical padding of the medium Chip.
+/// @group chip
 $kendo-chip-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the large Chip.
+/// @group chip
 $kendo-chip-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
-/// Font sizes of the chip.
+/// The font size of the small Chip.
 /// @group chip
 $kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the medium Chip.
+/// @group chip
 $kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the large Chip.
+/// @group chip
 $kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// Line heights of the chip that are connected to the $kendo-font-size.
+/// The small Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The medium Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The large Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-lg-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Calculated height of the chip.
+/// The calculated height of the Chip.
 /// @group chip
 $kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + #{$kendo-chip-sm-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 
-/// Sizes map for the chip.
+/// The map with the sizes of the Chip.
 /// @group chip
 $kendo-chip-sizes: (
     sm: (
@@ -106,7 +122,7 @@ $kendo-chip-brand-colors: ( error, success, info ) !default;
 
 // Matrices with theme colors in the order: bg, color, border, outline
 
-// Color matrix for the base chip
+// The color matrix for the base Chip
 $_tc-base-matrix: (
     solid: (
         normal: (20, 160, 20),
@@ -128,7 +144,7 @@ $_tc-base-matrix: (
     ),
 ) !default;
 
-// Color matrix for error, success, info chips
+// The color matrix for the error, success and info Chips
 $_tc-brand-matrix: (
     solid: (
         normal: (20, 160, 20),
@@ -150,7 +166,7 @@ $_tc-brand-matrix: (
     )
 ) !default;
 
-// Color matrix for warning chips
+// The color matrix for the warning Chips
 $_tc-warning-matrix: (
     solid: (
         normal: (20, get-theme-color-var( grey-160 ), 20),
@@ -172,10 +188,10 @@ $_tc-warning-matrix: (
     )
 ) !default;
 
-/// Theme colors map for the button.
+/// The theme colors map for the Chip.
 $kendo-chip-theme-colors: () !default;
 
-// Map for base theme color
+// Map for the base theme color
 @each $fill-mode, $ui-states in $_tc-base-matrix {
     $kendo-chip-theme-colors: map.deep-merge(
         $kendo-chip-theme-colors,
@@ -183,7 +199,7 @@ $kendo-chip-theme-colors: () !default;
     );
 }
 
-// Map for brand theme colors
+// Map for the brand theme colors
 @each $fill-mode, $ui-states in $_tc-brand-matrix {
     @each $brand-color in $kendo-chip-brand-colors {
         $kendo-chip-theme-colors: map.deep-merge(
@@ -193,7 +209,7 @@ $kendo-chip-theme-colors: () !default;
     }
 }
 
-// Map for warning theme color
+// Map for the warning theme color
 @each $fill-mode, $ui-states in $_tc-warning-matrix {
     $kendo-chip-theme-colors: map.deep-merge(
         $kendo-chip-theme-colors,
@@ -204,7 +220,7 @@ $kendo-chip-theme-colors: () !default;
 
 // Chip List
 
-/// The sizes of the chip list.
+/// The sizes of the Chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
     sm: map.get( $kendo-spacing, 1 ),

package/scss/core/color-system/_variables.scss

@@ -103,27 +103,6 @@ $kendo-theme-colors: (
 ) !default;
 
 
-// Text colors
-@each $theme-color, $color-props in $kendo-theme-colors {
-    // sass-lint:disable-line no-important
-    // sass-lint:disable-line class-name-format
-    $_color: map.get( $color-props, text );
-
-    .k-text-#{$theme-color} {
-        color: var( --kendo-text-#{$theme-color}, #{$_color} );
-    }
-    .\!k-text-#{$theme-color} {
-        color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important;
-    }
-
-    .k-bg-#{$theme-color} {
-        background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
-    }
-    .\!k-bg-#{$theme-color} {
-        background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important;
-    }
-};
-
 @mixin color-system-styles() {
     :root {
         @include css-vars( $kendo-fluent-palettes );
@@ -169,4 +148,27 @@ $kendo-theme-colors: (
         --kendo-invalid-border: #{$kendo-invalid-border};
         --kendo-invalid-shadow: #{$kendo-invalid-shadow};
     }
+
+    // Text colors
+    @each $theme-color, $color-props in $kendo-theme-colors {
+        // sass-lint:disable-line no-important
+        // sass-lint:disable-line class-name-format
+        $_color: map.get( $color-props, text );
+
+        .k-text-#{$theme-color},
+        .k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} );
+        }
+        .\!k-text-#{$theme-color},
+        .\!k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important;
+        }
+
+        .k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
+        }
+        .\!k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important;
+        }
+    };
 }

package/scss/core/module-system/_components.scss

@@ -2,7 +2,6 @@ $components: (
     // Typography and utils
     "typography",
     "utils",
-    "cursor",
     "draggable",
 
     // Generic content

package/scss/datetimepicker/_layout.scss

@@ -49,12 +49,12 @@
         transform: translateX(-100%);
     }
 
-    k-datetimepicker {
+    .k-time-tab .k-datetime-selector {
+        &.k-rtl,
         &[dir="rtl"],
-        .k-rtl & {
-            .k-time-tab .k-datetime-selector {
-                transform: translateX(100%);
-            }
+        .k-rtl &,
+        [dir="rtl"] & {
+            transform: translateX(100%);
         }
     }
 }

package/scss/dropdowntree/_layout.scss

@@ -6,7 +6,9 @@
     .k-dropdown-tree {}
 
     // Dropdowntree popup
-    .k-popup-dropdowntree {
+    .k-popup-dropdowntree, // remove legacy class once updated in components
+    .k-dropdowntree-popup,
+    .k-multiselecttree-popup {
         padding: 0;
 
         .k-check-all {

package/scss/editor/_layout.scss

@@ -21,7 +21,6 @@
         display: flex;
         flex-flow: column nowrap;
         position: relative;
-        z-index: 1;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

package/scss/fab/_layout.scss

@@ -58,6 +58,7 @@
         width: var( --kendo-fab-icon-width, #{$kendo-fab-icon-width} );
         height: var( --kendo-fab-icon-height, #{$kendo-fab-icon-height} );
 
+        .k-icon-wrapper-host:not(:only-child) &,
         &:not(:only-child) {
             margin-inline-end: var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} );
             margin-inline-start: calc( var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} ) * -1 );
@@ -126,7 +127,8 @@
             flex-direction: row;
 
             .k-fab-item-text {
-                margin-inline-end: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+                // Needed for fab item positioning in RTL
+                margin-right: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
             }
         }
 
@@ -134,7 +136,8 @@
             flex-direction: row-reverse;
 
             .k-fab-item-text {
-                margin-inline-start: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+                // Needed for fab item positioning in RTL
+                margin-left: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
             }
         }
     }
@@ -166,4 +169,15 @@
         }
     }
 
+    .k-rtl .k-fab-popup,
+    [dir="rtl"] .k-fab-popup {
+        .k-fab-item.k-text-left {
+            flex-direction: row;
+        }
+
+        .k-fab-item.k-text-right {
+            flex-direction: row-reverse;
+        }
+    }
+
 }

package/scss/grid/_layout.scss

@@ -475,6 +475,15 @@
         cursor: col-resize;
     }
 
+    .k-row-resizer {
+        width: 100%;
+        height: 2px;
+        display: block;
+        position: absolute;
+        inset-block-end: 0;
+        cursor: row-resize;
+    }
+
     .k-grid-footer {
         border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
 

package/scss/grid/_theme.scss

@@ -526,4 +526,16 @@
         border-color: $kendo-grid-border;
     }
 
+    .k-row-resizer {
+        @include fill (
+            $bg: var( --kendo-grid-row-resizer-bg, #{$kendo-grid-row-resizer-bg} ),
+         );
+
+        &.k-active {
+            @include fill (
+                $bg: var( --kendo-grid-row-resizer-active-bg, #{$kendo-grid-row-resizer-active-bg} ),
+             );
+        }
+    }
+
 }

package/scss/grid/_variables.scss

@@ -531,3 +531,10 @@ $kendo-grid-hierarchy-col-width: calc( var( --kendo-icon-size, 1rem ) * 2 ) !def
 /// Spacing of the grid filterable icon.
 /// @group grid
 $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} ) !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-bg: get-theme-color-var( neutral-90 ) !default;
+/// Active background color of the grid row indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: get-theme-color-var( primary-100 ) !default;