@progress/kendo-theme-material 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,
@@ -2683,7 +2683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-focus-bg",
-            "value": "k-map-get( $theme, focus-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg ))",
             "scope": "default",
             "line": {
                 "start": 150,
@@ -2933,7 +2933,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-root-link-focus-bg",
-            "value": "k-map-get( $theme, focus-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg ))",
             "scope": "default",
             "line": {
                 "start": 183,
@@ -4333,7 +4333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-disabled-bg",
-            "value": "k-try-shade( $kendo-body-bg, 12% )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-shade( $kendo-body-bg, 12% ))",
             "scope": "default",
             "line": {
                 "start": 193,
@@ -4358,7 +4358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-disabled-text",
-            "value": "$kendo-disabled-text",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), $kendo-disabled-text)",
             "scope": "default",
             "line": {
                 "start": 196,
@@ -4383,7 +4383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-disabled-border",
-            "value": "$kendo-button-disabled-bg",
+            "value": "if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg)",
             "scope": "default",
             "line": {
                 "start": 199,
@@ -6333,7 +6333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-a",
-            "value": "get-base-hue( purple, 500 )",
+            "value": "if($kendo-enable-color-system, k-color( series-a ), get-base-hue( purple, 500 ))",
             "scope": "default",
             "line": {
                 "start": 8,
@@ -6358,7 +6358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-b",
-            "value": "get-base-hue( blue, 500 )",
+            "value": "if($kendo-enable-color-system, k-color( series-b ), get-base-hue( blue, 500 ))",
             "scope": "default",
             "line": {
                 "start": 16,
@@ -6383,7 +6383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-c",
-            "value": "get-base-hue( teal, 500 )",
+            "value": "if($kendo-enable-color-system, k-color( series-c ), get-base-hue( teal, 500 ))",
             "scope": "default",
             "line": {
                 "start": 24,
@@ -6408,7 +6408,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-d",
-            "value": "get-base-hue( yellow, 500 )",
+            "value": "if($kendo-enable-color-system, k-color( series-d ), get-base-hue( yellow, 500 ))",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -6433,7 +6433,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-e",
-            "value": "get-base-hue( red, 500 )",
+            "value": "if($kendo-enable-color-system, k-color( series-e ), get-base-hue( red, 500 ))",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -6458,7 +6458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-f",
-            "value": "get-base-hue( green, 500 )",
+            "value": "if($kendo-enable-color-system, k-color( series-f ), get-base-hue( green, 500 ))",
             "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": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 )",
             "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,
@@ -7258,7 +7258,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-border",
-            "value": "k-try-shade( $kendo-component-bg, 4 )",
+            "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 ))",
             "scope": "default",
             "line": {
                 "start": 120,
@@ -7308,7 +7308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-checked-text",
-            "value": "k-contrast-color( $kendo-checkbox-disabled-checked-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))",
             "scope": "default",
             "line": {
                 "start": 128,
@@ -8233,7 +8233,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-base-bg",
-            "value": "if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black))",
             "scope": "default",
             "line": {
                 "start": 95,
@@ -8283,7 +8283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-bg",
-            "value": "if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )))",
             "scope": "default",
             "line": {
                 "start": 109,
@@ -8408,7 +8408,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-focus-bg",
-            "value": "k-try-tint( $kendo-chip-base-bg, 80% )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -8458,7 +8458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-hover-bg",
-            "value": "k-try-tint( $kendo-chip-base-bg, 84% )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% ))",
             "scope": "default",
             "line": {
                 "start": 132,
@@ -8508,7 +8508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-selected-bg",
-            "value": "k-try-tint( $kendo-chip-base-bg, 76% )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% ))",
             "scope": "default",
             "line": {
                 "start": 139,
@@ -8658,7 +8658,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-hover-bg",
-            "value": "k-try-tint( $kendo-chip-base-bg, 92% )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% ))",
             "scope": "default",
             "line": {
                 "start": 159,
@@ -8683,7 +8683,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-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 162,
@@ -8708,7 +8708,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-selected-bg",
-            "value": "k-try-tint( $kendo-chip-base-bg, 84% )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% ))",
             "scope": "default",
             "line": {
                 "start": 166,
@@ -9850,62 +9850,35 @@
         }
     },
     {
-        "description": "The color white.\nNote: you cannot change this value.\n",
+        "description": "The global default Colors map.\n",
         "commentRange": {
-            "start": 3,
-            "end": 6
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-white",
-            "value": "#ffffff",
-            "scope": "private",
-            "line": {
-                "start": 7,
-                "end": 7
-            }
-        },
-        "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": 9,
-            "end": 12
+            "start": 178,
+            "end": 179
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-black",
-            "value": "#000000",
-            "scope": "private",
+            "name": "kendo-colors",
+            "value": "$_default-colors",
+            "scope": "default",
             "line": {
-                "start": 13,
-                "end": 13
+                "start": 180,
+                "end": 180
             }
         },
-        "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": 190,
-            "end": 193
+            "start": 247,
+            "end": 250
         },
         "context": {
             "type": "variable",
@@ -9913,8 +9886,8 @@
             "value": "material-color( $primary-palette, main )",
             "scope": "default",
             "line": {
-                "start": 194,
-                "end": 194
+                "start": 251,
+                "end": 251
             }
         },
         "group": [
@@ -9923,15 +9896,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": 198,
-            "end": 201
+            "start": 255,
+            "end": 258
         },
         "context": {
             "type": "variable",
@@ -9939,8 +9912,8 @@
             "value": "material-color( $primary-palette, main-contrast )",
             "scope": "default",
             "line": {
-                "start": 202,
-                "end": 202
+                "start": 259,
+                "end": 259
             }
         },
         "group": [
@@ -9949,15 +9922,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": 204,
-            "end": 206
+            "start": 261,
+            "end": 263
         },
         "context": {
             "type": "variable",
@@ -9965,8 +9938,8 @@
             "value": "material-color( $secondary-palette, main )",
             "scope": "default",
             "line": {
-                "start": 207,
-                "end": 207
+                "start": 264,
+                "end": 264
             }
         },
         "group": [
@@ -9975,15 +9948,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": 211,
-            "end": 214
+            "start": 268,
+            "end": 271
         },
         "context": {
             "type": "variable",
@@ -9991,8 +9964,8 @@
             "value": "material-color( $secondary-palette, main-contrast )",
             "scope": "default",
             "line": {
-                "start": 215,
-                "end": 215
+                "start": 272,
+                "end": 272
             }
         },
         "group": [
@@ -10001,15 +9974,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": 217,
-            "end": 219
+            "start": 274,
+            "end": 276
         },
         "context": {
             "type": "variable",
@@ -10017,8 +9990,8 @@
             "value": "material-color($tertiary-palette, main)",
             "scope": "default",
             "line": {
-                "start": 220,
-                "end": 220
+                "start": 277,
+                "end": 277
             }
         },
         "group": [
@@ -10027,15 +10000,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": 224,
-            "end": 227
+            "start": 281,
+            "end": 284
         },
         "context": {
             "type": "variable",
@@ -10043,8 +10016,8 @@
             "value": "material-color($tertiary-palette, main-contrast)",
             "scope": "default",
             "line": {
-                "start": 228,
-                "end": 228
+                "start": 285,
+                "end": 285
             }
         },
         "group": [
@@ -10053,15 +10026,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": 230,
-            "end": 232
+            "start": 287,
+            "end": 289
         },
         "context": {
             "type": "variable",
@@ -10069,8 +10042,8 @@
             "value": "#0058e9",
             "scope": "default",
             "line": {
-                "start": 233,
-                "end": 233
+                "start": 290,
+                "end": 290
             }
         },
         "group": [
@@ -10079,15 +10052,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": 237,
-            "end": 239
+            "start": 294,
+            "end": 296
         },
         "context": {
             "type": "variable",
@@ -10095,8 +10068,8 @@
             "value": "#37b400",
             "scope": "default",
             "line": {
-                "start": 240,
-                "end": 240
+                "start": 297,
+                "end": 297
             }
         },
         "group": [
@@ -10105,15 +10078,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": 244,
-            "end": 246
+            "start": 301,
+            "end": 303
         },
         "context": {
             "type": "variable",
@@ -10121,8 +10094,8 @@
             "value": "#ffc000",
             "scope": "default",
             "line": {
-                "start": 247,
-                "end": 247
+                "start": 304,
+                "end": 304
             }
         },
         "group": [
@@ -10131,15 +10104,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": 251,
-            "end": 253
+            "start": 308,
+            "end": 310
         },
         "context": {
             "type": "variable",
@@ -10147,8 +10120,8 @@
             "value": "#f31700",
             "scope": "default",
             "line": {
-                "start": 254,
-                "end": 254
+                "start": 311,
+                "end": 311
             }
         },
         "group": [
@@ -10157,15 +10130,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": 258,
-            "end": 260
+            "start": 315,
+            "end": 317
         },
         "context": {
             "type": "variable",
@@ -10173,8 +10146,8 @@
             "value": "get-base-hue( gray, 800 )",
             "scope": "default",
             "line": {
-                "start": 261,
-                "end": 261
+                "start": 318,
+                "end": 318
             }
         },
         "group": [
@@ -10183,15 +10156,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": 263,
-            "end": 265
+            "start": 320,
+            "end": 322
         },
         "context": {
             "type": "variable",
@@ -10199,8 +10172,8 @@
             "value": "get-base-hue( gray, 100 )",
             "scope": "default",
             "line": {
-                "start": 266,
-                "end": 266
+                "start": 323,
+                "end": 323
             }
         },
         "group": [
@@ -10209,15 +10182,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": 268,
-            "end": 269
+            "start": 325,
+            "end": 326
         },
         "context": {
             "type": "variable",
@@ -10225,8 +10198,8 @@
             "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
             "scope": "default",
             "line": {
-                "start": 270,
-                "end": 270
+                "start": 327,
+                "end": 327
             }
         },
         "group": [
@@ -10234,60 +10207,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color white.\nNote: you cannot change this value.\n",
-        "commentRange": {
-            "start": 3,
-            "end": 6
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-white",
-            "value": "#ffffff",
-            "scope": "private",
-            "line": {
-                "start": 7,
-                "end": 7
-            }
-        },
-        "type": "Color",
-        "group": [
-            "color-system"
-        ],
-        "access": "public",
-        "file": {
-            "path": "core/color-system/_color-system-material.scss",
-            "name": "_color-system-material.scss"
-        }
-    },
-    {
-        "description": "The color black.\nNote: you cannot change this value.\n",
-        "commentRange": {
-            "start": 9,
-            "end": 12
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-black",
-            "value": "#000000",
-            "scope": "private",
-            "line": {
-                "start": 13,
-                "end": 13
-            }
-        },
-        "type": "Color",
-        "group": [
-            "color-system"
-        ],
-        "access": "public",
-        "file": {
-            "path": "core/color-system/_color-system-material.scss",
-            "name": "_color-system-material.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -11093,8 +11014,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": 362,
-            "end": 364
+            "start": 361,
+            "end": 363
         },
         "context": {
             "type": "variable",
@@ -11102,8 +11023,8 @@
             "value": "k-map-get( $theme, component-bg )",
             "scope": "default",
             "line": {
-                "start": 365,
-                "end": 365
+                "start": 364,
+                "end": 364
             }
         },
         "group": [
@@ -11111,15 +11032,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": 366,
-            "end": 368
+            "start": 365,
+            "end": 367
         },
         "context": {
             "type": "variable",
@@ -11127,8 +11048,8 @@
             "value": "k-map-get( $theme, component-text )",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 368,
+                "end": 368
             }
         },
         "group": [
@@ -11136,15 +11057,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": 370,
-            "end": 372
+            "start": 369,
+            "end": 371
         },
         "context": {
             "type": "variable",
@@ -11152,8 +11073,8 @@
             "value": "k-map-get( $theme, component-border )",
             "scope": "default",
             "line": {
-                "start": 373,
-                "end": 373
+                "start": 372,
+                "end": 372
             }
         },
         "group": [
@@ -11161,8 +11082,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -12074,7 +11995,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-indicator-hover-bg",
-            "value": "k-color-mix( $kendo-color-white, $kendo-color-primary, 8% )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ))",
             "scope": "default",
             "line": {
                 "start": 94,
@@ -12199,7 +12120,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,
@@ -12474,7 +12395,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-bg",
-            "value": "k-try-shade( $kendo-base-bg, 1 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 ))",
             "scope": "default",
             "line": {
                 "start": 28,
@@ -12574,7 +12495,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-icon-text",
-            "value": "k-try-tint( $kendo-dropzone-text, 4 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -12974,7 +12895,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,
@@ -13974,7 +13895,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-file-manager-toolbar-bg",
-            "value": "k-try-shade( $kendo-button-bg, .5 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 ))",
             "scope": "default",
             "line": {
                 "start": 33,
@@ -14674,7 +14595,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,
@@ -15124,7 +15045,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,
@@ -18868,17 +18789,17 @@
     {
         "description": "Background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 307,
-            "end": 308
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-hover-bg",
-            "value": "rgba( k-contrast-color( $kendo-grid-bg ), .24 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .24 ))",
             "scope": "default",
             "line": {
-                "start": 309,
-                "end": 309
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -18893,8 +18814,8 @@
     {
         "description": "Active background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 310,
-            "end": 311
+            "start": 313,
+            "end": 314
         },
         "context": {
             "type": "variable",
@@ -18902,8 +18823,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 312,
-                "end": 312
+                "start": 315,
+                "end": 315
             }
         },
         "group": [
@@ -18918,8 +18839,8 @@
     {
         "description": "Height of the grid row resize indicator\n",
         "commentRange": {
-            "start": 313,
-            "end": 314
+            "start": 316,
+            "end": 317
         },
         "context": {
             "type": "variable",
@@ -18927,8 +18848,8 @@
             "value": "k-map-get( $kendo-spacing, .5 )",
             "scope": "default",
             "line": {
-                "start": 315,
-                "end": 315
+                "start": 318,
+                "end": 318
             }
         },
         "group": [
@@ -19474,7 +19395,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-bg",
-            "value": "k-try-shade( $kendo-component-bg, .5 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 ))",
             "scope": "default",
             "line": {
                 "start": 102,
@@ -19524,7 +19445,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-border",
-            "value": "rgba( $kendo-component-border, .38 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 ))",
             "scope": "default",
             "line": {
                 "start": 108,
@@ -19818,17 +19739,17 @@
     {
         "description": "The background color of the disabled Input components.\n",
         "commentRange": {
-            "start": 146,
-            "end": 147
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
             "name": "kendo-input-disabled-bg",
-            "value": "k-try-shade( $kendo-component-bg, .25 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 ))",
             "scope": "default",
             "line": {
-                "start": 148,
-                "end": 148
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -19843,17 +19764,17 @@
     {
         "description": "The text color of the disabled Input components.\n",
         "commentRange": {
-            "start": 149,
-            "end": 150
+            "start": 148,
+            "end": 149
         },
         "context": {
             "type": "variable",
             "name": "kendo-input-disabled-text",
-            "value": "$kendo-disabled-text",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text)",
             "scope": "default",
             "line": {
-                "start": 151,
-                "end": 151
+                "start": 150,
+                "end": 150
             }
         },
         "group": [
@@ -19868,17 +19789,17 @@
     {
         "description": "The border color of the disabled Input components.\n",
         "commentRange": {
-            "start": 152,
-            "end": 153
+            "start": 151,
+            "end": 152
         },
         "context": {
             "type": "variable",
             "name": "kendo-input-disabled-border",
-            "value": "rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ))",
             "scope": "default",
             "line": {
-                "start": 154,
-                "end": 154
+                "start": 153,
+                "end": 153
             }
         },
         "group": [
@@ -19893,8 +19814,8 @@
     {
         "description": "The gradient of the disabled Input components.\n",
         "commentRange": {
-            "start": 155,
-            "end": 156
+            "start": 154,
+            "end": 155
         },
         "context": {
             "type": "variable",
@@ -19902,8 +19823,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 157,
-                "end": 157
+                "start": 156,
+                "end": 156
             }
         },
         "group": [
@@ -19918,8 +19839,8 @@
     {
         "description": "The shadow of the disabled Input components.\n",
         "commentRange": {
-            "start": 158,
-            "end": 159
+            "start": 157,
+            "end": 158
         },
         "context": {
             "type": "variable",
@@ -19927,8 +19848,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 160,
-                "end": 160
+                "start": 159,
+                "end": 159
             }
         },
         "group": [
@@ -19943,8 +19864,8 @@
     {
         "description": "The background color of the outline Input components.\n",
         "commentRange": {
-            "start": 162,
-            "end": 163
+            "start": 161,
+            "end": 162
         },
         "context": {
             "type": "variable",
@@ -19952,8 +19873,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 163,
+                "end": 163
             }
         },
         "group": [
@@ -19968,8 +19889,8 @@
     {
         "description": "The text color of the outline Input components.\n",
         "commentRange": {
-            "start": 165,
-            "end": 166
+            "start": 164,
+            "end": 165
         },
         "context": {
             "type": "variable",
@@ -19977,8 +19898,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 167,
-                "end": 167
+                "start": 166,
+                "end": 166
             }
         },
         "group": [
@@ -19993,8 +19914,8 @@
     {
         "description": "The border color of the outline Input components.\n",
         "commentRange": {
-            "start": 168,
-            "end": 169
+            "start": 167,
+            "end": 168
         },
         "context": {
             "type": "variable",
@@ -20002,8 +19923,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 170,
-                "end": 170
+                "start": 169,
+                "end": 169
             }
         },
         "group": [
@@ -20018,8 +19939,8 @@
     {
         "description": "The background color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 172,
-            "end": 173
+            "start": 171,
+            "end": 172
         },
         "context": {
             "type": "variable",
@@ -20027,8 +19948,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 174,
-                "end": 174
+                "start": 173,
+                "end": 173
             }
         },
         "group": [
@@ -20043,8 +19964,8 @@
     {
         "description": "The text color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 175,
-            "end": 176
+            "start": 174,
+            "end": 175
         },
         "context": {
             "type": "variable",
@@ -20052,8 +19973,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 177,
-                "end": 177
+                "start": 176,
+                "end": 176
             }
         },
         "group": [
@@ -20068,8 +19989,8 @@
     {
         "description": "The border color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 178,
-            "end": 179
+            "start": 177,
+            "end": 178
         },
         "context": {
             "type": "variable",
@@ -20077,8 +19998,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 180,
-                "end": 180
+                "start": 179,
+                "end": 179
             }
         },
         "group": [
@@ -20093,8 +20014,8 @@
     {
         "description": "The background color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 182,
-            "end": 183
+            "start": 181,
+            "end": 182
         },
         "context": {
             "type": "variable",
@@ -20102,8 +20023,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 184,
-                "end": 184
+                "start": 183,
+                "end": 183
             }
         },
         "group": [
@@ -20118,8 +20039,8 @@
     {
         "description": "The text color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 185,
-            "end": 186
+            "start": 184,
+            "end": 185
         },
         "context": {
             "type": "variable",
@@ -20127,8 +20048,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 187,
-                "end": 187
+                "start": 186,
+                "end": 186
             }
         },
         "group": [
@@ -20143,8 +20064,8 @@
     {
         "description": "The border color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 188,
-            "end": 189
+            "start": 187,
+            "end": 188
         },
         "context": {
             "type": "variable",
@@ -20152,8 +20073,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 190,
-                "end": 190
+                "start": 189,
+                "end": 189
             }
         },
         "group": [
@@ -20168,8 +20089,8 @@
     {
         "description": "The shadow of the outline focused Input components.\n",
         "commentRange": {
-            "start": 191,
-            "end": 192
+            "start": 190,
+            "end": 191
         },
         "context": {
             "type": "variable",
@@ -20177,8 +20098,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 193,
-                "end": 193
+                "start": 192,
+                "end": 192
             }
         },
         "group": [
@@ -20193,8 +20114,8 @@
     {
         "description": "The background color of the flat Input components.\n",
         "commentRange": {
-            "start": 195,
-            "end": 196
+            "start": 194,
+            "end": 195
         },
         "context": {
             "type": "variable",
@@ -20202,8 +20123,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 197,
-                "end": 197
+                "start": 196,
+                "end": 196
             }
         },
         "group": [
@@ -20218,8 +20139,8 @@
     {
         "description": "The text color of the flat Input components.\n",
         "commentRange": {
-            "start": 198,
-            "end": 199
+            "start": 197,
+            "end": 198
         },
         "context": {
             "type": "variable",
@@ -20227,8 +20148,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 200,
-                "end": 200
+                "start": 199,
+                "end": 199
             }
         },
         "group": [
@@ -20243,8 +20164,8 @@
     {
         "description": "The border color of the flat Input components.\n",
         "commentRange": {
-            "start": 201,
-            "end": 202
+            "start": 200,
+            "end": 201
         },
         "context": {
             "type": "variable",
@@ -20252,8 +20173,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 203,
-                "end": 203
+                "start": 202,
+                "end": 202
             }
         },
         "group": [
@@ -20268,8 +20189,8 @@
     {
         "description": "The background color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 205,
-            "end": 206
+            "start": 204,
+            "end": 205
         },
         "context": {
             "type": "variable",
@@ -20277,8 +20198,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 207,
-                "end": 207
+                "start": 206,
+                "end": 206
             }
         },
         "group": [
@@ -20293,8 +20214,8 @@
     {
         "description": "The text color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 208,
-            "end": 209
+            "start": 207,
+            "end": 208
         },
         "context": {
             "type": "variable",
@@ -20302,8 +20223,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 210,
-                "end": 210
+                "start": 209,
+                "end": 209
             }
         },
         "group": [
@@ -20318,8 +20239,8 @@
     {
         "description": "The border color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 211,
-            "end": 212
+            "start": 210,
+            "end": 211
         },
         "context": {
             "type": "variable",
@@ -20327,8 +20248,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 213,
-                "end": 213
+                "start": 212,
+                "end": 212
             }
         },
         "group": [
@@ -20343,8 +20264,8 @@
     {
         "description": "The background color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 215,
-            "end": 216
+            "start": 214,
+            "end": 215
         },
         "context": {
             "type": "variable",
@@ -20352,8 +20273,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 217,
-                "end": 217
+                "start": 216,
+                "end": 216
             }
         },
         "group": [
@@ -20368,8 +20289,8 @@
     {
         "description": "The text color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 218,
-            "end": 219
+            "start": 217,
+            "end": 218
         },
         "context": {
             "type": "variable",
@@ -20377,8 +20298,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 220,
-                "end": 220
+                "start": 219,
+                "end": 219
             }
         },
         "group": [
@@ -20393,8 +20314,8 @@
     {
         "description": "The border color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 221,
-            "end": 222
+            "start": 220,
+            "end": 221
         },
         "context": {
             "type": "variable",
@@ -20402,8 +20323,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 223,
-                "end": 223
+                "start": 222,
+                "end": 222
             }
         },
         "group": [
@@ -20418,8 +20339,8 @@
     {
         "description": "The shadow of the flat focused Input components.\n",
         "commentRange": {
-            "start": 224,
-            "end": 225
+            "start": 223,
+            "end": 224
         },
         "context": {
             "type": "variable",
@@ -20427,8 +20348,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 226,
-                "end": 226
+                "start": 225,
+                "end": 225
             }
         },
         "group": [
@@ -20443,8 +20364,8 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 228,
-            "end": 229
+            "start": 227,
+            "end": 228
         },
         "context": {
             "type": "variable",
@@ -20452,8 +20373,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 230,
-                "end": 230
+                "start": 229,
+                "end": 229
             }
         },
         "group": [
@@ -20468,8 +20389,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 231,
-            "end": 232
+            "start": 230,
+            "end": 231
         },
         "context": {
             "type": "variable",
@@ -20477,8 +20398,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 233,
-                "end": 233
+                "start": 232,
+                "end": 232
             }
         },
         "group": [
@@ -20493,8 +20414,8 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 236,
-            "end": 237
+            "start": 235,
+            "end": 236
         },
         "context": {
             "type": "variable",
@@ -20502,8 +20423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 238,
-                "end": 238
+                "start": 237,
+                "end": 237
             }
         },
         "group": [
@@ -20518,8 +20439,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 239,
-            "end": 240
+            "start": 238,
+            "end": 239
         },
         "context": {
             "type": "variable",
@@ -20527,8 +20448,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 241,
-                "end": 241
+                "start": 240,
+                "end": 240
             }
         },
         "group": [
@@ -20543,8 +20464,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 242,
-            "end": 243
+            "start": 241,
+            "end": 242
         },
         "context": {
             "type": "variable",
@@ -20552,8 +20473,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 244,
-                "end": 244
+                "start": 243,
+                "end": 243
             }
         },
         "group": [
@@ -20568,8 +20489,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 245,
-            "end": 246
+            "start": 244,
+            "end": 245
         },
         "context": {
             "type": "variable",
@@ -20577,8 +20498,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 247,
-                "end": 247
+                "start": 246,
+                "end": 246
             }
         },
         "group": [
@@ -20593,8 +20514,8 @@
     {
         "description": "The vertical margin of the clear value icon.\n",
         "commentRange": {
-            "start": 249,
-            "end": 250
+            "start": 248,
+            "end": 249
         },
         "context": {
             "type": "variable",
@@ -20602,8 +20523,8 @@
             "value": "k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 251,
-                "end": 251
+                "start": 250,
+                "end": 250
             }
         },
         "group": [
@@ -20618,8 +20539,8 @@
     {
         "description": "The horizontal margin of the clear value icon.\n",
         "commentRange": {
-            "start": 252,
-            "end": 253
+            "start": 251,
+            "end": 252
         },
         "context": {
             "type": "variable",
@@ -20627,8 +20548,8 @@
             "value": "$kendo-input-values-margin-y",
             "scope": "default",
             "line": {
-                "start": 254,
-                "end": 254
+                "start": 253,
+                "end": 253
             }
         },
         "group": [
@@ -20643,8 +20564,8 @@
     {
         "description": "The width of the Input button.\n",
         "commentRange": {
-            "start": 256,
-            "end": 257
+            "start": 255,
+            "end": 256
         },
         "context": {
             "type": "variable",
@@ -20652,8 +20573,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 258,
-                "end": 258
+                "start": 257,
+                "end": 257
             }
         },
         "group": [
@@ -20668,8 +20589,8 @@
     {
         "description": "The border width of the Input button.\n",
         "commentRange": {
-            "start": 259,
-            "end": 260
+            "start": 258,
+            "end": 259
         },
         "context": {
             "type": "variable",
@@ -20677,8 +20598,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 261,
-                "end": 261
+                "start": 260,
+                "end": 260
             }
         },
         "group": [
@@ -20693,8 +20614,8 @@
     {
         "description": "The width of the Input spinner button.\n",
         "commentRange": {
-            "start": 262,
-            "end": 263
+            "start": 261,
+            "end": 262
         },
         "context": {
             "type": "variable",
@@ -20702,8 +20623,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 264,
-                "end": 264
+                "start": 263,
+                "end": 263
             }
         },
         "group": [
@@ -20718,8 +20639,8 @@
     {
         "description": "The icon offset of the Input spinner button.\n",
         "commentRange": {
-            "start": 265,
-            "end": 266
+            "start": 264,
+            "end": 265
         },
         "context": {
             "type": "variable",
@@ -20727,8 +20648,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 267,
-                "end": 267
+                "start": 266,
+                "end": 266
             }
         },
         "group": [
@@ -20743,17 +20664,17 @@
     {
         "description": "The color of the Input separator.\n",
         "commentRange": {
-            "start": 269,
-            "end": 270
+            "start": 268,
+            "end": 269
         },
         "context": {
             "type": "variable",
-            "name": "kendo-input-separator-color",
-            "value": "$kendo-input-text",
+            "name": "kendo-input-separator-text",
+            "value": "rgba( $kendo-component-border, .12 )",
             "scope": "default",
             "line": {
-                "start": 271,
-                "end": 271
+                "start": 270,
+                "end": 270
             }
         },
         "group": [
@@ -20768,8 +20689,8 @@
     {
         "description": "The opacity of the Input separator.\n",
         "commentRange": {
-            "start": 272,
-            "end": 273
+            "start": 271,
+            "end": 272
         },
         "context": {
             "type": "variable",
@@ -20777,8 +20698,58 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 274,
-                "end": 274
+                "start": 273,
+                "end": 273
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the Input prefix.\n",
+        "commentRange": {
+            "start": 275,
+            "end": 276
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-prefix-text",
+            "value": "$kendo-subtle-text",
+            "scope": "default",
+            "line": {
+                "start": 277,
+                "end": 277
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the Input suffix.\n",
+        "commentRange": {
+            "start": 278,
+            "end": 279
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-suffix-text",
+            "value": "$kendo-subtle-text",
+            "scope": "default",
+            "line": {
+                "start": 280,
+                "end": 280
             }
         },
         "group": [
@@ -20793,8 +20764,8 @@
     {
         "description": "The border color of the invalid Input components.\n",
         "commentRange": {
-            "start": 276,
-            "end": 277
+            "start": 282,
+            "end": 283
         },
         "context": {
             "type": "variable",
@@ -20802,8 +20773,8 @@
             "value": "$kendo-invalid-border",
             "scope": "default",
             "line": {
-                "start": 278,
-                "end": 278
+                "start": 284,
+                "end": 284
             }
         },
         "group": [
@@ -20818,8 +20789,8 @@
     {
         "description": "The shadow of the invalid Input components.\n",
         "commentRange": {
-            "start": 279,
-            "end": 280
+            "start": 285,
+            "end": 286
         },
         "context": {
             "type": "variable",
@@ -20827,8 +20798,58 @@
             "value": "$kendo-invalid-shadow",
             "scope": "default",
             "line": {
-                "start": 281,
-                "end": 281
+                "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": [
@@ -22549,7 +22570,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-selected-bg",
-            "value": "rgba( k-contrast-color( $kendo-listview-bg ), .04 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 ))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -22624,7 +22645,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-focus-bg",
-            "value": "rgba( k-contrast-color( $kendo-listview-bg ), .08 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 ))",
             "scope": "default",
             "line": {
                 "start": 54,
@@ -25199,7 +25220,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-text",
-            "value": "if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))",
             "scope": "default",
             "line": {
                 "start": 68,
@@ -25249,7 +25270,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-focus-bg",
-            "value": "k-try-shade( $kendo-pager-bg, .5 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 ))",
             "scope": "default",
             "line": {
                 "start": 75,
@@ -26024,7 +26045,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pdf-viewer-toolbar-bg",
-            "value": "k-try-shade( $kendo-button-bg, .25 )",
+            "value": "if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 ))",
             "scope": "default",
             "line": {
                 "start": 28,
@@ -26668,8 +26689,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 283,
-            "end": 284
+            "start": 296,
+            "end": 297
         },
         "context": {
             "type": "variable",
@@ -26677,8 +26698,8 @@
             "value": "$kendo-input-bg",
             "scope": "default",
             "line": {
-                "start": 285,
-                "end": 285
+                "start": 298,
+                "end": 298
             }
         },
         "group": [
@@ -26693,8 +26714,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 286,
-            "end": 287
+            "start": 299,
+            "end": 300
         },
         "context": {
             "type": "variable",
@@ -26702,8 +26723,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 288,
-                "end": 288
+                "start": 301,
+                "end": 301
             }
         },
         "group": [
@@ -26718,8 +26739,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 289,
-            "end": 290
+            "start": 302,
+            "end": 303
         },
         "context": {
             "type": "variable",
@@ -26727,8 +26748,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 291,
-                "end": 291
+                "start": 304,
+                "end": 304
             }
         },
         "group": [
@@ -26743,8 +26764,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 292,
-            "end": 293
+            "start": 305,
+            "end": 306
         },
         "context": {
             "type": "variable",
@@ -26752,8 +26773,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 294,
-                "end": 294
+                "start": 307,
+                "end": 307
             }
         },
         "group": [
@@ -26768,8 +26789,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 295,
-            "end": 296
+            "start": 308,
+            "end": 309
         },
         "context": {
             "type": "variable",
@@ -26777,8 +26798,8 @@
             "value": "$kendo-input-shadow",
             "scope": "default",
             "line": {
-                "start": 297,
-                "end": 297
+                "start": 310,
+                "end": 310
             }
         },
         "group": [
@@ -26793,8 +26814,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 299,
-            "end": 300
+            "start": 312,
+            "end": 313
         },
         "context": {
             "type": "variable",
@@ -26802,8 +26823,8 @@
             "value": "$kendo-input-hover-bg",
             "scope": "default",
             "line": {
-                "start": 301,
-                "end": 301
+                "start": 314,
+                "end": 314
             }
         },
         "group": [
@@ -26818,8 +26839,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 302,
-            "end": 303
+            "start": 315,
+            "end": 316
         },
         "context": {
             "type": "variable",
@@ -26827,8 +26848,8 @@
             "value": "$kendo-input-hover-text",
             "scope": "default",
             "line": {
-                "start": 304,
-                "end": 304
+                "start": 317,
+                "end": 317
             }
         },
         "group": [
@@ -26843,8 +26864,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 305,
-            "end": 306
+            "start": 318,
+            "end": 319
         },
         "context": {
             "type": "variable",
@@ -26852,8 +26873,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 307,
-                "end": 307
+                "start": 320,
+                "end": 320
             }
         },
         "group": [
@@ -26868,8 +26889,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 308,
-            "end": 309
+            "start": 321,
+            "end": 322
         },
         "context": {
             "type": "variable",
@@ -26877,8 +26898,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 310,
-                "end": 310
+                "start": 323,
+                "end": 323
             }
         },
         "group": [
@@ -26893,8 +26914,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 311,
-            "end": 312
+            "start": 324,
+            "end": 325
         },
         "context": {
             "type": "variable",
@@ -26902,8 +26923,8 @@
             "value": "$kendo-input-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 313,
-                "end": 313
+                "start": 326,
+                "end": 326
             }
         },
         "group": [
@@ -26918,8 +26939,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 315,
-            "end": 316
+            "start": 328,
+            "end": 329
         },
         "context": {
             "type": "variable",
@@ -26927,8 +26948,8 @@
             "value": "$kendo-input-focus-bg",
             "scope": "default",
             "line": {
-                "start": 317,
-                "end": 317
+                "start": 330,
+                "end": 330
             }
         },
         "group": [
@@ -26943,8 +26964,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 318,
-            "end": 319
+            "start": 331,
+            "end": 332
         },
         "context": {
             "type": "variable",
@@ -26952,8 +26973,8 @@
             "value": "$kendo-input-focus-text",
             "scope": "default",
             "line": {
-                "start": 320,
-                "end": 320
+                "start": 333,
+                "end": 333
             }
         },
         "group": [
@@ -26968,8 +26989,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 321,
-            "end": 322
+            "start": 334,
+            "end": 335
         },
         "context": {
             "type": "variable",
@@ -26977,8 +26998,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 323,
-                "end": 323
+                "start": 336,
+                "end": 336
             }
         },
         "group": [
@@ -26993,8 +27014,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 324,
-            "end": 325
+            "start": 337,
+            "end": 338
         },
         "context": {
             "type": "variable",
@@ -27002,8 +27023,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 326,
-                "end": 326
+                "start": 339,
+                "end": 339
             }
         },
         "group": [
@@ -27018,8 +27039,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 327,
-            "end": 328
+            "start": 340,
+            "end": 341
         },
         "context": {
             "type": "variable",
@@ -27027,8 +27048,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 329,
-                "end": 329
+                "start": 342,
+                "end": 342
             }
         },
         "group": [
@@ -27043,8 +27064,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 331,
-            "end": 332
+            "start": 344,
+            "end": 345
         },
         "context": {
             "type": "variable",
@@ -27052,8 +27073,8 @@
             "value": "$kendo-input-disabled-bg",
             "scope": "default",
             "line": {
-                "start": 333,
-                "end": 333
+                "start": 346,
+                "end": 346
             }
         },
         "group": [
@@ -27068,8 +27089,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 334,
-            "end": 335
+            "start": 347,
+            "end": 348
         },
         "context": {
             "type": "variable",
@@ -27077,8 +27098,8 @@
             "value": "$kendo-input-disabled-text",
             "scope": "default",
             "line": {
-                "start": 336,
-                "end": 336
+                "start": 349,
+                "end": 349
             }
         },
         "group": [
@@ -27093,8 +27114,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 337,
-            "end": 338
+            "start": 350,
+            "end": 351
         },
         "context": {
             "type": "variable",
@@ -27102,8 +27123,8 @@
             "value": "$kendo-input-disabled-border",
             "scope": "default",
             "line": {
-                "start": 339,
-                "end": 339
+                "start": 352,
+                "end": 352
             }
         },
         "group": [
@@ -27118,8 +27139,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 340,
-            "end": 341
+            "start": 353,
+            "end": 354
         },
         "context": {
             "type": "variable",
@@ -27127,8 +27148,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 342,
-                "end": 342
+                "start": 355,
+                "end": 355
             }
         },
         "group": [
@@ -27143,8 +27164,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 343,
-            "end": 344
+            "start": 356,
+            "end": 357
         },
         "context": {
             "type": "variable",
@@ -27152,8 +27173,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 345,
-                "end": 345
+                "start": 358,
+                "end": 358
             }
         },
         "group": [
@@ -27168,8 +27189,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 347,
-            "end": 348
+            "start": 360,
+            "end": 361
         },
         "context": {
             "type": "variable",
@@ -27177,8 +27198,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 349,
-                "end": 349
+                "start": 362,
+                "end": 362
             }
         },
         "group": [
@@ -27193,8 +27214,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 350,
-            "end": 351
+            "start": 363,
+            "end": 364
         },
         "context": {
             "type": "variable",
@@ -27202,8 +27223,8 @@
             "value": "$kendo-picker-text",
             "scope": "default",
             "line": {
-                "start": 352,
-                "end": 352
+                "start": 365,
+                "end": 365
             }
         },
         "group": [
@@ -27218,8 +27239,8 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 353,
-            "end": 354
+            "start": 366,
+            "end": 367
         },
         "context": {
             "type": "variable",
@@ -27227,8 +27248,8 @@
             "value": "$kendo-picker-border",
             "scope": "default",
             "line": {
-                "start": 355,
-                "end": 355
+                "start": 368,
+                "end": 368
             }
         },
         "group": [
@@ -27243,8 +27264,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 357,
-            "end": 358
+            "start": 370,
+            "end": 371
         },
         "context": {
             "type": "variable",
@@ -27252,8 +27273,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 359,
-                "end": 359
+                "start": 372,
+                "end": 372
             }
         },
         "group": [
@@ -27268,8 +27289,8 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 360,
-            "end": 361
+            "start": 373,
+            "end": 374
         },
         "context": {
             "type": "variable",
@@ -27277,8 +27298,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 362,
-                "end": 362
+                "start": 375,
+                "end": 375
             }
         },
         "group": [
@@ -27293,8 +27314,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 363,
-            "end": 364
+            "start": 376,
+            "end": 377
         },
         "context": {
             "type": "variable",
@@ -27302,8 +27323,8 @@
             "value": "$kendo-picker-hover-border",
             "scope": "default",
             "line": {
-                "start": 365,
-                "end": 365
+                "start": 378,
+                "end": 378
             }
         },
         "group": [
@@ -27318,8 +27339,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 367,
-            "end": 368
+            "start": 380,
+            "end": 381
         },
         "context": {
             "type": "variable",
@@ -27327,8 +27348,8 @@
             "value": "nul",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 382,
+                "end": 382
             }
         },
         "group": [
@@ -27343,8 +27364,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 370,
-            "end": 371
+            "start": 383,
+            "end": 384
         },
         "context": {
             "type": "variable",
@@ -27352,8 +27373,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 385,
+                "end": 385
             }
         },
         "group": [
@@ -27368,8 +27389,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 373,
-            "end": 374
+            "start": 386,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -27377,8 +27398,8 @@
             "value": "$kendo-picker-focus-border",
             "scope": "default",
             "line": {
-                "start": 375,
-                "end": 375
+                "start": 388,
+                "end": 388
             }
         },
         "group": [
@@ -27393,8 +27414,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 376,
-            "end": 377
+            "start": 389,
+            "end": 390
         },
         "context": {
             "type": "variable",
@@ -27402,8 +27423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 378,
-                "end": 378
+                "start": 391,
+                "end": 391
             }
         },
         "group": [
@@ -27418,8 +27439,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 380,
-            "end": 381
+            "start": 393,
+            "end": 394
         },
         "context": {
             "type": "variable",
@@ -27427,8 +27448,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 382,
-                "end": 382
+                "start": 395,
+                "end": 395
             }
         },
         "group": [
@@ -27443,8 +27464,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 383,
-            "end": 384
+            "start": 396,
+            "end": 397
         },
         "context": {
             "type": "variable",
@@ -27452,8 +27473,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 385,
-                "end": 385
+                "start": 398,
+                "end": 398
             }
         },
         "group": [
@@ -27468,8 +27489,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 386,
-            "end": 387
+            "start": 399,
+            "end": 400
         },
         "context": {
             "type": "variable",
@@ -27477,8 +27498,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 388,
-                "end": 388
+                "start": 401,
+                "end": 401
             }
         },
         "group": [
@@ -27493,8 +27514,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 390,
-            "end": 391
+            "start": 403,
+            "end": 404
         },
         "context": {
             "type": "variable",
@@ -27502,8 +27523,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 405,
+                "end": 405
             }
         },
         "group": [
@@ -27518,8 +27539,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 393,
-            "end": 394
+            "start": 406,
+            "end": 407
         },
         "context": {
             "type": "variable",
@@ -27527,8 +27548,8 @@
             "value": "$kendo-picker-text",
             "scope": "default",
             "line": {
-                "start": 395,
-                "end": 395
+                "start": 408,
+                "end": 408
             }
         },
         "group": [
@@ -27543,8 +27564,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 396,
-            "end": 397
+            "start": 409,
+            "end": 410
         },
         "context": {
             "type": "variable",
@@ -27552,8 +27573,8 @@
             "value": "$kendo-picker-border",
             "scope": "default",
             "line": {
-                "start": 398,
-                "end": 398
+                "start": 411,
+                "end": 411
             }
         },
         "group": [
@@ -27568,8 +27589,8 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 400,
-            "end": 401
+            "start": 413,
+            "end": 414
         },
         "context": {
             "type": "variable",
@@ -27577,8 +27598,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 402,
-                "end": 402
+                "start": 415,
+                "end": 415
             }
         },
         "group": [
@@ -27593,8 +27614,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 403,
-            "end": 404
+            "start": 416,
+            "end": 417
         },
         "context": {
             "type": "variable",
@@ -27602,8 +27623,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 405,
-                "end": 405
+                "start": 418,
+                "end": 418
             }
         },
         "group": [
@@ -27618,8 +27639,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 410,
-            "end": 411
+            "start": 423,
+            "end": 424
         },
         "context": {
             "type": "variable",
@@ -27627,8 +27648,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 412,
-                "end": 412
+                "start": 425,
+                "end": 425
             }
         },
         "group": [
@@ -27643,8 +27664,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 413,
-            "end": 414
+            "start": 426,
+            "end": 427
         },
         "context": {
             "type": "variable",
@@ -27652,8 +27673,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 415,
-                "end": 415
+                "start": 428,
+                "end": 428
             }
         },
         "group": [
@@ -27668,8 +27689,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 416,
-            "end": 417
+            "start": 429,
+            "end": 430
         },
         "context": {
             "type": "variable",
@@ -27677,8 +27698,8 @@
             "value": "$kendo-picker-focus-border",
             "scope": "default",
             "line": {
-                "start": 418,
-                "end": 418
+                "start": 431,
+                "end": 431
             }
         },
         "group": [
@@ -27693,8 +27714,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 419,
-            "end": 420
+            "start": 432,
+            "end": 433
         },
         "context": {
             "type": "variable",
@@ -27702,8 +27723,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 421,
-                "end": 421
+                "start": 434,
+                "end": 434
             }
         },
         "group": [
@@ -27718,8 +27739,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 423,
-            "end": 424
+            "start": 436,
+            "end": 437
         },
         "context": {
             "type": "variable",
@@ -27727,8 +27748,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 425,
-                "end": 425
+                "start": 438,
+                "end": 438
             }
         },
         "group": [
@@ -27743,8 +27764,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 426,
-            "end": 427
+            "start": 439,
+            "end": 440
         },
         "context": {
             "type": "variable",
@@ -27752,8 +27773,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 428,
-                "end": 428
+                "start": 441,
+                "end": 441
             }
         },
         "group": [
@@ -27768,8 +27789,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 429,
-            "end": 430
+            "start": 442,
+            "end": 443
         },
         "context": {
             "type": "variable",
@@ -27777,8 +27798,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 431,
-                "end": 431
+                "start": 444,
+                "end": 444
             }
         },
         "group": [
@@ -27793,8 +27814,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 406,
-            "end": 407
+            "start": 419,
+            "end": 420
         },
         "context": {
             "type": "variable",
@@ -27802,8 +27823,8 @@
             "value": "$kendo-picker-hover-border",
             "scope": "default",
             "line": {
-                "start": 408,
-                "end": 408
+                "start": 421,
+                "end": 421
             }
         },
         "group": [
@@ -28949,7 +28970,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-bg",
-            "value": "k-try-tint( $kendo-color-primary, 8 )",
+            "value": "if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 ))",
             "scope": "default",
             "line": {
                 "start": 27,
@@ -29315,6 +29336,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": {
@@ -31515,36 +32036,11 @@
             "name": "_variables.scss"
         }
     },
-    {
-        "description": "Color of shadows\n",
-        "commentRange": {
-            "start": 89,
-            "end": 90
-        },
-        "context": {
-            "type": "variable",
-            "name": "elevation",
-            "value": "k-map-get( $theme, elevation )",
-            "scope": "default",
-            "line": {
-                "start": 91,
-                "end": 91
-            }
-        },
-        "group": [
-            "shadows"
-        ],
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
     {
         "description": "Shadow for switch.\nEquivalent to material elevation 1.\n",
         "commentRange": {
-            "start": 93,
-            "end": 96
+            "start": 59,
+            "end": 62
         },
         "context": {
             "type": "variable",
@@ -31552,8 +32048,8 @@
             "value": "k-elevation(1)",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 63,
+                "end": 63
             }
         },
         "group": [
@@ -31569,8 +32065,8 @@
     {
         "description": "Shadow for resting state of button, card and other widgets.\nEquivalent to material elevation 2.\n",
         "commentRange": {
-            "start": 98,
-            "end": 101
+            "start": 64,
+            "end": 67
         },
         "context": {
             "type": "variable",
@@ -31578,8 +32074,8 @@
             "value": "k-elevation(2)",
             "scope": "default",
             "line": {
-                "start": 102,
-                "end": 102
+                "start": 68,
+                "end": 68
             }
         },
         "group": [
@@ -31595,8 +32091,8 @@
     {
         "description": "Shadow for menu, popups and raised state of button and card.\nEquivalent to material elevation 3.\n",
         "commentRange": {
-            "start": 103,
-            "end": 106
+            "start": 69,
+            "end": 72
         },
         "context": {
             "type": "variable",
@@ -31604,8 +32100,8 @@
             "value": "k-elevation(3)",
             "scope": "default",
             "line": {
-                "start": 107,
-                "end": 107
+                "start": 73,
+                "end": 73
             }
         },
         "group": [
@@ -31621,8 +32117,8 @@
     {
         "description": "Shadow for drawers and other overlaying elements.\nEquivalent to material elevation 4.\n",
         "commentRange": {
-            "start": 108,
-            "end": 111
+            "start": 74,
+            "end": 77
         },
         "context": {
             "type": "variable",
@@ -31630,8 +32126,8 @@
             "value": "k-elevation(4)",
             "scope": "default",
             "line": {
-                "start": 112,
-                "end": 112
+                "start": 78,
+                "end": 78
             }
         },
         "group": [
@@ -31647,8 +32143,8 @@
     {
         "description": "Shadow for window and dialog.\nEquivalent to material elevation 6.\n",
         "commentRange": {
-            "start": 113,
-            "end": 116
+            "start": 79,
+            "end": 82
         },
         "context": {
             "type": "variable",
@@ -31656,8 +32152,8 @@
             "value": "k-elevation(5)",
             "scope": "default",
             "line": {
-                "start": 117,
-                "end": 117
+                "start": 83,
+                "end": 83
             }
         },
         "group": [
@@ -31673,8 +32169,8 @@
     {
         "description": "Shadow for window and dialog.\nEquivalent to material elevation 8.\n",
         "commentRange": {
-            "start": 118,
-            "end": 121
+            "start": 84,
+            "end": 87
         },
         "context": {
             "type": "variable",
@@ -31682,8 +32178,8 @@
             "value": "k-elevation(6)",
             "scope": "default",
             "line": {
-                "start": 122,
-                "end": 122
+                "start": 88,
+                "end": 88
             }
         },
         "group": [
@@ -31699,8 +32195,8 @@
     {
         "description": "Shadow for window and dialog.\nEquivalent to material elevation 12.\n",
         "commentRange": {
-            "start": 123,
-            "end": 126
+            "start": 89,
+            "end": 92
         },
         "context": {
             "type": "variable",
@@ -31708,8 +32204,8 @@
             "value": "k-elevation(7)",
             "scope": "default",
             "line": {
-                "start": 127,
-                "end": 127
+                "start": 93,
+                "end": 93
             }
         },
         "group": [
@@ -31725,8 +32221,8 @@
     {
         "description": "Shadow for window and dialog.\nEquivalent to material elevation 16.\n",
         "commentRange": {
-            "start": 128,
-            "end": 131
+            "start": 94,
+            "end": 97
         },
         "context": {
             "type": "variable",
@@ -31734,8 +32230,8 @@
             "value": "k-elevation(8)",
             "scope": "default",
             "line": {
-                "start": 132,
-                "end": 132
+                "start": 98,
+                "end": 98
             }
         },
         "group": [
@@ -31751,8 +32247,8 @@
     {
         "description": "Shadow for window and dialog.\nEquivalent to material elevation 24.\n",
         "commentRange": {
-            "start": 133,
-            "end": 136
+            "start": 99,
+            "end": 102
         },
         "context": {
             "type": "variable",
@@ -31760,8 +32256,8 @@
             "value": "k-elevation(9)",
             "scope": "default",
             "line": {
-                "start": 137,
-                "end": 137
+                "start": 103,
+                "end": 103
             }
         },
         "group": [
@@ -31774,6 +32270,31 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "Color of shadows\n",
+        "commentRange": {
+            "start": 242,
+            "end": 243
+        },
+        "context": {
+            "type": "variable",
+            "name": "elevation",
+            "value": "k-map-get( $theme, elevation )",
+            "scope": "default",
+            "line": {
+                "start": 244,
+                "end": 244
+            }
+        },
+        "group": [
+            "shadows"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
     {
         "description": "The transform scale of the Skeleton text.\n",
         "commentRange": {
@@ -31883,7 +32404,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,
@@ -32308,7 +32829,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-bg",
-            "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 )",
             "scope": "default",
             "line": {
                 "start": 33,
@@ -32733,7 +33254,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-bg",
-            "value": "if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ))",
             "scope": "default",
             "line": {
                 "start": 88,
@@ -32933,7 +33454,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-bg",
-            "value": "rgba( $kendo-color-primary, .54 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 ))",
             "scope": "default",
             "line": {
                 "start": 115,
@@ -33858,7 +34379,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-header-text",
-            "value": "if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ))",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -34158,7 +34679,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "rgba( k-contrast-color( $kendo-table-bg ), .07 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -34333,7 +34854,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-selected-bg",
-            "value": "rgba( k-contrast-color( $kendo-table-bg ), .04 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))",
             "scope": "default",
             "line": {
                 "start": 150,
@@ -35108,7 +35629,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tile-layout-bg",
-            "value": "if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)",
+            "value": "if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))",
             "scope": "default",
             "line": {
                 "start": 8,
@@ -37158,7 +37679,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-treeview-item-hover-bg",
-            "value": "rgba( $kendo-treeview-text, .07 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .07 ), rgba( $kendo-treeview-text, .07 ))",
             "scope": "default",
             "line": {
                 "start": 127,
@@ -37627,8 +38148,8 @@
     {
         "description": "Base font size across all components.\n",
         "commentRange": {
-            "start": 289,
-            "end": 290
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -37636,8 +38157,8 @@
             "value": "14px",
             "scope": "default",
             "line": {
-                "start": 291,
-                "end": 291
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -37652,8 +38173,8 @@
     {
         "description": "Font family for text.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 170,
+            "end": 171
         },
         "context": {
             "type": "variable",
@@ -37661,8 +38182,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 172,
+                "end": 172
             }
         },
         "group": [
@@ -37677,8 +38198,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 310,
-            "end": 311
+            "start": 174,
+            "end": 175
         },
         "context": {
             "type": "variable",
@@ -37686,8 +38207,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 312,
-                "end": 312
+                "start": 176,
+                "end": 176
             }
         },
         "group": [
@@ -37702,8 +38223,8 @@
     {
         "description": "Font family for monospaced text. Used for styling the code.\n",
         "commentRange": {
-            "start": 314,
-            "end": 315
+            "start": 178,
+            "end": 179
         },
         "context": {
             "type": "variable",
@@ -37711,8 +38232,8 @@
             "value": "Consolas, \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
             "scope": "default",
             "line": {
-                "start": 316,
-                "end": 316
+                "start": 180,
+                "end": 180
             }
         },
         "group": [
@@ -37727,8 +38248,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 318,
-            "end": 319
+            "start": 182,
+            "end": 183
         },
         "context": {
             "type": "variable",
@@ -37736,8 +38257,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 320,
-                "end": 320
+                "start": 184,
+                "end": 184
             }
         },
         "group": [
@@ -37752,8 +38273,8 @@
     {
         "description": "Line height used along with $kendo-font-size.\n",
         "commentRange": {
-            "start": 322,
-            "end": 323
+            "start": 186,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -37761,8 +38282,8 @@
             "value": "k-math-div( 28, 14 )",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -37777,8 +38298,8 @@
     {
         "description": "Border radius for all components.\n",
         "commentRange": {
-            "start": 164,
-            "end": 164
+            "start": 130,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -37786,8 +38307,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 165,
-                "end": 165
+                "start": 131,
+                "end": 131
             }
         },
         "access": "public",
@@ -37802,8 +38323,8 @@
     {
         "description": "The background of the components' chrome area.\n",
         "commentRange": {
-            "start": 376,
-            "end": 376
+            "start": 374,
+            "end": 374
         },
         "context": {
             "type": "variable",
@@ -37811,8 +38332,8 @@
             "value": "k-map-get( $theme, base-bg )",
             "scope": "default",
             "line": {
-                "start": 377,
-                "end": 377
+                "start": 375,
+                "end": 375
             }
         },
         "access": "public",
@@ -37820,15 +38341,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": 378,
-            "end": 378
+            "start": 376,
+            "end": 376
         },
         "context": {
             "type": "variable",
@@ -37836,8 +38357,8 @@
             "value": "k-map-get( $theme, component-text )",
             "scope": "default",
             "line": {
-                "start": 379,
-                "end": 379
+                "start": 377,
+                "end": 377
             }
         },
         "access": "public",
@@ -37845,15 +38366,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border of the components' chrome area.\n",
         "commentRange": {
-            "start": 380,
-            "end": 380
+            "start": 378,
+            "end": 378
         },
         "context": {
             "type": "variable",
@@ -37861,8 +38382,8 @@
             "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )",
             "scope": "default",
             "line": {
-                "start": 381,
-                "end": 381
+                "start": 379,
+                "end": 379
             }
         },
         "access": "public",
@@ -37870,15 +38391,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": 382,
-            "end": 382
+            "start": 380,
+            "end": 380
         },
         "context": {
             "type": "variable",
@@ -37886,8 +38407,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 383,
-                "end": 383
+                "start": 381,
+                "end": 381
             }
         },
         "access": "public",
@@ -37895,15 +38416,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": 385,
-            "end": 385
+            "start": 383,
+            "end": 383
         },
         "context": {
             "type": "variable",
@@ -37911,8 +38432,8 @@
             "value": "k-map-get( $theme, hover-bg )",
             "scope": "default",
             "line": {
-                "start": 386,
-                "end": 386
+                "start": 384,
+                "end": 384
             }
         },
         "access": "public",
@@ -37920,15 +38441,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": 387,
-            "end": 387
+            "start": 385,
+            "end": 385
         },
         "context": {
             "type": "variable",
@@ -37936,8 +38457,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 388,
-                "end": 388
+                "start": 386,
+                "end": 386
             }
         },
         "access": "public",
@@ -37945,15 +38466,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": 389,
-            "end": 389
+            "start": 387,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -37961,8 +38482,8 @@
             "value": "rgba( $kendo-base-border, .15 )",
             "scope": "default",
             "line": {
-                "start": 390,
-                "end": 390
+                "start": 388,
+                "end": 388
             }
         },
         "access": "public",
@@ -37970,15 +38491,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": 391,
-            "end": 391
+            "start": 389,
+            "end": 389
         },
         "context": {
             "type": "variable",
@@ -37986,8 +38507,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 390,
+                "end": 390
             }
         },
         "access": "public",
@@ -37995,21 +38516,46 @@
             "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": 394,
-            "end": 394
+            "start": 392,
+            "end": 392
         },
         "context": {
             "type": "variable",
             "name": "kendo-selected-bg",
             "value": "$kendo-color-secondary",
             "scope": "default",
+            "line": {
+                "start": 393,
+                "end": 393
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "The text color of selected items.\n",
+        "commentRange": {
+            "start": 394,
+            "end": 394
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-selected-text",
+            "value": "$kendo-color-secondary-contrast",
+            "scope": "default",
             "line": {
                 "start": 395,
                 "end": 395
@@ -38020,20 +38566,20 @@
             "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",
+        "description": "The border color of selected items.\n",
         "commentRange": {
             "start": 396,
             "end": 396
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-text",
-            "value": "$kendo-color-secondary-contrast",
+            "name": "kendo-selected-border",
+            "value": "rgba( $kendo-base-border, .1 )",
             "scope": "default",
             "line": {
                 "start": 397,
@@ -38045,20 +38591,20 @@
             "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",
+        "description": "The gradient background of selected items.\n",
         "commentRange": {
             "start": 398,
             "end": 398
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-border",
-            "value": "rgba( $kendo-base-border, .1 )",
+            "name": "kendo-selected-gradient",
+            "value": "null",
             "scope": "default",
             "line": {
                 "start": 399,
@@ -38070,24 +38616,24 @@
             "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",
+        "description": "Text color of disabled items.\n",
         "commentRange": {
-            "start": 400,
-            "end": 400
+            "start": 406,
+            "end": 406
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-gradient",
-            "value": "null",
+            "name": "kendo-disabled-text",
+            "value": "k-map-get( $theme, disabled-text )",
             "scope": "default",
             "line": {
-                "start": 401,
-                "end": 401
+                "start": 407,
+                "end": 407
             }
         },
         "access": "public",
@@ -38095,8 +38641,8 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {