@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0-dev.1

package/scss/grid/_theme.scss

@@ -8,26 +8,8 @@
 
     @include kendo-grid--theme-base();
 
-    $kendo-grid-filter-button-focus: rgba( black, .12 ) !default;
-
     .k-grid {
 
-        .k-table {
-            td:focus,
-            td.k-focus,
-            th:focus,
-            th.k-focus {
-                &::after {
-                    background-color: $kendo-grid-hover-bg;
-                }
-            }
-        }
-
-        .k-grid-pager:focus,
-        .k-grid-pager.k-focus {
-            color: inherit;
-        }
-
         .k-table-th,
         td,
         .k-table-td {
@@ -66,37 +48,6 @@
     }
 
     .k-grid-header {
-        .k-sorted,
-        .k-link:hover {
-            color: $kendo-grid-text;
-
-            > .k-icon {
-                color: inherit;
-            }
-        }
-
-        .k-grid-filter,
-        .k-table-th-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            &:hover {
-                color: $kendo-grid-text;
-                background-color: transparent;
-            }
-
-            &:focus,
-            &.k-focus {
-                color: $kendo-grid-text;
-                background-color: $kendo-grid-filter-button-focus;
-                box-shadow: none;
-            }
-
-            &.k-active {
-                color: k-color(on-primary);
-                background-color: k-color(primary);
-            }
-        }
-
         .k-table-thead > .k-table-row:not(:only-child) > .k-table-th,
         .k-table-thead > .k-table-row:not(:only-child) > .k-table-td {
             border-inline-start-color: $kendo-grid-border;
@@ -127,7 +78,6 @@
         }
     }
 
-    .k-grouping-dropclue,
     .k-reorder-cue {
         border-color: k-color(primary);
 
@@ -141,18 +91,25 @@
         }
     }
 
