@progress/kendo-theme-default 7.2.1-dev.6 → 7.2.1-dev.8

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

@@ -4308,7 +4308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-shadow",
-            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 ))",
+            "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 ))",
             "scope": "default",
             "line": {
                 "start": 189,
@@ -6508,7 +6508,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chart-major-lines",
-            "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 )",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( 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-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 )",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))",
             "scope": "default",
             "line": {
                 "start": 107,
@@ -8608,7 +8608,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-checked-shadow",
-            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))",
+            "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 ))",
             "scope": "default",
             "line": {
                 "start": 110,
@@ -9783,7 +9783,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-solid-shadow",
-            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))",
+            "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))",
             "scope": "default",
             "line": {
                 "start": 118,
@@ -10058,7 +10058,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-chip-outline-shadow",
-            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))",
+            "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))",
             "scope": "default",
             "line": {
                 "start": 155,
@@ -14470,7 +14470,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-dock-manager-dock-preview-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 ))",
             "scope": "default",
             "line": {
                 "start": 110,
@@ -21245,7 +21245,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-row-resizer-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 ))",
             "scope": "default",
             "line": {
                 "start": 310,
@@ -22120,7 +22120,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-focus-shadow",
-            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 ))",
+            "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 ))",
             "scope": "default",
             "line": {
                 "start": 137,
@@ -22370,7 +22370,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5))",
             "scope": "default",
             "line": {
                 "start": 170,
@@ -22445,7 +22445,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8))",
             "scope": "default",
             "line": {
                 "start": 180,
@@ -23311,56 +23311,6 @@
             "name": "_variables.scss"
         }
     },
