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

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

@@ -3758,7 +3758,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,
@@ -9883,7 +9883,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,
@@ -9908,7 +9908,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,
@@ -11883,7 +11883,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,
@@ -12958,7 +12958,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,
@@ -12983,7 +12983,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,
@@ -13008,7 +13008,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,
@@ -13108,7 +13108,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,
@@ -13133,7 +13133,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,
@@ -13908,7 +13908,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,
@@ -14733,7 +14733,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,
@@ -14883,7 +14883,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,
@@ -15008,7 +15008,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,
@@ -15683,7 +15683,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,
@@ -15708,7 +15708,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,
@@ -16108,7 +16108,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,
@@ -16758,7 +16758,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,
@@ -18108,7 +18108,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,
@@ -18958,7 +18958,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,
@@ -19033,7 +19033,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,
@@ -20683,7 +20683,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,
@@ -21208,7 +21208,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,
@@ -26482,7 +26482,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,
@@ -30582,7 +30582,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,
@@ -31907,7 +31907,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,
@@ -32107,7 +32107,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,
@@ -32332,7 +32332,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,
@@ -34907,7 +34907,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,
@@ -35974,15 +35974,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,
@@ -35999,15 +35999,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,
@@ -36024,14 +36024,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": {
@@ -36049,69 +36049,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": [
@@ -36126,8 +36076,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 682,
-            "end": 683
+            "start": 675,
+            "end": 676
         },
         "context": {
             "type": "variable",
@@ -36135,8 +36085,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 684,
-                "end": 684
+                "start": 677,
+                "end": 677
             }
         },
         "group": [
@@ -36151,8 +36101,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 685,
-            "end": 686
+            "start": 678,
+            "end": 679
         },
         "context": {
             "type": "variable",
@@ -36160,8 +36110,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 687,
-                "end": 687
+                "start": 680,
+                "end": 680
             }
         },
         "group": [
@@ -37257,7 +37207,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,
@@ -40657,7 +40607,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,
@@ -43307,7 +43257,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,
@@ -43957,7 +43907,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,
@@ -50432,7 +50382,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,
@@ -50457,7 +50407,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,
@@ -51782,7 +51732,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,
@@ -51807,7 +51757,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,
@@ -55607,7 +55557,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,
@@ -55632,7 +55582,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,
@@ -55907,7 +55857,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,
@@ -56182,7 +56132,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,
@@ -56232,7 +56182,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,
@@ -56282,7 +56232,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,
@@ -56882,7 +56832,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,
@@ -56907,7 +56857,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,
@@ -56932,7 +56882,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,
@@ -56957,7 +56907,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,
@@ -57330,7 +57280,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,
@@ -61230,7 +61180,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,
@@ -62305,7 +62255,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,
@@ -62480,7 +62430,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,
@@ -62530,7 +62480,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,
@@ -62780,7 +62730,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,
@@ -63055,7 +63005,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,
@@ -63955,7 +63905,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,
@@ -64030,7 +63980,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,
@@ -66730,7 +66680,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,
@@ -68205,7 +68155,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,
@@ -68780,7 +68730,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,
@@ -69630,7 +69580,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,
@@ -72364,7 +72314,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,