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

package/scss/grid/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
 @use "../forms/_variables.scss" as *;
@@ -59,6 +60,20 @@
         .k-grid-header .k-cell-inner > .k-link > .k-sort-icon .k-icon {
             display: inline-flex;
         }
+
+        // Grid Sizes
+        @each $size, $size-props in $kendo-grid-sizes {
+            $_cell-padding-y: map.get( $size-props, cell-padding-y );
+
+            // Resizing wrapper
+            #{k-when-default($kendo-grid-default-size, $size)}
+            &.k-grid-#{$size} {
+                .k-resizer-wrap {
+                    padding-block-start: calc( #{$_cell-padding-y} - #{$kendo-grid-row-resizer-height} );
+                    padding-block-end: $_cell-padding-y;
+                }
+            }
+        }
     }
 
     .k-grouping-dropclue {
@@ -269,15 +284,4 @@
         font-weight: $kendo-grid-column-menu-group-header-font-weight;
     }
 
-    // Grid Sizes
-    @each $size, $size-props in $kendo-grid-sizes {
-        $_cell-padding-y: map.get( $size-props, cell-padding-y );
-
-        // Resizing wrapper
-        .k-grid-#{$size} .k-resizer-wrap {
-            padding-block-start: calc( #{$_cell-padding-y} - #{$kendo-grid-row-resizer-height} );
-            padding-block-end: $_cell-padding-y;
-        }
-    }
-
 }

package/scss/grid/_variables.scss

@@ -7,6 +7,11 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
 
+/// The default size of the Grid.
+/// @group grid
+/// @role default
+$kendo-grid-default-size: "md" !default;
+
 /// The border width of the Grid.
 /// @group grid
 $kendo-grid-border-width: var( --kendo-grid-border-width, 1px ) !default;
@@ -175,47 +180,6 @@ $kendo-grid-md-selection-aggregates-padding-x: k-spacing(2) !default;
 $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-x !default;
 
 
