@progress/kendo-theme-default 7.1.0-dev.8 → 7.1.0-dev.9

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

@@ -283,7 +283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-light-text",
-            "value": "k-contrast-legacy( $kendo-color-light )",
+            "value": "if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light ))",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -333,7 +333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-dark-text",
-            "value": "k-contrast-legacy( $kendo-color-dark )",
+            "value": "if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -3683,7 +3683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-theme-colors",
-            "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": #f5f5f5 )\n)",
+            "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": if($kendo-enable-color-system, k-color( base ), #f5f5f5) )\n)",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -3708,7 +3708,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-bg",
-            "value": "#f5f5f5",
+            "value": "if($kendo-enable-color-system, k-color( base ), #f5f5f5)",
             "scope": "default",
             "line": {
                 "start": 113,
@@ -3733,7 +3733,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-text",
-            "value": "#424242",
+            "value": "if($kendo-enable-color-system, k-color( on-base ), #424242)",
             "scope": "default",
             "line": {
                 "start": 116,
@@ -3758,7 +3758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-border",
-            "value": "rgba( black, .08 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), rgba( black, .08 ))",
             "scope": "default",
             "line": {
                 "start": 119,
@@ -3783,7 +3783,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-gradient",
-            "value": "rgba( black, 0 ), rgba( black, .02 )",
+            "value": "if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 )))",
             "scope": "default",
             "line": {
                 "start": 122,
@@ -3833,7 +3833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-hover-bg",
-            "value": "k-try-shade( $kendo-button-bg, .5 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 ))",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -3958,7 +3958,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-active-bg",
-            "value": "k-try-shade( $kendo-button-bg, 1.5 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 ))",
             "scope": "default",
             "line": {
                 "start": 145,
@@ -4108,7 +4108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-selected-text",
-            "value": "k-contrast-legacy( $kendo-button-selected-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg ))",
             "scope": "default",
             "line": {
                 "start": 164,
@@ -4308,7 +4308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-shadow",
-            "value": "0 0 0 2px rgba( $kendo-button-border, .08 )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 ))",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -6333,7 +6333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-a",
-            "value": "#ff6358",
+            "value": "if($kendo-enable-color-system, k-color( series-a ), #ff6358)",
             "scope": "default",
             "line": {
                 "start": 8,
@@ -6358,7 +6358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-b",
-            "value": "#ffe162",
+            "value": "if($kendo-enable-color-system, k-color( series-b ), #ffe162)",
             "scope": "default",
             "line": {
                 "start": 16,
@@ -6383,7 +6383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-c",
-            "value": "#4cd180",
+            "value": "if($kendo-enable-color-system, k-color( series-c ), #4cd180)",
             "scope": "default",
             "line": {
                 "start": 24,
@@ -6408,7 +6408,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-d",
-            "value": "#4b5ffa",
+            "value": "if($kendo-enable-color-system, k-color( series-d ), #4b5ffa)",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -6433,7 +6433,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-e",
-            "value": "#ac58ff",
+            "value": "if($kendo-enable-color-system, k-color( series-e ), #ac58ff)",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -6458,7 +6458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-f",
-            "value": "#ff5892",
+            "value": "if($kendo-enable-color-system, k-color( series-f ), #ff5892)",
             "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,
@@ -6983,7 +6983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-text",
-            "value": "k-contrast-legacy( $kendo-checkbox-checked-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -7183,7 +7183,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-checked-shadow",
-            "value": "0 0 0 2px rgba( $kendo-color-primary, .3 )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))",
             "scope": "default",
             "line": {
                 "start": 110,
@@ -8233,7 +8233,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-base-bg",
-            "value": "$kendo-button-bg",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg)",
             "scope": "default",
             "line": {
                 "start": 95,
@@ -8358,7 +8358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-shadow",
-            "value": "0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))",
             "scope": "default",
             "line": {
                 "start": 118,
@@ -8458,7 +8458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-hover-bg",
-            "value": "$kendo-button-hover-bg",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg)",
             "scope": "default",
             "line": {
                 "start": 132,
@@ -8633,7 +8633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-shadow",
-            "value": "0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))",
             "scope": "default",
             "line": {
                 "start": 155,
@@ -8683,7 +8683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-hover-text",
-            "value": "k-contrast-legacy( $kendo-chip-outline-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 162,
@@ -9849,11 +9849,36 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The global default Colors map.\n",
+        "commentRange": {
+            "start": 177,
+            "end": 178
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-colors",
+            "value": "$_default-colors",
+            "scope": "default",
+            "line": {
+                "start": 179,
+                "end": 179
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "access": "public",
+        "file": {
+            "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": 145,
-            "end": 148
+            "start": 184,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -9861,8 +9886,8 @@
             "value": "#ff6358",
             "scope": "default",
             "line": {
-                "start": 149,
-                "end": 149
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -9871,24 +9896,24 @@
         "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": 153,
-            "end": 156
+            "start": 191,
+            "end": 194
         },
         "context": {
             "type": "variable",
             "name": "kendo-color-primary-contrast",
-            "value": "k-contrast-legacy( $kendo-color-primary )",
+            "value": "k-contrast-legacy($kendo-color-primary)",
             "scope": "default",
             "line": {
-                "start": 157,
-                "end": 157
+                "start": 195,
+                "end": 195
             }
         },
         "group": [
@@ -9897,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": 159,
-            "end": 161
+            "start": 197,
+            "end": 199
         },
         "context": {
             "type": "variable",
@@ -9913,8 +9938,8 @@
             "value": "#666666",
             "scope": "default",
             "line": {
-                "start": 162,
-                "end": 162
+                "start": 200,
+                "end": 200
             }
         },
         "group": [
@@ -9923,24 +9948,24 @@
         "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": 166,
-            "end": 169
+            "start": 204,
+            "end": 207
         },
         "context": {
             "type": "variable",
             "name": "kendo-color-secondary-contrast",
-            "value": "k-contrast-legacy( $kendo-color-secondary )",
+            "value": "k-contrast-legacy($kendo-color-secondary)",
             "scope": "default",
             "line": {
-                "start": 170,
-                "end": 170
+                "start": 208,
+                "end": 208
             }
         },
         "group": [
@@ -9949,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": 172,
-            "end": 174
+            "start": 210,
+            "end": 212
         },
         "context": {
             "type": "variable",
@@ -9965,8 +9990,8 @@
             "value": "#03a9f4",
             "scope": "default",
             "line": {
-                "start": 175,
-                "end": 175
+                "start": 213,
+                "end": 213
             }
         },
         "group": [
@@ -9975,24 +10000,24 @@
         "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": 179,
-            "end": 182
+            "start": 217,
+            "end": 220
         },
         "context": {
             "type": "variable",
             "name": "kendo-color-tertiary-contrast",
-            "value": "k-contrast-legacy( $kendo-color-tertiary )",
+            "value": "k-contrast-legacy($kendo-color-tertiary)",
             "scope": "default",
             "line": {
-                "start": 183,
-                "end": 183
+                "start": 221,
+                "end": 221
             }
         },
         "group": [
@@ -10001,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": 185,
-            "end": 187
+            "start": 223,
+            "end": 225
         },
         "context": {
             "type": "variable",
@@ -10017,8 +10042,8 @@
             "value": "#0058e9",
             "scope": "default",
             "line": {
-                "start": 188,
-                "end": 188
+                "start": 226,
+                "end": 226
             }
         },
         "group": [
@@ -10027,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": 192,
-            "end": 194
+            "start": 230,
+            "end": 232
         },
         "context": {
             "type": "variable",
@@ -10043,8 +10068,8 @@
             "value": "#37b400",
             "scope": "default",
             "line": {
-                "start": 195,
-                "end": 195
+                "start": 233,
+                "end": 233
             }
         },
         "group": [
@@ -10053,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": 199,
-            "end": 201
+            "start": 237,
+            "end": 239
         },
         "context": {
             "type": "variable",
@@ -10069,8 +10094,8 @@
             "value": "#ffc000",
             "scope": "default",
             "line": {
-                "start": 202,
-                "end": 202
+                "start": 240,
+                "end": 240
             }
         },
         "group": [
@@ -10079,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": 206,
-            "end": 208
+            "start": 244,
+            "end": 246
         },
         "context": {
             "type": "variable",
@@ -10095,8 +10120,8 @@
             "value": "#f31700",
             "scope": "default",
             "line": {
-                "start": 209,
-                "end": 209
+                "start": 247,
+                "end": 247
             }
         },
         "group": [
@@ -10105,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": 213,
-            "end": 215
+            "start": 251,
+            "end": 253
         },
         "context": {
             "type": "variable",
@@ -10121,8 +10146,8 @@
             "value": "#424242",
             "scope": "default",
             "line": {
-                "start": 216,
-                "end": 216
+                "start": 254,
+                "end": 254
             }
         },
         "group": [
@@ -10131,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": 218,
-            "end": 220
+            "start": 256,
+            "end": 258
         },
         "context": {
             "type": "variable",
@@ -10147,8 +10172,8 @@
             "value": "#ebebeb",
             "scope": "default",
             "line": {
-                "start": 221,
-                "end": 221
+                "start": 259,
+                "end": 259
             }
         },
         "group": [
@@ -10157,24 +10182,24 @@
         "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": 223,
-            "end": 224
+            "start": 261,
+            "end": 262
         },
         "context": {
             "type": "variable",
             "name": "kendo-color-inverse",
-            "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
+            "value": "if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark)",
             "scope": "default",
             "line": {
-                "start": 225,
-                "end": 225
+                "start": 263,
+                "end": 263
             }
         },
         "group": [
@@ -10182,8 +10207,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -10989,8 +11014,8 @@
     {
         "description": "Icon size.\n",
         "commentRange": {
-            "start": 60,
-            "end": 61
+            "start": 57,
+            "end": 58
         },
         "context": {
             "type": "variable",
@@ -10998,8 +11023,8 @@
             "value": "16px",
             "scope": "default",
             "line": {
-                "start": 62,
-                "end": 62
+                "start": 59,
+                "end": 59
             }
         },
         "group": [
@@ -11014,8 +11039,8 @@
     {
         "description": "xtra small icon size.\n",
         "commentRange": {
-            "start": 63,
-            "end": 64
+            "start": 60,
+            "end": 61
         },
         "context": {
             "type": "variable",
@@ -11023,8 +11048,8 @@
             "value": "calc( #{$kendo-icon-size} * .75 )",
             "scope": "default",
             "line": {
-                "start": 65,
-                "end": 65
+                "start": 62,
+                "end": 62
             }
         },
         "group": [
@@ -11039,8 +11064,8 @@
     {
         "description": "Small icon size.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 63,
+            "end": 64
         },
         "context": {
             "type": "variable",
@@ -11048,8 +11073,8 @@
             "value": "calc( #{$kendo-icon-size} * .875 )",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 65,
+                "end": 65
             }
         },
         "group": [
@@ -11064,8 +11089,8 @@
     {
         "description": "Medium icon size.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 66,
+            "end": 67
         },
         "context": {
             "type": "variable",
@@ -11073,8 +11098,8 @@
             "value": "$kendo-icon-size",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 68,
+                "end": 68
             }
         },
         "group": [
@@ -11089,8 +11114,8 @@
     {
         "description": "Large icon size.\n",
         "commentRange": {
-            "start": 72,
-            "end": 73
+            "start": 69,
+            "end": 70
         },
         "context": {
             "type": "variable",
@@ -11098,8 +11123,8 @@
             "value": "calc( #{$kendo-icon-size} * 1.25 )",
             "scope": "default",
             "line": {
-                "start": 74,
-                "end": 74
+                "start": 71,
+                "end": 71
             }
         },
         "group": [
@@ -11114,8 +11139,8 @@
     {
         "description": "Extra large icon size.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -11123,8 +11148,8 @@
             "value": "calc( #{$kendo-icon-size} * 1.5 )",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -11139,8 +11164,8 @@
     {
         "description": "Double extra large icon size.\n",
         "commentRange": {
-            "start": 78,
-            "end": 79
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
@@ -11148,8 +11173,8 @@
             "value": "calc( #{$kendo-icon-size} * 2 )",
             "scope": "default",
             "line": {
-                "start": 80,
-                "end": 80
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -11164,8 +11189,8 @@
     {
         "description": "Triple extra large icon size.\n",
         "commentRange": {
-            "start": 81,
-            "end": 82
+            "start": 78,
+            "end": 79
         },
         "context": {
             "type": "variable",
@@ -11173,8 +11198,8 @@
             "value": "calc( #{$kendo-icon-size} * 3 )",
             "scope": "default",
             "line": {
-                "start": 83,
-                "end": 83
+                "start": 80,
+                "end": 80
             }
         },
         "group": [
@@ -11189,8 +11214,8 @@
     {
         "description": "Horizontal padding.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 85,
+            "end": 86
         },
         "context": {
             "type": "variable",
@@ -11198,8 +11223,8 @@
             "value": "8px",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 87,
+                "end": 87
             }
         },
         "group": [
@@ -11214,8 +11239,8 @@
     {
         "description": "Vertical padding.\n",
         "commentRange": {
-            "start": 91,
-            "end": 92
+            "start": 88,
+            "end": 89
         },
         "context": {
             "type": "variable",
@@ -11223,8 +11248,8 @@
             "value": "4px",
             "scope": "default",
             "line": {
-                "start": 93,
-                "end": 93
+                "start": 90,
+                "end": 90
             }
         },
         "group": [
@@ -11239,8 +11264,8 @@
     {
         "description": "Small horizontal padding.\n",
         "commentRange": {
-            "start": 94,
-            "end": 95
+            "start": 91,
+            "end": 92
         },
         "context": {
             "type": "variable",
@@ -11248,8 +11273,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 96,
-                "end": 96
+                "start": 93,
+                "end": 93
             }
         },
         "group": [
@@ -11264,8 +11289,8 @@
     {
         "description": "Small vertical padding.\n",
         "commentRange": {
-            "start": 97,
-            "end": 98
+            "start": 94,
+            "end": 95
         },
         "context": {
             "type": "variable",
@@ -11273,8 +11298,8 @@
             "value": "k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 99,
-                "end": 99
+                "start": 96,
+                "end": 96
             }
         },
         "group": [
@@ -11289,8 +11314,8 @@
     {
         "description": "Medium horizontal padding.\n",
         "commentRange": {
-            "start": 100,
-            "end": 101
+            "start": 97,
+            "end": 98
         },
         "context": {
             "type": "variable",
@@ -11298,8 +11323,8 @@
             "value": "k-map-get( $kendo-spacing, 2 )",
             "scope": "default",
             "line": {
-                "start": 102,
-                "end": 102
+                "start": 99,
+                "end": 99
             }
         },
         "group": [
@@ -11314,8 +11339,8 @@
     {
         "description": "Medium vertical padding.\n",
         "commentRange": {
-            "start": 103,
-            "end": 104
+            "start": 100,
+            "end": 101
         },
         "context": {
             "type": "variable",
@@ -11323,8 +11348,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 105,
-                "end": 105
+                "start": 102,
+                "end": 102
             }
         },
         "group": [
@@ -11339,8 +11364,8 @@
     {
         "description": "Large horizontal padding.\n",
         "commentRange": {
-            "start": 106,
-            "end": 107
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -11348,8 +11373,8 @@
             "value": "k-map-get( $kendo-spacing, 3 )",
             "scope": "default",
             "line": {
-                "start": 108,
-                "end": 108
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -11364,8 +11389,8 @@
     {
         "description": "Large vertical padding.\n",
         "commentRange": {
-            "start": 109,
-            "end": 110
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
@@ -11373,8 +11398,8 @@
             "value": "k-map-get( $kendo-spacing, 1.5 )",
             "scope": "default",
             "line": {
-                "start": 111,
-                "end": 111
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -11389,8 +11414,8 @@
     {
         "description": "Border radius for all components.\n",
         "commentRange": {
-            "start": 113,
-            "end": 114
+            "start": 110,
+            "end": 111
         },
         "context": {
             "type": "variable",
@@ -11398,8 +11423,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 115,
-                "end": 115
+                "start": 112,
+                "end": 112
             }
         },
         "group": [
@@ -11414,8 +11439,8 @@
     {
         "description": "Small border radius.\n",
         "commentRange": {
-            "start": 116,
-            "end": 117
+            "start": 113,
+            "end": 114
         },
         "context": {
             "type": "variable",
@@ -11423,8 +11448,8 @@
             "value": "$kendo-border-radius - k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 118,
-                "end": 118
+                "start": 115,
+                "end": 115
             }
         },
         "group": [
@@ -11439,8 +11464,8 @@
     {
         "description": "Medium border radius.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -11448,8 +11473,8 @@
             "value": "$kendo-border-radius",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -11464,8 +11489,8 @@
     {
         "description": "Large border radius.\n",
         "commentRange": {
-            "start": 122,
-            "end": 123
+            "start": 119,
+            "end": 120
         },
         "context": {
             "type": "variable",
@@ -11473,8 +11498,8 @@
             "value": "$kendo-border-radius + k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 124,
-                "end": 124
+                "start": 121,
+                "end": 121
             }
         },
         "group": [
@@ -11489,8 +11514,8 @@
     {
         "description": "Background color of the body.\n",
         "commentRange": {
-            "start": 323,
-            "end": 324
+            "start": 280,
+            "end": 281
         },
         "context": {
             "type": "variable",
@@ -11498,8 +11523,8 @@
             "value": "$kendo-color-white",
             "scope": "default",
             "line": {
-                "start": 325,
-                "end": 325
+                "start": 282,
+                "end": 282
             }
         },
         "group": [
@@ -11507,15 +11532,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of the body.\n",
         "commentRange": {
-            "start": 326,
-            "end": 327
+            "start": 283,
+            "end": 284
         },
         "context": {
             "type": "variable",
@@ -11523,8 +11548,8 @@
             "value": "#424242",
             "scope": "default",
             "line": {
-                "start": 328,
-                "end": 328
+                "start": 285,
+                "end": 285
             }
         },
         "group": [
@@ -11532,15 +11557,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Subtle text color.\n",
         "commentRange": {
-            "start": 330,
-            "end": 331
+            "start": 287,
+            "end": 288
         },
         "context": {
             "type": "variable",
@@ -11548,8 +11573,8 @@
             "value": "#666666",
             "scope": "default",
             "line": {
-                "start": 332,
-                "end": 332
+                "start": 289,
+                "end": 289
             }
         },
         "group": [
@@ -11557,15 +11582,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of the links.\n",
         "commentRange": {
-            "start": 339,
-            "end": 340
+            "start": 296,
+            "end": 297
         },
         "context": {
             "type": "variable",
@@ -11573,8 +11598,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 341,
-                "end": 341
+                "start": 298,
+                "end": 298
             }
         },
         "group": [
@@ -11582,15 +11607,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of the links on hover.\n",
         "commentRange": {
-            "start": 342,
-            "end": 343
+            "start": 299,
+            "end": 300
         },
         "context": {
             "type": "variable",
@@ -11598,8 +11623,8 @@
             "value": "$kendo-color-primary-darker",
             "scope": "default",
             "line": {
-                "start": 344,
-                "end": 344
+                "start": 301,
+                "end": 301
             }
         },
         "group": [
@@ -11607,15 +11632,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "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": 350,
-            "end": 352
+            "start": 306,
+            "end": 308
         },
         "context": {
             "type": "variable",
@@ -11623,8 +11648,8 @@
             "value": "$kendo-body-bg",
             "scope": "default",
             "line": {
-                "start": 353,
-                "end": 353
+                "start": 309,
+                "end": 309
             }
         },
         "group": [
@@ -11632,15 +11657,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": 354,
-            "end": 356
+            "start": 310,
+            "end": 312
         },
         "context": {
             "type": "variable",
@@ -11648,8 +11673,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 357,
-                "end": 357
+                "start": 313,
+                "end": 313
             }
         },
         "group": [
@@ -11657,24 +11682,24 @@
         ],
         "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": 358,
-            "end": 360
+            "start": 314,
+            "end": 316
         },
         "context": {
             "type": "variable",
             "name": "kendo-component-border",
-            "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )",
+            "value": "rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08)",
             "scope": "default",
             "line": {
-                "start": 361,
-                "end": 361
+                "start": 317,
+                "end": 317
             }
         },
         "group": [
@@ -11682,15 +11707,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Background color of the component header.\n",
         "commentRange": {
-            "start": 423,
-            "end": 424
+            "start": 360,
+            "end": 361
         },
         "context": {
             "type": "variable",
@@ -11698,8 +11723,8 @@
             "value": "$kendo-base-bg",
             "scope": "default",
             "line": {
-                "start": 425,
-                "end": 425
+                "start": 362,
+                "end": 362
             }
         },
         "group": [
@@ -11707,15 +11732,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of the component header.\n",
         "commentRange": {
-            "start": 426,
-            "end": 427
+            "start": 363,
+            "end": 364
         },
         "context": {
             "type": "variable",
@@ -11723,8 +11748,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 428,
-                "end": 428
+                "start": 365,
+                "end": 365
             }
         },
         "group": [
@@ -11732,15 +11757,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Border color of the component header.\n",
         "commentRange": {
-            "start": 429,
-            "end": 430
+            "start": 366,
+            "end": 367
         },
         "context": {
             "type": "variable",
@@ -11748,8 +11773,8 @@
             "value": "$kendo-base-border",
             "scope": "default",
             "line": {
-                "start": 431,
-                "end": 431
+                "start": 368,
+                "end": 368
             }
         },
         "group": [
@@ -11757,15 +11782,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Gradient of the component header.\n",
         "commentRange": {
-            "start": 432,
-            "end": 433
+            "start": 369,
+            "end": 370
         },
         "context": {
             "type": "variable",
@@ -11773,8 +11798,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 434,
-                "end": 434
+                "start": 371,
+                "end": 371
             }
         },
         "group": [
@@ -11782,15 +11807,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Background color of the invalid items.\n",
         "commentRange": {
-            "start": 437,
-            "end": 438
+            "start": 373,
+            "end": 374
         },
         "context": {
             "type": "variable",
@@ -11798,8 +11823,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 439,
-                "end": 439
+                "start": 375,
+                "end": 375
             }
         },
         "group": [
@@ -11807,15 +11832,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of the invalid items.\n",
         "commentRange": {
-            "start": 440,
-            "end": 441
+            "start": 376,
+            "end": 377
         },
         "context": {
             "type": "variable",
@@ -11823,8 +11848,8 @@
             "value": "$kendo-color-error",
             "scope": "default",
             "line": {
-                "start": 442,
-                "end": 442
+                "start": 378,
+                "end": 378
             }
         },
         "group": [
@@ -11832,15 +11857,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Border color of the invalid items.\n",
         "commentRange": {
-            "start": 443,
-            "end": 444
+            "start": 379,
+            "end": 380
         },
         "context": {
             "type": "variable",
@@ -11848,8 +11873,8 @@
             "value": "$kendo-color-error",
             "scope": "default",
             "line": {
-                "start": 445,
-                "end": 445
+                "start": 381,
+                "end": 381
             }
         },
         "group": [
@@ -11857,15 +11882,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Shadow of the invalid items.\n",
         "commentRange": {
-            "start": 446,
-            "end": 447
+            "start": 382,
+            "end": 383
         },
         "context": {
             "type": "variable",
@@ -11873,8 +11898,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 448,
-                "end": 448
+                "start": 384,
+                "end": 384
             }
         },
         "group": [
@@ -11882,15 +11907,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Background color of the valid items.\n",
         "commentRange": {
-            "start": 450,
-            "end": 451
+            "start": 386,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -11898,8 +11923,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 452,
-                "end": 452
+                "start": 388,
+                "end": 388
             }
         },
         "group": [
@@ -11907,15 +11932,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of the valid items.\n",
         "commentRange": {
-            "start": 453,
-            "end": 454
+            "start": 389,
+            "end": 390
         },
         "context": {
             "type": "variable",
@@ -11923,8 +11948,8 @@
             "value": "$kendo-color-success",
             "scope": "default",
             "line": {
-                "start": 455,
-                "end": 455
+                "start": 391,
+                "end": 391
             }
         },
         "group": [
@@ -11932,15 +11957,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Border color of the valid items.\n",
         "commentRange": {
-            "start": 456,
-            "end": 457
+            "start": 392,
+            "end": 393
         },
         "context": {
             "type": "variable",
@@ -11948,8 +11973,8 @@
             "value": "$kendo-color-success",
             "scope": "default",
             "line": {
-                "start": 458,
-                "end": 458
+                "start": 394,
+                "end": 394
             }
         },
         "group": [
@@ -11957,15 +11982,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Shadow of the valid items.\n",
         "commentRange": {
-            "start": 459,
-            "end": 460
+            "start": 395,
+            "end": 396
         },
         "context": {
             "type": "variable",
@@ -11973,8 +11998,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 461,
-                "end": 461
+                "start": 397,
+                "end": 397
             }
         },
         "group": [
@@ -11982,8 +12007,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -13020,7 +13045,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,
@@ -13395,7 +13420,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,
@@ -13795,7 +13820,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,
@@ -15470,7 +15495,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,
@@ -15920,7 +15945,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,
@@ -18770,7 +18795,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fieldset-legend-text",
-            "value": "k-try-shade( $kendo-body-text, 2 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -19789,17 +19814,17 @@
     {
         "description": "Background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 305,
-            "end": 306
+            "start": 308,
+            "end": 309
         },
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-hover-bg",
-            "value": "rgba( k-contrast-color( $kendo-grid-bg ), .12 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
             "scope": "default",
             "line": {
-                "start": 307,
-                "end": 307
+                "start": 310,
+                "end": 310
             }
         },
         "group": [
@@ -19814,8 +19839,8 @@
     {
         "description": "Active background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 308,
-            "end": 309
+            "start": 311,
+            "end": 312
         },
         "context": {
             "type": "variable",
@@ -19823,8 +19848,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 310,
-                "end": 310
+                "start": 313,
+                "end": 313
             }
         },
         "group": [
@@ -19839,8 +19864,8 @@
     {
         "description": "Height of the grid row resize indicator\n",
         "commentRange": {
-            "start": 311,
-            "end": 312
+            "start": 314,
+            "end": 315
         },
         "context": {
             "type": "variable",
@@ -19848,8 +19873,8 @@
             "value": "k-map-get( $kendo-spacing, .5 )",
             "scope": "default",
             "line": {
-                "start": 313,
-                "end": 313
+                "start": 316,
+                "end": 316
             }
         },
         "group": [
@@ -20545,7 +20570,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-hover-border",
-            "value": "rgba( $kendo-input-border, .16 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 ))",
             "scope": "default",
             "line": {
                 "start": 121,
@@ -20670,7 +20695,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-focus-shadow",
-            "value": "0 0 0 2px rgba( $kendo-input-focus-border, .08 )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 ))",
             "scope": "default",
             "line": {
                 "start": 137,
@@ -20920,7 +20945,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-border",
-            "value": "rgba( $kendo-button-text, .5)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5))",
             "scope": "default",
             "line": {
                 "start": 170,
@@ -20995,7 +21020,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-border",
-            "value": "rgba( $kendo-button-text, .8)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8))",
             "scope": "default",
             "line": {
                 "start": 180,
@@ -23645,7 +23670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-selected-bg",
-            "value": "rgba( $kendo-selected-bg, .25 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -28295,7 +28320,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-border",
-            "value": "rgba( $kendo-picker-outline-text, .5)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5))",
             "scope": "default",
             "line": {
                 "start": 375,
@@ -28345,7 +28370,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-text",
-            "value": "k-contrast-legacy( $kendo-picker-outline-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 382,
@@ -28645,7 +28670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "rgba( $kendo-button-text, .04 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 ))",
             "scope": "default",
             "line": {
                 "start": 422,
@@ -28695,7 +28720,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-border",
-            "value": "rgba( $kendo-button-border, .16 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))",
             "scope": "default",
             "line": {
                 "start": 428,
@@ -30020,7 +30045,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-bg",
-            "value": "k-try-shade( $kendo-component-bg, 1 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 ))",
             "scope": "default",
             "line": {
                 "start": 27,
@@ -30145,7 +30170,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-value-text",
-            "value": "k-contrast-legacy( $kendo-progressbar-value-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))",
             "scope": "default",
             "line": {
                 "start": 43,
@@ -30170,7 +30195,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-value-border",
-            "value": "k-try-shade( $kendo-progressbar-value-bg )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -33211,56 +33236,6 @@
             "name": "_variables.scss"
         }
     },
-    {
-        "description": "The background color of the Skeleton item.\n",
-        "commentRange": {
-            "start": 18,
-            "end": 19
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-skeleton-item-bg",
-            "value": "rgba( $kendo-color-inverse, .2 )",
-            "scope": "default",
-            "line": {
-                "start": 20,
-                "end": 20
-            }
-        },
-        "group": [
-            "skeleton"
-        ],
-        "access": "public",
-        "file": {
-            "path": "skeleton/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The background color of the Skeleton wave animation.\n",
-        "commentRange": {
-            "start": 21,
-            "end": 22
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-skeleton-wave-bg",
-            "value": "rgba( black, .04 )",
-            "scope": "default",
-            "line": {
-                "start": 23,
-                "end": 23
-            }
-        },
-        "group": [
-            "skeleton"
-        ],
-        "access": "public",
-        "file": {
-            "path": "skeleton/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
     {
         "description": "The focus shadow of the SplitButton.\n",
         "commentRange": {
@@ -33695,7 +33670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-border",
-            "value": "k-try-shade( $kendo-switch-off-track-bg, 8% )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% ))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -33945,7 +33920,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-ring",
-            "value": "2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )",
+            "value": "2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -34295,7 +34270,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-text",
-            "value": "k-contrast-legacy( $kendo-switch-on-track-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg ))",
             "scope": "default",
             "line": {
                 "start": 118,
@@ -34570,7 +34545,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-ring",
-            "value": "2px solid rgba( $kendo-switch-on-track-border, .25 )",
+            "value": "2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))",
             "scope": "default",
             "line": {
                 "start": 153,
@@ -35414,17 +35389,17 @@
     {
         "description": "Background color of alternating rows in table.\n",
         "commentRange": {
-            "start": 112,
-            "end": 113
+            "start": 111,
+            "end": 112
         },
         "context": {
             "type": "variable",
             "name": "kendo-table-alt-row-bg",
-            "value": "rgba( k-contrast-legacy( $kendo-table-bg ), .04 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))",
             "scope": "default",
             "line": {
-                "start": 114,
-                "end": 114
+                "start": 113,
+                "end": 113
             }
         },
         "group": [
@@ -35439,8 +35414,8 @@
     {
         "description": "Text color of alternating rows in table.\n",
         "commentRange": {
-            "start": 115,
-            "end": 116
+            "start": 114,
+            "end": 115
         },
         "context": {
             "type": "variable",
@@ -35448,8 +35423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 117,
-                "end": 117
+                "start": 116,
+                "end": 116
             }
         },
         "group": [
@@ -35464,8 +35439,8 @@
     {
         "description": "Border color of alternating rows in table.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 117,
+            "end": 118
         },
         "context": {
             "type": "variable",
@@ -35473,8 +35448,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 119,
+                "end": 119
             }
         },
         "group": [
@@ -35489,17 +35464,17 @@
     {
         "description": "Background color of hovered rows in table.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 122,
+            "end": 123
         },
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "k-color-darken($kendo-table-bg, 7%)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 124,
+                "end": 124
             }
         },
         "group": [
@@ -35514,8 +35489,8 @@
     {
         "description": "Text color of hovered rows in table.\n",
         "commentRange": {
-            "start": 126,
-            "end": 127
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -35523,8 +35498,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 128,
-                "end": 128
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -35539,8 +35514,8 @@
     {
         "description": "Border color of hovered rows in table.\n",
         "commentRange": {
-            "start": 129,
-            "end": 130
+            "start": 128,
+            "end": 129
         },
         "context": {
             "type": "variable",
@@ -35548,8 +35523,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 131,
-                "end": 131
+                "start": 130,
+                "end": 130
             }
         },
         "group": [
@@ -35564,8 +35539,8 @@
     {
         "description": "Background color of focused rows in table.\n",
         "commentRange": {
-            "start": 134,
-            "end": 135
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
@@ -35573,8 +35548,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -35589,8 +35564,8 @@
     {
         "description": "Text color of focused rows in table.\n",
         "commentRange": {
-            "start": 137,
-            "end": 138
+            "start": 136,
+            "end": 137
         },
         "context": {
             "type": "variable",
@@ -35598,8 +35573,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 139,
-                "end": 139
+                "start": 138,
+                "end": 138
             }
         },
         "group": [
@@ -35614,8 +35589,8 @@
     {
         "description": "Border color of focused rows in table.\n",
         "commentRange": {
-            "start": 140,
-            "end": 141
+            "start": 139,
+            "end": 140
         },
         "context": {
             "type": "variable",
@@ -35623,8 +35598,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 142,
-                "end": 142
+                "start": 141,
+                "end": 141
             }
         },
         "group": [
@@ -35639,8 +35614,8 @@
     {
         "description": "Box shadow of focused rows in table.\n",
         "commentRange": {
-            "start": 143,
-            "end": 144
+            "start": 142,
+            "end": 143
         },
         "context": {
             "type": "variable",
@@ -35648,8 +35623,8 @@
             "value": "$kendo-list-item-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 145,
-                "end": 145
+                "start": 144,
+                "end": 144
             }
         },
         "group": [
@@ -35664,17 +35639,17 @@
     {
         "description": "Background color of selected rows in table.\n",
         "commentRange": {
-            "start": 148,
-            "end": 149
+            "start": 147,
+            "end": 148
         },
         "context": {
             "type": "variable",
             "name": "kendo-table-selected-bg",
-            "value": "rgba($kendo-selected-bg, .25)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
-                "start": 150,
-                "end": 150
+                "start": 149,
+                "end": 149
             }
         },
         "group": [
@@ -35689,8 +35664,8 @@
     {
         "description": "Text color of selected rows in table.\n",
         "commentRange": {
-            "start": 151,
-            "end": 152
+            "start": 150,
+            "end": 151
         },
         "context": {
             "type": "variable",
@@ -35698,8 +35673,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 153,
-                "end": 153
+                "start": 152,
+                "end": 152
             }
         },
         "group": [
@@ -35714,8 +35689,8 @@
     {
         "description": "Border color of selected rows in table.\n",
         "commentRange": {
-            "start": 154,
-            "end": 155
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -35723,8 +35698,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 156,
-                "end": 156
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -37595,7 +37570,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-bg",
-            "value": "rgba( k-contrast-legacy( $kendo-body-bg ), .75 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 ))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -37620,7 +37595,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-text",
-            "value": "k-contrast-legacy( $kendo-tooltip-bg )",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg ))",
             "scope": "default",
             "line": {
                 "start": 42,
@@ -38964,8 +38939,8 @@
     {
         "description": "Base font size across all components.\n",
         "commentRange": {
-            "start": 244,
-            "end": 245
+            "start": 146,
+            "end": 147
         },
         "context": {
             "type": "variable",
@@ -38973,8 +38948,8 @@
             "value": "14px",
             "scope": "default",
             "line": {
-                "start": 246,
-                "end": 246
+                "start": 148,
+                "end": 148
             }
         },
         "group": [
@@ -38989,8 +38964,8 @@
     {
         "description": "Extra small font size across all components.\n",
         "commentRange": {
-            "start": 247,
-            "end": 248
+            "start": 149,
+            "end": 150
         },
         "context": {
             "type": "variable",
@@ -38998,8 +38973,8 @@
             "value": "10px",
             "scope": "default",
             "line": {
-                "start": 249,
-                "end": 249
+                "start": 151,
+                "end": 151
             }
         },
         "group": [
@@ -39014,8 +38989,8 @@
     {
         "description": "Small font size across all components.\n",
         "commentRange": {
-            "start": 250,
-            "end": 251
+            "start": 152,
+            "end": 153
         },
         "context": {
             "type": "variable",
@@ -39023,8 +38998,8 @@
             "value": "12px",
             "scope": "default",
             "line": {
-                "start": 252,
-                "end": 252
+                "start": 154,
+                "end": 154
             }
         },
         "group": [
@@ -39039,8 +39014,8 @@
     {
         "description": "Medium font size across all components.\n",
         "commentRange": {
-            "start": 253,
-            "end": 254
+            "start": 155,
+            "end": 156
         },
         "context": {
             "type": "variable",
@@ -39048,8 +39023,8 @@
             "value": "$kendo-font-size",
             "scope": "default",
             "line": {
-                "start": 255,
-                "end": 255
+                "start": 157,
+                "end": 157
             }
         },
         "group": [
@@ -39064,8 +39039,8 @@
     {
         "description": "Large font size across all components.\n",
         "commentRange": {
-            "start": 256,
-            "end": 257
+            "start": 158,
+            "end": 159
         },
         "context": {
             "type": "variable",
@@ -39073,8 +39048,8 @@
             "value": "16px",
             "scope": "default",
             "line": {
-                "start": 258,
-                "end": 258
+                "start": 160,
+                "end": 160
             }
         },
         "group": [
@@ -39089,8 +39064,8 @@
     {
         "description": "Extra large font size across all components.\n",
         "commentRange": {
-            "start": 259,
-            "end": 260
+            "start": 161,
+            "end": 162
         },
         "context": {
             "type": "variable",
@@ -39098,8 +39073,8 @@
             "value": "20px",
             "scope": "default",
             "line": {
-                "start": 261,
-                "end": 261
+                "start": 163,
+                "end": 163
             }
         },
         "group": [
@@ -39114,8 +39089,8 @@
     {
         "description": "Font family for text.\n",
         "commentRange": {
-            "start": 271,
-            "end": 272
+            "start": 173,
+            "end": 174
         },
         "context": {
             "type": "variable",
@@ -39123,8 +39098,8 @@
             "value": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
             "scope": "default",
             "line": {
-                "start": 273,
-                "end": 273
+                "start": 175,
+                "end": 175
             }
         },
         "group": [
@@ -39139,8 +39114,8 @@
     {
         "description": "Font family for monospaced text. Used for styling the code.\n",
         "commentRange": {
-            "start": 275,
-            "end": 276
+            "start": 177,
+            "end": 178
         },
         "context": {
             "type": "variable",
@@ -39148,8 +39123,8 @@
             "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Roboto Mono\", \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
             "scope": "default",
             "line": {
-                "start": 277,
-                "end": 277
+                "start": 179,
+                "end": 179
             }
         },
         "group": [
@@ -39164,8 +39139,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 279,
-            "end": 280
+            "start": 181,
+            "end": 182
         },
         "context": {
             "type": "variable",
@@ -39173,8 +39148,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 281,
-                "end": 281
+                "start": 183,
+                "end": 183
             }
         },
         "group": [
@@ -39189,8 +39164,8 @@
     {
         "description": "Line height used along with $kendo-font-size.\n",
         "commentRange": {
-            "start": 283,
-            "end": 284
+            "start": 185,
+            "end": 186
         },
         "context": {
             "type": "variable",
@@ -39198,8 +39173,8 @@
             "value": "k-math-div( 20, 14 )",
             "scope": "default",
             "line": {
-                "start": 285,
-                "end": 285
+                "start": 187,
+                "end": 187
             }
         },
         "group": [
@@ -39214,8 +39189,8 @@
     {
         "description": "Extra small line height used along with $kendo-font-size-xs.\n",
         "commentRange": {
-            "start": 286,
-            "end": 287
+            "start": 188,
+            "end": 189
         },
         "context": {
             "type": "variable",
@@ -39223,8 +39198,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 288,
-                "end": 288
+                "start": 190,
+                "end": 190
             }
         },
         "group": [
@@ -39239,8 +39214,8 @@
     {
         "description": "Small line height used along with $kendo-font-size-sm.\n",
         "commentRange": {
-            "start": 289,
-            "end": 290
+            "start": 191,
+            "end": 192
         },
         "context": {
             "type": "variable",
@@ -39248,8 +39223,8 @@
             "value": "1.25",
             "scope": "default",
             "line": {
-                "start": 291,
-                "end": 291
+                "start": 193,
+                "end": 193
             }
         },
         "group": [
@@ -39264,8 +39239,8 @@
     {
         "description": "Medium line height used along with $kendo-font-size-md.\n",
         "commentRange": {
-            "start": 292,
-            "end": 293
+            "start": 194,
+            "end": 195
         },
         "context": {
             "type": "variable",
@@ -39273,8 +39248,8 @@
             "value": "$kendo-line-height",
             "scope": "default",
             "line": {
-                "start": 294,
-                "end": 294
+                "start": 196,
+                "end": 196
             }
         },
         "group": [
@@ -39289,8 +39264,8 @@
     {
         "description": "Large line height used along with $kendo-font-size-lg.\n",
         "commentRange": {
-            "start": 295,
-            "end": 296
+            "start": 197,
+            "end": 198
         },
         "context": {
             "type": "variable",
@@ -39298,8 +39273,8 @@
             "value": "1.5",
             "scope": "default",
             "line": {
-                "start": 297,
-                "end": 297
+                "start": 199,
+                "end": 199
             }
         },
         "group": [
@@ -39314,8 +39289,8 @@
     {
         "description": "Light font weight.\n",
         "commentRange": {
-            "start": 300,
-            "end": 301
+            "start": 202,
+            "end": 203
         },
         "context": {
             "type": "variable",
@@ -39323,8 +39298,8 @@
             "value": "300",
             "scope": "default",
             "line": {
-                "start": 302,
-                "end": 302
+                "start": 204,
+                "end": 204
             }
         },
         "group": [
@@ -39339,8 +39314,8 @@
     {
         "description": "Normal font weight.\n",
         "commentRange": {
-            "start": 303,
-            "end": 304
+            "start": 205,
+            "end": 206
         },
         "context": {
             "type": "variable",
@@ -39348,8 +39323,8 @@
             "value": "400",
             "scope": "default",
             "line": {
-                "start": 305,
-                "end": 305
+                "start": 207,
+                "end": 207
             }
         },
         "group": [
@@ -39364,8 +39339,8 @@
     {
         "description": "Medium font weight.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 208,
+            "end": 209
         },
         "context": {
             "type": "variable",
@@ -39373,8 +39348,8 @@
             "value": "500",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 210,
+                "end": 210
             }
         },
         "group": [
@@ -39389,8 +39364,8 @@
     {
         "description": "Semibold font weight.\n",
         "commentRange": {
-            "start": 309,
-            "end": 310
+            "start": 211,
+            "end": 212
         },
         "context": {
             "type": "variable",
@@ -39398,8 +39373,8 @@
             "value": "600",
             "scope": "default",
             "line": {
-                "start": 311,
-                "end": 311
+                "start": 213,
+                "end": 213
             }
         },
         "group": [
@@ -39414,8 +39389,8 @@
     {
         "description": "Bold font weight.\n",
         "commentRange": {
-            "start": 312,
-            "end": 313
+            "start": 214,
+            "end": 215
         },
         "context": {
             "type": "variable",
@@ -39423,8 +39398,8 @@
             "value": "700",
             "scope": "default",
             "line": {
-                "start": 314,
-                "end": 314
+                "start": 216,
+                "end": 216
             }
         },
         "group": [
@@ -39439,8 +39414,8 @@
     {
         "description": "Letter spacing.\n",
         "commentRange": {
-            "start": 316,
-            "end": 317
+            "start": 218,
+            "end": 219
         },
         "context": {
             "type": "variable",
@@ -39448,8 +39423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 318,
-                "end": 318
+                "start": 220,
+                "end": 220
             }
         },
         "group": [
@@ -39462,19 +39437,19 @@
         }
     },
     {
-        "description": "The background of the components' chrome area.\n",
+        "description": "Box shadow of focused items.\n",
         "commentRange": {
-            "start": 364,
-            "end": 364
+            "start": 224,
+            "end": 224
         },
         "context": {
             "type": "variable",
-            "name": "kendo-base-bg",
-            "value": "#fafafa",
+            "name": "kendo-focus-shadow",
+            "value": "inset 0 0 0 2px rgba(0, 0, 0, .13)",
             "scope": "default",
             "line": {
-                "start": 365,
-                "end": 365
+                "start": 225,
+                "end": 225
             }
         },
         "access": "public",
@@ -39487,19 +39462,19 @@
         }
     },
     {
-        "description": "The text color of the components' chrome area.\n",
+        "description": "Transition used across all components.\n",
         "commentRange": {
-            "start": 366,
-            "end": 366
+            "start": 227,
+            "end": 227
         },
         "context": {
             "type": "variable",
-            "name": "kendo-base-text",
-            "value": "$kendo-body-text",
+            "name": "kendo-transition",
+            "value": "color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out",
             "scope": "default",
             "line": {
-                "start": 367,
-                "end": 367
+                "start": 228,
+                "end": 228
             }
         },
         "access": "public",
@@ -39512,19 +39487,19 @@
         }
     },
     {
-        "description": "The border color of the components' chrome area.\n",
+        "description": "Filter used for disabled items.\n",
         "commentRange": {
-            "start": 368,
-            "end": 368
+            "start": 231,
+            "end": 231
         },
         "context": {
             "type": "variable",
-            "name": "kendo-base-border",
-            "value": "rgba( black, .08 )",
+            "name": "kendo-disabled-filter",
+            "value": "grayscale(.1)",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 232,
+                "end": 232
             }
         },
         "access": "public",
@@ -39537,19 +39512,19 @@
         }
     },
     {
-        "description": "The gradient background of the components' chrome area.\n",
+        "description": "Opacity used for disabled items.\n",
         "commentRange": {
-            "start": 370,
-            "end": 370
+            "start": 233,
+            "end": 233
         },
         "context": {
             "type": "variable",
-            "name": "kendo-base-gradient",
-            "value": "rgba( black, 0 ), rgba( black, .02 )",
+            "name": "kendo-disabled-opacity",
+            "value": ".6",
             "scope": "default",
             "line": {
-                "start": 371,
-                "end": 371
+                "start": 234,
+                "end": 234
             }
         },
         "access": "public",
@@ -39562,19 +39537,19 @@
         }
     },
     {
-        "description": "The background of hovered items.\n",
+        "description": "The background of the components' chrome area.\n",
         "commentRange": {
-            "start": 373,
-            "end": 373
+            "start": 319,
+            "end": 319
         },
         "context": {
             "type": "variable",
-            "name": "kendo-hover-bg",
-            "value": "k-try-shade( $kendo-base-bg, .5 )",
+            "name": "kendo-base-bg",
+            "value": "#fafafa",
             "scope": "default",
             "line": {
-                "start": 374,
-                "end": 374
+                "start": 320,
+                "end": 320
             }
         },
         "access": "public",
@@ -39582,24 +39557,24 @@
             "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",
+        "description": "The text color of the components' chrome area.\n",
         "commentRange": {
-            "start": 375,
-            "end": 375
+            "start": 321,
+            "end": 321
         },
         "context": {
             "type": "variable",
-            "name": "kendo-hover-text",
-            "value": "$kendo-base-text",
+            "name": "kendo-base-text",
+            "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 376,
-                "end": 376
+                "start": 322,
+                "end": 322
             }
         },
         "access": "public",
@@ -39607,24 +39582,24 @@
             "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",
+        "description": "The border color of the components' chrome area.\n",
         "commentRange": {
-            "start": 377,
-            "end": 377
+            "start": 323,
+            "end": 323
         },
         "context": {
             "type": "variable",
-            "name": "kendo-hover-border",
-            "value": "$kendo-base-border",
+            "name": "kendo-base-border",
+            "value": "rgba(black, 0.08)",
             "scope": "default",
             "line": {
-                "start": 378,
-                "end": 378
+                "start": 324,
+                "end": 324
             }
         },
         "access": "public",
@@ -39632,24 +39607,24 @@
             "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",
+        "description": "The gradient background of the components' chrome area.\n",
         "commentRange": {
-            "start": 379,
-            "end": 379
+            "start": 325,
+            "end": 325
         },
         "context": {
             "type": "variable",
-            "name": "kendo-hover-gradient",
-            "value": "$kendo-base-gradient",
+            "name": "kendo-base-gradient",
+            "value": "rgba(black, 0), rgba(black, 0.02)",
             "scope": "default",
             "line": {
-                "start": 380,
-                "end": 380
+                "start": 326,
+                "end": 326
             }
         },
         "access": "public",
@@ -39657,24 +39632,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "The background of selected items.\n",
+        "description": "The background of hovered items.\n",
         "commentRange": {
-            "start": 382,
-            "end": 382
+            "start": 328,
+            "end": 328
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-bg",
-            "value": "$kendo-color-primary",
+            "name": "kendo-hover-bg",
+            "value": "k-try-shade($kendo-base-bg, 0.5)",
             "scope": "default",
             "line": {
-                "start": 383,
-                "end": 383
+                "start": 329,
+                "end": 329
             }
         },
         "access": "public",
@@ -39682,24 +39657,24 @@
             "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 text color of hovered items.\n",
         "commentRange": {
-            "start": 384,
-            "end": 384
+            "start": 330,
+            "end": 330
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-text",
-            "value": "k-contrast-legacy( $kendo-selected-bg )",
+            "name": "kendo-hover-text",
+            "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 385,
-                "end": 385
+                "start": 331,
+                "end": 331
             }
         },
         "access": "public",
@@ -39707,24 +39682,24 @@
             "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 border color of hovered items.\n",
         "commentRange": {
-            "start": 386,
-            "end": 386
+            "start": 332,
+            "end": 332
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-border",
+            "name": "kendo-hover-border",
             "value": "$kendo-base-border",
             "scope": "default",
             "line": {
-                "start": 387,
-                "end": 387
+                "start": 333,
+                "end": 333
             }
         },
         "access": "public",
@@ -39732,24 +39707,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": "The gradient background of hovered items.\n",
         "commentRange": {
-            "start": 388,
-            "end": 388
+            "start": 334,
+            "end": 334
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-gradient",
+            "name": "kendo-hover-gradient",
             "value": "$kendo-base-gradient",
             "scope": "default",
             "line": {
-                "start": 389,
-                "end": 389
+                "start": 335,
+                "end": 335
             }
         },
         "access": "public",
@@ -39757,24 +39732,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "The background of selected and hovered items.\n",
+        "description": "The background of selected items.\n",
         "commentRange": {
-            "start": 391,
-            "end": 391
+            "start": 337,
+            "end": 337
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-hover-bg",
-            "value": "k-try-shade( $kendo-selected-bg, .5 )",
+            "name": "kendo-selected-bg",
+            "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 338,
+                "end": 338
             }
         },
         "access": "public",
@@ -39782,24 +39757,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "The text color of selected and hovered items.\n",
+        "description": "The text color of selected items.\n",
         "commentRange": {
-            "start": 393,
-            "end": 393
+            "start": 339,
+            "end": 339
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-hover-text",
-            "value": "$kendo-selected-text",
+            "name": "kendo-selected-text",
+            "value": "k-contrast-legacy($kendo-selected-bg)",
             "scope": "default",
             "line": {
-                "start": 394,
-                "end": 394
+                "start": 340,
+                "end": 340
             }
         },
         "access": "public",
@@ -39807,24 +39782,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "The border of selected and hovered items.\n",
+        "description": "The border color of selected items.\n",
         "commentRange": {
-            "start": 395,
-            "end": 395
+            "start": 341,
+            "end": 341
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-hover-border",
+            "name": "kendo-selected-border",
             "value": "$kendo-base-border",
             "scope": "default",
             "line": {
-                "start": 396,
-                "end": 396
+                "start": 342,
+                "end": 342
             }
         },
         "access": "public",
@@ -39832,24 +39807,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "The gradient of selected and hovered items.\n",
+        "description": "The gradient background of selected items.\n",
         "commentRange": {
-            "start": 397,
-            "end": 397
+            "start": 343,
+            "end": 343
         },
         "context": {
             "type": "variable",
-            "name": "kendo-selected-hover-gradient",
+            "name": "kendo-selected-gradient",
             "value": "$kendo-base-gradient",
             "scope": "default",
             "line": {
-                "start": 398,
-                "end": 398
+                "start": 344,
+                "end": 344
             }
         },
         "access": "public",
@@ -39857,24 +39832,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "Box shadow of focused items.\n",
+        "description": "The background of selected and hovered items.\n",
         "commentRange": {
-            "start": 401,
-            "end": 401
+            "start": 346,
+            "end": 346
         },
         "context": {
             "type": "variable",
-            "name": "kendo-focus-shadow",
-            "value": "inset 0 0 0 2px rgba(0, 0, 0, .13)",
+            "name": "kendo-selected-hover-bg",
+            "value": "k-try-shade($kendo-selected-bg, 0.5)",
             "scope": "default",
             "line": {
-                "start": 402,
-                "end": 402
+                "start": 347,
+                "end": 347
             }
         },
         "access": "public",
@@ -39882,24 +39857,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "Transition used across all components.\n",
+        "description": "The text color of selected and hovered items.\n",
         "commentRange": {
-            "start": 404,
-            "end": 404
+            "start": 348,
+            "end": 348
         },
         "context": {
             "type": "variable",
-            "name": "kendo-transition",
-            "value": "color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out",
+            "name": "kendo-selected-hover-text",
+            "value": "$kendo-selected-text",
             "scope": "default",
             "line": {
-                "start": 405,
-                "end": 405
+                "start": 349,
+                "end": 349
             }
         },
         "access": "public",
@@ -39907,24 +39882,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "Text color of disabled items.\n",
+        "description": "The border of selected and hovered items.\n",
         "commentRange": {
-            "start": 408,
-            "end": 408
+            "start": 350,
+            "end": 350
         },
         "context": {
             "type": "variable",
-            "name": "kendo-disabled-text",
-            "value": "#8f8f8f",
+            "name": "kendo-selected-hover-border",
+            "value": "$kendo-base-border",
             "scope": "default",
             "line": {
-                "start": 409,
-                "end": 409
+                "start": 351,
+                "end": 351
             }
         },
         "access": "public",
@@ -39932,24 +39907,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "Filter used for disabled items.\n",
+        "description": "The gradient of selected and hovered items.\n",
         "commentRange": {
-            "start": 410,
-            "end": 410
+            "start": 352,
+            "end": 352
         },
         "context": {
             "type": "variable",
-            "name": "kendo-disabled-filter",
-            "value": "grayscale(.1)",
+            "name": "kendo-selected-hover-gradient",
+            "value": "$kendo-base-gradient",
             "scope": "default",
             "line": {
-                "start": 411,
-                "end": 411
+                "start": 353,
+                "end": 353
             }
         },
         "access": "public",
@@ -39957,24 +39932,24 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
-        "description": "Opacity used for disabled items.\n",
+        "description": "Text color of disabled items.\n",
         "commentRange": {
-            "start": 412,
-            "end": 412
+            "start": 355,
+            "end": 355
         },
         "context": {
             "type": "variable",
-            "name": "kendo-disabled-opacity",
-            "value": ".6",
+            "name": "kendo-disabled-text",
+            "value": "#8f8f8f",
             "scope": "default",
             "line": {
-                "start": 413,
-                "end": 413
+                "start": 356,
+                "end": 356
             }
         },
         "access": "public",
@@ -39982,8 +39957,8 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {