@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/chip/_theme.scss

@@ -1,149 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-chip--theme-base() {
-
-    // Solid
-    @each $name, $color in $kendo-chip-theme-colors {
-        .k-chip-solid-#{$name} {
-
-            @if ($name == "base") {
-                @include fill(
-                    $kendo-chip-solid-text,
-                    $kendo-chip-solid-bg,
-                    $kendo-chip-solid-border,
-                    $kendo-chip-solid-gradient
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include fill( $bg: $kendo-chip-solid-focus-bg );
-                    @include focus-indicator( $kendo-chip-solid-shadow );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill( $bg: $kendo-chip-solid-hover-bg );
-                }
-
-                &.k-selected {
-                    @include fill( $bg: $kendo-chip-solid-selected-bg );
-                }
-            } @else {
-                @include fill(
-                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
-                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
-                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
-                    $kendo-chip-solid-gradient
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
-                }
-
-                &.k-selected {
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
-                }
-            }
-        }
-    }
-
-
-    // Outline
-    @each $name, $color in $kendo-chip-theme-colors {
-        .k-chip-outline-#{$name} {
-            @if ($name == "base") {
-                @include fill(
-                    $kendo-chip-outline-text,
-                    transparent,
-                    $kendo-chip-outline-border
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( $kendo-chip-outline-shadow );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $color: $kendo-chip-outline-hover-text,
-                        $bg: $kendo-chip-outline-hover-bg
-                    );
-                }
-
-                &.k-selected {
-                    @include fill(
-                        $color: $kendo-chip-outline-selected-text,
-                        $bg: $kendo-chip-outline-selected-bg
-                    );
-                }
-            } @else if ($name == "warning") {
-                @include fill(
-                    if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
-                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
-                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
-                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
-                    );
-                }
-
-                &.k-selected {
-                    @include fill(
-                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
-                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
-                    );
-                }
-            } @else {
-                @include fill(
-                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
-                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
-                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
-                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
-                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
-                    );
-                }
-
-                &.k-selected {
-                    @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
-                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
-                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
-                    );
-                }
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/chip/_theme.scss" as *;
 
 
 @mixin kendo-chip--theme() {

package/scss/chip/_variables.scss

@@ -180,3 +180,49 @@ $kendo-chip-list-sizes: (
     md: k-spacing(1),
     lg: k-spacing(1)
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
+    $kendo-chip-border-width: $kendo-chip-border-width,
+    $kendo-chip-spacing: $kendo-chip-spacing,
+    $kendo-chip-padding-x: $kendo-chip-padding-x,
+    $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
+    $kendo-chip-md-padding-x: $kendo-chip-md-padding-x,
+    $kendo-chip-lg-padding-x: $kendo-chip-lg-padding-x,
+    $kendo-chip-padding-y: $kendo-chip-padding-y,
+    $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y,
+    $kendo-chip-md-padding-y: $kendo-chip-md-padding-y,
+    $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y,
+    $kendo-chip-font-size: $kendo-chip-font-size,
+    $kendo-chip-sm-font-size: $kendo-chip-sm-font-size,
+    $kendo-chip-md-font-size: $kendo-chip-md-font-size,
+    $kendo-chip-lg-font-size: $kendo-chip-lg-font-size,
+    $kendo-chip-line-height: $kendo-chip-line-height,
+    $kendo-chip-sm-line-height: $kendo-chip-sm-line-height,
+    $kendo-chip-md-line-height: $kendo-chip-md-line-height,
+    $kendo-chip-lg-line-height: $kendo-chip-lg-line-height,
+    $kendo-chip-calc-size: $kendo-chip-calc-size,
+    $kendo-chip-sm-calc-size: $kendo-chip-sm-calc-size,
+    $kendo-chip-sizes: $kendo-chip-sizes,
+    $kendo-chip-base-bg: $kendo-chip-base-bg,
+    $kendo-chip-theme-colors: $kendo-chip-theme-colors,
+    $kendo-chip-solid-bg: $kendo-chip-solid-bg,
+    $kendo-chip-solid-text: $kendo-chip-solid-text,
+    $kendo-chip-solid-border: $kendo-chip-solid-border,
+    $kendo-chip-solid-shadow: $kendo-chip-solid-shadow,
+    $kendo-chip-solid-gradient: $kendo-chip-solid-gradient,
+    $kendo-chip-solid-focus-bg: $kendo-chip-solid-focus-bg,
+    $kendo-chip-solid-focus-text: $kendo-chip-solid-focus-text,
+    $kendo-chip-solid-hover-bg: $kendo-chip-solid-hover-bg,
+    $kendo-chip-solid-hover-text: $kendo-chip-solid-hover-text,
+    $kendo-chip-solid-selected-bg: $kendo-chip-solid-selected-bg,
+    $kendo-chip-solid-selected-text: $kendo-chip-solid-selected-text,
+    $kendo-chip-outline-bg: $kendo-chip-outline-bg,
+    $kendo-chip-outline-text: $kendo-chip-outline-text,
+    $kendo-chip-outline-border: $kendo-chip-outline-border,
+    $kendo-chip-outline-shadow: $kendo-chip-outline-shadow,
+    $kendo-chip-outline-hover-bg: $kendo-chip-outline-hover-bg,
+    $kendo-chip-outline-hover-text: $kendo-chip-outline-hover-text,
+    $kendo-chip-outline-selected-bg: $kendo-chip-outline-selected-bg,
+    $kendo-chip-outline-selected-text: $kendo-chip-outline-selected-text,
+    $kendo-chip-list-sizes: $kendo-chip-list-sizes
+);

package/scss/color-preview/_layout.scss

@@ -1,82 +1,4 @@
-@use "./_variables.scss" as *;
-@use "../icons/_variables.scss" as *;
-
-@mixin kendo-color-preview--layout-base() {
-
-    // Color Preview
-    .k-color-preview {
-        width: 100%;
-        height: 100%;
-        border-width: $kendo-color-preview-border-width;
-        border-radius: $kendo-color-preview-border-radius;
-        box-sizing: border-box;
-        border-style: solid;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        position: relative;
-        overflow: hidden;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Current Color
-    .k-coloreditor-current-color {
-        cursor: pointer;
-    }
-
-
-    // Icon color preview
-    .k-icon-color-preview {
-        border-width: 0;
-        border-radius: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        justify-content: center;
-        gap: 2px;
-
-        .k-color-preview-mask {
-            width: calc( #{$kendo-icon-size} - 2px );
-            height: 2px;
-        }
-    }
-
-
-    // Color Preview Mask
-    .k-color-preview-mask {
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-    .k-color-preview-mask::before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        background: $kendo-color-preview-transparent-color-image;
-        background-size: contain;
-        background-position: 0 0;
-    }
-
-
-    // No Color
-    .k-no-color .k-color-preview-mask::before {
-        content: "";
-        background-color: $kendo-color-preview-no-color-bg;
-        background-image: $kendo-color-preview-no-color-image;
-        background-size: 100% 100%;
-        background-position: 0 0;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/color-preview/_layout.scss" as *;
 
 
 @mixin kendo-color-preview--layout() {

package/scss/color-preview/_theme.scss

@@ -1,23 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-color-preview--theme-base() {
-
-    // Color Preview
-    .k-color-preview {
-        @include fill(
-            $kendo-color-preview-text,
-            $kendo-color-preview-bg,
-            $kendo-color-preview-border
-        );
-
-        &:hover,
-        &.k-hover {
-            @include fill( $border: $kendo-color-preview-hover-border );
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/color-preview/_theme.scss" as *;
 
 
 @mixin kendo-color-preview--theme() {

package/scss/color-preview/_variables.scss

@@ -15,3 +15,17 @@ $kendo-color-preview-no-color-border: null !default;
 
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
 $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
+
+@forward "@progress/kendo-theme-core/scss/components/color-preview/_variables.scss" with (
+    $kendo-color-preview-border-radius: $kendo-color-preview-border-radius,
+    $kendo-color-preview-border-width: $kendo-color-preview-border-width,
+    $kendo-color-preview-bg: $kendo-color-preview-bg,
+    $kendo-color-preview-text: $kendo-color-preview-text,
+    $kendo-color-preview-border: $kendo-color-preview-border,
+    $kendo-color-preview-hover-border: $kendo-color-preview-hover-border,
+    $kendo-color-preview-no-color-bg: $kendo-color-preview-no-color-bg,
+    $kendo-color-preview-no-color-text: $kendo-color-preview-no-color-text,
+    $kendo-color-preview-no-color-border: $kendo-color-preview-no-color-border,
+    $kendo-color-preview-no-color-image: $kendo-color-preview-no-color-image,
+    $kendo-color-preview-transparent-color-image: $kendo-color-preview-transparent-color-image
+);

package/scss/coloreditor/_layout.scss

@@ -1,120 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../colorpalette/_variables.scss" as *;
-
-@mixin kendo-color-editor--layout-base() {
-
-    // ColorEditor/FlatColorPicker
-    .k-coloreditor {
-        @include border-radius( $kendo-color-editor-border-radius );
-        min-width: $kendo-color-editor-min-width;
-        border-width: $kendo-color-editor-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-size: $kendo-color-editor-font-size;
-        font-family: $kendo-color-editor-font-family;
-        line-height: $kendo-color-editor-line-height;
-        display: inline-flex;
-        flex-direction: column;
-        align-items: stretch;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    // Header
-    .k-coloreditor-header {
-        padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0;
-    }
-
-    .k-coloreditor-header-actions {
-        gap: $kendo-color-editor-header-actions-gap;
-    }
-
-    .k-coloreditor-preview {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        justify-content: center;
-        gap: $kendo-color-editor-preview-gap;
-        position: relative;
-        z-index: 1;
-    }
-
-    .k-coloreditor-preview .k-color-preview {
-        width: $kendo-color-editor-color-preview-width;
-        height: $kendo-color-editor-color-preview-height;
-    }
-
-    // ColorPreview sizes
-    @each $size, $size-props in $kendo-color-editor-sizes {
-        $_min-width: map.get( $size-props, min-width );
-        $_header-padding-x: map.get( $size-props, header-padding-x );
-        $_header-padding-y: map.get( $size-props, header-padding-y );
-        $_views-padding-x: map.get( $size-props, views-padding-x );
-        $_views-padding-y: map.get( $size-props, views-padding-y );
-        $_preview-gap: map.get( $size-props, preview-gap );
-        $_preview-width: map.get( $size-props, preview-width );
-        $_preview-height: map.get( $size-props, preview-height );
-
-        .k-coloreditor-#{$size} {
-            min-width: $_min-width;
-
-            .k-coloreditor-header {
-                padding: $_header-padding-y $_header-padding-x 0;
-            }
-
-            .k-coloreditor-views {
-                padding-block: $_views-padding-y;
-                padding-inline: $_views-padding-x;
-            }
-
-            .k-coloreditor-preview {
-                gap: $_preview-gap;
-
-                .k-color-preview {
-                    width: $_preview-width;
-                    height: $_preview-height;
-                }
-            }
-        }
-
-    }
-
-    // Views
-    .k-coloreditor-views {
-        min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
-        padding-block: $kendo-color-editor-views-padding-y;
-        padding-inline: $kendo-color-editor-views-padding-x;
-        gap: $kendo-color-editor-views-gap;
-
-        .k-colorgradient {
-            padding: 0;
-            width: auto;
-            border-width: 0;
-        }
-        .k-colorgradient:focus,
-        .k-colorgradient.k-focus {
-            outline: $kendo-color-editor-color-gradient-focus-outline dotted;
-            outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset;
-            border-radius: 0;
-        }
-
-        .k-colorpalette {
-            align-self: center;
-        }
-    }
-
-    // Footer
-    .k-coloreditor-footer.k-actions {
-        margin: 0;
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/coloreditor/_layout.scss" as *;
 
 
 @mixin kendo-color-editor--layout() {

package/scss/coloreditor/_theme.scss

@@ -1,30 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-color-editor--theme-base() {
-
-    // ColorEditor/FlatColorPicker
-    .k-coloreditor {
-        @include fill(
-            $kendo-color-editor-text,
-            $kendo-color-editor-bg,
-            $kendo-color-editor-border
-        );
-    }
-
-    .k-coloreditor:focus,
-    .k-coloreditor.k-focus {
-        @include fill( $border: $kendo-color-editor-focus-border );
-        @include focus-indicator( $kendo-color-editor-focus-shadow );
-    }
-
-    .k-coloreditor .k-colorgradient:focus,
-    .k-coloreditor .k-colorgradient.k-focus {
-        box-shadow: none;
-        outline-color: $kendo-color-editor-color-gradient-focus-outline-color;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/coloreditor/_theme.scss" as *;
 
 
 @mixin kendo-color-editor--theme() {

package/scss/coloreditor/_variables.scss

@@ -199,3 +199,58 @@ $kendo-color-editor-sizes: (
         preview-height: $kendo-color-editor-lg-color-preview-height,
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/coloreditor/_variables.scss" with (
+    $kendo-color-editor-spacer: $kendo-color-editor-spacer,
+    $kendo-color-editor-min-width: $kendo-color-editor-min-width,
+    $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
+    $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
+    $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
+    $kendo-color-editor-border-width: $kendo-color-editor-border-width,
+    $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
+    $kendo-color-editor-font-family: $kendo-color-editor-font-family,
+    $kendo-color-editor-font-size: $kendo-color-editor-font-size,
+    $kendo-color-editor-line-height: $kendo-color-editor-line-height,
+    $kendo-color-editor-text: $kendo-color-editor-text,
+    $kendo-color-editor-bg: $kendo-color-editor-bg,
+    $kendo-color-editor-border: $kendo-color-editor-border,
+    $kendo-color-editor-focus-border: $kendo-color-editor-focus-border,
+    $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
+    $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
+    $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
+    $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
+    $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
+    $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
+    $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
+    $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
+    $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
+    $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
+    $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
+    $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
+    $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
+    $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
+    $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
+    $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
+    $kendo-color-editor-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width,
+    $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height,
+    $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width,
+    $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
+    $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
+    $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height,
+    $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
+    $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
+    $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
+    $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
+    $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
+    $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap,
+    $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
+    $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
+    $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap,
+    $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
+    $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
+    $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap,
+    $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
+    $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
+    $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset,
+    $kendo-color-editor-sizes: $kendo-color-editor-sizes
+);