@progress/kendo-theme-core 12.3.1-dev.9 → 13.0.0-dev.1

package/scss/components/input/_variables.scss

@@ -1,5 +1,11 @@
 // Input
 
+$kendo-input-default-fill-mode: null !default;
+$kendo-input-default-roundness: null !default;
+$kendo-input-default-size: null !default;
+
+$kendo-input-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
 $kendo-input-default-width: null !default;
 
 $kendo-input-border-width: null !default;
@@ -29,7 +35,34 @@ $kendo-input-sm-calc-size: null !default;
 $kendo-input-md-calc-size: null !default;
 $kendo-input-lg-calc-size: null !default;
 
-$kendo-input-sizes: null !default;
+/// The sizes map of the Input.
+/// @group input
+$kendo-input-sizes: (
+    sm: (
+        padding-x: $kendo-input-sm-padding-x,
+        padding-y: $kendo-input-sm-padding-y,
+        font-size: $kendo-input-sm-font-size,
+        line-height: $kendo-input-sm-line-height,
+        button-padding-x: $kendo-input-sm-padding-y,
+        button-padding-y: $kendo-input-sm-padding-y,
+    ),
+    md: (
+        padding-x: $kendo-input-md-padding-x,
+        padding-y: $kendo-input-md-padding-y,
+        font-size: $kendo-input-md-font-size,
+        line-height: $kendo-input-md-line-height,
+        button-padding-x: $kendo-input-md-padding-y,
+        button-padding-y: $kendo-input-md-padding-y,
+    ),
+    lg: (
+        padding-x: $kendo-input-lg-padding-x,
+        padding-y: $kendo-input-lg-padding-y,
+        font-size: $kendo-input-lg-font-size,
+        line-height: $kendo-input-lg-line-height,
+        button-padding-x: $kendo-input-lg-padding-y,
+        button-padding-y: $kendo-input-lg-padding-y
+    )
+) !default;
 
 $kendo-input-bg: null !default;
 $kendo-input-text: null !default;
@@ -102,6 +135,12 @@ $kendo-input-suffix-bg: null !default;
 $kendo-input-invalid-border: null !default;
 $kendo-input-invalid-shadow: null !default;
 
+$kendo-picker-default-fill-mode: null !default;
+$kendo-picker-default-roundness: null !default;
+$kendo-picker-default-size: null !default;
+
+$kendo-picker-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
 $kendo-picker-bg: null !default;
 $kendo-picker-text: null !default;
 $kendo-picker-border: null !default;

package/scss/components/list/_layout.scss

@@ -1,6 +1,7 @@
 
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../motion/index.scss" as *;
 @use "sass:map";
 
@@ -37,6 +38,73 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // Switch sizes
+        @each $size, $size-props in $kendo-list-sizes {
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_header-padding-x: map.get( $size-props, header-padding-x );
+            $_header-padding-y: map.get( $size-props, header-padding-y );
+            $_header-font-size: map.get( $size-props, header-font-size );
+            $_header-line-height: map.get( $size-props, header-line-height );
+            $_item-padding-x: map.get( $size-props, item-padding-x );
+            $_item-padding-y: map.get( $size-props, item-padding-y );
+            $_item-font-size: map.get( $size-props, item-font-size );
+            $_item-line-height: map.get( $size-props, item-line-height );
+            $_group-item-padding-x: map.get( $size-props, group-item-padding-x );
+            $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
+            $_group-item-font-size: map.get( $size-props, group-item-font-size );
+            $_group-item-line-height: map.get( $size-props, group-item-line-height );
+            $_group-label-padding-x: map.get( $size-props, item-group-label-padding-x );
+            $_group-label-padding-y: map.get( $size-props, item-group-label-padding-y );
+            $_group-label-font-size: map.get( $size-props, item-group-label-font-size );
+            $_group-label-line-height: map.get( $size-props, item-group-label-line-height );
+            $_filter-padding-x: map.get( $size-props, filter-padding-x );
+            $_filter-padding-y: map.get( $size-props, filter-padding-y );
+
+            #{k-when-default($kendo-list-default-size, $size)}
+            &.k-list-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                // .k-list-header,
+                .k-list-group-sticky-header {
+                    padding-block: $_header-padding-y;
+                    padding-inline: $_header-padding-x;
+                    font-size: $_header-font-size;
+                    line-height: $_header-line-height;
+                }
+
+                .k-list-filter {
+                    padding-inline: $_filter-padding-x;
+                    padding-block: $_filter-padding-y;
+                }
+
+                .k-list-item,
+                .k-list-custom-value {
+                    padding-block: $_item-padding-y;
+                    padding-inline: $_item-padding-x;
+                    font-size: $_item-font-size;
+                    line-height: $_item-line-height;
+                }
+
+                .k-list-group-item {
+                    padding-block: $_group-item-padding-y;
+                    padding-inline: $_group-item-padding-x;
+                    font-size: $_group-item-font-size;
+                    line-height: $_group-item-line-height;
+                }
+
+                .k-list-item-group-label {
+                    padding-block: $_group-label-padding-y;
+                    padding-inline: $_group-label-padding-x;
+                    font-size: $_group-label-font-size;
+                    line-height: $_group-label-line-height;
+                }
+            }
+        }
     }
 
 
