@progress/kendo-theme-bootstrap 5.8.2-dev.4 → 5.8.2-dev.6

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

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

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "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": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "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": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "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": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

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

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "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": "5.8.2-dev.4",
+    "version": "5.8.2-dev.6",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

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

package/lib/swatches/bootstrap-urban.json

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

package/lib/swatches/bootstrap-vintage.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.8.2-dev.4",
+  "version": "5.8.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,11 +43,12 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.8.2-dev.4",
+    "@progress/kendo-theme-core": "^5.8.2-dev.6",
+    "@progress/kendo-theme-default": "^5.8.2-dev.6",
     "bootstrap": "^5.2.1"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "03c192e0d4c7227c7d8f41b7fefee897888e6218"
+  "gitHead": "b1b2e33a3ce1b92bcefae87e8c46cbd797d814d1"
 }

package/scss/_bootstrap-overrides.scss

@@ -21,16 +21,16 @@ $black:    #000000 !default;
 // stylelint-enable scss/dollar-variable-colon-space-after
 
 $body-bg: $white !default;
-$body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
+$body-color: k-contrast-color( $body-bg, $gray-900, $gray-100 ) !default;
 
 $component-bg: $body-bg !default;
-$component-text: contrast-wcag( $component-bg, $gray-900, $gray-100 ) !default;
-$component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default;
+$component-text: k-contrast-color( $component-bg, $gray-900, $gray-100 ) !default;
+$component-border: if( k-is-light( $component-bg ), $gray-300, $gray-700 ) !default;
 
 $input-bg: $component-bg !default;
-$input-color: contrast-wcag( $input-bg, $gray-700, $gray-300 ) !default;
-$input-border-color: contrast-wcag( $input-bg, $gray-400, $gray-600 ) !default;
-$input-placeholder-color: contrast-wcag( $input-bg, $gray-600, $gray-400 ) !default;
+$input-color: k-contrast-color( $input-bg, $gray-700, $gray-300 ) !default;
+$input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default;
+$input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default;
 
 $card-bg: $component-bg !default;
 $card-color: $component-text !default;
@@ -45,7 +45,7 @@ $table-color: $component-text !default;
 $table-border-color: $component-border !default;
 
 $tooltip-bg: if( $dark-theme, $white, $black ) !default;
-$tooltip-color: contrast-wcag( $tooltip-bg ) !default;
+$tooltip-color: k-contrast-color( $tooltip-bg ) !default;
 
 $popover-font-size: $font-size-base !default;
 

package/scss/_variables.scss

