@progress/kendo-theme-bootstrap 10.1.0-dev.1 → 10.1.0-dev.3

package/dist/meta/variables.json

@@ -1252,28 +1252,28 @@
         "value": "1rem"
     },
     "kendo-h1-font-family": {
-        "type": "Null",
-        "value": "null"
+        "type": "String",
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-h2-font-family": {
-        "type": "Null",
-        "value": "null"
+        "type": "String",
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-h3-font-family": {
-        "type": "Null",
-        "value": "null"
+        "type": "String",
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-h4-font-family": {
-        "type": "Null",
-        "value": "null"
+        "type": "String",
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-h5-font-family": {
-        "type": "Null",
-        "value": "null"
+        "type": "String",
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-h6-font-family": {
-        "type": "Null",
-        "value": "null"
+        "type": "String",
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-h1-line-height": {
         "type": "Number",
@@ -1373,11 +1373,11 @@
     },
     "kendo-headings": {
         "type": "Map",
-        "value": "(h1: (font-size: 2.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h2: (font-size: 2rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h3: (font-size: 1.75rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h4: (font-size: 1.5rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h5: (font-size: 1.25rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h6: (font-size: 1rem, font-family: null, line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)))",
+        "value": "(h1: (font-size: 2.5rem, font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h2: (font-size: 2rem, font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h3: (font-size: 1.75rem, font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h4: (font-size: 1.5rem, font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h5: (font-size: 1.25rem, font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)), h6: (font-size: 1rem, font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 500, letter-spacing: null, margin: 0 0 var(--kendo-spacing-2, 0.5rem)))",
         "prettyValue": {
             "h1": {
                 "font-size": "2.5rem",
-                "font-family": null,
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 500,
                 "letter-spacing": null,
@@ -1385,7 +1385,7 @@
             },
             "h2": {
                 "font-size": "2rem",
-                "font-family": null,
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 500,
                 "letter-spacing": null,
@@ -1393,7 +1393,7 @@
             },
             "h3": {
                 "font-size": "1.75rem",
-                "font-family": null,
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 500,
                 "letter-spacing": null,
@@ -1401,7 +1401,7 @@
             },
             "h4": {
                 "font-size": "1.5rem",
-                "font-family": null,
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 500,
                 "letter-spacing": null,
@@ -1409,7 +1409,7 @@
             },
             "h5": {
                 "font-size": "1.25rem",
-                "font-family": null,
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 500,
                 "letter-spacing": null,
@@ -1417,7 +1417,7 @@
             },
             "h6": {
                 "font-size": "1rem",
-                "font-family": null,
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 500,
                 "letter-spacing": null,
@@ -1519,19 +1519,19 @@
     },
     "kendo-display1-font-family": {
         "type": "String",
-        "value": "unset"
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-display2-font-family": {
         "type": "String",
-        "value": "unset"
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-display3-font-family": {
         "type": "String",
-        "value": "unset"
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-display4-font-family": {
         "type": "String",
-        "value": "unset"
+        "value": "var(--kendo-font-family, inherit)"
     },
     "kendo-display1-line-height": {
         "type": "Number",
@@ -1583,32 +1583,32 @@
     },
     "kendo-display": {
         "type": "Map",
-        "value": "(1: (font-size: calc(1rem * 5), font-family: unset, line-height: 1.2, font-weight: 300, letter-spacing: null), 2: (font-size: calc(1rem * 4.5), font-family: unset, line-height: 1.2, font-weight: 300, letter-spacing: null), 3: (font-size: calc(1rem * 4), font-family: unset, line-height: 1.2, font-weight: 300, letter-spacing: null), 4: (font-size: calc(1rem * 3.5), font-family: unset, line-height: 1.2, font-weight: 300, letter-spacing: null))",
+        "value": "(1: (font-size: calc(1rem * 5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 300, letter-spacing: null), 2: (font-size: calc(1rem * 4.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 300, letter-spacing: null), 3: (font-size: calc(1rem * 4), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 300, letter-spacing: null), 4: (font-size: calc(1rem * 3.5), font-family: var(--kendo-font-family, inherit), line-height: 1.2, font-weight: 300, letter-spacing: null))",
         "prettyValue": {
             "1": {
                 "font-size": "calc(1rem * 5)",
-                "font-family": "unset",
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 300,
                 "letter-spacing": null
             },
             "2": {
                 "font-size": "calc(1rem * 4.5)",
-                "font-family": "unset",
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 300,
                 "letter-spacing": null
             },
             "3": {
                 "font-size": "calc(1rem * 4)",
-                "font-family": "unset",
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 300,
                 "letter-spacing": null
             },
             "4": {
                 "font-size": "calc(1rem * 3.5)",
-                "font-family": "unset",
+                "font-family": "var(--kendo-font-family, inherit)",
                 "line-height": 1.2,
                 "font-weight": 300,
                 "letter-spacing": null

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

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

package/lib/swatches/bootstrap-3.json

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

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

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

package/lib/swatches/bootstrap-4.json

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

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "10.1.0-dev.1",
+    "version": "10.1.0-dev.3",
     "api": "modern",
     "previewColors": [
         "#0275d8",

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

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

package/lib/swatches/bootstrap-main.json

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

package/lib/swatches/bootstrap-nordic.json

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

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "10.1.0-dev.1",
+    "version": "10.1.0-dev.3",
     "api": "modern",
     "previewColors": [
         "#000000",

package/lib/swatches/bootstrap-turquoise.json

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

package/lib/swatches/bootstrap-urban.json

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

package/lib/swatches/bootstrap-vintage.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "10.1.0-dev.1",
+  "version": "10.1.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,13 +52,13 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.0-dev.1",
-    "@progress/kendo-theme-default": "10.1.0-dev.1",
-    "@progress/kendo-theme-utils": "10.1.0-dev.1"
+    "@progress/kendo-theme-core": "10.1.0-dev.3",
+    "@progress/kendo-theme-default": "10.1.0-dev.3",
+    "@progress/kendo-theme-utils": "10.1.0-dev.3"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "f2470e15cb389e8c8e4be7f159b3474da5ffdc07"
+  "gitHead": "a33add5dbf946b4fbaa83b9b2016ed1836a9fa0e"
 }

package/scss/dataviz/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
 
@@ -6,50 +7,50 @@
 /// The first base series color and its light and dark shades.
 /// @group charts
 $kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $kendo-color-primary) !default;
-$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix( black, $kendo-series-a, 25% )) !default;
-$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix( black, $kendo-series-a, 50% )) !default;
-$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix( white, $kendo-series-a, 25% )) !default;
-$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix( white, $kendo-series-a, 50% )) !default;
+$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix( black, $kendo-series-a, 25% )) !default;
+$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix( black, $kendo-series-a, 50% )) !default;
+$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix( white, $kendo-series-a, 25% )) !default;
+$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix( white, $kendo-series-a, 50% )) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
 $kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $kendo-color-tertiary) !default;
