@progress/kendo-theme-default 5.12.1-dev.1 → 5.12.1-dev.3

package/scss/chat/_variables.scss

@@ -1,72 +1,72 @@
 // Chat
-$chat-padding-x: 16px !default;
-$chat-padding-y: 16px !default;
-$chat-width: 500px !default;
-$chat-height: 600px !default;
-$chat-border-width: 1px !default;
-$chat-font-family: $font-family !default;
-$chat-font-size: $font-size !default;
-$chat-line-height: $line-height !default;
+$kendo-chat-padding-x: 16px !default;
+$kendo-chat-padding-y: 16px !default;
+$kendo-chat-width: 500px !default;
+$kendo-chat-height: 600px !default;
+$kendo-chat-border-width: 1px !default;
+$kendo-chat-font-family: $kendo-font-family !default;
+$kendo-chat-font-size: $kendo-font-size-md !default;
+$kendo-chat-line-height: $kendo-line-height-md !default;
 
-$chat-item-spacing-x: 8px !default;
-$chat-item-spacing-y: 16px !default;
+$kendo-chat-item-spacing-x: 8px !default;
+$kendo-chat-item-spacing-y: 16px !default;
 
-$chat-message-list-padding-x: $chat-padding-x !default;
-$chat-message-list-padding-y: $chat-padding-y !default;
-$chat-message-list-spacing: $chat-item-spacing-y !default;
+$kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
+$kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
+$kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
 
-$chat-timestamp-font-size: smaller !default;
-$chat-timestamp-line-height: null !default;
-$chat-timestamp-transform: uppercase !default;
-$chat-timestamp-text: $kendo-subtle-text !default;
-$chat-timestamp-bg: null !default;
+$kendo-chat-timestamp-font-size: smaller !default;
+$kendo-chat-timestamp-line-height: null !default;
+$kendo-chat-timestamp-transform: uppercase !default;
+$kendo-chat-timestamp-text: $kendo-subtle-text !default;
+$kendo-chat-timestamp-bg: null !default;
 
-$chat-bubble-padding-x: 12px !default;
-$chat-bubble-padding-y: 8px !default;
-$chat-bubble-spacing: 2px !default;
-$chat-bubble-line-height: 18px !default;
+$kendo-chat-bubble-padding-x: 12px !default;
+$kendo-chat-bubble-padding-y: 8px !default;
+$kendo-chat-bubble-spacing: 2px !default;
+$kendo-chat-bubble-line-height: 18px !default;
 
-$chat-bubble-border-radius: 12px !default;
-$chat-bubble-border-radius-sm: 2px !default;
+$kendo-chat-bubble-border-radius: 12px !default;
+$kendo-chat-bubble-border-radius-sm: 2px !default;
 
-$chat-avatar-size: 32px !default;
-$chat-avatar-spacing: $chat-item-spacing-x !default;
+$kendo-chat-avatar-size: 32px !default;
+$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
 
-$chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
-$chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
-$chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
-$chat-toolbar-bg: $kendo-toolbar-bg !default;
-$chat-toolbar-text: $kendo-toolbar-text !default;
-$chat-toolbar-border: inherit !default;
+$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
+$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
+$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
+$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
+$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
+$kendo-chat-toolbar-border: inherit !default;
 
-$chat-quick-reply-padding-x: 12px !default;
-$chat-quick-reply-padding-y: 8px !default;
-$chat-quick-reply-spacing: 8px !default;
-$chat-quick-reply-line-height: $chat-bubble-line-height !default;
+$kendo-chat-quick-reply-padding-x: 12px !default;
+$kendo-chat-quick-reply-padding-y: 8px !default;
+$kendo-chat-quick-reply-spacing: 8px !default;
+$kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 
-$chat-bg: $kendo-app-bg !default;
-$chat-text: $kendo-app-text !default;
-$chat-border: $kendo-app-border !default;
+$kendo-chat-bg: $kendo-app-bg !default;
+$kendo-chat-text: $kendo-app-text !default;
+$kendo-chat-border: $kendo-app-border !default;
 
