@progress/kendo-theme-fluent 7.1.0-dev.8 → 7.1.0

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

@@ -1008,7 +1008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-actionsheet-item-icon-color",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 117,
@@ -1958,7 +1958,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -2008,7 +2008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-brand-colors",
-            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: neutral,\n    tertiary: tertiary,\n )",
+            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n )",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -2183,7 +2183,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-avatar-brand-colors",
-            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: neutral,\n    tertiary: tertiary,\n )",
+            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n )",
             "scope": "default",
             "line": {
                 "start": 28,
@@ -2758,7 +2758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-badge-brand-colors",
-            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: neutral,\n    tertiary: tertiary,\n )",
+            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n )",
             "scope": "default",
             "line": {
                 "start": 102,
@@ -3283,7 +3283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-bottom-nav-brand-colors",
-            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: neutral,\n    tertiary: tertiary,\n )",
+            "value": "(\n    primary: primary,\n    error: error,\n    success: success,\n    info: info,\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n )",
             "scope": "default",
             "line": {
                 "start": 67,
@@ -3758,7 +3758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-focus-shadow",
-            "value": "0 0 0 1px k-get-theme-color-var( neutral-30 )",
+            "value": "0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 63,
@@ -4133,7 +4133,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-hover-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 111,
@@ -4233,7 +4233,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-active-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 123,
@@ -4283,7 +4283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-focus-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -4458,7 +4458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-selected-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 150,
@@ -6083,7 +6083,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-header-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -6833,7 +6833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-today-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 145,
@@ -6858,7 +6858,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-today-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 148,
@@ -6883,7 +6883,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-today-hover-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 151,
@@ -6908,7 +6908,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-today-hover-bg",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -7308,7 +7308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-cell-focus-shadow",
-            "value": "inset 0 0 0 1px k-get-theme-color-var( neutral-130)",
+            "value": "inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))",
             "scope": "default",
             "line": {
                 "start": 209,
@@ -7408,7 +7408,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-navigation-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 225,
@@ -7583,7 +7583,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-range-bg",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 256,
@@ -7633,7 +7633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-range-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 262,
@@ -7658,7 +7658,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-start-range-hover-shadow",
-            "value": "inset 1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 )",
+            "value": "inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 265,
@@ -7683,7 +7683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-mid-range-hover-shadow",
-            "value": "inset 0 -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 )",
+            "value": "inset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 268,
@@ -7708,7 +7708,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-calendar-end-range-hover-shadow",
-            "value": "inset -1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 )",
+            "value": "inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 271,
@@ -8683,7 +8683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-card-header-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 86,
@@ -9483,7 +9483,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-a",
-            "value": "k-get-theme-color-var( series-a-100 )",
+            "value": "if($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 ))",
             "scope": "default",
             "line": {
                 "start": 6,
@@ -9508,7 +9508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-b",
-            "value": "k-get-theme-color-var( series-b-100 )",
+            "value": "if($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 ))",
             "scope": "default",
             "line": {
                 "start": 14,
@@ -9533,7 +9533,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-c",
-            "value": "k-get-theme-color-var( series-c-100 )",
+            "value": "if($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 ))",
             "scope": "default",
             "line": {
                 "start": 22,
@@ -9558,7 +9558,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-d",
-            "value": "k-get-theme-color-var( series-d-100 )",
+            "value": "if($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -9583,7 +9583,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-e",
-            "value": "k-get-theme-color-var( series-e-100 )",
+            "value": "if($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 ))",
             "scope": "default",
             "line": {
                 "start": 38,
@@ -9608,7 +9608,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-f",
-            "value": "k-get-theme-color-var( series-f-100 )",
+            "value": "if($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 ))",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -9883,7 +9883,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-major-lines",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), 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": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 133,
@@ -10083,7 +10083,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-tooltip-color",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 158,
@@ -10108,7 +10108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-tooltip-color-inverse",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 161,
@@ -10133,7 +10133,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-crosshair-background",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 165,
@@ -10158,7 +10158,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-crosshair-shared-tooltip-color",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 168,
@@ -10233,7 +10233,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-notes-background",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 178,
@@ -10308,7 +10308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-handle-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 188,
@@ -10458,7 +10458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-error-bars-background",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 207,
@@ -10683,7 +10683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-treemap-title-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 237,
@@ -10708,7 +10708,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-treemap-title-text",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 240,
@@ -11833,7 +11833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 149,
@@ -11858,7 +11858,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 152,
@@ -11883,7 +11883,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 155,
@@ -12058,7 +12058,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-alt-bubble-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 178,
@@ -12233,7 +12233,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-quick-reply-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 200,
@@ -12258,7 +12258,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-quick-reply-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 203,
@@ -12283,7 +12283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-quick-reply-hover-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 207,
@@ -12333,7 +12333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chat-quick-reply-hover-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 213,
@@ -12458,7 +12458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -12508,7 +12508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-hover-text",
-            "value": "k-get-theme-color( neutral, 130 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 ))",
             "scope": "default",
             "line": {
                 "start": 55,
@@ -12558,7 +12558,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 62,
@@ -12583,7 +12583,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 65,
@@ -12633,7 +12633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-hover-checked-bg",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 72,
@@ -12658,7 +12658,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-hover-checked-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 75,
@@ -12758,7 +12758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-outline",
-            "value": "1px solid k-get-theme-color-var( neutral-130 )",
+            "value": "1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 88,
@@ -12808,7 +12808,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-indeterminate-text",
-            "value": "k-get-theme-color( primary, 100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 ))",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -12833,7 +12833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-indeterminate-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 99,
@@ -12883,7 +12883,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-hover-indeterminate-text",
-            "value": "k-get-theme-color( primary, 110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 ))",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -12908,7 +12908,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-hover-indeterminate-border",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 109,
@@ -12958,7 +12958,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-text",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), 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": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), 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": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 123,
@@ -13033,7 +13033,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-checked-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 126,
@@ -13058,7 +13058,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-checked-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -13108,7 +13108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-indeterminate-text",
-            "value": "k-get-theme-color( neutral, 60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), 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": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 139,
@@ -13608,7 +13608,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-ripple-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 215,
@@ -13908,7 +13908,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-disabled-border",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), 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": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), 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": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -14983,7 +14983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-slider-border-width",
-            "value": "1px",
+            "value": "if($kendo-enable-color-system, 0, 1px)",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -15008,7 +15008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-slider-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 87,
@@ -15208,7 +15208,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-draghandle-border",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 113,
@@ -15233,7 +15233,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-draghandle-shadow",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -15283,7 +15283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-draghandle-focus-border",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 122,
@@ -15308,7 +15308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-draghandle-focus-shadow",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -15333,7 +15333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-gradient-draghandle-hover-shadow",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 128,
@@ -15683,7 +15683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-preview-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), 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": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 20,
@@ -15733,7 +15733,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-preview-no-color-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 24,
@@ -15758,7 +15758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-preview-no-color-text",
-            "value": "k-get-theme-color( error, 190 )",
+            "value": "if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 ))",
             "scope": "default",
             "line": {
                 "start": 27,
@@ -15799,6 +15799,31 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The global default Colors map.\n",
+        "commentRange": {
+            "start": 179,
+            "end": 180
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-colors",
+            "value": "$_default-colors",
+            "scope": "default",
+            "line": {
+                "start": 181,
+                "end": 181
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
     {
         "description": "The spacer of the ColorEditor.\n",
         "commentRange": {
@@ -16083,7 +16108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-editor-focus-border",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 42,
@@ -16683,7 +16708,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-palette-tile-focus-outline",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 31,
@@ -16708,7 +16733,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-palette-tile-focus-shadow",
-            "value": "inset 0 0 0 2px $kendo-color-white",
+            "value": "inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 34,
@@ -16733,7 +16758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-palette-tile-hover-outline",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 37,
@@ -16758,7 +16783,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-color-palette-tile-hover-shadow",
-            "value": "inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white",
+            "value": "inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -17433,7 +17458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-manager-pane-header-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 31,
@@ -17733,7 +17758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-manager-unpinned-container-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -17833,7 +17858,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-indicator-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -17958,7 +17983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-indicator-hover-bg",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 100,
@@ -17983,7 +18008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-indicator-hover-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 103,
@@ -18083,7 +18108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-manager-dock-preview-bg",
-            "value": "color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)",
+            "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))",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -18108,7 +18133,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-manager-dock-preview-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 119,
@@ -18658,7 +18683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drop-hint-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 72,
@@ -18933,7 +18958,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-scrollbar-color",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 37,
@@ -18958,7 +18983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-scrollbar-bg",
-            "value": "k-get-theme-color-var( neutral-40 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 ))",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -19008,7 +19033,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-scrollbar-hover-color",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -19283,7 +19308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-ripple-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -19358,7 +19383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-icon-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 93,
@@ -19408,7 +19433,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-hover-text",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 100,
@@ -19433,7 +19458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-hover-icon-text",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 103,
@@ -19508,7 +19533,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-focus-shadow",
-            "value": "inset 0 0 0 1px k-get-theme-color-var( neutral-130 )",
+            "value": "inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))",
             "scope": "default",
             "line": {
                 "start": 113,
@@ -19608,7 +19633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-selected-text",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 126,
@@ -19633,7 +19658,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-drawer-item-selected-icon-text",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -19958,7 +19983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -19975,7 +20000,7 @@
         }
     },
     {
-        "description": "The text color of the DropZone.\n",
+        "description": "Text color of the dropzone.\n",
         "commentRange": {
             "start": 31,
             "end": 32
@@ -20058,7 +20083,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-icon-text",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 43,
@@ -20075,7 +20100,7 @@
         }
     },
     {
-        "description": "The text color of the hovered DropZone icon.\n",
+        "description": "Text color of the icon when the dropzone is hovered.\n",
         "commentRange": {
             "start": 44,
             "end": 45
@@ -20083,7 +20108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-icon-hover-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -20608,7 +20633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-selected-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -20633,7 +20658,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-selected-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -20658,7 +20683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-highlighted-bg",
-            "value": "k-get-theme-color-var( primary-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 ))",
             "scope": "default",
             "line": {
                 "start": 50,
@@ -20733,7 +20758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-resize-handle-border",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 60,
@@ -20758,7 +20783,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-resize-handle-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 63,
@@ -20783,7 +20808,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-selectednode-outline-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 67,
@@ -21133,7 +21158,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 25,
@@ -21183,7 +21208,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-shadow",
-            "value": "inset 0 0 0 2px k-get-theme-color-var( neutral-30 )",
+            "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 31,
@@ -21358,7 +21383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-focus-outline",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))",
             "scope": "default",
             "line": {
                 "start": 55,
@@ -21408,7 +21433,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-focus-shadow",
-            "value": "inset 0px 0px 0px 2px k-get-theme-color-var( neutral-130 )",
+            "value": "inset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))",
             "scope": "default",
             "line": {
                 "start": 62,
@@ -21483,7 +21508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-header-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 73,
@@ -21533,7 +21558,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-header-hover-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 80,
@@ -21558,7 +21583,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-expander-title-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -23282,7 +23307,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-filter-preview-field-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 27,
@@ -23307,7 +23332,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-filter-preview-operator-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -23357,7 +23382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-filter-toolbar-focus-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 38,
@@ -24382,7 +24407,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -24432,7 +24457,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 160,
@@ -24507,7 +24532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-hover-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 169,
@@ -24532,7 +24557,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 172,
@@ -24582,7 +24607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-focus-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 178,
@@ -24657,7 +24682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-active-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 187,
@@ -25657,7 +25682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-form-hint-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 92,
@@ -26207,7 +26232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fieldset-legend-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 174,
@@ -26457,7 +26482,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-nonwork-bg",
-            "value": "rgba( $kendo-color-black, .04 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 )",
             "scope": "default",
             "line": {
                 "start": 29,
@@ -26582,7 +26607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-line-selected-fill",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 45,
@@ -26657,7 +26682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-dot-bg",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 55,
@@ -26682,7 +26707,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-dot-border",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 58,
@@ -26707,7 +26732,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-dot-hover-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 61,
@@ -26732,7 +26757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-dot-hover-border",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 64,
@@ -26807,7 +26832,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-milestone-selected-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 74,
@@ -26832,7 +26857,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-milestone-selected-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 77,
@@ -26857,7 +26882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-summary-bg",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -26882,7 +26907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-summary-progress-bg",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -26907,7 +26932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-summary-selected-bg",
-            "value": "k-get-theme-color-var( primary-50 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))",
             "scope": "default",
             "line": {
                 "start": 87,
@@ -26932,7 +26957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-summary-progress-selected-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 90,
@@ -27032,7 +27057,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-bg",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 103,
@@ -27057,7 +27082,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -27107,7 +27132,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-progress-bg",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 112,
@@ -27132,7 +27157,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-progress-hover-bg",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 115,
@@ -27157,7 +27182,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-selected-bg",
-            "value": "k-get-theme-color-var( primary-50 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))",
             "scope": "default",
             "line": {
                 "start": 118,
@@ -27182,7 +27207,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-selected-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 121,
@@ -27232,7 +27257,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-task-progress-selected-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 127,
@@ -27682,7 +27707,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-planned-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -27707,7 +27732,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-planned-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 192,
@@ -27732,7 +27757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-planned-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 195,
@@ -27757,7 +27782,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-delayed-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 199,
@@ -27782,7 +27807,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-delayed-bg",
-            "value": "k-get-theme-color-var( error-160 )",
+            "value": "if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 ))",
             "scope": "default",
             "line": {
                 "start": 202,
@@ -27807,7 +27832,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-delayed-bg-lighter",
-            "value": "k-get-theme-color-var( error-110)",
+            "value": "if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110))",
             "scope": "default",
             "line": {
                 "start": 205,
@@ -27832,7 +27857,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-delayed-hover-bg",
-            "value": "k-get-theme-color-var( error-190 )",
+            "value": "if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))",
             "scope": "default",
             "line": {
                 "start": 208,
@@ -27857,7 +27882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-advanced-bg",
-            "value": "k-get-theme-color-var( success-160 )",
+            "value": "if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 ))",
             "scope": "default",
             "line": {
                 "start": 212,
@@ -27882,7 +27907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-advanced-bg-lighter",
-            "value": "k-get-theme-color-var( success-110 )",
+            "value": "if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 ))",
             "scope": "default",
             "line": {
                 "start": 215,
@@ -27907,7 +27932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-advanced-hover-bg",
-            "value": "k-get-theme-color-var( success-190 )",
+            "value": "if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 ))",
             "scope": "default",
             "line": {
                 "start": 218,
@@ -27932,7 +27957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-action-on-offset-text",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 222,
@@ -28057,7 +28082,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-validation-tooltip-valid-border",
-            "value": "k-get-theme-color-var( success-100 )",
+            "value": "if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 ))",
             "scope": "default",
             "line": {
                 "start": 238,
@@ -28082,7 +28107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-gantt-validation-tooltip-invalid-border",
-            "value": "k-get-theme-color-var( error-100 )",
+            "value": "if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))",
             "scope": "default",
             "line": {
                 "start": 241,
@@ -29282,7 +29307,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-header-icon-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 239,
@@ -30057,7 +30082,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-sort-indicator-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 339,
@@ -30082,7 +30107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-sort-indicator-order-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 342,
@@ -30107,7 +30132,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-sorted-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 345,
@@ -30357,7 +30382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-group-indicator-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 377,
@@ -30382,7 +30407,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-group-indicator-icon-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 380,
@@ -30457,7 +30482,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-group-drop-hint-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 391,
@@ -30557,7 +30582,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-sticky-border",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 404,
@@ -30807,7 +30832,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-sticky-selected-hover-bg",
-            "value": "$kendo-grid-selected-hover-bg",
+            "value": "if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg)",
             "scope": "default",
             "line": {
                 "start": 437,
@@ -31882,7 +31907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-hover-bg",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 577,
@@ -31907,7 +31932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-active-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 580,
@@ -32082,7 +32107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-image-editor-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 13,
@@ -32101,8 +32126,8 @@
     {
         "description": "Vertical margin of the imageeditor.\n",
         "commentRange": {
-            "start": 15,
-            "end": 16
+            "start": 14,
+            "end": 15
         },
         "context": {
             "type": "variable",
@@ -32110,8 +32135,8 @@
             "value": "0",
             "scope": "default",
             "line": {
-                "start": 17,
-                "end": 17
+                "start": 16,
+                "end": 16
             }
         },
         "group": [
@@ -32126,8 +32151,8 @@
     {
         "description": "Horizontal margin of the imageeditor.\n",
         "commentRange": {
-            "start": 18,
-            "end": 19
+            "start": 17,
+            "end": 18
         },
         "context": {
             "type": "variable",
@@ -32135,8 +32160,8 @@
             "value": "0",
             "scope": "default",
             "line": {
-                "start": 20,
-                "end": 20
+                "start": 19,
+                "end": 19
             }
         },
         "group": [
@@ -32151,8 +32176,8 @@
     {
         "description": "Vertical padding of the imageeditor.\n",
         "commentRange": {
-            "start": 21,
-            "end": 22
+            "start": 20,
+            "end": 21
         },
         "context": {
             "type": "variable",
@@ -32160,8 +32185,8 @@
             "value": "0",
             "scope": "default",
             "line": {
-                "start": 23,
-                "end": 23
+                "start": 22,
+                "end": 22
             }
         },
         "group": [
@@ -32176,8 +32201,8 @@
     {
         "description": "Horizontal padding of the imageeditor.\n",
         "commentRange": {
-            "start": 24,
-            "end": 25
+            "start": 23,
+            "end": 24
         },
         "context": {
             "type": "variable",
@@ -32185,8 +32210,8 @@
             "value": "0",
             "scope": "default",
             "line": {
-                "start": 26,
-                "end": 26
+                "start": 25,
+                "end": 25
             }
         },
         "group": [
@@ -32201,8 +32226,8 @@
     {
         "description": "Border width of the imageeditor.\n",
         "commentRange": {
-            "start": 28,
-            "end": 29
+            "start": 27,
+            "end": 28
         },
         "context": {
             "type": "variable",
@@ -32210,8 +32235,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 30,
-                "end": 30
+                "start": 29,
+                "end": 29
             }
         },
         "group": [
@@ -32226,8 +32251,8 @@
     {
         "description": "Font size of the imageeditor.\n",
         "commentRange": {
-            "start": 31,
-            "end": 32
+            "start": 30,
+            "end": 31
         },
         "context": {
             "type": "variable",
@@ -32235,8 +32260,8 @@
             "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
-                "start": 33,
-                "end": 33
+                "start": 32,
+                "end": 32
             }
         },
         "group": [
@@ -32251,8 +32276,8 @@
     {
         "description": "Line height of the imageeditor.\n",
         "commentRange": {
-            "start": 34,
-            "end": 35
+            "start": 33,
+            "end": 34
         },
         "context": {
             "type": "variable",
@@ -32260,8 +32285,8 @@
             "value": "var( --kendo-line-height, inherit )",
             "scope": "default",
             "line": {
-                "start": 36,
-                "end": 36
+                "start": 35,
+                "end": 35
             }
         },
         "group": [
@@ -32276,8 +32301,8 @@
     {
         "description": "Font family of the imageeditor.\n",
         "commentRange": {
-            "start": 37,
-            "end": 38
+            "start": 36,
+            "end": 37
         },
         "context": {
             "type": "variable",
@@ -32285,8 +32310,8 @@
             "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
-                "start": 39,
-                "end": 39
+                "start": 38,
+                "end": 38
             }
         },
         "group": [
@@ -32301,17 +32326,17 @@
     {
         "description": "Imageeditor content background color.\n",
         "commentRange": {
-            "start": 41,
-            "end": 42
+            "start": 40,
+            "end": 41
         },
         "context": {
             "type": "variable",
             "name": "kendo-image-editor-content-bg",
-            "value": "k-get-theme-color-var( neutral-50 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
             "scope": "default",
             "line": {
-                "start": 43,
-                "end": 43
+                "start": 42,
+                "end": 42
             }
         },
         "group": [
@@ -32326,8 +32351,8 @@
     {
         "description": "Imageeditor content text color.\n",
         "commentRange": {
-            "start": 44,
-            "end": 45
+            "start": 43,
+            "end": 44
         },
         "context": {
             "type": "variable",
@@ -32335,8 +32360,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 46,
-                "end": 46
+                "start": 45,
+                "end": 45
             }
         },
         "group": [
@@ -32351,8 +32376,8 @@
     {
         "description": "Imageeditor content border color.\n",
         "commentRange": {
-            "start": 47,
-            "end": 48
+            "start": 46,
+            "end": 47
         },
         "context": {
             "type": "variable",
@@ -32360,8 +32385,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 49,
-                "end": 49
+                "start": 48,
+                "end": 48
             }
         },
         "group": [
@@ -32376,8 +32401,8 @@
     {
         "description": "Imageeditor content border width.\n",
         "commentRange": {
-            "start": 50,
-            "end": 51
+            "start": 49,
+            "end": 50
         },
         "context": {
             "type": "variable",
@@ -32385,8 +32410,8 @@
             "value": "0",
             "scope": "default",
             "line": {
-                "start": 52,
-                "end": 52
+                "start": 51,
+                "end": 51
             }
         },
         "group": [
@@ -32401,8 +32426,8 @@
     {
         "description": "Imageeditor action pane background color.\n",
         "commentRange": {
-            "start": 54,
-            "end": 55
+            "start": 53,
+            "end": 54
         },
         "context": {
             "type": "variable",
@@ -32410,8 +32435,8 @@
             "value": "var( --kendo-component-bg, inherit )",
             "scope": "default",
             "line": {
-                "start": 56,
-                "end": 56
+                "start": 55,
+                "end": 55
             }
         },
         "group": [
@@ -32426,8 +32451,8 @@
     {
         "description": "Imageeditor action pane text color.\n",
         "commentRange": {
-            "start": 57,
-            "end": 58
+            "start": 56,
+            "end": 57
         },
         "context": {
             "type": "variable",
@@ -32435,8 +32460,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 59,
-                "end": 59
+                "start": 58,
+                "end": 58
             }
         },
         "group": [
@@ -32451,8 +32476,8 @@
     {
         "description": "Imageeditor action pane border.\n",
         "commentRange": {
-            "start": 60,
-            "end": 61
+            "start": 59,
+            "end": 60
         },
         "context": {
             "type": "variable",
@@ -32460,8 +32485,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 62,
-                "end": 62
+                "start": 61,
+                "end": 61
             }
         },
         "group": [
@@ -32476,8 +32501,8 @@
     {
         "description": "Imageeditor action pane vertical padding.\n",
         "commentRange": {
-            "start": 63,
-            "end": 64
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
@@ -32485,8 +32510,8 @@
             "value": "map.get( $kendo-spacing, 3 )",
             "scope": "default",
             "line": {
-                "start": 65,
-                "end": 65
+                "start": 64,
+                "end": 64
             }
         },
         "group": [
@@ -32501,8 +32526,8 @@
     {
         "description": "Imageeditor action pane horizontal padding.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 65,
+            "end": 66
         },
         "context": {
             "type": "variable",
@@ -32510,8 +32535,8 @@
             "value": "map.get( $kendo-spacing, 3 )",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 67,
+                "end": 67
             }
         },
         "group": [
@@ -32526,8 +32551,8 @@
     {
         "description": "Imageeditor action pane width.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 68,
+            "end": 69
         },
         "context": {
             "type": "variable",
@@ -32535,8 +32560,8 @@
             "value": "if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 70,
+                "end": 70
             }
         },
         "group": [
@@ -32551,8 +32576,8 @@
     {
         "description": "Crop background color of the imageeditor.\n",
         "commentRange": {
-            "start": 73,
-            "end": 74
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -32560,8 +32585,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 75,
-                "end": 75
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -32576,8 +32601,8 @@
     {
         "description": "Crop text color of the imageeditor.\n",
         "commentRange": {
-            "start": 76,
-            "end": 77
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
@@ -32585,8 +32610,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 78,
-                "end": 78
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -32601,17 +32626,17 @@
     {
         "description": "Crop border color of the imageeditor.\n",
         "commentRange": {
-            "start": 79,
-            "end": 80
+            "start": 78,
+            "end": 79
         },
         "context": {
             "type": "variable",
             "name": "kendo-image-editor-crop-border",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
-                "start": 81,
-                "end": 81
+                "start": 80,
+                "end": 80
             }
         },
         "group": [
@@ -32626,8 +32651,8 @@
     {
         "description": "Crop overlay background color of the imageeditor.\n",
         "commentRange": {
-            "start": 82,
-            "end": 83
+            "start": 81,
+            "end": 82
         },
         "context": {
             "type": "variable",
@@ -32635,8 +32660,8 @@
             "value": "rgba( $kendo-color-black, .3 )",
             "scope": "default",
             "line": {
-                "start": 84,
-                "end": 84
+                "start": 83,
+                "end": 83
             }
         },
         "group": [
@@ -32651,8 +32676,8 @@
     {
         "description": "Crop border width of the imageeditor.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 84,
+            "end": 85
         },
         "context": {
             "type": "variable",
@@ -32660,8 +32685,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 87
+                "start": 86,
+                "end": 86
             }
         },
         "group": [
@@ -32676,8 +32701,8 @@
     {
         "description": "Crop border style of the imageeditor.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 87,
+            "end": 88
         },
         "context": {
             "type": "variable",
@@ -32685,8 +32710,8 @@
             "value": "dashed",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 89,
+                "end": 89
             }
         },
         "group": [
@@ -32701,8 +32726,8 @@
     {
         "description": "Imageeditor resize handle horizontal margin.\n",
         "commentRange": {
-            "start": 92,
-            "end": 93
+            "start": 91,
+            "end": 92
         },
         "context": {
             "type": "variable",
@@ -32710,8 +32735,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 94,
-                "end": 94
+                "start": 93,
+                "end": 93
             }
         },
         "group": [
@@ -32726,8 +32751,8 @@
     {
         "description": "Imageeditor resize handle vertical margin.\n",
         "commentRange": {
-            "start": 95,
-            "end": 96
+            "start": 94,
+            "end": 95
         },
         "context": {
             "type": "variable",
@@ -32735,8 +32760,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 96,
+                "end": 96
             }
         },
         "group": [
@@ -32751,8 +32776,8 @@
     {
         "description": "Imageeditor resize handle border width.\n",
         "commentRange": {
-            "start": 98,
-            "end": 99
+            "start": 97,
+            "end": 98
         },
         "context": {
             "type": "variable",
@@ -32760,8 +32785,8 @@
             "value": "0 2px 2px 0",
             "scope": "default",
             "line": {
-                "start": 100,
-                "end": 100
+                "start": 99,
+                "end": 99
             }
         },
         "group": [
@@ -32776,8 +32801,8 @@
     {
         "description": "Imageeditor resize handle size.\n",
         "commentRange": {
-            "start": 101,
-            "end": 102
+            "start": 100,
+            "end": 101
         },
         "context": {
             "type": "variable",
@@ -32785,8 +32810,8 @@
             "value": "map.get( $kendo-spacing, 4 )",
             "scope": "default",
             "line": {
-                "start": 103,
-                "end": 103
+                "start": 102,
+                "end": 102
             }
         },
         "group": [
@@ -32801,8 +32826,8 @@
     {
         "description": "Imageeditor resize handle top offset.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -32810,8 +32835,8 @@
             "value": "math.div( $kendo-image-editor-resize-handle-size, 2 )",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -32826,8 +32851,8 @@
     {
         "description": "Imageeditor resize handle left offset.\n",
         "commentRange": {
-            "start": 107,
-            "end": 108
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
@@ -32835,8 +32860,8 @@
             "value": "math.div( $kendo-image-editor-resize-handle-size, 2 )",
             "scope": "default",
             "line": {
-                "start": 109,
-                "end": 109
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -33432,7 +33457,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-solid-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 94,
@@ -33457,7 +33482,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-solid-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 98,
@@ -33482,7 +33507,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-solid-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 102,
@@ -33507,7 +33532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-solid-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -33557,7 +33582,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-solid-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 114,
@@ -33632,7 +33657,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-solid-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 126,
@@ -33807,7 +33832,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -33832,7 +33857,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 158,
@@ -33857,7 +33882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 162,
@@ -33882,7 +33907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 166,
@@ -33907,7 +33932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 170,
@@ -33932,7 +33957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 174,
@@ -33957,7 +33982,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 178,
@@ -33982,7 +34007,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-focus-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 182,
@@ -34007,7 +34032,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 186,
@@ -34182,7 +34207,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 214,
@@ -34207,7 +34232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 218,
@@ -34232,7 +34257,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 222,
@@ -34257,7 +34282,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 226,
@@ -34282,7 +34307,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-hover-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 230,
@@ -34307,7 +34332,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 234,
@@ -34332,7 +34357,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 238,
@@ -34357,7 +34382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-focus-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 242,
@@ -34382,7 +34407,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-flat-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 246,
@@ -34557,7 +34582,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 274,
@@ -34582,7 +34607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 278,
@@ -34607,7 +34632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-border",
-            "value": "k-get-theme-color-var( neutral-130 )!default",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default",
             "scope": "private",
             "line": {
                 "start": 282,
@@ -34632,7 +34657,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 286,
@@ -34657,7 +34682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-hover-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 290,
@@ -34682,7 +34707,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 294,
@@ -34707,7 +34732,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 298,
@@ -34732,7 +34757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-focus-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 302,
@@ -34757,7 +34782,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 306,
@@ -34882,7 +34907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-solid-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 326,
@@ -34932,7 +34957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 334,
@@ -34982,7 +35007,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 342,
@@ -35007,7 +35032,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 346,
@@ -35032,7 +35057,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-bg",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 350,
@@ -35082,7 +35107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 358,
@@ -35107,8 +35132,8 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-focus-bg",
-            "value": "$kendo-color-white!default",
-            "scope": "private",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
+            "scope": "default",
             "line": {
                 "start": 362,
                 "end": 362
@@ -35132,7 +35157,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 366,
@@ -35157,7 +35182,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-focus-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 370,
@@ -35182,7 +35207,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-focus-bg",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 374,
@@ -35207,7 +35232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 378,
@@ -35307,7 +35332,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 394,
@@ -35357,7 +35382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 402,
@@ -35382,7 +35407,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 406,
@@ -35407,7 +35432,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 410,
@@ -35432,7 +35457,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 414,
@@ -35457,7 +35482,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 418,
@@ -35482,7 +35507,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-focus-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 422,
@@ -35507,7 +35532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-focus-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 426,
@@ -35732,7 +35757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-prefix-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 625,
@@ -35757,7 +35782,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-suffix-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 629,
@@ -35951,8 +35976,8 @@
     {
         "description": "The border color of the valid Input components.\n",
         "commentRange": {
-            "start": 656,
-            "end": 657
+            "start": 662,
+            "end": 663
         },
         "context": {
             "type": "variable",
@@ -35960,8 +35985,8 @@
             "value": "var( --kendo-valid-border, #{$kendo-valid-border} )",
             "scope": "default",
             "line": {
-                "start": 658,
-                "end": 658
+                "start": 664,
+                "end": 664
             }
         },
         "group": [
@@ -35976,8 +36001,8 @@
     {
         "description": "The text color of the valid Input components.\n",
         "commentRange": {
-            "start": 659,
-            "end": 660
+            "start": 665,
+            "end": 666
         },
         "context": {
             "type": "variable",
@@ -35985,8 +36010,8 @@
             "value": "var( --kendo-valid-text, #{$kendo-valid-text} )",
             "scope": "default",
             "line": {
-                "start": 661,
-                "end": 661
+                "start": 667,
+                "end": 667
             }
         },
         "group": [
@@ -36001,17 +36026,17 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 663,
-            "end": 664
+            "start": 669,
+            "end": 670
         },
         "context": {
             "type": "variable",
             "name": "kendo-input-placeholder-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
-                "start": 665,
-                "end": 665
+                "start": 671,
+                "end": 671
             }
         },
         "group": [
@@ -36026,8 +36051,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 666,
-            "end": 667
+            "start": 672,
+            "end": 673
         },
         "context": {
             "type": "variable",
@@ -36035,8 +36060,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 668,
-                "end": 668
+                "start": 674,
+                "end": 674
             }
         },
         "group": [
@@ -36051,17 +36076,17 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 670,
-            "end": 671
+            "start": 676,
+            "end": 677
         },
         "context": {
             "type": "variable",
             "name": "kendo-input-clear-value-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
-                "start": 672,
-                "end": 672
+                "start": 678,
+                "end": 678
             }
         },
         "group": [
@@ -36076,8 +36101,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 673,
-            "end": 674
+            "start": 679,
+            "end": 680
         },
         "context": {
             "type": "variable",
@@ -36085,8 +36110,8 @@
             "value": ".6",
             "scope": "default",
             "line": {
-                "start": 675,
-                "end": 675
+                "start": 681,
+                "end": 681
             }
         },
         "group": [
@@ -36101,8 +36126,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 676,
-            "end": 677
+            "start": 682,
+            "end": 683
         },
         "context": {
             "type": "variable",
@@ -36110,8 +36135,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 678,
-                "end": 678
+                "start": 684,
+                "end": 684
             }
         },
         "group": [
@@ -36126,8 +36151,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 679,
-            "end": 680
+            "start": 685,
+            "end": 686
         },
         "context": {
             "type": "variable",
@@ -36135,8 +36160,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 681,
-                "end": 681
+                "start": 687,
+                "end": 687
             }
         },
         "group": [
@@ -36707,7 +36732,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-icon-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 128,
@@ -36832,7 +36857,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-header-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 206,
@@ -36857,7 +36882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-header-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 209,
@@ -36932,7 +36957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 220,
@@ -36957,7 +36982,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 223,
@@ -36982,7 +37007,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-hover-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 227,
@@ -37007,7 +37032,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 230,
@@ -37032,7 +37057,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-focus-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 234,
@@ -37057,7 +37082,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-focus-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 237,
@@ -37082,7 +37107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-focus-shadow",
-            "value": "inset 0 0 0 1px k-get-theme-color-var( neutral-130 )",
+            "value": "inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))",
             "scope": "default",
             "line": {
                 "start": 240,
@@ -37107,7 +37132,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-selected-bg",
-            "value": "k-get-theme-color-var( neutral-40 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 ))",
             "scope": "default",
             "line": {
                 "start": 244,
@@ -37132,7 +37157,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-selected-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 247,
@@ -37157,7 +37182,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-selected-hover-bg",
-            "value": "k-get-theme-color-var( neutral-50 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 ))",
             "scope": "default",
             "line": {
                 "start": 251,
@@ -37182,7 +37207,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-selected-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 254,
@@ -37207,7 +37232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-disabled-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 258,
@@ -37232,7 +37257,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-disabled-text",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 261,
@@ -37257,7 +37282,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-group-item-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 265,
@@ -37282,7 +37307,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-group-item-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 268,
@@ -37357,7 +37382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-no-data-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 278,
@@ -37732,7 +37757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listbox-drop-hint-border-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -38557,7 +38582,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-selected-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 82,
@@ -39332,7 +39357,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-loader-container-panel-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 97,
@@ -39657,7 +39682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-loader-brand-colors",
-            "value": "(\n    primary: primary,\n    secondary: neutral,\n    tertiary: tertiary,\n    error: error,\n    success: success,\n    warning: warning,\n    info: info\n )",
+            "value": "(\n    primary: primary,\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n    error: error,\n    success: success,\n    warning: warning,\n    info: info\n )",
             "scope": "default",
             "line": {
                 "start": 141,
@@ -39832,7 +39857,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-map-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 23,
@@ -40057,7 +40082,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-map-navigator-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 52,
@@ -40082,7 +40107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-map-navigator-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 55,
@@ -40107,7 +40132,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-map-navigator-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 58,
@@ -40282,7 +40307,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-map-attribution-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -40307,7 +40332,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-map-marker-fill",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 85,
@@ -40507,7 +40532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-media-player-overlay-bg",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 29,
@@ -40532,7 +40557,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-media-player-quality-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 33,
@@ -40632,7 +40657,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-media-player-titlebar-bg",
-            "value": "rgba( $kendo-color-black, .4 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 )",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -41857,7 +41882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-menu-popup-item-focus-outline",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))",
             "scope": "default",
             "line": {
                 "start": 222,
@@ -42082,7 +42107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-menu-icon-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 254,
@@ -42782,7 +42807,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-notification-brand-colors",
-            "value": "(\n    primary: primary,\n    error: error,\n    warning: warning,\n    success: success,\n    info: info,\n    secondary: neutral,\n    tertiary: tertiary,\n)",
+            "value": "(\n    primary: primary,\n    error: error,\n    warning: warning,\n    success: success,\n    info: info,\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n)",
             "scope": "default",
             "line": {
                 "start": 54,
@@ -43232,7 +43257,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-orgchart-node-group-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 57,
@@ -43257,7 +43282,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-orgchart-node-group-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 60,
@@ -43282,7 +43307,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-orgchart-node-group-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 63,
@@ -43932,7 +43957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-orgchart-line-text",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 149,
@@ -44357,7 +44382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -44482,7 +44507,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-focus-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 62,
@@ -44632,7 +44657,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-sizes-label-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 83,
@@ -44657,7 +44682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-info-label-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 87,
@@ -45307,7 +45332,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-header-hover-text",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 83,
@@ -45557,7 +45582,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-header-selected-text",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -45607,7 +45632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-selected-marker",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 122,
@@ -45957,7 +45982,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-item-hover-text",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 169,
@@ -46207,7 +46232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-item-selected-text",
-            "value": "$kendo-color-black",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)",
             "scope": "default",
             "line": {
                 "start": 202,
@@ -46657,7 +46682,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pdf-viewer-canvas-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -46674,7 +46699,7 @@
         }
     },
     {
-        "description": "The text color of the PDFViewer canvas.\n",
+        "description": "Text color of the PDF viewer canvas.\n",
         "commentRange": {
             "start": 31,
             "end": 32
@@ -47682,7 +47707,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pivotgrid-headers-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 69,
@@ -47732,7 +47757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pivotgrid-total-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 76,
@@ -48357,7 +48382,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pivotgrid-configurator-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 160,
@@ -50157,7 +50182,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-bg",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 37,
@@ -50257,7 +50282,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-value-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 50,
@@ -50407,7 +50432,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 70,
@@ -50432,7 +50457,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-disabled-text",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 73,
@@ -50482,7 +50507,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-value-disabled-bg",
-            "value": "k-get-theme-color-var( primary-30 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 ))",
             "scope": "default",
             "line": {
                 "start": 80,
@@ -50507,7 +50532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-indeterminate-bg",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -50557,7 +50582,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-indeterminate-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 90,
@@ -50582,7 +50607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-indeterminate-gradient-horizontal",
-            "value": "linear-gradient(270deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%)",
+            "value": "linear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)",
             "scope": "default",
             "line": {
                 "start": 93,
@@ -50607,7 +50632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-indeterminate-gradient-vertical",
-            "value": "linear-gradient(180deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%)",
+            "value": "linear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -50707,7 +50732,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-circular-progressbar-arc-stroke",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 111,
@@ -51382,7 +51407,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -51432,7 +51457,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-hover-text",
-            "value": "k-get-theme-color( neutral, 130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 ))",
             "scope": "default",
             "line": {
                 "start": 54,
@@ -51507,7 +51532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-checked-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 64,
@@ -51532,7 +51557,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-checked-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 67,
@@ -51582,7 +51607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-hover-checked-text",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 74,
@@ -51607,7 +51632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-hover-checked-border",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 77,
@@ -51682,7 +51707,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-focus-outline",
-            "value": "1px solid k-get-theme-color-var( neutral-130 )",
+            "value": "1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 87,
@@ -51757,7 +51782,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-disabled-text",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 97,
@@ -51782,7 +51807,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-disabled-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 100,
@@ -52232,7 +52257,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-ripple-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 174,
@@ -52432,7 +52457,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-rating-item-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 26,
@@ -52457,7 +52482,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-rating-item-hover-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 29,
@@ -52582,7 +52607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-rating-item-selected-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -52607,7 +52632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-rating-item-selected-hover-text",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -52807,7 +52832,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-selected-bg",
-            "value": "k-get-theme-color-var( primary-20 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 ))",
             "scope": "default",
             "line": {
                 "start": 31,
@@ -53207,7 +53232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-event-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 83,
@@ -53232,7 +53257,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-event-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 86,
@@ -53457,7 +53482,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-event-selected-bg",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 115,
@@ -53732,7 +53757,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-nonwork-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 151,
@@ -53832,7 +53857,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-othermonth-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 165,
@@ -54057,7 +54082,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-yearview-indicator-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 195,
@@ -54082,7 +54107,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-yearview-indicator-selected-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 198,
@@ -54182,7 +54207,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-tooltip-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 211,
@@ -54207,7 +54232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-tooltip-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 214,
@@ -54582,7 +54607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scheduler-marquee-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 266,
@@ -54807,7 +54832,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -54857,7 +54882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-primary-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 38,
@@ -54907,7 +54932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-hover-shadow",
-            "value": "0 0 0 1px k-get-theme-color-var( neutral-30 )",
+            "value": "0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -54932,7 +54957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-focus-shadow",
-            "value": "0 0 0 1px k-get-theme-color-var( neutral-130 )",
+            "value": "0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -54957,7 +54982,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-primary-hover-shadow",
-            "value": "0 0 0 2px k-get-theme-color-var( neutral-30 )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 50,
@@ -54982,7 +55007,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-primary-focus-shadow",
-            "value": "0 0 0 2px k-get-theme-color-var( neutral-130 )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 53,
@@ -55107,7 +55132,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-navigation-color",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 70,
@@ -55182,7 +55207,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-navigation-focus-shadow",
-            "value": "0 0 0 1px k-get-theme-color-var( neutral-130 )",
+            "value": "0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 79,
@@ -55332,7 +55357,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-searchbox-icon-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 5,
@@ -55582,7 +55607,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-signature-line-color",
-            "value": "rgba( k-get-theme-color( info, 100 ), .4 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 )",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -55607,7 +55632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-signature-line-disabled-color",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -55882,7 +55907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-skeleton-item-bg",
-            "value": "k-get-theme-color-var( neutral-50 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
             "scope": "default",
             "line": {
                 "start": 20,
@@ -55907,7 +55932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-skeleton-wave-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 23,
@@ -56157,7 +56182,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-track-bg",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 36,
@@ -56207,7 +56232,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-track-hover-bg",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 42,
@@ -56257,7 +56282,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-track-focus-bg",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -56307,7 +56332,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-selection-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 55,
@@ -56507,7 +56532,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-thumb-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -56607,7 +56632,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-thumb-hover-border",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 94,
@@ -56707,7 +56732,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-thumb-active-border",
-            "value": "k-get-theme-color-var( primary-130 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 ))",
             "scope": "default",
             "line": {
                 "start": 107,
@@ -56857,7 +56882,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-disabled-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 127,
@@ -56882,7 +56907,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-track-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 130,
@@ -56907,7 +56932,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-selection-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-90 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))",
             "scope": "default",
             "line": {
                 "start": 133,
@@ -56932,7 +56957,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-thumb-disabled-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 136,
@@ -57305,7 +57330,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-split-button-arrow-delimiter-bg",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -57680,7 +57705,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-splitbar-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 49,
@@ -57730,7 +57755,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-splitbar-hover-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 56,
@@ -57780,7 +57805,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-splitbar-selected-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 63,
@@ -58030,7 +58055,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-primary-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -58055,7 +58080,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-primary-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 33,
@@ -58080,7 +58105,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-header-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 37,
@@ -58155,7 +58180,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-table-header-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -58230,7 +58255,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-selected-text",
-            "value": "k-get-theme-color-var( primary-160 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 ))",
             "scope": "default",
             "line": {
                 "start": 57,
@@ -58255,7 +58280,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-selected-bg",
-            "value": "k-get-theme-color-var( primary-30 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 ))",
             "scope": "default",
             "line": {
                 "start": 60,
@@ -58280,7 +58305,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-selected-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 63,
@@ -59230,7 +59255,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-resize-handle-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -59255,7 +59280,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-cell-comment-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 193,
@@ -59280,7 +59305,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-cell-dirty-border",
-            "value": "k-get-theme-color-var( error-100 )",
+            "value": "if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))",
             "scope": "default",
             "line": {
                 "start": 197,
@@ -59455,7 +59480,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 222,
@@ -59480,7 +59505,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 225,
@@ -59505,7 +59530,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 228,
@@ -59530,7 +59555,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-hover-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 232,
@@ -59555,7 +59580,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-hover-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 235,
@@ -59580,7 +59605,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-hover-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 238,
@@ -59605,7 +59630,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-active-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 242,
@@ -59630,7 +59655,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-active-bg",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 245,
@@ -59655,7 +59680,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-button-active-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 248,
@@ -59680,7 +59705,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-filter-menu-icon-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 252,
@@ -59705,7 +59730,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-error-border",
-            "value": "k-get-theme-color-var( error-190 )",
+            "value": "if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))",
             "scope": "default",
             "line": {
                 "start": 256,
@@ -60130,7 +60155,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-drawing-handle-outline-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 309,
@@ -60155,7 +60180,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-drawing-handle-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 312,
@@ -60880,7 +60905,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 78,
@@ -61055,7 +61080,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-done-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 102,
@@ -61080,7 +61105,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-done-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 105,
@@ -61130,7 +61155,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-done-hover-bg",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 112,
@@ -61205,7 +61230,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-done-disabled-bg",
-            "value": "k-get-theme-color-var( primary-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 ))",
             "scope": "default",
             "line": {
                 "start": 122,
@@ -61280,7 +61305,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-current-bg",
-            "value": "k-get-theme-color-var( primary-120 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))",
             "scope": "default",
             "line": {
                 "start": 132,
@@ -61530,7 +61555,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-label-success-text",
-            "value": "k-get-theme-color-var( success-190 )",
+            "value": "if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))",
             "scope": "default",
             "line": {
                 "start": 165,
@@ -61555,7 +61580,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-label-error-text",
-            "value": "k-get-theme-color-var( error-190 )",
+            "value": "if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))",
             "scope": "default",
             "line": {
                 "start": 168,
@@ -61655,7 +61680,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-optional-label-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 181,
@@ -61980,7 +62005,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-focus-ring",
-            "value": "1px solid k-get-theme-color-var( neutral-130 )",
+            "value": "1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 33,
@@ -62055,7 +62080,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 43,
@@ -62130,7 +62155,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 53,
@@ -62205,7 +62230,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-border",
-            "value": "k-get-theme-color-var( neutral-110 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))",
             "scope": "default",
             "line": {
                 "start": 63,
@@ -62280,7 +62305,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-disabled-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 73,
@@ -62305,7 +62330,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-bg",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 77,
@@ -62355,7 +62380,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 83,
@@ -62380,7 +62405,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-hover-bg",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 87,
@@ -62430,7 +62455,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-hover-border",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 93,
@@ -62455,7 +62480,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 97,
@@ -62505,7 +62530,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-disabled-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 103,
@@ -62530,7 +62555,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 108,
@@ -62555,7 +62580,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 111,
@@ -62605,7 +62630,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-hover-bg",
-            "value": "k-get-theme-color-var( primary-110 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))",
             "scope": "default",
             "line": {
                 "start": 118,
@@ -62630,7 +62655,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-hover-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 121,
@@ -62680,7 +62705,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 128,
@@ -62705,7 +62730,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 131,
@@ -62755,7 +62780,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 138,
@@ -62780,7 +62805,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-disabled-text",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 141,
@@ -62805,7 +62830,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-disabled-border",
-            "value": "$kendo-switch-on-track-disabled-bg",
+            "value": "if($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg)",
             "scope": "default",
             "line": {
                 "start": 144,
@@ -62830,7 +62855,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 148,
@@ -62905,7 +62930,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-hover-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 158,
@@ -62980,7 +63005,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-disabled-bg",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 168,
@@ -63030,7 +63055,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-disabled-border",
-            "value": "k-get-theme-color-var( neutral-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))",
             "scope": "default",
             "line": {
                 "start": 174,
@@ -63330,7 +63355,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-header-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 91,
@@ -63930,7 +63955,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-selected-bg",
-            "value": "k-get-theme-color-var( primary-20 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 ))",
             "scope": "default",
             "line": {
                 "start": 171,
@@ -64005,7 +64030,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-selected-hover-bg",
-            "value": "k-get-theme-color-var( primary-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 ))",
             "scope": "default",
             "line": {
                 "start": 181,
@@ -64780,7 +64805,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tabstrip-item-selected-text",
-            "value": "k-get-theme-color-var( neutral-190 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -64805,7 +64830,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tabstrip-item-selected-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 99,
@@ -64880,7 +64905,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tabstrip-item-dragging-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 108,
@@ -64930,7 +64955,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tabstrip-indicator-color",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -65680,7 +65705,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-taskboard-column-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 72,
@@ -65805,7 +65830,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-taskboard-column-focus-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 87,
@@ -66555,7 +66580,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-taskboard-card-selected-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 185,
@@ -66705,7 +66730,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-taskboard-drag-placeholder-bg",
-            "value": "k-get-theme-color-var( neutral-50 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))",
             "scope": "default",
             "line": {
                 "start": 205,
@@ -66780,7 +66805,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tile-layout-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 11,
@@ -68155,7 +68180,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 65,
@@ -68180,7 +68205,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-border-color",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 68,
@@ -68555,7 +68580,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-flag-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -68730,7 +68755,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-card-header-text",
-            "value": "k-get-theme-color-var( neutral-160 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))",
             "scope": "default",
             "line": {
                 "start": 138,
@@ -68755,7 +68780,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-card-body-scroll-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 141,
@@ -69080,7 +69105,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-circle-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 183,
@@ -69530,7 +69555,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 50,
@@ -69605,7 +69630,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-separator-border",
-            "value": "k-get-theme-color-var( neutral-60 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))",
             "scope": "default",
             "line": {
                 "start": 60,
@@ -69705,7 +69730,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-item-focus-outline-color",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 74,
@@ -70055,7 +70080,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-bg",
-            "value": "$kendo-color-white",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
             "scope": "default",
             "line": {
                 "start": 42,
@@ -70155,7 +70180,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-button-text",
-            "value": "k-get-theme-color-var( neutral-130, initial )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial ))",
             "scope": "default",
             "line": {
                 "start": 55,
@@ -71005,7 +71030,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-treeview-item-focus-shadow",
-            "value": "inset 0 0 0 1px k-get-theme-color-var( neutral-130 )",
+            "value": "inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 127,
@@ -71989,7 +72014,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-brand-colors",
-            "value": "(\n    secondary: neutral,\n    tertiary: tertiary,\n    success: success,\n    warning: warning,\n    error: error,\n    info: info\n )",
+            "value": "(\n    secondary: if($kendo-enable-color-system, secondary, neutral),\n    tertiary: tertiary,\n    success: success,\n    warning: warning,\n    error: error,\n    info: info\n )",
             "scope": "default",
             "line": {
                 "start": 58,
@@ -72289,7 +72314,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-dropzone-text",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 38,
@@ -72314,7 +72339,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-dropzone-bg",
-            "value": "k-get-theme-color-var( neutral-10 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -72339,7 +72364,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-dropzone-border",
-            "value": "k-get-theme-color-var( neutral-30 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -72614,7 +72639,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-progress-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 82,
@@ -72639,7 +72664,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-success-text",
-            "value": "k-get-theme-color-var( success-190 )",
+            "value": "if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))",
             "scope": "default",
             "line": {
                 "start": 86,
@@ -72664,7 +72689,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-success-bg",
-            "value": "k-get-theme-color-var( success-190 )",
+            "value": "if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))",
             "scope": "default",
             "line": {
                 "start": 89,
@@ -72689,7 +72714,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-error-text",
-            "value": "k-get-theme-color-var( error-190 )",
+            "value": "if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))",
             "scope": "default",
             "line": {
                 "start": 93,
@@ -72714,7 +72739,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-error-bg",
-            "value": "k-get-theme-color-var( error-190 )",
+            "value": "if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -73339,7 +73364,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-window-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -73439,7 +73464,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-window-titlebar-text",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 94,
@@ -73464,7 +73489,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-window-titlebar-border",
-            "value": "k-get-theme-color-var( primary-100 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))",
             "scope": "default",
             "line": {
                 "start": 97,
@@ -73914,7 +73939,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-wizard-step-focus-border",
-            "value": "k-get-theme-color-var( neutral-130 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
             "scope": "default",
             "line": {
                 "start": 53,