@progress/kendo-theme-default 5.5.1-dev.0 → 5.5.1-dev.1

package/dist/all.css

@@ -11355,7 +11355,8 @@ kendo-sortable {
 }
 
 .k-list-lg {
-    font-size: 14px;
+    font-size: 16px;
+    line-height: 1.5;
 }
 
 .k-list-lg .k-list-group-sticky-header {
@@ -11363,7 +11364,7 @@ kendo-sortable {
 }
 
 .k-list-lg .k-list-item, .k-list-lg .k-list-optionlabel {
-    padding: 6px 8px;
+    padding: 8px 12px;
 }
 
 .k-list-lg .k-list-group-item {
@@ -12179,43 +12180,43 @@ kendo-badge-container {
     line-height: 1.4285714286;
 }
 
-.k-button-md {
-    padding: 4px 8px;
-    font-size: 14px;
-    line-height: 1.4285714286;
-}
-
-.k-button-lg {
-    padding: 6px 8px;
-    font-size: 14px;
-    line-height: 1.4285714286;
-}
-
-.k-icon-button.k-button-sm {
+.k-button-sm.k-icon-button {
     padding: 2px;
 }
 
-.k-icon-button.k-button-sm > .k-button-icon {
+.k-button-sm.k-icon-button > .k-button-icon {
     min-width: calc( 14px * 1.4285714286);
     min-height: calc( 14px * 1.4285714286);
 }
 
-.k-icon-button.k-button-md {
+.k-button-md {
+    padding: 4px 8px;
+    font-size: 14px;
+    line-height: 1.4285714286;
+}
+
+.k-button-md.k-icon-button {
     padding: 4px;
 }
 
-.k-icon-button.k-button-md > .k-button-icon {
+.k-button-md.k-icon-button > .k-button-icon {
     min-width: calc( 14px * 1.4285714286);
     min-height: calc( 14px * 1.4285714286);
 }
 
-.k-icon-button.k-button-lg {
-    padding: 6px;
+.k-button-lg {
+    padding: 8px 12px;
+    font-size: 16px;
+    line-height: 1.5;
 }
 
-.k-icon-button.k-button-lg > .k-button-icon {
-    min-width: calc( 14px * 1.4285714286);
-    min-height: calc( 14px * 1.4285714286);
+.k-button-lg.k-icon-button {
+    padding: 8px;
+}
+
+.k-button-lg.k-icon-button > .k-button-icon {
+    min-width: calc( 16px * 1.5);
+    min-height: calc( 16px * 1.5);
 }
 
 .k-button-square {
@@ -13837,15 +13838,15 @@ textarea.k-input-inner {
 
 .k-input-lg,
 .k-picker-lg {
-    font-size: 14px;
-    line-height: 1.4285714286;
+    font-size: 16px;
+    line-height: 1.5;
 }
 
 .k-input-lg .k-input-values,
 .k-picker-lg .k-input-values {
     width: 100%;
-    padding: 3px;
-    gap: 3px;
+    padding: 4px;
+    gap: 4px;
     cursor: text;
 }
 
@@ -13853,12 +13854,12 @@ textarea.k-input-inner {
 .k-input-lg .k-input-values > .k-input-inner,
 .k-picker-lg .k-input-values > .k-searchbar,
 .k-picker-lg .k-input-values > .k-input-inner {
-    margin: -3px;
+    margin: -4px;
 }
 
 .k-input-lg .k-input-inner,
 .k-picker-lg .k-input-inner {
-    padding: 6px 8px;
+    padding: 8px 12px;
 }
 
 .k-input-lg .k-input-button,
@@ -13867,7 +13868,7 @@ textarea.k-input-inner {
 .k-picker-lg .k-input-button,
 .k-picker-lg .k-spinner-increase,
 .k-picker-lg .k-spinner-decrease {
-    padding: 6px 6px;
+    padding: 8px 8px;
 }
 
 .k-input-lg .k-input-icon,
@@ -13882,20 +13883,20 @@ textarea.k-input-inner {
 .k-picker-lg .k-clear-value,
 .k-picker-lg .k-input-prefix > .k-icon,
 .k-picker-lg .k-input-suffix > .k-icon {
-    width: calc( 16px + 12px);
-    height: calc( 16px + 12px);
+    width: calc( 16px + 16px);
+    height: calc( 16px + 16px);
 }
 
 .k-input-lg.k-icon-picker .k-input-inner,
 .k-picker-lg.k-icon-picker .k-input-inner {
-    width: calc( 1.4285714286em);
-    height: calc( 1.4285714286em);
-    padding: 6px;
+    width: calc( 1.5em);
+    height: calc( 1.5em);
+    padding: 8px;
     box-sizing: content-box;
 }
 
 .k-dropdown-operator.k-picker-lg .k-input-button {
-    padding: 6px;
+    padding: 8px;
 }
 
 .k-input > kendo-popup,
@@ -16967,7 +16968,7 @@ kendo-label > .k-label {
 }
 
 .k-split-button .k-split-button-arrow.k-button-lg {
-    padding: 6px 6px;
+    padding: 8px 8px;
 }
 
 .k-split-button .k-split-button-arrow .k-button-icon {
@@ -19740,12 +19741,12 @@ kendo-label > .k-label {
 }
 
 .k-treeview-lg {
-    font-size: 14px;
-    line-height: 1.4285714286;
+    font-size: 16px;
+    line-height: 1.5;
 }
 
 .k-treeview-lg .k-treeview-leaf {
-    padding: 6px 8px;
+    padding: 8px 12px;
 }
 
 .k-treeview {

package/dist/all.scss

@@ -6036,14 +6036,14 @@ $message-box-link-text-decoration: underline !default;
 $kendo-list-font-size: null !default;
 $kendo-list-font-size-sm: $font-size-md !default;
 $kendo-list-font-size-md: $font-size-md !default;
-$kendo-list-font-size-lg: $font-size-md !default;
+$kendo-list-font-size-lg: $font-size-lg !default;
 
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
 $kendo-list-line-height-sm: null !default;
 $kendo-list-line-height-md: null !default;
-$kendo-list-line-height-lg: null !default;
+$kendo-list-line-height-lg: $line-height-lg !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
@@ -6089,7 +6089,7 @@ $kendo-list-item-padding-x: null !default;
 $kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
@@ -6097,7 +6097,7 @@ $kendo-list-item-padding-y: null !default;
 $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
 $kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list
@@ -7955,34 +7955,33 @@ $kendo-button-border-radius: null !default;
 /// Horizontal padding of the button.
 /// @group button
 $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
-
 /// Vertical padding of the button.
 /// @group button
 $kendo-button-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-
 /// Font family of the button.
 /// @group button
 $kendo-button-font-family: $font-family !default;
-
 /// Font sizes of the button.
 /// @group button
 $kendo-button-font-size: $font-size-md !default;
-$kendo-button-font-size-sm: $font-size-md !default;
-$kendo-button-font-size-md: $font-size-md !default;
-$kendo-button-font-size-lg: $font-size-md !default;
-
 /// Line heights used along with $font-size.
 /// @group button
 $kendo-button-line-height: $line-height-md !default;
+
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: $line-height-md !default;
+
+$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
-$kendo-button-line-height-lg: $line-height-md !default;
+
+$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 );
+$kendo-button-font-size-lg: $font-size-lg !default;
+$kendo-button-line-height-lg: $line-height-lg !default;
 
 /// Calculated height of the button.
 /// @group button
@@ -7992,6 +7991,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
@@ -8216,45 +8236,27 @@ $kendo-button-transition: color .2s ease-in-out !default;
 
     .k-button-text {}
 
-    // Sizes
-    .k-button-sm {
-        padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
-        font-size: $kendo-button-font-size-sm;
-        line-height: $kendo-button-line-height-sm;
-    }
-    .k-button-md {
-        padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
-        font-size: $kendo-button-font-size-md;
-        line-height: $kendo-button-line-height-md;
-    }
-    .k-button-lg {
-        padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
-        font-size: $kendo-button-font-size-lg;
-        line-height: $kendo-button-line-height-lg;
-    }
 
-    .k-icon-button.k-button-sm {
-        padding: $kendo-button-padding-y-sm;
+    // Sizes
+    @each $size, $size-props in $kendo-button-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-button-icon {
-            min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
-            min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
+        .k-button-#{$size} {
+            padding: $_padding-y $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
         }
-    }
-    .k-icon-button.k-button-md {
-        padding: $kendo-button-padding-y-md;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-            min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-        }
-    }
-    .k-icon-button.k-button-lg {
-        padding: $kendo-button-padding-y-lg;
+        .k-button-#{$size}.k-icon-button {
+            padding: $_padding-y;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
-            min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
+            > .k-button-icon {
+                min-width: calc( #{$_font-size} * #{$_line-height} );
+                min-height: calc( #{$_font-size} * #{$_line-height} );
+            }
         }
     }
 
@@ -8777,16 +8779,33 @@ $kendo-button-transition: color .2s ease-in-out !default;
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/input/_variables.scss
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-md !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $line-height-md !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -8799,10 +8818,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-input-font-size-lg: $font-size-md !default;
-$kendo-input-line-height-lg: $line-height-md !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-font-size-lg: $font-size-lg !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
 $kendo-input-sizes: (
     sm: (
@@ -19095,13 +19114,13 @@ $kendo-treeview-font-family: $font-family !default;
 $kendo-treeview-font-size: $font-size-md !default;
 $kendo-treeview-font-size-sm: $font-size-md !default;
 $kendo-treeview-font-size-md: $font-size-md !default;
-$kendo-treeview-font-size-lg: $font-size-md !default;
+$kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: $line-height-md !default;
 $kendo-treeview-line-height-sm: $line-height-md !default;
 $kendo-treeview-line-height-md: $line-height-md !default;
-$kendo-treeview-line-height-lg: $line-height-md !default;
+$kendo-treeview-line-height-lg: $line-height-lg !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
@@ -19111,13 +19130,13 @@ $kendo-treeview-indent: 16px !default;
 $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ff6358",
         "#ffd246",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#000000",
         "#151515",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#50686e",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.5.1-dev.0",
+    "version": "5.5.1-dev.1",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.5.1-dev.0",
+  "version": "5.5.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,5 +44,5 @@
   "devDependencies": {
     "sass-build": "^0.0.1"
   },
-  "gitHead": "f9e886d7414c48c7a576210e6b46d938d27b3125"
+  "gitHead": "af60c06ba819159a7b64019ea1abd23116c3bcd7"
 }

package/scss/button/_layout.scss

@@ -68,45 +68,27 @@
 
     .k-button-text {}
 
-    // Sizes
-    .k-button-sm {
-        padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
-        font-size: $kendo-button-font-size-sm;
-        line-height: $kendo-button-line-height-sm;
-    }
-    .k-button-md {
-        padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
-        font-size: $kendo-button-font-size-md;
-        line-height: $kendo-button-line-height-md;
-    }
-    .k-button-lg {
-        padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
-        font-size: $kendo-button-font-size-lg;
-        line-height: $kendo-button-line-height-lg;
-    }
-
-    .k-icon-button.k-button-sm {
-        padding: $kendo-button-padding-y-sm;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
-            min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
+    // Sizes
+    @each $size, $size-props in $kendo-button-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-button-#{$size} {
+            padding: $_padding-y $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
         }
-    }
-    .k-icon-button.k-button-md {
-        padding: $kendo-button-padding-y-md;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-            min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-        }
-    }
-    .k-icon-button.k-button-lg {
-        padding: $kendo-button-padding-y-lg;
+        .k-button-#{$size}.k-icon-button {
+            padding: $_padding-y;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
-            min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
+            > .k-button-icon {
+                min-width: calc( #{$_font-size} * #{$_line-height} );
+                min-height: calc( #{$_font-size} * #{$_line-height} );
+            }
         }
     }
 

package/scss/button/_variables.scss

@@ -11,34 +11,33 @@ $kendo-button-border-radius: null !default;
 /// Horizontal padding of the button.
 /// @group button
 $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
-
 /// Vertical padding of the button.
 /// @group button
 $kendo-button-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-
 /// Font family of the button.
 /// @group button
 $kendo-button-font-family: $font-family !default;
-
 /// Font sizes of the button.
 /// @group button
 $kendo-button-font-size: $font-size-md !default;
-$kendo-button-font-size-sm: $font-size-md !default;
-$kendo-button-font-size-md: $font-size-md !default;
-$kendo-button-font-size-lg: $font-size-md !default;
-
 /// Line heights used along with $font-size.
 /// @group button
 $kendo-button-line-height: $line-height-md !default;
+
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: $line-height-md !default;
+
+$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
-$kendo-button-line-height-lg: $line-height-md !default;
+
+$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 );
+$kendo-button-font-size-lg: $font-size-lg !default;
+$kendo-button-line-height-lg: $line-height-lg !default;
 
 /// Calculated height of the button.
 /// @group button
@@ -48,6 +47,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(

package/scss/input/_variables.scss

@@ -1,14 +1,31 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-md !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $line-height-md !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -21,10 +38,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-input-font-size-lg: $font-size-md !default;
-$kendo-input-line-height-lg: $line-height-md !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-font-size-lg: $font-size-lg !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
 $kendo-input-sizes: (
     sm: (

package/scss/list/_variables.scss

@@ -5,14 +5,14 @@
 $kendo-list-font-size: null !default;
 $kendo-list-font-size-sm: $font-size-md !default;
 $kendo-list-font-size-md: $font-size-md !default;
-$kendo-list-font-size-lg: $font-size-md !default;
+$kendo-list-font-size-lg: $font-size-lg !default;
 
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
 $kendo-list-line-height-sm: null !default;
 $kendo-list-line-height-md: null !default;
-$kendo-list-line-height-lg: null !default;
+$kendo-list-line-height-lg: $line-height-lg !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
@@ -58,7 +58,7 @@ $kendo-list-item-padding-x: null !default;
 $kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
@@ -66,7 +66,7 @@ $kendo-list-item-padding-y: null !default;
 $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
 $kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list

package/scss/treeview/_variables.scss

@@ -8,13 +8,13 @@ $kendo-treeview-font-family: $font-family !default;
 $kendo-treeview-font-size: $font-size-md !default;
 $kendo-treeview-font-size-sm: $font-size-md !default;
 $kendo-treeview-font-size-md: $font-size-md !default;
-$kendo-treeview-font-size-lg: $font-size-md !default;
+$kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: $line-height-md !default;
 $kendo-treeview-line-height-sm: $line-height-md !default;
 $kendo-treeview-line-height-md: $line-height-md !default;
-$kendo-treeview-line-height-lg: $line-height-md !default;
+$kendo-treeview-line-height-lg: $line-height-lg !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
@@ -24,13 +24,13 @@ $kendo-treeview-indent: 16px !default;
 $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;