@progress/kendo-theme-bootstrap 7.2.1-dev.7 → 7.2.1

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

@@ -2758,7 +2758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-breadcrumb-link-focus-shadow",
-            "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 ))",
+            "value": "inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( $kendo-breadcrumb-text, .25 ))",
             "scope": "default",
             "line": {
                 "start": 159,
@@ -4308,7 +4308,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-focus-shadow",
-            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 ))",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 50%, transparent), rgba( $kendo-button-border, .5 ))",
             "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,
@@ -8558,7 +8558,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-focus-shadow",
-            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 104,
@@ -13520,7 +13520,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,
@@ -16670,7 +16670,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-filter-toolbar-focus-shadow",
-            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 30,
@@ -20320,7 +20320,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": 311,
@@ -21445,7 +21445,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-base-text, .5 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-base-text, .5 ))",
             "scope": "default",
             "line": {
                 "start": 170,
@@ -23170,7 +23170,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-list-item-focus-shadow",
-            "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 ))",
+            "value": "inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-list-text, .15 ))",
             "scope": "default",
             "line": {
                 "start": 223,
@@ -24070,7 +24070,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,
@@ -24195,7 +24195,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-listview-item-focus-shadow",
-            "value": "inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 ))",
+            "value": "inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-listview-text, .15 ))",
             "scope": "default",
             "line": {
                 "start": 60,
@@ -28295,7 +28295,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-pager-item-focus-shadow",
-            "value": "0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25))",
+            "value": "0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-color-primary, .25))",
             "scope": "default",
             "line": {
                 "start": 126,
@@ -29845,7 +29845,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": 361,
@@ -30195,7 +30195,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-picker-flat-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 ))",
             "scope": "default",
             "line": {
                 "start": 408,
@@ -34745,7 +34745,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,
@@ -35470,7 +35470,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-slider-draghandle-focus-shadow",
-            "value": "0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 ))",
+            "value": "0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), rgba( $kendo-color-primary, .5 ))",
             "scope": "default",
             "line": {
                 "start": 96,
@@ -37048,7 +37048,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,
@@ -37223,7 +37223,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,
@@ -37298,7 +37298,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,
@@ -38298,7 +38298,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,
@@ -39123,7 +39123,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-indicator-disabled-text",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 65%, transparent), $kendo-disabled-text)",
             "scope": "default",
             "line": {
                 "start": 106,
@@ -39323,7 +39323,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,
@@ -39723,7 +39723,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-stepper-label-disabled-text",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .65 ), $kendo-disabled-text)",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 65%, transparent), $kendo-disabled-text)",
             "scope": "default",
             "line": {
                 "start": 185,
@@ -40498,7 +40498,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-off-track-focus-ring",
-            "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
+            "value": ".25rem solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 71,
@@ -41123,7 +41123,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-switch-on-track-focus-ring",
-            "value": ".25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 ))",
+            "value": ".25rem 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,
@@ -41973,7 +41973,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-color( $kendo-table-bg ), .04 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .04 ))",
             "scope": "default",
             "line": {
                 "start": 114,
@@ -42048,7 +42048,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-table-hover-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .08 ))",
             "scope": "default",
             "line": {
                 "start": 125,
@@ -42223,7 +42223,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,
@@ -44798,7 +44798,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-taskboard-drag-placeholder-bg",
-            "value": "rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .1 )",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 10%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .1 ))",
             "scope": "default",
             "line": {
                 "start": 242,
@@ -45348,7 +45348,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-arrow-disabled-bg",
-            "value": "if($kendo-enable-color-system, rgba( k-color( base-subtle, true ), .65 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 65%, transparent), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ))",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -45373,7 +45373,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-timeline-track-arrow-disabled-text",
-            "value": "if($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ))",
             "scope": "default",
             "line": {
                 "start": 42,
@@ -45398,7 +45398,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( $kendo-button-border, $kendo-body-bg, 65% ))",
+            "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 15%, transparent), k-true-mix( $kendo-button-border, $kendo-body-bg, 65% ))",
             "scope": "default",
             "line": {
                 "start": 45,
@@ -46948,7 +46948,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-item-shadow",
-            "value": "0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))",
+            "value": "0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 ))",
             "scope": "default",
             "line": {
                 "start": 85,
@@ -48373,7 +48373,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-treeview-item-focus-shadow",
-            "value": "inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 ))",
+            "value": "inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-treeview-text, .15 ))",
             "scope": "default",
             "line": {
                 "start": 154,

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "7.2.1-dev.7",
+    "version": "7.2.1",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "7.2.1-dev.7",
+  "version": "7.2.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,14 +53,14 @@
   },
   "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",
+    "@progress/kendo-theme-default": "7.2.1",
+    "@progress/kendo-theme-utils": "7.2.1",
     "bootstrap": "5.2.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "363fde69c7406461ad54feb7725ae2398a4b019b"
+  "gitHead": "d84d6dd15dc96b01d20ce0a202650d237e5c200c"
 }

package/scss/breadcrumb/_variables.scss

@@ -156,7 +156,7 @@ $kendo-breadcrumb-link-focus-text: null !default;
 $kendo-breadcrumb-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 )) !default;
