@progress/kendo-theme-bootstrap 4.41.2-dev.0 → 4.41.3-dev.0

package/lib/swatches/bootstrap-vintage.json

@@ -4,11 +4,11 @@
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
     "previewColors": [
-        "#744662",
         "#ffffff",
         "#f2efe8",
-        "#e7e1d3",
-        "#90b8c1"
+        "#744662",
+        "#44293a",
+        "#494138"
     ],
     "components": [],
     "groups": [

package/modules/@progress/kendo-theme-default/lib/swatches/default-main-dark.json

@@ -5,7 +5,7 @@
     "base": "@progress/kendo-theme-default",
     "previewColors": [
         "#000000",
-        "#303030",
+        "#151515",
         "#ff6358",
         "#eb5b51",
         "#ffffff"
@@ -107,7 +107,7 @@
                 "component-bg": {
                     "name": "Component background",
                     "type": "color",
-                    "value": "#202020"
+                    "value": "#101010"
                 },
                 "base-text": {
                     "name": "Header text color",
@@ -117,7 +117,7 @@
                 "base-bg": {
                     "name": "Header background",
                     "type": "color",
-                    "value": "#303030"
+                    "value": "#151515"
                 },
                 "hovered-text": {
                     "name": "Hover text color",
@@ -127,7 +127,7 @@
                 "hovered-bg": {
                     "name": "Hover background",
                     "type": "color",
-                    "value": "#303030"
+                    "value": "#202020"
                 },
                 "selected-text": {
                     "name": "Selected text color",

package/modules/@progress/kendo-theme-default/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "4.41.2-dev.0",
+  "version": "4.41.3-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,11 +45,7 @@
     "dart:watch": "gulp dart:watch",
     "dart:swatches": "gulp dart:swatches",
     "dart:flat": "gulp dart:flat",
-    "twbs-compat": "gulp sass --file ./build/twbs-compat.scss",
     "prepublishOnly": "echo 'no prebublish for default theme'"
   },
-  "devDependencies": {
-    "bootstrap": "^5.0.2"
-  },
-  "gitHead": "1987b103aba532e62c9bb4a63b957d7bfdc200a4"
+  "gitHead": "4c5f70ca87b87ff582d9b0968b78fd01eddbc07a"
 }

package/modules/@progress/kendo-theme-default/scss/_variables.scss

@@ -251,7 +251,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: rgba( black, .08 ) !default;
+$component-border: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 
 
 /// The background of the components' chrome area.

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

@@ -306,11 +306,11 @@
 
             // k-button
             > .k-button:first-child {
-                @include border-left-radius( $button-border-radius );
+                @include border-right-radius( $button-border-radius );
             }
             > .k-split-button-arrow,
             > .k-button:last-child {
-                @include border-right-radius( $button-border-radius );
+                @include border-left-radius( $button-border-radius );
             }
         }
     }

package/modules/@progress/kendo-theme-default/scss/button/_theme.scss

@@ -294,7 +294,7 @@
         &.k-state-focused,
         &.k-state-focused:active {
             &::after {
-                background-color: $clear-button-text;
+                background-color: currentColor;
                 opacity: $clear-button-focused-opacity;
                 display: block;
             }

package/modules/@progress/kendo-theme-default/scss/button/_variables.scss

@@ -127,6 +127,6 @@ $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;
 $flat-button-selected-opacity: .2 !default;
 
-$clear-button-text: $button-text !default;
-$clear-button-hover-text: try-shade( $clear-button-text ) !default;
+$clear-button-text: inherit !default;
+$clear-button-hover-text: inherit !default;
 $clear-button-focused-opacity: .1 !default;

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

@@ -142,6 +142,11 @@
             border-style: solid;
             line-height: $chat-bubble-line-height;
             word-wrap: break-word;
+
+            a {
+                color: inherit;
+                text-decoration: underline;
+            }
         }
 
 

package/modules/@progress/kendo-theme-default/scss/chat/_theme.scss

@@ -31,6 +31,9 @@
             @include box-shadow( $chat-bubble-shadow );
             transition: $transition;
             order: -1;
+
+            a { color: $link-text; }
+            a:hover { color: $link-hover-text; }
         }
         .k-bubble:hover {
             @include box-shadow( $chat-bubble-hover-shadow );

package/modules/@progress/kendo-theme-default/scss/common/_selection.scss

@@ -4,6 +4,7 @@
         position: absolute;
         z-index: 100000;
     }
