@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/colorgradient/_layout.scss

@@ -1,239 +1,55 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/colorgradient/_layout.scss" as *;
 
 @mixin kendo-color-gradient--layout() {
+    @include kendo-color-gradient--layout-base();
 
-    // ColorGradient
-    .k-colorgradient {
-        @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-color-gradient-border-width, #{$kendo-color-gradient-border-width} );
-        box-sizing: border-box;
-        outline: 0;
-        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-color-gradient-spacing, #{$kendo-color-gradient-spacing} );
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    // Canvas
     .k-colorgradient-canvas {
-        gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
 
         .k-hsv-rectangle {
-            @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-width: $kendo-color-gradient-canvas-border-width;
             border-style: solid;
-            position: relative;
-            flex: 1 1 auto;
-            user-select: none;
-        }
-
-        .k-hsv-gradient {
-            height: var( --kendo-color-gradient-canvas-rectangle-height, #{$kendo-color-gradient-canvas-rectangle-height} );
         }
 
         .k-hsv-draghandle {
-            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%;
-            z-index: 10;
             background-color: transparent;
-            cursor: pointer;
         }
 
-        .k-hsv-controls {
-            position: relative;
-            flex-shrink: 0;
-            gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
+        .k-hsv-gradient {
+            border-radius: 0;
         }
 
         &.k-vstack {
             padding-inline: calc( ($kendo-color-gradient-draghandle-width + $kendo-color-gradient-draghandle-border-width) / 2 );
         }
-    }
-
-    // DragHandle
-    .k-colorgradient .k-draghandle {
-        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} );
-        outline-width: var( --kendo-color-gradient-draghandle-outline-width, #{$kendo-color-gradient-draghandle-outline-width} );
-        outline-style: solid;
-        box-sizing: border-box;
-    }
+}
 
-    // Sliders
     .k-colorgradient-slider {
 
-        &.k-slider-vertical {
-            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-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-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} ) / 2) );
-        }
-
-        &.k-slider-horizontal {
-            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-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 {
-            content: "";
-            width: 100%;
-            height: 100%;
-            display: block;
             border-radius: 2px;
-            position: relative;
-            z-index: -1;
         }
 
         .k-slider-track {
-            border-width:  var( --kendo-color-gradient-slider-border-width, #{$kendo-color-gradient-slider-border-width} );
+            border-width: $kendo-color-gradient-slider-border-width;
             border-style: solid;
             transform: none;
             z-index: auto;
         }
-
-        .k-slider-track-wrap {
-            z-index: 1;
-        }
-
-        .k-slider-selection {
-            display: none;
-        }
-
-    }
-
-    // ColorGradient sizes
-    @each $size, $size-props in $kendo-color-gradient-sizes {
-        $_width: map.get( $size-props, width );
-        $_spacing: map.get( $size-props, spacing );
-        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
-        $_rectangle-height: map.get( $size-props, rectangle-height );
-        $_input-width: map.get( $size-props, input-width );
-        $_canvas-spacing: map.get( $size-props, canvas-spacing );
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-
-        .k-colorgradient-#{$size} {
-            width: $_width;
-            gap: $_spacing;
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-
-            .k-colorgradient-inputs {
-                .k-numerictextbox {
-                    width: $_input-width;
-                }
-            }
-
-            .k-colorgradient-canvas {
-                gap: $_canvas-spacing;
-
-                .k-hsv-gradient {
-                    height: $_rectangle-height;
-                }
-
-                .k-slider-vertical {
-                    height: $_vertical-slider-height;
-                }
-
-                .k-hsv-controls {
-                    gap: $_canvas-spacing;
-                }
-            }
-        }
     }
 
