@progress/kendo-theme-fluent 5.12.1-dev.2 → 5.12.1-dev.3

package/scss/coloreditor/_variables.scss

@@ -4,90 +4,90 @@
 
 /// Spacer of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-spacer: map.get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-spacer: map.get( $kendo-spacing, 2 ) !default;
 
 /// Min width of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-min-width: 260px !default;
+$kendo-color-editor-min-width: 260px !default;
 /// Border width of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-border-width: 1px !default;
+$kendo-color-editor-border-width: 1px !default;
 /// Border radius of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-editor-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Font family of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// Background color of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-color-editor-bg: var( --kendo-component-bg, initial ) !default;
 /// Text color of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-text: var( --kendo-component-text, initial ) !default;
+$kendo-color-editor-text: var( --kendo-component-text, initial ) !default;
 /// Border color of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-border: var( --kendo-component-border, initial ) !default;
+$kendo-color-editor-border: var( --kendo-component-border, initial ) !default;
 /// Shadow of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// Focus border color of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-focus-border: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-editor-focus-border: get-theme-color-var( neutral-20 ) !default;
 /// Focus shadow of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// Horizontal padding of the color editor header.
 /// @group coloreditor
-$kendo-coloreditor-header-padding-y: $kendo-coloreditor-spacer !default;
+$kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 /// Vertical padding of the color editor header.
 /// @group coloreditor
-$kendo-coloreditor-header-padding-x: $kendo-coloreditor-header-padding-y !default;
+$kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// Spacing of the color editor header.
 /// @group coloreditor
-$kendo-coloreditor-header-actions-spacing: math.div( $kendo-coloreditor-spacer, 2 ) !default;
+$kendo-color-editor-header-actions-spacing: math.div( $kendo-color-editor-spacer, 2 ) !default;
 
 /// Width of the color editor preview.
 /// @group coloreditor
-$kendo-coloreditor-color-preview-width: 34px !default;
+$kendo-color-editor-color-preview-width: 34px !default;
 /// Height of the color editor preview.
 /// @group coloreditor
-$kendo-coloreditor-color-preview-height: 14px !default;
+$kendo-color-editor-color-preview-height: 14px !default;
 
 /// Spacing between the colors in the color editor preview.
 /// @group coloreditor
-$kendo-coloreditor-preview-spacing: map.get( $kendo-spacing, 1 ) !default;
+$kendo-color-editor-preview-spacing: map.get( $kendo-spacing, 1 ) !default;
 
 /// Horizontal padding of the color editor views container.
 /// @group coloreditor
-$kendo-coloreditor-views-padding-y: $kendo-coloreditor-spacer !default;
+$kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
 /// Vertical padding of the color editor views container.
 /// @group coloreditor
-$kendo-coloreditor-views-padding-x: $kendo-coloreditor-views-padding-y !default;
+$kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
 /// Spacing of the color editor views container.
 /// @group coloreditor
-$kendo-coloreditor-views-spacing: $kendo-coloreditor-spacer !default;
+$kendo-color-editor-views-spacing: $kendo-color-editor-spacer !default;
 
 /// Horizontal padding of the color editor footer.
 /// @group coloreditor
-$kendo-coloreditor-footer-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-footer-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the color editor footer.
 /// @group coloreditor
-$kendo-coloreditor-footer-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-color-editor-footer-padding-x: map.get( $kendo-spacing, 2 ) !default;
 
 /// The color of the focused colorgradient.
 /// @group coloreditor
-$kendo-coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
+$kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
 /// The outline of the focused colorgradient.
 /// @group coloreditor
-$kendo-coloreditor-colorgradient-focus-outline: 2px !default;
+$kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused colorgradient.
 /// @group coloreditor
-$kendo-coloreditor-colorgradient-focus-outline-offset: 2px !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;

package/scss/coloreditor/index.scss