@@ -201,70 +269,4 @@
         flex: none;
     }
 
-
-    // Switch sizes
-    @each $size, $size-props in $kendo-list-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_header-padding-x: map.get( $size-props, header-padding-x );
-        $_header-padding-y: map.get( $size-props, header-padding-y );
-        $_header-font-size: map.get( $size-props, header-font-size );
-        $_header-line-height: map.get( $size-props, header-line-height );
-        $_item-padding-x: map.get( $size-props, item-padding-x );
-        $_item-padding-y: map.get( $size-props, item-padding-y );
-        $_item-font-size: map.get( $size-props, item-font-size );
-        $_item-line-height: map.get( $size-props, item-line-height );
-        $_group-item-padding-x: map.get( $size-props, group-item-padding-x );
-        $_group-item-padding-y: map.get( $size-props, group-item-padding-y );
-        $_group-item-font-size: map.get( $size-props, group-item-font-size );
-        $_group-item-line-height: map.get( $size-props, group-item-line-height );
-        $_group-label-padding-x: map.get( $size-props, item-group-label-padding-x );
-        $_group-label-padding-y: map.get( $size-props, item-group-label-padding-y );
-        $_group-label-font-size: map.get( $size-props, item-group-label-font-size );
-        $_group-label-line-height: map.get( $size-props, item-group-label-line-height );
-        $_filter-padding-x: map.get( $size-props, filter-padding-x );
-        $_filter-padding-y: map.get( $size-props, filter-padding-y );
-
-        .k-list-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            // .k-list-header,
-            .k-list-group-sticky-header {
-                padding-block: $_header-padding-y;
-                padding-inline: $_header-padding-x;
-                font-size: $_header-font-size;
-                line-height: $_header-line-height;
-            }
-
-            .k-list-filter {
-                padding-inline: $_filter-padding-x;
-                padding-block: $_filter-padding-y;
-            }
-
-            .k-list-item,
-            .k-list-custom-value {
-                padding-block: $_item-padding-y;
-                padding-inline: $_item-padding-x;
-                font-size: $_item-font-size;
-                line-height: $_item-line-height;
-            }
-
-            .k-list-group-item {
-                padding-block: $_group-item-padding-y;
-                padding-inline: $_group-item-padding-x;
-                font-size: $_group-item-font-size;
-                line-height: $_group-item-line-height;
-            }
-
-            .k-list-item-group-label {
-                padding-block: $_group-label-padding-y;
-                padding-inline: $_group-label-padding-x;
-                font-size: $_group-label-font-size;
-                line-height: $_group-label-line-height;
-            }
-        }
-    }
 }

package/scss/components/list/_variables.scss

@@ -1,5 +1,7 @@
 // List
 
+$kendo-list-default-size: null !default;
+
 $kendo-list-font-family: null !default;
 
 $kendo-list-font-size: null !default;
