@progress/kendo-theme-default 5.0.0-beta.3 → 5.0.0-beta.4

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.scss

@@ -22,11 +22,11 @@ $button-text: #424242;
 $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-a: #4b5ffa;
+$series-b: #ac58ff;
+$series-c: #ff5892;
+$series-d: #ff6358;
+$series-e: #ff6358;
+$series-f: #4cd180;
 
 @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.json

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

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-beta.3",
+  "version": "5.0.0-beta.4",
   "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": "a508e10c60c1c14b569a908ef7f8584cf449a421"
+  "gitHead": "1e906bdc564c2df671a6c1552c81dd56bc08d1c4"
 }

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,7 +91,6 @@
                 min-width: auto;
             }
         }
-
     }
 
     .k-grid.k-grid-mobile {
@@ -366,29 +357,8 @@
 
     .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,
@@ -397,6 +367,12 @@
             display: block;
         }
 
+        .k-listgroup-title {
+            padding: $listgroup-item-padding-y $listgroup-item-padding-x;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
         .k-listgroup {
 
             .k-listgroup-item {
@@ -404,23 +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-list-title {
+                padding: 0;
+            }
+
+            .k-list-filter {
+                padding: 0;
+                display: flex;
+                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 )};
             }
         }
 
@@ -444,7 +453,6 @@
         }
 
         // Pager
