@progress/kendo-theme-core 12.3.1-dev.8 → 13.0.0-dev.0

package/scss/components/chip/_theme.scss

@@ -7,125 +7,137 @@
 
 @mixin kendo-chip--theme-base() {
 
-    // Solid
-    @each $name, $color in $kendo-chip-theme-colors {
-        .k-chip-solid-#{$name} {
-
-            @if ($name == "base") {
-                @include fill(
-                    $kendo-chip-solid-text,
-                    $kendo-chip-solid-bg,
-                    $kendo-chip-solid-border,
-                    $kendo-chip-solid-gradient
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include fill( $bg: $kendo-chip-solid-focus-bg );
-                    @include focus-indicator( $kendo-chip-solid-shadow );
+    .k-chip {
+        // Fillmode: solid
+        #{k-when-default($kendo-chip-default-fill-mode, "solid")}
+        &.k-chip-solid {
+            // Theme colors
+            @each $name in $kendo-chip-theme-colors {
+                #{k-when-default($kendo-chip-default-theme-color, $name)}
+                &.k-chip-#{$name} {
+
+                    @if ($name == "base") {
+                        @include fill(
+                            $kendo-chip-solid-text,
+                            $kendo-chip-solid-bg,
+                            $kendo-chip-solid-border,
+                            $kendo-chip-solid-gradient
+                        );
+
+                        &:focus,
+                        &.k-focus {
+                            @include fill( $bg: $kendo-chip-solid-focus-bg );
+                            @include focus-indicator( $kendo-chip-solid-shadow );
+                        }
+
+                        &:hover,
+                        &.k-hover {
+                            @include fill( $bg: $kendo-chip-solid-hover-bg );
+                        }
+
+                        &.k-selected {
+                            @include fill( $bg: $kendo-chip-solid-selected-bg );
+                        }
+                    } @else {
+                        @include fill(
+                            k-color(#{$name}-on-subtle),
+                            k-color(#{$name}-subtle),
+                            k-color(#{$name}-emphasis),
+                            $kendo-chip-solid-gradient
+                        );
+
+                        &:focus,
+                        &.k-focus {
+                            @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color(#{$name}-on-surface) 16%, transparent));
+                        }
+
+                        &:hover,
+                        &.k-hover {
+                            @include fill( $bg: k-color(#{$name}-subtle-hover));
+                        }
+
+                        &.k-selected {
+                            @include fill( $bg: k-color(#{$name}-subtle-active));
+                        }
+                    }
+
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        @include fill(
+                            $kendo-chip-disabled-text,
+                            $kendo-chip-disabled-bg,
+                            $kendo-chip-disabled-border,
+                        );
+                    }
                 }
-
-                &:hover,
-                &.k-hover {
-                    @include fill( $bg: $kendo-chip-solid-hover-bg );
-                }
-
-                &.k-selected {
-                    @include fill( $bg: $kendo-chip-solid-selected-bg );
-                }
-            } @else {
-                @include fill(
-                    k-color(#{$name}-on-subtle),
-                    k-color(#{$name}-subtle),
-                    k-color(#{$name}-emphasis),
-                    $kendo-chip-solid-gradient
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color(#{$name}-on-surface) 16%, transparent));
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill( $bg: k-color(#{$name}-subtle-hover));
-                }
-
-                &.k-selected {
-                    @include fill( $bg: k-color(#{$name}-subtle-active));
-                }
-            }
-
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                @include fill(
-                    $kendo-chip-disabled-text,
-                    $kendo-chip-disabled-bg,
-                    $kendo-chip-disabled-border,
-                );
             }
         }
-    }
-
-
-    // Outline
-    @each $name, $color in $kendo-chip-theme-colors {
-        .k-chip-outline-#{$name} {
-            @if ($name == "base") {
-                @include fill(
-                    $kendo-chip-outline-text,
-                    transparent,
-                    $kendo-chip-outline-border
-                );
 
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( $kendo-chip-outline-shadow );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $color: $kendo-chip-outline-hover-text,
-                        $bg: $kendo-chip-outline-hover-bg
-                    );
-                }
 
-                &.k-selected {
-                    @include fill(
-                        $color: $kendo-chip-outline-selected-text,
-                        $bg: $kendo-chip-outline-selected-bg
-                    );
+        // Fillmode: outline
+        #{k-when-default($kendo-chip-default-fill-mode, "outline")}
+        &.k-chip-outline {
+            // Theme colors
+            @each $name in $kendo-chip-theme-colors {
+                #{k-when-default($kendo-chip-default-theme-color, $name)}
+                &.k-chip-#{$name} {
+                    @if ($name == "base") {
+                        @include fill(
+                            $kendo-chip-outline-text,
+                            transparent,
+                            $kendo-chip-outline-border
+                        );
+
+                        &:focus,
+                        &.k-focus {
+                            @include focus-indicator( $kendo-chip-outline-shadow );
+                        }
+
+                        &:hover,
+                        &.k-hover {
+                            @include fill(
+                                $color: $kendo-chip-outline-hover-text,
+                                $bg: $kendo-chip-outline-hover-bg
+                            );
+                        }
+
+                        &.k-selected {
+                            @include fill(
+                                $color: $kendo-chip-outline-selected-text,
+                                $bg: $kendo-chip-outline-selected-bg
+                            );
+                        }
+                    } @else {
+                        @include fill(
+                            k-color(#{$name}-on-surface),
+                            transparent,
+                            k-color(#{$name}-on-surface)
+                        );
+
+                        &:focus,
+                        &.k-focus {
+                            @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color(#{$name}-on-surface) 16%, transparent));
+                        }
+
+                        &:hover,
+                        &.k-hover,
+                        &.k-selected {
+                            @include fill(
+                                k-color(on-#{$name}),
+                                k-color(#{$name}-on-surface),
+                                k-color(#{$name}-on-surface)
+                            );
+                        }
+                    }
+
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        color: $kendo-chip-disabled-text;
+                        border-color: $kendo-chip-disabled-text;
+                    }
                 }
-            } @else {
-                @include fill(
-                    k-color(#{$name}-on-surface),
-                    transparent,
-                    k-color(#{$name}-on-surface)
-                );
-
-                &:focus,
-                &.k-focus {
-                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color(#{$name}-on-surface) 16%, transparent));
-                }
-
-                &:hover,
-                &.k-hover,
-                &.k-selected {
-                    @include fill(
-                        k-color(on-#{$name}),
-                        k-color(#{$name}-on-surface),
-                        k-color(#{$name}-on-surface)
-                    );
-                }
-            }
-
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                color: $kendo-chip-disabled-text;
-                border-color: $kendo-chip-disabled-text;
             }
         }
     }

package/scss/components/chip/_variables.scss

@@ -1,5 +1,12 @@
 // Chip
 
+$kendo-chip-default-theme-color: null !default;
+$kendo-chip-default-fill-mode: null !default;
+$kendo-chip-default-roundness: null !default;
+$kendo-chip-default-size: null !default;
+
+$kendo-chip-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
 $kendo-chip-border-width: null !default;
 $kendo-chip-spacing: null !default;
 
@@ -26,11 +33,48 @@ $kendo-chip-lg-line-height: null !default;
 $kendo-chip-calc-size: null !default;
 $kendo-chip-sm-calc-size: null !default;
 
-$kendo-chip-sizes: null !default;
+/// The sizes map of the Chip.
+/// @group chip
+$kendo-chip-sizes: (
+    sm: (
+        padding-x: $kendo-chip-sm-padding-x,
+        padding-y: $kendo-chip-sm-padding-y,
+        font-size: $kendo-chip-sm-font-size,
+        line-height: $kendo-chip-sm-line-height
+    ),
+    md: (
+        padding-x: $kendo-chip-md-padding-x,
+        padding-y: $kendo-chip-md-padding-y,
+        font-size: $kendo-chip-md-font-size,
+        line-height: $kendo-chip-md-line-height
+    ),
+    lg: (
+        padding-x: $kendo-chip-lg-padding-x,
+        padding-y: $kendo-chip-lg-padding-y,
+        font-size: $kendo-chip-lg-font-size,
+        line-height: $kendo-chip-lg-line-height
+    )
+) !default;
+
+
+$kendo-chip-list-size-sm: null !default;
+$kendo-chip-list-size-md: null !default;
+$kendo-chip-list-size-lg: null !default;
+
+/// The sizes of the Chip list.
+/// @group chip
+$kendo-chip-list-sizes: (
+    sm: $kendo-chip-list-size-sm,
+    md: $kendo-chip-list-size-md,
+    lg: $kendo-chip-list-size-lg
+) !default;
+
 
 $kendo-chip-base-bg: null !default;
 
-$kendo-chip-theme-colors: null !default;
+/// The theme colors map of the Chip.
+/// @group chip
+$kendo-chip-theme-colors: ("base", "error", "info", "warning", "success") !default;
 
 $kendo-chip-solid-bg: null !default;
 $kendo-chip-solid-text: null !default;

package/scss/components/coloreditor/_layout.scss

@@ -3,6 +3,7 @@
 @use "./variables.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../functions/index.scss" as *;
 
 
 @mixin kendo-color-editor--layout-base() {
@@ -10,7 +11,6 @@
     // ColorEditor/FlatColorPicker
     .k-coloreditor {
         @include border-radius( $kendo-color-editor-border-radius );
-        min-width: $kendo-color-editor-min-width;
         border-width: $kendo-color-editor-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -27,6 +27,42 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // ColorPreview sizes
+        @each $size, $size-props in $kendo-color-editor-sizes {
+            $_min-width: map.get( $size-props, min-width );
+            $_header-padding-x: map.get( $size-props, header-padding-x );
+            $_header-padding-y: map.get( $size-props, header-padding-y );
+            $_views-padding-x: map.get( $size-props, views-padding-x );
+            $_views-padding-y: map.get( $size-props, views-padding-y );
+            $_preview-gap: map.get( $size-props, preview-gap );
+            $_preview-width: map.get( $size-props, preview-width );
+            $_preview-height: map.get( $size-props, preview-height );
+
+            #{k-when-default($kendo-color-editor-default-size, $size)}
+            &.k-coloreditor-#{$size} {
+                min-width: $_min-width;
+
+                .k-coloreditor-header {
+                    padding: $_header-padding-y $_header-padding-x 0;
+                }
+
+                .k-coloreditor-views {
+                    padding-block: $_views-padding-y;
+                    padding-inline: $_views-padding-x;
+                }
+
+                .k-coloreditor-preview {
+                    gap: $_preview-gap;
+
+                    .k-color-preview {
+                        width: $_preview-width;
+                        height: $_preview-height;
+                    }
+                }
+            }
+        }
+        min-width: $kendo-color-editor-min-width;
     }
 
     // Header
@@ -53,41 +89,6 @@
         height: $kendo-color-editor-color-preview-height;
     }
 
-    // ColorPreview sizes
-    @each $size, $size-props in $kendo-color-editor-sizes {
-        $_min-width: map.get( $size-props, min-width );
-        $_header-padding-x: map.get( $size-props, header-padding-x );
-        $_header-padding-y: map.get( $size-props, header-padding-y );
-        $_views-padding-x: map.get( $size-props, views-padding-x );
-        $_views-padding-y: map.get( $size-props, views-padding-y );
-        $_preview-gap: map.get( $size-props, preview-gap );
-        $_preview-width: map.get( $size-props, preview-width );
-        $_preview-height: map.get( $size-props, preview-height );
-
-        .k-coloreditor-#{$size} {
-            min-width: $_min-width;
-
-            .k-coloreditor-header {
-                padding: $_header-padding-y $_header-padding-x 0;
-            }
-
-            .k-coloreditor-views {
-                padding-block: $_views-padding-y;
-                padding-inline: $_views-padding-x;
-            }
-
-            .k-coloreditor-preview {
-                gap: $_preview-gap;
-
-                .k-color-preview {
-                    width: $_preview-width;
-                    height: $_preview-height;
-                }
-            }
-        }
-
-    }
-
     // Views
     .k-coloreditor-views {
         min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );

package/scss/components/coloreditor/_variables.scss

@@ -1,5 +1,7 @@
 // ColorEditor/FlatColorPicker
 
+$kendo-color-editor-default-size: null !default;
+
 $kendo-color-editor-spacer: null !default;
 
 $kendo-color-editor-min-width: null !default;
@@ -53,4 +55,38 @@ $kendo-color-editor-color-gradient-focus-outline-color: null !default;
 $kendo-color-editor-color-gradient-focus-outline: null !default;
 $kendo-color-editor-color-gradient-focus-outline-offset: null !default;
 
-$kendo-color-editor-sizes: () !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/components/colorgradient/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
@@ -11,9 +12,6 @@
     // ColorGradient
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
-        width: $kendo-color-gradient-width;
-        padding-block: $kendo-color-gradient-md-padding-y;
-        padding-inline: $kendo-color-gradient-md-padding-x;
         border-style: solid;
         border-width: $kendo-color-gradient-border-width;
         box-sizing: border-box;
@@ -24,7 +22,6 @@
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: $kendo-color-gradient-gap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -33,6 +30,51 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // 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 );
+            $_padding-x: map.get( $size-props, padding-x );
+            $_padding-y: map.get( $size-props, padding-y );
+
+            #{k-when-default($kendo-color-gradient-default-size, $size)}
+            &.k-colorgradient-#{$size} {
+                width: $_width;
+                gap: $_gap;
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+
+                .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;
+                    }
+                }
+            }
+        }
+
+        width: $kendo-color-gradient-width;
+        gap: $kendo-color-gradient-gap;
     }
 
     // Canvas
@@ -132,47 +174,6 @@
         }
     }
 
-    // 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 );
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-
-        .k-colorgradient-#{$size} {
-            width: $_width;
-            gap: $_gap;
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-
-            .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 {
@@ -190,7 +191,7 @@
             width: $kendo-color-gradient-input-width;
         }
 
-        .k-input-inner {
+        .k-input .k-input-inner {
             padding-inline-start: 2px;
             padding-inline-end: 2px;
             text-align: center;

package/scss/components/colorgradient/_variables.scss

@@ -1,5 +1,7 @@
 // ColorGradient
 
+$kendo-color-gradient-default-size: null !default;
+
 $kendo-color-gradient-spacer: null !default;
 
 $kendo-color-gradient-width: null !default;
@@ -82,4 +84,37 @@ $kendo-color-gradient-lg-input-width: null !default;
 $kendo-color-gradient-contrast-ratio-font-weight: null !default;
 $kendo-color-gradient-contrast-spacer: null !default;
 
-$kendo-color-gradient-sizes: () !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,
+        padding-x: $kendo-color-gradient-sm-padding-x,
+        padding-y: $kendo-color-gradient-sm-padding-y
+    ),
+    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,
+        padding-x: $kendo-color-gradient-md-padding-x,
+        padding-y: $kendo-color-gradient-md-padding-y
+    ),
+    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,
+        padding-x: $kendo-color-gradient-lg-padding-x,
+        padding-y: $kendo-color-gradient-lg-padding-y
+    )
+) !default;

package/scss/components/colorpalette/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
 
@@ -24,6 +25,20 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // ColorPalette sizes
+        @each $size, $size-props in $kendo-color-palette-sizes {
+            $_tile-width: map.get( $size-props, width );
+            $_tile-height: map.get( $size-props, height );
+
+            #{k-when-default($kendo-color-palette-default-size, $size)}
+            &.k-colorpalette-#{$size} {
+                .k-colorpalette-tile {
+                    width: $_tile-width;
+                    height: $_tile-height;
+                }
+            }
+        }
     }
 
     // Table
@@ -58,17 +73,4 @@
         }
     }
 
-    // ColorPalette sizes
-    @each $size, $size-props in $kendo-color-palette-sizes {
-        $_tile-width: map.get( $size-props, width );
-        $_tile-height: map.get( $size-props, height );
-
-        .k-colorpalette-#{$size} {
-            .k-colorpalette-tile {
-                width: $_tile-width;
-                height: $_tile-height;
-            }
-        }
-    }
-
 }