@@ -65,7 +65,7 @@ $default-scrollbar-width: 17px !default;
 // Icons
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
-$icon-spacing: map-get( $spacing, 2 ) !default;
+$icon-spacing: k-map-get( $spacing, 2 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL
@@ -75,15 +75,15 @@ $icon-font-url: null !default;
 
 // Metrics
 $padding-x: $spacer !default;
-$padding-y: $spacer / 2 !default;
-$padding-x-sm: $padding-x / 2 !default;
-$padding-y-sm: $padding-y / 2 !default;
+$padding-y: k-math-div( $spacer, 2 ) !default;
+$padding-x-sm: k-math-div( $padding-x, 2 ) !default;
+$padding-y-sm: k-math-div( $padding-y, 2 ) !default;
 $padding-x-lg: $padding-x * 1.5 !default;
 $padding-y-lg: $padding-y * 1.5 !default;
 
 /// Border radius for all components.
 $kendo-border-radius: $border-radius !default;
-$kendo-border-radius-sm: $kendo-border-radius / 2 !default;
+$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: $kendo-border-radius * 1.5 !default;
 
@@ -122,7 +122,7 @@ $accent: $primary !default;
 /// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
 /// @group color-system
 /// @type Color
-$accent-contrast: contrast-wcag( $accent ) !default;
+$accent-contrast: k-contrast-color( $accent ) !default;
 
 
 // Theme colors
@@ -131,68 +131,68 @@ $accent-contrast: contrast-wcag( $accent ) !default;
 /// @group color-system
 /// @type Color
 $primary: $primary !default;
-$primary-lighter: tint( $primary, 2 ) !default;
-$primary-darker: shade( $primary, 2 ) !default;
+$primary-lighter: k-color-tint( $primary, 2 ) !default;
+$primary-darker: k-color-shade( $primary, 2 ) !default;
 
 /// The color used along with the primary color denoted by $primary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$primary-contrast: contrast-wcag( $primary ) !default;
+$primary-contrast: k-contrast-color( $primary ) !default;
 
 /// The secondary color of the theme.
 /// @group color-system
 /// @type Color
 $secondary: $secondary !default;
-$secondary-lighter: tint( $secondary, 2 ) !default;
-$secondary-darker: shade( $secondary, 2 ) !default;
+$secondary-lighter: k-color-tint( $secondary, 2 ) !default;
+$secondary-darker: k-color-shade( $secondary, 2 ) !default;
 
 /// The color used along with the secondary color denoted by $secondary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$secondary-contrast: contrast-wcag( $secondary ) !default;
+$secondary-contrast: k-contrast-color( $secondary ) !default;
 
 /// The tertiary color of the theme.
 /// @group color-system
 /// @type Color
 $tertiary: $purple !default;
-$tertiary-lighter: tint( $tertiary, 2 ) !default;
-$tertiary-darker: shade( $tertiary, 2 ) !default;
+$tertiary-lighter: k-color-tint( $tertiary, 2 ) !default;
+$tertiary-darker: k-color-shade( $tertiary, 2 ) !default;
 
 /// The color used along with the tertiary color denoted by $tertiary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$tertiary-contrast: contrast-wcag( $tertiary ) !default;
+$tertiary-contrast: k-contrast-color( $tertiary ) !default;
 
 /// The color for informational messages and states.
 /// @group color-system
 /// @type Color
 $info: $info !default;
-$info-lighter: tint( $info, 2 ) !default;
-$info-darker: shade( $info, 2 ) !default;
+$info-lighter: k-color-tint( $info, 2 ) !default;
+$info-darker: k-color-shade( $info, 2 ) !default;
 
 /// The color for success messages and states.
 /// @group color-system
 /// @type Color
 $success: $success !default;
-$success-lighter: tint( $success, 2 ) !default;
-$success-darker: shade( $success, 2 ) !default;
+$success-lighter: k-color-tint( $success, 2 ) !default;
+$success-darker: k-color-shade( $success, 2 ) !default;
 
 /// The color for warning messages and states.
 /// @group color-system
 /// @type Color
 $warning: $warning !default;
-$warning-lighter: tint( $warning, 2 ) !default;
-$warning-darker: shade( $warning, 2 ) !default;
+$warning-lighter: k-color-tint( $warning, 2 ) !default;
+$warning-darker: k-color-shade( $warning, 2 ) !default;
 
 /// The color for error messages and states.
 /// @group color-system
 /// @type Color
 $error: $danger !default;
-$error-lighter: tint( $error, 2 ) !default;
-$error-darker: shade( $error, 2 ) !default;
+$error-lighter: k-color-tint( $error, 2 ) !default;
+$error-darker: k-color-shade( $error, 2 ) !default;
 
 /// The dark color of the theme.
 /// @group color-system
@@ -246,9 +246,9 @@ $body-text: $body-color !default;
 $subtle-text: if( $dark-theme, $gray-400, $text-muted ) !default;
 $disabled-text: if( $dark-theme, $gray-600, $gray-500) !default;
 
-$app-bg: try-shade( $body-bg, .25 ) !default;
+$app-bg: k-try-shade( $body-bg, .25 ) !default;
 $app-text: $body-text !default;
-$app-border: contrast-wcag( $app-bg, $gray-300, $gray-700 ) !default;
+$app-border: if( k-is-light( $app-bg ), $gray-300, $gray-700 ) !default;
 
 
 // Components
@@ -265,7 +265,7 @@ $component-text: $body-text !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
 /// @group component
-$component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default;
+$component-border: if( k-is-light( $component-bg ), $gray-300, $gray-700 ) !default;
 
 
 /// The background of the components' chrome area.
@@ -273,7 +273,7 @@ $base-bg: $gray-100 !default;
 /// The text color of the components' chrome area.
 $base-text: $body-text !default;
 /// The border color of the components' chrome area.
-$base-border: try-shade( $base-bg, 1 ) !default;
+$base-border: k-try-shade( $base-bg, 1 ) !default;
 /// The gradient background of the components' chrome area.
 $base-gradient: null !default;
 
@@ -282,20 +282,20 @@ $hovered-bg: $gray-200 !default;
 /// The text color of hovered items.
 $hovered-text: $base-text !default;
 /// The border color of hovered items.
-$hovered-border: try-shade( $hovered-bg, 1 ) !default;
+$hovered-border: k-try-shade( $hovered-bg, 1 ) !default;
 /// The gradient background of hovered items.
 $hovered-gradient: null !default;
 
 /// The background of selected items.
 $selected-bg: $primary !default;
 /// The text color of selected items.
-$selected-text: contrast-wcag( $selected-bg ) !default;
+$selected-text: k-contrast-color( $selected-bg ) !default;
 /// The border color of selected items.
-$selected-border: try-shade( $selected-bg, 1 ) !default;
+$selected-border: k-try-shade( $selected-bg, 1 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: null !default;
 
-$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
+$selected-hover-bg: k-try-shade( $selected-bg, .5 ) !default;
 $selected-hover-text: $selected-text !default;
 $selected-hover-border: $base-border !default;
 $selected-hover-gradient: null !default;
@@ -326,7 +326,7 @@ $equilateral-index: 1.7320508076 !default;
 $equilateral-height: .8660254038 !default;
 
 $drop-hint-arrow-size: 8px !default;
-$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
+$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
 $drop-hint-line-h-width: 20px !default;
 $drop-hint-line-h-height: 1px !default;
 $drop-hint-line-v-width: $drop-hint-line-h-height !default;
@@ -365,7 +365,7 @@ $zindex-loading: 100 !default;
 // Placeholder
 $placeholder-line-width: 100% !default;
 $placeholder-line-height: 10px !default;
-$placeholder-bg: rgba(0, 0, 0, .1) !default;
+$placeholder-bg: rgba( black, .1 ) !default;
 
 
 // Table
@@ -375,7 +375,7 @@ $placeholder-bg: rgba(0, 0, 0, .1) !default;
 $invalid-bg: null !default;
 $invalid-text: $error !default;
 $invalid-border: $error !default;
-$invalid-shadow: 0 0 0 .25rem rgba($invalid-border, .25) !default;
+$invalid-shadow: 0 0 0 .25rem rgba( $invalid-border, .25 ) !default;
 
 
 // Drag clue

package/scss/action-buttons/_variables.scss

@@ -1,9 +1,9 @@
 // Actions
-$actions-margin-top: map-get( $spacing, 4 ) !default;
-$actions-padding-x: map-get( $spacing, 2 ) !default;
-$actions-padding-y: map-get( $spacing, 2 ) !default;
+$actions-margin-top: k-map-get( $spacing, 4 ) !default;
+$actions-padding-x: k-map-get( $spacing, 2 ) !default;
+$actions-padding-y: k-map-get( $spacing, 2 ) !default;
 $actions-border-width: 0px !default;
-$actions-button-spacing: map-get( $spacing, 2 ) !default;
+$actions-button-spacing: k-map-get( $spacing, 2 ) !default;
 
 $actions-bg: null !default;
 $actions-text: null !default;

package/scss/action-sheet/_variables.scss

@@ -3,7 +3,8 @@ $actionsheet-padding-x: null !default;
 $actionsheet-padding-y: null !default;
 $actionsheet-width: 360px !default;
 $actionsheet-max-width: 100% !default;
-$actionsheet-max-height: 50vh !default;
+$actionsheet-height: 60vh !default;
+$actionsheet-max-height: 60vh !default;
 
 $actionsheet-border-width: 0px !default;
 $actionsheet-border-radius: 0px !default;
@@ -15,28 +16,33 @@ $actionsheet-line-height: $line-height !default;
 $actionsheet-bg: $component-bg !default;
 $actionsheet-text: $component-text !default;
 $actionsheet-border: $component-border !default;
-$actionsheet-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) !default;
+$actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( black, .14 ), 0 6px 30px 5px rgba( black, .12 ) !default;
 
 
 // Actionsheet header
-$actionsheet-header-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-header-padding-y: map-get( $spacing, 2 ) !default;
-$actionsheet-header-border-width: null !default;
-$actionsheet-header-font-size: null !default;
-$actionsheet-header-font-family: null !default;
-$actionsheet-header-line-height: null !default;
+$actionsheet-titlebar-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-titlebar-padding-y: k-map-get( $spacing, 2 ) !default;
+$actionsheet-titlebar-border-width: null !default;
+$actionsheet-titlebar-font-size: null !default;
+$actionsheet-titlebar-font-family: null !default;
+$actionsheet-titlebar-line-height: null !default;
+$actionsheet-titlebar-gap: k-map-get( $spacing, 4 ) !default;
 
-$actionsheet-header-bg: null !default;
-$actionsheet-header-text: null !default;
-$actionsheet-header-border: null !default;
-$actionsheet-header-gradient: null !default;
-$actionsheet-header-shadow: null !default;
+$actionsheet-titlebar-bg: null !default;
+$actionsheet-titlebar-text: null !default;
+$actionsheet-titlebar-border: null !default;
+$actionsheet-titlebar-gradient: null !default;
+$actionsheet-titlebar-shadow: null !default;
+
+$actionsheet-subtitle-font-size: $font-size-sm !default;
+$actionsheet-subtitle-line-height: $line-height-sm !default;
+$actionsheet-subtitle-text: $subtle-text !default;
 
 
 // Actionsheet item
 $actionsheet-item-min-height: 40px !default;
-$actionsheet-item-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-item-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-item-padding-y: k-map-get( $spacing, 2 ) !default;
 $actionsheet-item-border-width: 1px !default;
 $actionsheet-item-spacing: 12px !default;
 
@@ -58,10 +64,23 @@ $actionsheet-item-focus-bg: null !default;
 $actionsheet-item-focus-text: null !default;
 $actionsheet-item-focus-border: null !default;
 $actionsheet-item-focus-gradient: null !default;
-$actionsheet-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$actionsheet-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
 
 $actionsheet-item-disabled-bg: null !default;
 $actionsheet-item-disabled-text: null !default;
 $actionsheet-item-disabled-border: null !default;
 $actionsheet-item-disabled-gradient: null !default;
 $actionsheet-item-disabled-shadow: null !default;
+
+
+// Adaptive Actionsheet
+$adaptive-actionsheet-titlebar-border-width: 1px !default;
+$adaptive-actionsheet-titlebar-padding-y: k-map-get( $spacing, 4 ) !default;
+$adaptive-actionsheet-titlebar-padding-x: $adaptive-actionsheet-titlebar-padding-y !default;
+$adaptive-actionsheet-titlebar-border: $component-border !default;
+
+$adaptive-actionsheet-content-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-content-padding-x: k-map-get( $spacing, 4 ) !default;
+
+$adaptive-actionsheet-footer-padding-y: k-map-get( $spacing, 2 ) !default;
+$adaptive-actionsheet-footer-padding-x: k-map-get( $spacing, 4 ) !default;

package/scss/adaptive/_variables.scss

@@ -7,7 +7,7 @@ $adaptive-content-bg: $app-bg !default;
 $adaptive-content-text: $app-text !default;
 
 $adaptive-menu-bg: $primary !default;
-$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;
+$adaptive-menu-text: k-contrast-color( $adaptive-menu-bg ) !default;
 
 $adaptive-menu-clear-text: $primary !default;
 

package/scss/appbar/_variables.scss

@@ -1,8 +1,8 @@
 // Appbar
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 2 ) !default;
+$appbar-padding-y: k-map-get( $spacing, 2 ) !default;
+$appbar-padding-x: k-map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;
@@ -10,13 +10,13 @@ $appbar-zindex: 1000 !default;
 $appbar-font-size: $font-size !default;
 $appbar-line-height: $line-height !default;
 $appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