@@ -98,7 +100,76 @@ $kendo-list-lg-group-item-line-height: null !default;
 $kendo-list-group-item-font-weight: null !default;
 
 
-$kendo-list-sizes: null !default;
+/// The sizes map of the List.
+/// @group list
+$kendo-list-sizes: (
+    sm: (
+        font-size: $kendo-list-sm-font-size,
+        line-height: $kendo-list-sm-line-height,
+        header-padding-x: $kendo-list-sm-header-padding-x,
+        header-padding-y: $kendo-list-sm-header-padding-y,
+        header-font-size: $kendo-list-sm-header-font-size,
+        header-line-height: $kendo-list-sm-header-line-height,
+        item-padding-x: $kendo-list-sm-item-padding-x,
+        item-padding-y: $kendo-list-sm-item-padding-y,
+        item-font-size: $kendo-list-sm-item-font-size,
+        item-line-height: $kendo-list-sm-item-line-height,
+        group-item-padding-x: $kendo-list-sm-group-item-padding-x,
+        group-item-padding-y: $kendo-list-sm-group-item-padding-y,
+        group-item-font-size: $kendo-list-sm-group-item-font-size,
+        group-item-line-height: $kendo-list-sm-group-item-line-height,
+        item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-sm-line-height,
+        filter-padding-x: $kendo-list-sm-filter-padding-x,
+        filter-padding-y: $kendo-list-sm-filter-padding-y
+    ),
+    md: (
+        font-size: $kendo-list-md-font-size,
+        line-height: $kendo-list-md-line-height,
+        header-padding-x: $kendo-list-md-header-padding-x,
+        header-padding-y: $kendo-list-md-header-padding-y,
+        header-font-size: $kendo-list-md-header-font-size,
+        header-line-height: $kendo-list-md-header-line-height,
+        item-padding-x: $kendo-list-md-item-padding-x,
+        item-padding-y: $kendo-list-md-item-padding-y,
+        item-font-size: $kendo-list-md-item-font-size,
+        item-line-height: $kendo-list-md-item-line-height,
+        group-item-padding-x: $kendo-list-md-group-item-padding-x,
+        group-item-padding-y: $kendo-list-md-group-item-padding-y,
+        group-item-font-size: $kendo-list-md-group-item-font-size,
+        group-item-line-height: $kendo-list-md-group-item-line-height,
+        item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-md-line-height,
+        filter-padding-x: $kendo-list-md-filter-padding-x,
+        filter-padding-y: $kendo-list-md-filter-padding-y
+    ),
+    lg: (
+        font-size: $kendo-list-lg-font-size,
+        line-height: $kendo-list-lg-line-height,
+        header-padding-x: $kendo-list-lg-header-padding-x,
+        header-padding-y: $kendo-list-lg-header-padding-y,
+        header-font-size: $kendo-list-lg-header-font-size,
+        header-line-height: $kendo-list-lg-header-line-height,
+        item-padding-x: $kendo-list-lg-item-padding-x,
+        item-padding-y: $kendo-list-lg-item-padding-y,
+        item-font-size: $kendo-list-lg-item-font-size,
+        item-line-height: $kendo-list-lg-item-line-height,
+        group-item-padding-x: $kendo-list-lg-group-item-padding-x,
+        group-item-padding-y: $kendo-list-lg-group-item-padding-y,
+        group-item-font-size: $kendo-list-lg-group-item-font-size,
+        group-item-line-height: $kendo-list-lg-group-item-line-height,
+        item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
+        item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
+        item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
+        item-group-label-line-height: $kendo-list-item-group-label-lg-line-height,
+        filter-padding-x: $kendo-list-lg-filter-padding-x,
+        filter-padding-y: $kendo-list-lg-filter-padding-y
+    )
+) !default;
 
 
 $kendo-list-bg: null !default;

package/scss/components/loader/_layout.scss

