@progress/kendo-theme-bootstrap 5.0.0 → 5.1.1

package/dist/all.css

@@ -11663,6 +11663,8 @@ kendo-badge-container {
     box-sizing: border-box;
     border-width: 1px;
     border-style: solid;
+    color: inherit;
+    background: none;
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     text-align: center;
     text-decoration: none;
@@ -11904,12 +11906,11 @@ kendo-badge-container {
     text-decoration: underline;
 }
 
-.k-button-clear::before {
-    display: none;
-}
-
-.k-button-clear:focus::before, .k-button-clear.k-focus::before {
-    display: block;
+.k-button-clear {
+    border-color: transparent !important;
+    color: inherit;
+    background: none !important;
+    box-shadow: none !important;
 }
 
 .k-ie .k-button-group .k-button,
@@ -12827,46 +12828,112 @@ kendo-badge-container {
     color: #0d6efd;
 }
 
+.k-button-clear-primary:focus::after, .k-button-clear-primary.k-focus::after, .k-button-clear-primary:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-secondary {
     color: #6c757d;
 }
 
+.k-button-clear-secondary:focus::after, .k-button-clear-secondary.k-focus::after, .k-button-clear-secondary:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-tertiary {
     color: #6f42c1;
 }
 
+.k-button-clear-tertiary:focus::after, .k-button-clear-tertiary.k-focus::after, .k-button-clear-tertiary:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-info {
     color: #0dcaf0;
 }
 
+.k-button-clear-info:focus::after, .k-button-clear-info.k-focus::after, .k-button-clear-info:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-success {
     color: #198754;
 }
 
+.k-button-clear-success:focus::after, .k-button-clear-success.k-focus::after, .k-button-clear-success:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-warning {
     color: #ffc107;
 }
 
+.k-button-clear-warning:focus::after, .k-button-clear-warning.k-focus::after, .k-button-clear-warning:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-error {
     color: #dc3545;
 }
 
+.k-button-clear-error:focus::after, .k-button-clear-error.k-focus::after, .k-button-clear-error:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-dark {
     color: #212529;
 }
 
+.k-button-clear-dark:focus::after, .k-button-clear-dark.k-focus::after, .k-button-clear-dark:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-light {
     color: #f8f9fa;
 }
 
+.k-button-clear-light:focus::after, .k-button-clear-light.k-focus::after, .k-button-clear-light:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-inverse {
     color: #212529;
 }
 
+.k-button-clear-inverse:focus::after, .k-button-clear-inverse.k-focus::after, .k-button-clear-inverse:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-button-clear-base {
     color: #212529;
 }
 
+.k-button-clear-base:focus::after, .k-button-clear-base.k-focus::after, .k-button-clear-base:active::after {
+    background-color: currentColor;
+    opacity: 0.1;
+    display: block;
+}
+
 .k-split-button:focus,
 .k-split-button.k-focus {
     box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
@@ -15904,7 +15971,8 @@ kendo-label > .k-label {
 }
 
 .k-form .k-multiselect,
-.k-form .k-floating-label-container {
+.k-form .k-floating-label-container,
+.k-form .k-daterangepicker .k-dateinput {
     display: inline-flex;
     width: 100%;
 }
@@ -18852,6 +18920,10 @@ kendo-label > .k-label {
     box-sizing: border-box;
 }
 
+.k-daterange-picker .k-dateinput, .k-daterangepicker .k-dateinput {
+    width: 10em;
+}
+
 .k-daterangepicker-wrap {
     display: inherit;
     flex-flow: inherit;
@@ -24025,13 +24097,13 @@ kendo-card-footer {
     color: #0a58ca;
 }
 
-.k-tabstrip-items-wrapper .k-item.k-state-active, .k-tabstrip-items-wrapper .k-item.k-state-selected {
+.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-state-active, .k-tabstrip-items-wrapper .k-item.k-state-selected {
     border-color: #dee2e6;
     color: #212529;
     background-color: #ffffff;
 }
 
-.k-tabstrip-items-wrapper .k-item.k-state-focused {
+.k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-state-focused {
     box-shadow: inset 0 0 0 3px rgba(33, 37, 41, 0.15);
 }
 
@@ -24391,7 +24463,6 @@ kendo-card-footer {
     padding-left: 6rem;
 }
 
-.k-panelbar .k-content,
 .k-panelbar .k-panelbar-content {
     display: flow-root;
 }

package/dist/all.scss

@@ -951,46 +951,8 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000000 !default;
-
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$tertiary:      $purple !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
-
-$error: $danger !default;
-$inverse: if( $dark-theme, $light, $dark ) !default;
 // stylelint-enable scss/dollar-variable-colon-space-after
 
-
-$theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "tertiary": $tertiary,
-    "info": $info,
-    "success": $success,
-    "warning": $warning,
-    "error": $error,
-    "dark": $dark,
-    "light": $light,
-    "inverse": $inverse
-) !default;
-
 $body-bg: $white !default;
 $body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
 
@@ -3180,12 +3142,12 @@ $dark: $dark !default;
 /// @type Color
 $light: $light !default;
 
-/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -3231,7 +3193,7 @@ $app-border: contrast-wcag( $app-bg, $gray-300, $gray-700 ) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.
@@ -5401,7 +5363,7 @@ $utils-border-radius: (
         0: 0
     ) !default;
 
-    $utils-border-color: $theme-colors !default;
+    $utils-border-color: $kendo-theme-colors !default;
 
     $utils-border-radius-sides: (
         default: border-radius,
@@ -6499,7 +6461,7 @@ $utils-border-radius: (
 
     .k-color-inherit { color: inherit; }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
             color: $color !important;
@@ -6513,7 +6475,7 @@ $utils-border-radius: (
 
     // sass-lint:disable-block no-important
 
-    @each $name, $bg-color in $theme-colors {
+    @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
             background-color: $bg-color !important;
         }
@@ -6530,7 +6492,7 @@ $utils-border-radius: (
 
 @include exports( "common/decoration/variant" ) {
 
-    @each $name, $variant in $theme-colors {
+    @each $name, $variant in $kendo-theme-colors {
         .k-state-#{$name} {
             @include variant( $variant );
         }
@@ -8042,7 +8004,7 @@ $message-box-link-text-decoration: underline !default;
 // #region @import "~@progress/kendo-theme-default/scss/messagebox/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/messagebox/_theme.scss
 @include exports("messagebox/theme") {
 
-    @each $color-name, $color in $theme-colors {
+    @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
             @include fill(
                 color-level( $color, $message-box-text-level ),
@@ -9453,7 +9415,7 @@ $listgroup-item-border-width: $listgroup-border-width !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/bootstrap/scss/overlay/_variables.scss
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;
@@ -10005,7 +9967,7 @@ $badge-dot-size-lg: 12px !default;
 @include exports( "badge/theme" ) {
 
     // Solid badges
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-solid.k-badge-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
@@ -10019,7 +9981,7 @@ $badge-dot-size-lg: 12px !default;
         background-color: $component-bg;
     }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-outline.k-badge-#{$name} {
             color: $color;
         }
@@ -10107,7 +10069,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": #e4e7eb )
 ) !default;
 
@@ -10236,6 +10198,9 @@ $kendo-link-button-shadow-blur: 0px !default;
 $kendo-link-button-shadow-spread: .25rem !default;
 $kendo-link-button-shadow-opacity: .5 !default;
 
+// Clear button
+$kendo-clear-button-focus-opacity: .1 !default;
+
 /// The overlay opacity of hovered flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-hover-opacity: .08 !default;
@@ -10263,6 +10228,8 @@ $kendo-button-transition: $transition !default;
         box-sizing: border-box;
         border-width: $kendo-button-border-width;
         border-style: solid;
+        color: inherit;
+        background: none;
         font-family: $kendo-button-font-family;
         text-align: center;
         text-decoration: none;
@@ -10527,20 +10494,14 @@ $kendo-button-transition: $transition !default;
 
     // Clear button
     .k-button-clear {
-        &::before {
-            display: none;
-        }
-
-
-        &:focus,
-        &.k-focus {
-            &::before {
-                display: block;
-            }
-        }
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        color: inherit;
+        background: none !important; // sass-lint:disable-line no-important
+        box-shadow: none !important; // sass-lint:disable-line no-important
     }
 
 
+
     // IE
     .k-ie .k-button-group,
     .k-ie .k-split-button {
@@ -10905,6 +10866,16 @@ $kendo-button-transition: $transition !default;
         .k-button-clear-#{$name} {
             color: $color;
 
+            &:focus,
+            &.k-focus,
+            &:active {
+                &::after {
+                    background-color: currentColor;
+                    opacity: $kendo-clear-button-focus-opacity;
+                    display: block;
+                }
+            }
+
             // Disabled state
             &:disabled,
             &.k-disabled {
@@ -12852,7 +12823,7 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/avatar/_layout.scss
@@ -13056,10 +13027,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.
@@ -14105,7 +14076,7 @@ $loader-container-font-size-lg: $font-size-lg !default;
 // #region @import "~@progress/kendo-theme-default/scss/loader/_theme.scss"; -> packages/bootstrap/node_modules/@progress/kendo-theme-default/scss/loader/_theme.scss
 @include exports( "loader/theme" ) {
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-loader-#{$name} {
             @if $name == "secondary" {
                 color: $loader-secondary-bg;
@@ -15673,7 +15644,8 @@ $fieldset-legend-border: null !default;
 
 
         .k-multiselect,
-        .k-floating-label-container {
+        .k-floating-label-container,
+        .k-daterangepicker .k-dateinput {
             display: inline-flex;
             width: 100%;
         }
@@ -20546,6 +20518,7 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
 // Component
 // #region @import "_variables.scss"; -> packages/bootstrap/scss/daterangepicker/_variables.scss
 // Daterangepicker
+$kendo-daterange-picker-input-width: 10em;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/daterangepicker/_layout.scss
@@ -20565,6 +20538,10 @@ $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-pa
         *::after {
             box-sizing: border-box;
         }
+
+        .k-dateinput {
+            width: $kendo-daterange-picker-input-width;
+        }
     }
 
 
@@ -23432,7 +23409,7 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 
 
     // AppBar theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-appbar-#{$name} {
             @if $name == "light" {
                 color: $appbar-light-text;
@@ -23569,7 +23546,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
@@ -25068,7 +25045,7 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }
 
@@ -25782,7 +25759,7 @@ $card-focus-callout-box-shadow-w: $card-focus-shadow !default;
 
 
     // Card theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
             background-color: tint($color, 10);
             color: shade($color, 6);
@@ -26281,7 +26258,7 @@ $bottom-nav-flat-border: $component-border !default;
 @include exports("bottom-navigation/theme") {
 
     // Solid
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid.k-bottom-nav-#{$name} {
             @include fill(
                 $color: true-mix( $color, contrast-wcag( $color ), 35%),
@@ -26314,7 +26291,7 @@ $bottom-nav-flat-border: $component-border !default;
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
 
-        @each $name, $color in $theme-colors {
+        @each $name, $color in $kendo-theme-colors {
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );
@@ -28392,6 +28369,7 @@ $tabstrip-content-border-focused: $component-text !default;
                 );
             }
 
+            &:active,
             &.k-state-active,
             &.k-state-selected {
                 @include fill(
@@ -28402,6 +28380,7 @@ $tabstrip-content-border-focused: $component-text !default;
                 );
             }
 
+            &:focus,
             &.k-state-focused {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -29096,7 +29075,6 @@ $panelbar-header-expanded-gradient: null !default;
 
 
         // Panelbar content
-        .k-content,
         .k-panelbar-content {
             display: flow-root;
         }

package/dist/bootstrap-3-dark.scss

@@ -29,9 +29,9 @@ $hovered-text: #ffffff;
 $hovered-bg: #333333;
 $selected-text: #ffffff;
 $selected-bg: #337ab7;
-$button-text: #ffffff;
-$button-bg: #222222;
-$button-border: #333333;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #222222;
+$kendo-button-border: #333333;
 $link-text: #337ab7;
 $link-hover-text: #23527c;
 $series-a: #0275d8;

package/dist/bootstrap-3.scss

@@ -28,9 +28,9 @@ $hovered-text: #333333;
 $hovered-bg: #eeeeee;
 $selected-text: #ffffff;
 $selected-bg: #337ab7;
-$button-text: #333333;
-$button-bg: #ffffff;
-$button-border: #dddddd;
+$kendo-button-text: #333333;
+$kendo-button-bg: #ffffff;
+$kendo-button-border: #dddddd;
 $link-text: #337ab7;
 $link-hover-text: #23527c;
 $series-a: #0275d8;

package/dist/bootstrap-4-dark.scss

@@ -20,8 +20,8 @@ $hovered-text: #ffffff;
 $hovered-bg: #343a40;
 $selected-text: #ffffff;
 $selected-bg: #007bff;
-$button-text: #ffffff;
-$button-bg: #343a40;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #343a40;
 $link-text: #007bff;
 $link-hover-text: #0056b3;
 $series-a: #0275d8;

package/dist/bootstrap-4.scss

@@ -19,8 +19,8 @@ $hovered-text: #16181b;
 $hovered-bg: #e9ecef;
 $selected-text: #ffffff;
 $selected-bg: #007bff;
-$button-text: #212529;
-$button-bg: #e4e7eb;
+$kendo-button-text: #212529;
+$kendo-button-bg: #e4e7eb;
 $link-text: #007bff;
 $link-hover-text: #0056b3;
 $series-a: #0275d8;

package/dist/bootstrap-main-dark.scss

@@ -20,8 +20,8 @@ $hovered-text: #ffffff;
 $hovered-bg: #343a40;
 $selected-text: #ffffff;
 $selected-bg: #0d6efd;
-$button-text: #ffffff;
-$button-bg: #343a40;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #343a40;
 $link-text: #0d6efd;
 $link-hover-text: #0a58ca;
 $series-a: #0d6efd;

package/dist/bootstrap-main.scss

@@ -19,8 +19,8 @@ $hovered-text: #16181b;
 $hovered-bg: #e9ecef;
 $selected-text: #ffffff;
 $selected-bg: #0d6efd;
-$button-text: #212529;
-$button-bg: #e4e7eb;
+$kendo-button-text: #212529;
+$kendo-button-bg: #e4e7eb;
 $link-text: #0d6efd;
 $link-hover-text: #0a58ca;
 $series-a: #0d6efd;

package/dist/bootstrap-nordic.scss

@@ -18,8 +18,8 @@ $hovered-text: #212529;
 $hovered-bg: #e4e7eb;
 $selected-text: #ffffff;
 $selected-bg: #e7607b;
-$button-text: #212529;
-$button-bg: #d6e5e9;
+$kendo-button-text: #212529;
+$kendo-button-bg: #d6e5e9;
 $link-text: #e7607b;
 $link-hover-text: #da2146;
 $series-a: #e7607b;

package/dist/bootstrap-turquoise-dark.scss

@@ -19,8 +19,8 @@ $hovered-text: #1eb97b;
 $hovered-bg: #eeeff0;
 $selected-text: #ffffff;
 $selected-bg: #34d293;
-$button-text: #ffffff;
-$button-bg: #363940;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #363940;
 $link-text: #10c4b2;
 $link-hover-text: #0c9587;
 $series-a: #34d293;

package/dist/bootstrap-turquoise.scss

@@ -18,8 +18,8 @@ $hovered-text: #1eb97b;
 $hovered-bg: #eeeff0;
 $selected-text: #ffffff;
 $selected-bg: #34d293;
-$button-text: #212529;
-$button-bg: #f1f4f1;
+$kendo-button-text: #212529;
+$kendo-button-bg: #f1f4f1;
 $link-text: #34d293;
 $link-hover-text: #229869;
 $series-a: #34d293;

package/dist/bootstrap-urban.scss

@@ -18,8 +18,8 @@ $hovered-text: #16181b;
 $hovered-bg: #cfdee6;
 $selected-text: #ffffff;
 $selected-bg: #ff5c1a;
-$button-text: #ffffff;
-$button-bg: #5798be;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #5798be;
 $link-text: #ff5c1a;
 $link-hover-text: #e65317;
 $series-a: #ff7943;

package/dist/bootstrap-vintage.scss

@@ -18,8 +18,8 @@ $hovered-text: #494138;
 $hovered-bg: #dfdcd5;
 $selected-text: #ffffff;
 $selected-bg: #744662;
-$button-text: #212529;
-$button-bg: #dad2bd;
+$kendo-button-text: #212529;
+$kendo-button-bg: #dad2bd;
 $link-text: #744662;
 $link-hover-text: #44293a;
 $series-a: #c67eab;

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

@@ -199,17 +199,17 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#222222"
                 },
-                "button-border": {
+                "kendo-button-border": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#333333"

package/lib/swatches/bootstrap-3.json

@@ -189,17 +189,17 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#333333"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-border": {
+                "kendo-button-border": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#dddddd"

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

@@ -149,12 +149,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#343a40"

package/lib/swatches/bootstrap-4.json

@@ -139,12 +139,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#212529"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#e4e7eb"

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

@@ -149,12 +149,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#343a40"

package/lib/swatches/bootstrap-main.json

@@ -139,12 +139,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#212529"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#e4e7eb"

package/lib/swatches/bootstrap-nordic.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#212529"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#d6e5e9"

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

@@ -144,12 +144,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#363940"

package/lib/swatches/bootstrap-turquoise.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#212529"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#f1f4f1"

package/lib/swatches/bootstrap-urban.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#5798be"

package/lib/swatches/bootstrap-vintage.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#212529"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#dad2bd"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,8 +49,8 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.0.0",
+    "@progress/kendo-theme-default": "^5.1.1",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "444e224c85edd153e7726d83c682d84e9215acd0"
+  "gitHead": "798d6d06021f47b42f71b16530f96ab23d2b9c04"
 }

package/scss/_bootstrap-overrides.scss

@@ -18,46 +18,8 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000000 !default;
-
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$tertiary:      $purple !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
-
-$error: $danger !default;
-$inverse: if( $dark-theme, $light, $dark ) !default;
 // stylelint-enable scss/dollar-variable-colon-space-after
 
-
-$theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "tertiary": $tertiary,
-    "info": $info,
-    "success": $success,
-    "warning": $warning,
-    "error": $error,
-    "dark": $dark,
-    "light": $light,
-    "inverse": $inverse
-) !default;
-
 $body-bg: $white !default;
 $body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
 

package/scss/_variables.scss

@@ -202,12 +202,12 @@ $dark: $dark !default;
 /// @type Color
 $light: $light !default;
 
-/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -253,7 +253,7 @@ $app-border: contrast-wcag( $app-bg, $gray-300, $gray-700 ) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.

package/scss/avatar/_variables.scss

@@ -24,4 +24,4 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;

package/scss/button/_variables.scss

@@ -54,7 +54,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": #e4e7eb )
 ) !default;
 
@@ -183,6 +183,9 @@ $kendo-link-button-shadow-blur: 0px !default;
 $kendo-link-button-shadow-spread: .25rem !default;
 $kendo-link-button-shadow-opacity: .5 !default;
 
+// Clear button
+$kendo-clear-button-focus-opacity: .1 !default;
+
 /// The overlay opacity of hovered flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-hover-opacity: .08 !default;

package/scss/chip/_variables.scss

@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.

package/scss/daterangepicker/_variables.scss

@@ -1 +1,2 @@
 // Daterangepicker
+$kendo-daterange-picker-input-width: 10em;

package/scss/fab/_variables.scss

@@ -87,7 +87,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button

package/scss/notification/_variables.scss

@@ -29,6 +29,6 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }

package/scss/overlay/_variables.scss

@@ -1,4 +1,4 @@
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;