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

package/dist/meta/sassdoc-data.json

@@ -306,7 +306,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-appbar-light-text",
-                "value": "k-contrast-color( $kendo-color-light )",
+                "value": "if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -360,7 +360,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-appbar-dark-text",
-                "value": "k-contrast-color( $kendo-color-dark )",
+                "value": "if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))",
                 "scope": "default",
                 "line": {
                     "start": 47,
@@ -4059,7 +4059,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-border",
-                "value": "k-try-shade( $kendo-button-bg, 2 )",
+                "value": "if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-button-bg, 2 ))",
                 "scope": "default",
                 "line": {
                     "start": 119,
@@ -4140,7 +4140,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-hover-bg",
-                "value": "k-try-shade( $kendo-button-bg, 1 )",
+                "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, 1 ))",
                 "scope": "default",
                 "line": {
                     "start": 129,
@@ -4194,7 +4194,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-hover-border",
-                "value": "k-try-shade( $kendo-button-bg, 3 )",
+                "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 ))",
                 "scope": "default",
                 "line": {
                     "start": 135,
@@ -4275,7 +4275,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-active-bg",
-                "value": "k-try-shade( $kendo-button-bg, 2 )",
+                "value": "if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 2 ))",
                 "scope": "default",
                 "line": {
                     "start": 145,
@@ -4329,7 +4329,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-active-border",
-                "value": "k-try-shade( $kendo-button-bg, 4 )",
+                "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 4 ))",
                 "scope": "default",
                 "line": {
                     "start": 151,
@@ -4437,7 +4437,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,
@@ -4653,7 +4653,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-focus-shadow",
-                "value": "0 0 4px 0 rgba( $kendo-button-border, .75 )",
+                "value": "0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 ))",
                 "scope": "default",
                 "line": {
                     "start": 189,
@@ -6840,7 +6840,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,
@@ -6867,7 +6867,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-b",
-                "value": "#ffd246",
+                "value": "if($kendo-enable-color-system, k-color( series-b ), #ffd246)",
                 "scope": "default",
                 "line": {
                     "start": 16,
@@ -6894,7 +6894,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-c",
-                "value": "#78d237",
+                "value": "if($kendo-enable-color-system, k-color( series-c ), #78d237)",
                 "scope": "default",
                 "line": {
                     "start": 24,
@@ -6921,7 +6921,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-d",
-                "value": "#28b4c8",
+                "value": "if($kendo-enable-color-system, k-color( series-d ), #28b4c8)",
                 "scope": "default",
                 "line": {
                     "start": 32,
@@ -6948,7 +6948,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-e",
-                "value": "#2d73f5",
+                "value": "if($kendo-enable-color-system, k-color( series-e ), #2d73f5)",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -6975,7 +6975,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-f",
-                "value": "#aa46be",
+                "value": "if($kendo-enable-color-system, k-color( series-f ), #aa46be)",
                 "scope": "default",
                 "line": {
                     "start": 48,
@@ -7029,7 +7029,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,
@@ -7056,7 +7056,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,
@@ -7542,7 +7542,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,
@@ -7758,7 +7758,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,
@@ -9027,7 +9027,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, .16 ) )",
+                "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
                 "scope": "default",
                 "line": {
                     "start": 118,
@@ -9324,7 +9324,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, .16 ) )",
+                "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
                 "scope": "default",
                 "line": {
                     "start": 155,
@@ -9378,7 +9378,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-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 162,
@@ -10639,66 +10639,37 @@
             "resolvedType": "Number"
         },
         {
-            "description": "The color white.\nNote: you cannot change this value.\n",
+            "description": "The global default Colors map.\n",
             "commentRange": {
-                "start": 3,
-                "end": 6
-            },
-            "context": {
-                "type": "variable",
-                "name": "kendo-color-white",
-                "value": "#ffffff",
-                "scope": "private",
-                "line": {
-                    "start": 7,
-                    "end": 7
-                }
-            },
-            "type": "Color",
-            "group": [
-                "color-system"
-            ],
-            "access": "public",
-            "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
-            },
-            "resolvedValue": "#ffffff",
-            "resolvedType": "Color"
-        },
-        {
-            "description": "The color black.\nNote: you cannot change this value.\n",
-            "commentRange": {
-                "start": 9,
-                "end": 12
+                "start": 177,
+                "end": 178
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-black",
-                "value": "#000000",
-                "scope": "private",
+                "name": "kendo-colors",
+                "value": "$_default-colors",
+                "scope": "default",
                 "line": {
-                    "start": 13,
-                    "end": 13
+                    "start": 179,
+                    "end": 179
                 }
             },
-            "type": "Color",
             "group": [
                 "color-system"
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
-            "resolvedValue": "#000000",
-            "resolvedType": "Color"
+            "resolvedValue": "(app-surface: #ffffff, on-app-surface: #272727, subtle: #666666, surface: #f0f0f0, surface-alt: #ffffff, border: #cacaca, border-alt: #b6b6b6, base-subtle: #f0f0f0, base-subtle-hover: #ebebeb, base-subtle-active: #dddddd, base: #ebebeb, base-hover: #dddddd, base-active: #d6d6d6, base-emphasis: #cacaca, base-on-subtle: #272727, on-base: #272727, base-on-surface: #272727, primary-subtle: #fff2eb, primary-subtle-hover: #ffe5d6, primary-subtle-active: #ffd8c2, primary: #f35800, primary-hover: #e05100, primary-active: #cc4a00, primary-emphasis: #ff8b47, primary-on-subtle: #3d1600, on-primary: #ffffff, primary-on-surface: #f35800, secondary-subtle: #cacaca, secondary-subtle-hover: #b6b6b6, secondary-subtle-active: #a3a3a3, secondary: #b6b6b6, secondary-hover: #a3a3a3, secondary-active: #8f8f8f, secondary-emphasis: #7a7a7a, secondary-on-subtle: #272727, on-secondary: #000000, secondary-on-surface: #8f8f8f, tertiary-subtle: #9cdffe, tertiary-subtle-hover: #72d1fe, tertiary-subtle-active: #49c4fd, tertiary: #03a9f4, tertiary-hover: #039be0, tertiary-active: #038ecd, tertiary-emphasis: #2cbbfd, tertiary-on-subtle: #01364e, on-tertiary: #ffffff, tertiary-on-surface: #0273a6, info-subtle: #cce5f3, info-subtle-hover: #a6d1ea, info-subtle-active: #6ab2dc, info: #007bc3, info-hover: #0071b3, info-active: #0067a4, info-emphasis: #409cd2, info-on-subtle: #002b44, on-info: #ffffff, info-on-surface: #005485, success-subtle: #bbdfc1, success-subtle-hover: #9ed1a6, success-subtle-active: #82c48c, success: #3ea44e, success-hover: #399748, success-active: #348a42, success-emphasis: #6ebb7a, success-on-subtle: #16391b, on-success: #ffffff, success-on-surface: #2a7035, warning-subtle: #ffdead, warning-subtle-hover: #ffd699, warning-subtle-active: #ffc670, warning: #ffa41f, warning-hover: #ff9800, warning-active: #eb8c00, warning-emphasis: #ffb240, warning-on-subtle: #593500, on-warning: #000000, warning-on-surface: #ffa41f, error-subtle: #f4c3b8, error-subtle-hover: #f2b4a6, error-subtle-active: #ec8e79, error: #d92800, error-hover: #c82500, error-active: #b62200, error-emphasis: #e35e40, error-on-subtle: #4c0e00, on-error: #ffffff, error-on-surface: #941b00, light-subtle: #f0f0f0, light-subtle-hover: #ebebeb, light-subtle-active: #dddddd, light: #ebebeb, light-hover: #dddddd, light-active: #d6d6d6, light-emphasis: #cacaca, light-on-subtle: #272727, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #cacaca, dark-subtle-hover: #b6b6b6, dark-subtle-active: #a3a3a3, dark: #404040, dark-hover: #333333, dark-active: #272727, dark-emphasis: #7a7a7a, dark-on-subtle: #000000, on-dark: #ffffff, dark-on-surface: #333333, inverse-subtle: #cacaca, inverse-subtle-hover: #b6b6b6, inverse-subtle-active: #a3a3a3, inverse: #404040, inverse-hover: #333333, inverse-active: #272727, inverse-emphasis: #7a7a7a, inverse-on-subtle: #000000, on-inverse: #ffffff, inverse-on-surface: #333333, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffd246, series-b-bold: #bf9d35, series-b-bolder: #806923, series-b-subtle: #ffe9a2, series-b-subtler: #ffdd74, series-c: #78d237, series-c-bold: #5a9d29, series-c-bolder: #3c691c, series-c-subtle: #bbe99b, series-c-subtler: #9add69, series-d: #28b4c8, series-d-bold: #1e8796, series-d-bolder: #145a64, series-d-subtle: #93d9e3, series-d-subtler: #5ec7d6, series-e: #2d73f5, series-e-bold: #2256b8, series-e-bolder: #173a7b, series-e-subtle: #96b9fa, series-e-subtler: #6296f7, series-f: #9d40b0, series-f-bold: #80358e, series-f-bolder: #55235f, series-f-subtle: #d5a2df, series-f-subtler: #bf74ce)",
+            "resolvedType": "Map"
         },
         {
             "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
             "commentRange": {
-                "start": 119,
-                "end": 122
+                "start": 184,
+                "end": 187
             },
             "context": {
                 "type": "variable",
@@ -10706,8 +10677,8 @@
                 "value": "#f35800",
                 "scope": "default",
                 "line": {
-                    "start": 123,
-                    "end": 123
+                    "start": 188,
+                    "end": 188
                 }
             },
             "group": [
@@ -10716,8 +10687,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#f35800",
             "resolvedType": "Color"
@@ -10725,8 +10696,8 @@
         {
             "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": 127,
-                "end": 130
+                "start": 192,
+                "end": 195
             },
             "context": {
                 "type": "variable",
@@ -10734,8 +10705,8 @@
                 "value": "k-contrast-legacy( $kendo-color-primary )",
                 "scope": "default",
                 "line": {
-                    "start": 131,
-                    "end": 131
+                    "start": 196,
+                    "end": 196
                 }
             },
             "group": [
@@ -10744,8 +10715,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "white",
             "resolvedType": "Color"
@@ -10753,8 +10724,8 @@
         {
             "description": "The secondary color of the theme.\n",
             "commentRange": {
-                "start": 133,
-                "end": 135
+                "start": 198,
+                "end": 200
             },
             "context": {
                 "type": "variable",
@@ -10762,8 +10733,8 @@
                 "value": "#e9e9e9",
                 "scope": "default",
                 "line": {
-                    "start": 136,
-                    "end": 136
+                    "start": 201,
+                    "end": 201
                 }
             },
             "group": [
@@ -10772,8 +10743,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#e9e9e9",
             "resolvedType": "Color"
@@ -10781,8 +10752,8 @@
         {
             "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": 140,
-                "end": 143
+                "start": 205,
+                "end": 208
             },
             "context": {
                 "type": "variable",
@@ -10790,8 +10761,8 @@
                 "value": "k-contrast-color( $kendo-color-secondary )",
                 "scope": "default",
                 "line": {
-                    "start": 144,
-                    "end": 144
+                    "start": 209,
+                    "end": 209
                 }
             },
             "group": [
@@ -10800,8 +10771,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "black",
             "resolvedType": "Color"
@@ -10809,8 +10780,8 @@
         {
             "description": "The tertiary color of the theme.\n",
             "commentRange": {
-                "start": 146,
-                "end": 148
+                "start": 211,
+                "end": 213
             },
             "context": {
                 "type": "variable",
@@ -10818,8 +10789,8 @@
                 "value": "#03a9f4",
                 "scope": "default",
                 "line": {
-                    "start": 149,
-                    "end": 149
+                    "start": 214,
+                    "end": 214
                 }
             },
             "group": [
@@ -10828,8 +10799,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#03a9f4",
             "resolvedType": "Color"
@@ -10837,8 +10808,8 @@
         {
             "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": 153,
-                "end": 156
+                "start": 218,
+                "end": 221
             },
             "context": {
                 "type": "variable",
@@ -10846,8 +10817,8 @@
                 "value": "k-contrast-color( $kendo-color-tertiary )",
                 "scope": "default",
                 "line": {
-                    "start": 157,
-                    "end": 157
+                    "start": 222,
+                    "end": 222
                 }
             },
             "group": [
@@ -10856,8 +10827,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "black",
             "resolvedType": "Color"
@@ -10865,8 +10836,8 @@
         {
             "description": "The color for informational messages and states.\n",
             "commentRange": {
-                "start": 159,
-                "end": 161
+                "start": 224,
+                "end": 226
             },
             "context": {
                 "type": "variable",
@@ -10874,8 +10845,8 @@
                 "value": "#2498bc",
                 "scope": "default",
                 "line": {
-                    "start": 162,
-                    "end": 162
+                    "start": 227,
+                    "end": 227
                 }
             },
             "group": [
@@ -10884,8 +10855,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#2498bc",
             "resolvedType": "Color"
@@ -10893,8 +10864,8 @@
         {
             "description": "The color for success messages and states.\n",
             "commentRange": {
-                "start": 166,
-                "end": 168
+                "start": 231,
+                "end": 233
             },
             "context": {
                 "type": "variable",
@@ -10902,8 +10873,8 @@
                 "value": "#3ea44e",
                 "scope": "default",
                 "line": {
-                    "start": 169,
-                    "end": 169
+                    "start": 234,
+                    "end": 234
                 }
             },
             "group": [
@@ -10912,8 +10883,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#3ea44e",
             "resolvedType": "Color"
@@ -10921,8 +10892,8 @@
         {
             "description": "The color for warning messages and states.\n",
             "commentRange": {
-                "start": 173,
-                "end": 175
+                "start": 238,
+                "end": 240
             },
             "context": {
                 "type": "variable",
@@ -10930,8 +10901,8 @@
                 "value": "#ff9800",
                 "scope": "default",
                 "line": {
-                    "start": 176,
-                    "end": 176
+                    "start": 241,
+                    "end": 241
                 }
             },
             "group": [
@@ -10940,8 +10911,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#ff9800",
             "resolvedType": "Color"
@@ -10949,8 +10920,8 @@
         {
             "description": "The color for error messages and states.\n",
             "commentRange": {
-                "start": 180,
-                "end": 182
+                "start": 245,
+                "end": 247
             },
             "context": {
                 "type": "variable",
@@ -10958,8 +10929,8 @@
                 "value": "#d92800",
                 "scope": "default",
                 "line": {
-                    "start": 183,
-                    "end": 183
+                    "start": 248,
+                    "end": 248
                 }
             },
             "group": [
@@ -10968,8 +10939,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#d92800",
             "resolvedType": "Color"
@@ -10977,8 +10948,8 @@
         {
             "description": "The dark color of the theme.\n",
             "commentRange": {
-                "start": 187,
-                "end": 189
+                "start": 252,
+                "end": 254
             },
             "context": {
                 "type": "variable",
@@ -10986,8 +10957,8 @@
                 "value": "#404040",
                 "scope": "default",
                 "line": {
-                    "start": 190,
-                    "end": 190
+                    "start": 255,
+                    "end": 255
                 }
             },
             "group": [
@@ -10996,8 +10967,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#404040",
             "resolvedType": "Color"
@@ -11005,8 +10976,8 @@
         {
             "description": "The light color of the theme.\n",
             "commentRange": {
-                "start": 192,
-                "end": 194
+                "start": 257,
+                "end": 259
             },
             "context": {
                 "type": "variable",
@@ -11014,8 +10985,8 @@
                 "value": "#ebebeb",
                 "scope": "default",
                 "line": {
-                    "start": 195,
-                    "end": 195
+                    "start": 260,
+                    "end": 260
                 }
             },
             "group": [
@@ -11024,8 +10995,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#ebebeb",
             "resolvedType": "Color"
@@ -11033,8 +11004,8 @@
         {
             "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
             "commentRange": {
-                "start": 197,
-                "end": 198
+                "start": 262,
+                "end": 263
             },
             "context": {
                 "type": "variable",
@@ -11042,8 +11013,8 @@
                 "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
                 "scope": "default",
                 "line": {
-                    "start": 199,
-                    "end": 199
+                    "start": 264,
+                    "end": 264
                 }
             },
             "group": [
@@ -11051,8 +11022,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#404040",
             "resolvedType": "Color"
@@ -11921,11 +11892,146 @@
             "resolvedValue": "0 1px 3px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px white",
             "resolvedType": "List"
         },
+        {
+            "description": "Background color of the body.\n",
+            "commentRange": {
+                "start": 281,
+                "end": 282
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-body-bg",
+                "value": "$kendo-color-white",
+                "scope": "default",
+                "line": {
+                    "start": 283,
+                    "end": 283
+                }
+            },
+            "group": [
+                "common"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#ffffff",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Text color of the body.\n",
+            "commentRange": {
+                "start": 284,
+                "end": 285
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-body-text",
+                "value": "#272727",
+                "scope": "default",
+                "line": {
+                    "start": 286,
+                    "end": 286
+                }
+            },
+            "group": [
+                "common"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#272727",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Subtle text color.\n",
+            "commentRange": {
+                "start": 288,
+                "end": 289
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-subtle-text",
+                "value": "#646464",
+                "scope": "default",
+                "line": {
+                    "start": 290,
+                    "end": 290
+                }
+            },
+            "group": [
+                "common"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#646464",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Text color of the links.\n",
+            "commentRange": {
+                "start": 297,
+                "end": 298
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-link-text",
+                "value": "$kendo-color-primary",
+                "scope": "default",
+                "line": {
+                    "start": 299,
+                    "end": 299
+                }
+            },
+            "group": [
+                "common"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#f35800",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Text color of the links on hover.\n",
+            "commentRange": {
+                "start": 300,
+                "end": 301
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-link-hover-text",
+                "value": "$kendo-color-primary-darker",
+                "scope": "default",
+                "line": {
+                    "start": 302,
+                    "end": 302
+                }
+            },
+            "group": [
+                "common"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#cc4a00",
+            "resolvedType": "Color"
+        },
         {
             "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": 295,
-                "end": 297
+                "start": 315,
+                "end": 317
             },
             "context": {
                 "type": "variable",
@@ -11933,8 +12039,8 @@
                 "value": "$kendo-body-bg",
                 "scope": "default",
                 "line": {
-                    "start": 298,
-                    "end": 298
+                    "start": 318,
+                    "end": 318
                 }
             },
             "group": [
@@ -11942,8 +12048,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#ffffff",
             "resolvedType": "Color"
@@ -11951,8 +12057,8 @@
         {
             "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": 299,
-                "end": 301
+                "start": 319,
+                "end": 321
             },
             "context": {
                 "type": "variable",
@@ -11960,8 +12066,8 @@
                 "value": "$kendo-body-text",
                 "scope": "default",
                 "line": {
-                    "start": 302,
-                    "end": 302
+                    "start": 322,
+                    "end": 322
                 }
             },
             "group": [
@@ -11969,8 +12075,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#272727",
             "resolvedType": "Color"
@@ -11978,8 +12084,8 @@
         {
             "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": 303,
-                "end": 305
+                "start": 323,
+                "end": 325
             },
             "context": {
                 "type": "variable",
@@ -11987,8 +12093,8 @@
                 "value": "$kendo-base-border",
                 "scope": "default",
                 "line": {
-                    "start": 306,
-                    "end": 306
+                    "start": 326,
+                    "end": 326
                 }
             },
             "group": [
@@ -11996,12 +12102,336 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#cacaca",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Background color of the component header.\n",
+            "commentRange": {
+                "start": 360,
+                "end": 361
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-component-header-bg",
+                "value": "$kendo-base-bg",
+                "scope": "default",
+                "line": {
+                    "start": 362,
+                    "end": 362
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#f0f0f0",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Text color of the component header.\n",
+            "commentRange": {
+                "start": 363,
+                "end": 364
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-component-header-text",
+                "value": "$kendo-base-text",
+                "scope": "default",
+                "line": {
+                    "start": 365,
+                    "end": 365
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#272727",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Border color of the component header.\n",
+            "commentRange": {
+                "start": 366,
+                "end": 367
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-component-header-border",
+                "value": "$kendo-base-border",
+                "scope": "default",
+                "line": {
+                    "start": 368,
+                    "end": 368
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#cacaca",
             "resolvedType": "Color"
         },
+        {
+            "description": "Gradient of the component header.\n",
+            "commentRange": {
+                "start": 369,
+                "end": 370
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-component-header-gradient",
+                "value": "$kendo-base-gradient",
+                "scope": "default",
+                "line": {
+                    "start": 371,
+                    "end": 371
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
+            "resolvedType": "List"
+        },
+        {
+            "description": "Background color of the invalid items.\n",
+            "commentRange": {
+                "start": 373,
+                "end": 374
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-invalid-bg",
+                "value": "null",
+                "scope": "default",
+                "line": {
+                    "start": 375,
+                    "end": 375
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "null",
+            "resolvedType": "Null"
+        },
+        {
+            "description": "Text color of the invalid items.\n",
+            "commentRange": {
+                "start": 376,
+                "end": 377
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-invalid-text",
+                "value": "$kendo-color-error",
+                "scope": "default",
+                "line": {
+                    "start": 378,
+                    "end": 378
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#d92800",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Border color of the invalid items.\n",
+            "commentRange": {
+                "start": 379,
+                "end": 380
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-invalid-border",
+                "value": "$kendo-color-error",
+                "scope": "default",
+                "line": {
+                    "start": 381,
+                    "end": 381
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#d92800",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Shadow of the invalid items.\n",
+            "commentRange": {
+                "start": 382,
+                "end": 383
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-invalid-shadow",
+                "value": "null",
+                "scope": "default",
+                "line": {
+                    "start": 384,
+                    "end": 384
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "null",
+            "resolvedType": "Null"
+        },
+        {
+            "description": "Background color of the valid items.\n",
+            "commentRange": {
+                "start": 386,
+                "end": 387
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-valid-bg",
+                "value": "null",
+                "scope": "default",
+                "line": {
+                    "start": 388,
+                    "end": 388
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "null",
+            "resolvedType": "Null"
+        },
+        {
+            "description": "Text color of the valid items.\n",
+            "commentRange": {
+                "start": 389,
+                "end": 390
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-valid-text",
+                "value": "$kendo-color-success",
+                "scope": "default",
+                "line": {
+                    "start": 391,
+                    "end": 391
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#3ea44e",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Border color of the valid items.\n",
+            "commentRange": {
+                "start": 392,
+                "end": 393
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-valid-border",
+                "value": "$kendo-color-success",
+                "scope": "default",
+                "line": {
+                    "start": 394,
+                    "end": 394
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#3ea44e",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "Shadow of the valid items.\n",
+            "commentRange": {
+                "start": 395,
+                "end": 396
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-valid-shadow",
+                "value": "null",
+                "scope": "default",
+                "line": {
+                    "start": 397,
+                    "end": 397
+                }
+            },
+            "group": [
+                "component"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "null",
+            "resolvedType": "Null"
+        },
         {
             "description": "The background color of the Dialog titlebar.\n",
             "commentRange": {
@@ -13118,7 +13548,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,
@@ -13523,7 +13953,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,
@@ -13955,7 +14385,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,
@@ -14543,17 +14973,17 @@
         {
             "description": "The background color of the hovered ExpansionPanel header.\n",
             "commentRange": {
-                "start": 51,
-                "end": 52
+                "start": 50,
+                "end": 51
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-expander-header-hover-bg",
-                "value": "k-color-shade( $kendo-expander-bg, 1 )",
+                "value": "if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 ))",
                 "scope": "default",
                 "line": {
-                    "start": 53,
-                    "end": 53
+                    "start": 52,
+                    "end": 52
                 }
             },
             "group": [
@@ -14570,8 +15000,8 @@
         {
             "description": "The background color of the focused ExpansionPanel header.\n",
             "commentRange": {
-                "start": 54,
-                "end": 55
+                "start": 53,
+                "end": 54
             },
             "context": {
                 "type": "variable",
@@ -14579,8 +15009,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 56,
-                    "end": 56
+                    "start": 55,
+                    "end": 55
                 }
             },
             "group": [
@@ -14597,8 +15027,8 @@
         {
             "description": "The box shadow of the focused ExpansionPanel header.\n",
             "commentRange": {
-                "start": 57,
-                "end": 58
+                "start": 56,
+                "end": 57
             },
             "context": {
                 "type": "variable",
@@ -14606,8 +15036,8 @@
                 "value": "$kendo-list-item-focus-shadow",
                 "scope": "default",
                 "line": {
-                    "start": 59,
-                    "end": 59
+                    "start": 58,
+                    "end": 58
                 }
             },
             "group": [
@@ -14624,8 +15054,8 @@
         {
             "description": "The text color of the ExpansionPanel title.\n",
             "commentRange": {
-                "start": 61,
-                "end": 62
+                "start": 60,
+                "end": 61
             },
             "context": {
                 "type": "variable",
@@ -14633,8 +15063,8 @@
                 "value": "$kendo-color-primary",
                 "scope": "default",
                 "line": {
-                    "start": 63,
-                    "end": 63
+                    "start": 62,
+                    "end": 62
                 }
             },
             "group": [
@@ -14651,8 +15081,8 @@
         {
             "description": "The text color of the ExpansionPanel sub-title.\n",
             "commentRange": {
-                "start": 65,
-                "end": 66
+                "start": 64,
+                "end": 65
             },
             "context": {
                 "type": "variable",
@@ -14660,8 +15090,8 @@
                 "value": "$kendo-subtle-text",
                 "scope": "default",
                 "line": {
-                    "start": 67,
-                    "end": 67
+                    "start": 66,
+                    "end": 66
                 }
             },
             "group": [
@@ -14678,8 +15108,8 @@
         {
             "description": "The horizontal margin of the ExpansionPanel indicator.\n",
             "commentRange": {
-                "start": 69,
-                "end": 70
+                "start": 68,
+                "end": 69
             },
             "context": {
                 "type": "variable",
@@ -14687,8 +15117,8 @@
                 "value": "k-map-get( $kendo-spacing, 3 )",
                 "scope": "default",
                 "line": {
-                    "start": 71,
-                    "end": 71
+                    "start": 70,
+                    "end": 70
                 }
             },
             "group": [
@@ -14705,8 +15135,8 @@
         {
             "description": "The horizontal padding of the ExpansionPanel content.\n",
             "commentRange": {
-                "start": 73,
-                "end": 74
+                "start": 72,
+                "end": 73
             },
             "context": {
                 "type": "variable",
@@ -14714,8 +15144,8 @@
                 "value": "k-map-get( $kendo-spacing, 4 )",
                 "scope": "default",
                 "line": {
-                    "start": 75,
-                    "end": 75
+                    "start": 74,
+                    "end": 74
                 }
             },
             "group": [
@@ -14732,8 +15162,8 @@
         {
             "description": "The vertical padding of the ExpansionPanel content.\n",
             "commentRange": {
-                "start": 76,
-                "end": 77
+                "start": 75,
+                "end": 76
             },
             "context": {
                 "type": "variable",
@@ -14741,8 +15171,8 @@
                 "value": "k-map-get( $kendo-spacing, 4 )",
                 "scope": "default",
                 "line": {
-                    "start": 78,
-                    "end": 78
+                    "start": 77,
+                    "end": 77
                 }
             },
             "group": [
@@ -15764,7 +16194,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,
@@ -16250,7 +16680,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,
@@ -19301,7 +19731,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,
@@ -20456,17 +20886,17 @@
         {
             "description": "Background color of the grid row resize indicator\n",
             "commentRange": {
-                "start": 312,
-                "end": 313
+                "start": 315,
+                "end": 316
             },
             "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": 314,
-                    "end": 314
+                    "start": 317,
+                    "end": 317
                 }
             },
             "group": [
@@ -20483,8 +20913,8 @@
         {
             "description": "Active background color of the grid row resize indicator\n",
             "commentRange": {
-                "start": 315,
-                "end": 316
+                "start": 318,
+                "end": 319
             },
             "context": {
                 "type": "variable",
@@ -20492,8 +20922,8 @@
                 "value": "$kendo-color-primary",
                 "scope": "default",
                 "line": {
-                    "start": 317,
-                    "end": 317
+                    "start": 320,
+                    "end": 320
                 }
             },
             "group": [
@@ -20510,8 +20940,8 @@
         {
             "description": "Height of the grid row resize indicator\n",
             "commentRange": {
-                "start": 318,
-                "end": 319
+                "start": 321,
+                "end": 322
             },
             "context": {
                 "type": "variable",
@@ -20519,8 +20949,8 @@
                 "value": "k-map-get( $kendo-spacing, .5 )",
                 "scope": "default",
                 "line": {
-                    "start": 320,
-                    "end": 320
+                    "start": 323,
+                    "end": 323
                 }
             },
             "group": [
@@ -21677,7 +22107,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-app-surface, true ), .5 ), rgba( $kendo-button-text, .5))",
                 "scope": "default",
                 "line": {
                     "start": 171,
@@ -21758,7 +22188,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-app-surface, true ), .8 ), rgba( $kendo-button-text, .8))",
                 "scope": "default",
                 "line": {
                     "start": 181,
@@ -24566,7 +24996,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,
@@ -29615,7 +30045,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-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5))",
                 "scope": "default",
                 "line": {
                     "start": 372,
@@ -29669,7 +30099,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-picker-outline-hover-text",
-                "value": "k-contrast-color( $kendo-picker-outline-hover-bg )",
+                "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 379,
@@ -29993,7 +30423,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-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 ))",
                 "scope": "default",
                 "line": {
                     "start": 419,
@@ -30047,7 +30477,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-picker-flat-hover-border",
-                "value": "rgba( $kendo-button-border, .16 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 ))",
                 "scope": "default",
                 "line": {
                     "start": 425,
@@ -31478,7 +31908,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 ), k-try-shade( $kendo-component-bg, 1 ))",
                 "scope": "default",
                 "line": {
                     "start": 27,
@@ -31613,7 +32043,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,
@@ -31640,7 +32070,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,
@@ -34340,7 +34770,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-scrollview-pagebutton-primary-border",
-                "value": "k-try-shade( $kendo-color-primary, 2 )",
+                "value": "if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -34907,7 +35337,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-skeleton-item-bg",
-                "value": "rgba( $kendo-color-inverse, .2 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))",
                 "scope": "default",
                 "line": {
                     "start": 20,
@@ -35690,7 +36120,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-track-focus-ring",
-                "value": "0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )",
+                "value": "0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )",
                 "scope": "default",
                 "line": {
                     "start": 71,
@@ -35825,7 +36255,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-thumb-bg",
-                "value": "k-try-shade( $kendo-switch-off-track-bg )",
+                "value": "if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 88,
@@ -35933,7 +36363,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-thumb-hover-bg",
-                "value": "k-try-shade( $kendo-switch-off-thumb-bg )",
+                "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 101,
@@ -36365,7 +36795,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-track-focus-ring",
-                "value": "0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )",
+                "value": "0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )",
                 "scope": "default",
                 "line": {
                     "start": 153,
@@ -36554,7 +36984,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-thumb-border",
-                "value": "k-try-shade( $kendo-switch-on-thumb-bg )",
+                "value": "if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 176,
@@ -36608,7 +37038,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-thumb-hover-bg",
-                "value": "k-try-shade( $kendo-switch-on-thumb-bg )",
+                "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 183,
@@ -36662,7 +37092,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-thumb-hover-border",
-                "value": "k-try-shade( $kendo-switch-on-thumb-hover-bg )",
+                "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 189,
@@ -37283,7 +37713,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-alt-row-bg",
-                "value": "k-try-shade( $kendo-table-bg, .5 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 ))",
                 "scope": "default",
                 "line": {
                     "start": 114,
@@ -37364,7 +37794,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-hover-bg",
-                "value": "k-try-shade( $kendo-table-bg, 1 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 ))",
                 "scope": "default",
                 "line": {
                     "start": 125,
@@ -37553,7 +37983,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-selected-bg",
-                "value": "rgba( $kendo-selected-bg, .25 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 150,
@@ -39632,7 +40062,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-tooltip-bg",
-                "value": "rgba( k-contrast-color( $kendo-body-bg ), .75 )",
+                "value": "if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-color( $kendo-body-bg ), .75 ))",
                 "scope": "default",
                 "line": {
                     "start": 39,
@@ -39659,7 +40089,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-tooltip-text",
-                "value": "k-contrast-color( $kendo-tooltip-bg )",
+                "value": "if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 42,
@@ -41111,8 +41541,8 @@
         {
             "description": "Base font size across all components.\n",
             "commentRange": {
-                "start": 218,
-                "end": 219
+                "start": 109,
+                "end": 110
             },
             "context": {
                 "type": "variable",
@@ -41120,8 +41550,8 @@
                 "value": "14px",
                 "scope": "default",
                 "line": {
-                    "start": 220,
-                    "end": 220
+                    "start": 111,
+                    "end": 111
                 }
             },
             "group": [
@@ -41138,8 +41568,8 @@
         {
             "description": "Font family for text.\n",
             "commentRange": {
-                "start": 235,
-                "end": 236
+                "start": 126,
+                "end": 127
             },
             "context": {
                 "type": "variable",
@@ -41147,8 +41577,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": 237,
-                    "end": 237
+                    "start": 128,
+                    "end": 128
                 }
             },
             "group": [
@@ -41165,8 +41595,8 @@
         {
             "description": "Font family for monospaced text. Used for styling the code.\n",
             "commentRange": {
-                "start": 239,
-                "end": 240
+                "start": 130,
+                "end": 131
             },
             "context": {
                 "type": "variable",
@@ -41174,8 +41604,8 @@
                 "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Roboto Mono\", \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
                 "scope": "default",
                 "line": {
-                    "start": 241,
-                    "end": 241
+                    "start": 132,
+                    "end": 132
                 }
             },
             "group": [
@@ -41192,8 +41622,8 @@
         {
             "description": "Font family across all components.\n",
             "commentRange": {
-                "start": 243,
-                "end": 244
+                "start": 134,
+                "end": 135
             },
             "context": {
                 "type": "variable",
@@ -41201,8 +41631,8 @@
                 "value": "inherit",
                 "scope": "default",
                 "line": {
-                    "start": 245,
-                    "end": 245
+                    "start": 136,
+                    "end": 136
                 }
             },
             "group": [
@@ -41219,8 +41649,8 @@
         {
             "description": "Line height used along with $kendo-font-size.\n",
             "commentRange": {
-                "start": 247,
-                "end": 248
+                "start": 138,
+                "end": 139
             },
             "context": {
                 "type": "variable",
@@ -41228,8 +41658,8 @@
                 "value": "k-math-div( 20, 14 )",
                 "scope": "default",
                 "line": {
-                    "start": 249,
-                    "end": 249
+                    "start": 140,
+                    "end": 140
                 }
             },
             "group": [
@@ -41246,8 +41676,8 @@
         {
             "description": "Border radius for all components.\n",
             "commentRange": {
-                "start": 94,
-                "end": 94
+                "start": 82,
+                "end": 82
             },
             "context": {
                 "type": "variable",
@@ -41255,8 +41685,8 @@
                 "value": "k-map-get( $kendo-spacing, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 95,
-                    "end": 95
+                    "start": 83,
+                    "end": 83
                 }
             },
             "access": "public",
@@ -41273,8 +41703,8 @@
         {
             "description": "The background of the components' chrome area.\n",
             "commentRange": {
-                "start": 286,
-                "end": 286
+                "start": 306,
+                "end": 306
             },
             "context": {
                 "type": "variable",
@@ -41282,8 +41712,8 @@
                 "value": "#f0f0f0",
                 "scope": "default",
                 "line": {
-                    "start": 287,
-                    "end": 287
+                    "start": 307,
+                    "end": 307
                 }
             },
             "access": "public",
@@ -41291,8 +41721,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#f0f0f0",
             "resolvedType": "Color"
@@ -41300,8 +41730,8 @@
         {
             "description": "The text color of the components' chrome area.\n",
             "commentRange": {
-                "start": 288,
-                "end": 288
+                "start": 308,
+                "end": 308
             },
             "context": {
                 "type": "variable",
@@ -41309,8 +41739,8 @@
                 "value": "$kendo-body-text",
                 "scope": "default",
                 "line": {
-                    "start": 289,
-                    "end": 289
+                    "start": 309,
+                    "end": 309
                 }
             },
             "access": "public",
@@ -41318,8 +41748,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#272727",
             "resolvedType": "Color"
@@ -41327,8 +41757,8 @@
         {
             "description": "The border color of the components' chrome area.\n",
             "commentRange": {
-                "start": 290,
-                "end": 290
+                "start": 310,
+                "end": 310
             },
             "context": {
                 "type": "variable",
@@ -41336,8 +41766,8 @@
                 "value": "k-try-shade( $kendo-base-bg, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 291,
-                    "end": 291
+                    "start": 311,
+                    "end": 311
                 }
             },
             "access": "public",
@@ -41345,8 +41775,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#cacaca",
             "resolvedType": "Color"
@@ -41354,8 +41784,8 @@
         {
             "description": "The gradient background of the components' chrome area.\n",
             "commentRange": {
-                "start": 292,
-                "end": 292
+                "start": 312,
+                "end": 312
             },
             "context": {
                 "type": "variable",
@@ -41363,8 +41793,8 @@
                 "value": "rgba( white, .1 ), rgba( white, 0 )",
                 "scope": "default",
                 "line": {
-                    "start": 293,
-                    "end": 293
+                    "start": 313,
+                    "end": 313
                 }
             },
             "access": "public",
@@ -41372,8 +41802,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
             "resolvedType": "List"
@@ -41381,8 +41811,8 @@
         {
             "description": "The background of hovered items.\n",
             "commentRange": {
-                "start": 308,
-                "end": 308
+                "start": 328,
+                "end": 328
             },
             "context": {
                 "type": "variable",
@@ -41390,8 +41820,8 @@
                 "value": "k-try-shade( $kendo-base-bg, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 309,
-                    "end": 309
+                    "start": 329,
+                    "end": 329
                 }
             },
             "access": "public",
@@ -41399,8 +41829,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#dddddd",
             "resolvedType": "Color"
@@ -41408,8 +41838,8 @@
         {
             "description": "The text color of hovered items.\n",
             "commentRange": {
-                "start": 310,
-                "end": 310
+                "start": 330,
+                "end": 330
             },
             "context": {
                 "type": "variable",
@@ -41417,8 +41847,8 @@
                 "value": "$kendo-base-text",
                 "scope": "default",
                 "line": {
-                    "start": 311,
-                    "end": 311
+                    "start": 331,
+                    "end": 331
                 }
             },
             "access": "public",
@@ -41426,8 +41856,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#272727",
             "resolvedType": "Color"
@@ -41435,8 +41865,8 @@
         {
             "description": "The border color of hovered items.\n",
             "commentRange": {
-                "start": 312,
-                "end": 312
+                "start": 332,
+                "end": 332
             },
             "context": {
                 "type": "variable",
@@ -41444,8 +41874,8 @@
                 "value": "k-try-shade( $kendo-hover-bg, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 313,
-                    "end": 313
+                    "start": 333,
+                    "end": 333
                 }
             },
             "access": "public",
@@ -41453,8 +41883,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#bababa",
             "resolvedType": "Color"
@@ -41462,8 +41892,8 @@
         {
             "description": "The gradient background of hovered items.\n",
             "commentRange": {
-                "start": 314,
-                "end": 314
+                "start": 334,
+                "end": 334
             },
             "context": {
                 "type": "variable",
@@ -41471,8 +41901,8 @@
                 "value": "$kendo-base-gradient",
                 "scope": "default",
                 "line": {
-                    "start": 315,
-                    "end": 315
+                    "start": 335,
+                    "end": 335
                 }
             },
             "access": "public",
@@ -41480,8 +41910,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
             "resolvedType": "List"
@@ -41489,8 +41919,8 @@
         {
             "description": "The background of selected items.\n",
             "commentRange": {
-                "start": 317,
-                "end": 317
+                "start": 337,
+                "end": 337
             },
             "context": {
                 "type": "variable",
@@ -41498,8 +41928,8 @@
                 "value": "$kendo-color-primary",
                 "scope": "default",
                 "line": {
-                    "start": 318,
-                    "end": 318
+                    "start": 338,
+                    "end": 338
                 }
             },
             "access": "public",
@@ -41507,8 +41937,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#f35800",
             "resolvedType": "Color"
@@ -41516,8 +41946,8 @@
         {
             "description": "The text color of selected items.\n",
             "commentRange": {
-                "start": 319,
-                "end": 319
+                "start": 339,
+                "end": 339
             },
             "context": {
                 "type": "variable",
@@ -41525,8 +41955,8 @@
                 "value": "k-contrast-legacy( $kendo-selected-bg )",
                 "scope": "default",
                 "line": {
-                    "start": 320,
-                    "end": 320
+                    "start": 340,
+                    "end": 340
                 }
             },
             "access": "public",
@@ -41534,8 +41964,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "white",
             "resolvedType": "Color"
@@ -41543,8 +41973,8 @@
         {
             "description": "The border color of selected items.\n",
             "commentRange": {
-                "start": 321,
-                "end": 321
+                "start": 341,
+                "end": 341
             },
             "context": {
                 "type": "variable",
@@ -41552,8 +41982,8 @@
                 "value": "k-try-shade( $kendo-selected-bg, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 322,
-                    "end": 322
+                    "start": 342,
+                    "end": 342
                 }
             },
             "access": "public",
@@ -41561,8 +41991,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#cc4a00",
             "resolvedType": "Color"
@@ -41570,8 +42000,8 @@
         {
             "description": "The gradient background of selected items.\n",
             "commentRange": {
-                "start": 323,
-                "end": 323
+                "start": 343,
+                "end": 343
             },
             "context": {
                 "type": "variable",
@@ -41579,8 +42009,8 @@
                 "value": "$kendo-base-gradient",
                 "scope": "default",
                 "line": {
-                    "start": 324,
-                    "end": 324
+                    "start": 344,
+                    "end": 344
                 }
             },
             "access": "public",
@@ -41588,12 +42018,147 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
             "resolvedType": "List"
         },
+        {
+            "description": "The background of selected and hovered items.\n",
+            "commentRange": {
+                "start": 346,
+                "end": 346
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-selected-hover-bg",
+                "value": "k-try-shade( $kendo-selected-bg, 1 )",
+                "scope": "default",
+                "line": {
+                    "start": 347,
+                    "end": 347
+                }
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#e05100",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "The text color of selected and hovered items.\n",
+            "commentRange": {
+                "start": 348,
+                "end": 348
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-selected-hover-text",
+                "value": "k-contrast-legacy( $kendo-selected-hover-bg )",
+                "scope": "default",
+                "line": {
+                    "start": 349,
+                    "end": 349
+                }
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "white",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "The border of selected and hovered items.\n",
+            "commentRange": {
+                "start": 350,
+                "end": 350
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-selected-hover-border",
+                "value": "$kendo-selected-border",
+                "scope": "default",
+                "line": {
+                    "start": 351,
+                    "end": 351
+                }
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#cc4a00",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "The gradient of selected and hovered items.\n",
+            "commentRange": {
+                "start": 352,
+                "end": 352
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-selected-hover-gradient",
+                "value": "$kendo-selected-gradient",
+                "scope": "default",
+                "line": {
+                    "start": 353,
+                    "end": 353
+                }
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
+            "resolvedType": "List"
+        },
+        {
+            "description": "Text color of disabled items.\n",
+            "commentRange": {
+                "start": 355,
+                "end": 355
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-disabled-text",
+                "value": "#8d8d8d",
+                "scope": "default",
+                "line": {
+                    "start": 356,
+                    "end": 356
+                }
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "file": {
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
+            },
+            "resolvedValue": "#8d8d8d",
+            "resolvedType": "Color"
+        },
         {
             "description": "The width of the border around the Upload.\n",
             "commentRange": {
@@ -43197,11 +43762,146 @@
             "id": "common",
             "title": "Common",
             "variables": [
+                {
+                    "description": "Background color of the body.\n",
+                    "commentRange": {
+                        "start": 281,
+                        "end": 282
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-body-bg",
+                        "value": "$kendo-color-white",
+                        "scope": "default",
+                        "line": {
+                            "start": 283,
+                            "end": 283
+                        }
+                    },
+                    "group": [
+                        "common"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#ffffff",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Text color of the body.\n",
+                    "commentRange": {
+                        "start": 284,
+                        "end": 285
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-body-text",
+                        "value": "#272727",
+                        "scope": "default",
+                        "line": {
+                            "start": 286,
+                            "end": 286
+                        }
+                    },
+                    "group": [
+                        "common"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#272727",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Subtle text color.\n",
+                    "commentRange": {
+                        "start": 288,
+                        "end": 289
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-subtle-text",
+                        "value": "#646464",
+                        "scope": "default",
+                        "line": {
+                            "start": 290,
+                            "end": 290
+                        }
+                    },
+                    "group": [
+                        "common"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#646464",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Text color of the links.\n",
+                    "commentRange": {
+                        "start": 297,
+                        "end": 298
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-link-text",
+                        "value": "$kendo-color-primary",
+                        "scope": "default",
+                        "line": {
+                            "start": 299,
+                            "end": 299
+                        }
+                    },
+                    "group": [
+                        "common"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#f35800",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Text color of the links on hover.\n",
+                    "commentRange": {
+                        "start": 300,
+                        "end": 301
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-link-hover-text",
+                        "value": "$kendo-color-primary-darker",
+                        "scope": "default",
+                        "line": {
+                            "start": 302,
+                            "end": 302
+                        }
+                    },
+                    "group": [
+                        "common"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#cc4a00",
+                    "resolvedType": "Color"
+                },
                 {
                     "description": "Border radius for all components.\n",
                     "commentRange": {
-                        "start": 94,
-                        "end": 94
+                        "start": 82,
+                        "end": 82
                     },
                     "context": {
                         "type": "variable",
@@ -43209,8 +43909,8 @@
                         "value": "k-map-get( $kendo-spacing, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 95,
-                            "end": 95
+                            "start": 83,
+                            "end": 83
                         }
                     },
                     "access": "public",
@@ -43227,8 +43927,8 @@
                 {
                     "description": "The background of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 286,
-                        "end": 286
+                        "start": 306,
+                        "end": 306
                     },
                     "context": {
                         "type": "variable",
@@ -43236,8 +43936,8 @@
                         "value": "#f0f0f0",
                         "scope": "default",
                         "line": {
-                            "start": 287,
-                            "end": 287
+                            "start": 307,
+                            "end": 307
                         }
                     },
                     "access": "public",
@@ -43245,8 +43945,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#f0f0f0",
                     "resolvedType": "Color"
@@ -43254,8 +43954,8 @@
                 {
                     "description": "The text color of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 288,
-                        "end": 288
+                        "start": 308,
+                        "end": 308
                     },
                     "context": {
                         "type": "variable",
@@ -43263,8 +43963,8 @@
                         "value": "$kendo-body-text",
                         "scope": "default",
                         "line": {
-                            "start": 289,
-                            "end": 289
+                            "start": 309,
+                            "end": 309
                         }
                     },
                     "access": "public",
@@ -43272,8 +43972,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#272727",
                     "resolvedType": "Color"
@@ -43281,8 +43981,8 @@
                 {
                     "description": "The border color of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 290,
-                        "end": 290
+                        "start": 310,
+                        "end": 310
                     },
                     "context": {
                         "type": "variable",
@@ -43290,8 +43990,8 @@
                         "value": "k-try-shade( $kendo-base-bg, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 291,
-                            "end": 291
+                            "start": 311,
+                            "end": 311
                         }
                     },
                     "access": "public",
@@ -43299,8 +43999,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#cacaca",
                     "resolvedType": "Color"
@@ -43308,8 +44008,8 @@
                 {
                     "description": "The gradient background of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 292,
-                        "end": 292
+                        "start": 312,
+                        "end": 312
                     },
                     "context": {
                         "type": "variable",
@@ -43317,8 +44017,8 @@
                         "value": "rgba( white, .1 ), rgba( white, 0 )",
                         "scope": "default",
                         "line": {
-                            "start": 293,
-                            "end": 293
+                            "start": 313,
+                            "end": 313
                         }
                     },
                     "access": "public",
@@ -43326,8 +44026,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
                     "resolvedType": "List"
@@ -43335,8 +44035,8 @@
                 {
                     "description": "The background of hovered items.\n",
                     "commentRange": {
-                        "start": 308,
-                        "end": 308
+                        "start": 328,
+                        "end": 328
                     },
                     "context": {
                         "type": "variable",
@@ -43344,8 +44044,8 @@
                         "value": "k-try-shade( $kendo-base-bg, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 309,
-                            "end": 309
+                            "start": 329,
+                            "end": 329
                         }
                     },
                     "access": "public",
@@ -43353,8 +44053,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#dddddd",
                     "resolvedType": "Color"
@@ -43362,8 +44062,8 @@
                 {
                     "description": "The text color of hovered items.\n",
                     "commentRange": {
-                        "start": 310,
-                        "end": 310
+                        "start": 330,
+                        "end": 330
                     },
                     "context": {
                         "type": "variable",
@@ -43371,8 +44071,8 @@
                         "value": "$kendo-base-text",
                         "scope": "default",
                         "line": {
-                            "start": 311,
-                            "end": 311
+                            "start": 331,
+                            "end": 331
                         }
                     },
                     "access": "public",
@@ -43380,8 +44080,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#272727",
                     "resolvedType": "Color"
@@ -43389,8 +44089,8 @@
                 {
                     "description": "The border color of hovered items.\n",
                     "commentRange": {
-                        "start": 312,
-                        "end": 312
+                        "start": 332,
+                        "end": 332
                     },
                     "context": {
                         "type": "variable",
@@ -43398,8 +44098,8 @@
                         "value": "k-try-shade( $kendo-hover-bg, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 313,
-                            "end": 313
+                            "start": 333,
+                            "end": 333
                         }
                     },
                     "access": "public",
@@ -43407,8 +44107,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#bababa",
                     "resolvedType": "Color"
@@ -43416,8 +44116,8 @@
                 {
                     "description": "The gradient background of hovered items.\n",
                     "commentRange": {
-                        "start": 314,
-                        "end": 314
+                        "start": 334,
+                        "end": 334
                     },
                     "context": {
                         "type": "variable",
@@ -43425,8 +44125,8 @@
                         "value": "$kendo-base-gradient",
                         "scope": "default",
                         "line": {
-                            "start": 315,
-                            "end": 315
+                            "start": 335,
+                            "end": 335
                         }
                     },
                     "access": "public",
@@ -43434,8 +44134,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
                     "resolvedType": "List"
@@ -43443,8 +44143,8 @@
                 {
                     "description": "The background of selected items.\n",
                     "commentRange": {
-                        "start": 317,
-                        "end": 317
+                        "start": 337,
+                        "end": 337
                     },
                     "context": {
                         "type": "variable",
@@ -43452,8 +44152,8 @@
                         "value": "$kendo-color-primary",
                         "scope": "default",
                         "line": {
-                            "start": 318,
-                            "end": 318
+                            "start": 338,
+                            "end": 338
                         }
                     },
                     "access": "public",
@@ -43461,8 +44161,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#f35800",
                     "resolvedType": "Color"
@@ -43470,8 +44170,8 @@
                 {
                     "description": "The text color of selected items.\n",
                     "commentRange": {
-                        "start": 319,
-                        "end": 319
+                        "start": 339,
+                        "end": 339
                     },
                     "context": {
                         "type": "variable",
@@ -43479,8 +44179,8 @@
                         "value": "k-contrast-legacy( $kendo-selected-bg )",
                         "scope": "default",
                         "line": {
-                            "start": 320,
-                            "end": 320
+                            "start": 340,
+                            "end": 340
                         }
                     },
                     "access": "public",
@@ -43488,8 +44188,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "white",
                     "resolvedType": "Color"
@@ -43497,8 +44197,8 @@
                 {
                     "description": "The border color of selected items.\n",
                     "commentRange": {
-                        "start": 321,
-                        "end": 321
+                        "start": 341,
+                        "end": 341
                     },
                     "context": {
                         "type": "variable",
@@ -43506,8 +44206,8 @@
                         "value": "k-try-shade( $kendo-selected-bg, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 322,
-                            "end": 322
+                            "start": 342,
+                            "end": 342
                         }
                     },
                     "access": "public",
@@ -43515,8 +44215,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#cc4a00",
                     "resolvedType": "Color"
@@ -43524,8 +44224,8 @@
                 {
                     "description": "The gradient background of selected items.\n",
                     "commentRange": {
-                        "start": 323,
-                        "end": 323
+                        "start": 343,
+                        "end": 343
                     },
                     "context": {
                         "type": "variable",
@@ -43533,8 +44233,8 @@
                         "value": "$kendo-base-gradient",
                         "scope": "default",
                         "line": {
-                            "start": 324,
-                            "end": 324
+                            "start": 344,
+                            "end": 344
                         }
                     },
                     "access": "public",
@@ -43542,11 +44242,146 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
                     "resolvedType": "List"
+                },
+                {
+                    "description": "The background of selected and hovered items.\n",
+                    "commentRange": {
+                        "start": 346,
+                        "end": 346
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-selected-hover-bg",
+                        "value": "k-try-shade( $kendo-selected-bg, 1 )",
+                        "scope": "default",
+                        "line": {
+                            "start": 347,
+                            "end": 347
+                        }
+                    },
+                    "access": "public",
+                    "group": [
+                        "undefined"
+                    ],
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#e05100",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "The text color of selected and hovered items.\n",
+                    "commentRange": {
+                        "start": 348,
+                        "end": 348
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-selected-hover-text",
+                        "value": "k-contrast-legacy( $kendo-selected-hover-bg )",
+                        "scope": "default",
+                        "line": {
+                            "start": 349,
+                            "end": 349
+                        }
+                    },
+                    "access": "public",
+                    "group": [
+                        "undefined"
+                    ],
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "white",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "The border of selected and hovered items.\n",
+                    "commentRange": {
+                        "start": 350,
+                        "end": 350
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-selected-hover-border",
+                        "value": "$kendo-selected-border",
+                        "scope": "default",
+                        "line": {
+                            "start": 351,
+                            "end": 351
+                        }
+                    },
+                    "access": "public",
+                    "group": [
+                        "undefined"
+                    ],
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#cc4a00",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "The gradient of selected and hovered items.\n",
+                    "commentRange": {
+                        "start": 352,
+                        "end": 352
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-selected-hover-gradient",
+                        "value": "$kendo-selected-gradient",
+                        "scope": "default",
+                        "line": {
+                            "start": 353,
+                            "end": 353
+                        }
+                    },
+                    "access": "public",
+                    "group": [
+                        "undefined"
+                    ],
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
+                    "resolvedType": "List"
+                },
+                {
+                    "description": "Text color of disabled items.\n",
+                    "commentRange": {
+                        "start": 355,
+                        "end": 355
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-disabled-text",
+                        "value": "#8d8d8d",
+                        "scope": "default",
+                        "line": {
+                            "start": 356,
+                            "end": 356
+                        }
+                    },
+                    "access": "public",
+                    "group": [
+                        "undefined"
+                    ],
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#8d8d8d",
+                    "resolvedType": "Color"
                 }
             ]
         },
@@ -43860,7 +44695,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-appbar-light-text",
-                        "value": "k-contrast-color( $kendo-color-light )",
+                        "value": "if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -43914,7 +44749,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-appbar-dark-text",
-                        "value": "k-contrast-color( $kendo-color-dark )",
+                        "value": "if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))",
                         "scope": "default",
                         "line": {
                             "start": 47,
@@ -47643,7 +48478,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-border",
-                        "value": "k-try-shade( $kendo-button-bg, 2 )",
+                        "value": "if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-button-bg, 2 ))",
                         "scope": "default",
                         "line": {
                             "start": 119,
@@ -47724,7 +48559,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-hover-bg",
-                        "value": "k-try-shade( $kendo-button-bg, 1 )",
+                        "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, 1 ))",
                         "scope": "default",
                         "line": {
                             "start": 129,
@@ -47778,7 +48613,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-hover-border",
-                        "value": "k-try-shade( $kendo-button-bg, 3 )",
+                        "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 ))",
                         "scope": "default",
                         "line": {
                             "start": 135,
@@ -47859,7 +48694,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-active-bg",
-                        "value": "k-try-shade( $kendo-button-bg, 2 )",
+                        "value": "if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 2 ))",
                         "scope": "default",
                         "line": {
                             "start": 145,
@@ -47913,7 +48748,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-active-border",
-                        "value": "k-try-shade( $kendo-button-bg, 4 )",
+                        "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 4 ))",
                         "scope": "default",
                         "line": {
                             "start": 151,
@@ -48021,7 +48856,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,
@@ -48237,7 +49072,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-focus-shadow",
-                        "value": "0 0 4px 0 rgba( $kendo-button-border, .75 )",
+                        "value": "0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 ))",
                         "scope": "default",
                         "line": {
                             "start": 189,
@@ -50442,7 +51277,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,
@@ -50469,7 +51304,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-b",
-                        "value": "#ffd246",
+                        "value": "if($kendo-enable-color-system, k-color( series-b ), #ffd246)",
                         "scope": "default",
                         "line": {
                             "start": 16,
@@ -50496,7 +51331,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-c",
-                        "value": "#78d237",
+                        "value": "if($kendo-enable-color-system, k-color( series-c ), #78d237)",
                         "scope": "default",
                         "line": {
                             "start": 24,
@@ -50523,7 +51358,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-d",
-                        "value": "#28b4c8",
+                        "value": "if($kendo-enable-color-system, k-color( series-d ), #28b4c8)",
                         "scope": "default",
                         "line": {
                             "start": 32,
@@ -50550,7 +51385,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-e",
-                        "value": "#2d73f5",
+                        "value": "if($kendo-enable-color-system, k-color( series-e ), #2d73f5)",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -50577,7 +51412,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-f",
-                        "value": "#aa46be",
+                        "value": "if($kendo-enable-color-system, k-color( series-f ), #aa46be)",
                         "scope": "default",
                         "line": {
                             "start": 48,
@@ -50631,7 +51466,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,
@@ -50658,7 +51493,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,
@@ -51150,7 +51985,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,
@@ -51366,7 +52201,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,
@@ -52641,7 +53476,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, .16 ) )",
+                        "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
                         "scope": "default",
                         "line": {
                             "start": 118,
@@ -52938,7 +53773,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, .16 ) )",
+                        "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
                         "scope": "default",
                         "line": {
                             "start": 155,
@@ -52992,7 +53827,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-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 162,
@@ -54265,66 +55100,37 @@
             "title": "Color System",
             "variables": [
                 {
-                    "description": "The color white.\nNote: you cannot change this value.\n",
-                    "commentRange": {
-                        "start": 3,
-                        "end": 6
-                    },
-                    "context": {
-                        "type": "variable",
-                        "name": "kendo-color-white",
-                        "value": "#ffffff",
-                        "scope": "private",
-                        "line": {
-                            "start": 7,
-                            "end": 7
-                        }
-                    },
-                    "type": "Color",
-                    "group": [
-                        "color-system"
-                    ],
-                    "access": "public",
-                    "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
-                    },
-                    "resolvedValue": "#ffffff",
-                    "resolvedType": "Color"
-                },
-                {
-                    "description": "The color black.\nNote: you cannot change this value.\n",
+                    "description": "The global default Colors map.\n",
                     "commentRange": {
-                        "start": 9,
-                        "end": 12
+                        "start": 177,
+                        "end": 178
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-black",
-                        "value": "#000000",
-                        "scope": "private",
+                        "name": "kendo-colors",
+                        "value": "$_default-colors",
+                        "scope": "default",
                         "line": {
-                            "start": 13,
-                            "end": 13
+                            "start": 179,
+                            "end": 179
                         }
                     },
-                    "type": "Color",
                     "group": [
                         "color-system"
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
-                    "resolvedValue": "#000000",
-                    "resolvedType": "Color"
+                    "resolvedValue": "(app-surface: #ffffff, on-app-surface: #272727, subtle: #666666, surface: #f0f0f0, surface-alt: #ffffff, border: #cacaca, border-alt: #b6b6b6, base-subtle: #f0f0f0, base-subtle-hover: #ebebeb, base-subtle-active: #dddddd, base: #ebebeb, base-hover: #dddddd, base-active: #d6d6d6, base-emphasis: #cacaca, base-on-subtle: #272727, on-base: #272727, base-on-surface: #272727, primary-subtle: #fff2eb, primary-subtle-hover: #ffe5d6, primary-subtle-active: #ffd8c2, primary: #f35800, primary-hover: #e05100, primary-active: #cc4a00, primary-emphasis: #ff8b47, primary-on-subtle: #3d1600, on-primary: #ffffff, primary-on-surface: #f35800, secondary-subtle: #cacaca, secondary-subtle-hover: #b6b6b6, secondary-subtle-active: #a3a3a3, secondary: #b6b6b6, secondary-hover: #a3a3a3, secondary-active: #8f8f8f, secondary-emphasis: #7a7a7a, secondary-on-subtle: #272727, on-secondary: #000000, secondary-on-surface: #8f8f8f, tertiary-subtle: #9cdffe, tertiary-subtle-hover: #72d1fe, tertiary-subtle-active: #49c4fd, tertiary: #03a9f4, tertiary-hover: #039be0, tertiary-active: #038ecd, tertiary-emphasis: #2cbbfd, tertiary-on-subtle: #01364e, on-tertiary: #ffffff, tertiary-on-surface: #0273a6, info-subtle: #cce5f3, info-subtle-hover: #a6d1ea, info-subtle-active: #6ab2dc, info: #007bc3, info-hover: #0071b3, info-active: #0067a4, info-emphasis: #409cd2, info-on-subtle: #002b44, on-info: #ffffff, info-on-surface: #005485, success-subtle: #bbdfc1, success-subtle-hover: #9ed1a6, success-subtle-active: #82c48c, success: #3ea44e, success-hover: #399748, success-active: #348a42, success-emphasis: #6ebb7a, success-on-subtle: #16391b, on-success: #ffffff, success-on-surface: #2a7035, warning-subtle: #ffdead, warning-subtle-hover: #ffd699, warning-subtle-active: #ffc670, warning: #ffa41f, warning-hover: #ff9800, warning-active: #eb8c00, warning-emphasis: #ffb240, warning-on-subtle: #593500, on-warning: #000000, warning-on-surface: #ffa41f, error-subtle: #f4c3b8, error-subtle-hover: #f2b4a6, error-subtle-active: #ec8e79, error: #d92800, error-hover: #c82500, error-active: #b62200, error-emphasis: #e35e40, error-on-subtle: #4c0e00, on-error: #ffffff, error-on-surface: #941b00, light-subtle: #f0f0f0, light-subtle-hover: #ebebeb, light-subtle-active: #dddddd, light: #ebebeb, light-hover: #dddddd, light-active: #d6d6d6, light-emphasis: #cacaca, light-on-subtle: #272727, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #cacaca, dark-subtle-hover: #b6b6b6, dark-subtle-active: #a3a3a3, dark: #404040, dark-hover: #333333, dark-active: #272727, dark-emphasis: #7a7a7a, dark-on-subtle: #000000, on-dark: #ffffff, dark-on-surface: #333333, inverse-subtle: #cacaca, inverse-subtle-hover: #b6b6b6, inverse-subtle-active: #a3a3a3, inverse: #404040, inverse-hover: #333333, inverse-active: #272727, inverse-emphasis: #7a7a7a, inverse-on-subtle: #000000, on-inverse: #ffffff, inverse-on-surface: #333333, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffd246, series-b-bold: #bf9d35, series-b-bolder: #806923, series-b-subtle: #ffe9a2, series-b-subtler: #ffdd74, series-c: #78d237, series-c-bold: #5a9d29, series-c-bolder: #3c691c, series-c-subtle: #bbe99b, series-c-subtler: #9add69, series-d: #28b4c8, series-d-bold: #1e8796, series-d-bolder: #145a64, series-d-subtle: #93d9e3, series-d-subtler: #5ec7d6, series-e: #2d73f5, series-e-bold: #2256b8, series-e-bolder: #173a7b, series-e-subtle: #96b9fa, series-e-subtler: #6296f7, series-f: #9d40b0, series-f-bold: #80358e, series-f-bolder: #55235f, series-f-subtle: #d5a2df, series-f-subtler: #bf74ce)",
+                    "resolvedType": "Map"
                 },
                 {
                     "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
                     "commentRange": {
-                        "start": 119,
-                        "end": 122
+                        "start": 184,
+                        "end": 187
                     },
                     "context": {
                         "type": "variable",
@@ -54332,8 +55138,8 @@
                         "value": "#f35800",
                         "scope": "default",
                         "line": {
-                            "start": 123,
-                            "end": 123
+                            "start": 188,
+                            "end": 188
                         }
                     },
                     "group": [
@@ -54342,8 +55148,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#f35800",
                     "resolvedType": "Color"
@@ -54351,8 +55157,8 @@
                 {
                     "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": 127,
-                        "end": 130
+                        "start": 192,
+                        "end": 195
                     },
                     "context": {
                         "type": "variable",
@@ -54360,8 +55166,8 @@
                         "value": "k-contrast-legacy( $kendo-color-primary )",
                         "scope": "default",
                         "line": {
-                            "start": 131,
-                            "end": 131
+                            "start": 196,
+                            "end": 196
                         }
                     },
                     "group": [
@@ -54370,8 +55176,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "white",
                     "resolvedType": "Color"
@@ -54379,8 +55185,8 @@
                 {
                     "description": "The secondary color of the theme.\n",
                     "commentRange": {
-                        "start": 133,
-                        "end": 135
+                        "start": 198,
+                        "end": 200
                     },
                     "context": {
                         "type": "variable",
@@ -54388,8 +55194,8 @@
                         "value": "#e9e9e9",
                         "scope": "default",
                         "line": {
-                            "start": 136,
-                            "end": 136
+                            "start": 201,
+                            "end": 201
                         }
                     },
                     "group": [
@@ -54398,8 +55204,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#e9e9e9",
                     "resolvedType": "Color"
@@ -54407,8 +55213,8 @@
                 {
                     "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": 140,
-                        "end": 143
+                        "start": 205,
+                        "end": 208
                     },
                     "context": {
                         "type": "variable",
@@ -54416,8 +55222,8 @@
                         "value": "k-contrast-color( $kendo-color-secondary )",
                         "scope": "default",
                         "line": {
-                            "start": 144,
-                            "end": 144
+                            "start": 209,
+                            "end": 209
                         }
                     },
                     "group": [
@@ -54426,8 +55232,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "black",
                     "resolvedType": "Color"
@@ -54435,8 +55241,8 @@
                 {
                     "description": "The tertiary color of the theme.\n",
                     "commentRange": {
-                        "start": 146,
-                        "end": 148
+                        "start": 211,
+                        "end": 213
                     },
                     "context": {
                         "type": "variable",
@@ -54444,8 +55250,8 @@
                         "value": "#03a9f4",
                         "scope": "default",
                         "line": {
-                            "start": 149,
-                            "end": 149
+                            "start": 214,
+                            "end": 214
                         }
                     },
                     "group": [
@@ -54454,8 +55260,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#03a9f4",
                     "resolvedType": "Color"
@@ -54463,8 +55269,8 @@
                 {
                     "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": 153,
-                        "end": 156
+                        "start": 218,
+                        "end": 221
                     },
                     "context": {
                         "type": "variable",
@@ -54472,8 +55278,8 @@
                         "value": "k-contrast-color( $kendo-color-tertiary )",
                         "scope": "default",
                         "line": {
-                            "start": 157,
-                            "end": 157
+                            "start": 222,
+                            "end": 222
                         }
                     },
                     "group": [
@@ -54482,8 +55288,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "black",
                     "resolvedType": "Color"
@@ -54491,8 +55297,8 @@
                 {
                     "description": "The color for informational messages and states.\n",
                     "commentRange": {
-                        "start": 159,
-                        "end": 161
+                        "start": 224,
+                        "end": 226
                     },
                     "context": {
                         "type": "variable",
@@ -54500,8 +55306,8 @@
                         "value": "#2498bc",
                         "scope": "default",
                         "line": {
-                            "start": 162,
-                            "end": 162
+                            "start": 227,
+                            "end": 227
                         }
                     },
                     "group": [
@@ -54510,8 +55316,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#2498bc",
                     "resolvedType": "Color"
@@ -54519,8 +55325,8 @@
                 {
                     "description": "The color for success messages and states.\n",
                     "commentRange": {
-                        "start": 166,
-                        "end": 168
+                        "start": 231,
+                        "end": 233
                     },
                     "context": {
                         "type": "variable",
@@ -54528,8 +55334,8 @@
                         "value": "#3ea44e",
                         "scope": "default",
                         "line": {
-                            "start": 169,
-                            "end": 169
+                            "start": 234,
+                            "end": 234
                         }
                     },
                     "group": [
@@ -54538,8 +55344,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#3ea44e",
                     "resolvedType": "Color"
@@ -54547,8 +55353,8 @@
                 {
                     "description": "The color for warning messages and states.\n",
                     "commentRange": {
-                        "start": 173,
-                        "end": 175
+                        "start": 238,
+                        "end": 240
                     },
                     "context": {
                         "type": "variable",
@@ -54556,8 +55362,8 @@
                         "value": "#ff9800",
                         "scope": "default",
                         "line": {
-                            "start": 176,
-                            "end": 176
+                            "start": 241,
+                            "end": 241
                         }
                     },
                     "group": [
@@ -54566,8 +55372,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#ff9800",
                     "resolvedType": "Color"
@@ -54575,8 +55381,8 @@
                 {
                     "description": "The color for error messages and states.\n",
                     "commentRange": {
-                        "start": 180,
-                        "end": 182
+                        "start": 245,
+                        "end": 247
                     },
                     "context": {
                         "type": "variable",
@@ -54584,8 +55390,8 @@
                         "value": "#d92800",
                         "scope": "default",
                         "line": {
-                            "start": 183,
-                            "end": 183
+                            "start": 248,
+                            "end": 248
                         }
                     },
                     "group": [
@@ -54594,8 +55400,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#d92800",
                     "resolvedType": "Color"
@@ -54603,8 +55409,8 @@
                 {
                     "description": "The dark color of the theme.\n",
                     "commentRange": {
-                        "start": 187,
-                        "end": 189
+                        "start": 252,
+                        "end": 254
                     },
                     "context": {
                         "type": "variable",
@@ -54612,8 +55418,8 @@
                         "value": "#404040",
                         "scope": "default",
                         "line": {
-                            "start": 190,
-                            "end": 190
+                            "start": 255,
+                            "end": 255
                         }
                     },
                     "group": [
@@ -54622,8 +55428,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#404040",
                     "resolvedType": "Color"
@@ -54631,8 +55437,8 @@
                 {
                     "description": "The light color of the theme.\n",
                     "commentRange": {
-                        "start": 192,
-                        "end": 194
+                        "start": 257,
+                        "end": 259
                     },
                     "context": {
                         "type": "variable",
@@ -54640,8 +55446,8 @@
                         "value": "#ebebeb",
                         "scope": "default",
                         "line": {
-                            "start": 195,
-                            "end": 195
+                            "start": 260,
+                            "end": 260
                         }
                     },
                     "group": [
@@ -54650,8 +55456,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#ebebeb",
                     "resolvedType": "Color"
@@ -54659,8 +55465,8 @@
                 {
                     "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
                     "commentRange": {
-                        "start": 197,
-                        "end": 198
+                        "start": 262,
+                        "end": 263
                     },
                     "context": {
                         "type": "variable",
@@ -54668,8 +55474,8 @@
                         "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
                         "scope": "default",
                         "line": {
-                            "start": 199,
-                            "end": 199
+                            "start": 264,
+                            "end": 264
                         }
                     },
                     "group": [
@@ -54677,8 +55483,8 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#404040",
                     "resolvedType": "Color"
@@ -55568,8 +56374,8 @@
                 {
                     "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
                     "commentRange": {
-                        "start": 295,
-                        "end": 297
+                        "start": 315,
+                        "end": 317
                     },
                     "context": {
                         "type": "variable",
@@ -55577,8 +56383,8 @@
                         "value": "$kendo-body-bg",
                         "scope": "default",
                         "line": {
-                            "start": 298,
-                            "end": 298
+                            "start": 318,
+                            "end": 318
                         }
                     },
                     "group": [
@@ -55586,8 +56392,8 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#ffffff",
                     "resolvedType": "Color"
@@ -55595,8 +56401,8 @@
                 {
                     "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": 299,
-                        "end": 301
+                        "start": 319,
+                        "end": 321
                     },
                     "context": {
                         "type": "variable",
@@ -55604,8 +56410,8 @@
                         "value": "$kendo-body-text",
                         "scope": "default",
                         "line": {
-                            "start": 302,
-                            "end": 302
+                            "start": 322,
+                            "end": 322
                         }
                     },
                     "group": [
@@ -55613,8 +56419,8 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#272727",
                     "resolvedType": "Color"
@@ -55622,8 +56428,8 @@
                 {
                     "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": 303,
-                        "end": 305
+                        "start": 323,
+                        "end": 325
                     },
                     "context": {
                         "type": "variable",
@@ -55631,8 +56437,8 @@
                         "value": "$kendo-base-border",
                         "scope": "default",
                         "line": {
-                            "start": 306,
-                            "end": 306
+                            "start": 326,
+                            "end": 326
                         }
                     },
                     "group": [
@@ -55640,11 +56446,335 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#cacaca",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Background color of the component header.\n",
+                    "commentRange": {
+                        "start": 360,
+                        "end": 361
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-component-header-bg",
+                        "value": "$kendo-base-bg",
+                        "scope": "default",
+                        "line": {
+                            "start": 362,
+                            "end": 362
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#f0f0f0",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Text color of the component header.\n",
+                    "commentRange": {
+                        "start": 363,
+                        "end": 364
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-component-header-text",
+                        "value": "$kendo-base-text",
+                        "scope": "default",
+                        "line": {
+                            "start": 365,
+                            "end": 365
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#272727",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Border color of the component header.\n",
+                    "commentRange": {
+                        "start": 366,
+                        "end": 367
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-component-header-border",
+                        "value": "$kendo-base-border",
+                        "scope": "default",
+                        "line": {
+                            "start": 368,
+                            "end": 368
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#cacaca",
                     "resolvedType": "Color"
+                },
+                {
+                    "description": "Gradient of the component header.\n",
+                    "commentRange": {
+                        "start": 369,
+                        "end": 370
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-component-header-gradient",
+                        "value": "$kendo-base-gradient",
+                        "scope": "default",
+                        "line": {
+                            "start": 371,
+                            "end": 371
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)",
+                    "resolvedType": "List"
+                },
+                {
+                    "description": "Background color of the invalid items.\n",
+                    "commentRange": {
+                        "start": 373,
+                        "end": 374
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-invalid-bg",
+                        "value": "null",
+                        "scope": "default",
+                        "line": {
+                            "start": 375,
+                            "end": 375
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
+                },
+                {
+                    "description": "Text color of the invalid items.\n",
+                    "commentRange": {
+                        "start": 376,
+                        "end": 377
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-invalid-text",
+                        "value": "$kendo-color-error",
+                        "scope": "default",
+                        "line": {
+                            "start": 378,
+                            "end": 378
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#d92800",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Border color of the invalid items.\n",
+                    "commentRange": {
+                        "start": 379,
+                        "end": 380
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-invalid-border",
+                        "value": "$kendo-color-error",
+                        "scope": "default",
+                        "line": {
+                            "start": 381,
+                            "end": 381
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#d92800",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Shadow of the invalid items.\n",
+                    "commentRange": {
+                        "start": 382,
+                        "end": 383
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-invalid-shadow",
+                        "value": "null",
+                        "scope": "default",
+                        "line": {
+                            "start": 384,
+                            "end": 384
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
+                },
+                {
+                    "description": "Background color of the valid items.\n",
+                    "commentRange": {
+                        "start": 386,
+                        "end": 387
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-valid-bg",
+                        "value": "null",
+                        "scope": "default",
+                        "line": {
+                            "start": 388,
+                            "end": 388
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
+                },
+                {
+                    "description": "Text color of the valid items.\n",
+                    "commentRange": {
+                        "start": 389,
+                        "end": 390
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-valid-text",
+                        "value": "$kendo-color-success",
+                        "scope": "default",
+                        "line": {
+                            "start": 391,
+                            "end": 391
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#3ea44e",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Border color of the valid items.\n",
+                    "commentRange": {
+                        "start": 392,
+                        "end": 393
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-valid-border",
+                        "value": "$kendo-color-success",
+                        "scope": "default",
+                        "line": {
+                            "start": 394,
+                            "end": 394
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "#3ea44e",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "Shadow of the valid items.\n",
+                    "commentRange": {
+                        "start": 395,
+                        "end": 396
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-valid-shadow",
+                        "value": "null",
+                        "scope": "default",
+                        "line": {
+                            "start": 397,
+                            "end": 397
+                        }
+                    },
+                    "group": [
+                        "component"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
+                    },
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
                 }
             ]
         },
@@ -56774,7 +57904,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,
@@ -57191,7 +58321,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,
@@ -57629,7 +58759,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,
@@ -58223,17 +59353,17 @@
                 {
                     "description": "The background color of the hovered ExpansionPanel header.\n",
                     "commentRange": {
-                        "start": 51,
-                        "end": 52
+                        "start": 50,
+                        "end": 51
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-expander-header-hover-bg",
-                        "value": "k-color-shade( $kendo-expander-bg, 1 )",
+                        "value": "if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 ))",
                         "scope": "default",
                         "line": {
-                            "start": 53,
-                            "end": 53
+                            "start": 52,
+                            "end": 52
                         }
                     },
                     "group": [
@@ -58250,8 +59380,8 @@
                 {
                     "description": "The background color of the focused ExpansionPanel header.\n",
                     "commentRange": {
-                        "start": 54,
-                        "end": 55
+                        "start": 53,
+                        "end": 54
                     },
                     "context": {
                         "type": "variable",
@@ -58259,8 +59389,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 56,
-                            "end": 56
+                            "start": 55,
+                            "end": 55
                         }
                     },
                     "group": [
@@ -58277,8 +59407,8 @@
                 {
                     "description": "The box shadow of the focused ExpansionPanel header.\n",
                     "commentRange": {
-                        "start": 57,
-                        "end": 58
+                        "start": 56,
+                        "end": 57
                     },
                     "context": {
                         "type": "variable",
@@ -58286,8 +59416,8 @@
                         "value": "$kendo-list-item-focus-shadow",
                         "scope": "default",
                         "line": {
-                            "start": 59,
-                            "end": 59
+                            "start": 58,
+                            "end": 58
                         }
                     },
                     "group": [
@@ -58304,8 +59434,8 @@
                 {
                     "description": "The text color of the ExpansionPanel title.\n",
                     "commentRange": {
-                        "start": 61,
-                        "end": 62
+                        "start": 60,
+                        "end": 61
                     },
                     "context": {
                         "type": "variable",
@@ -58313,8 +59443,8 @@
                         "value": "$kendo-color-primary",
                         "scope": "default",
                         "line": {
-                            "start": 63,
-                            "end": 63
+                            "start": 62,
+                            "end": 62
                         }
                     },
                     "group": [
@@ -58331,8 +59461,8 @@
                 {
                     "description": "The text color of the ExpansionPanel sub-title.\n",
                     "commentRange": {
-                        "start": 65,
-                        "end": 66
+                        "start": 64,
+                        "end": 65
                     },
                     "context": {
                         "type": "variable",
@@ -58340,8 +59470,8 @@
                         "value": "$kendo-subtle-text",
                         "scope": "default",
                         "line": {
-                            "start": 67,
-                            "end": 67
+                            "start": 66,
+                            "end": 66
                         }
                     },
                     "group": [
@@ -58358,8 +59488,8 @@
                 {
                     "description": "The horizontal margin of the ExpansionPanel indicator.\n",
                     "commentRange": {
-                        "start": 69,
-                        "end": 70
+                        "start": 68,
+                        "end": 69
                     },
                     "context": {
                         "type": "variable",
@@ -58367,8 +59497,8 @@
                         "value": "k-map-get( $kendo-spacing, 3 )",
                         "scope": "default",
                         "line": {
-                            "start": 71,
-                            "end": 71
+                            "start": 70,
+                            "end": 70
                         }
                     },
                     "group": [
@@ -58385,8 +59515,8 @@
                 {
                     "description": "The horizontal padding of the ExpansionPanel content.\n",
                     "commentRange": {
-                        "start": 73,
-                        "end": 74
+                        "start": 72,
+                        "end": 73
                     },
                     "context": {
                         "type": "variable",
@@ -58394,8 +59524,8 @@
                         "value": "k-map-get( $kendo-spacing, 4 )",
                         "scope": "default",
                         "line": {
-                            "start": 75,
-                            "end": 75
+                            "start": 74,
+                            "end": 74
                         }
                     },
                     "group": [
@@ -58412,8 +59542,8 @@
                 {
                     "description": "The vertical padding of the ExpansionPanel content.\n",
                     "commentRange": {
-                        "start": 76,
-                        "end": 77
+                        "start": 75,
+                        "end": 76
                     },
                     "context": {
                         "type": "variable",
@@ -58421,8 +59551,8 @@
                         "value": "k-map-get( $kendo-spacing, 4 )",
                         "scope": "default",
                         "line": {
-                            "start": 78,
-                            "end": 78
+                            "start": 77,
+                            "end": 77
                         }
                     },
                     "group": [
@@ -59450,7 +60580,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,
@@ -59936,7 +61066,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,
@@ -63011,7 +64141,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,
@@ -64172,17 +65302,17 @@
                 {
                     "description": "Background color of the grid row resize indicator\n",
                     "commentRange": {
-                        "start": 312,
-                        "end": 313
+                        "start": 315,
+                        "end": 316
                     },
                     "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": 314,
-                            "end": 314
+                            "start": 317,
+                            "end": 317
                         }
                     },
                     "group": [
@@ -64199,8 +65329,8 @@
                 {
                     "description": "Active background color of the grid row resize indicator\n",
                     "commentRange": {
-                        "start": 315,
-                        "end": 316
+                        "start": 318,
+                        "end": 319
                     },
                     "context": {
                         "type": "variable",
@@ -64208,8 +65338,8 @@
                         "value": "$kendo-color-primary",
                         "scope": "default",
                         "line": {
-                            "start": 317,
-                            "end": 317
+                            "start": 320,
+                            "end": 320
                         }
                     },
                     "group": [
@@ -64226,8 +65356,8 @@
                 {
                     "description": "Height of the grid row resize indicator\n",
                     "commentRange": {
-                        "start": 318,
-                        "end": 319
+                        "start": 321,
+                        "end": 322
                     },
                     "context": {
                         "type": "variable",
@@ -64235,8 +65365,8 @@
                         "value": "k-map-get( $kendo-spacing, .5 )",
                         "scope": "default",
                         "line": {
-                            "start": 320,
-                            "end": 320
+                            "start": 323,
+                            "end": 323
                         }
                     },
                     "group": [
@@ -65399,7 +66529,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-app-surface, true ), .5 ), rgba( $kendo-button-text, .5))",
                         "scope": "default",
                         "line": {
                             "start": 171,
@@ -65480,7 +66610,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-app-surface, true ), .8 ), rgba( $kendo-button-text, .8))",
                         "scope": "default",
                         "line": {
                             "start": 181,
@@ -68306,7 +69436,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,
@@ -73403,7 +74533,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-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5))",
                         "scope": "default",
                         "line": {
                             "start": 372,
@@ -73457,7 +74587,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-picker-outline-hover-text",
-                        "value": "k-contrast-color( $kendo-picker-outline-hover-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 379,
@@ -73781,7 +74911,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-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 ))",
                         "scope": "default",
                         "line": {
                             "start": 419,
@@ -73835,7 +74965,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-picker-flat-hover-border",
-                        "value": "rgba( $kendo-button-border, .16 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 ))",
                         "scope": "default",
                         "line": {
                             "start": 425,
@@ -75284,7 +76414,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 ), k-try-shade( $kendo-component-bg, 1 ))",
                         "scope": "default",
                         "line": {
                             "start": 27,
@@ -75419,7 +76549,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,
@@ -75446,7 +76576,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,
@@ -78170,7 +79300,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-scrollview-pagebutton-primary-border",
-                        "value": "k-try-shade( $kendo-color-primary, 2 )",
+                        "value": "if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -78743,7 +79873,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-skeleton-item-bg",
-                        "value": "rgba( $kendo-color-inverse, .2 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))",
                         "scope": "default",
                         "line": {
                             "start": 20,
@@ -79538,7 +80668,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-track-focus-ring",
-                        "value": "0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )",
+                        "value": "0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )",
                         "scope": "default",
                         "line": {
                             "start": 71,
@@ -79673,7 +80803,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-thumb-bg",
-                        "value": "k-try-shade( $kendo-switch-off-track-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 88,
@@ -79781,7 +80911,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-thumb-hover-bg",
-                        "value": "k-try-shade( $kendo-switch-off-thumb-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 101,
@@ -80213,7 +81343,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-track-focus-ring",
-                        "value": "0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )",
+                        "value": "0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )",
                         "scope": "default",
                         "line": {
                             "start": 153,
@@ -80402,7 +81532,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-thumb-border",
-                        "value": "k-try-shade( $kendo-switch-on-thumb-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 176,
@@ -80456,7 +81586,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-thumb-hover-bg",
-                        "value": "k-try-shade( $kendo-switch-on-thumb-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 183,
@@ -80510,7 +81640,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-thumb-hover-border",
-                        "value": "k-try-shade( $kendo-switch-on-thumb-hover-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 189,
@@ -81137,7 +82267,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-alt-row-bg",
-                        "value": "k-try-shade( $kendo-table-bg, .5 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 ))",
                         "scope": "default",
                         "line": {
                             "start": 114,
@@ -81218,7 +82348,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-hover-bg",
-                        "value": "k-try-shade( $kendo-table-bg, 1 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 ))",
                         "scope": "default",
                         "line": {
                             "start": 125,
@@ -81407,7 +82537,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-selected-bg",
-                        "value": "rgba( $kendo-selected-bg, .25 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 150,
@@ -83510,7 +84640,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-tooltip-bg",
-                        "value": "rgba( k-contrast-color( $kendo-body-bg ), .75 )",
+                        "value": "if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-color( $kendo-body-bg ), .75 ))",
                         "scope": "default",
                         "line": {
                             "start": 39,
@@ -83537,7 +84667,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-tooltip-text",
-                        "value": "k-contrast-color( $kendo-tooltip-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 42,
@@ -85001,8 +86131,8 @@
                 {
                     "description": "Base font size across all components.\n",
                     "commentRange": {
-                        "start": 218,
-                        "end": 219
+                        "start": 109,
+                        "end": 110
                     },
                     "context": {
                         "type": "variable",
@@ -85010,8 +86140,8 @@
                         "value": "14px",
                         "scope": "default",
                         "line": {
-                            "start": 220,
-                            "end": 220
+                            "start": 111,
+                            "end": 111
                         }
                     },
                     "group": [
@@ -85028,8 +86158,8 @@
                 {
                     "description": "Font family for text.\n",
                     "commentRange": {
-                        "start": 235,
-                        "end": 236
+                        "start": 126,
+                        "end": 127
                     },
                     "context": {
                         "type": "variable",
@@ -85037,8 +86167,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": 237,
-                            "end": 237
+                            "start": 128,
+                            "end": 128
                         }
                     },
                     "group": [
@@ -85055,8 +86185,8 @@
                 {
                     "description": "Font family for monospaced text. Used for styling the code.\n",
                     "commentRange": {
-                        "start": 239,
-                        "end": 240
+                        "start": 130,
+                        "end": 131
                     },
                     "context": {
                         "type": "variable",
@@ -85064,8 +86194,8 @@
                         "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Roboto Mono\", \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
                         "scope": "default",
                         "line": {
-                            "start": 241,
-                            "end": 241
+                            "start": 132,
+                            "end": 132
                         }
                     },
                     "group": [
@@ -85082,8 +86212,8 @@
                 {
                     "description": "Font family across all components.\n",
                     "commentRange": {
-                        "start": 243,
-                        "end": 244
+                        "start": 134,
+                        "end": 135
                     },
                     "context": {
                         "type": "variable",
@@ -85091,8 +86221,8 @@
                         "value": "inherit",
                         "scope": "default",
                         "line": {
-                            "start": 245,
-                            "end": 245
+                            "start": 136,
+                            "end": 136
                         }
                     },
                     "group": [
@@ -85109,8 +86239,8 @@
                 {
                     "description": "Line height used along with $kendo-font-size.\n",
                     "commentRange": {
-                        "start": 247,
-                        "end": 248
+                        "start": 138,
+                        "end": 139
                     },
                     "context": {
                         "type": "variable",
@@ -85118,8 +86248,8 @@
                         "value": "k-math-div( 20, 14 )",
                         "scope": "default",
                         "line": {
-                            "start": 249,
-                            "end": 249
+                            "start": 140,
+                            "end": 140
                         }
                     },
                     "group": [