-    {
-        "description": "The border color of the valid Input components.\n",
-        "commentRange": {
-            "start": 296,
-            "end": 297
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-input-valid-border",
-            "value": "$kendo-valid-border",
-            "scope": "default",
-            "line": {
-                "start": 298,
-                "end": 298
-            }
-        },
-        "group": [
-            "input"
-        ],
-        "access": "public",
-        "file": {
-            "path": "input/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The shadow of the valid Input components.\n",
-        "commentRange": {
-            "start": 299,
-            "end": 300
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-input-valid-shadow",
-            "value": "$kendo-valid-shadow",
-            "scope": "default",
-            "line": {
-                "start": 301,
-                "end": 301
-            }
-        },
-        "group": [
-            "input"
-        ],
-        "access": "public",
-        "file": {
-            "path": "input/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
     {
         "description": "The font family of the List components.\n",
         "commentRange": {
@@ -25095,7 +25045,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-selected-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 44,
@@ -30289,8 +30239,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 303,
-            "end": 304
+            "start": 296,
+            "end": 297
         },
         "context": {
             "type": "variable",
@@ -30298,8 +30248,8 @@
             "value": "$kendo-button-bg",
             "scope": "default",
             "line": {
-                "start": 305,
-                "end": 305
+                "start": 298,
+                "end": 298
             }
         },
         "group": [
@@ -30314,8 +30264,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 299,
+            "end": 300
         },
         "context": {
             "type": "variable",
@@ -30323,8 +30273,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 301,
+                "end": 301
             }
         },
         "group": [
@@ -30339,8 +30289,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 309,
-            "end": 310
+            "start": 302,
+            "end": 303
         },
         "context": {
             "type": "variable",
@@ -30348,8 +30298,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 311,
-                "end": 311
+                "start": 304,
+                "end": 304
             }
         },
         "group": [
@@ -30364,8 +30314,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 312,
-            "end": 313
+            "start": 305,
+            "end": 306
         },
         "context": {
             "type": "variable",
@@ -30373,8 +30323,8 @@
             "value": "$kendo-button-gradient",
             "scope": "default",
             "line": {
-                "start": 314,
-                "end": 314
+                "start": 307,
+                "end": 307
             }
         },
         "group": [
@@ -30389,8 +30339,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 315,
-            "end": 316
+            "start": 308,
+            "end": 309
         },
         "context": {
             "type": "variable",
@@ -30398,8 +30348,8 @@
             "value": "$kendo-button-shadow",
             "scope": "default",
             "line": {
-                "start": 317,
-                "end": 317
+                "start": 310,
+                "end": 310
             }
         },
         "group": [
@@ -30414,8 +30364,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 319,
-            "end": 320
+            "start": 312,
+            "end": 313
         },
         "context": {
             "type": "variable",
@@ -30423,8 +30373,8 @@
             "value": "$kendo-button-hover-bg",
             "scope": "default",
             "line": {
-                "start": 321,
-                "end": 321
+                "start": 314,
+                "end": 314
             }
         },
         "group": [
@@ -30439,8 +30389,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 322,
-            "end": 323
+            "start": 315,
+            "end": 316
         },
         "context": {
             "type": "variable",
@@ -30448,8 +30398,8 @@
             "value": "$kendo-button-hover-text",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 317,
+                "end": 317
             }
         },
         "group": [
@@ -30464,8 +30414,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 325,
-            "end": 326
+            "start": 318,
+            "end": 319
         },
         "context": {
             "type": "variable",
@@ -30473,8 +30423,8 @@
             "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
-                "start": 327,
-                "end": 327
+                "start": 320,
+                "end": 320
             }
         },
         "group": [
@@ -30489,8 +30439,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 328,
-            "end": 329
+            "start": 321,
+            "end": 322
         },
         "context": {
             "type": "variable",
@@ -30498,8 +30448,8 @@
             "value": "$kendo-button-hover-gradient",
             "scope": "default",
             "line": {
-                "start": 330,
-                "end": 330
+                "start": 323,
+                "end": 323
             }
         },
         "group": [
@@ -30514,8 +30464,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 331,
-            "end": 332
+            "start": 324,
+            "end": 325
         },
         "context": {
             "type": "variable",
@@ -30523,8 +30473,8 @@
             "value": "$kendo-button-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 333,
-                "end": 333
+                "start": 326,
+                "end": 326
             }
         },
         "group": [
@@ -30539,8 +30489,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 335,
-            "end": 336
+            "start": 328,
+            "end": 329
         },
         "context": {
             "type": "variable",
@@ -30548,8 +30498,8 @@
             "value": "$kendo-button-focus-bg",
             "scope": "default",
             "line": {
-                "start": 337,
-                "end": 337
+                "start": 330,
+                "end": 330
             }
         },
         "group": [
@@ -30564,8 +30514,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 338,
-            "end": 339
+            "start": 331,
+            "end": 332
         },
         "context": {
             "type": "variable",
@@ -30573,8 +30523,8 @@
             "value": "$kendo-button-focus-text",
             "scope": "default",
             "line": {
-                "start": 340,
-                "end": 340
+                "start": 333,
+                "end": 333
             }
         },
         "group": [
@@ -30589,8 +30539,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 341,
-            "end": 342
+            "start": 334,
+            "end": 335
         },
         "context": {
             "type": "variable",
@@ -30598,8 +30548,8 @@
             "value": "$kendo-button-focus-border",
             "scope": "default",
             "line": {
-                "start": 343,
-                "end": 343
+                "start": 336,
+                "end": 336
             }
         },
         "group": [
@@ -30614,8 +30564,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 344,
-            "end": 345
+            "start": 337,
+            "end": 338
         },
         "context": {
             "type": "variable",
@@ -30623,8 +30573,8 @@
             "value": "$kendo-button-focus-gradient",
             "scope": "default",
             "line": {
-                "start": 346,
-                "end": 346
+                "start": 339,
+                "end": 339
             }
         },
         "group": [
@@ -30639,8 +30589,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 347,
-            "end": 348
+            "start": 340,
+            "end": 341
         },
         "context": {
             "type": "variable",
@@ -30648,8 +30598,8 @@
             "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 349,
-                "end": 349
+                "start": 342,
+                "end": 342
             }
         },
         "group": [
@@ -30664,8 +30614,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 351,
-            "end": 352
+            "start": 344,
+            "end": 345
         },
         "context": {
             "type": "variable",
@@ -30673,8 +30623,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 353,
-                "end": 353
+                "start": 346,
+                "end": 346
             }
         },
         "group": [
@@ -30689,8 +30639,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 354,
-            "end": 355
+            "start": 347,
+            "end": 348
         },
         "context": {
             "type": "variable",
@@ -30698,8 +30648,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 356,
-                "end": 356
+                "start": 349,
+                "end": 349
             }
         },
         "group": [
@@ -30714,8 +30664,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 357,
-            "end": 358
+            "start": 350,
+            "end": 351
         },
         "context": {
             "type": "variable",
@@ -30723,8 +30673,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 359,
-                "end": 359
+                "start": 352,
+                "end": 352
             }
         },
         "group": [
@@ -30739,8 +30689,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 360,
-            "end": 361
+            "start": 353,
+            "end": 354
         },
         "context": {
             "type": "variable",
@@ -30748,8 +30698,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 362,
-                "end": 362
+                "start": 355,
+                "end": 355
             }
         },
         "group": [
@@ -30764,8 +30714,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 363,
-            "end": 364
+            "start": 356,
+            "end": 357
         },
         "context": {
             "type": "variable",
@@ -30773,8 +30723,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 365,
-                "end": 365
+                "start": 358,
+                "end": 358
             }
         },
         "group": [
@@ -30789,8 +30739,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 367,
-            "end": 368
+            "start": 360,
+            "end": 361
         },
         "context": {
             "type": "variable",
@@ -30798,8 +30748,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 369,
-                "end": 369
+                "start": 362,
+                "end": 362
             }
         },
         "group": [
@@ -30814,8 +30764,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 370,
-            "end": 371
+            "start": 363,
+            "end": 364
         },
         "context": {
             "type": "variable",
@@ -30823,8 +30773,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 365,
+                "end": 365
             }
         },
         "group": [
@@ -30839,17 +30789,17 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 373,
-            "end": 374
+            "start": 366,
+            "end": 367
         },
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))",
             "scope": "default",
             "line": {
-                "start": 375,
-                "end": 375
+                "start": 368,
+                "end": 368
             }
         },
         "group": [
@@ -30864,8 +30814,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 377,
-            "end": 378
+            "start": 370,
+            "end": 371
         },
         "context": {
             "type": "variable",
@@ -30873,8 +30823,8 @@
             "value": "$kendo-picker-outline-text",
             "scope": "default",
             "line": {
-                "start": 379,
-                "end": 379
+                "start": 372,
+                "end": 372
             }
         },
         "group": [
@@ -30889,8 +30839,8 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 380,
-            "end": 381
+            "start": 373,
+            "end": 374
         },
         "context": {
             "type": "variable",
@@ -30898,8 +30848,8 @@
             "value": "if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))",
             "scope": "default",
             "line": {
-                "start": 382,
-                "end": 382
+                "start": 375,
+                "end": 375
             }
         },
         "group": [
@@ -30914,8 +30864,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 383,
-            "end": 384
+            "start": 376,
+            "end": 377
         },
         "context": {
             "type": "variable",
@@ -30923,8 +30873,8 @@
             "value": "$kendo-picker-outline-hover-bg",
             "scope": "default",
             "line": {
-                "start": 385,
-                "end": 385
+                "start": 378,
+                "end": 378
             }
         },
         "group": [
@@ -30939,8 +30889,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 387,
-            "end": 388
+            "start": 380,
+            "end": 381
         },
         "context": {
             "type": "variable",
@@ -30948,8 +30898,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 389,
-                "end": 389
+                "start": 382,
+                "end": 382
             }
         },
         "group": [
@@ -30964,8 +30914,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 390,
-            "end": 391
+            "start": 383,
+            "end": 384
         },
         "context": {
             "type": "variable",
@@ -30973,8 +30923,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 392,
-                "end": 392
+                "start": 385,
+                "end": 385
             }
         },
         "group": [
@@ -30989,8 +30939,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 393,
-            "end": 394
+            "start": 386,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -30998,8 +30948,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 395,
-                "end": 395
+                "start": 388,
+                "end": 388
             }
         },
         "group": [
@@ -31014,8 +30964,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 396,
-            "end": 397
+            "start": 389,
+            "end": 390
         },
         "context": {
             "type": "variable",
@@ -31023,8 +30973,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 398,
-                "end": 398
+                "start": 391,
+                "end": 391
             }
         },
         "group": [
@@ -31039,8 +30989,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 400,
-            "end": 401
+            "start": 393,
+            "end": 394
         },
         "context": {
             "type": "variable",
@@ -31048,8 +30998,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 402,
-                "end": 402
+                "start": 395,
+                "end": 395
             }
         },
         "group": [
@@ -31064,8 +31014,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 403,
-            "end": 404
+            "start": 396,
+            "end": 397
         },
         "context": {
             "type": "variable",
@@ -31073,8 +31023,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 405,
-                "end": 405
+                "start": 398,
+                "end": 398
             }
         },
         "group": [
@@ -31089,8 +31039,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 406,
-            "end": 407
+            "start": 399,
+            "end": 400
         },
         "context": {
             "type": "variable",
@@ -31098,8 +31048,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 408,
-                "end": 408
+                "start": 401,
+                "end": 401
             }
         },
         "group": [
@@ -31114,8 +31064,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 410,
-            "end": 411
+            "start": 403,
+            "end": 404
         },
         "context": {
             "type": "variable",
@@ -31123,8 +31073,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 412,
-                "end": 412
+                "start": 405,
+                "end": 405
             }
         },
         "group": [
@@ -31139,8 +31089,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 413,
-            "end": 414
+            "start": 406,
+            "end": 407
         },
         "context": {
             "type": "variable",
@@ -31148,8 +31098,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 415,
-                "end": 415
+                "start": 408,
+                "end": 408
             }
         },
         "group": [
@@ -31164,8 +31114,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 416,
-            "end": 417
+            "start": 409,
+            "end": 410
         },
         "context": {
             "type": "variable",
@@ -31173,8 +31123,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 418,
-                "end": 418
+                "start": 411,
+                "end": 411
             }
         },
         "group": [
@@ -31189,17 +31139,17 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 420,
-            "end": 421
+            "start": 413,
+            "end": 414
         },
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))",
             "scope": "default",
             "line": {
-                "start": 422,
-                "end": 422
+                "start": 415,
+                "end": 415
             }
         },
         "group": [
@@ -31214,8 +31164,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 423,
-            "end": 424
+            "start": 416,
+            "end": 417
         },
         "context": {
             "type": "variable",
@@ -31223,8 +31173,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 425,
-                "end": 425
+                "start": 418,
+                "end": 418
             }
         },
         "group": [
@@ -31239,8 +31189,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 426,
-            "end": 427
+            "start": 419,
+            "end": 420
         },
         "context": {
             "type": "variable",
@@ -31248,8 +31198,8 @@
             "value": "if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))",
             "scope": "default",
             "line": {
-                "start": 428,
-                "end": 428
+                "start": 421,
+                "end": 421
             }
         },
         "group": [
@@ -31264,8 +31214,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 430,
-            "end": 431
+            "start": 423,
+            "end": 424
         },
         "context": {
             "type": "variable",
@@ -31273,8 +31223,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 432,
-                "end": 432
+                "start": 425,
+                "end": 425
             }
         },
         "group": [
@@ -31289,8 +31239,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 433,
-            "end": 434
+            "start": 426,
+            "end": 427
         },
         "context": {
             "type": "variable",
@@ -31298,8 +31248,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 435,
-                "end": 435
+                "start": 428,
+                "end": 428
             }
         },
         "group": [
@@ -31314,8 +31264,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 436,
-            "end": 437
+            "start": 429,
+            "end": 430
         },
         "context": {
             "type": "variable",
@@ -31323,8 +31273,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 438,
-                "end": 438
+                "start": 431,
+                "end": 431
             }
         },
         "group": [
@@ -31339,8 +31289,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 439,
-            "end": 440
+            "start": 432,
+            "end": 433
         },
         "context": {
             "type": "variable",
@@ -31348,8 +31298,8 @@
             "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 441,
-                "end": 441
+                "start": 434,
+                "end": 434
             }
         },
         "group": [
@@ -31364,8 +31314,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 443,
-            "end": 444
+            "start": 436,
+            "end": 437
         },
         "context": {
             "type": "variable",
@@ -31373,8 +31323,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 445,
-                "end": 445
+                "start": 438,
+                "end": 438
             }
         },
         "group": [
@@ -31389,8 +31339,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 446,
-            "end": 447
+            "start": 439,
+            "end": 440
         },
         "context": {
             "type": "variable",
@@ -31398,8 +31348,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 448,
-                "end": 448
+                "start": 441,
+                "end": 441
             }
         },
         "group": [
@@ -31414,8 +31364,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 449,
-            "end": 450
+            "start": 442,
+            "end": 443
         },
         "context": {
             "type": "variable",
@@ -31423,8 +31373,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 451,
-                "end": 451
+                "start": 444,
+                "end": 444
             }
         },
         "group": [
@@ -36445,7 +36395,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-draghandle-focus-shadow",
-            "value": "0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary , .3 ))",
+            "value": "0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 ))",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -38023,7 +37973,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-selection-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 97,
@@ -38198,7 +38148,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-partial-selection-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 120,
@@ -38273,7 +38223,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-auto-fill-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 131,
@@ -39273,7 +39223,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-spreadsheet-drawing-anchor-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 259,
@@ -40098,7 +40048,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-disabled-text",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text)",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -40298,7 +40248,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-done-disabled-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%))",
             "scope": "default",
             "line": {
                 "start": 133,
@@ -40698,7 +40648,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-label-disabled-text",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text)",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text)",
             "scope": "default",
             "line": {
                 "start": 185,
@@ -41473,7 +41423,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-ring",
-            "value": "2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))",
+            "value": "2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ))",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -42098,7 +42048,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-ring",
-            "value": "2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))",
+            "value": "2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 ))",
             "scope": "default",
             "line": {
                 "start": 153,
@@ -42948,7 +42898,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-alt-row-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))",
             "scope": "default",
             "line": {
                 "start": 113,
@@ -43023,7 +42973,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%))",
             "scope": "default",
             "line": {
                 "start": 124,
@@ -43198,7 +43148,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-selected-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))",
             "scope": "default",
             "line": {
                 "start": 149,
@@ -46323,7 +46273,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-arrow-disabled-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .6 ), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -46348,7 +46298,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-arrow-disabled-text",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%))",
             "scope": "default",
             "line": {
                 "start": 42,