@@ -1,6 +1,7 @@
 @use "./_variables.scss" as *;
 @use "../overlay/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../functions/index.scss" as *;
 
 @mixin kendo-loader--layout-base() {
 
@@ -13,6 +14,35 @@
         // Prevents the inline elements from being displaced.
         // A good example is the 'pulsing' loader inside a button.
         line-height: 0;
+
+        // Loader sizes
+        #{k-when-default($kendo-loader-default-size, "sm")}
+        &.k-loader-sm {
+            padding: $kendo-loader-sm-padding;
+
+            .k-loader-segment {
+                width: $kendo-loader-sm-segment-size;
+                height: $kendo-loader-sm-segment-size;
+            }
+        }
+        #{k-when-default($kendo-loader-default-size, "md")}
+        &.k-loader-md {
+            padding: $kendo-loader-md-padding;
+
+            .k-loader-segment {
+                width: $kendo-loader-md-segment-size;
+                height: $kendo-loader-md-segment-size;
+            }
+        }
+        #{k-when-default($kendo-loader-default-size, "lg")}
+        &.k-loader-lg {
+            padding: $kendo-loader-lg-padding;
+
+            .k-loader-segment {
+                width: $kendo-loader-lg-segment-size;
+                height: $kendo-loader-lg-segment-size;
+            }
+        }
     }
 
     .k-loader-canvas {
@@ -27,35 +57,6 @@
         position: absolute;
     }
 
-    // Loader sizes
-    .k-loader-sm {
-        padding: $kendo-loader-sm-padding;
-
-        .k-loader-segment {
-            width: $kendo-loader-sm-segment-size;
-            height: $kendo-loader-sm-segment-size;
-        }
-    }
-    .k-loader-md {
-        padding: $kendo-loader-md-padding;
-
-        .k-loader-segment {
-            width: $kendo-loader-md-segment-size;
-            height: $kendo-loader-md-segment-size;
-        }
-    }
-    .k-loader-lg {
-        padding: $kendo-loader-lg-padding;
-
-        .k-loader-segment {
-            width: $kendo-loader-lg-segment-size;
-            height: $kendo-loader-lg-segment-size;
-        }
-    }
-
-
-
-
     // Loader pulsing 2
     @keyframes pulsing-2-segment {
         0% { transform: scale(1); }
@@ -84,6 +85,7 @@
             animation: pulsing-2-segment 1s ease infinite;
         }
 
