@progress/kendo-theme-bootstrap 7.1.0-dev.1 → 7.1.0-dev.11

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

@@ -283,7 +283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-light-text",
-            "value": "k-contrast-color( $kendo-color-light )",
+            "value": "if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -333,7 +333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-dark-text",
-            "value": "k-contrast-color( $kendo-color-dark )",
+            "value": "if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -2758,7 +2758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-focus-shadow",
-            "value": "inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )",
+            "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 ))",
             "scope": "default",
             "line": {
                 "start": 159,
@@ -3683,7 +3683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-theme-colors",
-            "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": #e4e7eb )\n)",
+            "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )\n)",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -3708,7 +3708,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-bg",
-            "value": "#e4e7eb",
+            "value": "if($kendo-enable-color-system, k-color( base ), #e4e7eb)",
             "scope": "default",
             "line": {
                 "start": 113,
@@ -3733,7 +3733,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-text",
-            "value": "k-contrast-color( $kendo-button-bg, $gray-900 )",
+            "value": "if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 ))",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -3833,7 +3833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-hover-bg",
-            "value": "k-color-darken( $kendo-button-bg, 7.5% )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% ))",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -3883,7 +3883,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-hover-border",
-            "value": "k-color-darken( $kendo-button-bg, 10% )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% ))",
             "scope": "default",
             "line": {
                 "start": 135,
@@ -3958,7 +3958,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-active-bg",
-            "value": "k-color-darken( $kendo-button-bg, 10% )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))",
             "scope": "default",
             "line": {
                 "start": 145,
@@ -4008,7 +4008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-active-border",
-            "value": "k-color-darken( $kendo-button-bg, 12.5% )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))",
             "scope": "default",
             "line": {
                 "start": 151,
@@ -4083,7 +4083,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-selected-bg",
-            "value": "k-color-darken( $kendo-color-primary, 10% )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% ))",
             "scope": "default",
             "line": {
                 "start": 161,
@@ -4108,7 +4108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-selected-text",
-            "value": "k-contrast-color( $kendo-button-selected-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg ))",
             "scope": "default",
             "line": {
                 "start": 164,
@@ -4133,7 +4133,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-selected-border",
-            "value": "k-color-darken( $kendo-color-primary, 12.5% )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% ))",
             "scope": "default",
             "line": {
                 "start": 167,
@@ -4208,7 +4208,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-bg",
-            "value": "k-color-darken( $kendo-button-bg, 10% )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))",
             "scope": "default",
             "line": {
                 "start": 177,
@@ -4258,7 +4258,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-border",
-            "value": "k-color-darken( $kendo-button-bg, 12.5% )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))",
             "scope": "default",
             "line": {
                 "start": 183,
@@ -4308,7 +4308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-shadow",
-            "value": "0 0 0 .25rem rgba( $kendo-button-border, .5 )",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 ))",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -6333,7 +6333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-a",
-            "value": "$blue",
+            "value": "if($kendo-enable-color-system, k-color( series-a ), $blue)",
             "scope": "default",
             "line": {
                 "start": 8,
@@ -6358,7 +6358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-b",
-            "value": "$purple",
+            "value": "if($kendo-enable-color-system, k-color( series-b ), $purple)",
             "scope": "default",
             "line": {
                 "start": 16,
@@ -6383,7 +6383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-c",
-            "value": "$teal",
+            "value": "if($kendo-enable-color-system, k-color( series-c ), $teal)",
             "scope": "default",
             "line": {
                 "start": 24,
@@ -6408,7 +6408,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-d",
-            "value": "$green",
+            "value": "if($kendo-enable-color-system, k-color( series-d ), $green)",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -6433,7 +6433,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-e",
-            "value": "$yellow",
+            "value": "if($kendo-enable-color-system, k-color( series-e ), $yellow)",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -6458,7 +6458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-f",
-            "value": "$red",
+            "value": "if($kendo-enable-color-system, k-color( series-f ), $red)",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -6508,7 +6508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-major-lines",
-            "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 )",
             "scope": "default",
             "line": {
                 "start": 103,
@@ -6533,7 +6533,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-minor-lines",
-            "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 )",
             "scope": "default",
             "line": {
                 "start": 107,
@@ -6858,7 +6858,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-border",
-            "value": "if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))",
             "scope": "default",
             "line": {
                 "start": 67,
@@ -6983,7 +6983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-text",
-            "value": "k-contrast-color( $kendo-checkbox-checked-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -7108,7 +7108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-border",
-            "value": "k-try-tint( $kendo-color-primary, 50% )",
+            "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))",
             "scope": "default",
             "line": {
                 "start": 101,
@@ -7133,7 +7133,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-shadow",
-            "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 104,
@@ -8658,7 +8658,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-hover-text",
-            "value": "k-contrast-color( $kendo-chip-outline-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 162,
@@ -9825,62 +9825,35 @@
         }
     },
     {
-        "description": "The color white.\nNote: you cannot change this value.\n",
+        "description": "The global default Colors map.\n",
         "commentRange": {
-            "start": 6,
-            "end": 9
+            "start": 179,
+            "end": 180
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-white",
-            "value": "#ffffff",
-            "scope": "private",
+            "name": "kendo-colors",
+            "value": "$_default-colors",
+            "scope": "default",
             "line": {
-                "start": 10,
-                "end": 10
+                "start": 181,
+                "end": 181
             }
         },
-        "type": "Color",
         "group": [
             "color-system"
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color black.\nNote: you cannot change this value.\n",
-        "commentRange": {
-            "start": 12,
-            "end": 15
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-black",
-            "value": "#000000",
-            "scope": "private",
-            "line": {
-                "start": 16,
-                "end": 16
-            }
-        },
-        "type": "Color",
-        "group": [
-            "color-system"
-        ],
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
         "commentRange": {
-            "start": 121,
-            "end": 124
+            "start": 210,
+            "end": 213
         },
         "context": {
             "type": "variable",
@@ -9888,8 +9861,8 @@
             "value": "$primary",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 214,
+                "end": 214
             }
         },
         "group": [
@@ -9898,15 +9871,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color used along with the primary color denoted by $kendo-color-primary.\nUsed to provide contrast between the background and foreground colors.\n",
         "commentRange": {
-            "start": 129,
-            "end": 132
+            "start": 218,
+            "end": 221
         },
         "context": {
             "type": "variable",
@@ -9914,8 +9887,8 @@
             "value": "k-contrast-color( $kendo-color-primary )",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 222,
+                "end": 222
             }
         },
         "group": [
@@ -9924,15 +9897,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The secondary color of the theme.\n",
         "commentRange": {
-            "start": 135,
-            "end": 137
+            "start": 224,
+            "end": 226
         },
         "context": {
             "type": "variable",
@@ -9940,8 +9913,8 @@
             "value": "$secondary",
             "scope": "default",
             "line": {
-                "start": 138,
-                "end": 138
+                "start": 227,
+                "end": 227
             }
         },
         "group": [
@@ -9950,15 +9923,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color used along with the secondary color denoted by $kendo-color-secondary.\nUsed to provide contrast between the background and foreground colors.\n",
         "commentRange": {
-            "start": 142,
-            "end": 145
+            "start": 231,
+            "end": 234
         },
         "context": {
             "type": "variable",
@@ -9966,8 +9939,8 @@
             "value": "k-contrast-color( $kendo-color-secondary )",
             "scope": "default",
             "line": {
-                "start": 146,
-                "end": 146
+                "start": 235,
+                "end": 235
             }
         },
         "group": [
@@ -9976,15 +9949,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The tertiary color of the theme.\n",
         "commentRange": {
-            "start": 148,
-            "end": 150
+            "start": 237,
+            "end": 239
         },
         "context": {
             "type": "variable",
@@ -9992,8 +9965,8 @@
             "value": "$purple",
             "scope": "default",
             "line": {
-                "start": 151,
-                "end": 151
+                "start": 240,
+                "end": 240
             }
         },
         "group": [
@@ -10002,15 +9975,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color used along with the tertiary color denoted by $kendo-color-tertiary.\nUsed to provide contrast between the background and foreground colors.\n",
         "commentRange": {
-            "start": 155,
-            "end": 158
+            "start": 244,
+            "end": 247
         },
         "context": {
             "type": "variable",
@@ -10018,8 +9991,8 @@
             "value": "k-contrast-color( $kendo-color-tertiary )",
             "scope": "default",
             "line": {
-                "start": 159,
-                "end": 159
+                "start": 248,
+                "end": 248
             }
         },
         "group": [
@@ -10028,15 +10001,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for informational messages and states.\n",
         "commentRange": {
-            "start": 161,
-            "end": 163
+            "start": 250,
+            "end": 252
         },
         "context": {
             "type": "variable",
@@ -10044,8 +10017,8 @@
             "value": "$info",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 253,
+                "end": 253
             }
         },
         "group": [
@@ -10054,15 +10027,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for success messages and states.\n",
         "commentRange": {
-            "start": 168,
-            "end": 170
+            "start": 257,
+            "end": 259
         },
         "context": {
             "type": "variable",
@@ -10070,8 +10043,8 @@
             "value": "$success",
             "scope": "default",
             "line": {
-                "start": 171,
-                "end": 171
+                "start": 260,
+                "end": 260
             }
         },
         "group": [
@@ -10080,15 +10053,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for warning messages and states.\n",
         "commentRange": {
-            "start": 175,
-            "end": 177
+            "start": 264,
+            "end": 266
         },
         "context": {
             "type": "variable",
@@ -10096,8 +10069,8 @@
             "value": "$warning",
             "scope": "default",
             "line": {
-                "start": 178,
-                "end": 178
+                "start": 267,
+                "end": 267
             }
         },
         "group": [
@@ -10106,15 +10079,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for error messages and states.\n",
         "commentRange": {
-            "start": 182,
-            "end": 184
+            "start": 271,
+            "end": 273
         },
         "context": {
             "type": "variable",
@@ -10122,8 +10095,8 @@
             "value": "$danger",
             "scope": "default",
             "line": {
-                "start": 185,
-                "end": 185
+                "start": 274,
+                "end": 274
             }
         },
         "group": [
@@ -10132,15 +10105,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The dark color of the theme.\n",
         "commentRange": {
-            "start": 189,
-            "end": 191
+            "start": 278,
+            "end": 280
         },
         "context": {
             "type": "variable",
@@ -10148,8 +10121,8 @@
             "value": "$dark",
             "scope": "default",
             "line": {
-                "start": 192,
-                "end": 192
+                "start": 281,
+                "end": 281
             }
         },
         "group": [
@@ -10158,15 +10131,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The light color of the theme.\n",
         "commentRange": {
-            "start": 194,
-            "end": 196
+            "start": 283,
+            "end": 285
         },
         "context": {
             "type": "variable",
@@ -10174,8 +10147,8 @@
             "value": "$light",
             "scope": "default",
             "line": {
-                "start": 197,
-                "end": 197
+                "start": 286,
+                "end": 286
             }
         },
         "group": [
@@ -10184,15 +10157,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
         "commentRange": {
-            "start": 199,
-            "end": 200
+            "start": 288,
+            "end": 289
         },
         "context": {
             "type": "variable",
@@ -10200,8 +10173,8 @@
             "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
             "scope": "default",
             "line": {
-                "start": 201,
-                "end": 201
+                "start": 290,
+                "end": 290
             }
         },
         "group": [
@@ -10209,8 +10182,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -11016,8 +10989,8 @@
     {
         "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
         "commentRange": {
-            "start": 289,
-            "end": 291
+            "start": 327,
+            "end": 329
         },
         "context": {
             "type": "variable",
@@ -11025,8 +10998,8 @@
             "value": "$kendo-body-bg",
             "scope": "default",
             "line": {
-                "start": 292,
-                "end": 292
+                "start": 330,
+                "end": 330
             }
         },
         "group": [
@@ -11034,15 +11007,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.\n",
         "commentRange": {
-            "start": 293,
-            "end": 295
+            "start": 331,
+            "end": 333
         },
         "context": {
             "type": "variable",
@@ -11050,8 +11023,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 296,
-                "end": 296
+                "start": 334,
+                "end": 334
             }
         },
         "group": [
@@ -11059,15 +11032,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Border color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.\n",
         "commentRange": {
-            "start": 297,
-            "end": 299
+            "start": 335,
+            "end": 337
         },
         "context": {
             "type": "variable",
@@ -11075,8 +11048,8 @@
             "value": "if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )",
             "scope": "default",
             "line": {
-                "start": 300,
-                "end": 300
+                "start": 338,
+                "end": 338
             }
         },
         "group": [
@@ -11084,8 +11057,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -12122,7 +12095,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-manager-dock-preview-bg",
-            "value": "rgba( $kendo-color-primary, .16 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))",
             "scope": "default",
             "line": {
                 "start": 110,
@@ -12397,7 +12370,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-bg",
-            "value": "if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ))",
             "scope": "default",
             "line": {
                 "start": 28,
@@ -12497,7 +12470,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-icon-text",
-            "value": "k-try-tint( $kendo-dropzone-text, 8 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 ))",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -12897,7 +12870,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-editor-highlighted-bg",
-            "value": "k-color-mix( $kendo-color-primary, #ffffff, 20% )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% ))",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -14597,7 +14570,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-file-manager-listview-item-icon-text",
-            "value": "k-try-tint( $kendo-file-manager-text, 4 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))",
             "scope": "default",
             "line": {
                 "start": 122,
@@ -15047,7 +15020,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-file-manager-preview-icon-text",
-            "value": "k-try-tint( $kendo-file-manager-text, 4 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 ))",
             "scope": "default",
             "line": {
                 "start": 179,
@@ -15272,7 +15245,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-filter-toolbar-focus-shadow",
-            "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -18916,17 +18889,17 @@
     {
         "description": "Background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 309,
+            "end": 310
         },
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-hover-bg",
-            "value": "rgba( k-contrast-color( $kendo-grid-bg ), .12 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 311,
+                "end": 311
             }
         },
         "group": [
@@ -18941,8 +18914,8 @@
     {
         "description": "Active background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 309,
-            "end": 310
+            "start": 312,
+            "end": 313
         },
         "context": {
             "type": "variable",
@@ -18950,8 +18923,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 311,
-                "end": 311
+                "start": 314,
+                "end": 314
             }
         },
         "group": [
@@ -18966,8 +18939,8 @@
     {
         "description": "Height of the grid row resize indicator\n",
         "commentRange": {
-            "start": 312,
-            "end": 313
+            "start": 315,
+            "end": 316
         },
         "context": {
             "type": "variable",
@@ -18975,8 +18948,8 @@
             "value": "k-map-get( $kendo-spacing, .5 )",
             "scope": "default",
             "line": {
-                "start": 314,
-                "end": 314
+                "start": 317,
+                "end": 317
             }
         },
         "group": [
@@ -20047,7 +20020,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-border",
-            "value": "rgba( $kendo-base-text, .5 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 ))",
             "scope": "default",
             "line": {
                 "start": 170,
@@ -20796,8 +20769,8 @@
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-separator-color",
-            "value": "$kendo-input-text",
+            "name": "kendo-input-separator-text",
+            "value": "$kendo-component-border",
             "scope": "default",
             "line": {
                 "start": 270,
@@ -20839,15 +20812,15 @@
         }
     },
     {
-        "description": "The border color of the invalid Input components.\n",
+        "description": "The text color of the Input prefix.\n",
         "commentRange": {
             "start": 275,
             "end": 276
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-invalid-border",
-            "value": "$kendo-invalid-border",
+            "name": "kendo-input-prefix-text",
+            "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
                 "start": 277,
@@ -20864,15 +20837,15 @@
         }
     },
     {
-        "description": "The shadow of the invalid Input components.\n",
+        "description": "The text color of the Input suffix.\n",
         "commentRange": {
             "start": 278,
             "end": 279
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-invalid-shadow",
-            "value": "$kendo-invalid-shadow",
+            "name": "kendo-input-suffix-text",
+            "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
                 "start": 280,
@@ -20888,6 +20861,106 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The border color of the invalid Input components.\n",
+        "commentRange": {
+            "start": 282,
+            "end": 283
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-invalid-border",
+            "value": "$kendo-invalid-border",
+            "scope": "default",
+            "line": {
+                "start": 284,
+                "end": 284
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The shadow of the invalid Input components.\n",
+        "commentRange": {
+            "start": 285,
+            "end": 286
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-invalid-shadow",
+            "value": "$kendo-invalid-shadow",
+            "scope": "default",
+            "line": {
+                "start": 287,
+                "end": 287
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the valid Input components.\n",
+        "commentRange": {
+            "start": 289,
+            "end": 290
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-valid-border",
+            "value": "$kendo-valid-border",
+            "scope": "default",
+            "line": {
+                "start": 291,
+                "end": 291
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The shadow of the valid Input components.\n",
+        "commentRange": {
+            "start": 292,
+            "end": 293
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-valid-shadow",
+            "value": "$kendo-valid-shadow",
+            "scope": "default",
+            "line": {
+                "start": 294,
+                "end": 294
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The font family of the List components.\n",
         "commentRange": {
@@ -21722,7 +21795,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-focus-shadow",
-            "value": "inset 0 0 0 3px rgba( $kendo-list-text, .15 )",
+            "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))",
             "scope": "default",
             "line": {
                 "start": 223,
@@ -22622,7 +22695,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-selected-bg",
-            "value": "rgba( $kendo-selected-bg, .25 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -22747,7 +22820,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-focus-shadow",
-            "value": "inset 0 0 0 3px rgba( $kendo-listview-text, .15 )",
+            "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))",
             "scope": "default",
             "line": {
                 "start": 60,
@@ -25747,7 +25820,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-item-focus-shadow",
-            "value": "0 0 0 3px rgba($kendo-color-primary, .25)",
+            "value": "0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))",
             "scope": "default",
             "line": {
                 "start": 126,
@@ -26741,8 +26814,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 282,
-            "end": 283
+            "start": 296,
+            "end": 297
         },
         "context": {
             "type": "variable",
@@ -26750,8 +26823,8 @@
             "value": "$kendo-button-bg",
             "scope": "default",
             "line": {
-                "start": 284,
-                "end": 284
+                "start": 298,
+                "end": 298
             }
         },
         "group": [
@@ -26766,8 +26839,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 285,
-            "end": 286
+            "start": 299,
+            "end": 300
         },
         "context": {
             "type": "variable",
@@ -26775,8 +26848,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 287,
-                "end": 287
+                "start": 301,
+                "end": 301
             }
         },
         "group": [
@@ -26791,8 +26864,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 288,
-            "end": 289
+            "start": 302,
+            "end": 303
         },
         "context": {
             "type": "variable",
@@ -26800,8 +26873,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 290,
-                "end": 290
+                "start": 304,
+                "end": 304
             }
         },
         "group": [
@@ -26816,8 +26889,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 291,
-            "end": 292
+            "start": 305,
+            "end": 306
         },
         "context": {
             "type": "variable",
@@ -26825,8 +26898,8 @@
             "value": "$kendo-button-gradient",
             "scope": "default",
             "line": {
-                "start": 293,
-                "end": 293
+                "start": 307,
+                "end": 307
             }
         },
         "group": [
@@ -26841,8 +26914,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 294,
-            "end": 295
+            "start": 308,
+            "end": 309
         },
         "context": {
             "type": "variable",
@@ -26850,8 +26923,8 @@
             "value": "$kendo-button-shadow",
             "scope": "default",
             "line": {
-                "start": 296,
-                "end": 296
+                "start": 310,
+                "end": 310
             }
         },
         "group": [
@@ -26866,8 +26939,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 298,
-            "end": 299
+            "start": 312,
+            "end": 313
         },
         "context": {
             "type": "variable",
@@ -26875,8 +26948,8 @@
             "value": "$kendo-button-hover-bg",
             "scope": "default",
             "line": {
-                "start": 300,
-                "end": 300
+                "start": 314,
+                "end": 314
             }
         },
         "group": [
@@ -26891,8 +26964,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 301,
-            "end": 302
+            "start": 315,
+            "end": 316
         },
         "context": {
             "type": "variable",
@@ -26900,8 +26973,8 @@
             "value": "$kendo-button-hover-text",
             "scope": "default",
             "line": {
-                "start": 303,
-                "end": 303
+                "start": 317,
+                "end": 317
             }
         },
         "group": [
@@ -26916,8 +26989,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 304,
-            "end": 305
+            "start": 318,
+            "end": 319
         },
         "context": {
             "type": "variable",
@@ -26925,8 +26998,8 @@
             "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
-                "start": 306,
-                "end": 306
+                "start": 320,
+                "end": 320
             }
         },
         "group": [
@@ -26941,8 +27014,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 307,
-            "end": 308
+            "start": 321,
+            "end": 322
         },
         "context": {
             "type": "variable",
@@ -26950,8 +27023,8 @@
             "value": "$kendo-button-hover-gradient",
             "scope": "default",
             "line": {
-                "start": 309,
-                "end": 309
+                "start": 323,
+                "end": 323
             }
         },
         "group": [
@@ -26966,8 +27039,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 310,
-            "end": 311
+            "start": 324,
+            "end": 325
         },
         "context": {
             "type": "variable",
@@ -26975,8 +27048,8 @@
             "value": "$kendo-button-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 312,
-                "end": 312
+                "start": 326,
+                "end": 326
             }
         },
         "group": [
@@ -26991,8 +27064,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 314,
-            "end": 315
+            "start": 328,
+            "end": 329
         },
         "context": {
             "type": "variable",
@@ -27000,8 +27073,8 @@
             "value": "$kendo-button-active-bg",
             "scope": "default",
             "line": {
-                "start": 316,
-                "end": 316
+                "start": 330,
+                "end": 330
             }
         },
         "group": [
@@ -27016,8 +27089,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 317,
-            "end": 318
+            "start": 331,
+            "end": 332
         },
         "context": {
             "type": "variable",
@@ -27025,8 +27098,8 @@
             "value": "$kendo-button-focus-text",
             "scope": "default",
             "line": {
-                "start": 319,
-                "end": 319
+                "start": 333,
+                "end": 333
             }
         },
         "group": [
@@ -27041,8 +27114,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 320,
-            "end": 321
+            "start": 334,
+            "end": 335
         },
         "context": {
             "type": "variable",
@@ -27050,8 +27123,8 @@
             "value": "$kendo-button-focus-border",
             "scope": "default",
             "line": {
-                "start": 322,
-                "end": 322
+                "start": 336,
+                "end": 336
             }
         },
         "group": [
@@ -27066,8 +27139,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 323,
-            "end": 324
+            "start": 337,
+            "end": 338
         },
         "context": {
             "type": "variable",
@@ -27075,8 +27148,8 @@
             "value": "$kendo-button-focus-gradient",
             "scope": "default",
             "line": {
-                "start": 325,
-                "end": 325
+                "start": 339,
+                "end": 339
             }
         },
         "group": [
@@ -27091,8 +27164,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 326,
-            "end": 327
+            "start": 340,
+            "end": 341
         },
         "context": {
             "type": "variable",
@@ -27100,8 +27173,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 328,
-                "end": 328
+                "start": 342,
+                "end": 342
             }
         },
         "group": [
@@ -27116,8 +27189,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 330,
-            "end": 331
+            "start": 344,
+            "end": 345
         },
         "context": {
             "type": "variable",
@@ -27125,8 +27198,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 332,
-                "end": 332
+                "start": 346,
+                "end": 346
             }
         },
         "group": [
@@ -27141,8 +27214,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 333,
-            "end": 334
+            "start": 347,
+            "end": 348
         },
         "context": {
             "type": "variable",
@@ -27150,8 +27223,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 335,
-                "end": 335
+                "start": 349,
+                "end": 349
             }
         },
         "group": [
@@ -27166,8 +27239,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 336,
-            "end": 337
+            "start": 350,
+            "end": 351
         },
         "context": {
             "type": "variable",
@@ -27175,8 +27248,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 338,
-                "end": 338
+                "start": 352,
+                "end": 352
             }
         },
         "group": [
@@ -27191,8 +27264,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 339,
-            "end": 340
+            "start": 353,
+            "end": 354
         },
         "context": {
             "type": "variable",
@@ -27200,8 +27273,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 341,
-                "end": 341
+                "start": 355,
+                "end": 355
             }
         },
         "group": [
@@ -27216,8 +27289,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 342,
-            "end": 343
+            "start": 356,
+            "end": 357
         },
         "context": {
             "type": "variable",
@@ -27225,8 +27298,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 344,
-                "end": 344
+                "start": 358,
+                "end": 358
             }
         },
         "group": [
@@ -27241,8 +27314,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 346,
-            "end": 347
+            "start": 360,
+            "end": 361
         },
         "context": {
             "type": "variable",
@@ -27250,8 +27323,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 348,
-                "end": 348
+                "start": 362,
+                "end": 362
             }
         },
         "group": [
@@ -27266,8 +27339,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 349,
-            "end": 350
+            "start": 363,
+            "end": 364
         },
         "context": {
             "type": "variable",
@@ -27275,8 +27348,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 351,
-                "end": 351
+                "start": 365,
+                "end": 365
             }
         },
         "group": [
@@ -27291,17 +27364,17 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 352,
-            "end": 353
+            "start": 366,
+            "end": 367
         },
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-border",
-            "value": "rgba( $kendo-picker-outline-text, .5 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 ))",
             "scope": "default",
             "line": {
-                "start": 354,
-                "end": 354
+                "start": 368,
+                "end": 368
             }
         },
         "group": [
@@ -27316,8 +27389,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 356,
-            "end": 357
+            "start": 370,
+            "end": 371
         },
         "context": {
             "type": "variable",
@@ -27325,8 +27398,8 @@
             "value": "$kendo-picker-outline-text",
             "scope": "default",
             "line": {
-                "start": 358,
-                "end": 358
+                "start": 372,
+                "end": 372
             }
         },
         "group": [
@@ -27341,17 +27414,17 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 359,
-            "end": 360
+            "start": 373,
+            "end": 374
         },
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-text",
-            "value": "k-contrast-color( $kendo-picker-outline-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
-                "start": 361,
-                "end": 361
+                "start": 375,
+                "end": 375
             }
         },
         "group": [
@@ -27366,8 +27439,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 362,
-            "end": 363
+            "start": 376,
+            "end": 377
         },
         "context": {
             "type": "variable",
@@ -27375,8 +27448,8 @@
             "value": "$kendo-picker-outline-hover-bg",
             "scope": "default",
             "line": {
-                "start": 364,
-                "end": 364
+                "start": 378,
+                "end": 378
             }
         },
         "group": [
@@ -27391,8 +27464,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 366,
-            "end": 367
+            "start": 380,
+            "end": 381
         },
         "context": {
             "type": "variable",
@@ -27400,8 +27473,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 368,
-                "end": 368
+                "start": 382,
+                "end": 382
             }
         },
         "group": [
@@ -27416,8 +27489,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 369,
-            "end": 370
+            "start": 383,
+            "end": 384
         },
         "context": {
             "type": "variable",
@@ -27425,8 +27498,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 371,
-                "end": 371
+                "start": 385,
+                "end": 385
             }
         },
         "group": [
@@ -27441,8 +27514,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 372,
-            "end": 373
+            "start": 386,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -27450,8 +27523,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 374,
-                "end": 374
+                "start": 388,
+                "end": 388
             }
         },
         "group": [
@@ -27466,8 +27539,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 375,
-            "end": 376
+            "start": 389,
+            "end": 390
         },
         "context": {
             "type": "variable",
@@ -27475,8 +27548,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 377,
-                "end": 377
+                "start": 391,
+                "end": 391
             }
         },
         "group": [
@@ -27491,8 +27564,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 379,
-            "end": 380
+            "start": 393,
+            "end": 394
         },
         "context": {
             "type": "variable",
@@ -27500,8 +27573,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 381,
-                "end": 381
+                "start": 395,
+                "end": 395
             }
         },
         "group": [
@@ -27516,8 +27589,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 382,
-            "end": 383
+            "start": 396,
+            "end": 397
         },
         "context": {
             "type": "variable",
@@ -27525,8 +27598,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 384,
-                "end": 384
+                "start": 398,
+                "end": 398
             }
         },
         "group": [
@@ -27541,8 +27614,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 385,
-            "end": 386
+            "start": 399,
+            "end": 400
         },
         "context": {
             "type": "variable",
@@ -27550,8 +27623,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 387,
-                "end": 387
+                "start": 401,
+                "end": 401
             }
         },
         "group": [
@@ -27566,8 +27639,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 389,
-            "end": 390
+            "start": 403,
+            "end": 404
         },
         "context": {
             "type": "variable",
@@ -27575,8 +27648,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 391,
-                "end": 391
+                "start": 405,
+                "end": 405
             }
         },
         "group": [
@@ -27591,8 +27664,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 392,
-            "end": 393
+            "start": 406,
+            "end": 407
         },
         "context": {
             "type": "variable",
@@ -27600,8 +27673,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 394,
-                "end": 394
+                "start": 408,
+                "end": 408
             }
         },
         "group": [
@@ -27616,8 +27689,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 395,
-            "end": 396
+            "start": 409,
+            "end": 410
         },
         "context": {
             "type": "variable",
@@ -27625,8 +27698,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 397,
-                "end": 397
+                "start": 411,
+                "end": 411
             }
         },
         "group": [
@@ -27641,17 +27714,17 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 399,
-            "end": 400
+            "start": 413,
+            "end": 414
         },
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "rgba( $kendo-button-text, .08 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))",
             "scope": "default",
             "line": {
-                "start": 401,
-                "end": 401
+                "start": 415,
+                "end": 415
             }
         },
         "group": [
@@ -27666,8 +27739,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 402,
-            "end": 403
+            "start": 416,
+            "end": 417
         },
         "context": {
             "type": "variable",
@@ -27675,8 +27748,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 404,
-                "end": 404
+                "start": 418,
+                "end": 418
             }
         },
         "group": [
@@ -27691,8 +27764,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 405,
-            "end": 406
+            "start": 419,
+            "end": 420
         },
         "context": {
             "type": "variable",
@@ -27700,8 +27773,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 407,
-                "end": 407
+                "start": 421,
+                "end": 421
             }
         },
         "group": [
@@ -27716,8 +27789,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 409,
-            "end": 410
+            "start": 423,
+            "end": 424
         },
         "context": {
             "type": "variable",
@@ -27725,8 +27798,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 411,
-                "end": 411
+                "start": 425,
+                "end": 425
             }
         },
         "group": [
@@ -27741,8 +27814,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 412,
-            "end": 413
+            "start": 426,
+            "end": 427
         },
         "context": {
             "type": "variable",
@@ -27750,8 +27823,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 414,
-                "end": 414
+                "start": 428,
+                "end": 428
             }
         },
         "group": [
@@ -27766,8 +27839,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 415,
-            "end": 416
+            "start": 429,
+            "end": 430
         },
         "context": {
             "type": "variable",
@@ -27775,8 +27848,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 417,
-                "end": 417
+                "start": 431,
+                "end": 431
             }
         },
         "group": [
@@ -27791,8 +27864,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 418,
-            "end": 419
+            "start": 432,
+            "end": 433
         },
         "context": {
             "type": "variable",
@@ -27800,8 +27873,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 420,
-                "end": 420
+                "start": 434,
+                "end": 434
             }
         },
         "group": [
@@ -27816,8 +27889,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 422,
-            "end": 423
+            "start": 436,
+            "end": 437
         },
         "context": {
             "type": "variable",
@@ -27825,8 +27898,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 424,
-                "end": 424
+                "start": 438,
+                "end": 438
             }
         },
         "group": [
@@ -27841,8 +27914,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 425,
-            "end": 426
+            "start": 439,
+            "end": 440
         },
         "context": {
             "type": "variable",
@@ -27850,8 +27923,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 427,
-                "end": 427
+                "start": 441,
+                "end": 441
             }
         },
         "group": [
@@ -27866,8 +27939,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 428,
-            "end": 429
+            "start": 442,
+            "end": 443
         },
         "context": {
             "type": "variable",
@@ -27875,8 +27948,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 430,
-                "end": 430
+                "start": 444,
+                "end": 444
             }
         },
         "group": [
@@ -29388,6 +29461,506 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The text color of the Prompt.\n",
+        "commentRange": {
+            "start": 3,
+            "end": 4
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-text",
+            "value": "$kendo-component-text",
+            "scope": "default",
+            "line": {
+                "start": 5,
+                "end": 5
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the Prompt.\n",
+        "commentRange": {
+            "start": 6,
+            "end": 7
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-bg",
+            "value": "$kendo-component-bg",
+            "scope": "default",
+            "line": {
+                "start": 8,
+                "end": 8
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the Prompt.\n",
+        "commentRange": {
+            "start": 9,
+            "end": 10
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-border",
+            "value": "$kendo-component-border",
+            "scope": "default",
+            "line": {
+                "start": 11,
+                "end": 11
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the Prompt header.\n",
+        "commentRange": {
+            "start": 13,
+            "end": 14
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-header-text",
+            "value": "$kendo-component-header-text",
+            "scope": "default",
+            "line": {
+                "start": 15,
+                "end": 15
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the Prompt header.\n",
+        "commentRange": {
+            "start": 16,
+            "end": 17
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-header-bg",
+            "value": "$kendo-component-bg",
+            "scope": "default",
+            "line": {
+                "start": 18,
+                "end": 18
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the Prompt header.\n",
+        "commentRange": {
+            "start": 19,
+            "end": 20
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-header-border",
+            "value": "$kendo-component-header-border",
+            "scope": "default",
+            "line": {
+                "start": 21,
+                "end": 21
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the Prompt content.\n",
+        "commentRange": {
+            "start": 23,
+            "end": 24
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-content-padding-y",
+            "value": "k-map-get( $kendo-spacing, 4 )",
+            "scope": "default",
+            "line": {
+                "start": 25,
+                "end": 25
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the Prompt content.\n",
+        "commentRange": {
+            "start": 26,
+            "end": 27
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-content-padding-x",
+            "value": "k-map-get( $kendo-spacing, 4 )",
+            "scope": "default",
+            "line": {
+                "start": 28,
+                "end": 28
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the items of the Prompt content.\n",
+        "commentRange": {
+            "start": 29,
+            "end": 30
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-content-spacing",
+            "value": "k-map-get( $kendo-spacing, 4 )",
+            "scope": "default",
+            "line": {
+                "start": 31,
+                "end": 31
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the Prompt content.\n",
+        "commentRange": {
+            "start": 32,
+            "end": 33
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-content-text",
+            "value": "$kendo-component-header-text",
+            "scope": "default",
+            "line": {
+                "start": 34,
+                "end": 34
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the Prompt content.\n",
+        "commentRange": {
+            "start": 35,
+            "end": 36
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-content-bg",
+            "value": "$kendo-component-header-bg",
+            "scope": "default",
+            "line": {
+                "start": 37,
+                "end": 37
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text border of the Prompt content.\n",
+        "commentRange": {
+            "start": 38,
+            "end": 39
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-content-border",
+            "value": "$kendo-component-header-border",
+            "scope": "default",
+            "line": {
+                "start": 40,
+                "end": 40
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the items of the Prompt content expander.\n",
+        "commentRange": {
+            "start": 42,
+            "end": 43
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-expander-spacing",
+            "value": "k-map-get( $kendo-spacing, 2 )",
+            "scope": "default",
+            "line": {
+                "start": 44,
+                "end": 44
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 46,
+            "end": 47
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-padding-y",
+            "value": "k-map-get( $kendo-spacing, 2 )",
+            "scope": "default",
+            "line": {
+                "start": 48,
+                "end": 48
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 49,
+            "end": 50
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-padding-x",
+            "value": "k-map-get( $kendo-spacing, 2 )",
+            "scope": "default",
+            "line": {
+                "start": 51,
+                "end": 51
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border radius of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 52,
+            "end": 53
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-border-radius",
+            "value": "$kendo-border-radius-md",
+            "scope": "default",
+            "line": {
+                "start": 54,
+                "end": 54
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 55,
+            "end": 56
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-text",
+            "value": "$kendo-component-text",
+            "scope": "default",
+            "line": {
+                "start": 57,
+                "end": 57
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 58,
+            "end": 59
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-bg",
+            "value": "$kendo-body-bg",
+            "scope": "default",
+            "line": {
+                "start": 60,
+                "end": 60
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 61,
+            "end": 62
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-border",
+            "value": "$kendo-component-border",
+            "scope": "default",
+            "line": {
+                "start": 63,
+                "end": 63
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The elevation of the Prompt suggestion container.\n",
+        "commentRange": {
+            "start": 64,
+            "end": 65
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-prompt-suggestion-shadow",
+            "value": "k-elevation(1)",
+            "scope": "default",
+            "line": {
+                "start": 66,
+                "end": 66
+            }
+        },
+        "group": [
+            "prompt"
+        ],
+        "access": "public",
+        "file": {
+            "path": "prompt/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The border radius of the RadioButton.\n",
         "commentRange": {
@@ -31697,7 +32270,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-skeleton-item-bg",
-            "value": "rgba( $kendo-color-inverse, .2 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))",
             "scope": "default",
             "line": {
                 "start": 20,
@@ -32372,7 +32945,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-border",
-            "value": "k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )",
+            "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))",
             "scope": "default",
             "line": {
                 "start": 65,
@@ -32422,7 +32995,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-ring",
-            "value": ".25rem solid rgba( $kendo-color-primary, .25 )",
+            "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -32447,7 +33020,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-disabled-bg",
-            "value": "if( $kendo-is-dark-theme, $gray-800, $gray-200 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))",
             "scope": "default",
             "line": {
                 "start": 75,
@@ -33047,7 +33620,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-ring",
-            "value": ".25rem solid rgba( $kendo-switch-on-track-border, .25 )",
+            "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))",
             "scope": "default",
             "line": {
                 "start": 153,
@@ -33072,7 +33645,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-disabled-bg",
-            "value": "k-try-tint( $kendo-switch-on-track-bg, 50% )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))",
             "scope": "default",
             "line": {
                 "start": 157,
@@ -33172,7 +33745,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-bg",
-            "value": "k-contrast-color( $kendo-switch-on-track-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))",
             "scope": "default",
             "line": {
                 "start": 170,
@@ -33897,7 +34470,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-alt-row-bg",
-            "value": "rgba( k-contrast-color( $kendo-table-bg ), .04 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))",
             "scope": "default",
             "line": {
                 "start": 114,
@@ -33972,7 +34545,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "rgba( k-contrast-color( $kendo-table-bg ), .08 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -34147,7 +34720,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-selected-bg",
-            "value": "rgba( $kendo-selected-bg, .25 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))",
             "scope": "default",
             "line": {
                 "start": 150,
@@ -35747,7 +36320,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-item-shadow",
-            "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 85,
@@ -36072,7 +36645,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-bg",
-            "value": "if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -36097,7 +36670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-text",
-            "value": "k-contrast-color( $kendo-tooltip-bg )",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg ))",
             "scope": "default",
             "line": {
                 "start": 42,
@@ -37172,7 +37745,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-treeview-item-focus-shadow",
-            "value": "inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )",
+            "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 ))",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -37441,8 +38014,8 @@
     {
         "description": "Base font size across all components.\n",
         "commentRange": {
-            "start": 220,
-            "end": 221
+            "start": 104,
+            "end": 105
         },
         "context": {
             "type": "variable",
@@ -37450,8 +38023,8 @@
             "value": "$font-size-base",
             "scope": "default",
             "line": {
-                "start": 222,
-                "end": 222
+                "start": 106,
+                "end": 106
             }
         },
         "group": [
@@ -37466,8 +38039,8 @@
     {
         "description": "Font family for text.\n",
         "commentRange": {
-            "start": 237,
-            "end": 238
+            "start": 121,
+            "end": 122
         },
         "context": {
             "type": "variable",
@@ -37475,8 +38048,8 @@
             "value": "$font-family-sans-serif",
             "scope": "default",
             "line": {
-                "start": 239,
-                "end": 239
+                "start": 123,
+                "end": 123
             }
         },
         "group": [
@@ -37491,8 +38064,8 @@
     {
         "description": "Font family for monospaced text. Used for styling the code.\n",
         "commentRange": {
-            "start": 241,
-            "end": 242
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -37500,8 +38073,8 @@
             "value": "$font-family-monospace",
             "scope": "default",
             "line": {
-                "start": 243,
-                "end": 243
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -37516,8 +38089,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 245,
-            "end": 246
+            "start": 129,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -37525,8 +38098,8 @@
             "value": "$kendo-font-family-sans-serif",
             "scope": "default",
             "line": {
-                "start": 247,
-                "end": 247
+                "start": 131,
+                "end": 131
             }
         },
         "group": [
@@ -37541,8 +38114,8 @@
     {
         "description": "Line height used along with $kendo-font-size.\n",
         "commentRange": {
-            "start": 249,
-            "end": 250
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
@@ -37550,8 +38123,8 @@
             "value": "$line-height-base",
             "scope": "default",
             "line": {
-                "start": 251,
-                "end": 251
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -37566,8 +38139,8 @@
     {
         "description": "Border radius for all components.\n",
         "commentRange": {
-            "start": 96,
-            "end": 96
+            "start": 81,
+            "end": 81
         },
         "context": {
             "type": "variable",
@@ -37575,8 +38148,8 @@
             "value": "$border-radius",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 82,
+                "end": 82
             }
         },
         "access": "public",
@@ -37588,11 +38161,36 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The font size of the large Chip.\n",
+        "commentRange": {
+            "start": 48,
+            "end": 48
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-chip-lg-font-size",
+            "value": "$kendo-font-size-md",
+            "scope": "default",
+            "line": {
+                "start": 49,
+                "end": 49
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "chip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The background of the components' chrome area.\n",
         "commentRange": {
-            "start": 303,
-            "end": 303
+            "start": 341,
+            "end": 341
         },
         "context": {
             "type": "variable",
@@ -37600,8 +38198,8 @@
             "value": "$gray-100",
             "scope": "default",
             "line": {
-                "start": 304,
-                "end": 304
+                "start": 342,
+                "end": 342
             }
         },
         "access": "public",
@@ -37609,15 +38207,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The text color of the components' chrome area.\n",
         "commentRange": {
-            "start": 305,
-            "end": 305
+            "start": 343,
+            "end": 343
         },
         "context": {
             "type": "variable",
@@ -37625,8 +38223,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 306,
-                "end": 306
+                "start": 344,
+                "end": 344
             }
         },
         "access": "public",
@@ -37634,15 +38232,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border color of the components' chrome area.\n",
         "commentRange": {
-            "start": 307,
-            "end": 307
+            "start": 345,
+            "end": 345
         },
         "context": {
             "type": "variable",
@@ -37650,8 +38248,8 @@
             "value": "k-try-shade( $kendo-base-bg, 1 )",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 346,
+                "end": 346
             }
         },
         "access": "public",
@@ -37659,15 +38257,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The gradient background of the components' chrome area.\n",
         "commentRange": {
-            "start": 309,
-            "end": 309
+            "start": 347,
+            "end": 347
         },
         "context": {
             "type": "variable",
@@ -37675,8 +38273,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 310,
-                "end": 310
+                "start": 348,
+                "end": 348
             }
         },
         "access": "public",
@@ -37684,15 +38282,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The background of hovered items.\n",
         "commentRange": {
-            "start": 312,
-            "end": 312
+            "start": 350,
+            "end": 350
         },
         "context": {
             "type": "variable",
@@ -37700,8 +38298,8 @@
             "value": "$gray-200",
             "scope": "default",
             "line": {
-                "start": 313,
-                "end": 313
+                "start": 351,
+                "end": 351
             }
         },
         "access": "public",
@@ -37709,15 +38307,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The text color of hovered items.\n",
         "commentRange": {
-            "start": 314,
-            "end": 314
+            "start": 352,
+            "end": 352
         },
         "context": {
             "type": "variable",
@@ -37725,8 +38323,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 315,
-                "end": 315
+                "start": 353,
+                "end": 353
             }
         },
         "access": "public",
@@ -37734,15 +38332,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border color of hovered items.\n",
         "commentRange": {
-            "start": 316,
-            "end": 316
+            "start": 354,
+            "end": 354
         },
         "context": {
             "type": "variable",
@@ -37750,8 +38348,8 @@
             "value": "k-try-shade( $kendo-hover-bg, 1 )",
             "scope": "default",
             "line": {
-                "start": 317,
-                "end": 317
+                "start": 355,
+                "end": 355
             }
         },
         "access": "public",
@@ -37759,15 +38357,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The gradient background of hovered items.\n",
         "commentRange": {
-            "start": 318,
-            "end": 318
+            "start": 356,
+            "end": 356
         },
         "context": {
             "type": "variable",
@@ -37775,8 +38373,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 319,
-                "end": 319
+                "start": 357,
+                "end": 357
             }
         },
         "access": "public",
@@ -37784,15 +38382,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The background of selected items.\n",
         "commentRange": {
-            "start": 321,
-            "end": 321
+            "start": 359,
+            "end": 359
         },
         "context": {
             "type": "variable",
@@ -37800,8 +38398,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 322,
-                "end": 322
+                "start": 360,
+                "end": 360
             }
         },
         "access": "public",
@@ -37809,15 +38407,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The text color of selected items.\n",
         "commentRange": {
-            "start": 323,
-            "end": 323
+            "start": 361,
+            "end": 361
         },
         "context": {
             "type": "variable",
@@ -37825,8 +38423,8 @@
             "value": "k-contrast-color( $kendo-selected-bg )",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 362,
+                "end": 362
             }
         },
         "access": "public",
@@ -37834,15 +38432,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border color of selected items.\n",
         "commentRange": {
-            "start": 325,
-            "end": 325
+            "start": 363,
+            "end": 363
         },
         "context": {
             "type": "variable",
@@ -37850,8 +38448,8 @@
             "value": "k-try-shade( $kendo-selected-bg, 1 )",
             "scope": "default",
             "line": {
-                "start": 326,
-                "end": 326
+                "start": 364,
+                "end": 364
             }
         },
         "access": "public",
@@ -37859,15 +38457,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The gradient background of selected items.\n",
         "commentRange": {
-            "start": 327,
-            "end": 327
+            "start": 365,
+            "end": 365
         },
         "context": {
             "type": "variable",
@@ -37875,8 +38473,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 328,
-                "end": 328
+                "start": 366,
+                "end": 366
             }
         },
         "access": "public",
@@ -37884,24 +38482,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "The font size of the large Chip.\n",
+        "description": "Text color of disabled items.\n",
         "commentRange": {
-            "start": 48,
-            "end": 48
+            "start": 373,
+            "end": 373
         },
         "context": {
             "type": "variable",
-            "name": "kendo-chip-lg-font-size",
-            "value": "$kendo-font-size-md",
+            "name": "kendo-disabled-text",
+            "value": "if( $kendo-is-dark-theme, $gray-600, $gray-500)",
             "scope": "default",
             "line": {
-                "start": 49,
-                "end": 49
+                "start": 374,
+                "end": 374
             }
         },
         "access": "public",
@@ -37909,8 +38507,8 @@
             "undefined"
         ],
         "file": {
-            "path": "chip/_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -38247,7 +38845,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-upload-dropzone-hover-bg",
-            "value": "k-try-shade( $kendo-upload-dropzone-bg, .2 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 ))",
             "scope": "default",
             "line": {
                 "start": 46,