@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/checkbox/_variables.scss

@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Checkbox
 
 /// Border width of checkbox.
@@ -7,31 +10,31 @@ $kendo-checkbox-border-width: 1px !default;
 // Checkbox sizes
 $kendo-checkbox-sizes: (
     sm: (
-        size: map-get( $spacing, 3 ),
-        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 3 ) * 3
+        size: k-map-get( $kendo-spacing, 3 ),
+        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
+        ripple-size: 300%
     ),
     md: (
-        size: map-get( $spacing, 4 ),
-        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 4 ) * 3
+        size: k-map-get( $kendo-spacing, 4 ),
+        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
+        ripple-size: 300%
     ),
     lg: (
-        size: map-get( $spacing, 5 ),
-        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 5 ) * 3
+        size: k-map-get( $kendo-spacing, 5 ),
+        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
+        ripple-size: 300%
     )
 ) !default;
 
 /// Background color of checkbox.
 /// @group checkbox
-$kendo-checkbox-bg: $component-bg !default;
+$kendo-checkbox-bg: $kendo-component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$kendo-checkbox-border: $component-border !default;
+$kendo-checkbox-border: $kendo-component-border !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
@@ -45,10 +48,10 @@ $kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -74,7 +77,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $kendo-color-primary, .3 ) !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
@@ -101,10 +104,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 $kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
 
 
 // Checkbox indicator
@@ -125,24 +128,24 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// Image image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
 
 /// The horizontal margin of the checkbox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+$kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;

package/scss/chip/_index.scss

@@ -3,10 +3,9 @@
 
 // Dependencies
 @import "../icons/_index.scss";
-@import "../button/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/chip/_layout.scss

@@ -77,9 +77,6 @@
         justify-content: center;
         flex: none;
     }
-    .k-ie .k-chip-icon {
-        margin-right: $kendo-chip-spacing;
-    }
 
 
     // Actions
@@ -108,10 +105,6 @@
         justify-content: center;
         flex: none;
     }
-    .k-ie .k-remove-icon {
-        margin-right: 0;
-        margin-left: $kendo-chip-spacing;
-    }
 
 
     // Chip list
@@ -123,30 +116,12 @@
         position: relative;
     }
 
-
-    // RTL
-    .k-ie .k-chip.k-rtl,
-    .k-ie .k-rtl .k-chip,
-    .k-ie .k-chip[dir="rtl"] {
-        .k-chip-icon {
-            margin-right: 0;
-            margin-left: $kendo-chip-spacing;
-        }
-
-        .k-remove-icon {
-            margin-left: 0;
-            margin-right: $kendo-chip-spacing;
-        }
-    }
-
-
-
     // Sizes
     @each $size, $size-props in $kendo-chip-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
         $_avatar-size: 1em;
 
         .k-chip-#{$size} {

package/scss/chip/_theme.scss

@@ -14,8 +14,8 @@
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( $kendo-chip-solid-shadow );
                     @include fill( $bg: $kendo-chip-solid-focus-bg );
+                    @include focus-indicator( $kendo-chip-solid-shadow );
                 }
 
                 &:hover,
@@ -28,24 +28,24 @@
                 }
             } @else {
                 @include fill(
-                    try-shade( $color, 65% ),
-                    try-tint( $color, 80% ),
-                    try-tint( $color, 25% ),
+                    k-try-shade( $color, 65% ),
+                    k-try-tint( $color, 80% ),
+                    k-try-tint( $color, 25% ),
                     $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
+                    @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: try-tint($color, 65% ) );
+                    @include fill( $bg: k-try-tint($color, 65% ) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: try-tint( $color, 50% ) );
+                    @include fill( $bg: k-try-tint( $color, 50% ) );
                 }
             }
         }
@@ -64,7 +64,7 @@
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( $kendo-chip-outline-shadow );
+                    @include focus-indicator( $kendo-chip-outline-shadow );
                 }
 
                 &:hover,
@@ -83,54 +83,54 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    if( $dark-theme, tint($color, 25%), $kendo-chip-outline-text),
-                    if( $dark-theme, $black, $white ),
-                    if( $dark-theme, tint($color, 25%), $color)
+                    if( $dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
+                    if( $dark-theme, $kendo-color-black, $kendo-color-white ),
+                    if( $dark-theme, k-color-tint($color, 25%), $color)
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
-                        $bg: if( $dark-theme, tint($color, 25%), $color)
+                        $color: if( $dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
+                        $bg: if( $dark-theme, k-color-tint($color, 25%), $color)
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
-                        $bg: if( $dark-theme, tint($color, 25%), $color)
+                        $color: if( $dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
+                        $bg: if( $dark-theme, k-color-tint($color, 25%), $color)
                     );
                 }
             } @else {
                 @include fill(
-                    try-shade( $color, 25% ),
-                    if( $dark-theme, $black, $white ),
-                    try-shade( $color, 25% )
+                    k-try-shade( $color, 25% ),
+                    if( $dark-theme, $kendo-color-black, $kendo-color-white ),
+                    k-try-shade( $color, 25% )
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: contrast-wcag( try-shade( $color, 25% ) ),
-                        $bg: try-shade( $color, 25% )
+                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
+                        $bg: k-try-shade( $color, 25% )
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: contrast-wcag( try-shade( $color, 25% ) ),
-                        $bg: try-shade( $color, 25% )
+                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
+                        $bg: k-try-shade( $color, 25% )
                     );
                 }
             }

