@progress/kendo-theme-bootstrap 11.2.1-dev.1 → 11.3.0

package/scss/chip/_variables.scss

@@ -12,9 +12,6 @@ $kendo-chip-border-width: 1px !default;
 /// @group chip
 $kendo-chip-spacing: k-spacing(1) !default;
 
-/// The horizontal padding of the Chip.
-/// @group chip
-$kendo-chip-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the small Chip.
 /// @group chip
 $kendo-chip-sm-padding-x: k-spacing(1) !default;
@@ -25,9 +22,6 @@ $kendo-chip-md-padding-x: k-spacing(1) !default;
 /// @group chip
 $kendo-chip-lg-padding-x: k-spacing(1) !default;
 
-/// The vertical padding of the Chip.
-/// @group chip
-$kendo-chip-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Chip.
 /// @group chip
 $kendo-chip-sm-padding-y: k-spacing(0.5) !default;
@@ -70,7 +64,7 @@ $kendo-chip-lg-line-height: $kendo-chip-line-height !default;
 
 /// The calculated height of the Chip.
 /// @group chip
-$kendo-chip-calc-size: calc( #{$kendo-chip-line-height} * 1em + #{$kendo-chip-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
+$kendo-chip-calc-size: calc( #{$kendo-chip-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + #{$kendo-chip-sm-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 
 
@@ -188,11 +182,9 @@ $kendo-chip-list-sizes: (
 @forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
     $kendo-chip-border-width: $kendo-chip-border-width,
     $kendo-chip-spacing: $kendo-chip-spacing,
-    $kendo-chip-padding-x: $kendo-chip-padding-x,
     $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
     $kendo-chip-md-padding-x: $kendo-chip-md-padding-x,
     $kendo-chip-lg-padding-x: $kendo-chip-lg-padding-x,
-    $kendo-chip-padding-y: $kendo-chip-padding-y,
     $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y,
     $kendo-chip-md-padding-y: $kendo-chip-md-padding-y,
     $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y,

package/scss/coloreditor/_variables.scss

@@ -51,27 +51,21 @@ $kendo-color-editor-focus-border: k-color(border) !default;
 /// @group color-editor
 $kendo-color-editor-focus-shadow: null !default;
 
-/// The vertical padding of the ColorEditor header.
-/// @group color-editor
-$kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
-/// The horizontal padding of the ColorEditor header.
-/// @group color-editor
-$kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
 $kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
 /// The vertical padding of the small ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+$kendo-color-editor-sm-header-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the small ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+$kendo-color-editor-sm-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the medium ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+$kendo-color-editor-md-header-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the medium ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+$kendo-color-editor-md-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the large ColorEditor header.
 /// @group color-editor
 $kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
@@ -118,28 +112,22 @@ $kendo-color-editor-lg-color-preview-width: 32px !default;
 /// @group color-editor
 $kendo-color-editor-lg-color-preview-height: 12px !default;
 
-/// The vertical padding of the ColorEditor views container.
-/// @group color-editor
-$kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
-/// The horizontal padding of the ColorEditor views container.
-/// @group color-editor
-$kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
 /// The vertical padding of the small ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+$kendo-color-editor-sm-views-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the small ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+$kendo-color-editor-sm-views-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the medium ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+$kendo-color-editor-md-views-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the medium ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+$kendo-color-editor-md-views-padding-x: k-spacing(4) !default;
 /// The vertical padding of the large ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
@@ -210,8 +198,6 @@ $kendo-color-editor-sizes: (
     $kendo-color-editor-border: $kendo-color-editor-border,
     $kendo-color-editor-focus-border: $kendo-color-editor-focus-border,
     $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
-    $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
-    $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
     $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
     $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
     $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
@@ -231,8 +217,6 @@ $kendo-color-editor-sizes: (
     $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
     $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
     $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height,
-    $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
-    $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
     $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
     $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
     $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,

package/scss/colorgradient/_variables.scss

@@ -16,12 +16,6 @@ $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-border-radius: k-border-radius(md) !default;
-/// The vertical padding of the ColorGradient.
-/// @group color-gradient
-$kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
-/// The horizontal padding of the ColorGradient.
-/// @group color-gradient
-$kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
 /// The spacing between the sections of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
@@ -49,13 +43,13 @@ $kendo-color-gradient-border: k-color(border) !default;
 $kendo-color-gradient-sm-padding-y: $kendo-color-gradient-spacer !default;
 /// The horizontal padding of the small ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-sm-padding-x: $kendo-color-gradient-padding-y !default;
+$kendo-color-gradient-sm-padding-x: k-spacing(4) !default;
 /// The vertical padding of the medium ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-md-padding-y: $kendo-color-gradient-spacer !default;
 /// The horizontal padding of the medium ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-md-padding-x: $kendo-color-gradient-padding-y !default;
+$kendo-color-gradient-md-padding-x: k-spacing(4) !default;
 /// The vertical padding of the large ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-lg-padding-y: k-spacing(4.5) !default;
@@ -267,8 +261,6 @@ $kendo-color-gradient-sizes: (
     $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
     $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
     $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
-    $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
-    $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-x,
     $kendo-color-gradient-gap: $kendo-color-gradient-gap,
     $kendo-color-gradient-font-family: $kendo-color-gradient-font-family,
     $kendo-color-gradient-font-size: $kendo-color-gradient-font-size,

package/scss/column-menu/_variables.scss

@@ -1,16 +1,13 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 
-$kendo-column-menu-item-padding-x: k-spacing(4) !default;
-$kendo-column-menu-item-padding-y: k-spacing(1) !default;
-
-$kendo-column-menu-item-sm-padding-x: $kendo-column-menu-item-padding-x !default;
+$kendo-column-menu-item-sm-padding-x: k-spacing(4) !default;
 $kendo-column-menu-item-sm-padding-y: k-spacing(1) !default;
 
-$kendo-column-menu-item-md-padding-x: $kendo-column-menu-item-padding-x !default;
-$kendo-column-menu-item-md-padding-y: $kendo-column-menu-item-padding-y !default;
+$kendo-column-menu-item-md-padding-x: k-spacing(4) !default;
+$kendo-column-menu-item-md-padding-y: k-spacing(1) !default;
 
-$kendo-column-menu-item-lg-padding-x: $kendo-column-menu-item-padding-x !default;
+$kendo-column-menu-item-lg-padding-x: k-spacing(4) !default;
 $kendo-column-menu-item-lg-padding-y: k-spacing(2) !default;
 
 $kendo-column-menu-font-size: var( --kendo-font-size, inherit ) !default;
@@ -63,8 +60,6 @@ $kendo-group-menu-item-border: k-color(border) !default;
     $kendo-column-menu-md-line-height: $kendo-column-menu-md-line-height,
     $kendo-column-menu-lg-line-height: $kendo-column-menu-lg-line-height,
     $kendo-column-menu-font-family: $kendo-column-menu-font-family,
-    $kendo-column-menu-item-padding-x: $kendo-column-menu-item-padding-x,
-    $kendo-column-menu-item-padding-y: $kendo-column-menu-item-padding-y,
     $kendo-column-menu-item-sm-padding-x: $kendo-column-menu-item-sm-padding-x,
     $kendo-column-menu-item-sm-padding-y: $kendo-column-menu-item-sm-padding-y,
     $kendo-column-menu-item-md-padding-x: $kendo-column-menu-item-md-padding-x,

package/scss/core/border-radii/index.import.scss

@@ -21,13 +21,13 @@ $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: map.get($kendo-spacing, 3) !default;
+$kendo-border-radius-xl: map.get($kendo-spacing, 4) !default;
 /// The third largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxl: map.get($kendo-spacing, 8) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxxl: map.get($kendo-spacing, 8) !default;
+$kendo-border-radius-xxxl: map.get($kendo-spacing, 12) !default;
 /// The largest border radius used across the Components.
 /// @group radii
 $kendo-border-radius-full: 50rem !default;

package/scss/core/color-system/_palettes.scss

@@ -8,27 +8,27 @@ $_default-palette-gray: (
     4: #ced4da,
     5: #bdc4cb,
     6: #adb5bd,
-    7: #9aa3ac,
-    8: #8b959f,
-    9: #6c757d,
-    10: #596169,
+    7: #a7acb1,
+    8: #6c757d,
+    9: #5c636a,
+    10: #565e64,
     11: #495057,
     12: #343a40,
     13: #2B2F32,
     14: #212529,
-    15: #121417,
+    15: #1a1d20,
     "black": #000000,
 );
 $_default-palette-blue: (
     1: #ecf4ff,
     2: #cfe2ff,
-    3: #b6d4fe,
+    3: #B9d6fe,
     4: #9ec5fe,
     5: #86b6fe,
     6: #6ea8fe,
     7: #3d8bfd,
     8: #0d6efd,
-    9: #0c64e4,
+    9: #0b5ed7,
     10: #0a58ca,
     11: #094cae,
     12: #084298,
@@ -41,9 +41,9 @@ $_default-palette-yellow: (
     2: #fff3cd,
     3: #ffecb5,
     4: #ffe69c,
-    5: #ffe083,
-    6: #ffda6a,
-    7: #ffcd39,
+    5: #ffda6a,
+    6: #ffcd39,
+    7: #ffca2c,
     8: #ffc107,
     9: #cc9a06,
     10: #b38705,
@@ -62,8 +62,8 @@ $_default-palette-red: (
     6: #ea868f,
     7: #e35d6a,
     8: #dc3545,
-    9: #b02a37,
-    10: #9a2530,
+    9: #bb2d3b,
+    10: #b02a37,
     11: #842029,
     12: #6e1b23,
     13: #58151c,
@@ -75,9 +75,9 @@ $_default-palette-cyan: (
     2: #cff4fc,
     3: #b7eefa,
     4: #9eeaf9,
-    5: #86e5f8,
-    6: #6edff6,
-    7: #3dd5f3,
+    5: #6edff6,
+    6: #3dd5f3,
+    7: #31d2f2,
     8: #0dcaf0,
     9: #0aa2c0,
     10: #098da8,
@@ -98,9 +98,9 @@ $_default-palette-green: (
     8: #479F76,
     9: #319064,
     10: #198754,
-    11: #146C43,
-    12: #0F5132,
-    13: #0D442A,
+    11: #157347,
+    12: #146c43,
+    13: #0f5132,
     14: #0A3622,
     15: #051b11,
 );
@@ -112,9 +112,9 @@ $_default-palette-indigo: (
     5: #b9a3e1,
     6: #a98eda,
     7: #8c68cd,
-    8: #6f42c1,
-    9: #59359a,
-    10: #4e2f89,
+    8: #7e58c6,
+    9: #6f42c1,
+    10: #59359a,
     11: #432874,
     12: #36215f,
     13: #2c1a4d,
@@ -138,6 +138,23 @@ $_default-palette-teal: (
     14: #0a3e2e,
     15: #06281e,
 );
+$_default-palette-greige: (
+    1: #fcfcfd,
+    2: #ececec,
+    3: #e2e3e5,
+    4: #d3d4d5,
+    5: #c6c7c8,
+    6: #b4b5b6,
+    7: #a1a3a5,
+    8: #939597,
+    9: #727577,
+    10: #5f6163,
+    11: #4d5154,
+    12: #424649,
+    13: #2e2f2f,
+    14: #242526,
+    15: #141415,
+);
 // stylelint-disable scss/no-global-function-names
 /// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
 /// @group palette
@@ -171,4 +188,8 @@ $kendo-palette-indigo: map.merge($_default-palette-indigo, $kendo-palette-indigo
 /// @group palette
 $kendo-palette-teal: $_default-palette-teal !default;
 $kendo-palette-teal: map.merge($_default-palette-teal, $kendo-palette-teal);
+/// The Greige Palette provides colors to the Light and Dark variable groups.
+/// @group palette
+$kendo-palette-greige: $_default-palette-greige !default;
+$kendo-palette-greige: map.merge($_default-palette-greige, $kendo-palette-greige);
 // stylelint-enable scss/no-global-function-names

package/scss/core/color-system/_swatch.scss

@@ -34,12 +34,12 @@ $_default-colors: (
     on-primary: map.get( $kendo-palette-gray, "white" ),
     primary-on-surface: map.get( $kendo-palette-blue, 8 ),
     // Secondary
-    secondary-subtle: map.get( $kendo-palette-gray, 3 ),
-    secondary-subtle-hover: map.get( $kendo-palette-gray, 4 ),
-    secondary-subtle-active: map.get( $kendo-palette-gray, 5 ),
-    secondary: map.get( $kendo-palette-gray, 9 ),
-    secondary-hover: map.get( $kendo-palette-gray, 10 ),
-    secondary-active: map.get( $kendo-palette-gray, 11 ),
+    secondary-subtle: map.get( $kendo-palette-greige, 3 ),
+    secondary-subtle-hover: map.get( $kendo-palette-greige, 4 ),
+    secondary-subtle-active: map.get( $kendo-palette-greige, 5 ),
+    secondary: map.get( $kendo-palette-gray, 8 ),
+    secondary-hover: map.get( $kendo-palette-gray, 9 ),
+    secondary-active: map.get( $kendo-palette-gray, 10 ),
     secondary-emphasis: rgba( map.get( $kendo-palette-gray, 9 ), .40),
     secondary-on-subtle: map.get( $kendo-palette-gray, 13 ),
     on-secondary: map.get( $kendo-palette-gray, "white" ),
@@ -48,11 +48,11 @@ $_default-colors: (
     tertiary-subtle: map.get( $kendo-palette-indigo, 2 ),
     tertiary-subtle-hover: map.get( $kendo-palette-indigo, 3 ),
     tertiary-subtle-active: map.get( $kendo-palette-indigo, 4 ),
-    tertiary: map.get( $kendo-palette-indigo, 8 ),
-    tertiary-hover: map.get( $kendo-palette-indigo, 9 ),
-    tertiary-active: map.get( $kendo-palette-indigo, 10 ),
+    tertiary: map.get( $kendo-palette-indigo, 9 ),
+    tertiary-hover: map.get( $kendo-palette-indigo, 10 ),
+    tertiary-active: map.get( $kendo-palette-indigo, 11 ),
     tertiary-emphasis: rgba( map.get( $kendo-palette-indigo, 8 ), .40),
-    tertiary-on-subtle: map.get( $kendo-palette-indigo, 11 ),
+    tertiary-on-subtle: map.get( $kendo-palette-indigo, 13 ),
     on-tertiary: map.get( $kendo-palette-gray, "white" ),
     tertiary-on-surface: map.get( $kendo-palette-indigo, 8 ),
     // Info
@@ -100,25 +100,25 @@ $_default-colors: (
     on-error: map.get( $kendo-palette-gray, "white" ),
     error-on-surface: map.get( $kendo-palette-red, 8 ),
     // Light
-    light-subtle: map.get( $kendo-palette-gray, "white" ),
-    light-subtle-hover: map.get( $kendo-palette-gray, 1 ),
+    light-subtle: map.get( $kendo-palette-greige, 1 ),
+    light-subtle-hover: map.get( $kendo-palette-greige, 2 ),
     light-subtle-active: map.get( $kendo-palette-gray, 2 ),
     light: map.get( $kendo-palette-gray, 1 ),
-    light-hover: map.get( $kendo-palette-gray, 2 ),
-    light-active: map.get( $kendo-palette-gray, 3 ),
+    light-hover: map.get( $kendo-palette-greige, 4 ),
+    light-active: map.get( $kendo-palette-greige, 5 ),
     light-emphasis: rgba( map.get( $kendo-palette-gray, 14 ), .10),
     light-on-subtle: map.get( $kendo-palette-gray, 11 ),
     on-light: map.get( $kendo-palette-gray, "black" ),
     light-on-surface: map.get( $kendo-palette-gray, 1 ),
     // Dark
-    dark-subtle: map.get( $kendo-palette-gray, 11 ),
-    dark-subtle-hover: map.get( $kendo-palette-gray, 10 ),
-    dark-subtle-active: map.get( $kendo-palette-gray, 9 ),
+    dark-subtle: map.get( $kendo-palette-gray, 4 ),
+    dark-subtle-hover: map.get( $kendo-palette-gray, 5 ),
+    dark-subtle-active: map.get( $kendo-palette-gray, 6 ),
     dark: map.get( $kendo-palette-gray, 14 ),
-    dark-hover: map.get( $kendo-palette-gray, 12 ),
-    dark-active: map.get( $kendo-palette-gray, 11 ),
+    dark-hover: map.get( $kendo-palette-greige, 12 ),
+    dark-active: map.get( $kendo-palette-greige, 11 ),
     dark-emphasis: rgba( map.get( $kendo-palette-gray, 14 ), .40),
-    dark-on-subtle: map.get( $kendo-palette-gray, "white" ),
+    dark-on-subtle: map.get( $kendo-palette-gray, 11 ),
     on-dark: map.get( $kendo-palette-gray, "white" ),
     dark-on-surface: map.get( $kendo-palette-gray, 14 ),
     // Inverse

package/scss/core/typography/index.import.scss

@@ -27,7 +27,7 @@ $kendo-line-height: 1.5 !default;
 $kendo-line-height-xs: 1 !default;
 /// The small line height across all components.
 /// @group typography
-$kendo-line-height-sm: 1.25 !default;
+$kendo-line-height-sm: 1.2 !default;
 /// The medium line height across all components.
 /// @group typography
 $kendo-line-height-md: $kendo-line-height !default;

package/scss/dialog/_variables.scss

@@ -16,10 +16,10 @@ $kendo-dialog-titlebar-border: inherit !default;
 
 /// The horizontal padding of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-x: $kendo-actions-padding-x !default;
+$kendo-dialog-buttongroup-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-y: $kendo-actions-padding-y !default;
+$kendo-dialog-buttongroup-padding-y: k-spacing(3) !default;
 /// The width of the top border of the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-buttongroup-border-width: 1px !default;

package/scss/fab/_variables.scss

@@ -13,36 +13,30 @@ $kendo-fab-border-width: 1px !default;
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-fab-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the FAB.
 /// @group floating-action-button
 $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The horizontal padding of the FAB.
-/// @group floating-action-button
-$kendo-fab-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
+$kendo-fab-sm-padding-x: calc( #{k-spacing(4)} / 2 ) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
-$kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
+$kendo-fab-md-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;
+$kendo-fab-lg-padding-x: calc( #{k-spacing(4)} * 1.5 ) !default;
 
-/// The vertical padding of the FAB.
-/// @group floating-action-button
-$kendo-fab-padding-y: $kendo-fab-padding-x !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
+$kendo-fab-sm-padding-y: calc( #{k-spacing(4)} / 2 ) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
-$kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
+$kendo-fab-md-padding-y: k-spacing(4) !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;
+$kendo-fab-lg-padding-y: calc( #{k-spacing(4)} * 1.5 ) !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
@@ -190,11 +184,9 @@ $kendo-fab-generating-opacity: 40% !default;
     $kendo-fab-font-family: $kendo-fab-font-family,
     $kendo-fab-font-size: $kendo-fab-font-size,
     $kendo-fab-line-height: $kendo-fab-line-height,
-    $kendo-fab-padding-x: $kendo-fab-padding-x,
     $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x,
     $kendo-fab-md-padding-x: $kendo-fab-md-padding-x,
     $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x,
-    $kendo-fab-padding-y: $kendo-fab-padding-y,
     $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y,
     $kendo-fab-md-padding-y: $kendo-fab-md-padding-y,
     $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y,

package/scss/floating-label/_variables.scss

@@ -20,10 +20,10 @@ $kendo-floating-label-line-height: $kendo-input-line-height !default;
 $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
 /// The horizontal offset of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
+$kendo-floating-label-offset-x: calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} ) !default;
 /// The vertical offset of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
+$kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} ) !default;
 
 /// The transformation scale of the focused Floating Label.
 /// @group floating-label

package/scss/forms/_theme.scss

@@ -1,6 +1,11 @@
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/forms/_theme.scss" as *;
 
 
 @mixin kendo-form--theme() {
     @include kendo-form--theme-base();
+
+    .k-form-hint {
+        @include fill( k-color(subtle) );
+    }
 }

package/scss/forms/_variables.scss

@@ -7,7 +7,7 @@
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: calc( #{k-spacing(4)} * 2 ) !default;
+$kendo-form-spacer: k-spacing(8) !default;
 
 /// The font size of the Form.
 /// @group form
@@ -21,14 +21,14 @@ $kendo-form-line-height: 1.5 !default;
 $kendo-form-fieldset-margin: 2rem 0 0 !default;
 /// The padding of the Form fieldset.
 /// @group form
-$kendo-form-fieldset-padding: k-spacing(0) !default;
+$kendo-form-fieldset-padding: 0 !default;
 
 /// The margin of the Form legend.
 /// @group form
 $kendo-form-legend-margin: 0 0 1rem !default;
 /// The padding of the Form legend.
 /// @group form
-$kendo-form-legend-padding: k-spacing(0) !default;
+$kendo-form-legend-padding: 0 !default;
 /// The border width of the Form legend.
 /// @group form
 $kendo-form-legend-border-width: 0 0 2px !default;

package/scss/grid/_variables.scss

@@ -270,8 +270,8 @@ $kendo-grid-filter-menu-item-spacing-y: k-spacing(2) !default;
 $kendo-grid-column-menu-popup-padding-x: null !default;
 $kendo-grid-column-menu-popup-padding-y: null !default;
 
-$kendo-grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
-$kendo-grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
+$kendo-grid-column-menu-item-padding-x: $kendo-menu-popup-md-item-padding-x !default;
+$kendo-grid-column-menu-item-padding-y: $kendo-menu-popup-md-item-padding-y !default;
 
 $kendo-grid-column-menu-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 $kendo-grid-column-menu-list-item-padding-y: $kendo-list-md-item-padding-y !default;

package/scss/input/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../core/motion/index.import.scss" as *;
 @use "./_variables.scss" as *;
@@ -12,4 +13,18 @@
         transition: $kendo-transition;
     }
 
+     // Sizing
+    @each $size, $size-props in $kendo-input-sizes {
+        $_padding-x: map.get( $size-props, padding-x );
+
+            .k-input-#{$size} {
+                .k-input-prefix > .k-icon,
+                .k-input-prefix > .k-input-prefix-text,
+                .k-input-suffix > .k-icon,
+                .k-input-suffix > .k-input-suffix-text {
+                    padding-inline: $_padding-x;
+                }
+            }
+        }
+
 }