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

package/scss/grid/_variables.scss

@@ -38,10 +38,10 @@ $kendo-grid-header-padding-y: $kendo-grid-padding-y !default;
 
 /// Horizontal padding of the grid grouping header.
 /// @group grid
-$kendo-grid-grouping-header-padding-x: $kendo-toolbar-padding-x-md !default;
+$kendo-grid-grouping-header-padding-x: $kendo-toolbar-md-padding-x !default;
 /// Vertical padding of the grid grouping header.
 /// @group grid
-$kendo-grid-grouping-header-padding-y: $kendo-toolbar-padding-y-md !default;
+$kendo-grid-grouping-header-padding-y: $kendo-toolbar-md-padding-y !default;
 
 /// Horizontal padding of the grid cell.
 /// @group grid
@@ -67,81 +67,81 @@ $kendo-grid-edit-cell-padding-y: 5px !default;
 
 /// Size of the grid group drop clue.
 /// @group grid
-$kendo-grid-group-dropclue-size: 6px !default;
+$kendo-grid-group-drop-hint-size: 6px !default;
 /// Line size of the grid group drop clue.
 /// @group grid
-$kendo-grid-group-dropclue-line-size: 1px !default;
+$kendo-grid-group-drop-hint-line-size: 1px !default;
 /// Dot size of the grid group drop clue.
 /// @group grid
-$kendo-grid-group-dropclue-dot-size: $kendo-grid-group-dropclue-size !default;
+$kendo-grid-group-drop-hint-dot-size: $kendo-grid-group-drop-hint-size !default;
 /// Height of the grid  group drop clue.
 /// @group grid
-$kendo-grid-group-dropclue-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-dropclue-size} ) !default;
+$kendo-grid-group-drop-hint-height: calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} ) !default;
 /// Top offset of the grid group drop clue.
 /// @group grid