-
         .k-pager-wrap.k-pager-sm {
             justify-content: center;
 
@@ -454,39 +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-header-cancel .k-i-arrow-chevron-left,
+            .k-listgroup-item .k-select .k-i-arrow-chevron-right {
+                transform: scaleX( -1 );
             }
 
             .k-scheduler-mobile {
@@ -508,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;

package/scss/appbar/_layout.scss

@@ -54,9 +54,12 @@
 
         // Input
         .k-input,
-        .k-picker:not(.k-colorpicker) {
+        .k-picker {
             width: 10em;
         }
+        .k-color-picker {
+            width: min-content;
+        }
 
     }
 

package/scss/appbar/_variables.scss

@@ -2,7 +2,7 @@
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
 $appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-padding-x: map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;

package/scss/autocomplete/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("autocomplete/theme") {
+@include exports( "autocomplete/theme" ) {
 
     // Autocomplete
     .k-autocomplete {}

package/scss/autocomplete/_variables.scss

@@ -1,20 +1 @@
 // Autocomplete
-$autocomplete-bg: $kendo-input-bg !default;
-$autocomplete-text: $kendo-input-text !default;
-$autocomplete-border: $kendo-input-border !default;
-$autocomplete-shadow: $kendo-input-shadow !default;
-
-$autocomplete-hovered-bg: $kendo-input-hover-bg !default;
-$autocomplete-hovered-text: $kendo-input-hover-text !default;
-$autocomplete-hovered-border: $kendo-input-hover-border !default;
-$autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
-
-$autocomplete-focused-bg: $kendo-input-focus-bg !default;
-$autocomplete-focused-text: $kendo-input-focus-text !default;
-$autocomplete-focused-border: $kendo-input-focus-border !default;
-$autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
-
-$autocomplete-disabled-bg: null !default;
-$autocomplete-disabled-text: null !default;
-$autocomplete-disabled-border: null !default;
-$autocomplete-disabled-shadow: null !default;

package/scss/button/_layout.scss

@@ -19,6 +19,7 @@
         outline: none;
         -webkit-appearance: none;
         position: relative;
+        transition: $kendo-button-transition;
 
         &:disabled,
         &.k-disabled {
@@ -55,7 +56,24 @@
 
     .k-button-text {}
 
-    .k-button-icontext {}
+
+    // Button arrow
+    .k-button-arrow {
+        padding-left: $kendo-button-arrow-padding-x;
+        padding-right: $kendo-button-arrow-padding-x;
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .k-button > .k-button-arrow {
+        margin-inline-start: -$kendo-button-arrow-padding-x;
+        margin-inline-end: -$kendo-button-padding-x;
+    }
+    .k-icon-button > .k-button-arrow {
+        margin-inline-start: 0;
+        margin-inline-end: -$kendo-button-padding-y;
+    }
 
 
     // Sizes
@@ -101,15 +119,13 @@
     }
 
 
-    // Shapes
-    .k-button-rectangle { }
-
+    // Button shape
     .k-button-square {
         aspect-ratio: 1;
     }
 
 
-    // Menu Button
+    // Menu button
     .k-menu-button,
     .k-dropdown-button {
         outline: 0;
@@ -134,67 +150,74 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-button:not(:first-child):not(:last-child) {
-            @include border-radius( 0 );
-        }
-
-        .k-button ~ .k-button {
+        > .k-button + .k-button {
             margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
         }
 
-        .k-button:hover,
-        .k-button.k-hover,
-        .k-button:active,
-        .k-button.k-active,
-        .k-button.k-selected,
-        .k-button:focus,
-        .k-button.k-focus {
+        > .k-button:hover,
+        > .k-button.k-hover,
+        > .k-button:focus,
+        > .k-button.k-focus,
+        > .k-button:active,
+        > .k-button.k-active,
+        > .k-button.k-selected {
             z-index: 2;
         }
 
-        .k-group-start:not(:only-child),
-        .k-button:first-child:not(:only-child) {
-            @include border-right-radius( 0 );
+        .k-button:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+        > .k-button:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
-        .k-group-end:not(:only-child),
-        .k-button:last-child:not(:only-child) {
-            @include border-left-radius( 0 );
+        > .k-button:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
         }
     }
 
     .k-button-group-stretched {
-        display: flex;
+        width: 100%;
 
-        .k-button {
-            display: inline-block;
+        > * {
             flex: 1 0 0%;
             overflow: hidden;
-            text-overflow: ellipsis;
-
-            > .k-icon {
-                vertical-align: text-bottom;
-            }
         }
     }
 
 
     // Split button
     .k-split-button {
-        @include border-radius( 0 );
 
-        > .k-button:first-child {
-            @include border-right-radius( 0 );
-        }
+        .k-split-button-arrow {
+            padding: $kendo-button-arrow-padding-y $kendo-button-arrow-padding-x;
+            width: auto;
+            flex: none;
 
-        > .k-button:last-child {
-            @include border-left-radius( 0 );
+            .k-button-icon {
+                min-width: 0;
+            }
         }
     }
 
 
-    // Flat Buttons
+    // Flat button
     .k-button-flat {
-        transition: $kendo-button-color-transition;
+        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
 
         // Overlay background
         &::before {
@@ -203,81 +226,44 @@
 
         // Focus ring
         &::after {
+            box-shadow: inset 0 0 0 2px currentColor;
             display: block !important; // sass-lint:disable-line no-important
         }
 
-        &:focus::after ,
+        &:focus::after,
         &.k-focus::after {
             opacity: .12;
         }
     }
 
 
-    // Link Buttons
-    .k-button-link {
-        &,
-        &:hover,
-        &.k-hover,
-        &:focus,
-        &.k-focus {
-            text-decoration: underline;
-        }
-
-        // Focus ring
-        &::after {
-            display: block !important; // sass-lint:disable-line no-important
-        }
-
-        &:focus::after ,
-        &.k-focus::after {
-            opacity: .12;
-        }
+    // Outline button
+    .k-button-outline {
+        border-color: currentColor;
+        color: inherit;
+        background: none;
     }
 
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Button group
-        .k-button-group {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            .k-group-start,
-            .k-button:first-child {
-                @include border-right-radius( $kendo-button-border-radius );
-            }
-
-            .k-group-end,
-            .k-button:last-child {
-                @include border-left-radius( $kendo-button-border-radius );
-            }
 
-            .k-group-start.k-group-end,
-            .k-button:first-child:last-child {
-                @include border-radius( $kendo-button-border-radius );
-            }
+    // Link button
+    .k-button-link {
+        border-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        background: none;
 
+        &:hover,
+        &.k-hover {
+            text-decoration: underline;
         }
+    }
 
-        // Split button
-        .k-split-button {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            // k-button
-            > .k-button:first-child {
-                @include border-right-radius( $kendo-button-border-radius );
-            }
 
-            > .k-split-button-arrow,
-            > .k-button:last-child {
-                @include border-left-radius( $kendo-button-border-radius );
-            }
+    // IE
+    .k-ie .k-button-group,
+    .k-ie .k-split-button {
+        .k-button {
+            @include border-radius( 0 );
         }
     }