-$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix( black, $kendo-series-b, 25% )) !default;
-$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix( black, $kendo-series-b, 50% )) !default;
-$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix( white, $kendo-series-b, 25% )) !default;
-$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix( white, $kendo-series-b, 50% )) !default;
+$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix( black, $kendo-series-b, 25% )) !default;
+$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix( black, $kendo-series-b, 50% )) !default;
+$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix( white, $kendo-series-b, 25% )) !default;
+$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix( white, $kendo-series-b, 50% )) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
 $kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #20c997) !default;
-$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix( black, $kendo-series-c, 25% )) !default;
-$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix( black, $kendo-series-c, 50% )) !default;
-$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix( white, $kendo-series-c, 25% )) !default;
-$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix( white, $kendo-series-c, 50% )) !default;
+$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix( black, $kendo-series-c, 25% )) !default;
+$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix( black, $kendo-series-c, 50% )) !default;
+$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix( white, $kendo-series-c, 25% )) !default;
+$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix( white, $kendo-series-c, 50% )) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $kendo-color-success) !default;
-$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix( black, $kendo-series-d, 25% )) !default;
-$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix( black, $kendo-series-d, 50% )) !default;
-$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix( white, $kendo-series-d, 25% )) !default;
-$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix( white, $kendo-series-d, 50% )) !default;
+$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix( black, $kendo-series-d, 25% )) !default;
+$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix( black, $kendo-series-d, 50% )) !default;
+$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix( white, $kendo-series-d, 25% )) !default;
+$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix( white, $kendo-series-d, 50% )) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $kendo-color-warning) !default;
-$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix( black, $kendo-series-e, 25% )) !default;
-$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix( black, $kendo-series-e, 50% )) !default;
-$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix( white, $kendo-series-e, 25% )) !default;
-$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix( white, $kendo-series-e, 50% )) !default;
+$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix( black, $kendo-series-e, 25% )) !default;
+$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix( black, $kendo-series-e, 50% )) !default;
+$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix( white, $kendo-series-e, 25% )) !default;
+$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix( white, $kendo-series-e, 50% )) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $kendo-color-error) !default;
-$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix( black, $kendo-series-f, 25% )) !default;
-$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix( black, $kendo-series-f, 50% )) !default;
-$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix( white, $kendo-series-f, 25% )) !default;
-$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix( white, $kendo-series-f, 50% )) !default;
+$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix( black, $kendo-series-f, 25% )) !default;
+$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix( black, $kendo-series-f, 50% )) !default;
+$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix( white, $kendo-series-f, 25% )) !default;
+$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix( white, $kendo-series-f, 50% )) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker

