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

package/scss/dialog/_variables.scss

@@ -22,17 +22,21 @@ $kendo-dialog-buttongroup-padding-x: $kendo-actions-padding-x !default;
 $kendo-dialog-buttongroup-padding-y: $kendo-actions-padding-y !default;
 /// The width of the top border of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-border-width: 1px !default;
+$kendo-dialog-buttongroup-border-width: 0 !default;
 /// The spacing between the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 
+/// The background color of the Dialog.
+/// @group dialog
+$kendo-dialog-bg: k-color(surface) !default;
+
 /// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
-    "primary": map.get($kendo-theme-colors, "primary"),
-    "light": map.get($kendo-theme-colors, "light"),
-    "dark": map.get($kendo-theme-colors, "dark")
+    "primary": k-color(primary),
+    "light": k-color(light),
+    "dark": k-color(dark)
 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (
@@ -43,5 +47,6 @@ $kendo-dialog-theme-colors: (
     $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
     $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
     $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
+    $kendo-dialog-bg: $kendo-dialog-bg,
     $kendo-dialog-theme-colors: $kendo-dialog-theme-colors
 );

package/scss/dock-manager/_variables.scss

@@ -10,14 +10,14 @@ $kendo-dock-manager-border-width: 1px !default;
 $kendo-dock-manager-border-style: solid !default;
 /// The color of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border: $kendo-base-border !default;
+$kendo-dock-manager-border: k-color(border) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: k-spacing(1) !default;
+$kendo-dock-manager-pane-header-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-x: k-spacing(6) !default;
+$kendo-dock-manager-pane-header-padding-x: k-spacing(4) !default;
 /// The width of the border around the pane header in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
@@ -26,7 +26,7 @@ $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !
 $kendo-dock-manager-pane-header-border-style: solid !default;
 /// The background color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-bg: $kendo-component-bg !default;
+$kendo-dock-manager-pane-header-bg: k-color(surface) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -42,7 +42,7 @@ $kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit )
 $kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The font weight of the pane title in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
@@ -52,34 +52,34 @@ $kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-normal, nor
 $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
 /// The vertical padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-x !default;
+$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-y !default;
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-y: unset !default;
+$kendo-dock-manager-tabbed-pane-padding-y: k-spacing( 6 ) !default;
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-x: unset !default;
+$kendo-dock-manager-tabbed-pane-padding-x: null !default;
 
 /// The width of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-unpinned-container-width: 300px !default;
 /// The background-color of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
+$kendo-dock-manager-unpinned-container-bg: k-color(surface) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
+$kendo-dock-manager-unpinned-container-shadow: k-elevation(7) !default;
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-padding: k-spacing(1.5) !default;
+$kendo-dock-indicator-padding: k-spacing(2) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: $kendo-base-bg !default;
+$kendo-dock-indicator-bg: k-color(surface-alt) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: $kendo-color-primary !default;
+$kendo-dock-indicator-text: k-color(primary) !default;
 /// The outline width of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-outline-width: 1px !default;
@@ -91,14 +91,14 @@ $kendo-dock-indicator-outline-style: solid !default;
 $kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
 /// The box shadow of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;
+$kendo-dock-indicator-shadow: k-elevation(5) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), color.mix( $kendo-color-white, $kendo-color-primary, 8% )) !default;
+$kendo-dock-indicator-hover-bg: k-color(primary-hover) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+$kendo-dock-indicator-hover-text: k-color(on-primary) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager
@@ -111,10 +111,10 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary-active) 12%, transparent) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
+$kendo-dock-manager-dock-preview-border: k-color(primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with (
     $kendo-dock-manager-border-width: $kendo-dock-manager-border-width,

package/scss/draggable/_variables.scss

@@ -9,10 +9,10 @@ $kendo-drag-hint-border-width: 0px !default;
 $kendo-drag-hint-border-radius: 9999px !default;
 $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default;
-$kendo-drag-hint-line-height: math.div( 20, 14 ) !default;
+$kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-drag-hint-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-body-bg )) !default;
-$kendo-drag-hint-text: $kendo-body-text !default;
+$kendo-drag-hint-bg: k-color(base-subtle) !default;
+$kendo-drag-hint-text: k-color(on-app-surface) !default;
 $kendo-drag-hint-border: unset !default;
 $kendo-drag-hint-gradient: null !default;
 $kendo-drag-hint-shadow: k-elevation(3) !default;