+$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( $kendo-breadcrumb-text, .25 )) !default;
 
 /// The background color of the Breadcrumb root link.
 /// @group breadcrumb

package/scss/button/_variables.scss

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

package/scss/calendar/_variables.scss

@@ -85,7 +85,7 @@ $kendo-calendar-cell-selected-hover-border: $kendo-selected-hover-border !defaul
 $kendo-calendar-cell-selected-hover-gradient: null !default;
 
 $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
-$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary-active, true ), .5 ), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
+$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary-active ) 50%, transparent), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
 
 
 // Calendar navigation

package/scss/checkbox/_variables.scss

@@ -101,7 +101,7 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 $kendo-checkbox-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) !default;
 /// The box shadow of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
 /// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;

package/scss/core/color-system/_swatch-legacy.scss

@@ -49,7 +49,7 @@
     $kendo-invalid-bg: null;
     $kendo-invalid-text: $kendo-color-error;
     $kendo-invalid-border: $kendo-color-error;
-    $kendo-invalid-shadow: 0 0 0 .25rem rgba( k-color( error, true ), .25 );
+    $kendo-invalid-shadow: 0 0 0 .25rem color-mix(in srgb, k-color( error ) 25%, transparent);
 
     $kendo-theme-colors: (
         "primary": $kendo-color-primary,

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: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $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: .3 !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-subtle ), 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-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/fab/_theme.scss

@@ -29,7 +29,7 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:focus,
         .k-fab-solid-#{$name}.k-focus {
-            outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, rgba( k-color( $name, true ), .5 ), rgba( $color, .5 ));
+            outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 50%, transparent), rgba( $color, .5 ));
         }
     }
 
@@ -50,8 +50,8 @@
         .k-fab-solid-#{$name}:disabled,
         .k-fab-solid-#{$name}.k-disabled {
             @include box-shadow( $kendo-fab-disabled-shadow );
-            background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .65 ), k-try-tint( $color, 4.5 ));
-            color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-try-tint( k-contrast-color( $color ), 5 ));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 65%, transparent), k-try-tint( $color, 4.5 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-try-tint( k-contrast-color( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -92,7 +92,7 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, rgba( k-color( base, true ), .5 ), rgba( $kendo-fab-item-icon-border, .5 ));
+        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 50%, transparent), rgba( $kendo-fab-item-icon-border, .5 ));
     }
 
     // Active state
@@ -114,8 +114,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow( $kendo-fab-item-disabled-shadow );
-            background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .65 ), k-try-tint( $kendo-fab-item-bg, 8 ));
-            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-try-tint( $kendo-fab-item-text, 8 ));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 65%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
         }
     }
 

package/scss/filter/_variables.scss

@@ -27,4 +27,4 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;