@progress/kendo-theme-bootstrap 4.42.0-dev.0 → 4.42.1-dev.2

package/modules/@progress/kendo-theme-default/scss/pivotgrid/_layout.scss

@@ -455,6 +455,27 @@
 }
 
 
+@include exports( "pivotgrid/layout/export" ) {
+
+    .k-pdf-export-shadow {
+
+        .k-pivotgrid {
+            height: auto !important; // sass-lint:disable-line no-important
+        }
+
+        .k-pivotgrid-values  {
+            height: auto;
+            overflow: visible;
+        }
+
+        .k-pivotgrid-column-headers .k-pivotgrid-table {
+            padding-inline-end: 0;
+        }
+
+    }
+}
+
+
 @include exports("pivotgrid/layout/legacy") {
 
     .k-pivot {

package/modules/@progress/kendo-theme-default/scss/popup/_layout.scss

@@ -298,10 +298,6 @@
                 border-width: 1px;
             }
         }
-
-        .k-separator {
-            height: 0;
-        }
     }
 
     .k-virtual-content {

package/modules/@progress/kendo-theme-default/scss/searchbox/_layout.scss

@@ -5,6 +5,7 @@
         @include border-radius( $searchbox-border-radius );
         border-width: 1px;
         border-style: solid;
+        box-sizing: border-box;
         font-family: $searchbox-font-family;
         font-size: $searchbox-font-size;
         line-height: $searchbox-line-height;

package/modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss

@@ -679,10 +679,6 @@
     .k-spreadsheet-popup {
         padding: 0;
 
-        .k-separator {
-            display: block;
-        }
-
         .k-button {
             @include border-radius( 0 );
             border-width: 0;

package/modules/@progress/kendo-theme-default/scss/utils/_border.scss

@@ -93,6 +93,11 @@
                 $_selector-suffix: if( $radius == default, "", "-#{$radius}" );
 
                 .k-#{$_selector-base}#{$_selector-suffix} {
+                    @each $prop in $props {
+                        #{$prop}: $value;
+                    }
+                }
+                .\!k-#{$_selector-base}#{$_selector-suffix} {
                     @each $prop in $props {
                         #{$prop}: $value !important;
                     }

package/modules/@progress/kendo-theme-default/scss/window/_layout.scss

@@ -129,6 +129,7 @@
     }
 
     // Buttons Layout
+    .k-window-buttons,
     .k-window-buttongroup {
         @include border-bottom-radius( $window-border-radius );
         padding: $window-buttongroup-padding-y $window-buttongroup-padding-x;

package/modules/bootstrap/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap",
   "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
-  "version": "5.1.0",
+  "version": "5.1.3",
   "config": {
     "version_short": "5.1"
   },
@@ -58,12 +58,13 @@
     "docs-build": "hugo --cleanDestinationDir",
     "docs-compile": "npm run docs-build",
     "docs-linkinator": "linkinator _site --recurse --skip \"^(?!http://localhost)\" --verbosity error",
+    "docs-spellcheck": "cspell \"site/**/*.md\" --no-progress",
     "docs-vnu": "node build/vnu-jar.js",
-    "docs-lint": "npm-run-all --aggregate-output --parallel docs-vnu docs-linkinator",
+    "docs-lint": "npm-run-all --aggregate-output --parallel docs-vnu docs-linkinator docs-spellcheck",
     "docs-serve": "hugo server --port 9001 --disableFastRender",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,terser && npm update && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher && npm update && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
@@ -97,30 +98,31 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@popperjs/core": "^2.9.3"
+    "@popperjs/core": "^2.10.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.9",
-    "@popperjs/core": "^2.9.3",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@popperjs/core": "^2.10.2",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.3.6",
     "bundlewatch": "^0.3.2",
-    "clean-css-cli": "^5.3.2",
+    "clean-css-cli": "^5.4.1",
     "cross-env": "^7.0.3",
+    "cspell": "^5.12.0",
     "eslint": "^7.32.0",
-    "eslint-config-xo": "^0.37.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-unicorn": "^34.0.1",
+    "eslint-config-xo": "^0.39.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-unicorn": "^36.0.0",
     "find-unused-sass-variables": "^3.1.0",
-    "glob": "^7.1.7",
+    "glob": "^7.2.0",
     "globby": "^11.0.4",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.75.0",
+    "hugo-bin": "^0.76.1",
     "ip": "^1.1.5",
     "jquery": "^3.6.0",
     "karma": "^6.3.4",
@@ -134,19 +136,19 @@
     "karma-rollup-preprocessor": "^7.0.7",
     "linkinator": "^2.14.0",
     "lockfile-lint": "^4.6.2",
-    "nodemon": "^2.0.12",
+    "nodemon": "^2.0.13",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
-    "rollup": "^2.55.1",
+    "postcss": "^8.3.8",
+    "postcss-cli": "^9.0.1",
+    "rollup": "^2.58.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.3.0",
-    "sass": "^1.37.5",
+    "sass": "^1.42.1",
     "shelljs": "^0.8.4",
     "stylelint": "^13.13.1",
-    "stylelint-config-twbs-bootstrap": "^2.2.3",
-    "terser": "5.1.0",
-    "vnu-jar": "21.6.11"
+    "stylelint-config-twbs-bootstrap": "^2.2.4",
+    "terser": "^5.9.0",
+    "vnu-jar": "21.9.2"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
@@ -171,11 +173,11 @@
     },
     "dependencies": {},
     "peerDependencies": {
-      "@popperjs/core": "^2.9.3"
+      "@popperjs/core": "^2.10.2"
     }
   }
 