-    // Inputs
     .k-colorgradient-inputs {
-        gap: var( --kendo-color-gradient-input-spacing, #{$kendo-color-gradient-input-spacing} );
 
         .k-colorgradient-input-label {
-            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-color-gradient-input-label-spacing, #{$kendo-color-gradient-input-label-spacing} );
+            font-size: $kendo-color-gradient-input-label-font-size
         }
 
-        .k-numerictextbox {
-            width: var( --kendo-color-gradient-input-width, #{$kendo-color-gradient-input-width} );
+        .k-input-inner {
+            padding-inline: k-spacing(2);
+            text-align: start;
+            text-overflow: ellipsis;
         }
     }
-
-    // Contrast
-    .k-colorgradient-color-contrast {
-
-        > div {
-            display: flex;
-            flex-flow: row nowrap;
-            gap: var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} );
-        }
-
-        .k-contrast-ratio {
-            margin-block-end: var( --kendo-color-gradient-contrast-spacing, #{$kendo-color-gradient-contrast-spacing} );
-        }
-
-        .k-contrast-ratio-text {
-            font-weight: var( --kendo-color-gradient-contrast-ratio-font-weight, #{$kendo-color-gradient-contrast-ratio-font-weight} );
-        }
-
-        .k-contrast-validation {
-            --kendo-color-gradient-contrast-spacing: #{$kendo-color-gradient-contrast-spacing};
-
-            display: inline-flex;
-            align-items: center;
-            gap: calc( var( --kendo-color-gradient-contrast-spacing ) / 2 );
-
-            .k-icon {
-                vertical-align: middle;
-            }
-
-            // Needed for the double check icons
-            .k-icon + .k-icon,
-            .k-icon-wrapper-host + .k-icon-wrapper-host .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

@@ -1,90 +1,52 @@
 @use "../core/_index.scss" as *;
+@use "../slider/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/colorgradient/_theme.scss" as *;
 
 @mixin kendo-color-gradient--theme() {
+    @include kendo-color-gradient--theme-base();
 
-    // ColorGradient
     .k-colorgradient {
-        @include fill(
-            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-color-gradient-shadow, #{$kendo-color-gradient-shadow} )
-        );
+        @include box-shadow($kendo-color-gradient-shadow);
     }
 
-    .k-colorgradient:focus,
-    .k-colorgradient.k-focus {
-        @include fill(
-            $border: var( --kendo-color-gradient-focus-border, #{$kendo-color-gradient-focus-border} )
-        );
-    }
-
-    // Canvas
     .k-colorgradient-canvas {
-        .k-hsv-gradient {
-            background: linear-gradient( to bottom, $kendo-gradient-transparent-to-black ), linear-gradient( to right, $kendo-gradient-white-to-transparent );
-        }
-
         .k-hsv-rectangle {
-            @include fill(
-                $border: var( --kendo-color-gradient-canvas-rectangle-border, #{$kendo-color-gradient-canvas-rectangle-border} )
-            );
+            border-color: $kendo-color-gradient-canvas-rectangle-border;
         }
     }
 
-    // DragHandle
-    .k-colorgradient .k-draghandle {
-        @include fill(
-            $border: var( --kendo-color-gradient-draghandle-border, #{$kendo-color-gradient-draghandle-border })
-        );
-        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
-        @include box-shadow(
-            var( --kendo-color-gradient-draghandle-shadow, #{$kendo-color-gradient-draghandle-shadow} )
-        );
+    .k-colorgradient-slider .k-slider-track {
+        border-color: $kendo-color-gradient-slider-border;
+    }
 
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $border: var( --kendo-color-gradient-draghandle-focus-border, #{$kendo-color-gradient-draghandle-focus-border} )
-            );
-            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
-        }
+    .k-colorgradient-slider .k-draghandle {
 
-        &:active,
         &:hover,
-        &.k-hover {
-            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
+        &.k-hover,
+        &:active,
+        &.k-active {
+            background-color: $kendo-slider-thumb-bg;
         }
-    }
 
-    // Slider
-    .k-colorgradient-slider .k-slider-track {
-        @include fill(
-             $border: var( --kendo-color-gradient-slider-border, #{$kendo-color-gradient-slider-border} )
-        );
+        &:focus,
+        &.k-focus {
+            background-color: $kendo-slider-thumb-bg;
+        }
     }
 
-    .k-colorgradient-slider.k-hue-slider {
-        &.k-slider-horizontal .k-slider-track {
-            background: linear-gradient( to right, $kendo-gradient-rainbow );
-        }
+    .k-colorgradient .k-draghandle {
 
-        &.k-slider-vertical .k-slider-track {
-            background: linear-gradient( to top, $kendo-gradient-rainbow );
+        &:hover,
+        &.k-hover,
+        &:active,
+        &.k-active {
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
         }
-    }
-
-    .k-colorgradient-slider.k-alpha-slider .k-slider-track::before {
-        background: url(#{$kendo-color-gradient-slider-alpha-bgr}) center repeat;
-    }
 
-    // Inputs
-    .k-colorgradient-input-label {
-        @include fill(
-             $color: var( --kendo-color-gradient-input-label-text, #{$kendo-color-gradient-input-label-text} )
-        );
+        &:focus,
+        &.k-focus {
+            border-color: $kendo-color-gradient-draghandle-focus-border;
+        }
     }
 }