@progress/kendo-theme-classic 7.2.1-dev.7 → 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 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 ))",
+            "value": "0 0 4px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 75%, transparent), rgba( $kendo-button-border, .75 ))",
             "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 ), .16 ), 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, color-mix(in srgb, k-color( on-app-surface ) 16%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
             "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 ), .16 ), 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, color-mix(in srgb, k-color( on-app-surface ) 16%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ))",
             "scope": "default",
             "line": {
                 "start": 155,
@@ -13970,7 +13970,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,
@@ -20770,7 +20770,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": 317,
@@ -21895,7 +21895,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-button-text, .5))",
             "scope": "default",
             "line": {
                 "start": 171,
@@ -21970,7 +21970,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-outline-hover-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 80%, transparent), rgba( $kendo-button-text, .8))",
             "scope": "default",
             "line": {
                 "start": 181,
@@ -24520,7 +24520,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,
@@ -30295,7 +30295,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-outline-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))",
             "scope": "default",
             "line": {
                 "start": 365,
@@ -30645,7 +30645,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-button-text, .04 ))",
             "scope": "default",
             "line": {
                 "start": 412,
@@ -30695,7 +30695,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), rgba( $kendo-button-border, .16 ))",
             "scope": "default",
             "line": {
                 "start": 418,
@@ -35195,7 +35195,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-skeleton-item-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 ))",
             "scope": "default",
             "line": {
                 "start": 20,
@@ -35920,7 +35920,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-draghandle-focus-shadow",
-            "value": "0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( primary, true ), .75 ), rgba( $kendo-slider-draghandle-border, .75 ))",
+            "value": "0 0 4px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 75%, transparent), rgba( $kendo-slider-draghandle-border, .75 ))",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -37498,7 +37498,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,
@@ -37673,7 +37673,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,
@@ -37748,7 +37748,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,
@@ -38748,7 +38748,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": 261,
@@ -39573,7 +39573,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,
@@ -39773,7 +39773,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,
@@ -40173,7 +40173,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,
@@ -40948,7 +40948,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-ring",
-            "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 )",
+            "value": "0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ))",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -41573,7 +41573,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-ring",
-            "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 )",
+            "value": "0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ))",
             "scope": "default",
             "line": {
                 "start": 153,
@@ -42423,7 +42423,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-alt-row-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), k-try-shade( $kendo-table-bg, .5 ))",
             "scope": "default",
             "line": {
                 "start": 114,
@@ -42498,7 +42498,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-try-shade( $kendo-table-bg, 1 ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -42673,7 +42673,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": 150,
@@ -45798,7 +45798,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-arrow-disabled-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( base, 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 ) 60%, transparent), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -45823,7 +45823,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,
@@ -45848,7 +45848,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-arrow-disabled-border",
-            "value": "if($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( #000000, $kendo-body-bg, 4.8% ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 15%, transparent), k-true-mix( #000000, $kendo-body-bg, 4.8% ))",
             "scope": "default",
             "line": {
                 "start": 45,

package/lib/swatches/classic-green-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Green Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/classic-green.json

@@ -3,7 +3,7 @@
     "name": "Classic Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/classic-lavender-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Lavender Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/classic-lavender.json

@@ -3,7 +3,7 @@
     "name": "Classic Lavender",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/classic-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/classic-main.json

@@ -3,7 +3,7 @@
     "name": "Classic Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/classic-metro-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Metro Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/classic-metro.json

@@ -3,7 +3,7 @@
     "name": "Classic Metro",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/classic-moonlight.json

@@ -3,7 +3,7 @@
     "name": "Classic Moonlight",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#1f2a35",

package/lib/swatches/classic-opal-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/classic-opal.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#000000",

package/lib/swatches/classic-silver.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/classic-uniform.json

@@ -3,7 +3,7 @@
     "name": "Classic Uniform",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1-dev.8",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "7.2.1-dev.7",
+  "version": "7.2.1-dev.8",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,13 +53,13 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "7.2.1-dev.7",
-    "@progress/kendo-theme-default": "7.2.1-dev.7",
-    "@progress/kendo-theme-utils": "7.2.1-dev.7"
+    "@progress/kendo-theme-core": "7.2.1-dev.8",
+    "@progress/kendo-theme-default": "7.2.1-dev.8",
+    "@progress/kendo-theme-utils": "7.2.1-dev.8"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "363fde69c7406461ad54feb7725ae2398a4b019b"
+  "gitHead": "2a05ecc1e125b0899a93c9af54574731c8dd75d0"
 }

package/scss/button/_variables.scss

@@ -186,7 +186,7 @@ $kendo-button-focus-border: null !default;
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 )) !default;
+$kendo-button-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 75%, transparent), rgba( $kendo-button-border, .75 )) !default;
 
 /// The base background of the disabled Button.
 /// @group button

package/scss/checkbox/_variables.scss

@@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba( black, .06 ) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox

package/scss/chip/_variables.scss

@@ -115,7 +115,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 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 ) )) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 16%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -152,7 +152,7 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 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 ) )) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 16%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip

package/scss/dataviz/_variables.scss

@@ -100,13 +100,13 @@ $kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$kendo-chart-major-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
+$kendo-chart-major-lines: 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 )) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$kendo-chart-minor-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default;
+$kendo-chart-minor-lines: 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 )) !default;
 
-$kendo-chart-inactive: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-body-text, .5 )) !default;
+$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default;
 $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .1 !default;
@@ -117,20 +117,20 @@ $kendo-chart-bg: $kendo-component-bg !default;
 $kendo-chart-text: $kendo-component-text !default;
 $kendo-chart-border: $kendo-component-border !default;
 
-$kendo-chart-crosshair-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
 $kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg, 1 )) !default;
-$kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08) !default;
+$kendo-chart-crosshair-shared-tooltip-border: 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 )) !default;
 
-$kendo-chart-notes-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
-$kendo-chart-notes-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
-$kendo-chart-notes-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
 
-$kendo-chart-error-bars-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
+$kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
 
 $kendo-chart-selection-handle-size: 22px !default;
-$kendo-chart-selection-border-color: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
-$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .15) !default;
+$kendo-chart-selection-border-color: 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 )) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;
 
 
 // TreeMap

package/scss/dock-manager/_variables.scss

@@ -107,7 +107,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default;
+$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;

package/scss/gantt/_variables.scss

@@ -12,7 +12,7 @@ $kendo-gantt-treelist-bg: null !default;
 $kendo-gantt-treelist-text: null !default;
 $kendo-gantt-treelist-border: null !default;
 
-$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
 $kendo-gantt-nonwork-text: null !default;
 $kendo-gantt-nonwork-border: null !default;
 

package/scss/grid/_variables.scss

@@ -227,7 +227,7 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
 $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -258,12 +258,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
-$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
+$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
 
 // Must be a solid color
 $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-grid-hover-bg) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -314,7 +314,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
 /// Active background color of the grid row resize indicator
 /// @group grid
 $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;