-    .k-resize-handle:hover .k-resize-handle-inner {
-        background-color: k-color(primary);
-    }
+    .k-grouping-dropclue {
+        &::before {
+            border-color: k-color(primary) transparent transparent;
+        }
 
-    .k-column-resizer:hover {
-        color: k-color(primary);
+        &::after {
+            background-color: k-color(primary);
+        }
     }
 
+    .k-resize-handle:hover .k-resize-handle-inner,
     .k-reorder-cue {
         background-color: k-color(primary);
     }
 
+    .k-column-resizer:hover {
+        color: k-color(primary);
+    }
+
     .k-columnmenu-item {
         &.k-selected {
             @include fill(

package/scss/grid/_variables.scss

@@ -27,12 +27,12 @@ $kendo-grid-padding-y: $kendo-table-md-cell-padding-y !default;
 $kendo-grid-header-padding-x: $kendo-grid-padding-x !default;
 /// The vertical padding of the Grid header.
 /// @group grid
-$kendo-grid-header-padding-y: k-spacing(4) !default;
+$kendo-grid-header-padding-y: $kendo-grid-padding-y !default;
 
 
 /// The horizontal padding of the Grid grouping header.
 /// @group grid
-$kendo-grid-grouping-header-padding-x: k-spacing(2) !default;
+$kendo-grid-grouping-header-padding-x: $kendo-grid-padding-x !default;
 /// The vertical padding of the Grid grouping header.
 /// @group grid
 $kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-x !default;
@@ -56,26 +56,26 @@ $kendo-grid-filter-cell-padding-y: $kendo-grid-padding-y !default;
 $kendo-grid-edit-cell-padding-x: $kendo-grid-cell-padding-x !default;
 /// The vertical padding of the Grid filter cell.
 /// @group grid
-$kendo-grid-edit-cell-padding-y: k-spacing(1.5) !default;
+$kendo-grid-edit-cell-padding-y: k-spacing(2) !default;
 
 $kendo-grid-group-drop-hint-size: 6px !default;
-$kendo-grid-group-drop-hint-line-size: math.div( $kendo-grid-group-drop-hint-size, 3 ) !default;
+$kendo-grid-group-drop-hint-line-size: calc( #{$kendo-grid-group-drop-hint-size} / 3 ) !default;
 $kendo-grid-group-drop-hint-height: $kendo-chip-calc-size !default;
-$kendo-grid-group-drop-hint-top: calc( ( #{$kendo-chip-calc-size} + calc( #{$kendo-grid-grouping-header-padding-y} * 2 ) - #{$kendo-grid-group-drop-hint-height} ) / 2) !default;
+$kendo-grid-group-drop-hint-top: null !default;
 
 
-$kendo-grid-sm-padding-x: k-spacing(2.5) !default;
-$kendo-grid-sm-padding-y: k-spacing(1) !default;
+$kendo-grid-sm-padding-x: k-spacing(2) !default;
+$kendo-grid-sm-padding-y: k-spacing(2) !default;
 $kendo-grid-sm-header-padding-x: $kendo-grid-sm-padding-x !default;
-$kendo-grid-sm-header-padding-y: k-spacing(2.5) !default;
-$kendo-grid-sm-grouping-header-padding-x: k-spacing(1.5) !default;
+$kendo-grid-sm-header-padding-y: $kendo-grid-sm-padding-y !default;
+$kendo-grid-sm-grouping-header-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-x !default;
 $kendo-grid-sm-cell-padding-x: $kendo-grid-sm-padding-x !default;
 $kendo-grid-sm-cell-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-filter-cell-padding-x: $kendo-grid-sm-padding-x !default;
-$kendo-grid-sm-filter-cell-padding-y: k-spacing(2) !default;
+$kendo-grid-sm-filter-cell-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-edit-cell-padding-x: $kendo-grid-sm-cell-padding-x !default;
-$kendo-grid-sm-edit-cell-padding-y: k-spacing(1) !default;
+$kendo-grid-sm-edit-cell-padding-y: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-group-dropclue-height: calc( #{$kendo-chip-sm-calc-size} + #{$kendo-grid-group-drop-hint-size}) !default;
 $kendo-grid-sm-selection-aggregates-padding-x: $kendo-grid-sm-padding-y !default;
 $kendo-grid-sm-selection-aggregates-padding-y: $kendo-grid-sm-padding-y !default;
@@ -135,7 +135,7 @@ $kendo-grid-sizes: (
     ),
 ) !default;
 
-$kendo-grid-header-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-grid-header-font-size: var( --kendo-font-size-md, inherit ) !default;
 $kendo-grid-header-first-border: 1px !default;
 $kendo-grid-header-menu-icon-spacing: k-spacing(3.5) !default;
 
@@ -306,7 +306,7 @@ $kendo-grid-column-menu-group-header-border: $kendo-popup-border !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default;
 
-$kendo-grid-column-menu-tabbed-bg: k-color(app-surface) !default;
+$kendo-grid-column-menu-tabbed-bg: k-color(base) !default;
 
 $kendo-grid-drag-cell-width: ($kendo-icon-size * 3) !default;
 

package/scss/imageeditor/_variables.scss

@@ -25,7 +25,7 @@ $kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 $kendo-image-editor-resize-handle-size: 15px !default;
 
-$kendo-image-editor-bg: k-color(surface-alt) !default;
+$kendo-image-editor-bg: k-color(surface) !default;
 $kendo-image-editor-text: k-color(on-app-surface) !default;
 $kendo-image-editor-border: k-color(border) !default;
 
@@ -33,7 +33,7 @@ $kendo-image-editor-content-bg: #c6c6c6 !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 
-$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
+$kendo-image-editor-action-pane-bg: k-color(surface) !default;
 $kendo-image-editor-action-pane-text: null !default;
 $kendo-image-editor-action-pane-border: null !default;
 

package/scss/input/_layout.scss

@@ -32,12 +32,6 @@
             background: none;
             border-color: transparent;
         }
-
-        &:disabled,
-        &[disabled],
-        &.k-disabled  {
-            border-bottom-style: dashed;
-        }
     }
 
 
@@ -45,19 +39,21 @@
     .k-input,
     .k-picker {
 
+        .k-button {
+            &:hover,
+            &.k-hover,
+            &:focus,
+            &.k-focus {
+                box-shadow: none;
+                outline: none;
+            }
+        }
+
         &:disabled,
         &[disabled],
         &.k-disabled {
-            opacity: 1;
             filter: none;
         }
-
-        .k-input-button,
-        .k-input-spinner .k-spinner-increase,
-        .k-input-spinner .k-spinner-decrease,
-        .k-input-values .k-chip {
-            color: inherit;
-        }
     }
 
 

package/scss/input/_variables.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
+@use "../button/_variables.scss" as *;
 
 // Input
 
@@ -25,23 +26,23 @@ $kendo-input-padding-x: k-spacing(4) !default;
 $kendo-input-sm-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-x: k-spacing(4) !default;
+$kendo-input-md-padding-x: $kendo-input-padding-x !default;
 /// The horizontal padding of the large Input components.
 /// @group input
 $kendo-input-lg-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the Input components.
 /// @group input
-$kendo-input-padding-y: k-spacing(2) !default;
+$kendo-input-padding-y: calc( k-spacing(1.5) + k-spacing(1px) ) !default;
 /// The vertical padding of the small Input components.
 /// @group input
-$kendo-input-sm-padding-y: k-spacing(1.5) !default;
+$kendo-input-sm-padding-y: calc( k-spacing(1) + k-spacing(1px) ) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-y: k-spacing(2) !default;
+$kendo-input-md-padding-y: $kendo-input-padding-y !default;
 /// The vertical padding of the large Input components.
 /// @group input
-$kendo-input-lg-padding-y: k-spacing(2) !default;
+$kendo-input-lg-padding-y: calc( k-spacing(2) + k-spacing(1px) ) !default;
 
 /// The font family of the Input components.
 /// @group input
@@ -55,23 +56,23 @@ $kendo-input-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-input-sm-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The font size of the medium Input components.
 /// @group input
-$kendo-input-md-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-input-md-font-size: $kendo-input-font-size !default;
 /// The font size of the large Input components.
 /// @group input
 $kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the Input components.
 /// @group input
-$kendo-input-line-height: 1.25 !default;
+$kendo-input-line-height: var( --kendo-line-height-lg, inherit ) !default;
 /// The line height of the small Input components.
 /// @group input
-$kendo-input-sm-line-height: 1.25 !default;
+$kendo-input-sm-line-height: var( --kendo-line-height-lg, inherit ) !default;
 /// The line height of the medium Input components.
 /// @group input
-$kendo-input-md-line-height: 1.25 !default;
+$kendo-input-md-line-height: $kendo-input-line-height !default;
 /// The line height of the large Input components.
 /// @group input
-$kendo-input-lg-line-height: 1.5 !default;
+$kendo-input-lg-line-height: var( --kendo-line-height-lg, inherit ) !default;
 
 /// The calculated height of the Input.
 /// @group input
@@ -88,24 +89,24 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-sm-padding-y,
         font-size: $kendo-input-sm-font-size,
         line-height: $kendo-input-sm-line-height,
-        button-padding-x: k-spacing(1),
-        button-padding-y: $kendo-input-sm-padding-y
+        button-padding-x: $kendo-button-sm-padding-y,
+        button-padding-y: $kendo-button-sm-padding-y
     ),
     md: (
         padding-x: $kendo-input-md-padding-x,
         padding-y: $kendo-input-md-padding-y,
         font-size: $kendo-input-md-font-size,
         line-height: $kendo-input-md-line-height,
-        button-padding-x: k-spacing(1),
-        button-padding-y: $kendo-input-md-padding-y
+        button-padding-x: $kendo-button-md-padding-y,
+        button-padding-y: $kendo-button-md-padding-y
     ),
     lg: (
         padding-x: $kendo-input-lg-padding-x,
         padding-y: $kendo-input-lg-padding-y,
         font-size: $kendo-input-lg-font-size,
         line-height: $kendo-input-lg-line-height,
-        button-padding-x: k-spacing(1),
-        button-padding-y: $kendo-input-lg-padding-y
+        button-padding-x: $kendo-button-lg-padding-y,
+        button-padding-y: $kendo-button-lg-padding-y
     )
 ) !default;
 
@@ -130,10 +131,10 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: $kendo-input-text !default;
+$kendo-input-hover-border: k-color(on-app-surface)!default;
 /// The shadow of the hovered Input components.
 /// @group input
-$kendo-input-hover-shadow: unset !default;
+$kendo-input-hover-shadow: null !default;
 
 /// The background color of the focused Input components.
 /// @group input
@@ -146,7 +147,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: k-color(primary) !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: unset !default;
+$kendo-input-focus-shadow: null !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -156,13 +157,13 @@ $kendo-input-selected-bg: null !default;
 $kendo-input-selected-text: null !default;
 /// The background color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 3%, transparent) !default;
+$kendo-input-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 11%, transparent) !default;
 /// The text color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-text: color-mix(in srgb, k-color(on-app-surface) 27%, transparent) !default;
+$kendo-input-disabled-text: null !default;
 /// The border color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-border: color-mix(in srgb, k-color(on-app-surface) 3%, transparent) !default;
+$kendo-input-disabled-border: null !default;
 /// The gradient of the disabled Input components.
 /// @group input
 $kendo-input-disabled-gradient: null !default;
@@ -246,7 +247,7 @@ $kendo-input-placeholder-opacity: 1 !default;
 
 /// The color of the Input clear value icon.
 /// @group input
-$kendo-input-clear-value-text: null !default;
+$kendo-input-clear-value-text: k-color(base-on-surface) !default;
 /// The opacity of the Input clear value icon.
 /// @group input
 $kendo-input-clear-value-opacity: .5 !default;
@@ -259,20 +260,20 @@ $kendo-input-clear-value-hover-opacity: 1 !default;
 
 /// The vertical margin of the clear value icon.
 /// @group input
-$kendo-input-values-margin-y: k-spacing(0.5) !default;
+$kendo-input-values-margin-y: null !default;
 /// The horizontal margin of the clear value icon.
 /// @group input
-$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
+$kendo-input-values-margin-x: null !default;
 
 /// The width of the Input button.
 /// @group input
-$kendo-input-button-width: unset !default;
+$kendo-input-button-width: null !default;
 /// The border width of the Input button.
 /// @group input
 $kendo-input-button-border-width: 1px !default;
 /// The width of the Input spinner button.
 /// @group input
-$kendo-input-spinner-width: unset !default;
+$kendo-input-spinner-width: null !default;
 /// The icon offset of the Input spinner button.
 /// @group input
 $kendo-input-spinner-icon-offset: null !default;
@@ -282,7 +283,7 @@ $kendo-input-spinner-icon-offset: null !default;
 $kendo-input-separator-text: k-color(border) !default;
 /// The opacity of the Input separator.
 /// @group input
-$kendo-input-separator-opacity: .5 !default;
+$kendo-input-separator-opacity: 0 !default;
 
 /// The text color of the Input prefix.
 /// @group input
@@ -312,7 +313,7 @@ $kendo-picker-border: $kendo-input-border !default;
 $kendo-picker-gradient: none !default;
 /// The shadow of the Picker components.
 /// @group picker
-$kendo-picker-shadow: $kendo-input-shadow !default;
+$kendo-picker-shadow: null !default;
 
 /// The background color of the hovered Picker components.
 /// @group picker
@@ -374,10 +375,10 @@ $kendo-picker-outline-border: $kendo-picker-border !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-bg: unset !default;
+$kendo-picker-outline-hover-bg: null !default;
 /// The text color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-text: unset !default;
+$kendo-picker-outline-hover-text: null !default;
 /// The border color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-hover-border !default;
@@ -393,7 +394,7 @@ $kendo-picker-outline-focus-text: null !default;
 $kendo-picker-outline-focus-border: $kendo-picker-focus-border !default;
 /// The shadow of the outline focused Picker components.
 /// @group picker
-$kendo-picker-outline-focus-shadow: unset !default;
+$kendo-picker-outline-focus-shadow: null !default;
 
 /// The background color of the outline hovered and focused Picker components.
 /// @group picker
@@ -417,7 +418,7 @@ $kendo-picker-flat-border: $kendo-picker-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: unset !default;
+$kendo-picker-flat-hover-bg: null !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
@@ -436,7 +437,7 @@ $kendo-picker-flat-focus-text: null !default;
 $kendo-picker-flat-focus-border: $kendo-picker-focus-border !default;
 /// The shadow of the flat focused Picker components.
 /// @group picker
-$kendo-picker-flat-focus-shadow: unset !default;
+$kendo-picker-flat-focus-shadow: null !default;
 
 /// The background color of the flat hovered and focused Picker components.
 /// @group picker

package/scss/list/_theme.scss

@@ -11,7 +11,7 @@
     .k-list-item {
         &.k-selected:hover,
         &.k-selected.k-hover {
-            background-color: k-color(base-active);
+            background-color: $kendo-list-item-hover-bg;
         }
     }
 }