+$appbar-gap: k-map-get( $spacing, 2 ) !default;
 
 $appbar-light-bg: $light !default;
-$appbar-light-text: contrast-wcag( $light ) !default;
+$appbar-light-text: k-contrast-color( $light ) !default;
 
 $appbar-dark-bg: $dark !default;
-$appbar-dark-text: contrast-wcag( $dark ) !default;
+$appbar-dark-text: k-contrast-color( $dark ) !default;
 
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
-$appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
+$appbar-box-shadow: 0px 1px 1px rgba( black, .16 ) !default;
+$appbar-bottom-box-shadow: 0px -1px 1px rgba( black, .16 ) !default;

package/scss/avatar/_variables.scss

@@ -17,9 +17,9 @@ $kendo-avatar-line-height: $line-height !default;
 /// The sizes of the avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
+    sm: k-map-get( $spacing, 4 ),
+    md: k-map-get( $spacing, 8 ),
+    lg: k-map-get( $spacing, 16 )
 ) !default;
 
 /// Theme colors map of the avatar.

package/scss/badge/_theme.scss

@@ -1,5 +1 @@
 @import "~@progress/kendo-theme-default/scss/badge/_theme.scss";
-
-@include exports("badge/theme/bootstrap") {
-
-}

package/scss/badge/_variables.scss