@@ -23,7 +23,7 @@ $_kendo-module-meta: (
 // Expose
 @mixin coloreditor-styles() {
     @include module.render( "coloreditor" ) {
-        @include kendo-coloreditor--layout();
-        @include kendo-coloreditor--theme();
+        @include kendo-color-editor--layout();
+        @include kendo-color-editor--theme();
     }
 }

package/scss/colorgradient/_layout.scss

@@ -1,25 +1,25 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorgradient--layout() {
+@mixin kendo-color-gradient--layout() {
 
     // ColorGradient
     .k-colorgradient {
-        @include border-radius( var( --kendo-colorgradient-border-radius, #{$kendo-colorgradient-border-radius} ) );
-        width: var( --kendo-colorgradient-width, #{$kendo-colorgradient-width} );
-        padding-inline: var( --kendo-colorgradient-padding-x, #{$kendo-colorgradient-padding-x} );
-        padding-block: var( --kendo-colorgradient-padding-y, #{$kendo-colorgradient-padding-y} );
+        @include border-radius( var( --kendo-color-gradient-border-radius, #{$kendo-color-gradient-border-radius} ) );
+        width: var( --kendo-color-gradient-width, #{$kendo-color-gradient-width} );
+        padding-inline: var( --kendo-color-gradient-padding-x, #{$kendo-color-gradient-padding-x} );
+        padding-block: var( --kendo-color-gradient-padding-y, #{$kendo-color-gradient-padding-y} );
         border-style: solid;
-        border-width: var( --kendo-colorgradient-border-width, #{$kendo-colorgradient-border-width} );
+        border-width: var( --kendo-color-gradient-border-width, #{$kendo-color-gradient-border-width} );
         box-sizing: border-box;
         outline: 0;
-        font-size: var( --kendo-colorgradient-font-size, #{$kendo-colorgradient-font-size} );
-        font-family: var( --kendo-colorgradient-font-family, #{$kendo-colorgradient-font-family} );
-        line-height: var( --kendo-colorgradient-line-height, #{$kendo-colorgradient-line-height} );
+        font-size: var( --kendo-color-gradient-font-size, #{$kendo-color-gradient-font-size} );
+        font-family: var( --kendo-color-gradient-font-family, #{$kendo-color-gradient-font-family} );
+        line-height: var( --kendo-color-gradient-line-height, #{$kendo-color-gradient-line-height} );
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: var( --kendo-colorgradient-spacing, #{$kendo-colorgradient-spacing} );
+        gap: var( --kendo-color-gradient-spacing, #{$kendo-color-gradient-spacing} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -32,11 +32,11 @@
 
     // Canvas
     .k-colorgradient-canvas {
-        gap: var( --kendo-colorgradient-canvas-spacing, #{$kendo-colorgradient-canvas-spacing} );
+        gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
 
         .k-hsv-rectangle {
-            @include border-radius( var( --kendo-colorgradient-canvas-border-radius, #{$kendo-colorgradient-canvas-border-radius} ) );
-            border-width:  var( --kendo-colorgradient-canvas-border-width, #{$kendo-colorgradient-canvas-border-width} );
+            @include border-radius( var( --kendo-color-gradient-canvas-border-radius, #{$kendo-color-gradient-canvas-border-radius} ) );
+            border-width:  var( --kendo-color-gradient-canvas-border-width, #{$kendo-color-gradient-canvas-border-width} );
             border-style: solid;
             position: relative;
             flex: 1 1 auto;
@@ -44,12 +44,12 @@
         }
 
         .k-hsv-gradient {
-            height: var( --kendo-colorgradient-canvas-rectangle-height, #{$kendo-colorgradient-canvas-rectangle-height} );
+            height: var( --kendo-color-gradient-canvas-rectangle-height, #{$kendo-color-gradient-canvas-rectangle-height} );
         }
 
         .k-hsv-draghandle {
-            margin-block-start: var( --kendo-colorgradient-canvas-draghandle-offset-y, #{$kendo-colorgradient-canvas-draghandle-offset-y} );
-            margin-inline-start: var( --kendo-colorgradient-canvas-draghandle--offset-x, #{$kendo-colorgradient-canvas-draghandle-offset-x} );
+            margin-block-start: var( --kendo-color-gradient-canvas-draghandle-offset-y, #{$kendo-color-gradient-canvas-draghandle-offset-y} );
+            margin-inline-start: var( --kendo-color-gradient-canvas-draghandle--offset-x, #{$kendo-color-gradient-canvas-draghandle-offset-x} );
             position: absolute;
             top: 50%;
             left: 50%;
@@ -61,15 +61,15 @@
         .k-hsv-controls {
             position: relative;
             flex-shrink: 0;
-            gap: var( --kendo-colorgradient-canvas-spacing, #{$kendo-colorgradient-canvas-spacing} );
+            gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
         }
     }
 
     // DragHandle
     .k-colorgradient .k-draghandle {
-        width: var( --kendo-colorgradient-draghandle-width, #{$kendo-colorgradient-draghandle-width} );
-        height: var( --kendo-colorgradient-draghandle-height, #{$kendo-colorgradient-draghandle-height} );
-        border-width: var( --kendo-colorgradient-draghandle-border-width, #{$kendo-colorgradient-draghandle-border-width} );
+        width: var( --kendo-color-gradient-draghandle-width, #{$kendo-color-gradient-draghandle-width} );
+        height: var( --kendo-color-gradient-draghandle-height, #{$kendo-color-gradient-draghandle-height} );
+        border-width: var( --kendo-color-gradient-draghandle-border-width, #{$kendo-color-gradient-draghandle-border-width} );
         box-sizing: border-box;
     }
 
@@ -77,27 +77,27 @@
     .k-colorgradient-slider {
 
         &.k-slider-vertical {
-            width: var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
-            height: var( --kendo-colorgradient-slider-vertical-size, #{$kendo-colorgradient-slider-vertical-size} );
-            flex: 0 0 var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
+            width: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
+            height: var( --kendo-color-gradient-slider-vertical-size, #{$kendo-color-gradient-slider-vertical-size} );
+            flex: 0 0 var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
         }
         &.k-slider-vertical .k-slider-track {
-            width: var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
-            border-radius: var( --kendo-colorgradient-slider-border-radius, #{$kendo-colorgradient-slider-border-radius} );
+            width: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
+            border-radius: var( --kendo-color-gradient-slider-border-radius, #{$kendo-color-gradient-slider-border-radius} );
 
             // Required since the track is absolutely left positioned
-            margin-left: calc( -1 * (var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} ) / 2) );
+            margin-left: calc( -1 * (var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} ) / 2) );
         }
 
         &.k-slider-horizontal {
-            width: var( --kendo-colorgradient-slider-horizontal-size, #{$kendo-colorgradient-slider-horizontal-size} );
-            height: var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
-            flex: 0 0 var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
+            width: var( --kendo-color-gradient-slider-horizontal-size, #{$kendo-color-gradient-slider-horizontal-size} );
+            height: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
+            flex: 0 0 var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
         }
         &.k-slider-horizontal .k-slider-track {
-            height: var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
-            border-radius: var( --kendo-colorgradient-slider-border-radius, #{$kendo-colorgradient-slider-border-radius} );
-            margin-block-start: calc( ( var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} ) / 2 ) * -1 );
+            height: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
+            border-radius: var( --kendo-color-gradient-slider-border-radius, #{$kendo-color-gradient-slider-border-radius} );
+            margin-block-start: calc( ( var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} ) / 2 ) * -1 );
         }
 
         &.k-alpha-slider .k-slider-track::before {
@@ -111,7 +111,7 @@
         }
 
         .k-slider-track {
-            border-width:  var( --kendo-colorgradient-slider-border-width, #{$kendo-colorgradient-slider-border-width} );
+            border-width:  var( --kendo-color-gradient-slider-border-width, #{$kendo-color-gradient-slider-border-width} );
             border-style: solid;
             transform: none;
             z-index: auto;
@@ -130,19 +130,19 @@
 
     // Inputs
     .k-colorgradient-inputs {
-        gap: var( --kendo-colorgradient-input-spacing, #{$kendo-colorgradient-input-spacing} );
+        gap: var( --kendo-color-gradient-input-spacing, #{$kendo-color-gradient-input-spacing} );
 
         .k-colorgradient-input-label {
-            font-size: var( --kendo-colorgradient-input-label-font-size, #{$kendo-colorgradient-input-label-font-size} );
+            font-size: var( --kendo-color-gradient-input-label-font-size, #{$kendo-color-gradient-input-label-font-size} );
             text-transform: uppercase;
         }
 
         > .k-vstack {
-            gap: var( --kendo-colorgradient-input-label-spacing, #{$kendo-colorgradient-input-label-spacing} );
+            gap: var( --kendo-color-gradient-input-label-spacing, #{$kendo-color-gradient-input-label-spacing} );
         }
 
         .k-numerictextbox {
-            width: var( --kendo-colorgradient-input-width, #{$kendo-colorgradient-input-width} );
+            width: var( --kendo-color-gradient-input-width, #{$kendo-color-gradient-input-width} );
         }
     }
 
@@ -152,21 +152,21 @@
         > div {
             display: flex;
             flex-flow: row nowrap;
-            gap: var( --kendo-colorgradient-contrast-spacing, #{$kendo-colorgradient-contrast-spacing} );
+            gap: var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} );
         }
 
         .k-contrast-ratio {
-            margin-block-end: var( --kendo-colorgradient-contrast-spacing, #{$kendo-colorgradient-contrast-spacing} );
+            margin-block-end: var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} );
         }
 
         .k-contrast-ratio-text {
-            font-weight: var( --kendo-colorgradient-contrast-ratio-font-weight, #{$kendo-colorgradient-contrast-ratio-font-weight} );
+            font-weight: var( --kendo-color-gradient-contrast-ratio-font-weight, #{$kendo-color-gradient-contrast-ratio-font-weight} );
         }
 
         .k-contrast-validation {
             display: inline-flex;
             align-items: center;
-            gap: calc( var( --kendo-colorgradient-contrast-spacing,  #{$kendo-colorgradient-contrast-spacing} ) / 2 );
+            gap: calc( var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} ) / 2 );
 
             .k-icon {
                 vertical-align: middle;

package/scss/colorgradient/_theme.scss

@@ -1,27 +1,27 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-colorgradient--theme() {
+@mixin kendo-color-gradient--theme() {
 
     // ColorGradient
     .k-colorgradient {
         @include fill(
-            var( --kendo-colorgradient-text, #{$kendo-colorgradient-text} ),
-            var( --kendo-colorgradient-bg, #{$kendo-colorgradient-bg} ),
-            var( --kendo-colorgradient-border, #{$kendo-colorgradient-border} )
+            var( --kendo-color-gradient-text, #{$kendo-color-gradient-text} ),
+            var( --kendo-color-gradient-bg, #{$kendo-color-gradient-bg} ),
+            var( --kendo-color-gradient-border, #{$kendo-color-gradient-border} )
         );
         @include box-shadow(
-            var( --kendo-colorgradient-shadow, #{$kendo-colorgradient-shadow} )
+            var( --kendo-color-gradient-shadow, #{$kendo-color-gradient-shadow} )
         );
     }
 
     .k-colorgradient:focus,
     .k-colorgradient.k-focus {
         @include fill(
-            $border: var( --kendo-colorgradient-focus-border, #{$kendo-colorgradient-focus-border} )
+            $border: var( --kendo-color-gradient-focus-border, #{$kendo-color-gradient-focus-border} )
         );
         @include box-shadow(
-            var( --kendo-colorgradient-focus-shadow, #{$kendo-colorgradient-focus-shadow} )
+            var( --kendo-color-gradient-focus-shadow, #{$kendo-color-gradient-focus-shadow} )
         );
     }
 
@@ -33,7 +33,7 @@
 
         .k-hsv-rectangle {
             @include fill(
-                $border: var( --kendo-colorgradient-canvas-rectangle-border, #{$kendo-colorgradient-canvas-rectangle-border} )
+                $border: var( --kendo-color-gradient-canvas-rectangle-border, #{$kendo-color-gradient-canvas-rectangle-border} )
             );
         }
     }
@@ -41,19 +41,19 @@
     // DragHandle
     .k-colorgradient .k-draghandle {
         @include fill(
-            $border: var( --kendo-colorgradient-draghandle-border, #{$kendo-colorgradient-draghandle-border })
+            $border: var( --kendo-color-gradient-draghandle-border, #{$kendo-color-gradient-draghandle-border })
         );
         @include box-shadow(
-            var( --kendo-colorgradient-draghandle-shadow, #{$kendo-colorgradient-draghandle-shadow} )
+            var( --kendo-color-gradient-draghandle-shadow, #{$kendo-color-gradient-draghandle-shadow} )
         );
 
         &:focus,
         &.k-focus {
             @include fill(
-                $border: var( --kendo-colorgradient-draghandle-focus-border, #{$kendo-colorgradient-draghandle-focus-border} )
+                $border: var( --kendo-color-gradient-draghandle-focus-border, #{$kendo-color-gradient-draghandle-focus-border} )
             );
             @include box-shadow(
-                var( --kendo-colorgradient-draghandle-focus-shadow, #{$kendo-colorgradient-draghandle-focus-shadow} )
+                var( --kendo-color-gradient-draghandle-focus-shadow, #{$kendo-color-gradient-draghandle-focus-shadow} )
             );
         }
 
@@ -61,20 +61,20 @@
         &:hover,
         &.k-hover {
             @include box-shadow(
-                var( --kendo-colorgradient-draghandle-hover-shadow, #{$kendo-colorgradient-draghandle-hover-shadow} )
+                var( --kendo-color-gradient-draghandle-hover-shadow, #{$kendo-color-gradient-draghandle-hover-shadow} )
             );
         }
     }
 
     .k-colorgradient .k-hsv-draghandle {
         @include box-shadow(
-            var( --kendo-colorgradient-canvas-draghandle-shadow, #{$kendo-colorgradient-canvas-draghandle-shadow} )
+            var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
         );
 
         &:focus,
         &.k-focus {
             @include box-shadow(
-                var( --kendo-colorgradient-canvas-draghandle-shadow, #{$kendo-colorgradient-canvas-draghandle-shadow} )
+                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
             );
         }
 
@@ -82,7 +82,7 @@
         &:hover,
         &.k-hover {
             @include box-shadow(
-                var( --kendo-colorgradient-canvas-draghandle-shadow, #{$kendo-colorgradient-canvas-draghandle-shadow} )
+                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
             );
         }
     }
@@ -90,7 +90,7 @@
     // Slider
     .k-colorgradient-slider .k-slider-track {
         @include fill(
-             $border: var( --kendo-colorgradient-slider-border, #{$kendo-colorgradient-slider-border} )
+             $border: var( --kendo-color-gradient-slider-border, #{$kendo-color-gradient-slider-border} )
         );
     }
 
@@ -105,13 +105,13 @@
     }
 
     .k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
-        background: url( $kendo-colorgradient-slider-alpha-bgr ) center repeat;
+        background: url( $kendo-color-gradient-slider-alpha-bgr ) center repeat;
     }
 
     // Inputs
     .k-colorgradient-input-label {
         @include fill(
-             $color: var( --kendo-colorgradient-input-label-text, #{$kendo-colorgradient-input-label-text} )
+             $color: var( --kendo-color-gradient-input-label-text, #{$kendo-color-gradient-input-label-text} )
         );
     }
 }

package/scss/colorgradient/_variables.scss

@@ -4,149 +4,149 @@
 
 /// Spacer of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-spacer: map.get( $kendo-spacing, 4 ) !default;
+$kendo-color-gradient-spacer: map.get( $kendo-spacing, 4 ) !default;
 
 /// Default width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-width: 260px !default;
+$kendo-color-gradient-width: 260px !default;
 /// Border width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-border-width: 1px !default;
+$kendo-color-gradient-border-width: 1px !default;
 /// Border radius of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Vertical padding of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-padding-y: $kendo-colorgradient-spacer !default;
+$kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
 /// Horizontal padding of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-padding-x: math.div( $kendo-colorgradient-spacer, 2 ) !default;
+$kendo-color-gradient-padding-x: math.div( $kendo-color-gradient-spacer, 2 ) !default;
 /// Spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-spacing: $kendo-colorgradient-spacer !default;
+$kendo-color-gradient-spacing: $kendo-color-gradient-spacer !default;
 /// Font family of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Background color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-color-gradient-bg: var( --kendo-component-bg, initial ) !default;
 /// Text color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-text: var( --kendo-component-text, initial ) !default;
+$kendo-color-gradient-text: var( --kendo-component-text, initial ) !default;
 /// Border color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-border: var( --kendo-component-border, initial ) !default;
+$kendo-color-gradient-border: var( --kendo-component-border, initial ) !default;
 /// Shadow of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// Focus border of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-focus-border: get-theme-color-var( neutral-20 ) !default;
+$kendo-color-gradient-focus-border: get-theme-color-var( neutral-20 ) !default;
 /// Focus shadow of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// Border radius of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Border width of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-border-width: 0 !default;
+$kendo-color-gradient-canvas-border-width: 0 !default;
 /// Spacing of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-spacing: math.div( $kendo-colorgradient-spacer, 2 ) !default;
+$kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2 ) !default;
 /// Height the color gradient canvas hsv rectangle.
 /// @group cologradient
-$kendo-colorgradient-canvas-rectangle-height: 180px !default;
+$kendo-color-gradient-canvas-rectangle-height: 180px !default;
 /// Border color of the color gradient canvas hsv rectangle.
 /// @group cologradient
-$kendo-colorgradient-canvas-rectangle-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-canvas-rectangle-border: get-theme-color-var( neutral-30 ) !default;
 /// Shadow of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
+$kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
 
 /// Default input width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-width: 48px !default;
+$kendo-color-gradient-input-width: 48px !default;
 /// Input spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-spacing: math.div( $kendo-colorgradient-spacer, 4 ) !default;
+$kendo-color-gradient-input-spacing: math.div( $kendo-color-gradient-spacer, 4 ) !default;
 /// Input label font size of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-color-gradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Input label spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-spacing: math.div( $kendo-colorgradient-spacer, 4 ) !default;
+$kendo-color-gradient-input-label-spacing: math.div( $kendo-color-gradient-spacer, 4 ) !default;
 /// Input label text color of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
 
 /// Font weight of the color gradient contrast ratio text.
 /// @group cologradient
-$kendo-colorgradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// Spacing of the color gradient contrast tool.
 /// @group cologradient
-$kendo-colorgradient-contrast-spacing: math.div( $kendo-colorgradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;
 
 /// The size of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-track-size: 20px !default;
+$kendo-color-gradient-slider-track-size: 20px !default;
 /// Border radius of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Border width of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-border-width: 1px !default;
+$kendo-color-gradient-slider-border-width: 1px !default;
 /// Border color of the color gradient slider.
 /// @group cologradient
-$kendo-colorgradient-slider-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-slider-border: get-theme-color-var( neutral-30 ) !default;
 
 /// Height of the color gradient vertical slider.
 /// @group cologradient
-$kendo-colorgradient-slider-vertical-size: 180px !default;
+$kendo-color-gradient-slider-vertical-size: 180px !default;
 /// Width of the color gradient horizontal slider.
 /// @group cologradient
-$kendo-colorgradient-slider-horizontal-size: 100% !default;
+$kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// Background image of the color gradient alpha slider.
 /// @group cologradient
-$kendo-colorgradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+$kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
 
 /// Width of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-width: 20px !default;
+$kendo-color-gradient-draghandle-width: 20px !default;
 /// Height of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-height: 20px !default;
+$kendo-color-gradient-draghandle-height: 20px !default;
 /// Border width of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-border-width: 1px !default;
+$kendo-color-gradient-draghandle-border-width: 1px !default;
 /// Border color of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-border: get-theme-color-var( neutral-110 ) !default;
 /// Shadow of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// Focus shadow of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-focus-shadow: $kendo-colorgradient-draghandle-shadow !default;
+$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-shadow !default;
 /// Focus border color of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-focus-border: get-theme-color-var( neutral-160 ) !default;
+$kendo-color-gradient-draghandle-focus-border: get-theme-color-var( neutral-160 ) !default;
 /// Hover shadow of the color gradient draghandle.
 /// @group cologradient
-$kendo-colorgradient-draghandle-hover-shadow: $kendo-colorgradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
 
 /// Vertical offset of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-colorgradient-draghandle-height, 2 ) ) !default;
+$kendo-color-gradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) ) !default;
 /// Horizontal offset of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-colorgradient-draghandle-width, 2 ) ) !default;
+$kendo-color-gradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) ) !default;