@progress/kendo-theme-default 5.0.0-next.2 → 5.0.0

package/dist/default-dataviz-v4.scss

@@ -0,0 +1,8 @@
+$series-a: #ff6358;
+$series-b: #ffd246;
+$series-c: #78d237;
+$series-d: #28b4c8;
+$series-e: #2d73f5;
+$series-f: #aa46be;
+
+@import "all.scss";

package/dist/default-main-dark.scss

@@ -24,10 +24,10 @@ $button-bg: #404040;
 $link-text: #ff6358;
 $link-hover-text: #d6534a;
 $series-a: #ff6358;
-$series-b: #ffd246;
-$series-c: #78d237;
-$series-d: #28b4c8;
-$series-e: #2d73f5;
-$series-f: #aa46be;
+$series-b: #ffe162;
+$series-c: #4cd180;
+$series-d: #4b5ffa;
+$series-e: #ac58ff;
+$series-f: #ff5892;
 
 @import "all.scss";

package/dist/default-main.scss

@@ -23,10 +23,10 @@ $button-bg: #f5f5f5;
 $link-text: #ff6358;
 $link-hover-text: #d6534a;
 $series-a: #ff6358;
-$series-b: #ffd246;
-$series-c: #78d237;
-$series-d: #28b4c8;
-$series-e: #2d73f5;
-$series-f: #aa46be;
+$series-b: #ffe162;
+$series-c: #4cd180;
+$series-d: #4b5ffa;
+$series-e: #ac58ff;
+$series-f: #ff5892;
 
 @import "all.scss";

package/lib/swatches/default-dataviz-v4.json

@@ -0,0 +1,51 @@
+{
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.11.0/lib/schemas/kendo-swatch.json",
+    "name": "Default Dataviz v4",
+    "product": "kendo",
+    "base": "@progress/kendo-theme-default",
+    "previewColors": [
+        "#ff6358",
+        "#ffd246",
+        "#78d237",
+        "#28b4c8",
+        "#2d73f5"
+    ],
+    "components": [],
+    "groups": [
+        {
+            "name": "Dataviz",
+            "variables": {
+                "series-a": {
+                    "name": "Series A",
+                    "type": "color",
+                    "value": "#ff6358"
+                },
+                "series-b": {
+                    "name": "Series B",
+                    "type": "color",
+                    "value": "#ffd246"
+                },
+                "series-c": {
+                    "name": "Series C",
+                    "type": "color",
+                    "value": "#78d237"
+                },
+                "series-d": {
+                    "name": "Series D",
+                    "type": "color",
+                    "value": "#28b4c8"
+                },
+                "series-e": {
+                    "name": "Series E",
+                    "type": "color",
+                    "value": "#2d73f5"
+                },
+                "series-f": {
+                    "name": "Series F",
+                    "type": "color",
+                    "value": "#aa46be"
+                }
+            }
+        }
+    ]
+}

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

@@ -182,27 +182,27 @@
                 "series-b": {
                     "name": "Series B",
                     "type": "color",
-                    "value": "#ffd246"
+                    "value": "#ffe162"
                 },
                 "series-c": {
                     "name": "Series C",
                     "type": "color",
-                    "value": "#78d237"
+                    "value": "#4cd180"
                 },
                 "series-d": {
                     "name": "Series D",
                     "type": "color",
-                    "value": "#28b4c8"
+                    "value": "#4b5ffa"
                 },
                 "series-e": {
                     "name": "Series E",
                     "type": "color",
-                    "value": "#2d73f5"
+                    "value": "#ac58ff"
                 },
                 "series-f": {
                     "name": "Series F",
                     "type": "color",
-                    "value": "#aa46be"
+                    "value": "#ff5892"
                 }
             }
         }

package/lib/swatches/default-main.json

@@ -172,27 +172,27 @@
                 "series-b": {
                     "name": "Series B",
                     "type": "color",
-                    "value": "#ffd246"
+                    "value": "#ffe162"
                 },
                 "series-c": {
                     "name": "Series C",
                     "type": "color",
-                    "value": "#78d237"
+                    "value": "#4cd180"
                 },
                 "series-d": {
                     "name": "Series D",
                     "type": "color",
-                    "value": "#28b4c8"
+                    "value": "#4b5ffa"
                 },
                 "series-e": {
                     "name": "Series E",
                     "type": "color",
-                    "value": "#2d73f5"
+                    "value": "#ac58ff"
                 },
                 "series-f": {
                     "name": "Series F",
                     "type": "color",
-                    "value": "#aa46be"
+                    "value": "#ff5892"
                 }
             }
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.0.0-next.2",
+  "version": "5.0.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "prepublishOnly": "echo 'no prebublish for default theme'",
     "postpublish": "echo 'no postpublish for default theme'"
   },