@@ -12,14 +12,14 @@ $kendo-badge-border-radius: $badge-border-radius !default;
 /// Horizontal padding of the badge.
 /// @group badge
 $kendo-badge-padding-x: $badge-padding-x !default;
-$kendo-badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
+$kendo-badge-padding-x-sm: k-math-div( $badge-padding-x, 2 ) !default;
 $kendo-badge-padding-x-md: $badge-padding-x !default;
 $kendo-badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
 $kendo-badge-padding-y: $badge-padding-y !default;
-$kendo-badge-padding-y-sm: ( $badge-padding-y / 2 )  !default;
+$kendo-badge-padding-y-sm: k-math-div( $badge-padding-y, 2 )  !default;
 $kendo-badge-padding-y-md: $badge-padding-y !default;
 $kendo-badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
 

package/scss/bottom-navigation/_variables.scss

@@ -9,20 +9,20 @@ $bottom-nav-font-size: $font-size !default;
 $bottom-nav-line-height: normal !default;
 $bottom-nav-letter-spacing: .2px !default;
 
-$bottom-nav-item-padding-x: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-padding-x: k-map-get( $spacing, 2 ) !default;
 $bottom-nav-item-padding-y: 0 !default;
 $bottom-nav-item-min-width: 72px !default;
 $bottom-nav-item-max-width: null !default;
