@progress/kendo-theme-core 13.2.0-dev.3 → 14.0.0-dev.0

package/scss/components/dataviz/_variables.scss

@@ -68,6 +68,7 @@ $kendo-series-29: null !default;
 $kendo-series-30: null !default;
 
 $kendo-chart-border-width: null !default;
+$kendo-chart-border-radius: null !default;
 $kendo-chart-font-family: null !default;
 $kendo-chart-font-size: null !default;
 $kendo-chart-line-height: null !default;
@@ -122,6 +123,7 @@ $kendo-treemap-line-height: null !default;
 
 $kendo-treemap-padding-x: null !default;
 $kendo-treemap-padding-y: null !default;
+$kendo-treemap-border-radius: null !default;
 
 $kendo-treemap-text: null !default;
 $kendo-treemap-bg: null !default;

package/scss/components/dialog/_theme.scss

@@ -7,18 +7,6 @@
 @mixin kendo-dialog--theme-base() {
     .k-dialog {
         background-color: $kendo-dialog-bg;
-
-        // Dialog theme colors
-        @each $name in $kendo-dialog-theme-colors {
-
-            #{k-when-default($kendo-dialog-default-theme-color, $name)}
-            &.k-dialog-#{$name} {
-                .k-dialog-titlebar {
-                    color: k-color(on-#{$name});
-                    background-color: k-color(#{$name});
-                }
-            }
-        }
     }
 
     // Dialog titlebar

package/scss/components/dialog/_variables.scss

@@ -1,7 +1,5 @@
 // Dialog
 
-$kendo-dialog-default-theme-color: null !default;
-
 $kendo-dialog-titlebar-bg: null !default;
 $kendo-dialog-titlebar-text: null !default;
 $kendo-dialog-titlebar-border: null !default;
@@ -12,7 +10,3 @@ $kendo-dialog-buttongroup-border-width: null !default;
 $kendo-dialog-button-spacing: null !default;
 
 $kendo-dialog-bg: null !default;
-
-/// The theme colors map of the Dialog.
-/// @group dialog
-$kendo-dialog-theme-colors: ("primary", "light", "dark") !default;

package/scss/components/dock-manager/_layout.scss

@@ -11,6 +11,7 @@
         height: 100%;
         border-width: $kendo-dock-manager-border-width;
         border-style: $kendo-dock-manager-border-style;
+        border-radius: $kendo-dock-manager-border-radius;
         position: relative;
         display: flex;
         flex-flow: row nowrap;

package/scss/components/dock-manager/_variables.scss

@@ -1,6 +1,7 @@
 $kendo-dock-manager-border-width: null !default;
 $kendo-dock-manager-border-style: null !default;
 $kendo-dock-manager-border: null !default;
+$kendo-dock-manager-border-radius: null !default;
 
 $kendo-dock-manager-pane-header-padding-y: null !default;
 $kendo-dock-manager-pane-header-padding-x: null !default;

package/scss/components/dropzone/_layout.scss

@@ -15,6 +15,7 @@
         padding-inline: $kendo-dropzone-padding-x;
         border-width: $kendo-dropzone-border-width;
         border-style: solid;
+        border-radius: $kendo-dropzone-border-radius;
         box-sizing: border-box;
         font-size: $kendo-dropzone-font-size;
         font-family: $kendo-dropzone-font-family;

package/scss/components/dropzone/_variables.scss

@@ -3,6 +3,7 @@
 $kendo-dropzone-padding-x: null !default;
 $kendo-dropzone-padding-y: null !default;
 $kendo-dropzone-border-width: null !default;
+$kendo-dropzone-border-radius: null !default;
 $kendo-dropzone-min-height: null !default;
 
 $kendo-dropzone-font-family: null !default;

package/scss/components/editor/_layout.scss

@@ -14,6 +14,7 @@
     // Base
     .k-editor {
         border-width: $kendo-editor-border-width;
+        border-radius: $kendo-editor-border-radius;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;

package/scss/components/editor/_variables.scss

@@ -1,6 +1,7 @@
 // Editor
 
 $kendo-editor-border-width: null !default;
+$kendo-editor-border-radius: null !default;
 $kendo-editor-font-family: null !default;
 $kendo-editor-font-size: null !default;
 $kendo-editor-line-height: null !default;

package/scss/components/expansion-panel/_layout.scss

@@ -7,6 +7,7 @@
     .k-expander {
         border-width: $kendo-expander-border-width;
         border-style: solid;
+        border-radius: $kendo-expander-border-radius;
         box-sizing: border-box;
         overflow: hidden;
         outline: 0;
@@ -42,8 +43,8 @@
 
     // Title
     .k-expander-title {
-        text-transform: uppercase;
-        font-weight: 500;
+        text-transform: $kendo-expander-title-text-transform;
+        font-weight: $kendo-expander-title-font-weight;
     }
 
     // Expand / collapse icon

package/scss/components/expansion-panel/_variables.scss

@@ -2,6 +2,7 @@
 
 $kendo-expander-spacing-y: null !default;
 $kendo-expander-border-width: null !default;
+$kendo-expander-border-radius: null !default;
 $kendo-expander-font-family: null !default;
 $kendo-expander-font-size: null !default;
 $kendo-expander-line-height: null !default;
@@ -23,6 +24,9 @@ $kendo-expander-header-hover-bg: null !default;
 $kendo-expander-header-focus-bg: null !default;
 $kendo-expander-header-focus-shadow: null !default;
 
+$kendo-expander-title-font-weight: null !default;
+$kendo-expander-title-text-transform: null !default;
+
 $kendo-expander-title-text: null !default;
 
 $kendo-expander-header-sub-title-text: null !default;

package/scss/components/fab/_variables.scss

@@ -65,7 +65,7 @@ $kendo-fab-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
 
 /// The theme colors map of the FloatingActionButton.
 /// @group floating-action-button
-$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary") !default;
 
 /// The sizes map of the FloatingActionButton.
 /// @group floating-action-button

package/scss/components/file-box/_layout.scss

@@ -83,6 +83,7 @@
             display: flex;
             flex-direction: column;
             align-items: flex-start;
+            gap: $kendo-file-box-info-gap;
             text-align: start;
             flex: 1;
             overflow: hidden;

package/scss/components/file-box/_theme.scss

@@ -10,6 +10,10 @@
         background-color: $kendo-file-box-bg;
         color: $kendo-file-box-text;
         border-color: $kendo-file-box-border;
+
+        .k-file-size {
+            color: $kendo-file-box-size-text;
+        }
     }
 
     .k-file-box-wrapper-scrollable-start::after {

package/scss/components/file-box/_variables.scss

@@ -1,6 +1,7 @@
 $kendo-file-box-padding-x: null !default;
 $kendo-file-box-padding-y: null !default;
 $kendo-file-box-gap: null !default;
+$kendo-file-box-info-gap: null !default;
 $kendo-file-box-min-width: null !default;
 $kendo-file-box-max-width: null !default;
 $kendo-file-box-border-width: null !default;
@@ -15,5 +16,7 @@ $kendo-file-box-bg: null !default;
 $kendo-file-box-text: null !default;
 $kendo-file-box-border: null !default;
 
+$kendo-file-box-size-text: null !default;
+
 $kendo-file-box-wrapper-scroll-gradient: null !default;
 

package/scss/components/filemanager/_layout.scss

@@ -7,6 +7,7 @@
     // File Manager
     .k-filemanager {
         border-width: $kendo-file-manager-border-width;
+        border-radius: $kendo-file-manager-border-radius;
         border-style: solid;
         box-sizing: border-box;
         font-family: $kendo-file-manager-font-family;
@@ -14,6 +15,7 @@
         line-height: $kendo-file-manager-line-height;
         display: flex;
         flex-flow: column nowrap;
+        overflow: hidden;
     }
 
 
@@ -129,6 +131,7 @@
 
     // Filemanager grid
     .k-filemanager-grid {
+        border-radius: 0;
         border-width: 0;
         flex: 1 1 0%;
 

package/scss/components/filemanager/_variables.scss

@@ -2,6 +2,7 @@
 
 $kendo-file-manager-spacer: null !default;
 $kendo-file-manager-border-width: null !default;
+$kendo-file-manager-border-radius: null !default;
 $kendo-file-manager-font-family: null !default;
 $kendo-file-manager-font-size: null !default;
 $kendo-file-manager-line-height: null !default;

package/scss/components/filter/_theme.scss

@@ -7,6 +7,10 @@
     .k-filter {
         color: k-color(on-app-surface);
 
+        .k-filter-toolbar .k-toolbar {
+            border-radius: $kendo-filter-border-radius;
+        }
+
         .k-filter-preview-field {
             color: $kendo-filter-preview-field-text;
         }

package/scss/components/filter/_variables.scss

@@ -3,6 +3,8 @@
 $kendo-filter-padding-x: null !default;
 $kendo-filter-padding-y: null !default;
 
+$kendo-filter-border-radius: null !default;
+
 $kendo-filter-bottom-margin: null !default;
 $kendo-filter-line-size: null !default;
 

package/scss/components/forms/_layout.scss

@@ -40,6 +40,7 @@
         margin-left: $kendo-label-optional-margin-x;
         font-size: $kendo-label-optional-font-size;
         font-style: $kendo-label-optional-font-style;
+        font-weight: $kendo-label-optional-font-weight;
         align-self: center;
     }
 
@@ -62,6 +63,9 @@
             margin-block-end: $kendo-form-label-margin-bottom;
             display: flex;
             flex-flow: row nowrap;
+            font-size: $kendo-label-font-size;
+            font-weight: $kendo-label-font-weight;
+            line-height: $kendo-label-line-height;
         }
 
         .k-label + .k-radio {
@@ -81,6 +85,7 @@
             border-style: $kendo-form-legend-border-style;
             width: $kendo-form-legend-width;
             font-size: $kendo-form-legend-font-size;
+            font-weight: $kendo-form-legend-font-weight;
             text-transform: $kendo-form-legend-text-transform;
         }
 

package/scss/components/forms/_variables.scss

@@ -17,10 +17,15 @@ $kendo-form-legend-border-style: null !default;
 $kendo-form-legend-border-color: null !default;
 $kendo-form-legend-width: null !default;
 $kendo-form-legend-font-size: null !default;
+$kendo-form-legend-font-weight: null !default;
 $kendo-form-legend-text-transform: null !default;
 
 $kendo-form-label-margin-bottom: null !default;
 
+$kendo-label-font-size: null !default;
+$kendo-label-font-weight: null !default;
+$kendo-label-line-height: null !default;
+
 $kendo-form-hint-font-size: null !default;
 $kendo-form-hint-font-style: null !default;
 $kendo-form-hint-margin-top: null !default;
@@ -48,6 +53,7 @@ $kendo-inline-form-field-padding-y: null !default;
 $kendo-label-optional-margin-x: null !default;
 $kendo-label-optional-font-size: null !default;
 $kendo-label-optional-font-style: null !default;
+$kendo-label-optional-font-weight: null !default;
 
 
 $kendo-fieldset-margin: null !default;

package/scss/components/gantt/_layout.scss

@@ -17,6 +17,7 @@
 
     .k-gantt {
         border-width: $kendo-gantt-border-width;
+        border-radius: $kendo-gantt-border-radius;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -26,6 +27,7 @@
         display: flex;
         flex-flow: column nowrap;
         position: relative;
+        overflow: hidden;
         white-space: nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
@@ -64,6 +66,10 @@
             display: inline-block;
         }
 
+        // Grid
+        .k-grid {
+            border-radius: 0;
+        }
 
         // Splitbar
         .k-splitbar {

package/scss/components/gantt/_variables.scss

@@ -1,6 +1,7 @@
 // Gantt
 
 $kendo-gantt-border-width: null !default;
+$kendo-gantt-border-radius: null !default;
 $kendo-gantt-font-family: null !default;
 $kendo-gantt-font-size: null !default;
 $kendo-gantt-line-height: null !default;

package/scss/components/grid/_layout.scss

@@ -25,6 +25,7 @@
     .k-grid {
         border-width: $kendo-grid-border-width;
         border-style: solid;
+        border-radius: $kendo-grid-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-grid-font-family;
@@ -33,6 +34,7 @@
         display: flex;
         flex-direction: column;
         position: relative;
+        overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -83,6 +85,7 @@
         .k-table-tfoot {
             text-align: start;
             border-color: inherit;
+            color: inherit;
         }
 
         .k-table-row {
@@ -430,8 +433,10 @@
     // Toolbar
     .k-grid-toolbar {
         border-width: 0 0 $kendo-grid-toolbar-border-width;
+        border-radius: 0;;
         flex-shrink: 0;
     }
+
     .k-grid-toolbar-bottom {
         border-width: $kendo-grid-toolbar-border-width 0 0;
     }
@@ -786,12 +791,16 @@
 
     // Pager
     .k-grid-pager {
+        font-size: inherit;
         border-width: 1px 0 0;
         border-color: inherit;
-        font-size: inherit;
+        @include border-bottom-radius(inherit);
     }
+
     .k-grid-pager-top {
         border-width: 0 0 1px;
+        @include border-top-radius(inherit);
+        @include border-bottom-radius(0);
     }
 
     .k-grid-virtual .k-grid-content {
@@ -1494,6 +1503,7 @@
 
         .k-expander {
             border: 0;
+            border-radius: 0;
             background: inherit;
 
             .k-columnmenu-item {

package/scss/components/grid/_theme.scss

@@ -18,6 +18,7 @@
 
         .k-table {
             background-color: inherit;
+            color: inherit;
         }
 
         .k-table-th,
@@ -92,7 +93,7 @@
             }
 
             .k-grid-content-sticky {
-                border-color: $kendo-grid-sticky-border;
+                border-inline-color: $kendo-grid-sticky-border;
                 border-block-start-color: $kendo-grid-header-border;
             }
 
@@ -118,7 +119,7 @@
         .k-master-row {
             .k-grid-content-sticky {
                 background-color: $kendo-grid-sticky-bg;
-                border-color: $kendo-grid-sticky-border;
+                border-inline-color: $kendo-grid-sticky-border;
                 border-block-start-color: $kendo-grid-header-border;
             }
 
@@ -280,14 +281,22 @@
         @include fill($bg: $kendo-grid-bg );
     }
 
-    // Grouping
-    .k-grouping-header,
     .k-grid-add-row {
         color: $kendo-grid-header-text;
         background-color: $kendo-grid-header-bg;
         border-color: $kendo-grid-header-border;
     }
 
+    // Grouping
+    .k-grouping-header,
+    .k-grid-grouping-header {
+        @include fill(
+            $kendo-grid-grouping-header-text,
+            $kendo-grid-grouping-header-bg,
+            $kendo-grid-grouping-header-border
+        );
+    }
+
     .k-group-footer .k-table-td,
     .k-table-tbody .k-group-cell {
         @include fill(

package/scss/components/grid/_variables.scss

@@ -4,6 +4,7 @@
 $kendo-grid-default-size: null !default;
 
 $kendo-grid-border-width: null !default;
+$kendo-grid-border-radius: null !default;
 $kendo-grid-font-family: null !default;
 $kendo-grid-font-size: null !default;
 $kendo-grid-line-height: null !default;
@@ -17,6 +18,10 @@ $kendo-grid-header-padding-y: null !default;
 $kendo-grid-grouping-header-padding-x: null !default;
 $kendo-grid-grouping-header-padding-y: null !default;
 
+$kendo-grid-grouping-header-bg: null !default;
+$kendo-grid-grouping-header-text: null !default;
+$kendo-grid-grouping-header-border: null !default;
+
 $kendo-grid-cell-padding-x: null !default;
 $kendo-grid-cell-padding-y: null !default;
 

package/scss/components/imageeditor/_layout.scss

@@ -13,6 +13,7 @@
         padding-inline: $kendo-image-editor-padding-x;
         border-width: $kendo-image-editor-border-width;
         border-style: solid;
+        border-radius: $kendo-image-editor-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-image-editor-font-family;

package/scss/components/imageeditor/_variables.scss

@@ -5,6 +5,7 @@ $kendo-image-editor-padding-y: null !default;
 $kendo-image-editor-padding-x: null !default;
 
 $kendo-image-editor-border-width: null !default;
+$kendo-image-editor-border-radius: null !default;
 $kendo-image-editor-font-size: null !default;
 $kendo-image-editor-line-height: null !default;
 $kendo-image-editor-font-family: null !default;

package/scss/components/listbox/_layout.scss

@@ -51,8 +51,12 @@
 
         .k-list-scroller {
             width: 100%;
+            min-width: 0;
             min-height: 0;
             height: inherit;
+            padding-inline: $kendo-listbox-scroller-padding-x;
+            padding-block: $kendo-listbox-scroller-padding-y;
+            border-radius: $kendo-listbox-border-radius;
             border-width: $kendo-listbox-border-width;
             border-style: solid;
             box-sizing: border-box;

package/scss/components/listbox/_variables.scss

@@ -14,3 +14,7 @@ $kendo-listbox-bg: null !default;
 $kendo-listbox-border: null !default;
 
 $kendo-listbox-drop-hint-width: null !default;
+
+$kendo-listbox-scroller-padding-x: null !default;
+$kendo-listbox-scroller-padding-y: null !default;
+$kendo-listbox-border-radius: null !default;

package/scss/components/listview/_layout.scss

@@ -70,6 +70,7 @@
         border-width: 0;
         outline: 0;
         border-style: solid;
+        border-radius: $kendo-listview-item-border-radius;
         box-sizing: border-box;
         flex-shrink: 0;
         transition: color k-transition(snappy), border-color k-transition(snappy), background-color k-transition(snappy);

package/scss/components/listview/_variables.scss

@@ -22,3 +22,5 @@ $kendo-listview-item-focus-text: null !default;
 $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 $kendo-listview-item-focus-shadow: null !default;
+
+$kendo-listview-item-border-radius: null !default;

package/scss/components/loader/_layout.scss

@@ -420,8 +420,7 @@
 
     }
 
-    .k-loader-container,
-    .k-loader-container-overlay {
+    .k-loader-container {
         width: 100%;
         height: 100%;
         position: absolute;
@@ -431,10 +430,6 @@
         inset-inline-start: 0;
     }
 
-    // TODO: use k-overlay as a base class in rendering
-    .k-loader-container-overlay {
-        opacity: $kendo-overlay-opacity;
-    }
 
     .k-loader-container-inner {
         display: flex;
@@ -443,6 +438,14 @@
         z-index: k-z-index("base", 2);
     }
 
+    .k-loader-container-overlay {
+        position: absolute;
+    }
+
+    .k-loader-container-overlay + .k-loader-container-inner {
+        z-index: k-z-index("overlay");
+    }
+
     .k-loader-container-panel {
         border-width: $kendo-loader-container-panel-border-width;
         border-style: $kendo-loader-container-panel-border-style;

package/scss/components/loader/_variables.scss

@@ -56,4 +56,4 @@ $kendo-zindex-loading: null !default;
 
 /// The theme colors map of the Loader.
 /// @group loader
-$kendo-loader-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-loader-theme-colors: ("base", "primary", "secondary", "tertiary") !default;

package/scss/components/mediaplayer/_layout.scss

@@ -9,6 +9,7 @@
     .k-mediaplayer {
         border-width: $kendo-media-player-border-width;
         border-style: solid;
+        border-radius: $kendo-media-player-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-media-player-font-family;
@@ -38,6 +39,9 @@
     .k-mediaplayer-titlebar {
         padding-block: $kendo-media-player-titlebar-padding-y;
         padding-inline: $kendo-media-player-titlebar-padding-x;
+        font-size: $kendo-media-player-titlebar-font-size;
+        font-weight: $kendo-media-player-titlebar-font-weight;
+        line-height: $kendo-media-player-titlebar-line-height;
         position: absolute;
         z-index: k-z-index("base", 2);
         inset-block-start: 0;

package/scss/components/mediaplayer/_variables.scss

@@ -1,6 +1,7 @@
 // Media player
 
 $kendo-media-player-border-width: null !default;
+$kendo-media-player-border-radius: null !default;
 $kendo-media-player-font-family: null !default;
 $kendo-media-player-font-size: null !default;
 $kendo-media-player-line-height: null !default;
@@ -11,5 +12,8 @@ $kendo-media-player-border: null !default;
 
 $kendo-media-player-titlebar-padding-x: null !default;
 $kendo-media-player-titlebar-padding-y: null !default;
+$kendo-media-player-titlebar-font-size: null !default;
+$kendo-media-player-titlebar-font-weight: null !default;
+$kendo-media-player-titlebar-line-height: null !default;
 $kendo-media-player-titlebar-text: null !default;
 $kendo-media-player-titlebar-gradient: null !default;

package/scss/components/messagebox/_layout.scss

@@ -9,7 +9,9 @@
         padding-inline: $kendo-message-box-padding-x;
         border-width: $kendo-message-box-border-width;
         border-style: solid;
+        border-radius: $kendo-message-box-border-radius;
         box-sizing: border-box;
+        overflow: clip;
         font-size: $kendo-message-box-font-size;
         line-height: $kendo-message-box-line-height;
 

package/scss/components/messagebox/_theme.scss

@@ -11,19 +11,11 @@
         .k-messagebox {
             #{k-when-default($kendo-message-box-default-theme-color, $color-name)}
             &.k-messagebox-#{$color-name} {
-                @if $color-name == "inverse" {
-                    @include fill(
-                        k-color(dark-on-subtle),
-                        k-color(dark-subtle),
-                        k-color(dark-hover)
-                    );
-                } @else {
-                    @include fill(
-                        k-color(#{$color-name}-on-subtle),
-                        k-color(#{$color-name}-subtle),
-                        k-color(#{$color-name}-emphasis)
-                    );
-                }
+                @include fill(
+                    k-color(#{$color-name}-on-subtle),
+                    k-color(#{$color-name}-subtle),
+                    k-color(#{$color-name}-emphasis)
+                );
             }
         }
     }

package/scss/components/messagebox/_variables.scss

@@ -6,6 +6,7 @@ $kendo-message-box-margin: null !default;
 $kendo-message-box-padding-x: null !default;
 $kendo-message-box-padding-y: null !default;
 $kendo-message-box-border-width: null !default;
+$kendo-message-box-border-radius: null !default;
 
 $kendo-message-box-font-size: null !default;
 $kendo-message-box-line-height: null !default;
@@ -19,4 +20,4 @@ $kendo-message-box-link-text-decoration: null !default;
 
 /// The theme colors map of the MessageBox.
 /// @group message-box
-$kendo-message-box-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-message-box-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;