@@ -28,7 +28,7 @@ $kendo-drop-hint-line-h-height: 1px !default;
 $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
 $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
-$kendo-drop-hint-bg: $kendo-color-primary !default;
+$kendo-drop-hint-bg: k-color(primary) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with (
     $kendo-drag-hint-padding-x: $kendo-drag-hint-padding-x,

package/scss/drawer/_layout.scss

@@ -1,4 +1,6 @@
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-drawer--layout() {

package/scss/drawer/_theme.scss

@@ -6,15 +6,4 @@
 
     @include kendo-drawer--theme-base();
 
-    .k-drawer-item {
-        &.k-selected {
-
-            &:focus,
-            &.k-focus {
-                background-color: $kendo-drawer-focus-bg;
-                box-shadow: $kendo-drawer-focus-shadow;
-            }
-        }
-    }
-
 }

package/scss/drawer/_variables.scss

@@ -5,16 +5,16 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: $kendo-component-bg !default;
+$kendo-drawer-bg: k-color(surface) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: $kendo-component-text !default;
+$kendo-drawer-text: k-color(subtle) !default;
 /// The border color of the Drawer.
 /// @group drawer
-$kendo-drawer-border: $kendo-component-border !default;
+$kendo-drawer-border: k-color(border) !default;
 /// The border width of the Drawer.
 /// @group drawer
-$kendo-drawer-border-width: 1px !default;
+$kendo-drawer-border-width: 0 !default;
 
 /// The font family of the Drawer.
 /// @group drawer
@@ -28,39 +28,51 @@ $kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-x: null !default;
+$kendo-drawer-content-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: null !default;
+$kendo-drawer-content-padding-y: k-spacing(3) !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-width: 7px !default;
+$kendo-drawer-scrollbar-width: 8px !default;
 /// The color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+$kendo-drawer-scrollbar-color: k-color(dark-emphasis) !default;
 /// The background color of the Drawer scrollbar thumb.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: #dedede !default;
+$kendo-drawer-scrollbar-bg: transparent !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-radius: 20px !default;
+$kendo-drawer-scrollbar-radius: k-border-radius( full ) !default;
 /// The hover color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
+$kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-color !default;
 
+/// The horizontal padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-x: k-spacing(3) !default;
+/// The vertical padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-y: k-spacing(3) !default;
 /// The horizontal padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-padding-y: k-spacing(3) !default;
+$kendo-drawer-item-padding-y: k-spacing(4) !default;
+/// The spacing between the items in the Drawer item.
+/// @group drawer
+$kendo-drawer-item-spacing: k-spacing(3) !default;
 /// The font size of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
 /// The line height of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-drawer-item-line-height: $kendo-drawer-line-height !default;
+/// The font weight of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-font-weight: var( --kendo-font-weight-medium, 500 ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
@@ -68,45 +80,52 @@ $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 /// The count of the Drawer item levels.
 /// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
+/// The border radius of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-border-radius: k-border-radius(full) !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
-$kendo-drawer-icon-padding-x: k-spacing(0) !default;
+$kendo-drawer-icon-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Drawer icon.
 /// @group drawer
 $kendo-drawer-icon-padding-y: k-spacing(1) !default;
 
 /// The initial width of the mini Drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size}) !default;
+$kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size} + 2 * #{$kendo-drawer-icon-padding-x} + 2 * #{$kendo-drawer-items-padding-x}) !default;
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-text: $kendo-hover-text !default;
+$kendo-drawer-hover-text: $kendo-drawer-text !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-focus-bg: $kendo-hover-bg !default;
+$kendo-drawer-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
 $kendo-drawer-focus-shadow: none !default;
 
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-bg: unset !default;
+$kendo-drawer-selected-bg: k-color(secondary) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-text: $kendo-color-secondary !default;
+$kendo-drawer-selected-text: k-color(on-secondary) !default;
 
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-selected-hover-bg: k-color(secondary-hover) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
+$kendo-drawer-selected-hover-text: $kendo-drawer-selected-text !default;
+
+/// The background color of the selected and focused Drawer item.
+/// @group drawer
+$kendo-drawer-selected-focus-bg: k-color(secondary-active) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (
     $kendo-drawer-bg: $kendo-drawer-bg,
@@ -123,12 +142,17 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
     $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg,
     $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius,
     $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color,
+    $kendo-drawer-items-padding-x: $kendo-drawer-items-padding-x,
+    $kendo-drawer-items-padding-y: $kendo-drawer-items-padding-y,
     $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x,
     $kendo-drawer-item-padding-y: $kendo-drawer-item-padding-y,
+    $kendo-drawer-item-spacing: $kendo-drawer-item-spacing,
     $kendo-drawer-item-font-size: $kendo-drawer-item-font-size,
     $kendo-drawer-item-line-height: $kendo-drawer-item-line-height,
+    $kendo-drawer-item-font-weight: $kendo-drawer-item-font-weight,
     $kendo-drawer-item-level-padding-x: $kendo-drawer-item-level-padding-x,
     $kendo-drawer-item-level-count: $kendo-drawer-item-level-count,
+    $kendo-drawer-item-border-radius: $kendo-drawer-item-border-radius,
     $kendo-drawer-icon-padding-x: $kendo-drawer-icon-padding-x,
     $kendo-drawer-icon-padding-y: $kendo-drawer-icon-padding-y,
     $kendo-drawer-mini-initial-width: $kendo-drawer-mini-initial-width,
@@ -139,5 +163,6 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
     $kendo-drawer-selected-bg: $kendo-drawer-selected-bg,
     $kendo-drawer-selected-text: $kendo-drawer-selected-text,
     $kendo-drawer-selected-hover-bg: $kendo-drawer-selected-hover-bg,
-    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text
+    $kendo-drawer-selected-hover-text: $kendo-drawer-selected-hover-text,
+    $kendo-drawer-selected-focus-bg: $kendo-drawer-selected-focus-bg
 );