-$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{map-get( $spacing, 2 ) * 2} - #{$bottom-nav-padding-x * 2} ) !default;
+$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{k-map-get( $spacing, 2 ) * 2} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: null !default;
-$bottom-nav-item-gap: 0 map-get( $spacing, 1 ) !default;
+$bottom-nav-item-gap: 0 k-map-get( $spacing, 1 ) !default;
 
-$bottom-nav-item-icon-margin-y: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-icon-margin-y: k-map-get( $spacing, 2 ) !default;
 $bottom-nav-item-icon-margin-x: $bottom-nav-item-icon-margin-y !default;
-$bottom-nav-item-icon-size: map-get( $spacing, 6 ) !default;
+$bottom-nav-item-icon-size: k-map-get( $spacing, 6 ) !default;
 $bottom-nav-item-disabled-opacity: .5 !default;
 
-$bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
+$bottom-nav-shadow: 0px 0px 5px rgba( black, .12 ) !default;
 
 $bottom-nav-flat-bg: $component-bg !default;
 $bottom-nav-flat-text: $component-text !default;

package/scss/breadcrumb/_variables.scss

@@ -17,7 +17,7 @@ $breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
 $breadcrumb-delimiter-icon-padding-x: $kendo-button-padding-y !default;
 $breadcrumb-delimiter-icon-padding-y: 0px !default;
 
-$breadcrumb-link-padding-x: $padding-x-lg / 2 !default;
+$breadcrumb-link-padding-x: k-math-div( $padding-x-lg, 2 ) !default;
 $breadcrumb-link-padding-y: $padding-y !default;
 $breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
@@ -55,4 +55,4 @@ $breadcrumb-root-link-focused-text: null !default;
 $breadcrumb-root-link-focused-border: null !default;
 $breadcrumb-root-link-focused-shadow: $breadcrumb-link-focused-shadow !default;
 
-$breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+$breadcrumb-focused-shadow: 0 0 2px 1px rgba( black, .06 ) !default;