@progress/kendo-theme-fluent 7.2.1-dev.6 → 7.2.1-dev.8

package/dist/meta/sassdoc-data.json

@@ -3759,7 +3759,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-breadcrumb-focus-shadow",
-                "value": "0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "0 0 0 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 63,
@@ -9884,7 +9884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-chart-major-lines",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 130,
@@ -9909,7 +9909,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-chart-minor-lines",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 133,
@@ -11884,7 +11884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-chat-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 155,
@@ -12959,7 +12959,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-disabled-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 116,
@@ -12984,7 +12984,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 119,
@@ -13009,7 +13009,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-disabled-checked-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 123,
@@ -13109,7 +13109,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-disabled-indeterminate-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color( neutral, 60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 ))",
                 "scope": "default",
                 "line": {
                     "start": 136,
@@ -13134,7 +13134,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-disabled-indeterminate-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 139,
@@ -13909,7 +13909,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-chip-outline-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -14734,7 +14734,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-focus-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 52,
@@ -14884,7 +14884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-canvas-rectangle-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 71,
@@ -15009,7 +15009,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-slider-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 87,
@@ -15684,7 +15684,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-preview-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 17,
@@ -15709,7 +15709,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-preview-hover-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 20,
@@ -16109,7 +16109,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-editor-focus-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 42,
@@ -16759,7 +16759,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-palette-tile-hover-outline",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 37,
@@ -18109,7 +18109,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-dock-manager-dock-preview-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))",
                 "scope": "default",
                 "line": {
                     "start": 116,
@@ -18959,7 +18959,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-drawer-scrollbar-color",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 37,
@@ -19034,7 +19034,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-drawer-scrollbar-hover-color",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 ))",
                 "scope": "default",
                 "line": {
                     "start": 46,
@@ -20684,7 +20684,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-editor-highlighted-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 55%, transparent), k-get-theme-color-var( primary-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 50,
@@ -21209,7 +21209,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-expander-shadow",
-                "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 31,
@@ -26459,7 +26459,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-gantt-nonwork-bg",
-                "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 )",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 ))",
                 "scope": "default",
                 "line": {
                     "start": 29,
@@ -30559,7 +30559,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-grid-sticky-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 404,
@@ -31884,7 +31884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-grid-row-resizer-hover-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 577,
@@ -32084,7 +32084,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-image-editor-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 13,
@@ -32309,7 +32309,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-image-editor-content-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))",
                 "scope": "default",
                 "line": {
                     "start": 42,
@@ -34884,7 +34884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-picker-solid-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 326,
@@ -35951,15 +35951,15 @@
             }
         },
         {
-            "description": "The border color of the valid Input components.\n",
+            "description": "The text color of the Input placeholder.\n",
             "commentRange": {
                 "start": 662,
                 "end": 663
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-input-valid-border",
-                "value": "var( --kendo-valid-border, #{$kendo-valid-border} )",
+                "name": "kendo-input-placeholder-text",
+                "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
                 "scope": "default",
                 "line": {
                     "start": 664,
@@ -35976,15 +35976,15 @@
             }
         },
         {
-            "description": "The text color of the valid Input components.\n",
+            "description": "The opacity of the Input placeholder.\n",
             "commentRange": {
                 "start": 665,
                 "end": 666
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-input-valid-text",
-                "value": "var( --kendo-valid-text, #{$kendo-valid-text} )",
+                "name": "kendo-input-placeholder-opacity",
+                "value": "1",
                 "scope": "default",
                 "line": {
                     "start": 667,
@@ -36001,14 +36001,14 @@
             }
         },
         {
-            "description": "The text color of the Input placeholder.\n",
+            "description": "The color of the Input clear value icon.\n",
             "commentRange": {
                 "start": 669,
                 "end": 670
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-input-placeholder-text",
+                "name": "kendo-input-clear-value-text",
                 "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
                 "scope": "default",
                 "line": {
@@ -36026,69 +36026,19 @@
             }
         },
         {
-            "description": "The opacity of the Input placeholder.\n",
+            "description": "The opacity of the Input clear value icon.\n",
             "commentRange": {
                 "start": 672,
                 "end": 673
             },
-            "context": {
-                "type": "variable",
-                "name": "kendo-input-placeholder-opacity",
-                "value": "1",
-                "scope": "default",
-                "line": {
-                    "start": 674,
-                    "end": 674
-                }
-            },
-            "group": [
-                "input"
-            ],
-            "access": "public",
-            "file": {
-                "path": "input/_variables.scss",
-                "name": "_variables.scss"
-            }
-        },
-        {
-            "description": "The color of the Input clear value icon.\n",
-            "commentRange": {
-                "start": 676,
-                "end": 677
-            },
-            "context": {
-                "type": "variable",
-                "name": "kendo-input-clear-value-text",
-                "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
-                "scope": "default",
-                "line": {
-                    "start": 678,
-                    "end": 678
-                }
-            },
-            "group": [
-                "input"
-            ],
-            "access": "public",
-            "file": {
-                "path": "input/_variables.scss",
-                "name": "_variables.scss"
-            }
-        },
-        {
-            "description": "The opacity of the Input clear value icon.\n",
-            "commentRange": {
-                "start": 679,
-                "end": 680
-            },
             "context": {
                 "type": "variable",
                 "name": "kendo-input-clear-value-opacity",
                 "value": ".6",
                 "scope": "default",
                 "line": {
-                    "start": 681,
-                    "end": 681
+                    "start": 674,
+                    "end": 674
                 }
             },
             "group": [
@@ -36103,8 +36053,8 @@
         {
             "description": "The color of the hovered Input clear value icon.\n",
             "commentRange": {
-                "start": 682,
-                "end": 683
+                "start": 675,
+                "end": 676
             },
             "context": {
                 "type": "variable",
@@ -36112,8 +36062,8 @@
                 "value": "inherit",
                 "scope": "default",
                 "line": {
-                    "start": 684,
-                    "end": 684
+                    "start": 677,
+                    "end": 677
                 }
             },
             "group": [
@@ -36128,8 +36078,8 @@
         {
             "description": "The opacity of the hovered Input clear value icon.\n",
             "commentRange": {
-                "start": 685,
-                "end": 686
+                "start": 678,
+                "end": 679
             },
             "context": {
                 "type": "variable",
@@ -36137,8 +36087,8 @@
                 "value": "1",
                 "scope": "default",
                 "line": {
-                    "start": 687,
-                    "end": 687
+                    "start": 680,
+                    "end": 680
                 }
             },
             "group": [
@@ -37234,7 +37184,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-list-item-disabled-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 261,
@@ -40634,7 +40584,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-media-player-titlebar-bg",
-                "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 )",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 ))",
                 "scope": "default",
                 "line": {
                     "start": 46,
@@ -43284,7 +43234,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-orgchart-node-group-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 63,
@@ -43934,7 +43884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-orgchart-line-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 149,
@@ -50409,7 +50359,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-progressbar-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 70,
@@ -50434,7 +50384,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-progressbar-disabled-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 73,
@@ -51759,7 +51709,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-radio-disabled-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 97,
@@ -51784,7 +51734,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-radio-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 100,
@@ -55584,7 +55534,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-signature-line-color",
-                "value": "rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 )",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 ))",
                 "scope": "default",
                 "line": {
                     "start": 41,
@@ -55609,7 +55559,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-signature-line-disabled-color",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 44,
@@ -55884,7 +55834,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-skeleton-item-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))",
                 "scope": "default",
                 "line": {
                     "start": 20,
@@ -56159,7 +56109,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-track-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 36,
@@ -56209,7 +56159,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-track-hover-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 42,
@@ -56259,7 +56209,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-track-focus-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 48,
@@ -56859,7 +56809,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-disabled-text",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 ))",
                 "scope": "default",
                 "line": {
                     "start": 127,
@@ -56884,7 +56834,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-track-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 130,
@@ -56909,7 +56859,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-selection-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                 "scope": "default",
                 "line": {
                     "start": 133,
@@ -56934,7 +56884,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-slider-thumb-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 136,
@@ -57259,7 +57209,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-split-button-arrow-delimiter-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 32,
@@ -61159,7 +61109,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-stepper-indicator-done-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 122,
@@ -62234,7 +62184,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-track-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 73,
@@ -62409,7 +62359,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-thumb-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 97,
@@ -62459,7 +62409,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-thumb-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 103,
@@ -62709,7 +62659,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-track-disabled-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 138,
@@ -62984,7 +62934,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-thumb-disabled-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 174,
@@ -63884,7 +63834,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-selected-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 ))",
                 "scope": "default",
                 "line": {
                     "start": 171,
@@ -63959,7 +63909,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-selected-hover-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 181,
@@ -66659,7 +66609,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-taskboard-drag-placeholder-bg",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))",
                 "scope": "default",
                 "line": {
                     "start": 205,
@@ -68134,7 +68084,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-timeline-track-border-color",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 68,
@@ -68709,7 +68659,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-timeline-card-body-scroll-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 141,
@@ -69559,7 +69509,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-toolbar-separator-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                 "scope": "default",
                 "line": {
                     "start": 60,
@@ -72293,7 +72243,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-upload-dropzone-border",
-                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
                     "start": 44,
@@ -78302,7 +78252,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-breadcrumb-focus-shadow",
-                        "value": "0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "0 0 0 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 63,
@@ -84463,7 +84413,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-chart-major-lines",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 130,
@@ -84488,7 +84438,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-chart-minor-lines",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 133,
@@ -86469,7 +86419,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-chat-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 155,
@@ -87550,7 +87500,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-disabled-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 116,
@@ -87575,7 +87525,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 119,
@@ -87600,7 +87550,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-disabled-checked-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 123,
@@ -87700,7 +87650,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-disabled-indeterminate-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color( neutral, 60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 ))",
                         "scope": "default",
                         "line": {
                             "start": 136,
@@ -87725,7 +87675,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-disabled-indeterminate-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 139,
@@ -88506,7 +88456,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-chip-outline-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -89337,7 +89287,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-focus-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 52,
@@ -89487,7 +89437,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-canvas-rectangle-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 71,
@@ -89612,7 +89562,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-slider-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 87,
@@ -90324,7 +90274,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-preview-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 17,
@@ -90349,7 +90299,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-preview-hover-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 20,
@@ -90730,7 +90680,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-editor-focus-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 42,
@@ -91386,7 +91336,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-palette-tile-hover-outline",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 37,
@@ -92748,7 +92698,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-dock-manager-dock-preview-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))",
                         "scope": "default",
                         "line": {
                             "start": 116,
@@ -93610,7 +93560,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-drawer-scrollbar-color",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 37,
@@ -93685,7 +93635,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-drawer-scrollbar-hover-color",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 ))",
                         "scope": "default",
                         "line": {
                             "start": 46,
@@ -95353,7 +95303,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-editor-highlighted-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 55%, transparent), k-get-theme-color-var( primary-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 50,
@@ -95890,7 +95840,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-expander-shadow",
-                        "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 31,
@@ -101176,7 +101126,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-gantt-nonwork-bg",
-                        "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 )",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 ))",
                         "scope": "default",
                         "line": {
                             "start": 29,
@@ -105282,7 +105232,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-grid-sticky-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 404,
@@ -106607,7 +106557,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-grid-row-resizer-hover-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 577,
@@ -106819,7 +106769,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-image-editor-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 13,
@@ -107044,7 +106994,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-image-editor-content-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))",
                         "scope": "default",
                         "line": {
                             "start": 42,
@@ -109625,7 +109575,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-picker-solid-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 326,
@@ -110692,15 +110642,15 @@
                     }
                 },
                 {
-                    "description": "The border color of the valid Input components.\n",
+                    "description": "The text color of the Input placeholder.\n",
                     "commentRange": {
                         "start": 662,
                         "end": 663
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-input-valid-border",
-                        "value": "var( --kendo-valid-border, #{$kendo-valid-border} )",
+                        "name": "kendo-input-placeholder-text",
+                        "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
                         "scope": "default",
                         "line": {
                             "start": 664,
@@ -110717,15 +110667,15 @@
                     }
                 },
                 {
-                    "description": "The text color of the valid Input components.\n",
+                    "description": "The opacity of the Input placeholder.\n",
                     "commentRange": {
                         "start": 665,
                         "end": 666
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-input-valid-text",
-                        "value": "var( --kendo-valid-text, #{$kendo-valid-text} )",
+                        "name": "kendo-input-placeholder-opacity",
+                        "value": "1",
                         "scope": "default",
                         "line": {
                             "start": 667,
@@ -110742,14 +110692,14 @@
                     }
                 },
                 {
-                    "description": "The text color of the Input placeholder.\n",
+                    "description": "The color of the Input clear value icon.\n",
                     "commentRange": {
                         "start": 669,
                         "end": 670
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-input-placeholder-text",
+                        "name": "kendo-input-clear-value-text",
                         "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
                         "scope": "default",
                         "line": {
@@ -110767,69 +110717,19 @@
                     }
                 },
                 {
-                    "description": "The opacity of the Input placeholder.\n",
+                    "description": "The opacity of the Input clear value icon.\n",
                     "commentRange": {
                         "start": 672,
                         "end": 673
                     },
-                    "context": {
-                        "type": "variable",
-                        "name": "kendo-input-placeholder-opacity",
-                        "value": "1",
-                        "scope": "default",
-                        "line": {
-                            "start": 674,
-                            "end": 674
-                        }
-                    },
-                    "group": [
-                        "input"
-                    ],
-                    "access": "public",
-                    "file": {
-                        "path": "input/_variables.scss",
-                        "name": "_variables.scss"
-                    }
-                },
-                {
-                    "description": "The color of the Input clear value icon.\n",
-                    "commentRange": {
-                        "start": 676,
-                        "end": 677
-                    },
-                    "context": {
-                        "type": "variable",
-                        "name": "kendo-input-clear-value-text",
-                        "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
-                        "scope": "default",
-                        "line": {
-                            "start": 678,
-                            "end": 678
-                        }
-                    },
-                    "group": [
-                        "input"
-                    ],
-                    "access": "public",
-                    "file": {
-                        "path": "input/_variables.scss",
-                        "name": "_variables.scss"
-                    }
-                },
-                {
-                    "description": "The opacity of the Input clear value icon.\n",
-                    "commentRange": {
-                        "start": 679,
-                        "end": 680
-                    },
                     "context": {
                         "type": "variable",
                         "name": "kendo-input-clear-value-opacity",
                         "value": ".6",
                         "scope": "default",
                         "line": {
-                            "start": 681,
-                            "end": 681
+                            "start": 674,
+                            "end": 674
                         }
                     },
                     "group": [
@@ -110844,8 +110744,8 @@
                 {
                     "description": "The color of the hovered Input clear value icon.\n",
                     "commentRange": {
-                        "start": 682,
-                        "end": 683
+                        "start": 675,
+                        "end": 676
                     },
                     "context": {
                         "type": "variable",
@@ -110853,8 +110753,8 @@
                         "value": "inherit",
                         "scope": "default",
                         "line": {
-                            "start": 684,
-                            "end": 684
+                            "start": 677,
+                            "end": 677
                         }
                     },
                     "group": [
@@ -110869,8 +110769,8 @@
                 {
                     "description": "The opacity of the hovered Input clear value icon.\n",
                     "commentRange": {
-                        "start": 685,
-                        "end": 686
+                        "start": 678,
+                        "end": 679
                     },
                     "context": {
                         "type": "variable",
@@ -110878,8 +110778,8 @@
                         "value": "1",
                         "scope": "default",
                         "line": {
-                            "start": 687,
-                            "end": 687
+                            "start": 680,
+                            "end": 680
                         }
                     },
                     "group": [
@@ -111981,7 +111881,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-list-item-disabled-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 261,
@@ -115417,7 +115317,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-media-player-titlebar-bg",
-                        "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 )",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 ))",
                         "scope": "default",
                         "line": {
                             "start": 46,
@@ -118091,7 +117991,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-orgchart-node-group-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 63,
@@ -118741,7 +118641,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-orgchart-line-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 149,
@@ -125264,7 +125164,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-progressbar-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 70,
@@ -125289,7 +125189,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-progressbar-disabled-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 73,
@@ -126626,7 +126526,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-radio-disabled-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 97,
@@ -126651,7 +126551,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-radio-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 100,
@@ -130481,7 +130381,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-signature-line-color",
-                        "value": "rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 )",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 ))",
                         "scope": "default",
                         "line": {
                             "start": 41,
@@ -130506,7 +130406,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-signature-line-disabled-color",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 44,
@@ -130787,7 +130687,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-skeleton-item-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))",
                         "scope": "default",
                         "line": {
                             "start": 20,
@@ -131068,7 +130968,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-track-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 36,
@@ -131118,7 +131018,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-track-hover-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 42,
@@ -131168,7 +131068,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-track-focus-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 48,
@@ -131768,7 +131668,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-disabled-text",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 ))",
                         "scope": "default",
                         "line": {
                             "start": 127,
@@ -131793,7 +131693,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-track-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 130,
@@ -131818,7 +131718,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-selection-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))",
                         "scope": "default",
                         "line": {
                             "start": 133,
@@ -131843,7 +131743,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-slider-thumb-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 136,
@@ -132174,7 +132074,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-split-button-arrow-delimiter-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 32,
@@ -136092,7 +135992,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-stepper-indicator-done-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 122,
@@ -137173,7 +137073,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-track-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 73,
@@ -137348,7 +137248,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-thumb-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 97,
@@ -137398,7 +137298,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-thumb-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 103,
@@ -137648,7 +137548,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-track-disabled-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 138,
@@ -137923,7 +137823,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-thumb-disabled-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 174,
@@ -138829,7 +138729,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-selected-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 ))",
                         "scope": "default",
                         "line": {
                             "start": 171,
@@ -138904,7 +138804,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-selected-hover-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 181,
@@ -141616,7 +141516,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-taskboard-drag-placeholder-bg",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 ))",
                         "scope": "default",
                         "line": {
                             "start": 205,
@@ -143109,7 +143009,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-timeline-track-border-color",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 68,
@@ -143684,7 +143584,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-timeline-card-body-scroll-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 141,
@@ -144540,7 +144440,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-toolbar-separator-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))",
                         "scope": "default",
                         "line": {
                             "start": 60,
@@ -146770,7 +146670,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-upload-dropzone-border",
-                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
+                        "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
                             "start": 44,