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

package/dist/all.scss

@@ -1076,7 +1076,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.
@@ -2766,6 +2766,7 @@ $display4-letter-spacing: null !default;
         position: absolute;
         z-index: 100000;
     }
+
     .k-marquee-color,
     .k-marquee-text {
         position: absolute;
@@ -2774,6 +2775,7 @@ $display4-letter-spacing: null !default;
         width: 100%;
         height: 100%;
     }
+
     .k-marquee-color {
         color: $selected-text;
         background-color: $selected-bg;
@@ -7392,8 +7394,8 @@ $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;
 
 // #endregion
@@ -7454,8 +7456,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;
@@ -7493,7 +7495,7 @@ $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;
 
 // #endregion
@@ -7852,11 +7854,11 @@ $input-separator-opacity: .5 !default;
 
             // 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 );
             }
         }
     }
@@ -8305,7 +8307,7 @@ $input-separator-opacity: .5 !default;
         &.k-state-focused,
         &.k-state-focused:active {
             &::after {
-                background-color: $clear-button-text;
+                background-color: currentColor;
                 opacity: $clear-button-focused-opacity;
                 display: block;
             }
@@ -13477,8 +13479,8 @@ $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;
 
@@ -14953,6 +14955,10 @@ $numeric-button-pressed-gradient: $button-active-gradient !default;
     // Numeric
     .k-numerictextbox {
 
+        .k-i-warning {
+            color: $error;
+        }
+
         // Normal state
         .k-numeric-wrap {
             @include fill(
@@ -17863,17 +17869,12 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
 
         // 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
@@ -17975,18 +17976,12 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
 
         // 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
@@ -18076,18 +18071,12 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
 
         // 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
@@ -20413,15 +20402,10 @@ $dropdowntree-filter-spacer: $dropdowntree-popup-spacer-y !default;
 
             &.k-state-invalid {
                 transition: none;
-
-                + .k-i-warning {
-                    display: inline-block;
-                }
             }
         }
 
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
@@ -23397,13 +23381,13 @@ $notification-themes: () !default;
         > .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;
         }
 
@@ -24688,6 +24672,7 @@ $popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
     // 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;
@@ -25502,7 +25487,8 @@ $pager-dropdown-width: 5em !default;
 
         &:focus,
         &.k-focus,
-        &.k-state-focus {
+        &.k-state-focus,
+        &.k-state-focused {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
         }
@@ -27172,6 +27158,8 @@ $tabstrip-content-border-focused: $component-text !default;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
+        position: relative;
+        z-index: 2;
     }
 
     .k-tabstrip-items {
@@ -27179,7 +27167,6 @@ $tabstrip-content-border-focused: $component-text !default;
         display: flex;
         flex-direction: row;
         flex: 0 0 auto;
-        position: relative;
 
         .k-item {
             margin: 0;
@@ -27223,6 +27210,8 @@ $tabstrip-content-border-focused: $component-text !default;
         display: none;
         overflow: auto;
         flex: 1 1 auto;
+        position: relative;
+        z-index: 1;
 
         &.k-state-active {
             display: block;
@@ -27257,9 +27246,8 @@ $tabstrip-content-border-focused: $component-text !default;
 
 
     // Scrolling
-    .k-tabstrip.k-tabstrip-scrollable {
+    .k-tabstrip-scrollable {
         > .k-tabstrip-items-wrapper {
-            border-width: 0;
 
             > .k-tabstrip-items {
                 flex: 1 1 auto;
@@ -27284,11 +27272,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 }
             }
         }
-
-        > .k-content,
-        > .k-tabstrip-content {
-            border-width: $tabstrip-content-border-width;
-        }
     }
 
 
@@ -27296,6 +27279,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .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 );
@@ -27314,12 +27298,13 @@ $tabstrip-content-border-focused: $component-text !default;
         > .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 );
@@ -27338,7 +27323,7 @@ $tabstrip-content-border-focused: $component-text !default;
         > .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 {
@@ -27346,6 +27331,7 @@ $tabstrip-content-border-focused: $component-text !default;
 
         > .k-tabstrip-items-wrapper {
             border-right-width: $tabstrip-border-width;
+            margin-right: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
                 display: inline-flex;
@@ -27369,10 +27355,8 @@ $tabstrip-content-border-focused: $component-text !default;
         > .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
         }
 
     }
@@ -27381,6 +27365,7 @@ $tabstrip-content-border-focused: $component-text !default;
 
         > .k-tabstrip-items-wrapper {
             border-left-width: $tabstrip-border-width;
+            margin-left: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
                 display: inline-flex;
@@ -27404,10 +27389,8 @@ $tabstrip-content-border-focused: $component-text !default;
         > .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
         }
     }
 
@@ -28534,7 +28517,7 @@ $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;
 
@@ -31076,7 +31059,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         display: inline-flex;
         flex-direction: row;
         position: absolute;
-        z-index: 1;
+        z-index: 2;
         top: 0;
         left: 0;
 
@@ -31093,6 +31076,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
     // 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;
@@ -31246,17 +31234,17 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
 
     // 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;
@@ -31265,22 +31253,13 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         }
     }
     .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 {
@@ -31295,6 +31274,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
                 display: inline-flex;
                 flex-direction: row;
                 vertical-align: middle;
+                align-self: center;
             }
         }
     }
@@ -32899,9 +32879,9 @@ $pivotgrid-remove-text: null !default;
     }
 
     .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;
 
         > * {
@@ -39275,6 +39255,11 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             border-style: solid;
             line-height: $chat-bubble-line-height;
             word-wrap: break-word;
+
+            a {
+                color: inherit;
+                text-decoration: underline;
+            }
         }
 
 
@@ -39714,6 +39699,9 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             @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 );
@@ -41476,12 +41464,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;
@@ -41491,23 +41481,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
@@ -41558,7 +41545,7 @@ $treemap-line-height: $line-height !default;
         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,
@@ -41699,20 +41686,6 @@ $treemap-line-height: $line-height !default;
         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;
@@ -42080,10 +42053,10 @@ $treemap-line-height: $line-height !default;
     // Tooltip
     // TODO
     .k-chart-tooltip {
-        color: $component-bg;
+        color: $white;
     }
     .k-chart-tooltip-inverse {
-        color: invert($component-bg);
+        color: $black;
     }
 
     .k-chart-crosshair-tooltip,
@@ -42129,14 +42102,6 @@ $treemap-line-height: $line-height !default;
         background-color: $component-bg;
         opacity: .8;
     }
-
-    .k-marquee-color {
-        background-color: $chart-selection-marque-background;
-    }
-
-    .k-marquee-color {
-        opacity: .6;
-    }
 }
 
 

package/dist/default-main-dark.scss

@@ -12,11 +12,11 @@ $headings-text: #ffffff;
 $subtle-text: #e0e0e0;
 $disabled-text: #d0d0d0;
 $component-text: #ffffff;
-$component-bg: #202020;
+$component-bg: #101010;
 $base-text: #ffffff;
-$base-bg: #303030;
+$base-bg: #151515;
 $hovered-text: #ffffff;
-$hovered-bg: #303030;
+$hovered-bg: #202020;
 $selected-text: #ffffff;
 $selected-bg: #ff6358;
 $button-text: #ffffff;

package/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/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/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/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/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/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/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/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 );