package/scss/chip/_variables.scss

@@ -1,3 +1,6 @@
+@import "../button/_variables.scss";
+
+
 // Chip
 
 /// Width of the border around the button.
@@ -5,21 +8,21 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: map-get( $spacing, 1 ) !default;
+$kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-sm: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-md: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-lg: map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
-$kendo-chip-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-chip-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
@@ -35,6 +38,11 @@ $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
 $kendo-chip-line-height-md: $kendo-chip-line-height !default;
 $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
 
+/// Calculated height of the chip.
+/// @group chip
+$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
+$kendo-chip-calc-size-sm: calc( #{$kendo-chip-line-height-sm * 1em} + #{$kendo-chip-padding-y-sm * 2} + #{$kendo-chip-border-width * 2} ) !default;
+
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
@@ -66,10 +74,10 @@ $kendo-chip-base-bg: $kendo-button-bg !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get($kendo-theme-colors, "error"),
-    "info": map-get($kendo-theme-colors, "info"),
-    "warning": map-get($kendo-theme-colors, "warning"),
-    "success": map-get($kendo-theme-colors, "success")
+    "error": k-map-get($kendo-theme-colors, "error"),
+    "info": k-map-get($kendo-theme-colors, "info"),
+    "warning": k-map-get($kendo-theme-colors, "warning"),
+    "success": k-map-get($kendo-theme-colors, "success")
 ) !default;
 
 /// The base background color of solid chip.
@@ -83,7 +91,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .08 )) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if( $dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
 /// The base gradient of solid chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -111,7 +119,7 @@ $kendo-chip-solid-selected-text: null !default;
 
 /// The base background color of outline chip.
 /// @group chip
-$kendo-chip-outline-bg: $component-bg !default;
+$kendo-chip-outline-bg: $kendo-component-bg !default;
 /// The base text color of outline chip.
 /// @group chip
 $kendo-chip-outline-text: $kendo-chip-solid-text !default;
@@ -120,14 +128,14 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of outline chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .08 )) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if( $dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
@@ -141,7 +149,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: map-get( $spacing, 1 ),
-    md: map-get( $spacing, 1 ),
-    lg: map-get( $spacing, 1 )
+    sm: k-map-get( $kendo-spacing, 1 ),
+    md: k-map-get( $kendo-spacing, 1 ),
+    lg: k-map-get( $kendo-spacing, 1 )
 ) !default;

package/scss/color-preview/_index.scss

@@ -6,6 +6,6 @@
 
 // Component
 @import "../colorgradient/images/alpha-slider-bgr.scss";
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/color-preview/_layout.scss