-  "gitHead": "addf6ff1c4a1f6942c086ce0b5c514dee9ec0685"
+  "gitHead": "444e224c85edd153e7726d83c682d84e9215acd0"
 }

package/scss/_variables.scss

@@ -11,6 +11,8 @@ $enable-flex-classes: true !default;
 $enable-grid-classes: true !default;
 
 $use-calc-badge-size: true !default;
+$use-input-button-width: true !default;
+$use-input-spinner-width: true !default;
 $use-picker-select-width: true !default;
 
 
@@ -201,9 +203,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: () !default;
-// sass-lint:disable indentation
-$theme-colors: map-merge((
+$theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -214,8 +214,7 @@ $theme-colors: map-merge((
     "dark": $dark,
     "light": $light,
     "inverse": $inverse
-), $theme-colors);
-// sass-lint:enable indentation
+) !default;
 
 // Cursor utility classes
 $cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text,
@@ -341,25 +340,6 @@ $header-border: $base-border !default;
 $header-gradient: null !default;
 
 
-// List
-$list-item-padding-x: $padding-x !default;
-$list-item-padding-y: $padding-y !default;
-
-$list-item-bg: null !default;
-$list-item-text: $component-text !default;
-
-$list-item-hovered-bg: $hovered-bg !default;
-$list-item-hovered-text: $hovered-text !default;
-
-$list-item-selected-bg: $selected-bg !default;
-$list-item-selected-text: $selected-text !default;
-
-$list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
-
-$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: rgba( $component-text, .5 ) !default;
-
-
 // Loading
 
 
@@ -404,10 +384,7 @@ $grid-gap: 10px !default;
 
 
 // Disabled Styling maps
-$disabled-styling: () !default;
-// sass-lint:disable indentation
-$disabled-styling: map-merge((
+$disabled-styling: (
     opacity: $disabled-opacity,
     filter: $disabled-filter
-), $disabled-styling);
-// sass-lint:enable indentation
+) !default;

package/scss/action-buttons/_layout.scss

@@ -2,6 +2,7 @@
 
     .k-actions {
         padding: $actions-padding-y $actions-padding-x;
+        box-sizing: border-box;
         border-width: $actions-border-width 0 0 0;
         border-style: solid;
         border-color: inherit;
@@ -13,6 +14,12 @@
         overflow: hidden;
         // TODO: remove
         clear: both;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -23,6 +30,7 @@
 
 
     // Aliases
+    .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
         @extend .k-actions;
@@ -43,7 +51,7 @@
         }
     }
 
-    // Legacy align
+    // Actions align
     .k-actions-start {
         justify-content: flex-start;
     }
@@ -57,4 +65,13 @@
         flex: 1 0 0%;
     }
 
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+
 }

package/scss/action-sheet/_layout.scss

@@ -27,6 +27,12 @@
         overflow-y: auto;
         position: fixed;
         z-index: 10002;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
@@ -117,7 +123,7 @@
         border-left-width: if( $actionsheet-border-width, 0, null );
         left: 0;
         top: 50%;
-        transform: translatey( -50% );
+        transform: translateY( -50% );
     }
     .k-actionsheet-right {
         @include border-left-radius( $actionsheet-border-radius );
@@ -125,7 +131,7 @@
         border-right-width: if( $actionsheet-border-width, 0, null );
         right: 0;
         top: 50%;
-        transform: translatey( -50% );
+        transform: translateY( -50% );
     }
 
 

package/scss/adaptive/_layout.scss

@@ -83,14 +83,6 @@
             }
         }
 
-        .k-grid-filter-menu {
-
-            .k-filter-selected-items {
-                margin: 1em;
-                font-weight: normal;
-            }
-        }
-
         .k-grid-edit-form {
 
             .k-popup-edit-form,
@@ -99,10 +91,6 @@
                 min-width: auto;
             }
         }
