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

package/scss/components/grid/_layout.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../typography/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../z-index/index.scss" as *;
@@ -954,124 +955,130 @@
         $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
         $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
 
-        .k-grid .k-grid-#{$size},
-        .k-grid-#{$size} {
-
-            .k-table-th {
-                padding-block: $_header-padding-y;
-                padding-inline: $_header-padding-x;
-            }
-
-            td,
-            .k-table-td {
-                padding-block: $_cell-padding-y;
-                padding-inline: $_cell-padding-x;
-            }
+        .k-grid,
+        .k-grid .k-grid {
 
-            .k-grouping-header {
-                padding-block: $_grouping-header-padding-y;
-                padding-inline: $_grouping-header-padding-x;
-                gap: $_grouping-header-padding-y;
+            #{k-when-default($kendo-grid-default-size, $size)}
+            &.k-grid-#{$size}{
 
-                &::before {
-                    margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 );
-                }
-            }
-
-            .k-grid-header {
-                .k-table-th > .k-link {
-                    margin-block: calc( #{$_header-padding-y} * -1 );
-                    margin-inline: calc( #{$_header-padding-x} * -1 );
+                .k-table-th {
                     padding-block: $_header-padding-y;
                     padding-inline: $_header-padding-x;
                 }
 
-                .k-grid-filter,
-                .k-header-column-menu,
-                .k-grid-header-menu {
-                    padding: $_button-padding-y;
-                    width: $_button-calc-size;
-                    height: $_button-calc-size;
-                    line-height: $_button-line-height;
-                    inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
+                td,
+                .k-table-td {
+                    padding-block: $_cell-padding-y;
+                    padding-inline: $_cell-padding-x;
                 }
-            }
 
-            .k-table-th {
-                > .k-cell-inner {
-                    margin-block: calc( #{$_header-padding-y} * -1 );
-                    margin-inline: calc( #{$_header-padding-x} * -1 );
+                .k-grouping-header {
+                    padding-block: $_grouping-header-padding-y;
+                    padding-inline: $_grouping-header-padding-x;
+                    gap: $_grouping-header-padding-y;
+
+                    &::before {
+                        margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 );
+                    }
+                }
 
-                    > .k-link {
+                .k-grid-header {
+                    .k-table-th > .k-link {
+                        margin-block: calc( #{$_header-padding-y} * -1 );
+                        margin-inline: calc( #{$_header-padding-x} * -1 );
                         padding-block: $_header-padding-y;
                         padding-inline: $_header-padding-x;
                     }
-                }
-            }
 
-            .k-grouping-row .k-icon {
-                margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
-            }
+                    .k-grid-filter,
+                    .k-header-column-menu,
+                    .k-grid-header-menu {
+                        padding: $_button-padding-y;
+                        width: $_button-calc-size;
+                        height: $_button-calc-size;
+                        line-height: $_button-line-height;
+                        inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
+                    }
+                }
 
-            .k-grouping-dropclue {
-                height: $_group-dropclue-height;
-            }
+                .k-table-th {
+                    > .k-cell-inner {
+                        margin-block: calc( #{$_header-padding-y} * -1 );
+                        margin-inline: calc( #{$_header-padding-x} * -1 );
+
+                        > .k-link {
+                            padding-block: $_header-padding-y;
+                            padding-inline: $_header-padding-x;
+                        }
+                    }
+                }
 
-            .k-hierarchy-cell,
-            .k-drag-cell {
-                padding: 0;
+                .k-grouping-row .k-icon {
+                    margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
+                }
 
-                > .k-icon {
-                    padding-block: $_cell-padding-y;
-                    padding-inline: 0;
+                .k-grouping-dropclue {
+                    height: $_group-dropclue-height;
                 }
-            }
 
+                .k-table {
+                    .k-hierarchy-cell,
+                    .k-drag-cell {
 
-            // Edit row
-            .k-edit-cell,
-            .k-command-cell,
-            .k-grid-edit-row td,
-            .k-grid-edit-row .k-table-td {
-                padding-block: $_edit-cell-padding-y;
-                padding-inline: $_edit-cell-padding-x;
-            }
+                        padding: 0;
 
+                        > .k-icon {
+                            padding-block: $_cell-padding-y;
+                            padding-inline: 0;
+                        }
+                    }
 
-            // Filter row
-            .k-filter-row {
-                td,
-                .k-table-td,
-                .k-table-th {
-                    padding-block: $_filter-cell-padding-y;
-                    padding-inline: $_filter-cell-padding-x;
+                    // Edit row
+                    .k-edit-cell,
+                    .k-command-cell,
+                    .k-grid-edit-row td,
+                    .k-grid-edit-row .k-table-td {
+                        padding-block: $_edit-cell-padding-y;
+                        padding-inline: $_edit-cell-padding-x;
+                    }
                 }
-            }
 
-            .k-filtercell {
-                > span,
-                .k-filtercell-wrapper {
-                    gap: calc( #{$_cell-padding-y} / 2 );
+
+                // Filter row
+                .k-filter-row {
+                    td,
+                    .k-table-td,
+                    .k-table-th {
+                        padding-block: $_filter-cell-padding-y;
+                        padding-inline: $_filter-cell-padding-x;
+                    }
                 }
-            }
 
+                .k-filtercell {
+                    > span,
+                    .k-filtercell-wrapper {
+                        gap: calc( #{$_cell-padding-y} / 2 );
+                    }
+                }
 
-            // Selection Aggregates
-            .k-selection-aggregates {
-                padding-block: $_selection-aggregates-padding-x;
-                padding-inline: $_selection-aggregates-padding-y;
-            }
 
-            // Resizing wrapper
-            .k-resizer-wrap {
-                display: block;
-                width: 100%;
-                padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} );
-                padding-block-end: $_edit-cell-padding-y;
-                position: absolute;
-                background: none;
-                cursor: row-resize;
-                z-index: k-z-index("base", 2);
+                // Selection Aggregates
+                .k-selection-aggregates {
+                    padding-block: $_selection-aggregates-padding-x;
+                    padding-inline: $_selection-aggregates-padding-y;
+                }
+
+                // Resizing wrapper
+                .k-resizer-wrap {
+                    display: block;
+                    width: 100%;
+                    padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} );
+                    padding-block-end: $_edit-cell-padding-y;
+                    position: absolute;
+                    background: none;
+                    cursor: row-resize;
+                    z-index: k-z-index("base", 2);
+                }
             }
         }
 
@@ -1084,8 +1091,8 @@
             table-layout: auto;
         }
 
-        .k-table-td,
-        .k-grid-edit-row .k-table-td {
+        .k-table .k-table-td,
+        .k-table .k-grid-edit-row .k-table-td {
             padding-inline: $kendo-grid-stack-cell-padding-x;
             padding-block: $kendo-grid-stack-cell-padding-y;
         }
@@ -1115,6 +1122,18 @@
             gap: 0;
             padding-inline-start: k-spacing(1);
         }
+
+        // Command cell
+        .k-grid-stack-cell.k-command-cell {
+            padding: 0;
+            grid-column: 1 / -1;
+
+            .k-grid-stack-content {
+                display: flex;
+                flex-wrap: wrap;
+                gap: $kendo-grid-command-cell-button-spacing;
+            }
+        }
     }
 
     .k-grid-stack-row {
@@ -1142,18 +1161,6 @@
         }
     }
 
-     // Command cell
-    .k-grid-stack-cell.k-command-cell {
-        padding: 0;
-        grid-column: 1 / -1;
-
-        .k-grid-stack-content {
-            display: flex;
-            flex-wrap: wrap;
-            gap: $kendo-grid-command-cell-button-spacing;
-        }
-    }
-
     // Dirty cell
     .k-grid-stack-cell .k-dirty {
         inset-inline-start: auto;

package/scss/components/grid/_variables.scss

@@ -1,4 +1,8 @@
-// Grid
+// Grid`
+@use "../button/_variables.scss" as *;
+
+$kendo-grid-default-size: null !default;
+
 $kendo-grid-border-width: null !default;
 $kendo-grid-font-family: null !default;
 $kendo-grid-font-size: null !default;
@@ -59,9 +63,44 @@ $kendo-grid-md-group-dropclue-height: null !default;
 $kendo-grid-md-selection-aggregates-padding-x: null !default;
 $kendo-grid-md-selection-aggregates-padding-y: null !default;
 
-
-// Kendo Grid sizes
-$kendo-grid-sizes: null !default;
+/// The sizes map of the Grid.
+/// @group grid
+$kendo-grid-sizes: (
+    sm: (
+        header-padding-x: $kendo-grid-sm-header-padding-x,
+        header-padding-y: $kendo-grid-sm-header-padding-y,
+        grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
+        grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
+        cell-padding-x: $kendo-grid-sm-cell-padding-x,
+        cell-padding-y: $kendo-grid-sm-cell-padding-y,
+        filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
+        filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
+        edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
+        edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
+        button-padding-y: $kendo-button-sm-padding-y,
+        button-calc-size: $kendo-button-sm-calc-size,
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
+    ),
+    md: (
+        header-padding-x: $kendo-grid-md-header-padding-x,
+        header-padding-y: $kendo-grid-md-header-padding-y,
+        grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
+        grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
+        cell-padding-x: $kendo-grid-md-cell-padding-x,
+        cell-padding-y: $kendo-grid-md-cell-padding-y,
+        filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
+        filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
+        edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
+        edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
+        button-padding-y: $kendo-button-md-padding-y,
+        button-calc-size: $kendo-button-md-calc-size,
+        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
+    ),
+) !default;
 
 $kendo-grid-header-font-size: null !default;
 $kendo-grid-header-first-border: null !default;

package/scss/components/icons/_layout.scss

@@ -1,7 +1,8 @@
 @use "./_variables.scss" as *;
 
 @use "@progress/kendo-svg-icons/scss/index.scss" as * with (
-    $ki-icon-size: $kendo-icon-size
+    $ki-icon-size: $kendo-icon-size,
+    $ki-icon-default-size: $kendo-icon-default-size
 );
 
 @mixin kendo-icon--layout-base() {

package/scss/components/icons/_variables.scss

@@ -1,3 +1,4 @@
+$kendo-icon-default-size: null !default;
 $kendo-icon-size: null !default;
 $kendo-icon-size-xs: null !default;
 $kendo-icon-size-sm: null !default;

package/scss/components/input/_layout.scss

@@ -1,18 +1,19 @@
 @use "sass:map";
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 
 @mixin kendo-input--layout-base() {
 
     // Generic input
     .k-input,
     .k-picker {
-        @include border-radius( $kendo-input-border-radius );
         margin: 0;
         padding: 0;
         width: $kendo-input-default-width;
@@ -22,8 +23,6 @@
         border-style: solid;
         outline: 0;
         font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
         font-weight: normal;
         text-align: start;
         box-shadow: none;
@@ -66,8 +65,165 @@
         }
     }
 
+    .k-input {
+
+        // Roundness
+        @each $roundness in $kendo-input-roundness {
+            #{k-when-default($kendo-input-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+        // Null by default, overrides default border-radius
+        border-radius: $kendo-input-border-radius;
+
+        // Sizing
+        @each $size, $size-props in $kendo-input-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
+            $_padding-y: map.get( $size-props, padding-y );
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_button-padding-x: map.get( $size-props, button-padding-x );
+            $_button-padding-y: map.get( $size-props, button-padding-y );
+
+            #{k-when-default($kendo-input-default-size, $size)}
+            &.k-input-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-input-values {
+                    padding: calc( #{$_padding-y} /2 );
+                    gap: calc( #{$_padding-y} / 2 );
+                }
+                .k-input-values > .k-searchbar,
+                .k-input-values > .k-input-inner {
+                    margin: calc( calc( #{$_padding-y} / 2 ) * -1 );
+                }
+
+                .k-input-inner {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-x;
+                }
+
+                .k-input-button,
+                .k-spinner-increase,
+                .k-spinner-decrease {
+                    padding-block: $_button-padding-y;
+                    padding-inline: $_button-padding-x;
+                }
+
+                .k-input-icon,
+                .k-input-validation-icon,
+                .k-input-loading-icon,
+                .k-clear-value,
+                .k-input-prefix > .k-icon,
+                .k-input-prefix > .k-icon-wrapper-host .k-icon,
+                .k-input-prefix > .k-input-prefix-text,
+                .k-input-suffix > .k-icon,
+                .k-input-suffix > .k-icon-wrapper-host .k-icon,
+                .k-input-suffix > .k-input-suffix-text {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-y;
+                    box-sizing: content-box;
+                }
+
+                .k-input-separator {
+                    &-horizontal {
+                        margin-inline: $_padding-y;
+                    }
+
+                    &-vertical {
+                        margin-block: $_padding-y;
+                    }
+                }
+            }
+        }
+
+        font-size: $kendo-input-font-size;
+        line-height: $kendo-input-line-height;
+
+        // Fill mode
+        #{k-when-default($kendo-input-default-fill-mode, "flat")}
+        &.k-input-flat {
+            @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
+            border-width: $kendo-input-border-width 0;
+            border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
+            background-image: none !important; // stylelint-disable-line declaration-no-important
+        }
+    }
+
+    .k-picker {
+
+        // Roundness
+        @each $roundness in $kendo-picker-roundness {
+            #{k-when-default($kendo-picker-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+        // Null by default, overrides default border-radius
+        border-radius: $kendo-input-border-radius;
+
+        // Sizing
+        @each $size, $size-props in $kendo-input-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
+            $_padding-y: map.get( $size-props, padding-y );
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+
+            #{k-when-default($kendo-picker-default-size, $size)}
+            &.k-picker-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-input-inner {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-x;
+                }
+
+                .k-input-icon,
+                .k-input-validation-icon,
+                .k-input-loading-icon,
+                .k-clear-value,
+                .k-input-prefix > .k-icon,
+                .k-input-prefix > .k-icon-wrapper-host .k-icon,
+                .k-input-prefix > .k-input-prefix-text,
+                .k-input-suffix > .k-icon,
+                .k-input-suffix > .k-icon-wrapper-host .k-icon,
+                .k-input-suffix > .k-input-suffix-text {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-y;
+                    box-sizing: content-box;
+                }
+
+                &.k-icon-picker > .k-input-inner {
+                    width: calc( ( #{ $_line-height} * 1em ) );
+                    height: calc( ( #{ $_line-height} * 1em ) );
+                    padding: $_padding-y;
+                    box-sizing: content-box;
+                }
+            }
+
+            select.k-picker-#{$size} {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+            }
+        }
+
+        font-size: $kendo-input-font-size;
+        line-height: $kendo-input-line-height;
+
+        // Fill mode
+        #{k-when-default($kendo-picker-default-fill-mode, "flat")}
+        &.k-picker-flat {
+            @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
+            border-width: $kendo-input-border-width 0;
+            border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
+            background-image: none !important; // stylelint-disable-line declaration-no-important
+        }
+    }
+
     // Input and Textarea
-    .k-input {}
     input.k-input,
     textarea.k-textarea {
         padding-block: $kendo-input-md-padding-y;
@@ -365,6 +521,7 @@
         width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto );
         border-width: 0;
         border-inline-start-width: $kendo-input-button-border-width;
+        border-radius: 0;
         flex: none;
         aspect-ratio: auto;
         box-shadow: none;
@@ -396,6 +553,7 @@
         .k-spinner-decrease {
             border-width: 0;
             border-inline-start-width: $kendo-input-button-border-width;
+            border-radius: 0;
             flex: 1 1 50%;
             box-shadow: none;
             position: relative;
@@ -442,96 +600,6 @@
         position: relative;
     }
 
-
-    // Fill mode
-    .k-input-flat,
-    .k-picker-flat {
-        @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
-        border-width: $kendo-input-border-width 0;
-        border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
-        background-image: none !important; // stylelint-disable-line declaration-no-important
-    }
-
-    .k-input-outline {
-        background: none !important; // stylelint-disable-line declaration-no-important
-    }
-
-
-    // Sizing
-    @each $size, $size-props in $kendo-input-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_button-padding-x: map.get( $size-props, button-padding-x );
-        $_button-padding-y: map.get( $size-props, button-padding-y );
-
-        .k-input-#{$size},
-        .k-picker-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-input-values {
-                padding: calc( #{$_padding-y} /2 );
-                gap: calc( #{$_padding-y} / 2 );
-            }
-            .k-input-values > .k-searchbar,
-            .k-input-values > .k-input-inner {
-                margin: calc( calc( #{$_padding-y} / 2 ) * -1 );
-            }
-
-            .k-input-inner {
-                padding-block: $_padding-y;
-                padding-inline: $_padding-x;
-            }
-
-            .k-input-button,
-            .k-spinner-increase,
-            .k-spinner-decrease {
-                padding-block: $_button-padding-y;
-                padding-inline: $_button-padding-x;
-            }
-
-            .k-input-icon,
-            .k-input-validation-icon,
-            .k-input-loading-icon,
-            .k-clear-value,
-            .k-input-prefix > .k-icon,
-            .k-input-prefix > .k-icon-wrapper-host .k-icon,
-            .k-input-prefix > .k-input-prefix-text,
-            .k-input-suffix > .k-icon,
-            .k-input-suffix > .k-icon-wrapper-host .k-icon,
-            .k-input-suffix > .k-input-suffix-text {
-                padding-block: $_padding-y;
-                padding-inline: $_padding-y;
-                box-sizing: content-box;
-            }
-
-            .k-input-separator {
-                &-horizontal {
-                    margin-inline: $_padding-y;
-                }
-
-                &-vertical {
-                    margin-block: $_padding-y;
-                }
-            }
-
-            &.k-icon-picker > .k-input-inner {
-                width: calc( ( #{ $_line-height} * 1em ) );
-                height: calc( ( #{ $_line-height} * 1em ) );
-                padding: $_padding-y;
-                box-sizing: content-box;
-            }
-        }
-
-        select.k-picker-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-        }
-    }
-
-
     // Angular specific
     .k-input > kendo-popup,
     .k-picker > kendo-popup {