-$kendo-grid-group-dropclue-top: 2px !default;
-
-
-$kendo-grid-padding-x-sm: map.get( $kendo-spacing, 3 ) !default;
-$kendo-grid-padding-y-sm: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-grid-header-padding-x-sm: $kendo-grid-padding-x-sm !default;
-$kendo-grid-header-padding-y-sm: $kendo-grid-padding-y-sm !default;
-$kendo-grid-grouping-header-padding-x-sm: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-grid-grouping-header-padding-y-sm: $kendo-grid-grouping-header-padding-x-sm !default;
-$kendo-grid-cell-padding-x-sm: $kendo-grid-padding-x-sm !default;
-$kendo-grid-cell-padding-y-sm: $kendo-grid-padding-y-sm !default;
-$kendo-grid-filter-cell-padding-x-sm: $kendo-grid-padding-x-sm !default;
-$kendo-grid-filter-cell-padding-y-sm: map.get( $kendo-spacing, 2 ) !default;
-$kendo-grid-edit-cell-padding-x-sm: $kendo-grid-padding-x-sm !default;
-$kendo-grid-edit-cell-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-grid-group-dropclue-height-sm: calc( #{$kendo-chip-calc-size-sm} + #{$kendo-grid-group-dropclue-size}) !default;
-
-$kendo-grid-padding-x-md: $kendo-grid-padding-x !default;
-$kendo-grid-padding-y-md: $kendo-grid-padding-y !default;
-$kendo-grid-header-padding-x-md: $kendo-grid-header-padding-x !default;
-$kendo-grid-header-padding-y-md: $kendo-grid-header-padding-y !default;
-$kendo-grid-grouping-header-padding-x-md: $kendo-grid-grouping-header-padding-x !default;
-$kendo-grid-grouping-header-padding-y-md: $kendo-grid-grouping-header-padding-y !default;
-$kendo-grid-cell-padding-x-md: $kendo-grid-cell-padding-x !default;
-$kendo-grid-cell-padding-y-md: $kendo-grid-cell-padding-y !default;
-$kendo-grid-filter-cell-padding-x-md: $kendo-grid-filter-cell-padding-x !default;
-$kendo-grid-filter-cell-padding-y-md: $kendo-grid-filter-cell-padding-y !default;
-$kendo-grid-edit-cell-padding-x-md: $kendo-grid-edit-cell-padding-x !default;
-$kendo-grid-edit-cell-padding-y-md: $kendo-grid-edit-cell-padding-y !default;
-$kendo-grid-group-dropclue-height-md: $kendo-grid-group-dropclue-height !default;
+$kendo-grid-group-drop-hint-top: 2px !default;
+
+
+$kendo-grid-sm-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-grid-sm-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-grid-sm-header-padding-x: $kendo-grid-sm-padding-x !default;
+$kendo-grid-sm-header-padding-y: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-grouping-header-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-x !default;
+$kendo-grid-sm-cell-padding-x: $kendo-grid-sm-padding-x !default;
+$kendo-grid-sm-cell-padding-y: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-filter-cell-padding-x: $kendo-grid-sm-padding-x !default;
+$kendo-grid-sm-filter-cell-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-padding-x !default;
+$kendo-grid-sm-edit-cell-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
+
+$kendo-grid-md-padding-x: $kendo-grid-padding-x !default;
+$kendo-grid-md-padding-y: $kendo-grid-padding-y !default;
+$kendo-grid-md-header-padding-x: $kendo-grid-header-padding-x !default;
+$kendo-grid-md-header-padding-y: $kendo-grid-header-padding-y !default;
+$kendo-grid-md-grouping-header-padding-x: $kendo-grid-grouping-header-padding-x !default;
+$kendo-grid-md-grouping-header-padding-y: $kendo-grid-grouping-header-padding-y !default;
+$kendo-grid-md-cell-padding-x: $kendo-grid-cell-padding-x !default;
+$kendo-grid-md-cell-padding-y: $kendo-grid-cell-padding-y !default;
+$kendo-grid-md-filter-cell-padding-x: $kendo-grid-filter-cell-padding-x !default;
+$kendo-grid-md-filter-cell-padding-y: $kendo-grid-filter-cell-padding-y !default;
+$kendo-grid-md-edit-cell-padding-x: $kendo-grid-edit-cell-padding-x !default;
+$kendo-grid-md-edit-cell-padding-y: $kendo-grid-edit-cell-padding-y !default;
+$kendo-grid-md-group-dropclue-height: $kendo-grid-group-drop-hint-height !default;
 
 
 // Kendo Grid sizes
 $kendo-grid-sizes: (
     sm: (
-        header-padding-x: $kendo-grid-header-padding-x-sm,
-        header-padding-y: $kendo-grid-header-padding-y-sm,
-        grouping-header-padding-x: $kendo-grid-grouping-header-padding-x-sm,
-        grouping-header-padding-y: $kendo-grid-grouping-header-padding-y-sm,
-        cell-padding-x: $kendo-grid-cell-padding-x-sm,
-        cell-padding-y: $kendo-grid-cell-padding-y-sm,
-        filter-cell-padding-x: $kendo-grid-filter-cell-padding-x-sm,
-        filter-cell-padding-y: $kendo-grid-filter-cell-padding-y-sm,
-        edit-cell-padding-x: $kendo-grid-edit-cell-padding-x-sm,
-        edit-cell-padding-y: $kendo-grid-edit-cell-padding-y-sm,
-        button-padding-y: $kendo-button-padding-y-sm,
-        button-calc-size: $kendo-button-calc-size-sm,
-        group-dropclue-height: $kendo-grid-group-dropclue-height-sm
+        header-padding-x: $kendo-grid-sm-header-padding-x,
+        header-padding-y: $kendo-grid-sm-header-padding-y,
+        grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
+        grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
+        cell-padding-x: $kendo-grid-sm-cell-padding-x,
+        cell-padding-y: $kendo-grid-sm-cell-padding-y,
+        filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
+        filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
+        edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
+        edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
+        button-padding-y: $kendo-button-sm-padding-y,
+        button-calc-size: $kendo-button-sm-calc-size,
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
     ),
     md: (
-        header-padding-x: $kendo-grid-header-padding-x-md,
-        header-padding-y: $kendo-grid-header-padding-y-md,
-        grouping-header-padding-x: $kendo-grid-grouping-header-padding-x-md,
-        grouping-header-padding-y: $kendo-grid-grouping-header-padding-y-md,
-        cell-padding-x: $kendo-grid-cell-padding-x-md,
-        cell-padding-y: $kendo-grid-cell-padding-y-md,
-        filter-cell-padding-x: $kendo-grid-filter-cell-padding-x-md,
-        filter-cell-padding-y: $kendo-grid-filter-cell-padding-y-md,
-        edit-cell-padding-x: $kendo-grid-edit-cell-padding-x-md,
-        edit-cell-padding-y: $kendo-grid-edit-cell-padding-y-md,
-        button-padding-y: $kendo-button-padding-y-md,
-        button-calc-size: $kendo-button-calc-size-md,
-        group-dropclue-height: $kendo-grid-group-dropclue-height-sm
+        header-padding-x: $kendo-grid-md-header-padding-x,
+        header-padding-y: $kendo-grid-md-header-padding-y,
+        grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
+        grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
+        cell-padding-x: $kendo-grid-md-cell-padding-x,
+        cell-padding-y: $kendo-grid-md-cell-padding-y,
+        filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
+        filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
+        edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
+        edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
+        button-padding-y: $kendo-button-md-padding-y,
+        button-calc-size: $kendo-button-md-calc-size,
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height
     ),
 ) !default;
 
@@ -272,13 +272,13 @@ $kendo-grid-filter-cell-padding-y: $kendo-grid-filter-cell-padding-x !default;
 
 /// Horizontal padding of the grid toolbar.
 /// @group grid
-$kendo-grid-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
+$kendo-grid-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
 /// Vertical padding of the grid toolbar.
 /// @group grid
-$kendo-grid-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
+$kendo-grid-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 /// Spacing of the grid toolbar.
 /// @group grid
-$kendo-grid-toolbar-spacing: $kendo-toolbar-spacing-md !default;
+$kendo-grid-toolbar-spacing: $kendo-toolbar-md-spacing !default;
 /// Border width of the grid toolbar.
 /// @group grid
 $kendo-grid-toolbar-border-width: $kendo-grid-border-width !default;
@@ -307,7 +307,7 @@ $kendo-grid-sort-index-spacing-y: calc( var( --kendo-icon-spacing, .5rem ) / 4 )
 $kendo-grid-sort-index-spacing-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 /// Spacing of the grid sort icon.
 /// @group grid
-$kendo-grid-sort-icon-spacing: var( --kendo-icon-spacing-lg, .5rem ) !default;
+$kendo-grid-sort-icon-spacing: var( --kendo-icon-lg-spacing, .5rem ) !default;
 /// Text color of the grid sort indicator.
 /// @group grid
 $kendo-grid-sort-indicator-text: get-theme-color-var( neutral-130 ) !default;
@@ -327,10 +327,10 @@ $kendo-grid-command-cell-button-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Horizontal padding of the grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-padding-x: $kendo-button-padding-x-md !default;
+$kendo-grid-group-indicator-padding-x: $kendo-button-md-padding-x !default;
 /// Vertical padding of the grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-padding-y: $kendo-button-padding-y-md !default;
+$kendo-grid-group-indicator-padding-y: $kendo-button-md-padding-y !default;
 /// Border width of the grid group indicator.
 /// @group grid
 $kendo-grid-group-indicator-border-width: $kendo-button-border-width !default;
@@ -362,7 +362,7 @@ $kendo-grid-group-footer-border-width-x: 0px !default;
 
 /// Text color of the grid group drop clue.
 /// @group grid
-$kendo-grid-group-dropclue-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-grid-group-drop-hint-bg: get-theme-color-var( primary-100 ) !default;
 
 /// Border width of the grid sticky cell.
 /// @group grid
@@ -438,10 +438,10 @@ $kendo-grid-column-menu-border: var( --kendo-component-border, inherit ) !defaul
 
 /// Font size of the grid column menu checkbox container.
 /// @group grid
-$kendo-grid-column-menu-multicheck-font-size: $kendo-list-font-size-md !default;
+$kendo-grid-column-menu-multicheck-font-size: $kendo-list-md-font-size !default;
 /// Line height of the grid column menu checkbox container.
 /// @group grid
-$kendo-grid-column-menu-multicheck-line-height: $kendo-list-line-height-md !default;
+$kendo-grid-column-menu-multicheck-line-height: $kendo-list-md-line-height !default;
 
 /// Vertical padding of the grid column menu items wrap.
 /// @group grid
@@ -452,13 +452,13 @@ $kendo-grid-column-menu-items-wrap-padding-x: map.get( $kendo-spacing, 2 ) !defa
 
 /// Horizontal padding of the grid column menu item.
 /// @group grid
-$kendo-grid-column-menu-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-grid-column-menu-item-padding-y: $kendo-list-md-item-padding-y !default;
 /// Vertical padding of the grid column menu item.
 /// @group grid
-$kendo-grid-column-menu-item-padding-x: $kendo-list-item-padding-x-md !default;
+$kendo-grid-column-menu-item-padding-x: $kendo-list-md-item-padding-x !default;
 /// Spacing of the grid column menu item.
 /// @group grid
-$kendo-grid-column-menu-item-gap: $kendo-list-item-padding-x-md !default;
+$kendo-grid-column-menu-item-gap: $kendo-list-md-item-padding-x !default;
 /// Icon spacing of the grid column menu item.
 /// @group grid
 $kendo-grid-column-menu-item-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;

package/scss/imageeditor/_layout.scss

@@ -1,21 +1,21 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-imageeditor--layout() {
+@mixin kendo-image-editor--layout() {
 
     // Image Editor
     .k-imageeditor {
-        margin-inline: var( --kendo-imageeditor-margin-x, #{$kendo-imageeditor-margin-x} );
-        margin-block: var( --kendo-imageeditor-margin-y, #{$kendo-imageeditor-margin-y} );
-        padding-inline: var( --kendo-imageeditor-padding-x, #{$kendo-imageeditor-padding-x} );
-        padding-block: var( --kendo-imageeditor-padding-y, #{$kendo-imageeditor-padding-y} );
-        border-width: var( --kendo-imageeditor-border-width, #{$kendo-imageeditor-border-width} );
+        margin-inline: var( --kendo-image-editor-margin-x, #{$kendo-image-editor-margin-x} );
+        margin-block: var( --kendo-image-editor-margin-y, #{$kendo-image-editor-margin-y} );
+        padding-inline: var( --kendo-image-editor-padding-x, #{$kendo-image-editor-padding-x} );
+        padding-block: var( --kendo-image-editor-padding-y, #{$kendo-image-editor-padding-y} );
+        border-width: var( --kendo-image-editor-border-width, #{$kendo-image-editor-border-width} );
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: var( --kendo-imageeditor-font-family, #{$kendo-imageeditor-font-family} );
-        font-size: var( --kendo-imageeditor-font-size, #{$kendo-imageeditor-font-size} );
-        line-height: var( --kendo-imageeditor-line-height, #{$kendo-imageeditor-line-height} );
+        font-family: var( --kendo-image-editor-font-family, #{$kendo-image-editor-font-family} );
+        font-size: var( --kendo-image-editor-font-size, #{$kendo-image-editor-font-size} );
+        line-height: var( --kendo-image-editor-line-height, #{$kendo-image-editor-line-height} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -60,11 +60,11 @@
 
     // Action Pane
     .k-imageeditor-action-pane {
-        padding-inline: var( --kendo-imageeditor-action-pane-padding-x, #{$kendo-imageeditor-action-pane-padding-x} );
-        padding-block: var( --kendo-imageeditor-action-pane-padding-y, #{$kendo-imageeditor-action-pane-padding-y} );
-        width: var( --kendo-imageeditor-action-pane-width, #{$kendo-imageeditor-action-pane-width} );
+        padding-inline: var( --kendo-image-editor-action-pane-padding-x, #{$kendo-image-editor-action-pane-padding-x} );
+        padding-block: var( --kendo-image-editor-action-pane-padding-y, #{$kendo-image-editor-action-pane-padding-y} );
+        width: var( --kendo-image-editor-action-pane-width, #{$kendo-image-editor-action-pane-width} );
         border-width: 0;
-        border-left-width: var( --kendo-imageeditor-content-border-width, #{$kendo-imageeditor-content-border-width} );
+        border-left-width: var( --kendo-image-editor-content-border-width, #{$kendo-image-editor-content-border-width} );
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -90,38 +90,38 @@
     .k-imageeditor-crop {
         width: 100%;
         height: 100%;
-        border-width: var( --kendo-imageeditor-crop-border-width, #{$kendo-imageeditor-crop-border-width} );
-        border-style: var( --kendo-imageeditor-crop-border-style, #{$kendo-imageeditor-crop-border-style} );
+        border-width: var( --kendo-image-editor-crop-border-width, #{$kendo-image-editor-crop-border-width} );
+        border-style: var( --kendo-image-editor-crop-border-style, #{$kendo-image-editor-crop-border-style} );
         box-sizing: border-box;
         position: absolute;
 
         .k-resize-handle {
-            margin-inline: var( --kendo-imageeditor-resize-handle-margin-x, #{$kendo-imageeditor-resize-handle-margin-x} );
-            margin-block: var( --kendo-imageeditor-resize-handle-margin-y, #{$kendo-imageeditor-resize-handle-margin-y} );
+            margin-inline: var( --kendo-image-editor-resize-handle-margin-x, #{$kendo-image-editor-resize-handle-margin-x} );
+            margin-block: var( --kendo-image-editor-resize-handle-margin-y, #{$kendo-image-editor-resize-handle-margin-y} );
             border-style: solid;
-            border-width: var( --kendo-imageeditor-resize-handle-border-width, #{$kendo-imageeditor-resize-handle-border-width} );
+            border-width: var( --kendo-image-editor-resize-handle-border-width, #{$kendo-image-editor-resize-handle-border-width} );
         }
 
         .k-resize-sw,
         .k-resize-se,
         .k-resize-nw,
         .k-resize-ne {
-            width: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
-            height: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+            width: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
+            height: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
         }
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - var( --kendo-imageeditor-resize-left-offset, #{$kendo-imageeditor-resize-left-offset} ) );
-            width: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+            left: calc( 50% - var( --kendo-image-editor-resize-left-offset, #{$kendo-image-editor-resize-left-offset} ) );
+            width: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - var( --kendo-imageeditor-resize-top-offset, #{$kendo-imageeditor-resize-top-offset} ) );
+            top: calc( 50% - var( --kendo-image-editor-resize-top-offset, #{$kendo-image-editor-resize-top-offset} ) );
             width: 0;
-            height: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+            height: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
         }
 
         .k-resize-ne {

package/scss/imageeditor/_theme.scss

@@ -1,48 +1,48 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-imageeditor--theme() {
+@mixin kendo-image-editor--theme() {
 
     // Image Editor
     .k-imageeditor {
         @include fill(
-            var( --kendo-imageeditor-text, #{$kendo-imageeditor-text} ),
-            var( --kendo-imageeditor-bg, #{$kendo-imageeditor-bg} ),
-            var( --kendo-imageeditor-border, #{$kendo-imageeditor-border} )
+            var( --kendo-image-editor-text, #{$kendo-image-editor-text} ),
+            var( --kendo-image-editor-bg, #{$kendo-image-editor-bg} ),
+            var( --kendo-image-editor-border, #{$kendo-image-editor-border} )
         );
     }
 
     // Content
     .k-imageeditor-content {
         @include fill(
-            var( --kendo-imageeditor-content-text, #{$kendo-imageeditor-content-text} ),
-            var( --kendo-imageeditor-content-bg, #{$kendo-imageeditor-content-bg} ),
-            var( --kendo-imageeditor-content-border, #{$kendo-imageeditor-content-border} )
+            var( --kendo-image-editor-content-text, #{$kendo-image-editor-content-text} ),
+            var( --kendo-image-editor-content-bg, #{$kendo-image-editor-content-bg} ),
+            var( --kendo-image-editor-content-border, #{$kendo-image-editor-content-border} )
         );
     }
 
     // Action Pane
     .k-imageeditor-action-pane {
         @include fill(
-            var( --kendo-imageeditor-action-pane-text, #{$kendo-imageeditor-action-pane-text} ),
-            var( --kendo-imageeditor-action-pane-bg, #{$kendo-imageeditor-action-pane-bg} ),
-            var( --kendo-imageeditor-action-pane-border, #{$kendo-imageeditor-action-pane-border} )
+            var( --kendo-image-editor-action-pane-text, #{$kendo-image-editor-action-pane-text} ),
+            var( --kendo-image-editor-action-pane-bg, #{$kendo-image-editor-action-pane-bg} ),
+            var( --kendo-image-editor-action-pane-border, #{$kendo-image-editor-action-pane-border} )
         );
     }
 
     // Crop Tool
     .k-imageeditor-crop {
         @include fill(
-            var( --kendo-imageeditor-crop-text, #{$kendo-imageeditor-crop-text} ),
-            var( --kendo-imageeditor-crop-bg, #{$kendo-imageeditor-crop-bg} ),
-            var( --kendo-imageeditor-crop-border, #{$kendo-imageeditor-crop-border} )
+            var( --kendo-image-editor-crop-text, #{$kendo-image-editor-crop-text} ),
+            var( --kendo-image-editor-crop-bg, #{$kendo-image-editor-crop-bg} ),
+            var( --kendo-image-editor-crop-border, #{$kendo-image-editor-crop-border} )
         );
     }
 
     // Crop Overlay
     .k-imageeditor-crop-overlay {
         @include fill (
-            $bg: var( --kendo-imageeditor-crop-overlay-bg, #{$kendo-imageeditor-crop-overlay-bg} )
+            $bg: var( --kendo-image-editor-crop-overlay-bg, #{$kendo-image-editor-crop-overlay-bg} )
         );
     }
 

package/scss/imageeditor/_variables.scss

@@ -4,106 +4,106 @@
 
 /// Background color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-image-editor-bg: var( --kendo-component-bg, inherit ) !default;
 /// Text color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-text: var( --kendo-component-text, inherit ) !default;
+$kendo-image-editor-text: var( --kendo-component-text, inherit ) !default;
 /// Border color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-image-editor-border: get-theme-color-var( neutral-30 ) !default;
 
 /// Vertical margin of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-margin-y: 0 !default;
+$kendo-image-editor-margin-y: 0 !default;
 /// Horizontal margin of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-margin-x: 0 !default;
+$kendo-image-editor-margin-x: 0 !default;
 /// Vertical padding of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-padding-y: 0 !default;
+$kendo-image-editor-padding-y: 0 !default;
 /// Horizontal padding of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-padding-x: 0 !default;
+$kendo-image-editor-padding-x: 0 !default;
 
 /// Border width of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-border-width: 1px !default;
+$kendo-image-editor-border-width: 1px !default;
 /// Font size of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-image-editor-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-image-editor-line-height: var( --kendo-line-height, inherit ) !default;
 /// Font family of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// Imageeditor content background color.
 /// @group imageeditor
-$kendo-imageeditor-content-bg: get-theme-color-var( neutral-50 ) !default;
+$kendo-image-editor-content-bg: get-theme-color-var( neutral-50 ) !default;
 /// Imageeditor content text color.
 /// @group imageeditor
-$kendo-imageeditor-content-text: inherit !default;
+$kendo-image-editor-content-text: inherit !default;
 /// Imageeditor content border color.
 /// @group imageeditor
-$kendo-imageeditor-content-border: inherit !default;
+$kendo-image-editor-content-border: inherit !default;
 /// Imageeditor content border width.
 /// @group imageeditor
-$kendo-imageeditor-content-border-width: 0 !default;
+$kendo-image-editor-content-border-width: 0 !default;
 
 /// Imageeditor action pane background color.
 /// @group imageeditor
-$kendo-imageeditor-action-pane-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-image-editor-action-pane-bg: var( --kendo-component-bg, inherit ) !default;
 /// Imageeditor action pane text color.
 /// @group imageeditor
-$kendo-imageeditor-action-pane-text: inherit !default;
+$kendo-image-editor-action-pane-text: inherit !default;
 /// Imageeditor action pane border.
 /// @group imageeditor
-$kendo-imageeditor-action-pane-border: inherit !default;
+$kendo-image-editor-action-pane-border: inherit !default;
 /// Imageeditor action pane vertical padding.
 /// @group imageeditor
-$kendo-imageeditor-action-pane-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-image-editor-action-pane-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Imageeditor action pane horizontal padding.
 /// @group imageeditor
-$kendo-imageeditor-action-pane-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-image-editor-action-pane-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Imageeditor action pane width.
 /// @group imageeditor
-$kendo-imageeditor-action-pane-width: if( $kendo-imageeditor-content-border-width == 0, 240px, calc( 240px + #{$kendo-imageeditor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 /// Crop background color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-crop-bg: inherit !default;
+$kendo-image-editor-crop-bg: inherit !default;
 /// Crop text color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-crop-text: inherit !default;
+$kendo-image-editor-crop-text: inherit !default;
 /// Crop border color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-crop-border: $kendo-color-white !default;
+$kendo-image-editor-crop-border: $kendo-color-white !default;
 /// Crop overlay background color of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-crop-overlay-bg: rgba( $kendo-color-black, .3 ) !default;
+$kendo-image-editor-crop-overlay-bg: rgba( $kendo-color-black, .3 ) !default;
 /// Crop border width of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-crop-border-width: 1px !default;
+$kendo-image-editor-crop-border-width: 1px !default;
 /// Crop border style of the imageeditor.
 /// @group imageeditor
-$kendo-imageeditor-crop-border-style: dashed !default;
+$kendo-image-editor-crop-border-style: dashed !default;
 
 /// Imageeditor resize handle horizontal margin.
 /// @group imageeditor
-$kendo-imageeditor-resize-handle-margin-x: 1px !default;
+$kendo-image-editor-resize-handle-margin-x: 1px !default;
 /// Imageeditor resize handle vertical margin.
 /// @group imageeditor
-$kendo-imageeditor-resize-handle-margin-y: 1px !default;
+$kendo-image-editor-resize-handle-margin-y: 1px !default;
 /// Imageeditor resize handle border width.
 /// @group imageeditor
-$kendo-imageeditor-resize-handle-border-width: 0 2px 2px 0 !default;
+$kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 /// Imageeditor resize handle size.
 /// @group imageeditor
-$kendo-imageeditor-resize-handle-size: map.get( $kendo-spacing, 4 ) !default;
+$kendo-image-editor-resize-handle-size: map.get( $kendo-spacing, 4 ) !default;
 /// Imageeditor resize handle top offset.
 /// @group imageeditor
-$kendo-imageeditor-resize-top-offset: math.div( $kendo-imageeditor-resize-handle-size, 2 ) !default;
+$kendo-image-editor-resize-top-offset: math.div( $kendo-image-editor-resize-handle-size, 2 ) !default;
 /// Imageeditor resize handle left offset.
 /// @group imageeditor
-$kendo-imageeditor-resize-left-offset: math.div( $kendo-imageeditor-resize-handle-size, 2 ) !default;
+$kendo-image-editor-resize-left-offset: math.div( $kendo-image-editor-resize-handle-size, 2 ) !default;

package/scss/imageeditor/index.scss

@@ -22,7 +22,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin imageeditor-styles() {
     @include module.render( "imageeditor" ) {
-        @include kendo-imageeditor--layout();
-        @include kendo-imageeditor--theme();
+        @include kendo-image-editor--layout();
+        @include kendo-image-editor--theme();
     }
 }

package/scss/input/_layout.scss

@@ -17,7 +17,7 @@
         outline: 0;
         font-family: var( --kendo-input-font-family, #{$kendo-input-font-family} );
         font-size: var( --INTERNAL--kendo-input-font-size, inherit );
-        line-height: var( --INTERNAL--kendo-input-line-height, #{$kendo-line-height} );
+        line-height: var( --INTERNAL--kendo-input-line-height, #{$kendo-line-height-md} );
         font-weight: var( --kendo-input-font-weight, #{$kendo-input-font-weight} );
         text-align: start;
         box-shadow: none;
@@ -117,8 +117,8 @@
 
     // Input inner
     .k-input-inner {
-        padding-inline: var( --INTERNAL--kendo-input-padding-x, #{$kendo-input-padding-x-md} );
-        padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-padding-y-md} );
+        padding-inline: var( --INTERNAL--kendo-input-padding-x, #{$kendo-input-md-padding-x} );
+        padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         width: 100%;
         border: 0;
         outline: 0;