@progress/kendo-theme-bootstrap 7.1.0-dev.7 → 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,
@@ -2979,7 +2979,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-breadcrumb-link-focus-shadow",
-                "value": "inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )",
+                "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 159,
@@ -3978,7 +3978,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-theme-colors",
-                "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": #e4e7eb )\n)",
+                "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )\n)",
                 "scope": "default",
                 "line": {
                     "start": 106,
@@ -4005,7 +4005,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-bg",
-                "value": "#e4e7eb",
+                "value": "if($kendo-enable-color-system, k-color( base ), #e4e7eb)",
                 "scope": "default",
                 "line": {
                     "start": 113,
@@ -4032,7 +4032,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-text",
-                "value": "k-contrast-color( $kendo-button-bg, $gray-900 )",
+                "value": "if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 ))",
                 "scope": "default",
                 "line": {
                     "start": 116,
@@ -4140,7 +4140,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-hover-bg",
-                "value": "k-color-darken( $kendo-button-bg, 7.5% )",
+                "value": "if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% ))",
                 "scope": "default",
                 "line": {
                     "start": 129,
@@ -4194,7 +4194,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-hover-border",
-                "value": "k-color-darken( $kendo-button-bg, 10% )",
+                "value": "if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% ))",
                 "scope": "default",
                 "line": {
                     "start": 135,
@@ -4275,7 +4275,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-active-bg",
-                "value": "k-color-darken( $kendo-button-bg, 10% )",
+                "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))",
                 "scope": "default",
                 "line": {
                     "start": 145,
@@ -4329,7 +4329,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-active-border",
-                "value": "k-color-darken( $kendo-button-bg, 12.5% )",
+                "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))",
                 "scope": "default",
                 "line": {
                     "start": 151,
@@ -4410,7 +4410,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-selected-bg",
-                "value": "k-color-darken( $kendo-color-primary, 10% )",
+                "value": "if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% ))",
                 "scope": "default",
                 "line": {
                     "start": 161,
@@ -4437,7 +4437,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-selected-text",
-                "value": "k-contrast-color( $kendo-button-selected-bg )",
+                "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 164,
@@ -4464,7 +4464,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-selected-border",
-                "value": "k-color-darken( $kendo-color-primary, 12.5% )",
+                "value": "if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% ))",
                 "scope": "default",
                 "line": {
                     "start": 167,
@@ -4545,7 +4545,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-focus-bg",
-                "value": "k-color-darken( $kendo-button-bg, 10% )",
+                "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))",
                 "scope": "default",
                 "line": {
                     "start": 177,
@@ -4599,7 +4599,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-focus-border",
-                "value": "k-color-darken( $kendo-button-bg, 12.5% )",
+                "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))",
                 "scope": "default",
                 "line": {
                     "start": 183,
@@ -4653,7 +4653,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-focus-shadow",
-                "value": "0 0 0 .25rem rgba( $kendo-button-border, .5 )",
+                "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 ))",
                 "scope": "default",
                 "line": {
                     "start": 189,
@@ -6840,7 +6840,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-a",
-                "value": "$blue",
+                "value": "if($kendo-enable-color-system, k-color( series-a ), $blue)",
                 "scope": "default",
                 "line": {
                     "start": 8,
@@ -6867,7 +6867,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-b",
-                "value": "$purple",
+                "value": "if($kendo-enable-color-system, k-color( series-b ), $purple)",
                 "scope": "default",
                 "line": {
                     "start": 16,
@@ -6894,7 +6894,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-c",
-                "value": "$teal",
+                "value": "if($kendo-enable-color-system, k-color( series-c ), $teal)",
                 "scope": "default",
                 "line": {
                     "start": 24,
@@ -6921,7 +6921,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-d",
-                "value": "$green",
+                "value": "if($kendo-enable-color-system, k-color( series-d ), $green)",
                 "scope": "default",
                 "line": {
                     "start": 32,
@@ -6948,7 +6948,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-e",
-                "value": "$yellow",
+                "value": "if($kendo-enable-color-system, k-color( series-e ), $yellow)",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -6975,7 +6975,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-series-f",
-                "value": "$red",
+                "value": "if($kendo-enable-color-system, k-color( series-f ), $red)",
                 "scope": "default",
                 "line": {
                     "start": 48,
@@ -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,
@@ -7407,7 +7407,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-border",
-                "value": "if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )",
+                "value": "if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))",
                 "scope": "default",
                 "line": {
                     "start": 67,
@@ -7542,7 +7542,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-checked-text",
-                "value": "k-contrast-color( $kendo-checkbox-checked-bg )",
+                "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 84,
@@ -7677,7 +7677,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-focus-border",
-                "value": "k-try-tint( $kendo-color-primary, 50% )",
+                "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))",
                 "scope": "default",
                 "line": {
                     "start": 101,
@@ -7704,7 +7704,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-checkbox-focus-shadow",
-                "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+                "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 104,
@@ -9351,7 +9351,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-chip-outline-hover-text",
-                "value": "k-contrast-color( $kendo-chip-outline-hover-bg )",
+                "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 162,
@@ -10612,66 +10612,37 @@
             "resolvedType": "Number"
         },
         {
-            "description": "The color white.\nNote: you cannot change this value.\n",
-            "commentRange": {
-                "start": 6,
-                "end": 9
-            },
-            "context": {
-                "type": "variable",
-                "name": "kendo-color-white",
-                "value": "#ffffff",
-                "scope": "private",
-                "line": {
-                    "start": 10,
-                    "end": 10
-                }
-            },
-            "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": 12,
-                "end": 15
+                "start": 179,
+                "end": 180
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-black",
-                "value": "#000000",
-                "scope": "private",
+                "name": "kendo-colors",
+                "value": "$_default-colors",
+                "scope": "default",
                 "line": {
-                    "start": 16,
-                    "end": 16
+                    "start": 181,
+                    "end": 181
                 }
             },
-            "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: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39)",
+            "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": 121,
-                "end": 124
+                "start": 210,
+                "end": 213
             },
             "context": {
                 "type": "variable",
@@ -10679,8 +10650,8 @@
                 "value": "$primary",
                 "scope": "default",
                 "line": {
-                    "start": 125,
-                    "end": 125
+                    "start": 214,
+                    "end": 214
                 }
             },
             "group": [
@@ -10689,8 +10660,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#0d6efd",
             "resolvedType": "Color"
@@ -10698,8 +10669,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": 129,
-                "end": 132
+                "start": 218,
+                "end": 221
             },
             "context": {
                 "type": "variable",
@@ -10707,8 +10678,8 @@
                 "value": "k-contrast-color( $kendo-color-primary )",
                 "scope": "default",
                 "line": {
-                    "start": 133,
-                    "end": 133
+                    "start": 222,
+                    "end": 222
                 }
             },
             "group": [
@@ -10717,8 +10688,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"
@@ -10726,8 +10697,8 @@
         {
             "description": "The secondary color of the theme.\n",
             "commentRange": {
-                "start": 135,
-                "end": 137
+                "start": 224,
+                "end": 226
             },
             "context": {
                 "type": "variable",
@@ -10735,8 +10706,8 @@
                 "value": "$secondary",
                 "scope": "default",
                 "line": {
-                    "start": 138,
-                    "end": 138
+                    "start": 227,
+                    "end": 227
                 }
             },
             "group": [
@@ -10745,8 +10716,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#6c757d",
             "resolvedType": "Color"
@@ -10754,8 +10725,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": 142,
-                "end": 145
+                "start": 231,
+                "end": 234
             },
             "context": {
                 "type": "variable",
@@ -10763,8 +10734,8 @@
                 "value": "k-contrast-color( $kendo-color-secondary )",
                 "scope": "default",
                 "line": {
-                    "start": 146,
-                    "end": 146
+                    "start": 235,
+                    "end": 235
                 }
             },
             "group": [
@@ -10773,8 +10744,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"
@@ -10782,8 +10753,8 @@
         {
             "description": "The tertiary color of the theme.\n",
             "commentRange": {
-                "start": 148,
-                "end": 150
+                "start": 237,
+                "end": 239
             },
             "context": {
                 "type": "variable",
@@ -10791,8 +10762,8 @@
                 "value": "$purple",
                 "scope": "default",
                 "line": {
-                    "start": 151,
-                    "end": 151
+                    "start": 240,
+                    "end": 240
                 }
             },
             "group": [
@@ -10801,8 +10772,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#6f42c1",
             "resolvedType": "Color"
@@ -10810,8 +10781,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": 155,
-                "end": 158
+                "start": 244,
+                "end": 247
             },
             "context": {
                 "type": "variable",
@@ -10819,8 +10790,8 @@
                 "value": "k-contrast-color( $kendo-color-tertiary )",
                 "scope": "default",
                 "line": {
-                    "start": 159,
-                    "end": 159
+                    "start": 248,
+                    "end": 248
                 }
             },
             "group": [
@@ -10829,8 +10800,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"
@@ -10838,8 +10809,8 @@
         {
             "description": "The color for informational messages and states.\n",
             "commentRange": {
-                "start": 161,
-                "end": 163
+                "start": 250,
+                "end": 252
             },
             "context": {
                 "type": "variable",
@@ -10847,8 +10818,8 @@
                 "value": "$info",
                 "scope": "default",
                 "line": {
-                    "start": 164,
-                    "end": 164
+                    "start": 253,
+                    "end": 253
                 }
             },
             "group": [
@@ -10857,8 +10828,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#0dcaf0",
             "resolvedType": "Color"
@@ -10866,8 +10837,8 @@
         {
             "description": "The color for success messages and states.\n",
             "commentRange": {
-                "start": 168,
-                "end": 170
+                "start": 257,
+                "end": 259
             },
             "context": {
                 "type": "variable",
@@ -10875,8 +10846,8 @@
                 "value": "$success",
                 "scope": "default",
                 "line": {
-                    "start": 171,
-                    "end": 171
+                    "start": 260,
+                    "end": 260
                 }
             },
             "group": [
@@ -10885,8 +10856,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#198754",
             "resolvedType": "Color"
@@ -10894,8 +10865,8 @@
         {
             "description": "The color for warning messages and states.\n",
             "commentRange": {
-                "start": 175,
-                "end": 177
+                "start": 264,
+                "end": 266
             },
             "context": {
                 "type": "variable",
@@ -10903,8 +10874,8 @@
                 "value": "$warning",
                 "scope": "default",
                 "line": {
-                    "start": 178,
-                    "end": 178
+                    "start": 267,
+                    "end": 267
                 }
             },
             "group": [
@@ -10913,8 +10884,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#ffc107",
             "resolvedType": "Color"
@@ -10922,8 +10893,8 @@
         {
             "description": "The color for error messages and states.\n",
             "commentRange": {
-                "start": 182,
-                "end": 184
+                "start": 271,
+                "end": 273
             },
             "context": {
                 "type": "variable",
@@ -10931,8 +10902,8 @@
                 "value": "$danger",
                 "scope": "default",
                 "line": {
-                    "start": 185,
-                    "end": 185
+                    "start": 274,
+                    "end": 274
                 }
             },
             "group": [
@@ -10941,8 +10912,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#dc3545",
             "resolvedType": "Color"
@@ -10950,8 +10921,8 @@
         {
             "description": "The dark color of the theme.\n",
             "commentRange": {
-                "start": 189,
-                "end": 191
+                "start": 278,
+                "end": 280
             },
             "context": {
                 "type": "variable",
@@ -10959,8 +10930,8 @@
                 "value": "$dark",
                 "scope": "default",
                 "line": {
-                    "start": 192,
-                    "end": 192
+                    "start": 281,
+                    "end": 281
                 }
             },
             "group": [
@@ -10969,8 +10940,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#212529",
             "resolvedType": "Color"
@@ -10978,8 +10949,8 @@
         {
             "description": "The light color of the theme.\n",
             "commentRange": {
-                "start": 194,
-                "end": 196
+                "start": 283,
+                "end": 285
             },
             "context": {
                 "type": "variable",
@@ -10987,8 +10958,8 @@
                 "value": "$light",
                 "scope": "default",
                 "line": {
-                    "start": 197,
-                    "end": 197
+                    "start": 286,
+                    "end": 286
                 }
             },
             "group": [
@@ -10997,8 +10968,8 @@
             "type": "Color",
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#f8f9fa",
             "resolvedType": "Color"
@@ -11006,8 +10977,8 @@
         {
             "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
             "commentRange": {
-                "start": 199,
-                "end": 200
+                "start": 288,
+                "end": 289
             },
             "context": {
                 "type": "variable",
@@ -11015,8 +10986,8 @@
                 "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
                 "scope": "default",
                 "line": {
-                    "start": 201,
-                    "end": 201
+                    "start": 290,
+                    "end": 290
                 }
             },
             "group": [
@@ -11024,8 +10995,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#212529",
             "resolvedType": "Color"
@@ -11897,8 +11868,8 @@
         {
             "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
             "commentRange": {
-                "start": 289,
-                "end": 291
+                "start": 327,
+                "end": 329
             },
             "context": {
                 "type": "variable",
@@ -11906,8 +11877,8 @@
                 "value": "$kendo-body-bg",
                 "scope": "default",
                 "line": {
-                    "start": 292,
-                    "end": 292
+                    "start": 330,
+                    "end": 330
                 }
             },
             "group": [
@@ -11915,8 +11886,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#ffffff",
             "resolvedType": "Color"
@@ -11924,8 +11895,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": 293,
-                "end": 295
+                "start": 331,
+                "end": 333
             },
             "context": {
                 "type": "variable",
@@ -11933,8 +11904,8 @@
                 "value": "$kendo-body-text",
                 "scope": "default",
                 "line": {
-                    "start": 296,
-                    "end": 296
+                    "start": 334,
+                    "end": 334
                 }
             },
             "group": [
@@ -11942,8 +11913,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#212529",
             "resolvedType": "Color"
@@ -11951,8 +11922,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": 297,
-                "end": 299
+                "start": 335,
+                "end": 337
             },
             "context": {
                 "type": "variable",
@@ -11960,8 +11931,8 @@
                 "value": "if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )",
                 "scope": "default",
                 "line": {
-                    "start": 300,
-                    "end": 300
+                    "start": 338,
+                    "end": 338
                 }
             },
             "group": [
@@ -11969,8 +11940,8 @@
             ],
             "access": "public",
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#dee2e6",
             "resolvedType": "Color"
@@ -13091,7 +13062,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,
@@ -13388,7 +13359,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-dropzone-bg",
-                "value": "if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )",
+                "value": "if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ))",
                 "scope": "default",
                 "line": {
                     "start": 28,
@@ -13496,7 +13467,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-dropzone-icon-text",
-                "value": "k-try-tint( $kendo-dropzone-text, 8 )",
+                "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 ))",
                 "scope": "default",
                 "line": {
                     "start": 41,
@@ -13928,7 +13899,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,
@@ -15764,7 +15735,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 +16221,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,
@@ -16493,7 +16464,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-filter-toolbar-focus-shadow",
-                "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+                "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 30,
@@ -20429,17 +20400,17 @@
         {
             "description": "Background color of the grid row resize indicator\n",
             "commentRange": {
-                "start": 306,
-                "end": 307
+                "start": 309,
+                "end": 310
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-grid-row-resizer-hover-bg",
-                "value": "rgba( k-contrast-color( $kendo-grid-bg ), .12 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
                 "scope": "default",
                 "line": {
-                    "start": 308,
-                    "end": 308
+                    "start": 311,
+                    "end": 311
                 }
             },
             "group": [
@@ -20456,8 +20427,8 @@
         {
             "description": "Active background color of the grid row resize indicator\n",
             "commentRange": {
-                "start": 309,
-                "end": 310
+                "start": 312,
+                "end": 313
             },
             "context": {
                 "type": "variable",
@@ -20465,8 +20436,8 @@
                 "value": "$kendo-color-primary",
                 "scope": "default",
                 "line": {
-                    "start": 311,
-                    "end": 311
+                    "start": 314,
+                    "end": 314
                 }
             },
             "group": [
@@ -20483,8 +20454,8 @@
         {
             "description": "Height of the grid row resize indicator\n",
             "commentRange": {
-                "start": 312,
-                "end": 313
+                "start": 315,
+                "end": 316
             },
             "context": {
                 "type": "variable",
@@ -20492,8 +20463,8 @@
                 "value": "k-map-get( $kendo-spacing, .5 )",
                 "scope": "default",
                 "line": {
-                    "start": 314,
-                    "end": 314
+                    "start": 317,
+                    "end": 317
                 }
             },
             "group": [
@@ -21098,7 +21069,7 @@
                 "path": "input/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "#ffffff",
+            "resolvedValue": "#fff",
             "resolvedType": "Color"
         },
         {
@@ -21314,7 +21285,7 @@
                 "path": "input/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "#ffffff",
+            "resolvedValue": "#fff",
             "resolvedType": "Color"
         },
         {
@@ -21650,7 +21621,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-input-outline-border",
-                "value": "rgba( $kendo-base-text, .5 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 ))",
                 "scope": "default",
                 "line": {
                     "start": 170,
@@ -23567,7 +23538,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-list-item-focus-shadow",
-                "value": "inset 0 0 0 3px rgba( $kendo-list-text, .15 )",
+                "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))",
                 "scope": "default",
                 "line": {
                     "start": 223,
@@ -24539,7 +24510,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,
@@ -24674,7 +24645,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-listview-item-focus-shadow",
-                "value": "inset 0 0 0 3px rgba( $kendo-listview-text, .15 )",
+                "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))",
                 "scope": "default",
                 "line": {
                     "start": 60,
@@ -27914,7 +27885,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-pager-item-focus-shadow",
-                "value": "0 0 0 3px rgba($kendo-color-primary, .25)",
+                "value": "0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))",
                 "scope": "default",
                 "line": {
                     "start": 126,
@@ -29588,7 +29559,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": 368,
@@ -29642,7 +29613,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": 375,
@@ -29966,7 +29937,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-picker-flat-hover-bg",
-                "value": "rgba( $kendo-button-text, .08 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))",
                 "scope": "default",
                 "line": {
                     "start": 415,
@@ -34880,7 +34851,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,
@@ -35609,7 +35580,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-track-focus-border",
-                "value": "k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )",
+                "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))",
                 "scope": "default",
                 "line": {
                     "start": 65,
@@ -35663,7 +35634,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-track-focus-ring",
-                "value": ".25rem solid rgba( $kendo-color-primary, .25 )",
+                "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 71,
@@ -35690,7 +35661,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-off-track-disabled-bg",
-                "value": "if( $kendo-is-dark-theme, $gray-800, $gray-200 )",
+                "value": "if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))",
                 "scope": "default",
                 "line": {
                     "start": 75,
@@ -36338,7 +36309,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-track-focus-ring",
-                "value": ".25rem solid rgba( $kendo-switch-on-track-border, .25 )",
+                "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 153,
@@ -36365,7 +36336,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-track-disabled-bg",
-                "value": "k-try-tint( $kendo-switch-on-track-bg, 50% )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))",
                 "scope": "default",
                 "line": {
                     "start": 157,
@@ -36473,7 +36444,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-switch-on-thumb-bg",
-                "value": "k-contrast-color( $kendo-switch-on-track-bg )",
+                "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))",
                 "scope": "default",
                 "line": {
                     "start": 170,
@@ -37256,7 +37227,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-alt-row-bg",
-                "value": "rgba( k-contrast-color( $kendo-table-bg ), .04 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))",
                 "scope": "default",
                 "line": {
                     "start": 114,
@@ -37337,7 +37308,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-table-hover-bg",
-                "value": "rgba( k-contrast-color( $kendo-table-bg ), .08 )",
+                "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))",
                 "scope": "default",
                 "line": {
                     "start": 125,
@@ -37526,7 +37497,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,
@@ -39254,7 +39225,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-toolbar-item-shadow",
-                "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+                "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                 "scope": "default",
                 "line": {
                     "start": 85,
@@ -39605,7 +39576,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-tooltip-bg",
-                "value": "if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )",
+                "value": "if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))",
                 "scope": "default",
                 "line": {
                     "start": 39,
@@ -39632,7 +39603,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,
@@ -40793,7 +40764,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-treeview-item-focus-shadow",
-                "value": "inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )",
+                "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 ))",
                 "scope": "default",
                 "line": {
                     "start": 154,
@@ -41084,8 +41055,8 @@
         {
             "description": "Base font size across all components.\n",
             "commentRange": {
-                "start": 220,
-                "end": 221
+                "start": 104,
+                "end": 105
             },
             "context": {
                 "type": "variable",
@@ -41093,8 +41064,8 @@
                 "value": "$font-size-base",
                 "scope": "default",
                 "line": {
-                    "start": 222,
-                    "end": 222
+                    "start": 106,
+                    "end": 106
                 }
             },
             "group": [
@@ -41111,8 +41082,8 @@
         {
             "description": "Font family for text.\n",
             "commentRange": {
-                "start": 237,
-                "end": 238
+                "start": 121,
+                "end": 122
             },
             "context": {
                 "type": "variable",
@@ -41120,8 +41091,8 @@
                 "value": "$font-family-sans-serif",
                 "scope": "default",
                 "line": {
-                    "start": 239,
-                    "end": 239
+                    "start": 123,
+                    "end": 123
                 }
             },
             "group": [
@@ -41138,8 +41109,8 @@
         {
             "description": "Font family for monospaced text. Used for styling the code.\n",
             "commentRange": {
-                "start": 241,
-                "end": 242
+                "start": 125,
+                "end": 126
             },
             "context": {
                 "type": "variable",
@@ -41147,8 +41118,8 @@
                 "value": "$font-family-monospace",
                 "scope": "default",
                 "line": {
-                    "start": 243,
-                    "end": 243
+                    "start": 127,
+                    "end": 127
                 }
             },
             "group": [
@@ -41165,8 +41136,8 @@
         {
             "description": "Font family across all components.\n",
             "commentRange": {
-                "start": 245,
-                "end": 246
+                "start": 129,
+                "end": 130
             },
             "context": {
                 "type": "variable",
@@ -41174,8 +41145,8 @@
                 "value": "$kendo-font-family-sans-serif",
                 "scope": "default",
                 "line": {
-                    "start": 247,
-                    "end": 247
+                    "start": 131,
+                    "end": 131
                 }
             },
             "group": [
@@ -41192,8 +41163,8 @@
         {
             "description": "Line height used along with $kendo-font-size.\n",
             "commentRange": {
-                "start": 249,
-                "end": 250
+                "start": 133,
+                "end": 134
             },
             "context": {
                 "type": "variable",
@@ -41201,8 +41172,8 @@
                 "value": "$line-height-base",
                 "scope": "default",
                 "line": {
-                    "start": 251,
-                    "end": 251
+                    "start": 135,
+                    "end": 135
                 }
             },
             "group": [
@@ -41219,8 +41190,8 @@
         {
             "description": "Border radius for all components.\n",
             "commentRange": {
-                "start": 96,
-                "end": 96
+                "start": 81,
+                "end": 81
             },
             "context": {
                 "type": "variable",
@@ -41228,8 +41199,8 @@
                 "value": "$border-radius",
                 "scope": "default",
                 "line": {
-                    "start": 97,
-                    "end": 97
+                    "start": 82,
+                    "end": 82
                 }
             },
             "access": "public",
@@ -41243,11 +41214,38 @@
             "resolvedValue": "0.375rem",
             "resolvedType": "Number"
         },
+        {
+            "description": "The font size of the large Chip.\n",
+            "commentRange": {
+                "start": 48,
+                "end": 48
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-chip-lg-font-size",
+                "value": "$kendo-font-size-md",
+                "scope": "default",
+                "line": {
+                    "start": 49,
+                    "end": 49
+                }
+            },
+            "access": "public",
+            "group": [
+                "undefined"
+            ],
+            "file": {
+                "path": "chip/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "1rem",
+            "resolvedType": "Number"
+        },
         {
             "description": "The background of the components' chrome area.\n",
             "commentRange": {
-                "start": 303,
-                "end": 303
+                "start": 341,
+                "end": 341
             },
             "context": {
                 "type": "variable",
@@ -41255,8 +41253,8 @@
                 "value": "$gray-100",
                 "scope": "default",
                 "line": {
-                    "start": 304,
-                    "end": 304
+                    "start": 342,
+                    "end": 342
                 }
             },
             "access": "public",
@@ -41264,8 +41262,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#f8f9fa",
             "resolvedType": "Color"
@@ -41273,8 +41271,8 @@
         {
             "description": "The text color of the components' chrome area.\n",
             "commentRange": {
-                "start": 305,
-                "end": 305
+                "start": 343,
+                "end": 343
             },
             "context": {
                 "type": "variable",
@@ -41282,8 +41280,8 @@
                 "value": "$kendo-body-text",
                 "scope": "default",
                 "line": {
-                    "start": 306,
-                    "end": 306
+                    "start": 344,
+                    "end": 344
                 }
             },
             "access": "public",
@@ -41291,8 +41289,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#212529",
             "resolvedType": "Color"
@@ -41300,8 +41298,8 @@
         {
             "description": "The border color of the components' chrome area.\n",
             "commentRange": {
-                "start": 307,
-                "end": 307
+                "start": 345,
+                "end": 345
             },
             "context": {
                 "type": "variable",
@@ -41309,8 +41307,8 @@
                 "value": "k-try-shade( $kendo-base-bg, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 308,
-                    "end": 308
+                    "start": 346,
+                    "end": 346
                 }
             },
             "access": "public",
@@ -41318,8 +41316,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#e4e5e6",
             "resolvedType": "Color"
@@ -41327,8 +41325,8 @@
         {
             "description": "The gradient background of the components' chrome area.\n",
             "commentRange": {
-                "start": 309,
-                "end": 309
+                "start": 347,
+                "end": 347
             },
             "context": {
                 "type": "variable",
@@ -41336,8 +41334,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 310,
-                    "end": 310
+                    "start": 348,
+                    "end": 348
                 }
             },
             "access": "public",
@@ -41345,8 +41343,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "null",
             "resolvedType": "Null"
@@ -41354,8 +41352,8 @@
         {
             "description": "The background of hovered items.\n",
             "commentRange": {
-                "start": 312,
-                "end": 312
+                "start": 350,
+                "end": 350
             },
             "context": {
                 "type": "variable",
@@ -41363,8 +41361,8 @@
                 "value": "$gray-200",
                 "scope": "default",
                 "line": {
-                    "start": 313,
-                    "end": 313
+                    "start": 351,
+                    "end": 351
                 }
             },
             "access": "public",
@@ -41372,8 +41370,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#e9ecef",
             "resolvedType": "Color"
@@ -41381,8 +41379,8 @@
         {
             "description": "The text color of hovered items.\n",
             "commentRange": {
-                "start": 314,
-                "end": 314
+                "start": 352,
+                "end": 352
             },
             "context": {
                 "type": "variable",
@@ -41390,8 +41388,8 @@
                 "value": "$kendo-base-text",
                 "scope": "default",
                 "line": {
-                    "start": 315,
-                    "end": 315
+                    "start": 353,
+                    "end": 353
                 }
             },
             "access": "public",
@@ -41399,8 +41397,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#212529",
             "resolvedType": "Color"
@@ -41408,8 +41406,8 @@
         {
             "description": "The border color of hovered items.\n",
             "commentRange": {
-                "start": 316,
-                "end": 316
+                "start": 354,
+                "end": 354
             },
             "context": {
                 "type": "variable",
@@ -41417,8 +41415,8 @@
                 "value": "k-try-shade( $kendo-hover-bg, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 317,
-                    "end": 317
+                    "start": 355,
+                    "end": 355
                 }
             },
             "access": "public",
@@ -41426,8 +41424,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#d6d9dc",
             "resolvedType": "Color"
@@ -41435,8 +41433,8 @@
         {
             "description": "The gradient background of hovered items.\n",
             "commentRange": {
-                "start": 318,
-                "end": 318
+                "start": 356,
+                "end": 356
             },
             "context": {
                 "type": "variable",
@@ -41444,8 +41442,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 319,
-                    "end": 319
+                    "start": 357,
+                    "end": 357
                 }
             },
             "access": "public",
@@ -41453,8 +41451,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "null",
             "resolvedType": "Null"
@@ -41462,8 +41460,8 @@
         {
             "description": "The background of selected items.\n",
             "commentRange": {
-                "start": 321,
-                "end": 321
+                "start": 359,
+                "end": 359
             },
             "context": {
                 "type": "variable",
@@ -41471,8 +41469,8 @@
                 "value": "$kendo-color-primary",
                 "scope": "default",
                 "line": {
-                    "start": 322,
-                    "end": 322
+                    "start": 360,
+                    "end": 360
                 }
             },
             "access": "public",
@@ -41480,8 +41478,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#0d6efd",
             "resolvedType": "Color"
@@ -41489,8 +41487,8 @@
         {
             "description": "The text color of selected items.\n",
             "commentRange": {
-                "start": 323,
-                "end": 323
+                "start": 361,
+                "end": 361
             },
             "context": {
                 "type": "variable",
@@ -41498,8 +41496,8 @@
                 "value": "k-contrast-color( $kendo-selected-bg )",
                 "scope": "default",
                 "line": {
-                    "start": 324,
-                    "end": 324
+                    "start": 362,
+                    "end": 362
                 }
             },
             "access": "public",
@@ -41507,8 +41505,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "white",
             "resolvedType": "Color"
@@ -41516,8 +41514,8 @@
         {
             "description": "The border color of selected items.\n",
             "commentRange": {
-                "start": 325,
-                "end": 325
+                "start": 363,
+                "end": 363
             },
             "context": {
                 "type": "variable",
@@ -41525,8 +41523,8 @@
                 "value": "k-try-shade( $kendo-selected-bg, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 326,
-                    "end": 326
+                    "start": 364,
+                    "end": 364
                 }
             },
             "access": "public",
@@ -41534,8 +41532,8 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "#0c65e9",
             "resolvedType": "Color"
@@ -41543,8 +41541,8 @@
         {
             "description": "The gradient background of selected items.\n",
             "commentRange": {
-                "start": 327,
-                "end": 327
+                "start": 365,
+                "end": 365
             },
             "context": {
                 "type": "variable",
@@ -41552,8 +41550,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 328,
-                    "end": 328
+                    "start": 366,
+                    "end": 366
                 }
             },
             "access": "public",
@@ -41561,26 +41559,26 @@
                 "undefined"
             ],
             "file": {
-                "path": "_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
             "resolvedValue": "null",
             "resolvedType": "Null"
         },
         {
-            "description": "The font size of the large Chip.\n",
+            "description": "Text color of disabled items.\n",
             "commentRange": {
-                "start": 48,
-                "end": 48
+                "start": 373,
+                "end": 373
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-chip-lg-font-size",
-                "value": "$kendo-font-size-md",
+                "name": "kendo-disabled-text",
+                "value": "if( $kendo-is-dark-theme, $gray-600, $gray-500)",
                 "scope": "default",
                 "line": {
-                    "start": 49,
-                    "end": 49
+                    "start": 374,
+                    "end": 374
                 }
             },
             "access": "public",
@@ -41588,11 +41586,11 @@
                 "undefined"
             ],
             "file": {
-                "path": "chip/_variables.scss",
-                "name": "_variables.scss"
+                "path": "core/color-system/_swatch.scss",
+                "name": "_swatch.scss"
             },
-            "resolvedValue": "1rem",
-            "resolvedType": "Number"
+            "resolvedValue": "#adb5bd",
+            "resolvedType": "Color"
         },
         {
             "description": "The width of the border around the Upload.\n",
@@ -41954,7 +41952,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-upload-dropzone-hover-bg",
-                "value": "k-try-shade( $kendo-upload-dropzone-bg, .2 )",
+                "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 ))",
                 "scope": "default",
                 "line": {
                     "start": 46,
@@ -43200,8 +43198,8 @@
                 {
                     "description": "Border radius for all components.\n",
                     "commentRange": {
-                        "start": 96,
-                        "end": 96
+                        "start": 81,
+                        "end": 81
                     },
                     "context": {
                         "type": "variable",
@@ -43209,8 +43207,8 @@
                         "value": "$border-radius",
                         "scope": "default",
                         "line": {
-                            "start": 97,
-                            "end": 97
+                            "start": 82,
+                            "end": 82
                         }
                     },
                     "access": "public",
@@ -43224,11 +43222,38 @@
                     "resolvedValue": "0.375rem",
                     "resolvedType": "Number"
                 },
+                {
+                    "description": "The font size of the large Chip.\n",
+                    "commentRange": {
+                        "start": 48,
+                        "end": 48
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-chip-lg-font-size",
+                        "value": "$kendo-font-size-md",
+                        "scope": "default",
+                        "line": {
+                            "start": 49,
+                            "end": 49
+                        }
+                    },
+                    "access": "public",
+                    "group": [
+                        "undefined"
+                    ],
+                    "file": {
+                        "path": "chip/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "1rem",
+                    "resolvedType": "Number"
+                },
                 {
                     "description": "The background of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 303,
-                        "end": 303
+                        "start": 341,
+                        "end": 341
                     },
                     "context": {
                         "type": "variable",
@@ -43236,8 +43261,8 @@
                         "value": "$gray-100",
                         "scope": "default",
                         "line": {
-                            "start": 304,
-                            "end": 304
+                            "start": 342,
+                            "end": 342
                         }
                     },
                     "access": "public",
@@ -43245,8 +43270,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#f8f9fa",
                     "resolvedType": "Color"
@@ -43254,8 +43279,8 @@
                 {
                     "description": "The text color of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 305,
-                        "end": 305
+                        "start": 343,
+                        "end": 343
                     },
                     "context": {
                         "type": "variable",
@@ -43263,8 +43288,8 @@
                         "value": "$kendo-body-text",
                         "scope": "default",
                         "line": {
-                            "start": 306,
-                            "end": 306
+                            "start": 344,
+                            "end": 344
                         }
                     },
                     "access": "public",
@@ -43272,8 +43297,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#212529",
                     "resolvedType": "Color"
@@ -43281,8 +43306,8 @@
                 {
                     "description": "The border color of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 307,
-                        "end": 307
+                        "start": 345,
+                        "end": 345
                     },
                     "context": {
                         "type": "variable",
@@ -43290,8 +43315,8 @@
                         "value": "k-try-shade( $kendo-base-bg, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 308,
-                            "end": 308
+                            "start": 346,
+                            "end": 346
                         }
                     },
                     "access": "public",
@@ -43299,8 +43324,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#e4e5e6",
                     "resolvedType": "Color"
@@ -43308,8 +43333,8 @@
                 {
                     "description": "The gradient background of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 309,
-                        "end": 309
+                        "start": 347,
+                        "end": 347
                     },
                     "context": {
                         "type": "variable",
@@ -43317,8 +43342,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 310,
-                            "end": 310
+                            "start": 348,
+                            "end": 348
                         }
                     },
                     "access": "public",
@@ -43326,8 +43351,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "null",
                     "resolvedType": "Null"
@@ -43335,8 +43360,8 @@
                 {
                     "description": "The background of hovered items.\n",
                     "commentRange": {
-                        "start": 312,
-                        "end": 312
+                        "start": 350,
+                        "end": 350
                     },
                     "context": {
                         "type": "variable",
@@ -43344,8 +43369,8 @@
                         "value": "$gray-200",
                         "scope": "default",
                         "line": {
-                            "start": 313,
-                            "end": 313
+                            "start": 351,
+                            "end": 351
                         }
                     },
                     "access": "public",
@@ -43353,8 +43378,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#e9ecef",
                     "resolvedType": "Color"
@@ -43362,8 +43387,8 @@
                 {
                     "description": "The text color of hovered items.\n",
                     "commentRange": {
-                        "start": 314,
-                        "end": 314
+                        "start": 352,
+                        "end": 352
                     },
                     "context": {
                         "type": "variable",
@@ -43371,8 +43396,8 @@
                         "value": "$kendo-base-text",
                         "scope": "default",
                         "line": {
-                            "start": 315,
-                            "end": 315
+                            "start": 353,
+                            "end": 353
                         }
                     },
                     "access": "public",
@@ -43380,8 +43405,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#212529",
                     "resolvedType": "Color"
@@ -43389,8 +43414,8 @@
                 {
                     "description": "The border color of hovered items.\n",
                     "commentRange": {
-                        "start": 316,
-                        "end": 316
+                        "start": 354,
+                        "end": 354
                     },
                     "context": {
                         "type": "variable",
@@ -43398,8 +43423,8 @@
                         "value": "k-try-shade( $kendo-hover-bg, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 317,
-                            "end": 317
+                            "start": 355,
+                            "end": 355
                         }
                     },
                     "access": "public",
@@ -43407,8 +43432,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#d6d9dc",
                     "resolvedType": "Color"
@@ -43416,8 +43441,8 @@
                 {
                     "description": "The gradient background of hovered items.\n",
                     "commentRange": {
-                        "start": 318,
-                        "end": 318
+                        "start": 356,
+                        "end": 356
                     },
                     "context": {
                         "type": "variable",
@@ -43425,8 +43450,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 319,
-                            "end": 319
+                            "start": 357,
+                            "end": 357
                         }
                     },
                     "access": "public",
@@ -43434,8 +43459,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "null",
                     "resolvedType": "Null"
@@ -43443,8 +43468,8 @@
                 {
                     "description": "The background of selected items.\n",
                     "commentRange": {
-                        "start": 321,
-                        "end": 321
+                        "start": 359,
+                        "end": 359
                     },
                     "context": {
                         "type": "variable",
@@ -43452,8 +43477,8 @@
                         "value": "$kendo-color-primary",
                         "scope": "default",
                         "line": {
-                            "start": 322,
-                            "end": 322
+                            "start": 360,
+                            "end": 360
                         }
                     },
                     "access": "public",
@@ -43461,8 +43486,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#0d6efd",
                     "resolvedType": "Color"
@@ -43470,8 +43495,8 @@
                 {
                     "description": "The text color of selected items.\n",
                     "commentRange": {
-                        "start": 323,
-                        "end": 323
+                        "start": 361,
+                        "end": 361
                     },
                     "context": {
                         "type": "variable",
@@ -43479,8 +43504,8 @@
                         "value": "k-contrast-color( $kendo-selected-bg )",
                         "scope": "default",
                         "line": {
-                            "start": 324,
-                            "end": 324
+                            "start": 362,
+                            "end": 362
                         }
                     },
                     "access": "public",
@@ -43488,8 +43513,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "white",
                     "resolvedType": "Color"
@@ -43497,8 +43522,8 @@
                 {
                     "description": "The border color of selected items.\n",
                     "commentRange": {
-                        "start": 325,
-                        "end": 325
+                        "start": 363,
+                        "end": 363
                     },
                     "context": {
                         "type": "variable",
@@ -43506,8 +43531,8 @@
                         "value": "k-try-shade( $kendo-selected-bg, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 326,
-                            "end": 326
+                            "start": 364,
+                            "end": 364
                         }
                     },
                     "access": "public",
@@ -43515,8 +43540,8 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#0c65e9",
                     "resolvedType": "Color"
@@ -43524,8 +43549,8 @@
                 {
                     "description": "The gradient background of selected items.\n",
                     "commentRange": {
-                        "start": 327,
-                        "end": 327
+                        "start": 365,
+                        "end": 365
                     },
                     "context": {
                         "type": "variable",
@@ -43533,8 +43558,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 328,
-                            "end": 328
+                            "start": 366,
+                            "end": 366
                         }
                     },
                     "access": "public",
@@ -43542,26 +43567,26 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "null",
                     "resolvedType": "Null"
                 },
                 {
-                    "description": "The font size of the large Chip.\n",
+                    "description": "Text color of disabled items.\n",
                     "commentRange": {
-                        "start": 48,
-                        "end": 48
+                        "start": 373,
+                        "end": 373
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-chip-lg-font-size",
-                        "value": "$kendo-font-size-md",
+                        "name": "kendo-disabled-text",
+                        "value": "if( $kendo-is-dark-theme, $gray-600, $gray-500)",
                         "scope": "default",
                         "line": {
-                            "start": 49,
-                            "end": 49
+                            "start": 374,
+                            "end": 374
                         }
                     },
                     "access": "public",
@@ -43569,11 +43594,11 @@
                         "undefined"
                     ],
                     "file": {
-                        "path": "chip/_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
-                    "resolvedValue": "1rem",
-                    "resolvedType": "Number"
+                    "resolvedValue": "#adb5bd",
+                    "resolvedType": "Color"
                 }
             ]
         },
@@ -43887,7 +43912,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,
@@ -43941,7 +43966,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,
@@ -46584,7 +46609,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-breadcrumb-link-focus-shadow",
-                        "value": "inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )",
+                        "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 159,
@@ -47589,7 +47614,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-theme-colors",
-                        "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": #e4e7eb )\n)",
+                        "value": "k-map-merge(\n    $kendo-theme-colors,\n    ( \"base\": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )\n)",
                         "scope": "default",
                         "line": {
                             "start": 106,
@@ -47616,7 +47641,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-bg",
-                        "value": "#e4e7eb",
+                        "value": "if($kendo-enable-color-system, k-color( base ), #e4e7eb)",
                         "scope": "default",
                         "line": {
                             "start": 113,
@@ -47643,7 +47668,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-text",
-                        "value": "k-contrast-color( $kendo-button-bg, $gray-900 )",
+                        "value": "if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 ))",
                         "scope": "default",
                         "line": {
                             "start": 116,
@@ -47751,7 +47776,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-hover-bg",
-                        "value": "k-color-darken( $kendo-button-bg, 7.5% )",
+                        "value": "if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% ))",
                         "scope": "default",
                         "line": {
                             "start": 129,
@@ -47805,7 +47830,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-hover-border",
-                        "value": "k-color-darken( $kendo-button-bg, 10% )",
+                        "value": "if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% ))",
                         "scope": "default",
                         "line": {
                             "start": 135,
@@ -47886,7 +47911,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-active-bg",
-                        "value": "k-color-darken( $kendo-button-bg, 10% )",
+                        "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))",
                         "scope": "default",
                         "line": {
                             "start": 145,
@@ -47940,7 +47965,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-active-border",
-                        "value": "k-color-darken( $kendo-button-bg, 12.5% )",
+                        "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))",
                         "scope": "default",
                         "line": {
                             "start": 151,
@@ -48021,7 +48046,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-selected-bg",
-                        "value": "k-color-darken( $kendo-color-primary, 10% )",
+                        "value": "if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% ))",
                         "scope": "default",
                         "line": {
                             "start": 161,
@@ -48048,7 +48073,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-selected-text",
-                        "value": "k-contrast-color( $kendo-button-selected-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 164,
@@ -48075,7 +48100,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-selected-border",
-                        "value": "k-color-darken( $kendo-color-primary, 12.5% )",
+                        "value": "if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% ))",
                         "scope": "default",
                         "line": {
                             "start": 167,
@@ -48156,7 +48181,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-focus-bg",
-                        "value": "k-color-darken( $kendo-button-bg, 10% )",
+                        "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% ))",
                         "scope": "default",
                         "line": {
                             "start": 177,
@@ -48210,7 +48235,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-focus-border",
-                        "value": "k-color-darken( $kendo-button-bg, 12.5% )",
+                        "value": "if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% ))",
                         "scope": "default",
                         "line": {
                             "start": 183,
@@ -48264,7 +48289,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-focus-shadow",
-                        "value": "0 0 0 .25rem rgba( $kendo-button-border, .5 )",
+                        "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 ))",
                         "scope": "default",
                         "line": {
                             "start": 189,
@@ -50469,7 +50494,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-a",
-                        "value": "$blue",
+                        "value": "if($kendo-enable-color-system, k-color( series-a ), $blue)",
                         "scope": "default",
                         "line": {
                             "start": 8,
@@ -50496,7 +50521,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-b",
-                        "value": "$purple",
+                        "value": "if($kendo-enable-color-system, k-color( series-b ), $purple)",
                         "scope": "default",
                         "line": {
                             "start": 16,
@@ -50523,7 +50548,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-c",
-                        "value": "$teal",
+                        "value": "if($kendo-enable-color-system, k-color( series-c ), $teal)",
                         "scope": "default",
                         "line": {
                             "start": 24,
@@ -50550,7 +50575,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-d",
-                        "value": "$green",
+                        "value": "if($kendo-enable-color-system, k-color( series-d ), $green)",
                         "scope": "default",
                         "line": {
                             "start": 32,
@@ -50577,7 +50602,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-e",
-                        "value": "$yellow",
+                        "value": "if($kendo-enable-color-system, k-color( series-e ), $yellow)",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -50604,7 +50629,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-series-f",
-                        "value": "$red",
+                        "value": "if($kendo-enable-color-system, k-color( series-f ), $red)",
                         "scope": "default",
                         "line": {
                             "start": 48,
@@ -50658,7 +50683,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,
@@ -50685,7 +50710,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,
@@ -51042,7 +51067,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-border",
-                        "value": "if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )",
+                        "value": "if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ))",
                         "scope": "default",
                         "line": {
                             "start": 67,
@@ -51177,7 +51202,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-checked-text",
-                        "value": "k-contrast-color( $kendo-checkbox-checked-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 84,
@@ -51312,7 +51337,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-focus-border",
-                        "value": "k-try-tint( $kendo-color-primary, 50% )",
+                        "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% ))",
                         "scope": "default",
                         "line": {
                             "start": 101,
@@ -51339,7 +51364,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-checkbox-focus-shadow",
-                        "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+                        "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 104,
@@ -52992,7 +53017,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-chip-outline-hover-text",
-                        "value": "k-contrast-color( $kendo-chip-outline-hover-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 162,
@@ -54265,66 +54290,37 @@
             "title": "Color System",
             "variables": [
                 {
-                    "description": "The color white.\nNote: you cannot change this value.\n",
+                    "description": "The global default Colors map.\n",
                     "commentRange": {
-                        "start": 6,
-                        "end": 9
-                    },
-                    "context": {
-                        "type": "variable",
-                        "name": "kendo-color-white",
-                        "value": "#ffffff",
-                        "scope": "private",
-                        "line": {
-                            "start": 10,
-                            "end": 10
-                        }
-                    },
-                    "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": 12,
-                        "end": 15
+                        "start": 179,
+                        "end": 180
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-black",
-                        "value": "#000000",
-                        "scope": "private",
+                        "name": "kendo-colors",
+                        "value": "$_default-colors",
+                        "scope": "default",
                         "line": {
-                            "start": 16,
-                            "end": 16
+                            "start": 181,
+                            "end": 181
                         }
                     },
-                    "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: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39)",
+                    "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": 121,
-                        "end": 124
+                        "start": 210,
+                        "end": 213
                     },
                     "context": {
                         "type": "variable",
@@ -54332,8 +54328,8 @@
                         "value": "$primary",
                         "scope": "default",
                         "line": {
-                            "start": 125,
-                            "end": 125
+                            "start": 214,
+                            "end": 214
                         }
                     },
                     "group": [
@@ -54342,8 +54338,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#0d6efd",
                     "resolvedType": "Color"
@@ -54351,8 +54347,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": 129,
-                        "end": 132
+                        "start": 218,
+                        "end": 221
                     },
                     "context": {
                         "type": "variable",
@@ -54360,8 +54356,8 @@
                         "value": "k-contrast-color( $kendo-color-primary )",
                         "scope": "default",
                         "line": {
-                            "start": 133,
-                            "end": 133
+                            "start": 222,
+                            "end": 222
                         }
                     },
                     "group": [
@@ -54370,8 +54366,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 +54375,8 @@
                 {
                     "description": "The secondary color of the theme.\n",
                     "commentRange": {
-                        "start": 135,
-                        "end": 137
+                        "start": 224,
+                        "end": 226
                     },
                     "context": {
                         "type": "variable",
@@ -54388,8 +54384,8 @@
                         "value": "$secondary",
                         "scope": "default",
                         "line": {
-                            "start": 138,
-                            "end": 138
+                            "start": 227,
+                            "end": 227
                         }
                     },
                     "group": [
@@ -54398,8 +54394,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#6c757d",
                     "resolvedType": "Color"
@@ -54407,8 +54403,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": 142,
-                        "end": 145
+                        "start": 231,
+                        "end": 234
                     },
                     "context": {
                         "type": "variable",
@@ -54416,8 +54412,8 @@
                         "value": "k-contrast-color( $kendo-color-secondary )",
                         "scope": "default",
                         "line": {
-                            "start": 146,
-                            "end": 146
+                            "start": 235,
+                            "end": 235
                         }
                     },
                     "group": [
@@ -54426,8 +54422,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"
@@ -54435,8 +54431,8 @@
                 {
                     "description": "The tertiary color of the theme.\n",
                     "commentRange": {
-                        "start": 148,
-                        "end": 150
+                        "start": 237,
+                        "end": 239
                     },
                     "context": {
                         "type": "variable",
@@ -54444,8 +54440,8 @@
                         "value": "$purple",
                         "scope": "default",
                         "line": {
-                            "start": 151,
-                            "end": 151
+                            "start": 240,
+                            "end": 240
                         }
                     },
                     "group": [
@@ -54454,8 +54450,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#6f42c1",
                     "resolvedType": "Color"
@@ -54463,8 +54459,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": 155,
-                        "end": 158
+                        "start": 244,
+                        "end": 247
                     },
                     "context": {
                         "type": "variable",
@@ -54472,8 +54468,8 @@
                         "value": "k-contrast-color( $kendo-color-tertiary )",
                         "scope": "default",
                         "line": {
-                            "start": 159,
-                            "end": 159
+                            "start": 248,
+                            "end": 248
                         }
                     },
                     "group": [
@@ -54482,8 +54478,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"
@@ -54491,8 +54487,8 @@
                 {
                     "description": "The color for informational messages and states.\n",
                     "commentRange": {
-                        "start": 161,
-                        "end": 163
+                        "start": 250,
+                        "end": 252
                     },
                     "context": {
                         "type": "variable",
@@ -54500,8 +54496,8 @@
                         "value": "$info",
                         "scope": "default",
                         "line": {
-                            "start": 164,
-                            "end": 164
+                            "start": 253,
+                            "end": 253
                         }
                     },
                     "group": [
@@ -54510,8 +54506,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#0dcaf0",
                     "resolvedType": "Color"
@@ -54519,8 +54515,8 @@
                 {
                     "description": "The color for success messages and states.\n",
                     "commentRange": {
-                        "start": 168,
-                        "end": 170
+                        "start": 257,
+                        "end": 259
                     },
                     "context": {
                         "type": "variable",
@@ -54528,8 +54524,8 @@
                         "value": "$success",
                         "scope": "default",
                         "line": {
-                            "start": 171,
-                            "end": 171
+                            "start": 260,
+                            "end": 260
                         }
                     },
                     "group": [
@@ -54538,8 +54534,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#198754",
                     "resolvedType": "Color"
@@ -54547,8 +54543,8 @@
                 {
                     "description": "The color for warning messages and states.\n",
                     "commentRange": {
-                        "start": 175,
-                        "end": 177
+                        "start": 264,
+                        "end": 266
                     },
                     "context": {
                         "type": "variable",
@@ -54556,8 +54552,8 @@
                         "value": "$warning",
                         "scope": "default",
                         "line": {
-                            "start": 178,
-                            "end": 178
+                            "start": 267,
+                            "end": 267
                         }
                     },
                     "group": [
@@ -54566,8 +54562,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#ffc107",
                     "resolvedType": "Color"
@@ -54575,8 +54571,8 @@
                 {
                     "description": "The color for error messages and states.\n",
                     "commentRange": {
-                        "start": 182,
-                        "end": 184
+                        "start": 271,
+                        "end": 273
                     },
                     "context": {
                         "type": "variable",
@@ -54584,8 +54580,8 @@
                         "value": "$danger",
                         "scope": "default",
                         "line": {
-                            "start": 185,
-                            "end": 185
+                            "start": 274,
+                            "end": 274
                         }
                     },
                     "group": [
@@ -54594,8 +54590,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#dc3545",
                     "resolvedType": "Color"
@@ -54603,8 +54599,8 @@
                 {
                     "description": "The dark color of the theme.\n",
                     "commentRange": {
-                        "start": 189,
-                        "end": 191
+                        "start": 278,
+                        "end": 280
                     },
                     "context": {
                         "type": "variable",
@@ -54612,8 +54608,8 @@
                         "value": "$dark",
                         "scope": "default",
                         "line": {
-                            "start": 192,
-                            "end": 192
+                            "start": 281,
+                            "end": 281
                         }
                     },
                     "group": [
@@ -54622,8 +54618,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#212529",
                     "resolvedType": "Color"
@@ -54631,8 +54627,8 @@
                 {
                     "description": "The light color of the theme.\n",
                     "commentRange": {
-                        "start": 194,
-                        "end": 196
+                        "start": 283,
+                        "end": 285
                     },
                     "context": {
                         "type": "variable",
@@ -54640,8 +54636,8 @@
                         "value": "$light",
                         "scope": "default",
                         "line": {
-                            "start": 197,
-                            "end": 197
+                            "start": 286,
+                            "end": 286
                         }
                     },
                     "group": [
@@ -54650,8 +54646,8 @@
                     "type": "Color",
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#f8f9fa",
                     "resolvedType": "Color"
@@ -54659,8 +54655,8 @@
                 {
                     "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
                     "commentRange": {
-                        "start": 199,
-                        "end": 200
+                        "start": 288,
+                        "end": 289
                     },
                     "context": {
                         "type": "variable",
@@ -54668,8 +54664,8 @@
                         "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
                         "scope": "default",
                         "line": {
-                            "start": 201,
-                            "end": 201
+                            "start": 290,
+                            "end": 290
                         }
                     },
                     "group": [
@@ -54677,8 +54673,8 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#212529",
                     "resolvedType": "Color"
@@ -55568,8 +55564,8 @@
                 {
                     "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
                     "commentRange": {
-                        "start": 289,
-                        "end": 291
+                        "start": 327,
+                        "end": 329
                     },
                     "context": {
                         "type": "variable",
@@ -55577,8 +55573,8 @@
                         "value": "$kendo-body-bg",
                         "scope": "default",
                         "line": {
-                            "start": 292,
-                            "end": 292
+                            "start": 330,
+                            "end": 330
                         }
                     },
                     "group": [
@@ -55586,8 +55582,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 +55591,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": 293,
-                        "end": 295
+                        "start": 331,
+                        "end": 333
                     },
                     "context": {
                         "type": "variable",
@@ -55604,8 +55600,8 @@
                         "value": "$kendo-body-text",
                         "scope": "default",
                         "line": {
-                            "start": 296,
-                            "end": 296
+                            "start": 334,
+                            "end": 334
                         }
                     },
                     "group": [
@@ -55613,8 +55609,8 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#212529",
                     "resolvedType": "Color"
@@ -55622,8 +55618,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": 297,
-                        "end": 299
+                        "start": 335,
+                        "end": 337
                     },
                     "context": {
                         "type": "variable",
@@ -55631,8 +55627,8 @@
                         "value": "if( k-is-light( $kendo-component-bg ), $gray-300, $gray-700 )",
                         "scope": "default",
                         "line": {
-                            "start": 300,
-                            "end": 300
+                            "start": 338,
+                            "end": 338
                         }
                     },
                     "group": [
@@ -55640,8 +55636,8 @@
                     ],
                     "access": "public",
                     "file": {
-                        "path": "_variables.scss",
-                        "name": "_variables.scss"
+                        "path": "core/color-system/_swatch.scss",
+                        "name": "_swatch.scss"
                     },
                     "resolvedValue": "#dee2e6",
                     "resolvedType": "Color"
@@ -56774,7 +56770,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,
@@ -57083,7 +57079,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-dropzone-bg",
-                        "value": "if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )",
+                        "value": "if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ))",
                         "scope": "default",
                         "line": {
                             "start": 28,
@@ -57191,7 +57187,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-dropzone-icon-text",
-                        "value": "k-try-tint( $kendo-dropzone-text, 8 )",
+                        "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 ))",
                         "scope": "default",
                         "line": {
                             "start": 41,
@@ -57629,7 +57625,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,
@@ -59483,7 +59479,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,
@@ -59969,7 +59965,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,
@@ -60218,7 +60214,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-filter-toolbar-focus-shadow",
-                        "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+                        "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 30,
@@ -64178,17 +64174,17 @@
                 {
                     "description": "Background color of the grid row resize indicator\n",
                     "commentRange": {
-                        "start": 306,
-                        "end": 307
+                        "start": 309,
+                        "end": 310
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-grid-row-resizer-hover-bg",
-                        "value": "rgba( k-contrast-color( $kendo-grid-bg ), .12 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
                         "scope": "default",
                         "line": {
-                            "start": 308,
-                            "end": 308
+                            "start": 311,
+                            "end": 311
                         }
                     },
                     "group": [
@@ -64205,8 +64201,8 @@
                 {
                     "description": "Active background color of the grid row resize indicator\n",
                     "commentRange": {
-                        "start": 309,
-                        "end": 310
+                        "start": 312,
+                        "end": 313
                     },
                     "context": {
                         "type": "variable",
@@ -64214,8 +64210,8 @@
                         "value": "$kendo-color-primary",
                         "scope": "default",
                         "line": {
-                            "start": 311,
-                            "end": 311
+                            "start": 314,
+                            "end": 314
                         }
                     },
                     "group": [
@@ -64232,8 +64228,8 @@
                 {
                     "description": "Height of the grid row resize indicator\n",
                     "commentRange": {
-                        "start": 312,
-                        "end": 313
+                        "start": 315,
+                        "end": 316
                     },
                     "context": {
                         "type": "variable",
@@ -64241,8 +64237,8 @@
                         "value": "k-map-get( $kendo-spacing, .5 )",
                         "scope": "default",
                         "line": {
-                            "start": 314,
-                            "end": 314
+                            "start": 317,
+                            "end": 317
                         }
                     },
                     "group": [
@@ -64853,7 +64849,7 @@
                         "path": "input/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "#ffffff",
+                    "resolvedValue": "#fff",
                     "resolvedType": "Color"
                 },
                 {
@@ -65069,7 +65065,7 @@
                         "path": "input/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "#ffffff",
+                    "resolvedValue": "#fff",
                     "resolvedType": "Color"
                 },
                 {
@@ -65405,7 +65401,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-input-outline-border",
-                        "value": "rgba( $kendo-base-text, .5 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 ))",
                         "scope": "default",
                         "line": {
                             "start": 170,
@@ -67328,7 +67324,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-list-item-focus-shadow",
-                        "value": "inset 0 0 0 3px rgba( $kendo-list-text, .15 )",
+                        "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))",
                         "scope": "default",
                         "line": {
                             "start": 223,
@@ -68312,7 +68308,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,
@@ -68447,7 +68443,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-listview-item-focus-shadow",
-                        "value": "inset 0 0 0 3px rgba( $kendo-listview-text, .15 )",
+                        "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))",
                         "scope": "default",
                         "line": {
                             "start": 60,
@@ -71723,7 +71719,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-pager-item-focus-shadow",
-                        "value": "0 0 0 3px rgba($kendo-color-primary, .25)",
+                        "value": "0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))",
                         "scope": "default",
                         "line": {
                             "start": 126,
@@ -73409,7 +73405,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": 368,
@@ -73463,7 +73459,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": 375,
@@ -73787,7 +73783,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-picker-flat-hover-bg",
-                        "value": "rgba( $kendo-button-text, .08 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))",
                         "scope": "default",
                         "line": {
                             "start": 415,
@@ -78749,7 +78745,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,
@@ -79490,7 +79486,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-track-focus-border",
-                        "value": "k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )",
+                        "value": "if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ))",
                         "scope": "default",
                         "line": {
                             "start": 65,
@@ -79544,7 +79540,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-track-focus-ring",
-                        "value": ".25rem solid rgba( $kendo-color-primary, .25 )",
+                        "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 71,
@@ -79571,7 +79567,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-off-track-disabled-bg",
-                        "value": "if( $kendo-is-dark-theme, $gray-800, $gray-200 )",
+                        "value": "if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 ))",
                         "scope": "default",
                         "line": {
                             "start": 75,
@@ -80219,7 +80215,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-track-focus-ring",
-                        "value": ".25rem solid rgba( $kendo-switch-on-track-border, .25 )",
+                        "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 153,
@@ -80246,7 +80242,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-track-disabled-bg",
-                        "value": "k-try-tint( $kendo-switch-on-track-bg, 50% )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% ))",
                         "scope": "default",
                         "line": {
                             "start": 157,
@@ -80354,7 +80350,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-switch-on-thumb-bg",
-                        "value": "k-contrast-color( $kendo-switch-on-track-bg )",
+                        "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg ))",
                         "scope": "default",
                         "line": {
                             "start": 170,
@@ -81143,7 +81139,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-alt-row-bg",
-                        "value": "rgba( k-contrast-color( $kendo-table-bg ), .04 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 ))",
                         "scope": "default",
                         "line": {
                             "start": 114,
@@ -81224,7 +81220,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-table-hover-bg",
-                        "value": "rgba( k-contrast-color( $kendo-table-bg ), .08 )",
+                        "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))",
                         "scope": "default",
                         "line": {
                             "start": 125,
@@ -81413,7 +81409,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,
@@ -83159,7 +83155,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-toolbar-item-shadow",
-                        "value": "0 0 0 .25rem rgba( $kendo-color-primary, .25 )",
+                        "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
                         "scope": "default",
                         "line": {
                             "start": 85,
@@ -83516,7 +83512,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-tooltip-bg",
-                        "value": "if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )",
+                        "value": "if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))",
                         "scope": "default",
                         "line": {
                             "start": 39,
@@ -83543,7 +83539,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,
@@ -84710,7 +84706,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-treeview-item-focus-shadow",
-                        "value": "inset 0 0 0 2px rgba( $kendo-treeview-text, .15 )",
+                        "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 ))",
                         "scope": "default",
                         "line": {
                             "start": 154,
@@ -85007,8 +85003,8 @@
                 {
                     "description": "Base font size across all components.\n",
                     "commentRange": {
-                        "start": 220,
-                        "end": 221
+                        "start": 104,
+                        "end": 105
                     },
                     "context": {
                         "type": "variable",
@@ -85016,8 +85012,8 @@
                         "value": "$font-size-base",
                         "scope": "default",
                         "line": {
-                            "start": 222,
-                            "end": 222
+                            "start": 106,
+                            "end": 106
                         }
                     },
                     "group": [
@@ -85034,8 +85030,8 @@
                 {
                     "description": "Font family for text.\n",
                     "commentRange": {
-                        "start": 237,
-                        "end": 238
+                        "start": 121,
+                        "end": 122
                     },
                     "context": {
                         "type": "variable",
@@ -85043,8 +85039,8 @@
                         "value": "$font-family-sans-serif",
                         "scope": "default",
                         "line": {
-                            "start": 239,
-                            "end": 239
+                            "start": 123,
+                            "end": 123
                         }
                     },
                     "group": [
@@ -85061,8 +85057,8 @@
                 {
                     "description": "Font family for monospaced text. Used for styling the code.\n",
                     "commentRange": {
-                        "start": 241,
-                        "end": 242
+                        "start": 125,
+                        "end": 126
                     },
                     "context": {
                         "type": "variable",
@@ -85070,8 +85066,8 @@
                         "value": "$font-family-monospace",
                         "scope": "default",
                         "line": {
-                            "start": 243,
-                            "end": 243
+                            "start": 127,
+                            "end": 127
                         }
                     },
                     "group": [
@@ -85088,8 +85084,8 @@
                 {
                     "description": "Font family across all components.\n",
                     "commentRange": {
-                        "start": 245,
-                        "end": 246
+                        "start": 129,
+                        "end": 130
                     },
                     "context": {
                         "type": "variable",
@@ -85097,8 +85093,8 @@
                         "value": "$kendo-font-family-sans-serif",
                         "scope": "default",
                         "line": {
-                            "start": 247,
-                            "end": 247
+                            "start": 131,
+                            "end": 131
                         }
                     },
                     "group": [
@@ -85115,8 +85111,8 @@
                 {
                     "description": "Line height used along with $kendo-font-size.\n",
                     "commentRange": {
-                        "start": 249,
-                        "end": 250
+                        "start": 133,
+                        "end": 134
                     },
                     "context": {
                         "type": "variable",
@@ -85124,8 +85120,8 @@
                         "value": "$line-height-base",
                         "scope": "default",
                         "line": {
-                            "start": 251,
-                            "end": 251
+                            "start": 135,
+                            "end": 135
                         }
                     },
                     "group": [
@@ -85505,7 +85501,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-upload-dropzone-hover-bg",
-                        "value": "k-try-shade( $kendo-upload-dropzone-bg, .2 )",
+                        "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 ))",
                         "scope": "default",
                         "line": {
                             "start": 46,