-// Kendo Grid sizes
-/// The sizes 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;
-
-
 /// The background color of the Grid.
 /// @group grid
 $kendo-grid-bg: var( --kendo-grid-bg, #{$kendo-table-bg} ) !default;
@@ -430,6 +394,10 @@ $kendo-grid-sticky-header-border: var( --kendo-grid-sticky-header-border, #{$ken
 /// @group grid
 $kendo-grid-sticky-footer-bg: var( --kendo-grid-sticky-footer-bg, #{$kendo-grid-header-bg} ) !default;
 
+/// The box shadow of the sticky container in the Grid.
+/// @group grid
+$kendo-grid-sticky-container-shadow: k-elevation(3) !default;
+
 /// The horizontal padding of the Grid filter menu container.
 /// @group grid
 $kendo-filter-menu-container-padding-y: var( --kendo-filter-menu-container-padding-y, #{k-spacing(3)} ) !default;
@@ -590,7 +558,12 @@ $kendo-grid-stack-focus-outline: var( --kendo-grid-stack-focus-outline, #{k-colo
 /// @group grid
 $kendo-grid-stack-expandable-shadow: var( --kendo-grid-stack-expandable-shadow, #{k-elevation(2)} ) !default;
 
+/// The font weight of the pinned source row in the Grid.
+/// @group grid
+$kendo-grid-pinned-source-font-weight: var( --kendo-font-weight-semibold, 600 ) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/grid/_variables.scss" with (
+    $kendo-grid-default-size: $kendo-grid-default-size,
     $kendo-grid-border-width: $kendo-grid-border-width,
     $kendo-grid-font-family: $kendo-grid-font-family,
     $kendo-grid-font-size: $kendo-grid-font-size,
@@ -641,7 +614,6 @@ $kendo-grid-stack-expandable-shadow: var( --kendo-grid-stack-expandable-shadow,
     $kendo-grid-md-group-dropclue-height: $kendo-grid-md-group-dropclue-height,
     $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
     $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y,
-    $kendo-grid-sizes: $kendo-grid-sizes,
     $kendo-grid-header-font-size: $kendo-grid-header-font-size,
     $kendo-grid-header-first-border: $kendo-grid-header-first-border-width,
     $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-spacing,
@@ -726,5 +698,7 @@ $kendo-grid-stack-expandable-shadow: var( --kendo-grid-stack-expandable-shadow,
     $kendo-grid-stack-focus-outline: $kendo-grid-stack-focus-outline,
     $kendo-grid-stack-expandable-shadow: $kendo-grid-stack-expandable-shadow,
     $kendo-grid-cell-vertical-border-width: $kendo-grid-cell-border-width-x,
-    $kendo-grid-cell-horizontal-border-width: $kendo-grid-cell-border-width-y
+    $kendo-grid-cell-horizontal-border-width: $kendo-grid-cell-border-width-y,
+    $kendo-grid-pinned-source-font-weight: $kendo-grid-pinned-source-font-weight,
+    $kendo-grid-sticky-container-shadow: $kendo-grid-sticky-container-shadow
 );

package/scss/icons/_variables.scss

@@ -1,6 +1,11 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+/// The default size of the Icon.
+/// @group icon
+/// @role default
+$kendo-icon-default-size: "md" !default;
+
 /// The default size of the Icons.
 /// @group icon
 $kendo-icon-size: 1rem !default;
@@ -35,6 +40,7 @@ $kendo-icon-spacing: k-spacing(2) !default;
 $kendo-icon-padding: k-spacing(1) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
+    $kendo-icon-default-size: $kendo-icon-default-size,
     $kendo-icon-size: $kendo-icon-size,
     $kendo-icon-size-xs: $kendo-icon-size-xs,
     $kendo-icon-size-sm: $kendo-icon-size-sm,

package/scss/input/_layout.scss

@@ -3,6 +3,7 @@
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../core/z-index/index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *;
 
 @mixin kendo-input--layout() {
@@ -31,12 +32,25 @@
     }
 
     // Solid and flat Numeric Textbox
-    .k-numerictextbox.k-input-solid,
-    .k-numerictextbox.k-input-flat  {
+    .k-numerictextbox {
 
-        .k-spinner-increase,
-        .k-spinner-decrease {
-            border: none;
+        #{k-when-default($kendo-input-default-fill-mode, ("solid", "flat"))}
+        &.k-input-solid,
+        &.k-input-flat {
+
+            .k-spinner-increase,
+            .k-spinner-decrease {
+                border-width: 0;
+            }
+        }
+
+        #{k-when-default($kendo-input-default-fill-mode, "outline")}
+        &.k-input-outline {
+
+            .k-spinner-increase,
+            .k-spinner-decrease {
+                border-inline-start-width: $kendo-input-button-border-width;
+            }
         }
     }
 
@@ -63,8 +77,14 @@
         padding-block: $kendo-input-md-padding-y;
     }
 
-    .k-input-outline .k-input-button {
-        border-inline-start-width: $kendo-input-button-border-width;
+    .k-input {
+
+        #{k-when-default($kendo-input-default-fill-mode, "outline")}
+        &.k-input-outline {
+            .k-input-button {
+                border-inline-start-width: $kendo-input-button-border-width;
+            }
+        }
     }
 
 
@@ -109,75 +129,114 @@
         }
     }
 
-    .k-input-outline,
-    .k-picker-outline {
-
-        &::after {
-            display: none;
-        }
-
-        &:focus,
-        &.k-focus,
-        &:focus-within {
-
-            outline: $kendo-input-focus-border-width solid k-color(primary);
-            outline-offset: calc( -1 * #{$kendo-input-focus-border-width} );
+    .k-input {
 
-        }
+        #{k-when-default($kendo-input-default-fill-mode, "outline")}
+        &.k-input-outline {
 
-        &.k-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
+            &::after {
+                display: none;
+            }
 
             &:focus,
             &.k-focus,
             &:focus-within {
+                outline: $kendo-input-focus-border-width solid k-color(primary);
+                outline-offset: calc( -1 * #{$kendo-input-focus-border-width} );
+            }
 
-                outline-color: k-color(error-on-surface);
+            &.k-invalid,
+            &.ng-invalid.ng-touched,
+            &.ng-invalid.ng-dirty {
+
+                &:focus,
+                &.k-focus,
+                &:focus-within {
+                    outline-color: k-color(error-on-surface);
+                }
             }
+
         }
 
-    }
+        #{k-when-default($kendo-input-default-fill-mode, ("flat", "outline"))}
+        &.k-input-flat,
+        &.k-input-outline {
+            background: none !important; // stylelint-disable-line declaration-no-important
+        }
 
-    .k-input-flat,
-    .k-input-outline {
-        background: none !important; // stylelint-disable-line declaration-no-important
-    }
+        // Sizing
+        @each $size, $size-props in $kendo-input-sizes {
+            $_button-padding-x: map.get( $size-props, button-padding-x );
+            $_button-padding-y: map.get( $size-props, button-padding-y );
+            $_button-width: map.get( $size-props, button-width );
+            $_icon-size: map.get( $size-props, icon-size );
 
-    // Sizing
-    @each $size, $size-props in $kendo-input-sizes {
-        $_button-padding-x: map.get( $size-props, button-padding-x );
-        $_button-padding-y: map.get( $size-props, button-padding-y );
-        $_button-width: map.get( $size-props, button-width );
-        $_icon-size: map.get( $size-props, icon-size );
+            #{k-when-default($kendo-input-default-size, $size)}
+            &.k-input-#{$size} {
 
-        .k-input-#{$size},
-        .k-picker-#{$size} {
+                .k-input-spinner {
+                    width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
 
-            .k-input-spinner {
-                width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
+                    .k-spinner-increase,
+                    .k-spinner-decrease {
+                        padding-inline: $_button-padding-x;
+                        padding-block: $_button-padding-y;
+                    }
+                }
 
-                .k-spinner-increase,
-                .k-spinner-decrease {
-                    padding-inline: $_button-padding-x;
-                    padding-block: $_button-padding-y;
+                // Clear value
+                .k-clear-value {
+                    width: $_icon-size;
+                    height: $_icon-size;
+                    padding: 0;
+                    box-sizing: border-box;
                 }
+
+            }
+        }
+    }
+
+    .k-picker {
+        #{k-when-default($kendo-picker-default-fill-mode, "outline")}
+        &.k-picker-outline {
+
+            &::after {
+                display: none;
             }
 
-            &.k-icon-picker > .k-input-inner {
-                width: var( --kendo-input-icon-picker-width, #{$_button-width} );
-                height: auto;
-                padding: 0;
+            &:focus,
+            &.k-focus,
+            &:focus-within {
+                outline: $kendo-input-focus-border-width solid k-color(primary);
+                outline-offset: calc( -1 * #{$kendo-input-focus-border-width} );
             }
 
-            // Clear value
-            .k-clear-value {
-                width: $_icon-size;
-                height: $_icon-size;
-                padding: 0;
-                box-sizing: border-box;
+            &.k-invalid,
+            &.ng-invalid.ng-touched,
+            &.ng-invalid.ng-dirty {
+
+                &:focus,
+                &.k-focus,
+                &:focus-within {
+                    outline-color: k-color(error-on-surface);
+                }
             }
 
         }
+
+        // Sizing
+        @each $size, $size-props in $kendo-input-sizes {
+            $_button-width: map.get( $size-props, button-width );
+
+            #{k-when-default($kendo-picker-default-size, $size)}
+            &.k-picker-#{$size} {
+
+                &.k-icon-picker > .k-input-inner {
+                    width: var( --kendo-input-icon-picker-width, #{$_button-width} );
+                    height: auto;
+                    padding: 0;
+                }
+            }
+        }
     }
 }

package/scss/input/_theme.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/input/_theme.scss" as *;
 
@@ -49,53 +50,57 @@
                 background: none;
             }
         }
-    }
 
-    .k-input-solid,
-    .k-picker-solid {
-        border-bottom-color: k-color(border);
+        #{k-when-default($kendo-input-default-fill-mode, "solid")}
+        &.k-input-solid {
+            border-bottom-color: k-color(border);
 
-        &:hover,
-        &.k-hover {
-             border-bottom-color: k-color(border);
-        }
+            &:hover,
+            &.k-hover {
+                border-bottom-color: k-color(border);
+            }
 
-        &:focus,
-        &.k-focus,
-        &:focus-within {
-            border-color: $kendo-input-border;
-            border-bottom-color: $kendo-input-focus-border;
+            &:focus,
+            &.k-focus,
+            &:focus-within {
+                border-color: $kendo-input-border;
+                border-bottom-color: $kendo-input-focus-border;
 
-        }
+            }
 
-        &.k-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            border-color: $kendo-input-border;
-            border-bottom-color: $kendo-input-invalid-border;
+            &.k-invalid,
+            &.ng-invalid.ng-touched,
+            &.ng-invalid.ng-dirty {
+                border-color: $kendo-input-border;
+                border-bottom-color: $kendo-input-invalid-border;
+            }
         }
-    }
 
-    .k-input-outline {
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            color: $kendo-input-outline-disabled-text;
-            background: $kendo-input-outline-disabled-bg;
-            border-color: $kendo-input-outline-disabled-border;
+
+        #{k-when-default($kendo-input-default-fill-mode, "outline")}
+        &.k-input-outline {
+            &:disabled,
+            &[disabled],
+            &.k-disabled {
+                color: $kendo-input-outline-disabled-text;
+                background: $kendo-input-outline-disabled-bg;
+                border-color: $kendo-input-outline-disabled-border;
+            }
         }
-    }
 
-    .k-input-flat {
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            color: $kendo-input-flat-disabled-text;
-            background: $kendo-input-flat-disabled-bg;
-            border-color: $kendo-input-flat-disabled-border;
+        #{k-when-default($kendo-input-default-fill-mode, "flat")}
+        &.k-input-flat {
+            &:disabled,
+            &[disabled],
+            &.k-disabled {
+                color: $kendo-input-flat-disabled-text;
+                background: $kendo-input-flat-disabled-bg;
+                border-color: $kendo-input-flat-disabled-border;
+            }
         }
     }
 
+
     .k-picker {
 
         &:focus,
@@ -115,40 +120,70 @@
             }
 
         }
-    }
 
-    .k-picker-solid,
-    .k-picker-flat {
-        // Invalid
-        &.k-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            border-color: $kendo-input-border;
-            border-bottom-color: $kendo-input-invalid-border;
+        #{k-when-default($kendo-picker-default-fill-mode, "solid")}
+        &.k-picker-solid {
+            border-bottom-color: k-color(border);
 
-            &::after {
-                border-color: $kendo-input-invalid-border;
+            &:hover,
+            &.k-hover {
+                border-bottom-color: k-color(border);
+            }
+
+            &:focus,
+            &.k-focus,
+            &:focus-within {
+                border-color: $kendo-input-border;
+                border-bottom-color: $kendo-input-focus-border;
+
+            }
+
+            &.k-invalid,
+            &.ng-invalid.ng-touched,
+            &.ng-invalid.ng-dirty {
+                border-color: $kendo-input-border;
+                border-bottom-color: $kendo-input-invalid-border;
             }
         }
-    }
 
-    .k-picker-outline {
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            color: $kendo-picker-outline-disabled-text;
-            background: $kendo-picker-outline-disabled-bg;
-            border-color: $kendo-picker-outline-disabled-border;
+        #{k-when-default($kendo-picker-default-fill-mode, ("solid", "flat"))}
+        &.k-picker-solid,
+        &.k-picker-flat {
+            // Invalid
+            &.k-invalid,
+            &.ng-invalid.ng-touched,
+            &.ng-invalid.ng-dirty {
+                border-color: $kendo-input-border;
+                border-bottom-color: $kendo-input-invalid-border;
+
+                &::after {
+                    border-color: $kendo-input-invalid-border;
+                }
+            }
         }
-    }
 
-    .k-picker-flat {
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            color: $kendo-picker-flat-disabled-text;
-            background: $kendo-picker-flat-disabled-bg;
-            border-color: $kendo-picker-flat-disabled-border;
+        #{k-when-default($kendo-picker-default-fill-mode, "outline")}
+        &.k-picker-outline {
+            &:disabled,
+            &[disabled],
+            &.k-disabled {
+                color: $kendo-picker-outline-disabled-text;
+                background: $kendo-picker-outline-disabled-bg;
+                border-color: $kendo-picker-outline-disabled-border;
+            }
         }
+
+        #{k-when-default($kendo-picker-default-fill-mode, "flat")}
+        &.k-picker-flat {
+            &:disabled,
+            &[disabled],
+            &.k-disabled {
+                color: $kendo-picker-flat-disabled-text;
+                background: $kendo-picker-flat-disabled-bg;
+                border-color: $kendo-picker-flat-disabled-border;
+            }
+        }
+
     }
+
 }