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

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

@@ -283,7 +283,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-light-text",
-            "value": "k-contrast-color( $kendo-color-light )",
+            "value": "if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light ))",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -333,7 +333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-appbar-dark-text",
-            "value": "k-contrast-color( $kendo-color-dark )",
+            "value": "if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark ))",
             "scope": "default",
             "line": {
                 "start": 47,
@@ -3758,7 +3758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-border",
-            "value": "k-try-shade( $kendo-button-bg, 2 )",
+            "value": "if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-button-bg, 2 ))",
             "scope": "default",
             "line": {
                 "start": 119,
@@ -3833,7 +3833,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-hover-bg",
-            "value": "k-try-shade( $kendo-button-bg, 1 )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, 1 ))",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -3883,7 +3883,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-hover-border",
-            "value": "k-try-shade( $kendo-button-bg, 3 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 ))",
             "scope": "default",
             "line": {
                 "start": 135,
@@ -3958,7 +3958,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-active-bg",
-            "value": "k-try-shade( $kendo-button-bg, 2 )",
+            "value": "if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 2 ))",
             "scope": "default",
             "line": {
                 "start": 145,
@@ -4008,7 +4008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-active-border",
-            "value": "k-try-shade( $kendo-button-bg, 4 )",
+            "value": "if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 4 ))",
             "scope": "default",
             "line": {
                 "start": 151,
@@ -4108,7 +4108,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-selected-text",
-            "value": "k-contrast-legacy( $kendo-button-selected-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg ))",
             "scope": "default",
             "line": {
                 "start": 164,
@@ -4308,7 +4308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-shadow",
-            "value": "0 0 4px 0 rgba( $kendo-button-border, .75 )",
+            "value": "0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 ))",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -6333,7 +6333,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-a",
-            "value": "#ff6358",
+            "value": "if($kendo-enable-color-system, k-color( series-a ), #ff6358)",
             "scope": "default",
             "line": {
                 "start": 8,
@@ -6358,7 +6358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-b",
-            "value": "#ffd246",
+            "value": "if($kendo-enable-color-system, k-color( series-b ), #ffd246)",
             "scope": "default",
             "line": {
                 "start": 16,
@@ -6383,7 +6383,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-c",
-            "value": "#78d237",
+            "value": "if($kendo-enable-color-system, k-color( series-c ), #78d237)",
             "scope": "default",
             "line": {
                 "start": 24,
@@ -6408,7 +6408,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-d",
-            "value": "#28b4c8",
+            "value": "if($kendo-enable-color-system, k-color( series-d ), #28b4c8)",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -6433,7 +6433,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-e",
-            "value": "#2d73f5",
+            "value": "if($kendo-enable-color-system, k-color( series-e ), #2d73f5)",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -6458,7 +6458,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-series-f",
-            "value": "#aa46be",
+            "value": "if($kendo-enable-color-system, k-color( series-f ), #aa46be)",
             "scope": "default",
             "line": {
                 "start": 48,
@@ -6508,7 +6508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-major-lines",
-            "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 )",
             "scope": "default",
             "line": {
                 "start": 103,
@@ -6533,7 +6533,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-minor-lines",
-            "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )",
+            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 )",
             "scope": "default",
             "line": {
                 "start": 107,
@@ -6983,7 +6983,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-text",
-            "value": "k-contrast-legacy( $kendo-checkbox-checked-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))",
             "scope": "default",
             "line": {
                 "start": 84,
@@ -7183,7 +7183,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-checked-shadow",
-            "value": "0 0 0 2px rgba( $kendo-color-primary, .3 )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))",
             "scope": "default",
             "line": {
                 "start": 110,
@@ -8358,7 +8358,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-shadow",
-            "value": "0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
             "scope": "default",
             "line": {
                 "start": 118,
@@ -8633,7 +8633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-shadow",
-            "value": "0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )",
+            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
             "scope": "default",
             "line": {
                 "start": 155,
@@ -8683,7 +8683,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-hover-text",
-            "value": "k-contrast-legacy( $kendo-chip-outline-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 162,
@@ -9850,62 +9850,35 @@
         }
     },
     {
-        "description": "The color white.\nNote: you cannot change this value.\n",
+        "description": "The global default Colors map.\n",
         "commentRange": {
-            "start": 3,
-            "end": 6
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-white",
-            "value": "#ffffff",
-            "scope": "private",
-            "line": {
-                "start": 7,
-                "end": 7
-            }
-        },
-        "type": "Color",
-        "group": [
-            "color-system"
-        ],
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color black.\nNote: you cannot change this value.\n",
-        "commentRange": {
-            "start": 9,
-            "end": 12
+            "start": 177,
+            "end": 178
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-black",
-            "value": "#000000",
-            "scope": "private",
+            "name": "kendo-colors",
+            "value": "$_default-colors",
+            "scope": "default",
             "line": {
-                "start": 13,
-                "end": 13
+                "start": 179,
+                "end": 179
             }
         },
-        "type": "Color",
         "group": [
             "color-system"
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
         "commentRange": {
-            "start": 119,
-            "end": 122
+            "start": 184,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -9913,8 +9886,8 @@
             "value": "#f35800",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -9923,15 +9896,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color used along with the primary color denoted by $kendo-color-primary.\nUsed to provide contrast between the background and foreground colors.\n",
         "commentRange": {
-            "start": 127,
-            "end": 130
+            "start": 192,
+            "end": 195
         },
         "context": {
             "type": "variable",
@@ -9939,8 +9912,8 @@
             "value": "k-contrast-legacy( $kendo-color-primary )",
             "scope": "default",
             "line": {
-                "start": 131,
-                "end": 131
+                "start": 196,
+                "end": 196
             }
         },
         "group": [
@@ -9949,15 +9922,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The secondary color of the theme.\n",
         "commentRange": {
-            "start": 133,
-            "end": 135
+            "start": 198,
+            "end": 200
         },
         "context": {
             "type": "variable",
@@ -9965,8 +9938,8 @@
             "value": "#e9e9e9",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 201,
+                "end": 201
             }
         },
         "group": [
@@ -9975,15 +9948,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color used along with the secondary color denoted by $kendo-color-secondary.\nUsed to provide contrast between the background and foreground colors.\n",
         "commentRange": {
-            "start": 140,
-            "end": 143
+            "start": 205,
+            "end": 208
         },
         "context": {
             "type": "variable",
@@ -9991,8 +9964,8 @@
             "value": "k-contrast-color( $kendo-color-secondary )",
             "scope": "default",
             "line": {
-                "start": 144,
-                "end": 144
+                "start": 209,
+                "end": 209
             }
         },
         "group": [
@@ -10001,15 +9974,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The tertiary color of the theme.\n",
         "commentRange": {
-            "start": 146,
-            "end": 148
+            "start": 211,
+            "end": 213
         },
         "context": {
             "type": "variable",
@@ -10017,8 +9990,8 @@
             "value": "#03a9f4",
             "scope": "default",
             "line": {
-                "start": 149,
-                "end": 149
+                "start": 214,
+                "end": 214
             }
         },
         "group": [
@@ -10027,15 +10000,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color used along with the tertiary color denoted by $kendo-color-tertiary.\nUsed to provide contrast between the background and foreground colors.\n",
         "commentRange": {
-            "start": 153,
-            "end": 156
+            "start": 218,
+            "end": 221
         },
         "context": {
             "type": "variable",
@@ -10043,8 +10016,8 @@
             "value": "k-contrast-color( $kendo-color-tertiary )",
             "scope": "default",
             "line": {
-                "start": 157,
-                "end": 157
+                "start": 222,
+                "end": 222
             }
         },
         "group": [
@@ -10053,15 +10026,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for informational messages and states.\n",
         "commentRange": {
-            "start": 159,
-            "end": 161
+            "start": 224,
+            "end": 226
         },
         "context": {
             "type": "variable",
@@ -10069,8 +10042,8 @@
             "value": "#2498bc",
             "scope": "default",
             "line": {
-                "start": 162,
-                "end": 162
+                "start": 227,
+                "end": 227
             }
         },
         "group": [
@@ -10079,15 +10052,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for success messages and states.\n",
         "commentRange": {
-            "start": 166,
-            "end": 168
+            "start": 231,
+            "end": 233
         },
         "context": {
             "type": "variable",
@@ -10095,8 +10068,8 @@
             "value": "#3ea44e",
             "scope": "default",
             "line": {
-                "start": 169,
-                "end": 169
+                "start": 234,
+                "end": 234
             }
         },
         "group": [
@@ -10105,15 +10078,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for warning messages and states.\n",
         "commentRange": {
-            "start": 173,
-            "end": 175
+            "start": 238,
+            "end": 240
         },
         "context": {
             "type": "variable",
@@ -10121,8 +10094,8 @@
             "value": "#ff9800",
             "scope": "default",
             "line": {
-                "start": 176,
-                "end": 176
+                "start": 241,
+                "end": 241
             }
         },
         "group": [
@@ -10131,15 +10104,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The color for error messages and states.\n",
         "commentRange": {
-            "start": 180,
-            "end": 182
+            "start": 245,
+            "end": 247
         },
         "context": {
             "type": "variable",
@@ -10147,8 +10120,8 @@
             "value": "#d92800",
             "scope": "default",
             "line": {
-                "start": 183,
-                "end": 183
+                "start": 248,
+                "end": 248
             }
         },
         "group": [
@@ -10157,15 +10130,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The dark color of the theme.\n",
         "commentRange": {
-            "start": 187,
-            "end": 189
+            "start": 252,
+            "end": 254
         },
         "context": {
             "type": "variable",
@@ -10173,8 +10146,8 @@
             "value": "#404040",
             "scope": "default",
             "line": {
-                "start": 190,
-                "end": 190
+                "start": 255,
+                "end": 255
             }
         },
         "group": [
@@ -10183,15 +10156,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The light color of the theme.\n",
         "commentRange": {
-            "start": 192,
-            "end": 194
+            "start": 257,
+            "end": 259
         },
         "context": {
             "type": "variable",
@@ -10199,8 +10172,8 @@
             "value": "#ebebeb",
             "scope": "default",
             "line": {
-                "start": 195,
-                "end": 195
+                "start": 260,
+                "end": 260
             }
         },
         "group": [
@@ -10209,15 +10182,15 @@
         "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
         "commentRange": {
-            "start": 197,
-            "end": 198
+            "start": 262,
+            "end": 263
         },
         "context": {
             "type": "variable",
@@ -10225,8 +10198,8 @@
             "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
             "scope": "default",
             "line": {
-                "start": 199,
-                "end": 199
+                "start": 264,
+                "end": 264
             }
         },
         "group": [
@@ -10234,8 +10207,8 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -11038,11 +11011,136 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "Background color of the body.\n",
+        "commentRange": {
+            "start": 281,
+            "end": 282
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-body-bg",
+            "value": "$kendo-color-white",
+            "scope": "default",
+            "line": {
+                "start": 283,
+                "end": 283
+            }
+        },
+        "group": [
+            "common"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of the body.\n",
+        "commentRange": {
+            "start": 284,
+            "end": 285
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-body-text",
+            "value": "#272727",
+            "scope": "default",
+            "line": {
+                "start": 286,
+                "end": 286
+            }
+        },
+        "group": [
+            "common"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Subtle text color.\n",
+        "commentRange": {
+            "start": 288,
+            "end": 289
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-subtle-text",
+            "value": "#646464",
+            "scope": "default",
+            "line": {
+                "start": 290,
+                "end": 290
+            }
+        },
+        "group": [
+            "common"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of the links.\n",
+        "commentRange": {
+            "start": 297,
+            "end": 298
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-link-text",
+            "value": "$kendo-color-primary",
+            "scope": "default",
+            "line": {
+                "start": 299,
+                "end": 299
+            }
+        },
+        "group": [
+            "common"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of the links on hover.\n",
+        "commentRange": {
+            "start": 300,
+            "end": 301
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-link-hover-text",
+            "value": "$kendo-color-primary-darker",
+            "scope": "default",
+            "line": {
+                "start": 302,
+                "end": 302
+            }
+        },
+        "group": [
+            "common"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
     {
         "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
         "commentRange": {
-            "start": 295,
-            "end": 297
+            "start": 315,
+            "end": 317
         },
         "context": {
             "type": "variable",
@@ -11050,8 +11148,8 @@
             "value": "$kendo-body-bg",
             "scope": "default",
             "line": {
-                "start": 298,
-                "end": 298
+                "start": 318,
+                "end": 318
             }
         },
         "group": [
@@ -11059,15 +11157,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Text color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.\n",
         "commentRange": {
-            "start": 299,
-            "end": 301
+            "start": 319,
+            "end": 321
         },
         "context": {
             "type": "variable",
@@ -11075,8 +11173,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 302,
-                "end": 302
+                "start": 322,
+                "end": 322
             }
         },
         "group": [
@@ -11084,15 +11182,15 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "Border color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.\n",
         "commentRange": {
-            "start": 303,
-            "end": 305
+            "start": 323,
+            "end": 325
         },
         "context": {
             "type": "variable",
@@ -11100,8 +11198,8 @@
             "value": "$kendo-base-border",
             "scope": "default",
             "line": {
-                "start": 306,
-                "end": 306
+                "start": 326,
+                "end": 326
             }
         },
         "group": [
@@ -11109,8 +11207,308 @@
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Background color of the component header.\n",
+        "commentRange": {
+            "start": 360,
+            "end": 361
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-component-header-bg",
+            "value": "$kendo-base-bg",
+            "scope": "default",
+            "line": {
+                "start": 362,
+                "end": 362
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of the component header.\n",
+        "commentRange": {
+            "start": 363,
+            "end": 364
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-component-header-text",
+            "value": "$kendo-base-text",
+            "scope": "default",
+            "line": {
+                "start": 365,
+                "end": 365
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Border color of the component header.\n",
+        "commentRange": {
+            "start": 366,
+            "end": 367
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-component-header-border",
+            "value": "$kendo-base-border",
+            "scope": "default",
+            "line": {
+                "start": 368,
+                "end": 368
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Gradient of the component header.\n",
+        "commentRange": {
+            "start": 369,
+            "end": 370
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-component-header-gradient",
+            "value": "$kendo-base-gradient",
+            "scope": "default",
+            "line": {
+                "start": 371,
+                "end": 371
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Background color of the invalid items.\n",
+        "commentRange": {
+            "start": 373,
+            "end": 374
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-invalid-bg",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 375,
+                "end": 375
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of the invalid items.\n",
+        "commentRange": {
+            "start": 376,
+            "end": 377
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-invalid-text",
+            "value": "$kendo-color-error",
+            "scope": "default",
+            "line": {
+                "start": 378,
+                "end": 378
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Border color of the invalid items.\n",
+        "commentRange": {
+            "start": 379,
+            "end": 380
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-invalid-border",
+            "value": "$kendo-color-error",
+            "scope": "default",
+            "line": {
+                "start": 381,
+                "end": 381
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Shadow of the invalid items.\n",
+        "commentRange": {
+            "start": 382,
+            "end": 383
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-invalid-shadow",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 384,
+                "end": 384
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Background color of the valid items.\n",
+        "commentRange": {
+            "start": 386,
+            "end": 387
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-valid-bg",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 388,
+                "end": 388
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of the valid items.\n",
+        "commentRange": {
+            "start": 389,
+            "end": 390
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-valid-text",
+            "value": "$kendo-color-success",
+            "scope": "default",
+            "line": {
+                "start": 391,
+                "end": 391
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Border color of the valid items.\n",
+        "commentRange": {
+            "start": 392,
+            "end": 393
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-valid-border",
+            "value": "$kendo-color-success",
+            "scope": "default",
+            "line": {
+                "start": 394,
+                "end": 394
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Shadow of the valid items.\n",
+        "commentRange": {
+            "start": 395,
+            "end": 396
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-valid-shadow",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 397,
+                "end": 397
+            }
+        },
+        "group": [
+            "component"
+        ],
+        "access": "public",
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
@@ -12147,7 +12545,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,
@@ -12522,7 +12920,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dropzone-icon-text",
-            "value": "k-try-tint( $kendo-dropzone-text, 4 )",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 ))",
             "scope": "default",
             "line": {
                 "start": 41,
@@ -12922,7 +13320,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,
@@ -13466,17 +13864,17 @@
     {
         "description": "The background color of the hovered ExpansionPanel header.\n",
         "commentRange": {
-            "start": 51,
-            "end": 52
+            "start": 50,
+            "end": 51
         },
         "context": {
             "type": "variable",
             "name": "kendo-expander-header-hover-bg",
-            "value": "k-color-shade( $kendo-expander-bg, 1 )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 ))",
             "scope": "default",
             "line": {
-                "start": 53,
-                "end": 53
+                "start": 52,
+                "end": 52
             }
         },
         "group": [
@@ -13491,8 +13889,8 @@
     {
         "description": "The background color of the focused ExpansionPanel header.\n",
         "commentRange": {
-            "start": 54,
-            "end": 55
+            "start": 53,
+            "end": 54
         },
         "context": {
             "type": "variable",
@@ -13500,8 +13898,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 56,
-                "end": 56
+                "start": 55,
+                "end": 55
             }
         },
         "group": [
@@ -13516,8 +13914,8 @@
     {
         "description": "The box shadow of the focused ExpansionPanel header.\n",
         "commentRange": {
-            "start": 57,
-            "end": 58
+            "start": 56,
+            "end": 57
         },
         "context": {
             "type": "variable",
@@ -13525,8 +13923,8 @@
             "value": "$kendo-list-item-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 59,
-                "end": 59
+                "start": 58,
+                "end": 58
             }
         },
         "group": [
@@ -13541,8 +13939,8 @@
     {
         "description": "The text color of the ExpansionPanel title.\n",
         "commentRange": {
-            "start": 61,
-            "end": 62
+            "start": 60,
+            "end": 61
         },
         "context": {
             "type": "variable",
@@ -13550,8 +13948,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 63,
-                "end": 63
+                "start": 62,
+                "end": 62
             }
         },
         "group": [
@@ -13566,8 +13964,8 @@
     {
         "description": "The text color of the ExpansionPanel sub-title.\n",
         "commentRange": {
-            "start": 65,
-            "end": 66
+            "start": 64,
+            "end": 65
         },
         "context": {
             "type": "variable",
@@ -13575,8 +13973,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 67,
-                "end": 67
+                "start": 66,
+                "end": 66
             }
         },
         "group": [
@@ -13591,8 +13989,8 @@
     {
         "description": "The horizontal margin of the ExpansionPanel indicator.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 68,
+            "end": 69
         },
         "context": {
             "type": "variable",
@@ -13600,8 +13998,8 @@
             "value": "k-map-get( $kendo-spacing, 3 )",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 70,
+                "end": 70
             }
         },
         "group": [
@@ -13616,8 +14014,8 @@
     {
         "description": "The horizontal padding of the ExpansionPanel content.\n",
         "commentRange": {
-            "start": 73,
-            "end": 74
+            "start": 72,
+            "end": 73
         },
         "context": {
             "type": "variable",
@@ -13625,8 +14023,8 @@
             "value": "k-map-get( $kendo-spacing, 4 )",
             "scope": "default",
             "line": {
-                "start": 75,
-                "end": 75
+                "start": 74,
+                "end": 74
             }
         },
         "group": [
@@ -13641,8 +14039,8 @@
     {
         "description": "The vertical padding of the ExpansionPanel content.\n",
         "commentRange": {
-            "start": 76,
-            "end": 77
+            "start": 75,
+            "end": 76
         },
         "context": {
             "type": "variable",
@@ -13650,8 +14048,8 @@
             "value": "k-map-get( $kendo-spacing, 4 )",
             "scope": "default",
             "line": {
-                "start": 78,
-                "end": 78
+                "start": 77,
+                "end": 77
             }
         },
         "group": [
@@ -14597,7 +14995,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-file-manager-listview-item-icon-text",
-            "value": "k-try-tint($kendo-file-manager-text, 4)",
+            "value": "if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4))",
             "scope": "default",
             "line": {
                 "start": 122,
@@ -15047,7 +15445,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,
@@ -17872,7 +18270,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fieldset-legend-text",
-            "value": "k-try-shade( $kendo-body-text, 2 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))",
             "scope": "default",
             "line": {
                 "start": 154,
@@ -18941,17 +19339,17 @@
     {
         "description": "Background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 312,
-            "end": 313
+            "start": 315,
+            "end": 316
         },
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-hover-bg",
-            "value": "rgba( k-contrast-color( $kendo-grid-bg ), .12 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
             "scope": "default",
             "line": {
-                "start": 314,
-                "end": 314
+                "start": 317,
+                "end": 317
             }
         },
         "group": [
@@ -18966,8 +19364,8 @@
     {
         "description": "Active background color of the grid row resize indicator\n",
         "commentRange": {
-            "start": 315,
-            "end": 316
+            "start": 318,
+            "end": 319
         },
         "context": {
             "type": "variable",
@@ -18975,8 +19373,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 317,
-                "end": 317
+                "start": 320,
+                "end": 320
             }
         },
         "group": [
@@ -18991,8 +19389,8 @@
     {
         "description": "Height of the grid row resize indicator\n",
         "commentRange": {
-            "start": 318,
-            "end": 319
+            "start": 321,
+            "end": 322
         },
         "context": {
             "type": "variable",
@@ -19000,8 +19398,8 @@
             "value": "k-map-get( $kendo-spacing, .5 )",
             "scope": "default",
             "line": {
-                "start": 320,
-                "end": 320
+                "start": 323,
+                "end": 323
             }
         },
         "group": [
@@ -20072,7 +20470,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-border",
-            "value": "rgba( $kendo-button-text, .5)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5))",
             "scope": "default",
             "line": {
                 "start": 171,
@@ -20147,7 +20545,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-border",
-            "value": "rgba( $kendo-button-text, .8)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8))",
             "scope": "default",
             "line": {
                 "start": 181,
@@ -22747,7 +23145,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,
@@ -27422,7 +27820,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-border",
-            "value": "rgba( $kendo-picker-outline-text, .5)",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5))",
             "scope": "default",
             "line": {
                 "start": 372,
@@ -27472,7 +27870,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-hover-text",
-            "value": "k-contrast-color( $kendo-picker-outline-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 379,
@@ -27772,7 +28170,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "rgba( $kendo-button-text, .04 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 ))",
             "scope": "default",
             "line": {
                 "start": 419,
@@ -27822,7 +28220,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-border",
-            "value": "rgba( $kendo-button-border, .16 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 ))",
             "scope": "default",
             "line": {
                 "start": 425,
@@ -29147,7 +29545,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-bg",
-            "value": "k-try-shade( $kendo-component-bg, 1 )",
+            "value": "if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 ))",
             "scope": "default",
             "line": {
                 "start": 27,
@@ -29272,7 +29670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-value-text",
-            "value": "k-contrast-legacy( $kendo-progressbar-value-bg )",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg ))",
             "scope": "default",
             "line": {
                 "start": 43,
@@ -29297,7 +29695,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-progressbar-value-border",
-            "value": "k-try-shade( $kendo-progressbar-value-bg )",
+            "value": "if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg ))",
             "scope": "default",
             "line": {
                 "start": 46,
@@ -31797,7 +32195,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-scrollview-pagebutton-primary-border",
-            "value": "k-try-shade( $kendo-color-primary, 2 )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 ))",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -32322,7 +32720,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,
@@ -33047,7 +33445,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-ring",
-            "value": "0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )",
+            "value": "0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -33172,7 +33570,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-bg",
-            "value": "k-try-shade( $kendo-switch-off-track-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg ))",
             "scope": "default",
             "line": {
                 "start": 88,
@@ -33272,7 +33670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-thumb-hover-bg",
-            "value": "k-try-shade( $kendo-switch-off-thumb-bg )",
+            "value": "if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg ))",
             "scope": "default",
             "line": {
                 "start": 101,
@@ -33672,7 +34070,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-ring",
-            "value": "0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )",
+            "value": "0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 )",
             "scope": "default",
             "line": {
                 "start": 153,
@@ -33847,7 +34245,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-border",
-            "value": "k-try-shade( $kendo-switch-on-thumb-bg )",
+            "value": "if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg ))",
             "scope": "default",
             "line": {
                 "start": 176,
@@ -33897,7 +34295,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-hover-bg",
-            "value": "k-try-shade( $kendo-switch-on-thumb-bg )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg ))",
             "scope": "default",
             "line": {
                 "start": 183,
@@ -33947,7 +34345,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-thumb-hover-border",
-            "value": "k-try-shade( $kendo-switch-on-thumb-hover-bg )",
+            "value": "if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg ))",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -34522,7 +34920,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-alt-row-bg",
-            "value": "k-try-shade( $kendo-table-bg, .5 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 ))",
             "scope": "default",
             "line": {
                 "start": 114,
@@ -34597,7 +34995,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "k-try-shade( $kendo-table-bg, 1 )",
+            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -34772,7 +35170,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,
@@ -36697,7 +37095,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-bg",
-            "value": "rgba( k-contrast-color( $kendo-body-bg ), .75 )",
+            "value": "if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-color( $kendo-body-bg ), .75 ))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -36722,7 +37120,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,
@@ -38066,8 +38464,8 @@
     {
         "description": "Base font size across all components.\n",
         "commentRange": {
-            "start": 218,
-            "end": 219
+            "start": 109,
+            "end": 110
         },
         "context": {
             "type": "variable",
@@ -38075,8 +38473,8 @@
             "value": "14px",
             "scope": "default",
             "line": {
-                "start": 220,
-                "end": 220
+                "start": 111,
+                "end": 111
             }
         },
         "group": [
@@ -38091,8 +38489,8 @@
     {
         "description": "Font family for text.\n",
         "commentRange": {
-            "start": 235,
-            "end": 236
+            "start": 126,
+            "end": 127
         },
         "context": {
             "type": "variable",
@@ -38100,8 +38498,8 @@
             "value": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
             "scope": "default",
             "line": {
-                "start": 237,
-                "end": 237
+                "start": 128,
+                "end": 128
             }
         },
         "group": [
@@ -38116,8 +38514,8 @@
     {
         "description": "Font family for monospaced text. Used for styling the code.\n",
         "commentRange": {
-            "start": 239,
-            "end": 240
+            "start": 130,
+            "end": 131
         },
         "context": {
             "type": "variable",
@@ -38125,8 +38523,8 @@
             "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Roboto Mono\", \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
             "scope": "default",
             "line": {
-                "start": 241,
-                "end": 241
+                "start": 132,
+                "end": 132
             }
         },
         "group": [
@@ -38141,8 +38539,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 243,
-            "end": 244
+            "start": 134,
+            "end": 135
         },
         "context": {
             "type": "variable",
@@ -38150,8 +38548,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 245,
-                "end": 245
+                "start": 136,
+                "end": 136
             }
         },
         "group": [
@@ -38166,8 +38564,8 @@
     {
         "description": "Line height used along with $kendo-font-size.\n",
         "commentRange": {
-            "start": 247,
-            "end": 248
+            "start": 138,
+            "end": 139
         },
         "context": {
             "type": "variable",
@@ -38175,8 +38573,8 @@
             "value": "k-math-div( 20, 14 )",
             "scope": "default",
             "line": {
-                "start": 249,
-                "end": 249
+                "start": 140,
+                "end": 140
             }
         },
         "group": [
@@ -38191,8 +38589,8 @@
     {
         "description": "Border radius for all components.\n",
         "commentRange": {
-            "start": 94,
-            "end": 94
+            "start": 82,
+            "end": 82
         },
         "context": {
             "type": "variable",
@@ -38200,8 +38598,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 95,
-                "end": 95
+                "start": 83,
+                "end": 83
             }
         },
         "access": "public",
@@ -38216,8 +38614,8 @@
     {
         "description": "The background of the components' chrome area.\n",
         "commentRange": {
-            "start": 286,
-            "end": 286
+            "start": 306,
+            "end": 306
         },
         "context": {
             "type": "variable",
@@ -38225,8 +38623,8 @@
             "value": "#f0f0f0",
             "scope": "default",
             "line": {
-                "start": 287,
-                "end": 287
+                "start": 307,
+                "end": 307
             }
         },
         "access": "public",
@@ -38234,15 +38632,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The text color of the components' chrome area.\n",
         "commentRange": {
-            "start": 288,
-            "end": 288
+            "start": 308,
+            "end": 308
         },
         "context": {
             "type": "variable",
@@ -38250,8 +38648,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 289,
-                "end": 289
+                "start": 309,
+                "end": 309
             }
         },
         "access": "public",
@@ -38259,15 +38657,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border color of the components' chrome area.\n",
         "commentRange": {
-            "start": 290,
-            "end": 290
+            "start": 310,
+            "end": 310
         },
         "context": {
             "type": "variable",
@@ -38275,8 +38673,8 @@
             "value": "k-try-shade( $kendo-base-bg, 2 )",
             "scope": "default",
             "line": {
-                "start": 291,
-                "end": 291
+                "start": 311,
+                "end": 311
             }
         },
         "access": "public",
@@ -38284,15 +38682,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The gradient background of the components' chrome area.\n",
         "commentRange": {
-            "start": 292,
-            "end": 292
+            "start": 312,
+            "end": 312
         },
         "context": {
             "type": "variable",
@@ -38300,8 +38698,8 @@
             "value": "rgba( white, .1 ), rgba( white, 0 )",
             "scope": "default",
             "line": {
-                "start": 293,
-                "end": 293
+                "start": 313,
+                "end": 313
             }
         },
         "access": "public",
@@ -38309,15 +38707,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The background of hovered items.\n",
         "commentRange": {
-            "start": 308,
-            "end": 308
+            "start": 328,
+            "end": 328
         },
         "context": {
             "type": "variable",
@@ -38325,8 +38723,8 @@
             "value": "k-try-shade( $kendo-base-bg, 1 )",
             "scope": "default",
             "line": {
-                "start": 309,
-                "end": 309
+                "start": 329,
+                "end": 329
             }
         },
         "access": "public",
@@ -38334,15 +38732,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The text color of hovered items.\n",
         "commentRange": {
-            "start": 310,
-            "end": 310
+            "start": 330,
+            "end": 330
         },
         "context": {
             "type": "variable",
@@ -38350,8 +38748,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 311,
-                "end": 311
+                "start": 331,
+                "end": 331
             }
         },
         "access": "public",
@@ -38359,15 +38757,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border color of hovered items.\n",
         "commentRange": {
-            "start": 312,
-            "end": 312
+            "start": 332,
+            "end": 332
         },
         "context": {
             "type": "variable",
@@ -38375,8 +38773,8 @@
             "value": "k-try-shade( $kendo-hover-bg, 2 )",
             "scope": "default",
             "line": {
-                "start": 313,
-                "end": 313
+                "start": 333,
+                "end": 333
             }
         },
         "access": "public",
@@ -38384,15 +38782,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The gradient background of hovered items.\n",
         "commentRange": {
-            "start": 314,
-            "end": 314
+            "start": 334,
+            "end": 334
         },
         "context": {
             "type": "variable",
@@ -38400,8 +38798,8 @@
             "value": "$kendo-base-gradient",
             "scope": "default",
             "line": {
-                "start": 315,
-                "end": 315
+                "start": 335,
+                "end": 335
             }
         },
         "access": "public",
@@ -38409,15 +38807,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The background of selected items.\n",
         "commentRange": {
-            "start": 317,
-            "end": 317
+            "start": 337,
+            "end": 337
         },
         "context": {
             "type": "variable",
@@ -38425,8 +38823,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 318,
-                "end": 318
+                "start": 338,
+                "end": 338
             }
         },
         "access": "public",
@@ -38434,15 +38832,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The text color of selected items.\n",
         "commentRange": {
-            "start": 319,
-            "end": 319
+            "start": 339,
+            "end": 339
         },
         "context": {
             "type": "variable",
@@ -38450,8 +38848,8 @@
             "value": "k-contrast-legacy( $kendo-selected-bg )",
             "scope": "default",
             "line": {
-                "start": 320,
-                "end": 320
+                "start": 340,
+                "end": 340
             }
         },
         "access": "public",
@@ -38459,15 +38857,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The border color of selected items.\n",
         "commentRange": {
-            "start": 321,
-            "end": 321
+            "start": 341,
+            "end": 341
         },
         "context": {
             "type": "variable",
@@ -38475,8 +38873,8 @@
             "value": "k-try-shade( $kendo-selected-bg, 2 )",
             "scope": "default",
             "line": {
-                "start": 322,
-                "end": 322
+                "start": 342,
+                "end": 342
             }
         },
         "access": "public",
@@ -38484,15 +38882,15 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {
         "description": "The gradient background of selected items.\n",
         "commentRange": {
-            "start": 323,
-            "end": 323
+            "start": 343,
+            "end": 343
         },
         "context": {
             "type": "variable",
@@ -38500,8 +38898,8 @@
             "value": "$kendo-base-gradient",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 344,
+                "end": 344
             }
         },
         "access": "public",
@@ -38509,8 +38907,133 @@
             "undefined"
         ],
         "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "The background of selected and hovered items.\n",
+        "commentRange": {
+            "start": 346,
+            "end": 346
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-selected-hover-bg",
+            "value": "k-try-shade( $kendo-selected-bg, 1 )",
+            "scope": "default",
+            "line": {
+                "start": 347,
+                "end": 347
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "The text color of selected and hovered items.\n",
+        "commentRange": {
+            "start": 348,
+            "end": 348
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-selected-hover-text",
+            "value": "k-contrast-legacy( $kendo-selected-hover-bg )",
+            "scope": "default",
+            "line": {
+                "start": 349,
+                "end": 349
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "The border of selected and hovered items.\n",
+        "commentRange": {
+            "start": 350,
+            "end": 350
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-selected-hover-border",
+            "value": "$kendo-selected-border",
+            "scope": "default",
+            "line": {
+                "start": 351,
+                "end": 351
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "The gradient of selected and hovered items.\n",
+        "commentRange": {
+            "start": 352,
+            "end": 352
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-selected-hover-gradient",
+            "value": "$kendo-selected-gradient",
+            "scope": "default",
+            "line": {
+                "start": 353,
+                "end": 353
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
+        }
+    },
+    {
+        "description": "Text color of disabled items.\n",
+        "commentRange": {
+            "start": 355,
+            "end": 355
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-disabled-text",
+            "value": "#8d8d8d",
+            "scope": "default",
+            "line": {
+                "start": 356,
+                "end": 356
+            }
+        },
+        "access": "public",
+        "group": [
+            "undefined"
+        ],
+        "file": {
+            "path": "core/color-system/_swatch.scss",
+            "name": "_swatch.scss"
         }
     },
     {