@@ -39,7 +39,7 @@
         gap: 2px;
 
         .k-color-preview-mask {
-            width: calc( #{$icon-size} - 2px );
+            width: calc( #{$kendo-icon-size} - 2px );
             height: 2px;
         }
     }

package/scss/color-preview/_variables.scss

@@ -3,12 +3,12 @@ $color-preview-border-radius: $kendo-border-radius-md !default;
 $color-preview-border-width: 1px !default;
 $color-preview-bg: null !default;
 $color-preview-text: null !default;
-$color-preview-border: $component-border !default;
-$color-preview-hover-border: $hovered-border !default;
+$color-preview-border: $kendo-component-border !default;
+$color-preview-hover-border: $kendo-hover-border !default;
 
-$color-preview-no-color-bg: $white !default;
-$color-preview-no-color-text: $error !default;
+$color-preview-no-color-bg: $kendo-color-white !default;
+$color-preview-no-color-text: $kendo-color-error !default;
 $color-preview-no-color-border: null !default;
 
-$color-preview-no-color-image: 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='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$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='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
 $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

package/scss/coloreditor/_index.scss

@@ -10,6 +10,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/coloreditor/_theme.scss

@@ -12,7 +12,7 @@
     .k-coloreditor:focus,
     .k-coloreditor.k-focus {
         @include fill( $border: $coloreditor-focus-border );
-        @include box-shadow( $coloreditor-focus-shadow );
+        @include focus-indicator( $coloreditor-focus-shadow );
     }
 
     .k-coloreditor .k-colorgradient:focus,

package/scss/coloreditor/_variables.scss

@@ -1,5 +1,5 @@
 // Coloreditor/FlatColorPicker
-$coloreditor-spacer: map-get( $spacing, 3 ) !default;
+$coloreditor-spacer: k-map-get( $kendo-spacing, 3 ) !default;
 
 $coloreditor-min-width: 272px !default;
 $coloreditor-border-width: 1px !default;
@@ -7,18 +7,18 @@ $coloreditor-border-radius: $kendo-border-radius-md !default;
 $coloreditor-font-family: $font-family !default;
 $coloreditor-font-size: $font-size !default;
 $coloreditor-line-height: $line-height !default;
-$coloreditor-bg: $component-bg !default;
-$coloreditor-text: $component-text !default;
-$coloreditor-border: $component-border !default;
+$coloreditor-bg: $kendo-component-bg !default;
+$coloreditor-text: $kendo-component-text !default;
+$coloreditor-border: $kendo-component-border !default;
 
 $coloreditor-focus-border: null !default;
 $coloreditor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
 $coloreditor-header-padding-y: $coloreditor-spacer !default;
 $coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
-$coloreditor-header-actions-gap: ( $coloreditor-spacer / 1.5 ) !default;
+$coloreditor-header-actions-gap: k-math-div( $coloreditor-spacer, 1.5 ) !default;
 
-$coloreditor-preview-gap: map-get( $spacing, 1 ) !default;
+$coloreditor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
 $coloreditor-color-preview-width: 32px !default;
 $coloreditor-color-preview-height: 12px !default;
 

package/scss/colorgradient/_index.scss

@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../slider/_index.scss";
@@ -12,7 +12,7 @@
 @import "../numerictextbox/_index.scss";
 
 // Component
-@import "images/alpha-slider-bgr.scss";
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./images/alpha-slider-bgr.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/colorgradient/_layout.scss

@@ -17,7 +17,7 @@
         align-items: stretch;
         gap: $colorgradient-gap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -35,7 +35,6 @@
             position: relative;
             flex: 1 1 auto;
             user-select: none;
-            -ms-touch-action: pinch-zoom double-tap-zoom;
         }
 
         .k-hsv-gradient {
@@ -81,7 +80,7 @@
         &.k-slider-vertical .k-slider-track {
             width: $colorgradient-slider-track-size;
             border-radius: $colorgradient-slider-border-radius;
-            margin-left: -($colorgradient-slider-track-size / 2);
+            margin-left: - k-math-div( $colorgradient-slider-track-size, 2 );
         }
 
         &.k-slider-horizontal {
@@ -92,7 +91,7 @@
         &.k-slider-horizontal .k-slider-track {
             height: $colorgradient-slider-track-size;
             border-radius: $colorgradient-slider-border-radius;
-            margin-top: -($colorgradient-slider-track-size / 2);
+            margin-top: - k-math-div( $colorgradient-slider-track-size, 2 );
         }
 
         &.k-alpha-slider .k-slider-track::before {
@@ -163,7 +162,7 @@
         .k-contrast-validation {
             display: inline-flex;
             align-items: center;
-            gap: ( $colorgradient-contrast-spacer / 2 );
+            gap: k-math-div( $colorgradient-contrast-spacer, 2 );
 
             .k-icon {
                 vertical-align: middle;

package/scss/colorgradient/_theme.scss

@@ -12,12 +12,12 @@
     .k-colorgradient:focus,
     .k-colorgradient.k-focus {
         @include fill( $border: $colorgradient-focus-border );
-        @include box-shadow( $colorgradient-focus-shadow );
+        @include focus-indicator( $colorgradient-focus-shadow );
     }
 
     // Canvas
     .k-colorgradient-canvas .k-hsv-gradient {
-        background: linear-gradient( to bottom, $gradient-transparent-to-black ), linear-gradient( to right, $gradient-white-to-transparent );
+        background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent );
     }
 
     // DragHandle
@@ -31,15 +31,15 @@
 
         &:focus,
         &.k-focus {
-            @include fill( $bg: transparent, $border: $white );
-            @include box-shadow( $colorgradient-draghandle-focus-shadow );
+            @include fill( $bg: transparent, $border: $kendo-color-white );
+            @include focus-indicator( $colorgradient-draghandle-focus-shadow );
         }
 
         &:hover,
         &.k-hover,
         &.k-active,
         &:active {
-            @include fill( $bg: transparent, $border: $white );
+            @include fill( $bg: transparent, $border: $kendo-color-white );
             @include box-shadow( $colorgradient-draghandle-hover-shadow );
         }
     }
@@ -47,16 +47,16 @@
     // Slider
     .k-colorgradient-slider.k-hue-slider {
         &.k-slider-horizontal .k-slider-track {
-            background: linear-gradient( to right, $gradient-rainbow );
+            background: linear-gradient( to right, $kendo-gradient-rainbow );
         }
 
         &.k-slider-vertical .k-slider-track {
-            background: linear-gradient( to top, $gradient-rainbow );
+            background: linear-gradient( to top, $kendo-gradient-rainbow );
         }
     }
 
     .k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
-        background: url(map-get($data-uris, "alpha-slider-bgr.png")) center repeat;
+        background: url(k-map-get($data-uris, "alpha-slider-bgr.png")) center repeat;
     }
 
     // Inputs
@@ -72,7 +72,7 @@
         .k-colorgradient {
 
             .k-hue-slider.k-slider-horizontal .k-slider-track {
-                background: linear-gradient( to left, $gradient-rainbow );
+                background: linear-gradient( to left, $kendo-gradient-rainbow );
             }
 
         }