@progress/kendo-theme-fluent 5.7.0

package/scss/coloreditor/_layout.scss

@@ -0,0 +1,82 @@
+@use "../core/mixins" as *;
+@use "../colorpalette/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-coloreditor--layout() {
+
+        .k-coloreditor {
+            @include border-radius( var( --kendo-coloreditor-border-radius, #{$kendo-coloreditor-border-radius} ) );
+            min-width: var( --kendo-coloreditor-min-width, #{$kendo-coloreditor-min-width} );
+            border-width: var( --kendo-coloreditor-border-width, #{$kendo-coloreditor-border-width} );
+            border-style: solid;
+            box-sizing: border-box;
+            outline: 0;
+            font-family: var( --kendo-coloreditor-font-family, #{$kendo-coloreditor-font-family} );
+            font-size: var( --kendo-coloreditor-font-size, #{$kendo-coloreditor-font-size} );
+            line-height: var( --kendo-coloreditor-line-height, #{$kendo-coloreditor-line-height} );
+            display: inline-flex;
+            flex-direction: column;
+            align-items: stretch;
+
+            *,
+            *::before,
+            *::after {
+                box-sizing: border-box;
+            }
+        }
+
+        // Header
+        .k-coloreditor-header {
+            padding-inline: var( --kendo-coloreditor-header-padding-x, #{$kendo-coloreditor-header-padding-x} );
+            padding-block-start: var( --kendo-coloreditor-header-padding-y, #{$kendo-coloreditor-header-padding-y} );
+        }
+
+        .k-coloreditor-header-actions {
+            gap: var( --kendo-coloreditor-header-actions-spacing, #{$kendo-coloreditor-header-actions-spacing} );
+        }
+
+        .k-coloreditor-preview {
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
+            justify-content: space-between;
+            gap: var( --kendo-coloreditor-preview-spacing, #{$kendo-coloreditor-preview-spacing} );
+            position: relative;
+            z-index: 1;
+        }
+        .k-coloreditor-preview .k-color-preview {
+            width: var( --kendo-coloreditor-color-preview-width, #{$kendo-coloreditor-color-preview-width} );
+            height: var( --kendo-coloreditor-color-preview-height, #{$kendo-coloreditor-color-preview-height} );
+        }
+
+        // Views
+        .k-coloreditor-views {
+            min-width: calc( var(--kendo-color-preview-width, #{$kendo-colorpalette-tile-width}) * var(--kendo-color-preview-columns, 10) );
+            padding-inline: var( --kendo-coloreditor-views-padding-x, #{$kendo-coloreditor-views-padding-x} );
+            padding-block-start: calc( var( --kendo-coloreditor-views-padding-y, #{$kendo-coloreditor-views-padding-y} ) * 2 );
+            padding-block-end: var( --kendo-coloreditor-views-padding-y, #{$kendo-coloreditor-views-padding-y} );
+            gap: var( --kendo-coloreditor-views-spacing, #{$kendo-coloreditor-views-spacing} );
+
+            .k-colorgradient {
+                padding: 0;
+                width: auto;
+                border-width: 0;
+                box-shadow: none;
+            }
+
+            .k-colorpalette {
+                align-self: center;
+            }
+
+            .k-colorpalette-tile {
+                width: var( --kendo-color-preview-width, $kendo-colorpalette-tile-width );
+                height: var( --kendo-color-preview-height, $kendo-colorpalette-tile-height );
+            }
+        }
+
+        // Footer
+        .k-coloreditor-footer.k-actions {
+            margin: 0;
+        }
+
+}

package/scss/coloreditor/_theme.scss

@@ -0,0 +1,27 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-coloreditor--theme() {
+
+    .k-coloreditor {
+        @include fill(
+            var( --kendo-coloreditor-text, #{$kendo-coloreditor-text} ),
+            var( --kendo-coloreditor-bg, #{$kendo-coloreditor-bg} ),
+            var( --kendo-coloreditor-border, #{$kendo-coloreditor-border} )
+        );
+        @include box-shadow(
+            var( --kendo-coloreditor-shadow, #{$kendo-coloreditor-shadow} )
+        );
+    }
+
+    .k-coloreditor:focus,
+    .k-coloreditor.k-focus {
+        @include fill(
+            $border: var( --kendo-coloreditor-focus-border, #{$kendo-coloreditor-focus-border} )
+        );
+        @include box-shadow(
+            var( --kendo-coloreditor-focus-shadow, #{$kendo-coloreditor-focus-shadow} )
+        );
+    }
+
+}

package/scss/coloreditor/_variables.scss

@@ -0,0 +1,75 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Spacer of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-spacer: map-get( $kendo-spacing, 2 ) !default;
+
+/// Min width of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-min-width: 254px !default;
+/// Border width of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-border-width: 1px !default;
+/// Border radius of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-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;
+/// Font size of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-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;
+/// Background color of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-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;
+
+/// Focus border color of the color editor.
+/// @group coloreditor
+$kendo-coloreditor-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;
+
+/// Horizontal padding of the color editor header.
+/// @group coloreditor
+$kendo-coloreditor-header-padding-y: $kendo-coloreditor-spacer !default;
+/// Vertical padding of the color editor header.
+/// @group coloreditor
+$kendo-coloreditor-header-padding-x: $kendo-coloreditor-header-padding-y !default;
+/// Spacing of the color editor header.
+/// @group coloreditor
+$kendo-coloreditor-header-actions-spacing: calc( $kendo-coloreditor-spacer / 2 ) !default;
+
+/// Width of the color editor preview.
+/// @group coloreditor
+$kendo-coloreditor-color-preview-width: 34px !default;
+/// Height of the color editor preview.
+/// @group coloreditor
+$kendo-coloreditor-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 );
+
+/// Horizontal padding of the color editor views container.
+/// @group coloreditor
+$kendo-coloreditor-views-padding-y: $kendo-coloreditor-spacer !default;
+/// Vertical padding of the color editor views container.
+/// @group coloreditor
+$kendo-coloreditor-views-padding-x: $kendo-coloreditor-views-padding-y !default;
+/// Spacing of the color editor views container.
+/// @group coloreditor
+$kendo-coloreditor-views-spacing: $kendo-coloreditor-spacer !default;

package/scss/coloreditor/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "coloreditor",
+    dependencies: (
+        "button",
+        "action-buttons",
+        "color-preview",
+        "colorpalette",
+        "colorgradient"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "coloreditor" ) {
+        @include kendo-coloreditor--layout();
+        @include kendo-coloreditor--theme();
+    }
+}

package/scss/colorgradient/_layout.scss

@@ -0,0 +1,184 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-colorgradient--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} );
+        border-style: solid;
+        border-width: var( --kendo-colorgradient-border-width, #{$kendo-colorgradient-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} );
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var( --kendo-colorgradient-spacing, #{$kendo-colorgradient-spacing} );
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Canvas
+    .k-colorgradient-canvas {
+        gap: var( --kendo-colorgradient-canvas-spacing, #{$kendo-colorgradient-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} );
+            border-style: solid;
+            position: relative;
+            flex: 1 1 auto;
+            user-select: none;
+        }
+
+        .k-hsv-gradient {
+            @include border-radius( var( --kendo-colorgradient-canvas-border-radius, #{$kendo-colorgradient-canvas-border-radius} ) );
+            height: var( --kendo-colorgradient-canvas-rectangle-height, #{$kendo-colorgradient-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} );
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 10;
+            background-color: transparent;
+            cursor: pointer;
+        }
+
+        .k-hsv-controls {
+            position: relative;
+            flex-shrink: 0;
+            gap: var( --kendo-colorgradient-canvas-spacing, #{$kendo-colorgradient-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} );
+        box-sizing: border-box;
+    }
+
+    // Sliders
+    .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} );
+        }
+        &.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} );
+        }
+
+        &.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} );
+        }
+        &.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 );
+        }
+
+        &.k-alpha-slider .k-slider-track::before {
+            content: "";
+            width: 100%;
+            height: 100%;
+            display: block;
+            border-radius: 2px;
+            position: relative;
+            z-index: -1;
+        }
+
+        .k-slider-track {
+            border-width:  var( --kendo-colorgradient-slider-border-width, #{$kendo-colorgradient-slider-border-width} );
+            border-style: solid;
+        }
+
+        .k-slider-wrap,
+        .k-slider-track-wrap {
+            z-index: 1;
+        }
+
+        .k-slider-selection {
+            display: none;
+        }
+
+    }
+
+    // Inputs
+    .k-colorgradient-inputs {
+        gap: var( --kendo-colorgradient-input-spacing, #{$kendo-colorgradient-input-spacing} );
+
+        .k-colorgradient-input-label {
+            text-transform: uppercase;
+        }
+
+        > .k-vstack {
+            gap: var( --kendo-colorgradient-input-label-spacing, #{$kendo-colorgradient-input-label-spacing} );
+        }
+
+        .k-numerictextbox {
+            width: var( --kendo-colorgradient-input-width, #{$kendo-colorgradient-input-width} );
+        }
+    }
+
+    // Contrast
+    .k-colorgradient-color-contrast {
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: var( --kendo-colorgradient-contrast-spacing, #{$kendo-colorgradient-contrast-spacing} );
+        }
+
+        .k-contrast-ratio {
+            margin-block-end: var( --kendo-colorgradient-contrast-spacing, #{$kendo-colorgradient-contrast-spacing} );
+        }
+
+        .k-contrast-ratio-text {
+            font-weight: var( --kendo-colorgradient-contrast-ratio-font-weight, #{$kendo-colorgradient-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 );
+
+            .k-icon {
+                vertical-align: middle;
+            }
+
+            // Needed for the double check icons
+            .k-icon + .k-icon {
+                margin-inline-start: -13px;
+            }
+        }
+    }
+    .k-color-contrast-svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: visible;
+        pointer-events: none;
+    }
+
+}

package/scss/colorgradient/_theme.scss

@@ -0,0 +1,118 @@
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-colorgradient--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} )
+        );
+        @include box-shadow(
+            var( --kendo-colorgradient-shadow, #{$kendo-colorgradient-shadow} )
+        );
+    }
+
+    .k-colorgradient:focus,
+    .k-colorgradient.k-focus {
+        @include fill(
+            $border: var( --kendo-colorgradient-focus-border, #{$kendo-colorgradient-focus-border} )
+        );
+        @include box-shadow(
+            var( --kendo-colorgradient-focus-shadow, #{$kendo-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 );
+        }
+
+        .k-hsv-rectangle {
+            @include fill(
+                $border: var( --kendo-colorgradient-canvas-rectangle-border, #{$kendo-colorgradient-canvas-rectangle-border} )
+            );
+        }
+    }
+
+    // DragHandle
+    .k-colorgradient .k-draghandle {
+        @include fill(
+            $border: var( --kendo-colorgradient-draghandle-border, #{$kendo-colorgradient-draghandle-border })
+        );
+        @include box-shadow(
+            var( --kendo-colorgradient-draghandle-shadow, #{$kendo-colorgradient-draghandle-shadow} )
+        );
+
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $border: var( --kendo-colorgradient-draghandle-focus-border, #{$kendo-colorgradient-draghandle-focus-border} )
+            );
+            @include box-shadow(
+                var( --kendo-colorgradient-draghandle-focus-shadow, #{$kendo-colorgradient-draghandle-focus-shadow} )
+            );
+        }
+
+        &:active,
+        &:hover,
+        &.k-hover {
+            @include box-shadow(
+                var( --kendo-colorgradient-draghandle-hover-shadow, #{$kendo-colorgradient-draghandle-hover-shadow} )
+            );
+        }
+    }
+
+    .k-colorgradient .k-hsv-draghandle {
+        @include box-shadow(
+            var( --kendo-colorgradient-canvas-draghandle-shadow, #{$kendo-colorgradient-canvas-draghandle-shadow} )
+        );
+
+        &:focus,
+        &.k-focus {
+            @include box-shadow(
+                var( --kendo-colorgradient-canvas-draghandle-shadow, #{$kendo-colorgradient-canvas-draghandle-shadow} )
+            );
+        }
+
+        &:active,
+        &:hover,
+        &.k-hover {
+            @include box-shadow(
+                var( --kendo-colorgradient-canvas-draghandle-shadow, #{$kendo-colorgradient-canvas-draghandle-shadow} )
+            );
+        }
+    }
+
+    // Slider
+    .k-colorgradient-slider .k-slider-track {
+        @include fill(
+             $border: var( --kendo-colorgradient-slider-border, #{$kendo-colorgradient-slider-border} )
+        );
+    }
+
+    .k-colorgradient-slider.k-hue-slider {
+        &.k-slider-horizontal .k-slider-track {
+            background: linear-gradient( to right, $gradient-rainbow );
+        }
+
+        &.k-slider-vertical .k-slider-track {
+            background: linear-gradient( to top, $gradient-rainbow );
+        }
+    }
+
+    .k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
+        background: url( $kendo-colorgradient-slider-alpha-bgr ) center repeat;
+    }
+
+    // Inputs
+    .k-colorgradient-input-label {
+        @include fill(
+             $color: var( --kendo-colorgradient-input-label-text, #{$kendo-colorgradient-input-label-text} )
+        );
+    }
+}

package/scss/colorgradient/_variables.scss

@@ -0,0 +1,149 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Spacer of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-spacer: map-get( $kendo-spacing, 4 ) !default;
+
+/// Default width of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-width: 254px !default;
+/// Border width of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-border-width: 1px !default;
+/// Border radius of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Horizontal padding of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-padding-x: calc( $kendo-colorgradient-spacer / 2 ) !default;
+/// Spacing of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-spacing: $kendo-colorgradient-spacer !default;
+/// Font family of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Line height of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Text color of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-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;
+
+/// Focus border of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-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;
+
+/// Border radius of the color gradient canvas.
+/// @group cologradient
+$kendo-colorgradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Border width of the color gradient canvas.
+/// @group cologradient
+$kendo-colorgradient-canvas-border-width: 1px !default;
+/// Spacing of the color gradient canvas.
+/// @group cologradient
+$kendo-colorgradient-canvas-spacing: calc( $kendo-colorgradient-spacer / 2 ) !default;
+/// Height the color gradient canvas hsv rectangle.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// 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;
+
+/// Default input width of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-input-width: 47px !default;
+/// Input spacing of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-input-spacing: calc( $kendo-colorgradient-spacer / 4 ) !default;
+/// Input label spacing of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-input-label-spacing: calc( $kendo-colorgradient-spacer / 4 ) !default;
+/// Input label text color of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Spacing of the color gradient contrast tool.
+/// @group cologradient
+$kendo-colorgradient-contrast-spacing: calc( $kendo-colorgradient-spacer / 1.5 ) !default;
+
+/// The size of the color gradient slider.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Border width of the color gradient slider.
+/// @group cologradient
+$kendo-colorgradient-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;
+
+/// Height of the color gradient vertical slider.
+/// @group cologradient
+$kendo-colorgradient-slider-vertical-size: 180px !default;
+/// Width of the color gradient horizontal slider.
+/// @group cologradient
+$kendo-colorgradient-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;
+
+/// Width of the color gradient draghandle.
+/// @group cologradient
+$kendo-colorgradient-draghandle-width: 20px !default;
+/// Height of the color gradient draghandle.
+/// @group cologradient
+$kendo-colorgradient-draghandle-height: 20px !default;
+/// Border width of the color gradient draghandle.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Shadow of the color gradient draghandle.
+/// @group cologradient
+$kendo-colorgradient-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;
+/// Focus border color of the color gradient draghandle.
+/// @group cologradient
+$kendo-colorgradient-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;
+
+/// Vertical offset of the color gradient canvas draghandle.
+/// @group cologradient
+$kendo-colorgradient-canvas-draghandle-offset-y: calc( ( $kendo-colorgradient-draghandle-height / 2 ) * -1 ) !default;
+/// Horizontal offset of the color gradient canvas draghandle.
+/// @group cologradient
+$kendo-colorgradient-canvas-draghandle-offset-x: calc( ( $kendo-colorgradient-draghandle-width / 2 ) * -1 ) !default;
+