+
     .k-marquee-color,
     .k-marquee-text {
         position: absolute;
@@ -12,6 +13,7 @@
         width: 100%;
         height: 100%;
     }
+
     .k-marquee-color {
         color: $selected-text;
         background-color: $selected-bg;

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

@@ -39,7 +39,7 @@
         font-size: $chart-font-size;
         line-height: $chart-line-height;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $chart-tap-highlight-color;
+        -webkit-tap-highlight-color: $rgba-transparent;
     }
 
     .k-chart,
@@ -180,20 +180,6 @@
         height: 100%;
     }
 
-    .k-marquee {
-        position: absolute;
-        z-index: 100000;
-    }
-
-    .k-marquee-color,
-    .k-marquee-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
     // Navigator hint
     .k-navigator-hint div {
         position: absolute;

package/modules/@progress/kendo-theme-default/scss/dataviz/_theme.scss

@@ -63,10 +63,10 @@
     // Tooltip
     // TODO
     .k-chart-tooltip {
-        color: $component-bg;
+        color: $white;
     }
     .k-chart-tooltip-inverse {
-        color: invert($component-bg);
+        color: $black;
     }
 
     .k-chart-crosshair-tooltip,
@@ -112,14 +112,6 @@
         background-color: $component-bg;
         opacity: .8;
     }
-
-    .k-marquee-color {
-        background-color: $chart-selection-marque-background;
-    }
-
-    .k-marquee-color {
-        opacity: .6;
-    }
 }
 
 

package/modules/@progress/kendo-theme-default/scss/dataviz/_variables.scss

@@ -95,12 +95,14 @@ $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
 $chart-inactive: rgba( $body-text, .5 ) !default;
+
 /// The color of the Chart grid lines (major).
 /// @group charts
-$chart-major-lines: rgba(0, 0, 0, .08) !default;
+$chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
+
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$chart-minor-lines: rgba(0, 0, 0, .04) !default;
+$chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
@@ -110,23 +112,20 @@ $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;
 
-$chart-tap-highlight-color: rgba(0, 0, 0, 0);
-
-$chart-crosshair-background: rgba(0, 0, 0, .5) !default;
+$chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 $chart-crosshair-shared-tooltip-color: $chart-text !default;
 $chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
-$chart-crosshair-shared-tooltip-border: rgba(0, 0, 0, .08) !default;
+$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
 
-$chart-notes-background: rgba(0, 0, 0, .5) !default;
-$chart-notes-border: rgba(0, 0, 0, .5) !default;
-$chart-notes-lines: rgba(0, 0, 0, .5) !default;
+$chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-border: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-lines: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 
-$error-bars-background: rgba(0, 0, 0, .5) !default;
+$error-bars-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 
-$chart-selection-marque-background: $series-a !default;
 $selection-handle-size: 22px !default;
-$selection-border-color: rgba(0, 0, 0, .08) !default;
-$selection-shadow: inset 0 1px 7px rgba(0, 0, 0, .15) !default;
+$selection-border-color: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
+$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $white, $black ), .15) !default;
 
 
 // TreeMap

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

@@ -79,17 +79,12 @@
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             right: $padding-x;
             top: 50%;
             transform: translateY(-50%);
             overflow: visible;
         }
-        &.k-invalid .k-i-warning,
-        &.k-state-invalid .k-i-warning {
-            display: inline-block;
-        }
 
 
         // RTL
@@ -191,18 +186,12 @@
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
             transform: translateY(-50%);
             overflow: visible;
         }
-        .k-state-invalid {
-            .k-i-warning {
-                display: inline-block;
-            }
-        }
 
 
         // RTL
@@ -292,18 +281,12 @@
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
             transform: translateY(-50%);
             overflow: visible;
         }
-        .k-state-invalid {
-            .k-i-warning {
-                display: inline-block;
-            }
-        }
 
 
         // RTL

package/modules/@progress/kendo-theme-default/scss/input/_variables.scss

@@ -54,8 +54,8 @@ $input-focused-shadow: 0 0 0 2px rgba( $input-focused-border, .08 ) !default;
 $input-placeholder-text: $subtle-text !default;
 $input-placeholder-opacity: 1 !default;
 
-$input-selected-text: $primary-contrast !default;
 $input-selected-bg: $primary !default;
+$input-selected-text: $primary-contrast !default;
 
 $input-clear-button-focused-background: $base-text !default;
 $input-clear-button-focused-opacity: .2 !default;
