@progress/kendo-theme-meridian 14.5.1-dev.6 → 14.5.1-dev.8

package/dist/meta/variables.json

@@ -14258,31 +14258,111 @@
     },
     "kendo-image-editor-action-pane-width": {
         "type": "Calculation",
-        "value": "calc(240px + 1px)"
+        "value": "calc(320px + 1px)"
     },
-    "kendo-image-editor-crop-border-width": {
-        "type": "Number",
-        "value": "1px"
+    "kendo-image-editor-pane-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
     },
-    "kendo-image-editor-crop-border-style": {
+    "kendo-image-editor-pane-header-padding-x": {
         "type": "String",
-        "value": "dashed"
+        "value": "var(--kendo-spacing-4)"
     },
-    "kendo-image-editor-resize-handle-margin-x": {
+    "kendo-image-editor-pane-header-gap": {
         "type": "String",
-        "value": "var(--kendo-spacing-1px)"
+        "value": "var(--kendo-spacing-2)"
     },
-    "kendo-image-editor-resize-handle-margin-y": {
+    "kendo-image-editor-pane-content-padding-top": {
         "type": "String",
-        "value": "var(--kendo-spacing-1px)"
+        "value": "var(--kendo-spacing-2)"
+    },
+    "kendo-image-editor-pane-content-padding-bottom": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-image-editor-pane-content-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-image-editor-pane-content-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-image-editor-adjustment-row-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-image-editor-pane-footer-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-image-editor-pane-footer-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4)"
+    },
+    "kendo-image-editor-option-list-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
     },
-    "kendo-image-editor-resize-handle-border-width": {
+    "kendo-image-editor-option-list-scroll-gradient": {
         "type": "List",
-        "value": "(0 2px 2px 0)"
+        "value": "(rgba(255, 255, 255, 0) 0%, var(--kendo-color-surface-alt) 100%)"
+    },
+    "kendo-image-editor-option-preview-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1\\.5)"
+    },
+    "kendo-image-editor-option-preview-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2)"
+    },
+    "kendo-image-editor-option-preview-border-radius": {
+        "type": "String",
+        "value": "var(--kendo-border-radius-md)"
+    },
+    "kendo-image-editor-option-preview-width": {
+        "type": "Number",
+        "value": "88px"
+    },
+    "kendo-image-editor-option-label-font-size": {
+        "type": "String",
+        "value": "var(--kendo-font-size-xs, inherit)"
+    },
+    "kendo-image-editor-frame-border-width": {
+        "type": "Number",
+        "value": "2px"
+    },
+    "kendo-image-editor-frame-border-style": {
+        "type": "String",
+        "value": "solid"
+    },
+    "kendo-image-editor-handle-margin-x": {
+        "type": "Number",
+        "value": "0"
+    },
+    "kendo-image-editor-handle-margin-y": {
+        "type": "Number",
+        "value": "0"
+    },
+    "kendo-image-editor-handle-border-width": {
+        "type": "Number",
+        "value": "2px"
+    },
+    "kendo-image-editor-handle-size": {
+        "type": "Number",
+        "value": "24px"
     },
