@progress/kendo-theme-material 5.12.1-dev.2 → 5.12.1-dev.4

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: 1.25 !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: 1.25 !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: k-try-shade( $kendo-button-bg, .5 ) !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: k-try-shade( $kendo-button-bg, .5 ) !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-component-text !default;
-$chat-border: $kendo-component-border !default;
+$kendo-chat-bg: $kendo-app-bg !default;
+$kendo-chat-text: $kendo-component-text !default;
+$kendo-chat-border: $kendo-component-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( black, .08 ) !default;
-$chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
-$chat-bubble-selected-shadow: 0 3px 10px rgba( 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( black, .08 ) !default;
+$kendo-chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
+$kendo-chat-bubble-selected-shadow: 0 3px 10px rgba( black, .16 ) !default;
 
-$chat-alt-bubble-bg: $kendo-color-primary !default;
-$chat-alt-bubble-text: k-contrast-color( $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-color( $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/_theme.scss

@@ -7,7 +7,7 @@
 
         // Disabled state
         .k-checkbox:disabled + & {
-            color: if( $dark-theme, $light-secondary-text, $dark-secondary-text );
+            color: if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text );
             opacity: 1;
             filter: none;
         }

package/scss/checkbox/_variables.scss

@@ -34,7 +34,7 @@ $kendo-checkbox-bg: null !default;
 $kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$kendo-checkbox-border: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) !default;
+$kendo-checkbox-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
@@ -153,7 +153,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/_theme.scss

@@ -28,7 +28,7 @@
                 }
             } @else if($name == "warning") {
                 @include fill(
-                    $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                    $color: if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
                 );
 
                 &:focus,
@@ -41,14 +41,14 @@
                 &.k-hover {
                     @include fill(
                         $bg: k-try-tint( $color, 80% ),
-                        $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                        $color: if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
                     );
                 }
 
                 &.k-selected {
                     @include fill(
                         $bg: k-try-tint( $color, 65% ),
-                        $color: if( $dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
+                        $color: if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text)
                     );
                 }
             } @else {

package/scss/chip/_variables.scss

@@ -13,62 +13,62 @@ $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: k-math-div( 18, 14 ) !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;
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: if( $dark-theme, $kendo-color-white, $kendo-color-black) !default;
+$kendo-chip-base-bg: if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black) !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -82,7 +82,7 @@ $kendo-chip-theme-colors: (
 
 /// The base background color of solid chip.
 /// @group chip
-$kendo-chip-solid-bg: if( $dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) !default;
+$kendo-chip-solid-bg: if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) !default;
 /// The base text color of solid chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-button-text !default;

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/_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: 294px !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: 294px !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: $kendo-hover-border !default;
-$coloreditor-focus-shadow: $box-shadow-depth-2 !default;
+$kendo-color-editor-focus-border: $kendo-hover-border !default;
+$kendo-color-editor-focus-shadow: $box-shadow-depth-2 !default;
 
-$coloreditor-header-padding-y: $coloreditor-spacer !default;
-$coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
-$coloreditor-header-actions-gap: k-map-get( $kendo-spacing, 2 ) !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-map-get( $kendo-spacing, 2 ) !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: 2px !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: 2px !default;

package/scss/colorgradient/_variables.scss

@@ -1,51 +1,51 @@
 // ColorGradient
