@progress/kendo-theme-core 14.4.0-dev.3 → 14.4.0-dev.4

package/dist/meta/sassdoc-data.json

@@ -2554,8 +2554,8 @@
         {
             "description": "The sizes map of the Menu group.\n",
             "commentRange": {
-                "start": 113,
-                "end": 114
+                "start": 115,
+                "end": 116
             },
             "context": {
                 "type": "variable",
@@ -2563,8 +2563,8 @@
                 "value": "(\n    sm: (\n        font-size: $kendo-menu-popup-sm-font-size,\n        line-height: $kendo-menu-popup-sm-line-height,\n        item-padding-y: $kendo-menu-popup-sm-item-padding-y,\n        item-padding-x: $kendo-menu-popup-sm-item-padding-x,\n        item-padding-end: $kendo-menu-popup-sm-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-sm-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-sm-item-icon-margin-end\n    ),\n    md: (\n        font-size: $kendo-menu-popup-md-font-size,\n        line-height: $kendo-menu-popup-md-line-height,\n        item-padding-y: $kendo-menu-popup-md-item-padding-y,\n        item-padding-x: $kendo-menu-popup-md-item-padding-x,\n        item-padding-end: $kendo-menu-popup-md-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-md-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-md-item-icon-margin-end\n    ),\n    lg: (\n        font-size: $kendo-menu-popup-lg-font-size,\n        line-height: $kendo-menu-popup-lg-line-height,\n        item-padding-y: $kendo-menu-popup-lg-item-padding-y,\n        item-padding-x: $kendo-menu-popup-lg-item-padding-x,\n        item-padding-end: $kendo-menu-popup-lg-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-lg-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-lg-item-icon-margin-end\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 115,
-                    "end": 143
+                    "start": 117,
+                    "end": 145
                 }
             },
             "group": [
@@ -3531,8 +3531,8 @@
         {
             "description": "The spacing around the TabStrip scroll buttons (prev/next).\n",
             "commentRange": {
-                "start": 81,
-                "end": 82
+                "start": 83,
+                "end": 84
             },
             "context": {
                 "type": "variable",
@@ -3540,8 +3540,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 83,
-                    "end": 83
+                    "start": 85,
+                    "end": 85
                 }
             },
             "group": [
@@ -3556,8 +3556,8 @@
         {
             "description": "The sizes map of the TabStrip.\n",
             "commentRange": {
-                "start": 85,
-                "end": 86
+                "start": 87,
+                "end": 88
             },
             "context": {
                 "type": "variable",
@@ -3565,8 +3565,8 @@
                 "value": "(\n    sm: (\n        font-size: $kendo-tabstrip-sm-font-size,\n        line-height: $kendo-tabstrip-sm-line-height,\n        item-padding-x: $kendo-tabstrip-sm-item-padding-x,\n        item-padding-y: $kendo-tabstrip-sm-item-padding-y\n    ),\n    md: (\n        font-size: $kendo-tabstrip-md-font-size,\n        line-height: $kendo-tabstrip-md-line-height,\n        item-padding-x: $kendo-tabstrip-md-item-padding-x,\n        item-padding-y: $kendo-tabstrip-md-item-padding-y\n    ),\n    lg: (\n        font-size: $kendo-tabstrip-lg-font-size,\n        line-height: $kendo-tabstrip-lg-line-height,\n        item-padding-x: $kendo-tabstrip-lg-item-padding-x,\n        item-padding-y: $kendo-tabstrip-lg-item-padding-y\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 87,
-                    "end": 106
+                    "start": 89,
+                    "end": 108
                 }
             },
             "group": [
@@ -3606,8 +3606,8 @@
         {
             "description": "The sizes map of the ToolBar.\n",
             "commentRange": {
-                "start": 60,
-                "end": 61
+                "start": 62,
+                "end": 63
             },
             "context": {
                 "type": "variable",
@@ -3615,8 +3615,8 @@
                 "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing,\n        separator-height: $kendo-toolbar-sm-separator-height\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing,\n        separator-height: $kendo-toolbar-md-separator-height\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing,\n        separator-height: $kendo-toolbar-lg-separator-height\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 62,
-                    "end": 81
+                    "start": 64,
+                    "end": 83
                 }
             },
             "group": [
@@ -3631,8 +3631,8 @@
         {
             "description": "The sizes map of the TreeView.\n",
             "commentRange": {
-                "start": 35,
-                "end": 36
+                "start": 37,
+                "end": 38
             },
             "context": {
                 "type": "variable",
@@ -3640,8 +3640,8 @@
                 "value": "(\n    sm: (\n        font-size: $kendo-treeview-sm-font-size,\n        line-height: $kendo-treeview-sm-line-height,\n        item-padding-x: $kendo-treeview-sm-item-padding-x,\n        item-padding-y: $kendo-treeview-sm-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y\n    ),\n    md: (\n        font-size: $kendo-treeview-md-font-size,\n        line-height: $kendo-treeview-md-line-height,\n        item-padding-x: $kendo-treeview-md-item-padding-x,\n        item-padding-y: $kendo-treeview-md-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y\n    ),\n    lg: (\n        font-size: $kendo-treeview-lg-font-size,\n        line-height: $kendo-treeview-lg-line-height,\n        item-padding-x: $kendo-treeview-lg-item-padding-x,\n        item-padding-y: $kendo-treeview-lg-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 37,
-                    "end": 62
+                    "start": 39,
+                    "end": 64
                 }
             },
             "group": [
@@ -13069,8 +13069,8 @@
                 {
                     "description": "The sizes map of the Menu group.\n",
                     "commentRange": {
-                        "start": 113,
-                        "end": 114
+                        "start": 115,
+                        "end": 116
                     },
                     "context": {
                         "type": "variable",
@@ -13078,8 +13078,8 @@
                         "value": "(\n    sm: (\n        font-size: $kendo-menu-popup-sm-font-size,\n        line-height: $kendo-menu-popup-sm-line-height,\n        item-padding-y: $kendo-menu-popup-sm-item-padding-y,\n        item-padding-x: $kendo-menu-popup-sm-item-padding-x,\n        item-padding-end: $kendo-menu-popup-sm-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-sm-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-sm-item-icon-margin-end\n    ),\n    md: (\n        font-size: $kendo-menu-popup-md-font-size,\n        line-height: $kendo-menu-popup-md-line-height,\n        item-padding-y: $kendo-menu-popup-md-item-padding-y,\n        item-padding-x: $kendo-menu-popup-md-item-padding-x,\n        item-padding-end: $kendo-menu-popup-md-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-md-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-md-item-icon-margin-end\n    ),\n    lg: (\n        font-size: $kendo-menu-popup-lg-font-size,\n        line-height: $kendo-menu-popup-lg-line-height,\n        item-padding-y: $kendo-menu-popup-lg-item-padding-y,\n        item-padding-x: $kendo-menu-popup-lg-item-padding-x,\n        item-padding-end: $kendo-menu-popup-lg-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-lg-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-lg-item-icon-margin-end\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 115,
-                            "end": 143
+                            "start": 117,
+                            "end": 145
                         }
                     },
                     "group": [
@@ -13816,8 +13816,8 @@
                 {
                     "description": "The spacing around the TabStrip scroll buttons (prev/next).\n",
                     "commentRange": {
-                        "start": 81,
-                        "end": 82
+                        "start": 83,
+                        "end": 84
                     },
                     "context": {
                         "type": "variable",
@@ -13825,8 +13825,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 83,
-                            "end": 83
+                            "start": 85,
+                            "end": 85
                         }
                     },
                     "group": [
@@ -13841,8 +13841,8 @@
                 {
                     "description": "The sizes map of the TabStrip.\n",
                     "commentRange": {
-                        "start": 85,
-                        "end": 86
+                        "start": 87,
+                        "end": 88
                     },
                     "context": {
                         "type": "variable",
@@ -13850,8 +13850,8 @@
                         "value": "(\n    sm: (\n        font-size: $kendo-tabstrip-sm-font-size,\n        line-height: $kendo-tabstrip-sm-line-height,\n        item-padding-x: $kendo-tabstrip-sm-item-padding-x,\n        item-padding-y: $kendo-tabstrip-sm-item-padding-y\n    ),\n    md: (\n        font-size: $kendo-tabstrip-md-font-size,\n        line-height: $kendo-tabstrip-md-line-height,\n        item-padding-x: $kendo-tabstrip-md-item-padding-x,\n        item-padding-y: $kendo-tabstrip-md-item-padding-y\n    ),\n    lg: (\n        font-size: $kendo-tabstrip-lg-font-size,\n        line-height: $kendo-tabstrip-lg-line-height,\n        item-padding-x: $kendo-tabstrip-lg-item-padding-x,\n        item-padding-y: $kendo-tabstrip-lg-item-padding-y\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 87,
-                            "end": 106
+                            "start": 89,
+                            "end": 108
                         }
                     },
                     "group": [
@@ -13903,8 +13903,8 @@
                 {
                     "description": "The sizes map of the ToolBar.\n",
                     "commentRange": {
-                        "start": 60,
-                        "end": 61
+                        "start": 62,
+                        "end": 63
                     },
                     "context": {
                         "type": "variable",
@@ -13912,8 +13912,8 @@
                         "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing,\n        separator-height: $kendo-toolbar-sm-separator-height\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing,\n        separator-height: $kendo-toolbar-md-separator-height\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing,\n        separator-height: $kendo-toolbar-lg-separator-height\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 62,
-                            "end": 81
+                            "start": 64,
+                            "end": 83
                         }
                     },
                     "group": [
@@ -13934,8 +13934,8 @@
                 {
                     "description": "The sizes map of the TreeView.\n",
                     "commentRange": {
-                        "start": 35,
-                        "end": 36
+                        "start": 37,
+                        "end": 38
                     },
                     "context": {
                         "type": "variable",
@@ -13943,8 +13943,8 @@
                         "value": "(\n    sm: (\n        font-size: $kendo-treeview-sm-font-size,\n        line-height: $kendo-treeview-sm-line-height,\n        item-padding-x: $kendo-treeview-sm-item-padding-x,\n        item-padding-y: $kendo-treeview-sm-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y\n    ),\n    md: (\n        font-size: $kendo-treeview-md-font-size,\n        line-height: $kendo-treeview-md-line-height,\n        item-padding-x: $kendo-treeview-md-item-padding-x,\n        item-padding-y: $kendo-treeview-md-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y\n    ),\n    lg: (\n        font-size: $kendo-treeview-lg-font-size,\n        line-height: $kendo-treeview-lg-line-height,\n        item-padding-x: $kendo-treeview-lg-item-padding-x,\n        item-padding-y: $kendo-treeview-lg-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 37,
-                            "end": 62
+                            "start": 39,
+                            "end": 64
                         }
                     },
                     "group": [

package/dist/meta/sassdoc-raw-data.json

@@ -7328,8 +7328,8 @@
     {
         "description": "The sizes map of the Menu group.\n",
         "commentRange": {
-            "start": 113,
-            "end": 114
+            "start": 115,
+            "end": 116
         },
         "context": {
             "type": "variable",
@@ -7337,8 +7337,8 @@
             "value": "(\n    sm: (\n        font-size: $kendo-menu-popup-sm-font-size,\n        line-height: $kendo-menu-popup-sm-line-height,\n        item-padding-y: $kendo-menu-popup-sm-item-padding-y,\n        item-padding-x: $kendo-menu-popup-sm-item-padding-x,\n        item-padding-end: $kendo-menu-popup-sm-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-sm-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-sm-item-icon-margin-end\n    ),\n    md: (\n        font-size: $kendo-menu-popup-md-font-size,\n        line-height: $kendo-menu-popup-md-line-height,\n        item-padding-y: $kendo-menu-popup-md-item-padding-y,\n        item-padding-x: $kendo-menu-popup-md-item-padding-x,\n        item-padding-end: $kendo-menu-popup-md-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-md-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-md-item-icon-margin-end\n    ),\n    lg: (\n        font-size: $kendo-menu-popup-lg-font-size,\n        line-height: $kendo-menu-popup-lg-line-height,\n        item-padding-y: $kendo-menu-popup-lg-item-padding-y,\n        item-padding-x: $kendo-menu-popup-lg-item-padding-x,\n        item-padding-end: $kendo-menu-popup-lg-item-padding-end,\n        item-icon-margin-start: $kendo-menu-popup-lg-item-icon-margin-start,\n        item-icon-margin-end: $kendo-menu-popup-lg-item-icon-margin-end\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 115,
-                "end": 143
+                "start": 117,
+                "end": 145
             }
         },
         "group": [
@@ -8089,8 +8089,8 @@
     {
         "description": "The spacing around the TabStrip scroll buttons (prev/next).\n",
         "commentRange": {
-            "start": 81,
-            "end": 82
+            "start": 83,
+            "end": 84
         },
         "context": {
             "type": "variable",
@@ -8098,8 +8098,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 83,
-                "end": 83
+                "start": 85,
+                "end": 85
             }
         },
         "group": [
@@ -8114,8 +8114,8 @@
     {
         "description": "The sizes map of the TabStrip.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 87,
+            "end": 88
         },
         "context": {
             "type": "variable",
@@ -8123,8 +8123,8 @@
             "value": "(\n    sm: (\n        font-size: $kendo-tabstrip-sm-font-size,\n        line-height: $kendo-tabstrip-sm-line-height,\n        item-padding-x: $kendo-tabstrip-sm-item-padding-x,\n        item-padding-y: $kendo-tabstrip-sm-item-padding-y\n    ),\n    md: (\n        font-size: $kendo-tabstrip-md-font-size,\n        line-height: $kendo-tabstrip-md-line-height,\n        item-padding-x: $kendo-tabstrip-md-item-padding-x,\n        item-padding-y: $kendo-tabstrip-md-item-padding-y\n    ),\n    lg: (\n        font-size: $kendo-tabstrip-lg-font-size,\n        line-height: $kendo-tabstrip-lg-line-height,\n        item-padding-x: $kendo-tabstrip-lg-item-padding-x,\n        item-padding-y: $kendo-tabstrip-lg-item-padding-y\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 106
+                "start": 89,
+                "end": 108
             }
         },
         "group": [
@@ -8164,8 +8164,8 @@
     {
         "description": "The sizes map of the ToolBar.\n",
         "commentRange": {
-            "start": 60,
-            "end": 61
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
@@ -8173,8 +8173,8 @@
             "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing,\n        separator-height: $kendo-toolbar-sm-separator-height\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing,\n        separator-height: $kendo-toolbar-md-separator-height\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing,\n        separator-height: $kendo-toolbar-lg-separator-height\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 62,
-                "end": 81
+                "start": 64,
+                "end": 83
             }
         },
         "group": [
@@ -8189,8 +8189,8 @@
     {
         "description": "The sizes map of the TreeView.\n",
         "commentRange": {
-            "start": 35,
-            "end": 36
+            "start": 37,
+            "end": 38
         },
         "context": {
             "type": "variable",
@@ -8198,8 +8198,8 @@
             "value": "(\n    sm: (\n        font-size: $kendo-treeview-sm-font-size,\n        line-height: $kendo-treeview-sm-line-height,\n        item-padding-x: $kendo-treeview-sm-item-padding-x,\n        item-padding-y: $kendo-treeview-sm-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y\n    ),\n    md: (\n        font-size: $kendo-treeview-md-font-size,\n        line-height: $kendo-treeview-md-line-height,\n        item-padding-x: $kendo-treeview-md-item-padding-x,\n        item-padding-y: $kendo-treeview-md-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y\n    ),\n    lg: (\n        font-size: $kendo-treeview-lg-font-size,\n        line-height: $kendo-treeview-lg-line-height,\n        item-padding-x: $kendo-treeview-lg-item-padding-x,\n        item-padding-y: $kendo-treeview-lg-item-padding-y,\n        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,\n        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 37,
-                "end": 62
+                "start": 39,
+                "end": 64
             }
         },
         "group": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "14.4.0-dev.3",
+  "version": "14.4.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/scss/components/button/_layout.scss

@@ -93,38 +93,38 @@
 
                         &.k-svg-icon > svg,
                         &.k-icon-md > svg {
-                            width: $kendo-icon-size-md;
-                            height: $kendo-icon-size-md;
+                            width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+                            height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
                         }
 
                         &.k-icon-xs > svg {
-                            width: $kendo-icon-size-xs;
-                            height: $kendo-icon-size-xs;
+                            width: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
+                            height: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
                         }
 
                         &.k-icon-sm > svg {
-                            width: $kendo-icon-size-sm;
-                            height: $kendo-icon-size-sm;
+                            width: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
+                            height: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
                         }
 
                         &.k-icon-lg > svg {
-                            width: $kendo-icon-size-lg;
-                            height: $kendo-icon-size-lg;
+                            width: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
+                            height: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
                         }
 
                         &.k-icon-xl > svg {
-                            width: $kendo-icon-size-xl;
-                            height: $kendo-icon-size-xl;
+                            width: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
+                            height: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
                         }
 
                         &.k-icon-xxl > svg {
-                            width: $kendo-icon-size-xxl;
-                            height: $kendo-icon-size-xxl;
+                            width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
+                            height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
                         }
 
                         &.k-icon-xxxl > svg {
-                            width: $kendo-icon-size-xxxl;
-                            height: $kendo-icon-size-xxxl;
+                            width: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
+                            height: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
                         }
                     }
                 }

package/scss/components/color-preview/_layout.scss

@@ -42,7 +42,7 @@
         gap: 2px;
 
         .k-color-preview-mask {
-            width: calc( #{$kendo-icon-size} - 2px );
+            width: calc( #{$ki-icon-size} - 2px );
             height: 2px;
         }
     }

package/scss/components/filemanager/_layout.scss

@@ -137,7 +137,7 @@
 
         // File preview
         .k-file-preview {
-            margin-inline-end: $kendo-icon-spacing;
+            margin-inline-end: $kendo-file-manager-icon-spacing;
             display: inline-flex;
             flex-direction: row;
             vertical-align: middle;
@@ -159,7 +159,7 @@
     .k-filemanager-preview {
         padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y;
         width: $kendo-file-manager-preview-width;
-        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
+        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl}) * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
         border-width: 0;
         border-inline-start-width: $kendo-file-manager-preview-border-width;
         border-style: solid;
@@ -236,7 +236,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: $kendo-icon-spacing;
+        gap: $kendo-file-manager-icon-spacing;
     }
 
 }

package/scss/components/filemanager/_variables.scss

@@ -57,6 +57,8 @@ $kendo-file-manager-preview-width: null !default;
 $kendo-file-manager-preview-border-width: null !default;
 $kendo-file-manager-preview-spacing: null !default;
 $kendo-file-manager-preview-column-gap: null !default;
+
+$kendo-file-manager-icon-spacing: null !default;
 $kendo-file-manager-preview-bg: null !default;
 $kendo-file-manager-preview-text: null !default;
 $kendo-file-manager-preview-border: null !default;

package/scss/components/gantt/_layout.scss

@@ -667,7 +667,7 @@
             display: block;
         }
         .k-task-pct {
-            font-size: $kendo-icon-size-xxl;
+            font-size: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
         }
         ul {
             line-height: normal;

package/scss/components/grid/_layout.scss

@@ -216,7 +216,7 @@
             .k-sort-order {
                 display: inline-block;
                 vertical-align: top;
-                height: $kendo-icon-size;
+                height: $ki-icon-size;
                 font-size: $kendo-grid-sorting-index-font-size;
                 margin-block-start: $kendo-grid-sorting-index-spacing-y;
                 margin-inline-start: $kendo-grid-sorting-index-spacing-x;
@@ -326,8 +326,8 @@
         }
 
         .k-grouping-row .k-icon {
-            margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$kendo-grid-cell-padding-x} );
-            margin-inline-end: calc( $kendo-icon-size / 2 );
+            margin-inline-start: calc( ( $ki-icon-size / 2 ) - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: calc( $ki-icon-size / 2 );
             text-decoration: none;
         }
 
@@ -1156,7 +1156,7 @@
                 }
 
                 .k-grouping-row .k-icon {
-                    margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
+                    margin-inline-start: calc( ( $ki-icon-size / 2 ) - #{$_cell-padding-x} );
                 }
 
                 .k-grouping-dropclue {
@@ -1232,8 +1232,8 @@
 
                 > .k-svg-icon > svg,
                 > .k-icon-wrapper-host svg {
-                    width: $kendo-icon-size-md;
-                    height: $kendo-icon-size-md;
+                    width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+                    height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
                 }
             }
         }
@@ -1656,7 +1656,7 @@
         > .k-icon,
         > .k-icon-wrapper-host .k-icon,
         > .k-expander-indicator {
-            margin-inline-end: $kendo-icon-spacing;
+            margin-inline-end: $kendo-grid-column-menu-icon-spacing;
         }
     }
 

package/scss/components/grid/_variables.scss

@@ -111,6 +111,8 @@ $kendo-grid-header-font-size: null !default;
 $kendo-grid-header-first-border: null !default;
 $kendo-grid-header-menu-icon-spacing: null !default;
 
+$kendo-grid-column-menu-icon-spacing: null !default;
+
 $kendo-grid-toolbar-border-width: null !default;
 
 $kendo-grid-cell-horizontal-border-width: null !default;

package/scss/components/icons/_layout.scss

@@ -1,9 +1,6 @@
 @use "./_variables.scss" as *;
-
-@use "@progress/kendo-svg-icons/scss/index.scss" as * with (
-    $ki-icon-size: $kendo-icon-size,
-    $ki-icon-default-size: $kendo-icon-default-size
-);
+@use "../../spacing/index.scss" as *;
+@use "@progress/kendo-svg-icons/scss/index.scss" as *;
 
 @mixin kendo-icon--layout-base() {
 
@@ -58,7 +55,7 @@
 
     .k-icon-action {
         display: inline-flex;
-        padding: $kendo-icon-padding;
+        padding: k-spacing(1);
         line-height: 1;
         align-items: center;
         vertical-align: middle;

package/scss/components/icons/_variables.scss

@@ -1,14 +1,12 @@
 $kendo-icon-default-size: null !default;
 $kendo-icon-size: null !default;
-$kendo-icon-size-xs: null !default;
-$kendo-icon-size-sm: null !default;
-$kendo-icon-size-md: null !default;
-$kendo-icon-size-lg: null !default;
-$kendo-icon-size-xl: null !default;
-$kendo-icon-size-xxl: null !default;
-$kendo-icon-size-xxxl: null !default;
 $kendo-icon-spacing: null !default;
 $kendo-icon-padding: null !default;
 
 $kendo-accent-icon-color: null !default;
 $kendo-action-icon-color: null !default;
+
+@forward "@progress/kendo-svg-icons/scss/index.scss" with (
+    $ki-icon-size: $kendo-icon-size,
+    $ki-icon-default-size: $kendo-icon-default-size
+);

package/scss/components/input/_layout.scss

@@ -361,7 +361,7 @@
         border-style: solid;
         border-color: inherit;
         border-width: 0 0 0 1px;
-        height: $kendo-icon-size;
+        height: $ki-icon-size;
         align-self: center;
 
         &-horizontal {
@@ -448,7 +448,7 @@
     .k-input-loading-icon {
         width: 1em;
         height: 1em;
-        font-size: $kendo-icon-size;
+        font-size: $ki-icon-size;
     }
 
     // Input with SVG icon
@@ -457,38 +457,38 @@
     .k-input-loading-icon {
         &.k-svg-icon > svg,
         &.k-icon-md > svg {
-            width: $kendo-icon-size-md;
-            height: $kendo-icon-size-md;
+            width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+            height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
         }
 
         &.k-icon-xs > svg {
-            width: $kendo-icon-size-xs;
-            height: $kendo-icon-size-xs;
+            width: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
+            height: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
         }
 
         &.k-icon-sm > svg {
-            width: $kendo-icon-size-sm;
-            height: $kendo-icon-size-sm;
+            width: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
+            height: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
         }
 
         &.k-icon-lg > svg {
-            width: $kendo-icon-size-lg;
-            height: $kendo-icon-size-lg;
+            width: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
+            height: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
         }
 
         &.k-icon-xl > svg {
-            width: $kendo-icon-size-xl;
-            height: $kendo-icon-size-xl;
+            width: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
+            height: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
         }
 
         &.k-icon-xxl > svg {
-            width: $kendo-icon-size-xxl;
-            height: $kendo-icon-size-xxl;
+            width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
+            height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
         }
 
         &.k-icon-xxxl > svg {
-            width: $kendo-icon-size-xxxl;
-            height: $kendo-icon-size-xxxl;
+            width: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
+            height: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
         }
     }
 

package/scss/components/list/_layout.scss

@@ -114,11 +114,11 @@
 
                 &:has(.k-list-item-icon) .k-list-item,
                 &:has(.k-list-item-icon) .k-list-group-item {
-                    padding-inline-start:  calc( #{$kendo-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
+                    padding-inline-start:  calc( #{$ki-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
                 }
 
                 .k-list-item:has(.k-list-item-icon) .k-list-item-description {
-                    padding-inline-start:  calc( #{$kendo-icon-size} + #{$kendo-list-item-gap});
+                    padding-inline-start:  calc( #{$ki-icon-size} + #{$kendo-list-item-gap});
                 }
 
                 .k-list-item:has(.k-list-item-icon),

package/scss/components/loader/_layout.scss

@@ -469,8 +469,8 @@
 
     // Loading indicator
     .k-i-loading {
-        width: $kendo-icon-size-md;
-        height: $kendo-icon-size-md;
+        width: $ki-icon-size;
+        height: $ki-icon-size;
         line-height: 1;
         display: inline-flex;
         flex-flow: row nowrap;

package/scss/components/menu/_layout.scss

@@ -88,7 +88,7 @@
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
+        margin-inline-end: calc( #{$kendo-menu-expand-arrow-spacing} * -1 );
         padding-block: $kendo-menu-icon-padding-y;
         padding-inline: $kendo-menu-icon-padding-x;
         display: inline-flex;

package/scss/components/menu/_variables.scss

@@ -57,6 +57,8 @@ $kendo-menu-scroll-button-hover-gradient: null !default;
 $kendo-menu-icon-padding-x: null !default;
 $kendo-menu-icon-padding-y: null !default;
 
+$kendo-menu-expand-arrow-spacing: null !default;
+
 // Menu Separator
 
 $kendo-menu-separator-margin-inline: null !default;

package/scss/components/panelbar/_layout.scss

@@ -47,7 +47,7 @@
                 font-weight: 500;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $kendo-icon-spacing;
+                gap: $kendo-panelbar-item-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;
@@ -81,7 +81,7 @@
                 text-decoration: none;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $kendo-icon-spacing;
+                gap: $kendo-panelbar-item-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;

package/scss/components/panelbar/_variables.scss

@@ -14,6 +14,8 @@ $kendo-panelbar-header-padding-y: null !default;
 $kendo-panelbar-item-padding-x: null !default;
 $kendo-panelbar-item-padding-y: null !default;
 
+$kendo-panelbar-item-icon-spacing: null !default;
+
 $kendo-panelbar-item-level-count: null !default;
 
 $kendo-panelbar-bg: null !default;

package/scss/components/pivotgrid/_layout.scss

@@ -653,8 +653,8 @@
 
     // PivotGrid toggle icon
     .k-pivotgrid-toggle {
-        margin-block: calc( #{$kendo-icon-padding} * -1 );
-        padding: $kendo-icon-padding;
+        margin-block: calc( #{k-spacing(1)} * -1 );
+        padding: k-spacing(1);
         box-sizing: content-box;
         cursor: pointer;
     }

package/scss/components/scheduler/_layout.scss

@@ -234,7 +234,7 @@
             display: inline-flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: $kendo-icon-spacing;
+            gap: $kendo-scheduler-nav-item-icon-spacing;
             cursor: pointer;
         }
 

package/scss/components/scheduler/_variables.scss

@@ -102,6 +102,8 @@ $kendo-scheduler-indicators-margin: null !default;
 $kendo-scheduler-marquee-label-inset-x: null !default;
 $kendo-scheduler-marquee-label-inset-y: null !default;
 
+$kendo-scheduler-nav-item-icon-spacing: null !default;
+
 $kendo-scheduler-header-bg: null !default;
 
 

package/scss/components/segmented-control/_layout.scss

@@ -42,12 +42,6 @@
 
                 .k-segmented-control-button-icon {
                     min-height: calc( #{$_font-size} * #{$_line-height} );
-
-                    &.k-svg-icon > svg {
-                        width: $kendo-icon-size-md;
-                        height: $kendo-icon-size-md;
-                    }
-
                 }
             }
         }

package/scss/components/stepper/_layout.scss

@@ -130,14 +130,14 @@
             border-width: 0;
         }
         .k-step-label .k-step-text {
-            max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
+            max-width: calc(10em - (#{$ki-icon-size} + #{$kendo-stepper-label-icon-spacing}));
             flex-grow: k-z-index("base", 1);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
         }
         .k-step-label .k-icon  {
-            margin-inline-start: $kendo-icon-spacing;
+            margin-inline-start: $kendo-stepper-label-icon-spacing;
         }
 
         .k-step-current .k-step-label {

package/scss/components/stepper/_variables.scss

@@ -8,6 +8,8 @@ $kendo-stepper-label-margin-x: null !default;
 $kendo-stepper-label-padding-x: null !default;
 $kendo-stepper-label-padding-y: null !default;
 $kendo-stepper-label-border-radius: null !default;
+
+$kendo-stepper-label-icon-spacing: null !default;
 $kendo-stepper-border-width: null !default;
 
 $kendo-stepper-inline-content-padding-x: null !default;

package/scss/components/tabstrip/_layout.scss

@@ -143,7 +143,7 @@
             flex-direction: row;
             align-content: center;
             align-items: center;
-            gap: $kendo-icon-spacing;
+            gap: $kendo-tabstrip-item-icon-spacing;
         }
 
 

package/scss/components/tabstrip/_variables.scss

@@ -29,6 +29,8 @@ $kendo-tabstrip-border: null !default;
 $kendo-tabstrip-item-border-width: null !default;
 $kendo-tabstrip-item-border-radius: null !default;
 $kendo-tabstrip-item-gap: null !default;
+
+$kendo-tabstrip-item-icon-spacing: null !default;
 $kendo-tabstrip-item-spacing-x: null !default;
 $kendo-tabstrip-sm-item-padding-x: null !default;
 $kendo-tabstrip-sm-item-padding-y: null !default;

package/scss/components/toolbar/_layout.scss

@@ -349,7 +349,7 @@
             flex-flow: row nowrap;
             align-items: center;
             align-content: center;
-            gap: $kendo-icon-spacing;
+            gap: $kendo-toolbar-item-icon-spacing;
             justify-content: flex-start;
             position: relative;
         }

package/scss/components/toolbar/_variables.scss

@@ -15,6 +15,8 @@ $kendo-toolbar-sm-spacing: null !default;
 $kendo-toolbar-md-spacing: null !default;
 $kendo-toolbar-lg-spacing: null !default;
 
+$kendo-toolbar-item-icon-spacing: null !default;
+
 $kendo-toolbar-separator-height: null !default;
 $kendo-toolbar-sm-separator-height: null !default;
 $kendo-toolbar-md-separator-height: null !default;

package/scss/components/tooltip/_layout.scss

@@ -35,7 +35,7 @@
     }
 
     .k-tooltip-icon {
-        margin-inline-end: $kendo-icon-spacing;
+        margin-inline-end: $kendo-tooltip-icon-spacing;
         flex-shrink: 0;
     }
 
@@ -53,7 +53,7 @@
     }
 
     .k-tooltip-button {
-        margin-inline-start: $kendo-icon-spacing;
+        margin-inline-start: $kendo-tooltip-icon-spacing;
         flex-shrink: 0;
 
         .k-icon {

package/scss/components/tooltip/_variables.scss

@@ -2,6 +2,8 @@
 
 $kendo-tooltip-padding-y: null !default;
 $kendo-tooltip-padding-x: null !default;
+
+$kendo-tooltip-icon-spacing: null !default;
 $kendo-tooltip-border-width: null !default;
 $kendo-tooltip-border-radius: null !default;
 

package/scss/components/treelist/_layout.scss

@@ -1,4 +1,5 @@
 @use "../icons/_variables.scss" as *;
+@use "../../spacing/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
 
@@ -97,8 +98,8 @@
     }
 
     .k-treelist-toggle {
-        margin-block: calc( #{$kendo-icon-padding} * -1 );
-        padding: $kendo-icon-padding;
+        margin-block: calc( #{k-spacing(1)} * -1 );
+        padding: k-spacing(1);
         box-sizing: content-box;
         cursor: pointer;
     }

package/scss/components/treeview/_layout.scss

@@ -127,14 +127,14 @@
         cursor: pointer;
     }
     .k-treeview-toggle .k-icon {
-        padding: $kendo-icon-padding;
+        padding: k-spacing(1);
         box-sizing: content-box;
     }
 
 
     // Loading icon
     .k-treeview-loading {
-        margin-inline-end: $kendo-icon-spacing;
+        margin-inline-end: $kendo-treeview-item-icon-spacing;
     }
 
 
@@ -161,7 +161,7 @@
         .k-icon,
         .k-image,
         .k-sprite {
-            margin-inline-end: $kendo-icon-spacing;
+            margin-inline-end: $kendo-treeview-item-icon-spacing;
         }
     }
 

package/scss/components/treeview/_variables.scss

@@ -2,6 +2,8 @@
 
 $kendo-treeview-default-size: null !default;
 $kendo-treeview-gap: null !default;
+
+$kendo-treeview-item-icon-spacing: null !default;
 $kendo-treeview-border-radius: null !default;
 
 $kendo-treeview-font-family: null !default;

package/scss/components/upload/_layout.scss

@@ -183,7 +183,7 @@
         }
 
         .k-upload-files .k-file-info {
-            min-height: $kendo-icon-size-xxl;
+            min-height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
             display: block;
             overflow: hidden;
             flex: 1 0 0;
@@ -192,7 +192,7 @@
         .k-multiple-files-wrapper,
         .k-file-single > .k-file-info {
             margin-inline-start: $kendo-upload-file-info-margin;
-            min-height: $kendo-icon-size-xxl;
+            min-height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
             display: block;
             overflow: hidden;
             flex: 1 0 0;