-,"_resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz"
-,"_integrity": "sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew=="
-,"_from": "bootstrap@5.1.0"
+,"_resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz"
+,"_integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+,"_from": "bootstrap@5.1.3"
 }

package/modules/bootstrap/scss/_functions.scss

@@ -37,11 +37,17 @@
   @return red($value), green($value), blue($value);
 }
 
+// stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
-  @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @if $identifier == "body" and $target == "text" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  }
 }
 
-// stylelint-disable scss/dollar-variable-pattern
 @function map-loop($map, $func, $args...) {
   $_map: ();
 

package/modules/bootstrap/scss/_reboot.scss

@@ -27,7 +27,7 @@
 
 :root {
   @if $font-size-root != null {
-    font-size: var(--#{$variable-prefix}-root-font-size);
+    font-size: var(--#{$variable-prefix}root-font-size);
   }
 
   @if $enable-smooth-scroll {

package/modules/bootstrap/scss/_root.scss

@@ -23,7 +23,8 @@
 
   --#{$variable-prefix}white-rgb: #{to-rgb($white)};
   --#{$variable-prefix}black-rgb: #{to-rgb($black)};
-  --#{$variable-prefix}body-rgb: #{to-rgb($body-color)};
+  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // Fonts
 

package/modules/bootstrap/scss/_tables.scss

@@ -39,8 +39,8 @@
   }
 
   // Highlight border color between thead, tbody and tfoot.
-  > :not(:last-child) > :last-child > * {
-    border-bottom-color: $table-group-separator-color;
+  > :not(:first-child) {
+    border-top: (2 * $table-border-width) solid $table-group-separator-color;
   }
 }
 
@@ -91,6 +91,10 @@
   > :not(caption) > * > * {
     border-bottom-width: 0;
   }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
 }
 
 // Zebra-striping
@@ -98,7 +102,7 @@
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 
 .table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
     color: var(--#{$variable-prefix}table-striped-color);
   }
@@ -118,7 +122,7 @@
 // Placed here since it has to come after the potential zebra striping
 
 .table-hover {
-  > tbody > tr:hover {
+  > tbody > tr:hover > * {
     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
     color: var(--#{$variable-prefix}table-hover-color);
   }

package/modules/bootstrap/scss/_variables.scss

@@ -409,23 +409,33 @@ $body-text-align:           null !default;
 //
 // Extends the default `$theme-colors` maps to help create our utilities.
 
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
 // scss-docs-start utilities-colors
-$utilities-colors: map-merge(
-  $theme-colors-rgb,
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
   (
     "black": to-rgb($black),
     "white": to-rgb($white),
-    "body":  to-rgb($body-color)
+    "body": to-rgb($body-color)
   )
 ) !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !default;
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // Links
@@ -914,7 +924,7 @@ $form-check-inline-margin-end:    1rem !default;
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
-$form-switch-color:               rgba(0, 0, 0, .25) !default;
+$form-switch-color:               rgba($black, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
@@ -962,7 +972,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $border-radius !default;
+$form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          $box-shadow-inset !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
@@ -972,10 +982,12 @@ $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focu
 $form-select-padding-y-sm:        $input-padding-y-sm !default;
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
 $form-select-font-size-sm:        $input-font-size-sm !default;
+$form-select-border-radius-sm:    $input-border-radius-sm !default;
 
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
+$form-select-border-radius-lg:    $input-border-radius-lg !default;
 
 $form-select-transition:          $input-transition !default;
 // scss-docs-end form-select-variables
@@ -1157,7 +1169,7 @@ $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
 $dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($gray-900, 10%) !default;
+$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
 $dropdown-link-hover-bg:            $gray-200 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
@@ -1362,14 +1374,14 @@ $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
 $toast-border-width:                1px !default;
-$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-color:                rgba($black, .1) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;
 
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+$toast-header-border-color:         rgba($black, .05) !default;
 // scss-docs-end toast-variables
 
 

package/modules/bootstrap/scss/bootstrap-grid.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.1.0 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -18,6 +18,8 @@ $include-column-box-sizing: true !default;
 
 @import "vendor/rfs";
 
+@import "root";
+
 @import "containers";
 @import "grid";
 

package/modules/bootstrap/scss/bootstrap-reboot.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.1.0 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -8,8 +8,6 @@
 
 @import "functions";
 @import "variables";
-// Prevent the usage of custom properties since we don't add them to `:root` in reboot
-$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
-$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
 @import "mixins";
+@import "root";
 @import "reboot";

package/modules/bootstrap/scss/bootstrap-utilities.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.1.0 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

package/modules/bootstrap/scss/bootstrap.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.1.0 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

package/modules/bootstrap/scss/forms/_form-select.scss

@@ -60,6 +60,7 @@
   padding-bottom: $form-select-padding-y-sm;
   padding-left: $form-select-padding-x-sm;
   @include font-size($form-select-font-size-sm);
+  @include border-radius($form-select-border-radius-sm);
 }
 
 .form-select-lg {
@@ -67,4 +68,5 @@
   padding-bottom: $form-select-padding-y-lg;
   padding-left: $form-select-padding-x-lg;
   @include font-size($form-select-font-size-lg);
+  @include border-radius($form-select-border-radius-lg);
 }

package/modules/bootstrap/scss/mixins/_grid.scss

@@ -7,9 +7,10 @@
   --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
+  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
+  margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {

package/modules/bootstrap/scss/mixins/_visually-hidden.scss

@@ -3,7 +3,7 @@
 // Hide content visually while keeping it accessible to assistive technologies
 //
 // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
-// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
   position: absolute !important;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "4.42.0-dev.0",
+  "version": "4.42.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.42.0-dev.0",
+    "@progress/kendo-theme-default": "^4.42.1-dev.2",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "cb64d8c6520246fd2807ec4cd455555d5fac8d82"
+  "gitHead": "7594d845144b5289cc2484b488f2bc9418387f12"
 }

package/scss/chat/_variables.scss

@@ -32,12 +32,12 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $chat-padding-x !default;
-$chat-message-box-padding-y: 10px !default;
+$chat-message-box-padding-x: $input-padding-x !default;
+$chat-message-box-padding-y: $input-padding-y !default;
 
-$chat-toolbar-padding-x: $chat-padding-x !default;
-$chat-toolbar-padding-y: 10px !default;
-$chat-toolbar-spacing: 20px !default;
+$chat-toolbar-padding-x: $toolbar-padding-x !default;
+$chat-toolbar-padding-y: $toolbar-padding-y !default;
+$chat-toolbar-spacing: $toolbar-spacing !default;
 $chat-toolbar-bg: $toolbar-bg !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;

package/scss/editor/_variables.scss

@@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
 $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
 $editor-export-tool-icon-margin-x: .25em !default;
+
+$editor-resize-handle-size: 5px !default;
+$editor-resize-handle-border-width: 1px !default;
+$editor-resize-handle-border: #000000 !default;
+$editor-resize-handle-bg: #ffffff !default;
+
+$editor-selectednode-outline-width: 2px !default;
+$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length

package/scss/slider/_theme.scss

@@ -1,14 +1 @@
 @import "../../modules/@progress/kendo-theme-default/scss/slider/_theme.scss";
-
-@include exports("slider/theme/bootstrap") {
-
-    .k-slider {
-
-        .k-button {
-            &:active,
-            &.k-state-active {
-                @include box-shadow( $slider-button-focused-shadow );
-            }
-        }
-    }
-}

package/scss/switch/_layout.scss

@@ -1 +1,12 @@
 @import "../../modules/@progress/kendo-theme-default/scss/switch/_layout.scss";
+
+@include exports( "switch/layout/bootstrap" ) {
+
+    // Switch
+    .k-switch.k-disabled,
+    .k-switch.k-state-disabled {
+        opacity: 1;
+        filter: none;
+    }
+
+}

package/scss/switch/_theme.scss

@@ -2,17 +2,11 @@
 
 @include exports( "switch/theme/bootstrap" ) {
 
-    // Switch
-    .k-switch.k-state-disabled {
-        opacity: 1;
-        filter: none;
-    }
-
     .k-switch-on.k-state-disabled {
 
         // Switch track
         .k-switch-container {
-            background-color: rgba( $switch-on-bg, .5 );
+            background-color: try-tint( $switch-on-bg, 50% );
         }
 
         // Switch thumb

package/scss/utils/_border.scss

@@ -1 +1,11 @@
+$utils-border-radius: (
+    default: map-get( $spacing, 1 ),
+    0: 0,
+    sm: .2rem,
+    md: .25rem,
+    lg: .3rem,
+    circle: 50%,
+    pill: 9999px
+) !default;
+
 @import "../../modules/@progress/kendo-theme-default/scss/utils/_border.scss";