+        #{k-when-default($kendo-loader-default-size, "sm")}
         &.k-loader-sm {
             .k-loader-canvas {
                 width: calc( #{$kendo-loader-sm-segment-size} * 3 );
@@ -91,6 +93,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "md")}
         &.k-loader-md {
             .k-loader-canvas {
                 width: calc( #{$kendo-loader-md-segment-size} * 3 );
@@ -98,6 +101,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "lg")}
         &.k-loader-lg {
             .k-loader-canvas {
                 width: calc( #{$kendo-loader-lg-segment-size} * 3 );
@@ -163,6 +167,7 @@
         }
 
 
+        #{k-when-default($kendo-loader-default-size, "sm")}
         &.k-loader-sm {
             .k-loader-canvas {
                 margin: calc( #{$kendo-loader-sm-segment-size} / 2 );
@@ -171,6 +176,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "md")}
         &.k-loader-md {
             .k-loader-canvas {
                 margin: calc( #{ $kendo-loader-md-segment-size} / 2 );
@@ -179,6 +185,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "lg")}
         &.k-loader-lg {
             .k-loader-canvas {
                 margin: calc( #{$kendo-loader-lg-segment-size} / 2 );
@@ -337,6 +344,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "sm")}
         &.k-loader-sm {
             .k-loader-canvas {
                 width: $kendo-loader-sm-spinner-4-width;
@@ -344,6 +352,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "md")}
         &.k-loader-md {
             .k-loader-canvas {
                 width: $kendo-loader-md-spinner-4-width;
@@ -351,6 +360,7 @@
             }
         }
 
+        #{k-when-default($kendo-loader-default-size, "lg")}
         &.k-loader-lg {
             .k-loader-canvas {
                 width: $kendo-loader-lg-spinner-4-width;
@@ -372,6 +382,42 @@
         .k-loader {
             padding: 0;
         }
+
+        // Loader Container Sizes
+        #{k-when-default($kendo-loader-default-size, "sm")}
+        &.k-loader-container-sm {
+            .k-loader-container-inner {
+                padding: $kendo-loader-sm-container-padding;
+                gap: $kendo-loader-sm-container-gap;
+            }
+
+            .k-loader-container-label {
+                font-size: $kendo-loader-sm-container-font-size;
+            }
+        }
+        #{k-when-default($kendo-loader-default-size, "md")}
+        &.k-loader-container-md {
+            .k-loader-container-inner {
+                padding: $kendo-loader-md-container-padding;
+                gap: $kendo-loader-md-container-gap;
+            }
+
+            .k-loader-container-label {
+                font-size: $kendo-loader-md-container-font-size;
+            }
+        }
+        #{k-when-default($kendo-loader-default-size, "lg")}
+        &.k-loader-container-lg {
+            .k-loader-container-inner {
+                padding: $kendo-loader-lg-container-padding;
+                gap: $kendo-loader-lg-container-gap;
+            }
+
+            .k-loader-container-label {
+                font-size: $kendo-loader-lg-container-font-size;
+            }
+        }
+
     }
 
     .k-loader-container,
@@ -403,38 +449,6 @@
         border-radius: $kendo-loader-container-panel-border-radius;
     }
 
-    // Loader Container Sizes
-    .k-loader-container-sm {
-        .k-loader-container-inner {
-            padding: $kendo-loader-sm-container-padding;
-            gap: $kendo-loader-sm-container-gap;
-        }
-
-        .k-loader-container-label {
-            font-size: $kendo-loader-sm-container-font-size;
-        }
-    }
-    .k-loader-container-md {
-        .k-loader-container-inner {
-            padding: $kendo-loader-md-container-padding;
-            gap: $kendo-loader-md-container-gap;
-        }
-
-        .k-loader-container-label {
-            font-size: $kendo-loader-md-container-font-size;
-        }
-    }
-    .k-loader-container-lg {
-        .k-loader-container-inner {
-            padding: $kendo-loader-lg-container-padding;
-            gap: $kendo-loader-lg-container-gap;
-        }
-
-        .k-loader-container-label {
-            font-size: $kendo-loader-lg-container-font-size;
-        }
-    }
-
     // Loader Position
     .k-loader-top {
         .k-loader-container-inner {

package/scss/components/loader/_theme.scss

@@ -1,16 +1,17 @@
 @use "../../color-system/_functions.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-loader--theme-base() {
-    .k-loader,
-    .k-loader + .k-loader-container-label {
-        color: k-color(base-on-surface);
-    }
-
-    @each $name, $color in $kendo-loader-theme-colors {
-        .k-loader-#{$name},
-        .k-loader-#{$name} + .k-loader-container-label {
-            color: k-color(#{$name}-on-surface);
+    .k-loader {
+        @each $name in $kendo-loader-theme-colors {
+                #{k-when-default($kendo-loader-default-theme-color, $name)}
+                &.k-loader-#{$name} {
+                    color: k-color(#{$name}-on-surface);
+                    &+.k-loader-container-label {
+                        color: k-color(#{$name}-on-surface);
+                    }
+            }
         }
     }
 
@@ -18,5 +19,4 @@
         background-color: $kendo-loader-container-panel-bg;
         border-color: $kendo-loader-container-panel-border-color;
     }
-
 }

package/scss/components/loader/_variables.scss

@@ -1,5 +1,9 @@
 // Loader
 
+$kendo-loader-default-size: null !default;
+
+$kendo-loader-default-theme-color: null !default;
+
 $kendo-loader-segment-border-radius: null !default;
 
 $kendo-loader-sm-segment-size: null !default;
@@ -50,4 +54,6 @@ $kendo-loading-text: null !default;
 $kendo-loading-opacity: null !default;
 $kendo-zindex-loading: null !default;
 
-$kendo-loader-theme-colors: null !default;
+/// The theme colors map of the Loader.
+/// @group loader
+$kendo-loader-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;