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

package/scss/fab/_theme.scss

@@ -1,4 +1,5 @@
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/fab/_theme.scss" as *;
 
@@ -6,80 +7,85 @@
 
 @mixin kendo-fab--theme() {
 
-    // Normal state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name} {
-            @include box-shadow( $kendo-fab-shadow );
-            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
-            outline-offset: -$kendo-fab-border-width;
-            border-color: $color;
-            color: k-color(on-#{$name});
-            background-color: $color;
-        }
-    }
-
-    // Hover state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}:hover,
-        .k-fab-solid-#{$name}.k-hover {
-            border-color: k-color(#{$name}-hover);
-            color: k-color(on-#{$name});
-            background-color: k-color(#{$name}-hover);
-        }
-    }
-
-    // Focus state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}:focus,
-        .k-fab-solid-#{$name}.k-focus {
-            outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
-        }
-    }
-
-    // Active state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}:active,
-        .k-fab-solid-#{$name}.k-active,
-        .k-fab-solid-#{$name}.k-selected {
-            @include box-shadow( $kendo-fab-active-shadow );
-            border-color: k-color(#{$name}-active);
-            color: k-color(on-#{$name});
-            background-color: k-color(#{$name}-active);
-        }
-    }
-
-    // Generating state
-    .k-fab-solid-primary.k-generating {
-
-        animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
-
-        @keyframes k-fab-generating {
-            0% {
-                background-color: k-color(primary-active);
-                border: k-color(primary-active);
-                outline-color: k-color(primary-active);
-            }
-            50% {
-                background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
-                border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
-                outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+    .k-fab {
+        // Fillmode: solid
+        #{k-when-default($kendo-fab-default-fill-mode, "solid")}
+        &.k-fab-solid {
+
+            // Theme colors
+            @each $name in $kendo-fab-theme-colors {
+
+                // Normal state
+                #{k-when-default($kendo-fab-default-theme-color, $name)}
+                &.k-fab-#{$name} {
+                    @include box-shadow( $kendo-fab-shadow );
+                    outline: $kendo-fab-border-width $kendo-fab-outline-style k-color($name);
+                    outline-offset: -$kendo-fab-border-width;
+                    border-color: k-color($name);
+                    color: k-color(on-#{$name});
+                    background-color: k-color($name);
+
+                    // Hover state
+                    &:hover,
+                    &.k-hover {
+                        border-color: k-color(#{$name}-hover);
+                        color: k-color(on-#{$name});
+                        background-color: k-color(#{$name}-hover);
+                    }
+
+                    // Focus state
+                    &:focus,
+                    &.k-focus {
+                        outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
+                    }
+
+                    // Active state
+                    &:active,
+                    &.k-active,
+                    &.k-selected {
+                        @include box-shadow( $kendo-fab-active-shadow );
+                        border-color: k-color(#{$name}-active);
+                        color: k-color(on-#{$name});
+                        background-color: k-color(#{$name}-active);
+                    }
+
+                    // Disabled state
+                    &:disabled,
+                    &.k-disabled {
+                        @include box-shadow( $kendo-fab-disabled-shadow );
+                        background-color: color-mix(in srgb, k-color($name) 65%, transparent);
+                        color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
+                        opacity: 1;
+                    }
+                }
             }
-            100% {
-                background-color: k-color(primary-active);
-                border: k-color(primary-active);
-                outline-color: k-color(primary-active);
-            }
-        }
-    }
 
-    // Disabled state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}:disabled,
-        .k-fab-solid-#{$name}.k-disabled {
-            @include box-shadow( $kendo-fab-disabled-shadow );
-            background-color: color-mix(in srgb, k-color($name) 65%, transparent);
-            color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
-            opacity: 1;
+            // Generating state
+            #{k-when-default($kendo-fab-default-theme-color, "primary")}
+            &.k-fab-primary {
+
+                &.k-generating {
+                    animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
+
+                    @keyframes k-fab-generating {
+                        0% {
+                            background-color: k-color(primary-active);
+                            border: k-color(primary-active);
+                            outline-color: k-color(primary-active);
+                        }
+                        50% {
+                            background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                            border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                            outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                        }
+                        100% {
+                            background-color: k-color(primary-active);
+                            border: k-color(primary-active);
+                            outline-color: k-color(primary-active);
+                        }
+                    }
+                }
+            }
         }
     }
 

package/scss/fab/_variables.scss

@@ -5,6 +5,23 @@
 
 // Floating Action Button
 
+/// The default theme color of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-theme-color: "primary" !default;
+/// The default fill mode of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-fill-mode: "solid" !default;
+/// The default roundness of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-roundness: "full" !default;
+/// The default size of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-size: "md" !default;
+
 /// The width of the border around the FAB.
 /// @group floating-action-button
 $kendo-fab-border-width: 1px !default;
@@ -87,38 +104,6 @@ $kendo-fab-item-icon-border-width: 0 !default;
 /// @group floating-action-button
 $kendo-fab-item-icon-border-radius: 50% !default;
 
-/// The theme colors map for the FAB.
-/// @group floating-action-button
-$kendo-fab-theme-colors:  (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
-
-/// The size map for the FAB.
-/// @group floating-action-button
-$kendo-fab-sizes: (
-    sm: (
-        padding-x: $kendo-fab-sm-padding-x,
-        padding-y: $kendo-fab-sm-padding-y
-    ),
-    md: (
-        padding-x: $kendo-fab-md-padding-x,
-        padding-y: $kendo-fab-md-padding-y
-    ),
-    lg: (
-        padding-x: $kendo-fab-lg-padding-x,
-        padding-y: $kendo-fab-lg-padding-y
-    )
-) !default;
-
 /// The base shadow of the FAB.
 /// @group floating-action-button
 $kendo-fab-shadow: k-elevation(5) !default;
@@ -180,6 +165,10 @@ $kendo-fab-generating-opacity: 40% !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
+    $kendo-fab-default-theme-color: $kendo-fab-default-theme-color,
+    $kendo-fab-default-fill-mode: $kendo-fab-default-fill-mode,
+    $kendo-fab-default-roundness: $kendo-fab-default-roundness,
+    $kendo-fab-default-size: $kendo-fab-default-size,
     $kendo-fab-border-width: $kendo-fab-border-width,
     $kendo-fab-font-family: $kendo-fab-font-family,
     $kendo-fab-font-size: $kendo-fab-font-size,
@@ -205,8 +194,6 @@ $kendo-fab-generating-opacity: 40% !default;
     $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
     $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
     $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
-    $kendo-fab-theme-colors: $kendo-fab-theme-colors,
-    $kendo-fab-sizes: $kendo-fab-sizes,
     $kendo-fab-shadow: $kendo-fab-shadow,
     $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow,
     $kendo-fab-active-shadow: $kendo-fab-active-shadow,

package/scss/floating-label/_variables.scss

@@ -8,13 +8,13 @@
 $kendo-floating-label-scale: 1 !default;
 /// The font size of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-font-size: $kendo-input-font-size !default;
+$kendo-floating-label-font-size: $kendo-input-md-font-size !default;
 /// The maximum width of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-max-width: 90% !default;
 /// The line height of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-line-height: $kendo-input-line-height !default;
+$kendo-floating-label-line-height: $kendo-input-md-line-height !default;
 /// The height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;

package/scss/forms/_variables.scss

@@ -5,6 +5,11 @@
 
 // Forms
 
+/// The default size of the Form.
+/// @group form
+/// @role default
+$kendo-form-default-size: "md" !default;
+
 /// The padding of the inline Form.
 /// @group form
 $kendo-form-spacer: k-spacing(8) !default;
@@ -141,22 +146,8 @@ $kendo-form-field-info-margin: k-spacing(4) !default;
 /// @group form
 $kendo-fieldset-legend-text: unset !default;
 
-/// The sizes map for the Form.
-/// @group form
-$kendo-form-sizes: (
-    sm: (
-        form-rows-spacing: $kendo-form-sm-rows-spacing
-    ),
-    md: (
-        form-rows-spacing: $kendo-form-md-rows-spacing
-    ),
-    lg: (
-        form-rows-spacing: $kendo-form-lg-rows-spacing
-    )
-) !default;
-
-
 @forward "@progress/kendo-theme-core/scss/components/forms/_variables.scss" with (
+    $kendo-form-default-size: $kendo-form-default-size,
     $kendo-form-spacer: $kendo-form-spacer,
     $kendo-form-font-size: $kendo-form-font-size,
     $kendo-form-line-height: $kendo-form-line-height,
@@ -195,6 +186,5 @@ $kendo-form-sizes: (
     $kendo-fieldset-legend-margin: $kendo-fieldset-legend-margin,
     $kendo-form-alert-error-margin: $kendo-form-alert-error-margin,
     $kendo-form-field-info-margin: $kendo-form-field-info-margin,
-    $kendo-fieldset-legend-text: $kendo-fieldset-legend-text,
-    $kendo-form-sizes: $kendo-form-sizes
+    $kendo-fieldset-legend-text: $kendo-fieldset-legend-text
 );

package/scss/grid/_theme.scss

@@ -309,6 +309,15 @@
         @include fill( $kendo-grid-header-text, $kendo-grid-header-bg, $kendo-grid-header-border );
     }
 
+    .k-grid-sticky-container {
+        background-color: inherit;
+    }
+
+    .k-grid-sticky-top-container:has(> .k-grid-group-sticky-header-table),
+    .k-grid-sticky-bottom-container:has(> .k-grid-group-sticky-footer-table) {
+        border-color: $kendo-grid-sticky-border;
+    }
+
     .k-column-list-item:hover,
     .k-columnmenu-item:hover {
         @include fill(

package/scss/grid/_variables.scss

@@ -11,6 +11,12 @@
 
 
 // Grid
+
+/// The default size of the Grid.
+/// @group grid
+/// @role default
+$kendo-grid-default-size: "md" !default;
+
 /// The width of the border around the Grid.
 /// @group grid
 $kendo-grid-border-width: 1px !default;
@@ -173,46 +179,6 @@ $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
 $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !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 font size of the Grid header.
 /// @group grid
 $kendo-grid-header-font-size: null !default;
@@ -385,6 +351,10 @@ $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 /// @group grid
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
+/// The box shadow of the sticky container in the Grid.
+/// @group grid
+$kendo-grid-sticky-container-shadow: k-elevation(2) !default;
+
 /// The width of the Grid column menu.
 /// @group grid
 $kendo-grid-column-menu-width: 250px !default;
@@ -526,8 +496,13 @@ $kendo-grid-stack-focus-outline: color-mix(in srgb, k-color(on-app-surface) 15%,
 /// @group grid
 $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-bold, 700 ) !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,
@@ -578,7 +553,6 @@ $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;
     $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,
     $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-icon-spacing,
@@ -666,5 +640,7 @@ $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;
     $kendo-grid-stack-expandable-shadow-height: $kendo-grid-stack-expandable-shadow-height,
     $kendo-grid-stack-header-color: $kendo-grid-stack-header-color,
     $kendo-grid-stack-focus-outline: $kendo-grid-stack-focus-outline,
-    $kendo-grid-stack-expandable-shadow: $kendo-grid-stack-expandable-shadow
+    $kendo-grid-stack-expandable-shadow: $kendo-grid-stack-expandable-shadow,
+    $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,5 +1,10 @@
 @use "../core/_index.scss" as *;
 
+/// The default size of the Icon.
+/// @group icon
+/// @role default
+$kendo-icon-default-size: "md" !default;
+
 /// Font sizes 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

@@ -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/_layout.scss" as *;
 
@@ -7,11 +8,13 @@
 
     @include kendo-input--layout-base();
 
-     // Sizing
-    @each $size, $size-props in $kendo-input-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
+    .k-input {
+        // Sizing
+        @each $size, $size-props in $kendo-input-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
 
-            .k-input-#{$size} {
+            #{k-when-default($kendo-input-default-size, $size)}
+            &.k-input-#{$size} {
                 .k-input-prefix > .k-icon,
                 .k-input-prefix > .k-icon-wrapper-host .k-icon,
                 .k-input-prefix > .k-input-prefix-text,
@@ -22,5 +25,6 @@
                 }
             }
         }
+    }
 
 }

package/scss/input/_variables.scss

@@ -5,6 +5,19 @@
 
 // Input
 
+/// The default fill mode of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-fill-mode: "solid" !default;
+/// The default roundness of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-roundness: "md" !default;
+/// The default size of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-size: "md" !default;
+
 /// The default width of the Input components.
 /// @group input
 $kendo-input-default-width: 100% !default;
@@ -42,7 +55,7 @@ $kendo-input-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of input components.
 /// @group input
-$kendo-input-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-input-font-size: null  !default;
 /// The font size of the small Input components.
 /// @group input
 $kendo-input-sm-font-size: var( --kendo-font-size-sm, inherit )!default;
@@ -55,7 +68,7 @@ $kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit )  !default;
 
 /// The line height of input components.
 /// @group input
-$kendo-input-line-height: 1.5 !default;
+$kendo-input-line-height: null !default;
 /// The line height of the small Input components.
 /// @group input
 $kendo-input-sm-line-height: math.div( 20, 14 ) !default;
@@ -70,35 +83,6 @@ $kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{
 $kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
 $kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
 
-/// The sizes map for the Input components.
-/// @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;
-
 /// The background color of the Input components.
 /// @group input
 $kendo-input-bg: k-color(surface-alt) !default;
@@ -276,6 +260,19 @@ $kendo-input-invalid-border: k-color(error-on-surface) !default;
 /// @group input
 $kendo-input-invalid-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(error) 25%, transparent) !default;
 
+/// The default fill mode of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-fill-mode: "solid" !default;
+/// The default roundness of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-roundness: "md" !default;
+/// The default size of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-size: "md" !default;
+
 /// The background color of the Picker components.
 /// @group picker
 $kendo-picker-bg: k-color(surface-alt) !default;
@@ -342,7 +339,7 @@ $kendo-picker-disabled-shadow: null !default;
 
 /// The background color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-bg: null !default;
+$kendo-picker-outline-bg: transparent !default;
 /// The text color of the outline Picker components.
 /// @group picker
 $kendo-picker-outline-text: $kendo-button-text !default;
@@ -384,7 +381,7 @@ $kendo-picker-outline-hover-focus-border: null !default;
 
 /// The background color of the flat Picker components.
 /// @group picker
-$kendo-picker-flat-bg: null !default;
+$kendo-picker-flat-bg: transparent !default;
 /// The text color of the flat Picker components.
 /// @group picker
 $kendo-picker-flat-text: $kendo-button-text !default;
@@ -431,6 +428,9 @@ $kendo-use-input-spinner-icon-offset: false !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/input/_variables.scss" with (
+    $kendo-input-default-fill-mode: $kendo-input-default-fill-mode,
+    $kendo-input-default-roundness: $kendo-input-default-roundness,
+    $kendo-input-default-size: $kendo-input-default-size,
     $kendo-input-default-width: $kendo-input-default-width,
     $kendo-input-border-width: $kendo-input-border-width,
     $kendo-input-border-radius: $kendo-input-border-radius,
@@ -452,7 +452,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
     $kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
     $kendo-input-md-calc-size: $kendo-input-md-calc-size,
     $kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
-    $kendo-input-sizes: $kendo-input-sizes,
     $kendo-input-bg: $kendo-input-bg,
     $kendo-input-text: $kendo-input-text,
     $kendo-input-border: $kendo-input-border,
@@ -507,6 +506,9 @@ $kendo-use-input-spinner-icon-offset: false !default;
     $kendo-input-suffix-bg: $kendo-input-suffix-bg,
     $kendo-input-invalid-border: $kendo-input-invalid-border,
     $kendo-input-invalid-shadow: $kendo-input-invalid-shadow,
+    $kendo-picker-default-fill-mode: $kendo-picker-default-fill-mode,
+    $kendo-picker-default-roundness: $kendo-picker-default-roundness,
+    $kendo-picker-default-size: $kendo-picker-default-size,
     $kendo-picker-bg: $kendo-picker-bg,
     $kendo-picker-text: $kendo-picker-text,
     $kendo-picker-border: $kendo-picker-border,