package/scss/dropzone/_variables.scss

@@ -25,27 +25,27 @@ $kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the DropZone.
 /// @group dropzone
-$kendo-dropzone-line-height: math.div( 20, 14 ) !default;
+$kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 )) !default;
+$kendo-dropzone-bg: k-color(surface) !default;
 /// The text color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-text: $kendo-base-text !default;
+$kendo-dropzone-text: k-color(on-app-surface) !default;
 /// The border color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border: $kendo-base-border !default;
+$kendo-dropzone-border: k-color(border) !default;
 
 /// The spacing below the DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-spacing: k-spacing(6) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) !default;
+$kendo-dropzone-icon-text: k-color(subtle) !default;
 /// The text color of the hovered DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
+$kendo-dropzone-icon-hover-text: k-color(primary) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone
@@ -65,7 +65,7 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-dropzone-note-spacing: null !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: $kendo-subtle-text !default;
+$kendo-dropzone-note-text: k-color(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dropzone/_variables.scss" with (
     $kendo-dropzone-padding-x: $kendo-dropzone-padding-x,

package/scss/editor/_layout.scss

@@ -1,4 +1,3 @@
-@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/editor/_layout.scss" as *;
 
 
@@ -8,19 +7,10 @@
 
     // Insert table
     .k-ct-popup {
-        line-height: normal;
+        line-height: var( --kendo-line-height, normal);
 
         .k-status {
-            line-height: var( --kendo-line-height, inherit);
-        }
-    }
-
-    .k-editor-export {
-        text-transform: uppercase;
-        font-size: var( --kendo-font-size, inherit );
-
-        .k-icon {
-            margin-left: $kendo-editor-export-tool-icon-margin-x;
+            line-height: var( --kendo-line-height, normal);
         }
     }
 }

package/scss/editor/_variables.scss

@@ -27,14 +27,14 @@ $kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
 /// The selected text color of the Editor.
 /// @group editor