-$colorgradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
-
-$colorgradient-width: 294px !default;
-$colorgradient-border-width: 1px !default;
-$colorgradient-border-radius: $kendo-border-radius-md !default;
-$colorgradient-padding-y: $colorgradient-spacer !default;
-$colorgradient-padding-x: $colorgradient-padding-y !default;
-$colorgradient-gap: $colorgradient-spacer !default;
-$colorgradient-font-family: $font-family !default;
-$colorgradient-font-size: $font-size !default;
-$colorgradient-line-height: $line-height !default;
-$colorgradient-bg: $kendo-component-bg !default;
-$colorgradient-text: $kendo-component-text !default;
-$colorgradient-border: $kendo-component-border !default;
-
-$colorgradient-focus-border: $kendo-hover-border !default;
-$colorgradient-focus-shadow: $box-shadow-depth-2 !default;
-
-$colorgradient-canvas-border-radius: $kendo-border-radius-md !default;
-$colorgradient-canvas-gap: $colorgradient-spacer !default;
-$colorgradient-canvas-rectangle-height: 180px !default;
-
-$colorgradient-slider-track-size: 10px !default;
-$colorgradient-slider-border-radius: 10px !default;
-$colorgradient-slider-draghandle-border-width: 3px !default;
-
-$colorgradient-slider-vertical-size: 180px !default;
-$colorgradient-slider-horizontal-size: 100% !default;
-
-$colorgradient-draghandle-width: 14px !default;
-$colorgradient-draghandle-height: 14px !default;
-$colorgradient-draghandle-border-width: 1px !default;
-$colorgradient-draghandle-border-radius: 50% !default;
-$colorgradient-draghandle-bg: transparent !default;
-$colorgradient-draghandle-text: null !default;
-$colorgradient-draghandle-border: rgba( white, .8 ) !default;
-$colorgradient-draghandle-shadow: 0 1px 4px rgba( black, .5 ) !default;
-$colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
-$colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
-
-$colorgradient-canvas-draghandle-margin-y: - k-math-div( $colorgradient-draghandle-height, 2 ) !default;
-$colorgradient-canvas-draghandle-margin-x: - k-math-div( $colorgradient-draghandle-width, 2 ) !default;
-
-$colorgradient-input-width: 50px !default;
-$colorgradient-input-gap: k-map-get( $kendo-spacing, 2 ) !default;
-$colorgradient-input-label-gap: k-map-get( $kendo-spacing, 1 ) !default;
-$colorgradient-input-label-text: $kendo-subtle-text !default;
-
-$colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
-$colorgradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-color-gradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
+
+$kendo-color-gradient-width: 294px !default;
+$kendo-color-gradient-border-width: 1px !default;
+$kendo-color-gradient-border-radius: $kendo-border-radius-md !default;
+$kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
+$kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
+$kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
+$kendo-color-gradient-font-family: $kendo-font-family !default;
+$kendo-color-gradient-font-size: $kendo-font-size-md !default;
+$kendo-color-gradient-line-height: $kendo-line-height-md !default;
+$kendo-color-gradient-bg: $kendo-component-bg !default;
+$kendo-color-gradient-text: $kendo-component-text !default;
+$kendo-color-gradient-border: $kendo-component-border !default;
+
+$kendo-color-gradient-focus-border: $kendo-hover-border !default;
+$kendo-color-gradient-focus-shadow: $box-shadow-depth-2 !default;
+
+$kendo-color-gradient-canvas-border-radius: $kendo-border-radius-md !default;
+$kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
+$kendo-color-gradient-canvas-rectangle-height: 180px !default;
+
+$kendo-color-gradient-slider-track-size: 10px !default;
+$kendo-color-gradient-slider-border-radius: 10px !default;
+$kendo-color-gradient-slider-draghandle-border-width: 3px !default;
+
+$kendo-color-gradient-slider-vertical-size: 180px !default;
+$kendo-color-gradient-slider-horizontal-size: 100% !default;
+
+$kendo-color-gradient-draghandle-width: 14px !default;
+$kendo-color-gradient-draghandle-height: 14px !default;
+$kendo-color-gradient-draghandle-border-width: 1px !default;
+$kendo-color-gradient-draghandle-border-radius: 50% !default;
+$kendo-color-gradient-draghandle-bg: transparent !default;
+$kendo-color-gradient-draghandle-text: null !default;
+$kendo-color-gradient-draghandle-border: rgba( white, .8 ) !default;
+$kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba( black, .5 ) !default;
+$kendo-color-gradient-draghandle-focus-shadow: 0 1px 4px black !default;
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+
+$kendo-color-gradient-canvas-draghandle-margin-y: - k-math-div( $kendo-color-gradient-draghandle-height, 2 ) !default;
+$kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gradient-draghandle-width, 2 ) !default;
+
+$kendo-color-gradient-input-width: 50px !default;
+$kendo-color-gradient-input-gap: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-color-gradient-input-label-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
+
+$kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-medium !default;
+$kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;

package/scss/colorpalette/_variables.scss

@@ -1,10 +1,10 @@
 // Colorpalette
-$colorpalette-font-family: $font-family !default;
-$colorpalette-font-size: $font-size !default;
-$colorpalette-line-height: 0 !default;
+$kendo-color-palette-font-family: $kendo-font-family !default;
+$kendo-color-palette-font-size: $kendo-font-size-md !default;
+$kendo-color-palette-line-height: 0 !default;
 
-$colorpalette-tile-width: k-map-get( $kendo-spacing, 6 ) !default;
-$colorpalette-tile-height: $colorpalette-tile-width !default;
-$colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
-$colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
-$colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
+$kendo-color-palette-tile-width: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;