-
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {
@@ -113,7 +101,7 @@
         .k-resize-handle-inner::before {
             content: "\e01e";
             position: absolute;
-            font: 16px/1 "WebComponentsIcons";
+            font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line
             // The Calc is needed due to the the negative margin
             // that removes the double bottom border of the header
             top: calc(50% - 1px);
@@ -159,10 +147,6 @@
             .k-scheduler-recur-end-wrap {
                 white-space: nowrap;
             }
-
-            .k-edit-buttons {
-                border-width: 0;
-            }
         }
     }
 
@@ -213,6 +197,12 @@
                     font-size: 12px;
                 }
             }
+
+            .k-scheduler-views-wrapper {
+                .k-views-dropdown {
+                    display: inline-block;
+                }
+            }
         }
 
         .k-scheduler-footer {
@@ -367,39 +357,18 @@
 
     .k-pane-wrapper {
 
-        .k-grid-edit-form,
-        .k-grid-column-menu,
-        .k-grid-filter-menu,
-        .k-scheduler-edit-form {
-
-            > .k-header {
-                display: flex;
-                justify-content: space-between;
-                padding: .3em .6em;
-                width: auto;
-                line-height: 2em;
-
-                .k-header-done,
-                .k-header-cancel {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-
-                    .k-icon {
-                        font-size: 1.5em;
-                    }
-                }
-            }
+        .k-appbar {
+            padding: map-get( $spacing, 1 );
         }
 
         .k-list-title,
-        .k-filter-help-text,
-        .k-list-group-header {
+        .k-filter-help-text {
             padding: $listgroup-item-padding-y $listgroup-item-padding-x;
             display: block;
         }
 
-        .k-list-group-header {
+        .k-listgroup-title {
+            padding: $listgroup-item-padding-y $listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }
@@ -411,31 +380,56 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: 2em;
+            margin-top: map-get( $spacing, 4 );
         }
 
         // Column menu
         .k-column-menu {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
             }
+
+            .k-list-title,
+            .k-listgroup-title {
+                padding: 0;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $spacing, 2 )};
+            }
         }
 
         // Filter menu
         .k-filter-menu {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
-            .k-space-right {
-                margin: .5em 10px;
-                width: auto;
+            .k-list-title {
+                padding: 0;
+            }
+
+            .k-list-filter {
+                padding: 0;
                 display: flex;
-                align-items: center;
+                flex-flow: column nowrap;
+                gap: inherit;
             }
 
             .k-filter-tools {
-                margin: 1em;
                 display: flex;
-                justify-content: space-between;
+                flex-flow: row nowrap;
+                gap: inherit;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $spacing, 2 )};
             }
         }
 
@@ -458,16 +452,7 @@
             overflow-y: auto;
         }
 
-        .k-state-disabled {
-            opacity: 1;
-
-            > * {
-                opacity: .7;
-            }
-        }
-
         // Pager
-
         .k-pager-wrap.k-pager-sm {
             justify-content: center;
 
@@ -477,47 +462,14 @@
 
         }
 
-        // IE
-
-        .k-ie & {
-
-            .k-scheduler {
-                .k-scheduler-toolbar,
-                .k-scheduler-footer {
-                    line-height: 2em;
-                }
-            }
-
-            .k-grid {
-
-                .k-icon {
-                    text-indent: 0;
-                }
-            }
-        }
-
         // RTL
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            .k-grid-edit-form,
-            .k-grid-column-menu,
-            .k-grid-filter-menu,
-            .k-scheduler-edit-form {
-
-                > .k-header {
-                    flex-direction: row-reverse;
-                }
-            }
-
-            .k-filter-menu {
-
-                .k-space-right > .k-i-zoom {
-                    left: 15px;
-                    right: auto;
-                }
+            .k-header-cancel .k-i-arrow-chevron-left,
+            .k-listgroup-item .k-select .k-i-arrow-chevron-right {
+                transform: scaleX( -1 );
             }
 
             .k-scheduler-mobile {
@@ -539,10 +491,6 @@
                     margin-right: 0;
                 }
             }
-
-            .k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
-                transform: scaleX(-1);
-            }
         }
     }
 }

package/scss/adaptive/_theme.scss

@@ -66,15 +66,6 @@
         .k-grid-filter-menu,
         .k-scheduler-edit-form {
 
-            .k-header {
-                color: $adaptive-menu-text;
-                background-color: $adaptive-menu-bg;
-
-                .k-link {
-                    color: inherit;
-                }
-            }
-
             .k-item,
             .k-link {
                 color: $base-text;