-$chat-bubble-bg: $kendo-component-bg !default;
-$chat-bubble-text: $kendo-component-text !default;
-$chat-bubble-border: $chat-bubble-bg !default;
-$chat-bubble-shadow: 0 1px 2px rgba( $kendo-color-black, .08) !default;
-$chat-bubble-hover-shadow: 0 1px 2px rgba( $kendo-color-black, .16) !default;
-$chat-bubble-selected-shadow: 0 3px 10px rgba( $kendo-color-black, .16) !default;
+$kendo-chat-bubble-bg: $kendo-component-bg !default;
+$kendo-chat-bubble-text: $kendo-component-text !default;
+$kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
+$kendo-chat-bubble-shadow: 0 1px 2px rgba( $kendo-color-black, .08) !default;
+$kendo-chat-bubble-hover-shadow: 0 1px 2px rgba( $kendo-color-black, .16) !default;
+$kendo-chat-bubble-selected-shadow: 0 3px 10px rgba( $kendo-color-black, .16) !default;
 
-$chat-alt-bubble-bg: $kendo-color-primary !default;
-$chat-alt-bubble-text: k-contrast-legacy( $chat-alt-bubble-bg ) !default;
-$chat-alt-bubble-border: $chat-alt-bubble-bg !default;
-$chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
-$chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
-$chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default;
+$kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
+$kendo-chat-alt-bubble-text: k-contrast-legacy( $kendo-chat-alt-bubble-bg ) !default;
+$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
+$kendo-chat-alt-bubble-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
+$kendo-chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
+$kendo-chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $kendo-chat-alt-bubble-bg, .4 ) !default;
 
-$chat-quick-reply-bg: transparent !default;
-$chat-quick-reply-text: $kendo-color-primary !default;
-$chat-quick-reply-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-bg: transparent !default;
+$kendo-chat-quick-reply-text: $kendo-color-primary !default;
+$kendo-chat-quick-reply-border: $kendo-color-primary !default;
 
-$chat-quick-reply-hover-bg: $kendo-color-primary !default;
-$chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
-$chat-quick-reply-hover-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;

package/scss/checkbox/_index.scss

@@ -2,8 +2,6 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
-@import "../list/_variables.scss";
 
 
 // Component

package/scss/checkbox/_theme.scss

@@ -25,7 +25,7 @@
     .k-checkbox:focus,
     .k-checkbox.k-focus {
         @include fill( $border: $kendo-checkbox-focus-border );
-        @include box-shadow( $kendo-checkbox-focus-shadow );
+        @include focus-indicator( $kendo-checkbox-focus-shadow );
     }
 
 
@@ -52,7 +52,7 @@
     .k-checkbox:checked:focus,
     .k-checkbox.k-checked.k-focus {
         @include fill( $border: $kendo-checkbox-focus-checked-border );
-        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
+        @include focus-indicator( $kendo-checkbox-focus-checked-shadow );
     }
 
 

package/scss/checkbox/_variables.scss

@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Checkbox
 
 /// Border width of checkbox.
@@ -148,7 +151,7 @@ $kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
 // Checkbox ripple

package/scss/chip/_index.scss

@@ -3,7 +3,6 @@
 
 // Dependencies
 @import "../icons/_index.scss";
-@import "../button/_variables.scss";
 
 
 // Component

package/scss/chip/_layout.scss

@@ -6,7 +6,7 @@
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;
-        font-family: $font-family;
+        font-family: $kendo-font-family;
         font-size: $kendo-chip-font-size;
         line-height: $kendo-chip-line-height;
         display: inline-flex;

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,
@@ -36,7 +36,7 @@
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
+                    @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) );
                 }
 
                 &:hover,
