@progress/kendo-theme-default 10.1.0-dev.6 → 10.1.1-dev.0

package/scss/coloreditor/_variables.scss

@@ -9,6 +9,15 @@ $kendo-color-editor-spacer: k-spacing(3) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 272px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 252px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 362px !default;
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -50,7 +59,25 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
-$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 1.5 ) !default;
+$kendo-color-editor-header-actions-gap: k-spacing(2) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -61,6 +88,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(0.5) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-gap: k-spacing(1) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-color-preview-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-color-preview-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-color-preview-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-color-preview-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-color-preview-width: 44px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-color-preview-height: 16px !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
@@ -71,6 +126,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
@@ -81,3 +163,39 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
+
+/// The size map of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+) !default;

package/scss/colorgradient/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
@@ -78,7 +79,6 @@
 
     // Sliders
     .k-colorgradient-slider {
-
         &.k-slider-vertical {
             width: $kendo-color-gradient-slider-track-size;
             height: $kendo-color-gradient-slider-vertical-size;
@@ -124,6 +124,44 @@
         }
     }
 
+    // ColorGradient sizes
+    @each $size, $size-props in $kendo-color-gradient-sizes {
+        $_width: map.get( $size-props, width );
+        $_gap: map.get( $size-props, gap );
+        $_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-gap: map.get( $size-props, canvas-gap );
+
+        .k-colorgradient-#{$size} {
+            width: $_width;
+            gap: $_gap;
+
+            .k-colorgradient-inputs {
+                .k-numerictextbox {
+                    width: $_input-width;
+                }
+            }
+
+            .k-colorgradient-canvas {
+                gap: $_canvas-gap;
+
+                .k-hsv-gradient {
+                    height: $_rectangle-height;
+                }
+
+                .k-slider-vertical {
+                    height: $_vertical-slider-height;
+                }
+
+                .k-hsv-controls {
+                    gap: $_canvas-gap;
+                }
+            }
+        }
+    }
+
+
     // Inputs
     .k-colorgradient-inputs {
         gap: $kendo-color-gradient-input-gap;
@@ -188,7 +226,6 @@
         overflow: visible;
         pointer-events: none;
     }
-
 }
 
 

package/scss/colorgradient/_variables.scss

@@ -44,6 +44,26 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 226px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 324px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
+
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-border: null !default;
@@ -60,6 +80,25 @@ $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 182px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 268px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-gap: k-spacing(4.5) !default;
 
 /// The width of the ColorGradient slider.
 /// @group color-gradient
@@ -80,6 +119,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: 182px !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: 268px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -127,7 +175,7 @@ $kendo-color-gradient-canvas-draghandle-margin-x: - math.div( $kendo-color-gradi
 $kendo-color-gradient-input-width: 46px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group color-gradient
-$kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+$kendo-color-gradient-input-gap: k-spacing(2) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group color-gradient
 $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default;
@@ -135,9 +183,48 @@ $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3
 /// @group color-gradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 42px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 62.5px !default;
+
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+
+/// The size map of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sizes: (
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+) !default;

package/scss/colorpalette/_variables.scss

@@ -18,6 +18,25 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -27,3 +46,20 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
 /// The shadow of the ColorPalette selected tile.
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
+
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+) !default;