-$kendo-editor-selected-text: $kendo-color-primary-contrast !default;
+$kendo-editor-selected-text: k-color(on-primary) !default;
 /// The selected background color of the Editor.
 /// @group editor
-$kendo-editor-selected-bg: $kendo-color-primary !default;
+$kendo-editor-selected-bg: k-color(primary) !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) !default;
+$kendo-editor-highlighted-bg: k-color(primary-subtle) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor
@@ -58,14 +58,14 @@ $kendo-editor-resize-handle-bg: #ffffff !default;
 $kendo-editor-selectednode-outline-width: 2px !default;
 /// The outline color of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-color: #88ccff !default;
+$kendo-editor-selectednode-outline-color: k-color(primary) !default;
 
 /// The horizontal padding of the inline Editor.
 /// @group editor
-$kendo-editor-inline-padding-x: k-spacing(2) !default;
+$kendo-editor-inline-padding-x: k-spacing(4) !default;
 /// The vertical padding of the inline Editor.
 /// @group editor
-$kendo-editor-inline-padding-y: k-spacing(0.5) !default;
+$kendo-editor-inline-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Editor file browser tiles.
 /// @group editor
@@ -76,7 +76,11 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default;
 
 /// The padding of the Editor content.
 /// @group editor
-$kendo-editor-content-padding: k-spacing(4) !default;
+$kendo-editor-content-padding: k-spacing(2) !default;
+
+$kendo-editor-ct-cell-text: k-color(on-secondary) !default;
+$kendo-editor-ct-cell-bg: k-color(secondary) !default;
+$kendo-editor-ct-cell-border: k-color(border) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with (
     $kendo-editor-border-width: $kendo-editor-border-width,
@@ -99,5 +103,8 @@ $kendo-editor-content-padding: k-spacing(4) !default;
     $kendo-editor-inline-padding-y: $kendo-editor-inline-padding-y,
     $kendo-editor-filebrowser-tiles-padding-x: $kendo-editor-filebrowser-tiles-padding-x,
     $kendo-editor-filebrowser-tiles-padding-y: $kendo-editor-filebrowser-tiles-padding-y,
-    $kendo-editor-content-padding: $kendo-editor-content-padding
+    $kendo-editor-content-padding: $kendo-editor-content-padding,
+    $kendo-editor-ct-cell-text: $kendo-editor-ct-cell-text,
+    $kendo-editor-ct-cell-bg: $kendo-editor-ct-cell-bg,
+    $kendo-editor-ct-cell-border: $kendo-editor-ct-cell-border
 );

package/scss/expansion-panel/_layout.scss

@@ -3,4 +3,9 @@
 
 @mixin kendo-expander--layout() {
     @include kendo-expander--layout-base();
+
+    .k-expander-title {
+        text-transform: none;
+    }
+
 }

package/scss/expansion-panel/_variables.scss

@@ -20,24 +20,24 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-text: $kendo-component-text !default;
+$kendo-expander-text: k-color(on-app-surface) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: $kendo-component-bg !default;
+$kendo-expander-bg: k-color(surface-alt) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-border: $kendo-component-border !default;
+$kendo-expander-border: k-color(border) !default;
 
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
+$kendo-expander-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-padding-x: k-spacing(6) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-y: k-spacing(3) !default;
+$kendo-expander-header-padding-y: k-spacing(3.5) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
@@ -51,21 +51,21 @@ $kendo-expander-header-border: null !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: rgba( black, .04 ) !default;
+$kendo-expander-header-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent)  !default;
 /// The background color of the focused ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-focus-bg: rgba( black, .12 ) !default;
+$kendo-expander-header-focus-bg: null !default;
 /// The box shadow of the focused ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-focus-shadow: none !default;
+$kendo-expander-header-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: $kendo-color-secondary !default;
+$kendo-expander-title-text: k-color(on-app-surface) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: $kendo-subtle-text !default;
+$kendo-expander-header-sub-title-text: k-color(subtle) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander

package/scss/fab/_layout.scss

@@ -6,7 +6,7 @@
     @include kendo-fab--layout-base();
 
     .k-fab-text {
-        text-transform: uppercase;
+        font-weight: var(--kendo-font-weight-md, 500);
     }
 
 }