@@ -64,7 +64,7 @@
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( $kendo-chip-outline-shadow );
+                    @include focus-indicator( $kendo-chip-outline-shadow );
                 }
 
                 &:hover,
@@ -83,40 +83,40 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    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)
+                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
+                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
+                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: if( $dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
+                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: if( $dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
+                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
                     );
                 }
             } @else {
                 @include fill(
                     k-try-shade( $color, 25% ),
-                    if( $dark-theme, $kendo-color-black, $kendo-color-white ),
+                    if( $kendo-is-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( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,

package/scss/chip/_variables.scss

@@ -1,3 +1,6 @@
+@import "../button/_variables.scss";
+
+
 // Chip
 
 /// Width of the border around the button.
@@ -10,56 +13,56 @@ $kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 /// Horizontal padding of the chip.
 /// @group chip
 $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;
+$kendo-chip-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-lg-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
 $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;
+$kendo-chip-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-chip-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
-$kendo-chip-font-size: $font-size-md !default;
-$kendo-chip-font-size-sm: $font-size-md !default;
-$kendo-chip-font-size-md: $font-size-md !default;
-$kendo-chip-font-size-lg: $font-size-md !default;
+$kendo-chip-font-size: $kendo-font-size-md !default;
+$kendo-chip-sm-font-size: $kendo-font-size-md !default;
+$kendo-chip-md-font-size: $kendo-font-size-md !default;
+$kendo-chip-lg-font-size: $kendo-font-size-md !default;
 
-/// Line heights of the chip that are connected to the $font-size.
+/// Line heights of the chip that are connected to the $kendo-font-size.
 /// @group chip
 $kendo-chip-line-height: 1 !default;
-$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;
+$kendo-chip-sm-line-height: $kendo-chip-line-height !default;
+$kendo-chip-md-line-height: $kendo-chip-line-height !default;
+$kendo-chip-lg-line-height: $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;
+$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + #{$kendo-chip-sm-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
 
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
     sm: (
-        padding-x: $kendo-chip-padding-x-sm,
-        padding-y: $kendo-chip-padding-y-sm,
-        font-size: $kendo-chip-font-size-sm,
-        line-height: $kendo-chip-line-height-sm
+        padding-x: $kendo-chip-sm-padding-x,
+        padding-y: $kendo-chip-sm-padding-y,
+        font-size: $kendo-chip-sm-font-size,
+        line-height: $kendo-chip-sm-line-height
     ),
     md: (
-        padding-x: $kendo-chip-padding-x-md,
-        padding-y: $kendo-chip-padding-y-md,
-        font-size: $kendo-chip-font-size-md,
-        line-height: $kendo-chip-line-height-md
+        padding-x: $kendo-chip-md-padding-x,
+        padding-y: $kendo-chip-md-padding-y,
+        font-size: $kendo-chip-md-font-size,
+        line-height: $kendo-chip-md-line-height
     ),
     lg: (
-        padding-x: $kendo-chip-padding-x-lg,
-        padding-y: $kendo-chip-padding-y-lg,
-        font-size: $kendo-chip-font-size-lg,
-        line-height: $kendo-chip-line-height-lg
+        padding-x: $kendo-chip-lg-padding-x,
+        padding-y: $kendo-chip-lg-padding-y,
+        font-size: $kendo-chip-lg-font-size,
+        line-height: $kendo-chip-lg-line-height
     )
 ) !default;
 
@@ -88,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( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if( $kendo-is-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;
@@ -125,7 +128,7 @@ $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( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip

package/scss/color-preview/_layout.scss

@@ -4,8 +4,8 @@
     .k-color-preview {
         width: 100%;
         height: 100%;
-        border-width: $color-preview-border-width;
-        border-radius: $color-preview-border-radius;
+        border-width: $kendo-color-preview-border-width;
+        border-radius: $kendo-color-preview-border-radius;
         box-sizing: border-box;
         border-style: solid;
         display: inline-flex;
@@ -39,7 +39,7 @@
         gap: 2px;
 
         .k-color-preview-mask {
-            width: calc( #{$icon-size} - 2px );
+            width: calc( #{$kendo-icon-size} - 2px );
             height: 2px;
         }
     }
@@ -59,7 +59,7 @@
         top: 0;
         left: 0;
         z-index: -1;
-        background: $color-preview-transparent-color-image;
+        background: $kendo-color-preview-transparent-color-image;
         background-size: contain;
         background-position: 0 0;
     }
@@ -68,8 +68,8 @@
     // No Color
     .k-no-color .k-color-preview-mask::before {
         content: "";
-        background-color: $color-preview-no-color-bg;
-        background-image: $color-preview-no-color-image;
+        background-color: $kendo-color-preview-no-color-bg;
+        background-image: $kendo-color-preview-no-color-image;
         background-size: 100% 100%;
         background-position: 0 0;
     }

package/scss/color-preview/_theme.scss

@@ -3,14 +3,14 @@
     // Color Preview
     .k-color-preview {
         @include fill(
-            $color-preview-text,
-            $color-preview-bg,
-            $color-preview-border
+            $kendo-color-preview-text,
+            $kendo-color-preview-bg,
+            $kendo-color-preview-border
         );
 
         &:hover,
         &.k-hover {
-            @include fill( $border: $color-preview-hover-border );
+            @include fill( $border: $kendo-color-preview-hover-border );
         }
     }
 

package/scss/color-preview/_variables.scss

@@ -1,14 +1,14 @@
 // Color Preview
-$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: $kendo-component-border !default;
-$color-preview-hover-border: $kendo-hover-border !default;
+$kendo-color-preview-border-radius: $kendo-border-radius-md !default;
+$kendo-color-preview-border-width: 1px !default;
+$kendo-color-preview-bg: null !default;
+$kendo-color-preview-text: null !default;
+$kendo-color-preview-border: $kendo-component-border !default;
+$kendo-color-preview-hover-border: $kendo-hover-border !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;
+$kendo-color-preview-no-color-bg: $kendo-color-white !default;
+$kendo-color-preview-no-color-text: $kendo-color-error !default;
+$kendo-color-preview-no-color-border: null !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;
+$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;

package/scss/coloreditor/_layout.scss

@@ -2,15 +2,15 @@
 
     // ColorEditor/FlatColorPicker
     .k-coloreditor {
-        @include border-radius( $coloreditor-border-radius );
-        min-width: $coloreditor-min-width;
-        border-width: $coloreditor-border-width;
+        @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: $coloreditor-font-size;
-        font-family: $coloreditor-font-family;
-        line-height: $coloreditor-line-height;
+        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;
@@ -24,11 +24,11 @@
 
     // Header
     .k-coloreditor-header {
-        padding: $coloreditor-header-padding-y $coloreditor-header-padding-x 0;
+        padding: $kendo-color-editor-header-padding-y $kendo-color-editor-header-padding-x 0;
     }
 
     .k-coloreditor-header-actions {
-        gap: $coloreditor-header-actions-gap;
+        gap: $kendo-color-editor-header-actions-gap;
     }
 
     .k-coloreditor-preview {
@@ -36,20 +36,20 @@
         flex-flow: column nowrap;
         align-items: stretch;
         justify-content: center;
-        gap: $coloreditor-preview-gap;
+        gap: $kendo-color-editor-preview-gap;
         position: relative;
         z-index: 1;
     }
     .k-coloreditor-preview .k-color-preview {
-        width: $coloreditor-color-preview-width;
-        height: $coloreditor-color-preview-height;
+        width: $kendo-color-editor-color-preview-width;
+        height: $kendo-color-editor-color-preview-height;
     }
 
     // Views
     .k-coloreditor-views {
-        min-width: calc( var(--kendo-color-preview-width, #{$colorpalette-tile-width}) * var(--kendo-color-preview-columns, 10) );
-        padding: $coloreditor-views-padding-y $coloreditor-views-padding-x;
-        gap: $coloreditor-views-gap;
+        min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
+        padding: $kendo-color-editor-views-padding-y $kendo-color-editor-views-padding-x;
+        gap: $kendo-color-editor-views-gap;
 
         .k-colorgradient {
             padding: 0;
@@ -58,8 +58,8 @@
         }
         .k-colorgradient:focus,
         .k-colorgradient.k-focus {
-            outline: $coloreditor-colorgradient-focus-outline dotted;
-            outline-offset: $coloreditor-colorgradient-focus-outline-offset;
+            outline: $kendo-color-editor-color-gradient-focus-outline dotted;
+            outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset;
             border-radius: 0;
         }
 
@@ -68,8 +68,8 @@
         }
 
         .k-colorpalette-tile {
-            width: var(--kendo-color-preview-width, $colorpalette-tile-width);
-            height: var(--kendo-color-preview-height, $colorpalette-tile-height);
+            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
+            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
         }
     }
 

package/scss/coloreditor/_theme.scss

@@ -3,22 +3,22 @@
     // ColorEditor/FlatColorPicker
     .k-coloreditor {
         @include fill(
-            $coloreditor-text,
-            $coloreditor-bg,
-            $coloreditor-border
+            $kendo-color-editor-text,
+            $kendo-color-editor-bg,
+            $kendo-color-editor-border
         );
     }
 
     .k-coloreditor:focus,
     .k-coloreditor.k-focus {
-        @include fill( $border: $coloreditor-focus-border );
-        @include box-shadow( $coloreditor-focus-shadow );
+        @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: $coloreditor-colorgradient-focus-outline-color;
+        outline-color: $kendo-color-editor-color-gradient-focus-outline-color;
     }
 
 }

package/scss/coloreditor/_variables.scss

@@ -1,31 +1,31 @@
 // Coloreditor/FlatColorPicker
-$coloreditor-spacer: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-color-editor-spacer: k-map-get( $kendo-spacing, 3 ) !default;
 
-$coloreditor-min-width: 272px !default;
-$coloreditor-border-width: 1px !default;
-$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: $kendo-component-bg !default;
-$coloreditor-text: $kendo-component-text !default;
-$coloreditor-border: $kendo-component-border !default;
+$kendo-color-editor-min-width: 272px !default;
+$kendo-color-editor-border-width: 1px !default;
+$kendo-color-editor-border-radius: $kendo-border-radius-md !default;
+$kendo-color-editor-font-family: $kendo-font-family !default;
+$kendo-color-editor-font-size: $kendo-font-size-md !default;
+$kendo-color-editor-line-height: $kendo-line-height-md !default;
+$kendo-color-editor-bg: $kendo-component-bg !default;
+$kendo-color-editor-text: $kendo-component-text !default;
+$kendo-color-editor-border: $kendo-component-border !default;
 
-$coloreditor-focus-border: null !default;
-$coloreditor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-color-editor-focus-border: null !default;
+$kendo-color-editor-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: k-math-div( $coloreditor-spacer, 1.5 ) !default;
+$kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
+$kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
+$kendo-color-editor-header-actions-gap: k-math-div( $kendo-color-editor-spacer, 1.5 ) !default;
 
-$coloreditor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
-$coloreditor-color-preview-width: 32px !default;
-$coloreditor-color-preview-height: 12px !default;
+$kendo-color-editor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-editor-color-preview-width: 32px !default;
+$kendo-color-editor-color-preview-height: 12px !default;
 
-$coloreditor-views-padding-y: $coloreditor-spacer !default;
-$coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
-$coloreditor-views-gap: $coloreditor-spacer !default;
+$kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
+$kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
+$kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
 
-$coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
-$coloreditor-colorgradient-focus-outline: 2px !default;
-$coloreditor-colorgradient-focus-outline-offset: 4px !default;
+$kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$kendo-color-editor-color-gradient-focus-outline: 2px !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;