-    "kendo-image-editor-resize-handle-size": {
+    "kendo-image-editor-handle-thickness": {
         "type": "Number",
-        "value": "15px"
+        "value": "12px"
+    },
+    "kendo-image-editor-handle-border-radius": {
+        "type": "String",
+        "value": "var(--kendo-border-radius-full)"
+    },
+    "kendo-image-editor-scale-handle-size": {
+        "type": "Number",
+        "value": "12px"
     },
     "kendo-image-editor-bg": {
         "type": "String",
@@ -14320,21 +14400,81 @@
         "type": "Null",
         "value": "null"
     },
-    "kendo-image-editor-crop-bg": {
+    "kendo-image-editor-pane-title-text": {
+        "type": "String",
+        "value": "var(--kendo-color-on-app-surface)"
+    },
+    "kendo-image-editor-option-preview-bg": {
         "type": "Null",
         "value": "null"
     },
-    "kendo-image-editor-crop-text": {
+    "kendo-image-editor-option-preview-text": {
+        "type": "String",
+        "value": "var(--kendo-color-on-app-surface)"
+    },
+    "kendo-image-editor-option-preview-border": {
+        "type": "String",
+        "value": "var(--kendo-color-border)"
+    },
+    "kendo-image-editor-option-preview-hover-bg": {
+        "type": "String",
+        "value": "color-mix(in srgb, var(--kendo-color-primary-subtle-hover) 50%, transparent)"
+    },
+    "kendo-image-editor-option-preview-hover-text": {
+        "type": "String",
+        "value": "var(--kendo-color-primary-on-subtle)"
+    },
+    "kendo-image-editor-option-preview-focus-shadow": {
+        "type": "List",
+        "value": "(0 0 0 1px var(--kendo-color-surface-alt), 0 0 0 2px var(--kendo-color-subtle))"
+    },
+    "kendo-image-editor-option-preview-selected-shadow": {
+        "type": "List",
+        "value": "(0 0 0 1px var(--kendo-color-surface-alt), 0 0 0 2px var(--kendo-color-secondary-on-surface))"
+    },
+    "kendo-image-editor-option-preview-selected-border": {
         "type": "Null",
         "value": "null"
     },
-    "kendo-image-editor-crop-border": {
-        "type": "Color",
-        "value": "white"
+    "kendo-image-editor-option-preview-selected-text": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-image-editor-option-preview-selected-font-weight": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-image-editor-frame-bg": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-image-editor-frame-text": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-image-editor-frame-border": {
+        "type": "String",
+        "value": "var(--kendo-color-secondary)"
     },
     "kendo-image-editor-crop-overlay-bg": {
         "type": "Color",
-        "value": "rgba(0, 0, 0, 0.3)"
+        "value": "rgba(0, 0, 0, 0.2)"
+    },
+    "kendo-image-editor-crop-overlay-accent-bg": {
+        "type": "String",
+        "value": "color-mix(in srgb, var(--kendo-color-secondary) 20%, transparent)"
+    },
+    "kendo-image-editor-grid-line-color": {
+        "type": "String",
+        "value": "var(--kendo-color-secondary)"
+    },
+    "kendo-image-editor-handle-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-secondary-subtle)"
+    },
+    "kendo-image-editor-handle-border": {
+        "type": "String",
+        "value": "var(--kendo-color-secondary)"
     },
     "kendo-gantt-border-width": {
         "type": "Number",

package/lib/swatches/meridian-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Meridian Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-meridian",
-    "version": "14.5.1-dev.6",
+    "version": "14.5.1-dev.8",
     "previewColors": [
         "oklch(13.85% 0.0249 273.24deg)",
         "oklch(23.28% 0.0218 272.75deg)",

package/lib/swatches/meridian-main.json

@@ -3,7 +3,7 @@
     "name": "Meridian Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-meridian",
-    "version": "14.5.1-dev.6",
+    "version": "14.5.1-dev.8",
     "previewColors": [
         "oklch(100% 0 0deg)",
         "oklch(98.46% 0.0017 247.84deg)",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-meridian",
   "description": "Meridian theme for Kendo UI",
-  "version": "14.5.1-dev.6",
+  "version": "14.5.1-dev.8",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,9 +51,9 @@
     "postpublish": "echo 'no postpublish for meridian theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "5.5.0-dev.0",
-    "@progress/kendo-theme-core": "14.5.1-dev.6",
-    "@progress/kendo-theme-utils": "14.5.1-dev.6"
+    "@progress/kendo-svg-icons": "^5.5.0",
+    "@progress/kendo-theme-core": "14.5.1-dev.8",
+    "@progress/kendo-theme-utils": "14.5.1-dev.8"
   },
   "directories": {
     "doc": "docs",

package/scss/imageeditor/_variables.scss

@@ -42,27 +42,94 @@ $kendo-image-editor-action-pane-padding-y: k-spacing(4) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
 /// The width of the ImageEditor action pane.
 /// @group image-editor
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc(240px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 320px, calc(320px + #{$kendo-image-editor-content-border-width}) ) !default;
 
-/// The width of the border around the ImageEditor crop area.
+/// The vertical padding of the ImageEditor pane header.
 /// @group image-editor
-$kendo-image-editor-crop-border-width: 1px !default;
-/// The style of the border around the ImageEditor crop area.
+$kendo-image-editor-pane-header-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the ImageEditor pane header.
 /// @group image-editor
-$kendo-image-editor-crop-border-style: dashed !default;
+$kendo-image-editor-pane-header-padding-x: k-spacing(4) !default;
+/// The gap between the title and the actions of the ImageEditor pane header.
+/// @group image-editor
+$kendo-image-editor-pane-header-gap: k-spacing(2) !default;
+
+/// The top padding of the ImageEditor pane content.
+/// @group image-editor
+$kendo-image-editor-pane-content-padding-top: k-spacing(2) !default;
+/// The bottom padding of the ImageEditor pane content.
+/// @group image-editor
+$kendo-image-editor-pane-content-padding-bottom: k-spacing(4) !default;
+/// The horizontal padding of the ImageEditor pane content.
+/// @group image-editor
+$kendo-image-editor-pane-content-padding-x: k-spacing(4) !default;
+/// The gap between the fields of the ImageEditor pane content.
+/// @group image-editor
+$kendo-image-editor-pane-content-gap: k-spacing(4) !default;
+
+/// The gap between the slider and the numeric input of an ImageEditor adjustment row.
+/// @group image-editor
+$kendo-image-editor-adjustment-row-gap: k-spacing(4) !default;
+
+/// The vertical padding of the ImageEditor pane footer.
+/// @group image-editor
+$kendo-image-editor-pane-footer-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the ImageEditor pane footer.
+/// @group image-editor
+$kendo-image-editor-pane-footer-padding-x: k-spacing(4) !default;
+
+/// The gap between the ImageEditor option list items.
+/// @group image-editor
+$kendo-image-editor-option-list-gap: k-spacing(2) !default;
+/// The scroll-fade gradient stops of the ImageEditor option list.
+/// @group image-editor
+$kendo-image-editor-option-list-scroll-gradient: rgba(255, 255, 255, 0) 0%, k-color(surface-alt) 100% !default;
+/// The vertical padding of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-padding-y: k-spacing(1.5) !default;
+/// The horizontal padding of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-padding-x: k-spacing(2) !default;
+/// The border radius of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-border-radius: k-border-radius(md) !default;
+/// The width of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-width: 88px !default;
+
+/// The font size of the ImageEditor option label.
+/// @group image-editor
+$kendo-image-editor-option-label-font-size: var( --kendo-font-size-xs, inherit ) !default;
+
+/// The width of the border around the ImageEditor overlay frame.
+/// @group image-editor
+$kendo-image-editor-frame-border-width: 2px !default;
+/// The style of the border around the ImageEditor overlay frame.
+/// @group image-editor
+$kendo-image-editor-frame-border-style: solid !default;
 
-/// The horizontal margin of the ImageEditor resize handle.
+/// The horizontal margin of the ImageEditor handle.
 /// @group image-editor
-$kendo-image-editor-resize-handle-margin-x: k-spacing(1px) !default;
-/// The vertical margin of the ImageEditor resize handle.
+$kendo-image-editor-handle-margin-x: 0 !default;
+/// The vertical margin of the ImageEditor handle.
 /// @group image-editor
-$kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
-/// The width of the border around the ImageEditor resize handle.
+$kendo-image-editor-handle-margin-y: 0 !default;
+/// The width of the border around the ImageEditor handle.
 /// @group image-editor
-$kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
-/// The size of the ImageEditor resize handle.
+$kendo-image-editor-handle-border-width: 2px !default;
+/// The size of the ImageEditor handle.
 /// @group image-editor
-$kendo-image-editor-resize-handle-size: 15px !default;
+$kendo-image-editor-handle-size: 24px !default;
+/// The thickness of the ImageEditor handle.
+/// @group image-editor
+$kendo-image-editor-handle-thickness: 12px !default;
+/// The border radius of the ImageEditor handle.
+/// @group image-editor
+$kendo-image-editor-handle-border-radius: k-border-radius(full) !default;
+
+/// The size of the ImageEditor scale handle.
+/// @group image-editor
+$kendo-image-editor-scale-handle-size: 12px !default;
 
 /// The background color of the ImageEditor.
 /// @group image-editor
@@ -94,19 +161,68 @@ $kendo-image-editor-action-pane-text: null !default;
 /// @group image-editor
 $kendo-image-editor-action-pane-border: null !default;
 
-/// The background color of the ImageEditor crop area.
+/// The text color of the ImageEditor pane title.
+/// @group image-editor
+$kendo-image-editor-pane-title-text: k-color(on-app-surface) !default;
+
+/// The background color of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-bg: null !default;
+/// The text color of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-text: k-color(on-app-surface) !default;
+/// The border color of an ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-border: k-color(border) !default;
+/// The background color of a hovered ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
+/// The text color of a hovered ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-hover-text: k-color(primary-on-subtle) !default;
+/// The box shadow of a focused ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-focus-shadow: 0 0 0 1px k-color(surface-alt), 0 0 0 2px k-color(subtle) !default;
+/// The box shadow of a selected ImageEditor option preview.
 /// @group image-editor
-$kendo-image-editor-crop-bg: null !default;
-/// The text color of the ImageEditor crop area.
+$kendo-image-editor-option-preview-selected-shadow: 0 0 0 1px k-color(surface-alt), 0 0 0 2px k-color(secondary-on-surface) !default;
+/// The border color of a selected ImageEditor option preview.
 /// @group image-editor
-$kendo-image-editor-crop-text: null !default;
-/// The border color of the ImageEditor crop area.
+$kendo-image-editor-option-preview-selected-border: null !default;
+/// The text color of a selected ImageEditor option preview.
 /// @group image-editor
-$kendo-image-editor-crop-border: white !default;
+$kendo-image-editor-option-preview-selected-text: null !default;
+/// The font weight of a selected ImageEditor option preview.
+/// @group image-editor
+$kendo-image-editor-option-preview-selected-font-weight: null !default;
+
+/// The background color of the ImageEditor overlay frame.
+/// @group image-editor
+$kendo-image-editor-frame-bg: null !default;
+/// The text color of the ImageEditor overlay frame.
+/// @group image-editor
+$kendo-image-editor-frame-text: null !default;
+/// The border color of the ImageEditor overlay frame.
+/// @group image-editor
+$kendo-image-editor-frame-border: k-color(secondary) !default;
 
 /// The background color of the ImageEditor crop overlay.
 /// @group image-editor
-$kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default;
+$kendo-image-editor-crop-overlay-bg: rgba(black, .2) !default;
+/// The accent-tinted overlay color of the ImageEditor crop overlay, layered above the background.
+/// @group image-editor
+$kendo-image-editor-crop-overlay-accent-bg: color-mix(in srgb, k-color(secondary) 20%, transparent) !default;
+
+/// The color of the ImageEditor rule-of-thirds grid lines.
+/// @group image-editor
+$kendo-image-editor-grid-line-color: k-color(secondary) !default;
+
+/// The background color of the ImageEditor handle.
+/// @group image-editor
+$kendo-image-editor-handle-bg: k-color(secondary-subtle) !default;
+/// The border color of the ImageEditor handle.
+/// @group image-editor
+$kendo-image-editor-handle-border: k-color(secondary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with (
     $kendo-image-editor-margin-y: $kendo-image-editor-margin-y,
@@ -122,12 +238,32 @@ $kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default;
     $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-pane-header-padding-y: $kendo-image-editor-pane-header-padding-y,
+    $kendo-image-editor-pane-header-padding-x: $kendo-image-editor-pane-header-padding-x,
+    $kendo-image-editor-pane-header-gap: $kendo-image-editor-pane-header-gap,
+    $kendo-image-editor-pane-content-padding-top: $kendo-image-editor-pane-content-padding-top,
+    $kendo-image-editor-pane-content-padding-bottom: $kendo-image-editor-pane-content-padding-bottom,
+    $kendo-image-editor-pane-content-padding-x: $kendo-image-editor-pane-content-padding-x,
+    $kendo-image-editor-pane-content-gap: $kendo-image-editor-pane-content-gap,
+    $kendo-image-editor-adjustment-row-gap: $kendo-image-editor-adjustment-row-gap,
+    $kendo-image-editor-pane-footer-padding-y: $kendo-image-editor-pane-footer-padding-y,
+    $kendo-image-editor-pane-footer-padding-x: $kendo-image-editor-pane-footer-padding-x,
+    $kendo-image-editor-option-list-gap: $kendo-image-editor-option-list-gap,
+    $kendo-image-editor-option-list-scroll-gradient: $kendo-image-editor-option-list-scroll-gradient,
+    $kendo-image-editor-option-preview-padding-y: $kendo-image-editor-option-preview-padding-y,
+    $kendo-image-editor-option-preview-padding-x: $kendo-image-editor-option-preview-padding-x,
+    $kendo-image-editor-option-preview-border-radius: $kendo-image-editor-option-preview-border-radius,
+    $kendo-image-editor-option-preview-width: $kendo-image-editor-option-preview-width,
+    $kendo-image-editor-option-label-font-size: $kendo-image-editor-option-label-font-size,
+    $kendo-image-editor-frame-border-width: $kendo-image-editor-frame-border-width,
+    $kendo-image-editor-frame-border-style: $kendo-image-editor-frame-border-style,
+    $kendo-image-editor-handle-margin-x: $kendo-image-editor-handle-margin-x,
+    $kendo-image-editor-handle-margin-y: $kendo-image-editor-handle-margin-y,
+    $kendo-image-editor-handle-border-width: $kendo-image-editor-handle-border-width,
+    $kendo-image-editor-handle-size: $kendo-image-editor-handle-size,
+    $kendo-image-editor-handle-thickness: $kendo-image-editor-handle-thickness,
+    $kendo-image-editor-handle-border-radius: $kendo-image-editor-handle-border-radius,
+    $kendo-image-editor-scale-handle-size: $kendo-image-editor-scale-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,
@@ -137,8 +273,23 @@ $kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default;
     $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
+    $kendo-image-editor-pane-title-text: $kendo-image-editor-pane-title-text,
+    $kendo-image-editor-option-preview-bg: $kendo-image-editor-option-preview-bg,
+    $kendo-image-editor-option-preview-text: $kendo-image-editor-option-preview-text,
+    $kendo-image-editor-option-preview-border: $kendo-image-editor-option-preview-border,
+    $kendo-image-editor-option-preview-hover-bg: $kendo-image-editor-option-preview-hover-bg,
+    $kendo-image-editor-option-preview-hover-text: $kendo-image-editor-option-preview-hover-text,
+    $kendo-image-editor-option-preview-focus-shadow: $kendo-image-editor-option-preview-focus-shadow,
+    $kendo-image-editor-option-preview-selected-shadow: $kendo-image-editor-option-preview-selected-shadow,
+    $kendo-image-editor-option-preview-selected-border: $kendo-image-editor-option-preview-selected-border,
+    $kendo-image-editor-option-preview-selected-text: $kendo-image-editor-option-preview-selected-text,
+    $kendo-image-editor-option-preview-selected-font-weight: $kendo-image-editor-option-preview-selected-font-weight,
+    $kendo-image-editor-frame-bg: $kendo-image-editor-frame-bg,
+    $kendo-image-editor-frame-text: $kendo-image-editor-frame-text,
+    $kendo-image-editor-frame-border: $kendo-image-editor-frame-border,
+    $kendo-image-editor-crop-overlay-bg: $kendo-image-editor-crop-overlay-bg,
+    $kendo-image-editor-crop-overlay-accent-bg: $kendo-image-editor-crop-overlay-accent-bg,
+    $kendo-image-editor-grid-line-color: $kendo-image-editor-grid-line-color,
+    $kendo-image-editor-handle-bg: $kendo-image-editor-handle-bg,
+    $kendo-image-editor-handle-border: $kendo-image-editor-handle-border
 );