@@ -93,5 +93,5 @@ $input-icon-opacity: null !default;
 
 
 // Input separator
-$input-separator-color: $clear-button-text !default;
+$input-separator-color: $input-text !default;
 $input-separator-opacity: .5 !default;

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

@@ -23,15 +23,10 @@
 
             &.k-state-invalid {
                 transition: none;
-
-                + .k-i-warning {
-                    display: inline-block;
-                }
             }
         }
 
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);

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

@@ -44,13 +44,13 @@
         > .k-icon {
             margin-top: $notification-icon-offset;
             margin-right: $notification-icon-spacing;
-            flex: 0 0 auto;
+            flex: none;
         }
 
         > .k-i-close {
             margin-right: 0;
             margin-left: $notification-icon-spacing;
-            flex: 0 0 auto;
+            flex: none;
             cursor: pointer;
         }
 

package/modules/@progress/kendo-theme-default/scss/numerictextbox/_theme.scss

@@ -3,6 +3,10 @@
     // Numeric
     .k-numerictextbox {
 
+        .k-i-warning {
+            color: $error;
+        }
+
         // Normal state
         .k-numeric-wrap {
             @include fill(

package/modules/@progress/kendo-theme-default/scss/pager/_theme.scss

@@ -9,7 +9,8 @@
 
         &:focus,
         &.k-focus,
-        &.k-state-focus {
+        &.k-state-focus,
+        &.k-state-focused {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
         }

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

@@ -473,9 +473,9 @@
     }
 
     .k-pivot-toolbar {
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        align-items: start;
+        border-width: 0 0 1px;
+        border-style: solid;
+        align-items: flex-start;
         flex-wrap: wrap;
 
         > * {

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

@@ -3,6 +3,7 @@
     // Popover
     .k-popover {
         @include border-radius( $popover-border-radius );
+        padding: 0;
         border-width: $popover-border-width;
         border-style: $popover-border-style;
         box-sizing: border-box;

package/modules/@progress/kendo-theme-default/scss/skeleton/_variables.scss

@@ -6,6 +6,6 @@ $skeleton-rect-border-radius: 0 !default;
 
 $skeleton-circle-border-radius: 9999px !default;
 
-$skeleton-item-bg: rgba( $dark, .2 ) !default;
+$skeleton-item-bg: rgba( $inverse, .2 ) !default;
 
 $skeleton-wave-bg: rgba( black, .04 ) !default;

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

@@ -47,7 +47,7 @@
         display: inline-flex;
         flex-direction: row;
         position: absolute;
-        z-index: 1;
+        z-index: 2;
         top: 0;
         left: 0;
 
@@ -64,6 +64,11 @@
     // Tabstrip
     .k-spreadsheet-tabstrip {
         padding-top: $toolbar-padding-y;
+        position: relative;
+        z-index: 1;
+    }
+    .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper {
+        margin: 0;
     }
     .k-spreadsheet-tabstrip .k-loading {
         display: none;
@@ -217,17 +222,17 @@
 
     // Sheets bar
     .k-spreadsheet-sheets-bar {
-        padding: 0 $padding-y $padding-y;
+        padding: 0 0 map-get( $spacing, 1 ) map-get( $spacing, 1 );
         border-width: 1px 0 0;
         border-style: solid;
         border-color: inherit;
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
         position: relative;
     }
     .k-spreadsheet-sheets-bar-add {
-        margin-right: $padding-y;
+        align-self: center;
 
         &:not(:hover) {
             border-color: transparent;
@@ -236,22 +241,13 @@
         }
     }
     .k-spreadsheet-sheets-items {
-        margin-top: -1px;
         flex: 1;
         overflow: hidden;
 
-        // sass-lint:disable no-important
-        .k-tabstrip-items {
-            margin: 0 $button-calc-size !important;
+        .k-tabstrip-items-wrapper {
+            margin: 0;
             border-width: 0;
         }
-        .k-tabstrip-prev {
-            left: 0 !important;
-        }
-        .k-tabstrip-next {
-            right: 0 !important;
-        }
-        // sass-lint:enable no-important
 
         .k-item  {
             .k-link {
@@ -266,6 +262,7 @@
                 display: inline-flex;
                 flex-direction: row;
                 vertical-align: middle;
+                align-self: center;
             }
         }
     }

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

@@ -32,6 +32,8 @@
         border-width: 0;
         border-style: solid;
         border-color: inherit;
+        position: relative;
+        z-index: 2;
     }
 
     .k-tabstrip-items {
@@ -39,7 +41,6 @@
         display: flex;
         flex-direction: row;
         flex: 0 0 auto;
-        position: relative;
 
         .k-item {
             margin: 0;
@@ -83,6 +84,8 @@
         display: none;
         overflow: auto;
         flex: 1 1 auto;
+        position: relative;
+        z-index: 1;
 
         &.k-state-active {
             display: block;
@@ -117,9 +120,8 @@
 
 
     // Scrolling
-    .k-tabstrip.k-tabstrip-scrollable {
+    .k-tabstrip-scrollable {
         > .k-tabstrip-items-wrapper {
-            border-width: 0;
 
             > .k-tabstrip-items {
                 flex: 1 1 auto;
@@ -144,11 +146,6 @@
                 }
             }
         }
-
-        > .k-content,
-        > .k-tabstrip-content {
-            border-width: $tabstrip-content-border-width;
-        }
     }
 
 
@@ -156,6 +153,7 @@
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: $tabstrip-border-width;
+            margin-bottom: -$tabstrip-content-border-width;
 
             .k-item {
                 @include border-top-radius( $tabstrip-item-border-radius );
@@ -174,12 +172,13 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-bottom-radius( $tabstrip-item-border-radius );
-            border-top-width: 0;
+            border-top-color: transparent !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             border-top-width: $tabstrip-border-width;
+            margin-top: -$tabstrip-content-border-width;
 
             .k-item {
                 @include border-bottom-radius( $tabstrip-item-border-radius );
@@ -198,7 +197,7 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-top-radius( $tabstrip-item-border-radius );
-            border-bottom-width: 0;
+            border-bottom-color: transparent !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-left {
@@ -206,6 +205,7 @@
 
         > .k-tabstrip-items-wrapper {
             border-right-width: $tabstrip-border-width;
+            margin-right: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
                 display: inline-flex;
@@ -229,10 +229,8 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-right-radius( $tabstrip-item-border-radius );
-            // sass-lint:disable no-important
-            margin: 0 !important;
-            // sass-lint:enable no-important
-            border-left-width: 0;
+            margin: 0 !important; // sass-lint:disable-line no-important
+            border-left-color: transparent !important; // sass-lint:disable-line no-important
         }
 
     }
@@ -241,6 +239,7 @@
 
         > .k-tabstrip-items-wrapper {
             border-left-width: $tabstrip-border-width;
+            margin-left: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
                 display: inline-flex;
@@ -264,10 +263,8 @@
         > .k-content,
         > .k-tabstrip-content {
             @include border-left-radius( $tabstrip-item-border-radius );
-            // sass-lint:disable no-important
-            margin: 0 !important;
-            // sass-lint:enable no-important
-            border-right-width: 0;
+            margin: 0 !important; // sass-lint:disable-line no-important
+            border-right-color: transparent !important; // sass-lint:disable-line no-important
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/textarea/_variables.scss

@@ -48,7 +48,7 @@ $textarea-focus-shadow: $input-focused-shadow !default;
 $textarea-placeholder-text: $input-placeholder-text !default;
 $textarea-placeholder-opacity: $input-placeholder-opacity !default;
 
-$textarea-selected-text: $input-selected-text !default;
 $textarea-selected-bg: $input-selected-bg !default;
+$textarea-selected-text: $input-selected-text !default;
 
 $textarea-invalid-focus-shadow: $invalid-shadow !default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "4.41.2-dev.0",
+  "version": "4.41.3-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,13 +49,9 @@
     "prepublishOnly": "./build/embed-dependencies 'bootstrap' '@progress/kendo-theme-default'",
     "postpublish": "rm -rf modules && git checkout scss"
   },
-  "peerDependencies": {
-    "@progress/kendo-theme-default": "^4.41.0",
+  "dependencies": {
+    "@progress/kendo-theme-default": "^4.41.3-dev.0",
     "bootstrap": "^5.1.0"
   },
-  "devDependencies": {
-    "@progress/kendo-theme-default": "^4.41.2-dev.0",
-    "bootstrap": "^5.1.0"
-  },
-  "gitHead": "1987b103aba532e62c9bb4a63b957d7bfdc200a4"
+  "gitHead": "4c5f70ca87b87ff582d9b0968b78fd01eddbc07a"
 }