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

package/scss/gridlayout/_layout.scss

@@ -1,9 +1,4 @@
-@mixin kendo-grid-layout--layout-base() {
-
-    // GridLayout
-    .k-grid-layout {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/gridlayout/_layout.scss" as *;
 
 @mixin kendo-grid-layout--layout() {
     @include kendo-grid-layout--layout-base();

package/scss/gridlayout/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-grid-layout--theme-base() {
-
-    // GridLayout
-    .k-grid-layout {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/gridlayout/_theme.scss" as *;
 
 @mixin kendo-grid-layout--theme() {
     @include kendo-grid-layout--theme-base();

package/scss/icons/_layout.scss

@@ -1,40 +1,11 @@
 @use "./_variables.scss" as *;
 
-@use "@progress/kendo-svg-icons/scss/index.scss" with (
-    $ki-icon-size: var( --kendo-icon-size, 1rem )
-);
+@use "@progress/kendo-theme-core/scss/components/icons/_layout.scss" as *;
 
 @mixin kendo-icon--layout() {
+    @include kendo-icon--layout-base();
 
-    @include index.kendo-svg-icon-styles();
-
-    // kendo-icon-wrapper component
-    .k-icon-wrapper-host {
-        display: contents;
-    }
-
-    .k-icon-with-modifier {
-        position: relative;
-        margin: .25em;
-    }
-
-    .k-icon.k-icon-modifier {
-        width: 1em;
-        height: 1em;
-        position: absolute;
-        font-size: .5em;
-        bottom: 0;
-        right: 0;
-        margin: 0 -.5em -.5em 0;
-    }
-
-    .k-icon-action {
-        display: inline-flex;
-        padding: var( --kendo-icon-padding, .25rem );
-        line-height: 1;
-        align-items: center;
-        vertical-align: middle;
-        cursor: pointer;
+    .k-icon-wrap {
+        display: block;
     }
-
 }

package/scss/icons/_theme.scss

@@ -1 +1,7 @@
-@mixin kendo-icon--theme() {}
+@use "@progress/kendo-theme-core/scss/components/icons/_theme.scss" as *;
+
+
+@mixin kendo-icon--theme() {
+    @include kendo-icon--theme-base();
+}
+

package/scss/icons/_variables.scss

@@ -1,26 +1,52 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
-/// Font sizes of the icons.
+/// The default size of the Icons.
 /// @group icon
 $kendo-icon-size: 1rem !default;
-
+/// The size of the extra small Icons.
+/// @group icon
 $kendo-icon-size-xs: calc( var( --kendo-icon-size, 1rem ) * .75 ) !default;
-$kendo-icon-size-sm: calc( var( --kendo-icon-size, 1rem ) * .875 ) !default;
-$kendo-icon-size-md: var( --kendo-icon-size, 1rem ) !default;
-$kendo-icon-size-lg: calc( var( --kendo-icon-size, 1rem ) * 1.25 ) !default;
+/// The size of the small Icons.
+/// @group icon
+$kendo-icon-size-sm: calc( var( --kendo-icon-size-sm, 1rem ) * .875 ) !default;
+/// The size of the medium Icons.
+/// @group icon
+$kendo-icon-size-md: 1rem !default;
+/// The size of the large Icons.
+/// @group icon
+$kendo-icon-size-lg: calc( var( --kendo-icon-size-lg, 1rem ) * 1.25 ) !default;
+/// The size of the extra large Icons.
+/// @group icon
 $kendo-icon-size-xl: calc( var( --kendo-icon-size, 1rem ) * 1.5 ) !default;
-$kendo-icon-size-xxl: calc( var( --kendo-icon-size, 1rem ) * 2 ) !default;
-$kendo-icon-size-xxxl: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
+/// The size of the double extra large Icons.
+/// @group icon
+$kendo-icon-size-xxl: calc( var( --kendo-icon-size-xxl, 1rem ) * 2 ) !default;
+/// The size of the triple extra large Icons.
+/// @group icon
+$kendo-icon-size-xxxl: calc( var( --kendo-icon-size-xxxl, 1rem ) * 3 ) !default;
 
-/// Spacing around the icons.
+/// The spacing around the Icons.
 /// @group icon
 $kendo-icon-spacing: k-spacing(2) !default;
 
-/// Padding of the action icons container.
+/// The padding of the action Icons container.
 /// @group icon
 $kendo-icon-padding: k-spacing(1) !default;
 
+@forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
+    $kendo-icon-size: $kendo-icon-size,
+    $kendo-icon-size-xs: $kendo-icon-size-xs,
+    $kendo-icon-size-sm: $kendo-icon-size-sm,
+    $kendo-icon-size-md: $kendo-icon-size-md,
+    $kendo-icon-size-lg: $kendo-icon-size-lg,
+    $kendo-icon-size-xl: $kendo-icon-size-xl,
+    $kendo-icon-size-xxl: $kendo-icon-size-xxl,
+    $kendo-icon-size-xxxl: $kendo-icon-size-xxxl,
+    $kendo-icon-spacing: $kendo-icon-spacing,
+    $kendo-icon-padding: $kendo-icon-padding
+);
+
 :root {
     --kendo-icon-size: var( --kendo-icon-size, 1rem );
     --kendo-icon-size-xs: #{$kendo-icon-size-xs};

package/scss/imageeditor/_layout.scss

@@ -1,161 +1,11 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/imageeditor/_layout.scss" as *;
 
 @mixin kendo-image-editor--layout() {
+    @include kendo-image-editor--layout-base();
 
-    // Image Editor
-    .k-imageeditor {
-        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-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;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Image editor toolbar
     .k-imageeditor-toolbar {
         border-width: 0;
     }
-
-
-    // Content
-    .k-imageeditor-content {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: flex;
-        flex-flow: row nowrap;
-    }
-
-
-    // Canvas
-    .k-imageeditor-canvas-container {
-        flex: 1 1 100%;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: auto;
-    }
-    .k-imageeditor-canvas {
-        margin: auto;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-    }
-
-
-    // Action Pane
-    .k-imageeditor-action-pane {
-        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-image-editor-content-border-width, #{$kendo-image-editor-content-border-width} );
-        border-style: solid;
-        border-color: inherit;
-        box-sizing: border-box;
-        flex: none;
-        overflow-y: auto;
-
-        .k-input-inner,
-        .k-input-value-text {
-            text-overflow: clip;
-        }
-    }
-
-
-    // Crop Tool
-    .k-imageeditor-crop-overlay {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .k-imageeditor-crop {
-        width: 100%;
-        height: 100%;
-        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-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-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-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 {
-            --kendo-image-editor-resize-left-offset: #{$kendo-image-editor-resize-left-offset};
-
-            left: calc( 50% - var( --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 {
-            --kendo-image-editor-resize-top-offset: #{$kendo-image-editor-resize-top-offset};
-
-            top: calc( 50% - var( --kendo-image-editor-resize-top-offset ) );
-            width: 0;
-            height: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
-        }
-
-        .k-resize-ne {
-            transform: rotate(-90deg);
-        }
-
-        .k-resize-nw {
-            transform: rotate(-180deg);
-        }
-
-
-        .k-resize-sw {
-            transform: rotate(90deg);
-        }
-
-        .k-resize-n {
-            top: 0;
-        }
-
-        .k-resize-s {
-            bottom: 0;
-        }
-
-        .k-resize-w {
-            left: 0;
-        }
-
-        .k-resize-e {
-            right: 0;
-        }
-    }
-
 }

package/scss/imageeditor/_theme.scss

@@ -1,49 +1,12 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/imageeditor/_theme.scss" as *;
 
 @mixin kendo-image-editor--theme() {
+    @include kendo-image-editor--theme-base();
 
-    // Image Editor
-    .k-imageeditor {
-        @include fill(
-            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} )
-        );
+    .k-imageeditor-canvas {
+        background: none;
+        transform: none;
     }
-
-    // Content
-    .k-imageeditor-content {
-        @include fill(
-            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-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-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-image-editor-crop-overlay-bg, #{$kendo-image-editor-crop-overlay-bg} )
-        );
-    }
-
 }

package/scss/imageeditor/_variables.scss

@@ -4,105 +4,139 @@
 
 /// Background color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-bg: k-color(surface-alt) !default;
+$kendo-image-editor-bg: var( --kendo-image-editor-bg, #{k-color(surface-alt)} ) !default;
 /// Text color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-text: k-color(on-app-surface) !default;
+$kendo-image-editor-text: var( --kendo-image-editor-text, #{k-color(on-app-surface)} ) !default;
 /// Border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-image-editor-border: var( --kendo-image-editor-border, color-mix(in srgb, #{k-color(border)} 16%, transparent) ) !default;
 /// Vertical margin of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-margin-y: k-spacing(0) !default;
+$kendo-image-editor-margin-y: var( --kendo-image-editor-margin-y, #{k-spacing(0)} ) !default;
 /// Horizontal margin of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-margin-x: k-spacing(0) !default;
+$kendo-image-editor-margin-x: var( --kendo-image-editor-margin-x, #{k-spacing(0)} ) !default;
 /// Vertical padding of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-padding-y: k-spacing(0) !default;
+$kendo-image-editor-padding-y: var( --kendo-image-editor-padding-y, #{k-spacing(0)} ) !default;
 /// Horizontal padding of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-padding-x: k-spacing(0) !default;
+$kendo-image-editor-padding-x: var( --kendo-image-editor-padding-x, #{k-spacing(0)} ) !default;
 
 /// Border width of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-border-width: 1px !default;
+$kendo-image-editor-border-width: var( --kendo-image-editor-border-width, 1px ) !default;
 /// Font size of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-image-editor-font-size: var( --kendo-image-editor-font-size, var(--kendo-font-size, inherit) ) !default;
 /// Line height of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-image-editor-line-height: var( --kendo-image-editor-line-height, var(--kendo-line-height, inherit) ) !default;
 /// Font family of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-image-editor-font-family: var( --kendo-image-editor-font-family, var(--kendo-font-family, inherit) ) !default;
 
 /// Imageeditor content background color.
 /// @group imageeditor
-$kendo-image-editor-content-bg: color-mix(in srgb, k-color(on-app-surface) 23%, transparent) !default;
+$kendo-image-editor-content-bg: var( --kendo-image-editor-content-bg, color-mix(in srgb, #{k-color(on-app-surface)} 23%, transparent) ) !default;
 /// Imageeditor content text color.
 /// @group imageeditor
-$kendo-image-editor-content-text: inherit !default;
+$kendo-image-editor-content-text: var( --kendo-image-editor-content-text, inherit ) !default;
 /// Imageeditor content border color.
 /// @group imageeditor
-$kendo-image-editor-content-border: inherit !default;
+$kendo-image-editor-content-border: var( --kendo-image-editor-content-border, inherit ) !default;
 /// Imageeditor content border width.
 /// @group imageeditor
 $kendo-image-editor-content-border-width: 0 !default;
 
 /// Imageeditor action pane background color.
 /// @group imageeditor
-$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
+$kendo-image-editor-action-pane-bg: var( --kendo-image-editor-action-pane-bg, #{k-color(surface-alt)} ) !default;
 /// Imageeditor action pane text color.
 /// @group imageeditor
-$kendo-image-editor-action-pane-text: inherit !default;
+$kendo-image-editor-action-pane-text: var( --kendo-image-editor-action-pane-text, inherit ) !default;
 /// Imageeditor action pane border.
 /// @group imageeditor
-$kendo-image-editor-action-pane-border: inherit !default;
+$kendo-image-editor-action-pane-border: var( --kendo-image-editor-action-pane-border, inherit ) !default;
 /// Imageeditor action pane vertical padding.
 /// @group imageeditor
-$kendo-image-editor-action-pane-padding-y: k-spacing(3) !default;
+$kendo-image-editor-action-pane-padding-y: var( --kendo-image-editor-action-pane-padding-y, #{k-spacing(3)} ) !default;
 /// Imageeditor action pane horizontal padding.
 /// @group imageeditor
-$kendo-image-editor-action-pane-padding-x: k-spacing(3) !default;
+$kendo-image-editor-action-pane-padding-x: var( --kendo-image-editor-action-pane-padding-x, #{k-spacing(3)} ) !default;
 /// Imageeditor action pane width.
 /// @group imageeditor
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: var( --kendo-image-editor-action-pane-width, if( #{$kendo-image-editor-content-border-width} == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) ) ) !default;
 
 /// Crop background color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-bg: inherit !default;
+$kendo-image-editor-crop-bg: var( --kendo-image-editor-crop-bg, inherit ) !default;
 /// Crop text color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-text: inherit !default;
+$kendo-image-editor-crop-text: var( --kendo-image-editor-crop-text, inherit ) !default;
 /// Crop border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-border: k-color(app-surface) !default;
+$kendo-image-editor-crop-border: var( --kendo-image-editor-crop-border, #{k-color(app-surface)} ) !default;
 /// Crop overlay background color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-overlay-bg: rgba( $kendo-color-black, .3 ) !default;
+$kendo-image-editor-crop-overlay-bg: var( --kendo-image-editor-crop-overlay-bg, rgba( $kendo-color-black, .3 ) ) !default;
 /// Crop border width of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-border-width: 1px !default;
+$kendo-image-editor-crop-border-width: var( --kendo-image-editor-crop-border-width, 1px ) !default;
 /// Crop border style of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-border-style: dashed !default;
+$kendo-image-editor-crop-border-style: var( --kendo-image-editor-crop-border-style, dashed ) !default;
 
 /// Imageeditor resize handle horizontal margin.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-margin-x: k-spacing(1px) !default;
+$kendo-image-editor-resize-handle-margin-x: var( --kendo-image-editor-resize-handle-margin-x, #{k-spacing(1px)} ) !default;
 /// Imageeditor resize handle vertical margin.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
+$kendo-image-editor-resize-handle-margin-y: var( --kendo-image-editor-resize-handle-margin-y, #{k-spacing(1px)} ) !default;
 /// Imageeditor resize handle border width.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
+$kendo-image-editor-resize-handle-border-width: var( --kendo-image-editor-resize-handle-border-width, 0 2px 2px 0 ) !default;
 /// Imageeditor resize handle size.
 /// @group imageeditor
-$kendo-image-editor-resize-handle-size: k-spacing(4) !default;
+$kendo-image-editor-resize-handle-size: var( --kendo-image-editor-resize-handle-size, #{k-spacing(4)} ) !default;
 /// Imageeditor resize handle top offset.
 /// @group imageeditor
-$kendo-image-editor-resize-top-offset: calc( #{$kendo-image-editor-resize-handle-size} / 2 ) !default;
+$kendo-image-editor-resize-top-offset: var( --kendo-image-editor-resize-top-offset, calc( #{$kendo-image-editor-resize-handle-size} / 2 ) ) !default;
 /// Imageeditor resize handle left offset.
 /// @group imageeditor
-$kendo-image-editor-resize-left-offset: calc( #{$kendo-image-editor-resize-handle-size} / 2 ) !default;
+$kendo-image-editor-resize-left-offset: var( --kendo-image-editor-resize-left-offset, calc( #{$kendo-image-editor-resize-handle-size} / 2 ) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with (
+    $kendo-image-editor-margin-y: $kendo-image-editor-margin-y,
+    $kendo-image-editor-margin-x: $kendo-image-editor-margin-x,
+    $kendo-image-editor-padding-y: $kendo-image-editor-padding-y,
+    $kendo-image-editor-padding-x: $kendo-image-editor-padding-x,
+    $kendo-image-editor-border-width: $kendo-image-editor-border-width,
+    $kendo-image-editor-font-size: $kendo-image-editor-font-size,
+    $kendo-image-editor-line-height: $kendo-image-editor-line-height,
+    $kendo-image-editor-font-family: $kendo-image-editor-font-family,
+    $kendo-image-editor-content-border-width: $kendo-image-editor-content-border-width,
+    $kendo-image-editor-action-pane-padding-y: $kendo-image-editor-action-pane-padding-y,
+    $kendo-image-editor-action-pane-padding-x: $kendo-image-editor-action-pane-padding-x,
+    $kendo-image-editor-action-pane-width: $kendo-image-editor-action-pane-width,
+    $kendo-image-editor-crop-border-width: $kendo-image-editor-crop-border-width,
+    $kendo-image-editor-crop-border-style: $kendo-image-editor-crop-border-style,
+    $kendo-image-editor-resize-handle-margin-x: $kendo-image-editor-resize-handle-margin-x,
+    $kendo-image-editor-resize-handle-margin-y: $kendo-image-editor-resize-handle-margin-y,
+    $kendo-image-editor-resize-handle-border-width: $kendo-image-editor-resize-handle-border-width,
+    $kendo-image-editor-resize-handle-size: $kendo-image-editor-resize-handle-size,
+    $kendo-image-editor-bg: $kendo-image-editor-bg,
+    $kendo-image-editor-text: $kendo-image-editor-text,
+    $kendo-image-editor-border: $kendo-image-editor-border,
+    $kendo-image-editor-content-bg: $kendo-image-editor-content-bg,
+    $kendo-image-editor-content-text: $kendo-image-editor-content-text,
+    $kendo-image-editor-content-border: $kendo-image-editor-content-border,
+    $kendo-image-editor-action-pane-bg: $kendo-image-editor-action-pane-bg,
+    $kendo-image-editor-action-pane-text: $kendo-image-editor-action-pane-text,
+    $kendo-image-editor-action-pane-border: $kendo-image-editor-action-pane-border,
+    $kendo-image-editor-crop-bg: $kendo-image-editor-crop-bg,
+    $kendo-image-editor-crop-text: $kendo-image-editor-crop-text,
+    $kendo-image-editor-crop-border: $kendo-image-editor-crop-border,
+    $kendo-image-editor-crop-overlay-bg: $kendo-image-editor-crop-overlay-bg
+);

package/scss/index.scss

@@ -126,7 +126,6 @@
 
 // Typography
 @use "./typography/index.scss" as *;
-@use "./draggable/index.scss" as *;
 
 
 // Generic content
@@ -135,6 +134,7 @@
 
 
 // Primitive components
+@use "./draggable/index.scss" as *;
 @use "./action-buttons/index.scss" as *;
 @use "./list/index.scss" as *;
 @use "./listgroup/index.scss" as *;
@@ -313,6 +313,7 @@
 
 
     // Primitive components
+    @include kendo-draggable--styles();
     @include kendo-action-buttons--styles();
     @include kendo-list--styles();
     @include kendo-listgroup--styles();