package/scss/editor/_variables.scss

@@ -1,4 +1,4 @@
-// @use "sass:map";
+@use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../core/functions/index.import.scss" as *;
@@ -34,7 +34,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) !default;
+$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor

package/scss/gantt/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
@@ -53,7 +54,7 @@ $kendo-gantt-nonwork-border: null !default;
 $kendo-gantt-line-size: 2px !default;
 /// The background fill color of the Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
 /// The background fill of the selected Gantt connecting lines.
 /// @group gantt
 $kendo-gantt-line-selected-fill: $kendo-selected-bg !default;
@@ -92,13 +93,13 @@ $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
 $kendo-gantt-summary-progress-bg: $kendo-gantt-text !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
 /// The background color of the selected Gantt summary progress.
 /// @group gantt
 $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
@@ -126,7 +127,7 @@ $kendo-gantt-task-border: if($kendo-enable-color-system, k-color( border-alt ),
 $kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), #ced4da, #6c757d )) !default;
 /// The background color of selected the Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;

package/scss/grid/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../table/_variables.scss" as *;
@@ -263,7 +264,7 @@ $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-sticky-footer-bg !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, $kendo-grid-bg, 25% )) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), color.mix( $kendo-selected-bg, $kendo-grid-bg, 25% )) !default;
 $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade( $kendo-grid-sticky-selected-bg, .4 )) !default;
 
 // Must be a solid color

package/scss/gridlayout/_index.scss

@@ -0,0 +1,19 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-grid-layout--styles() {
+    @include import-once( "grid-layout" ) {
+        @include core-styles();
+        @include kendo-grid-layout--layout();
+        @include kendo-grid-layout--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-items();
+    }
+}

package/scss/gridlayout/_layout.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-default/scss/gridlayout/_layout.scss" as *;
+
+@mixin kendo-grid-layout--layout() {
+    @include kendo-grid-layout--layout-base();
+}

package/scss/gridlayout/_theme.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-default/scss/gridlayout/_theme.scss" as *;
+
+@mixin kendo-grid-layout--theme() {
+    @include kendo-grid-layout--theme-base();
+}

package/scss/gridlayout/_variables.scss

@@ -0,0 +1 @@
+// GridLayout