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

package/scss/menu/_variables.scss

@@ -17,17 +17,17 @@ $kendo-menu-border-width: 0px !default;
 $kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Menu.
 /// @group menu
-$kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-menu-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the Menu used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-menu-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The background color of the Menu.
 /// @group menu
 $kendo-menu-bg: transparent !default;
 /// The text color of the Menu.
 /// @group menu
-$kendo-menu-text: $kendo-component-text !default;
+$kendo-menu-text: k-color(on-app-surface) !default;
 /// The border color of the Menu.
 /// @group menu
 $kendo-menu-border: null !default;
@@ -39,27 +39,27 @@ $kendo-menu-gradient: null !default;
 
 /// The horizontal padding of the Menu item.
 /// @group menu
-$kendo-menu-item-padding-x: k-spacing(4) !default;
+$kendo-menu-item-padding-x: k-spacing(3) !default;
 /// The vertical padding of the Menu item.
 /// @group menu
-$kendo-menu-item-padding-y: k-spacing(1) !default;
+$kendo-menu-item-padding-y: k-spacing(3) !default;
 /// The spacing between the Menu items.
 /// @group menu
-$kendo-menu-item-spacing: k-spacing(0.5) !default;
+$kendo-menu-item-spacing: 0 !default;
 /// The spacing between the Menu item text and icons.
 /// @group menu
-$kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
+$kendo-menu-item-icon-spacing: k-spacing(3) !default;
 
 /// The font weight of the selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-menu-item-selected-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The background color of the Menu item.
 /// @group menu
-$kendo-menu-item-bg: rgba( $kendo-menu-text, 0 ) !default;
+$kendo-menu-item-bg: null !default;
 /// The text color of the Menu item.
 /// @group menu
-$kendo-menu-item-text: unset !default;
+$kendo-menu-item-text: null !default;
 /// The border color of the Menu item.
 /// @group menu
 $kendo-menu-item-border: null !default;
@@ -69,10 +69,10 @@ $kendo-menu-item-gradient: null !default;
 
 /// The background color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * color.alpha( $kendo-menu-text ) )) !default;
+$kendo-menu-item-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-text: unset !default;
+$kendo-menu-item-hover-text: null !default;
 /// The border color of hovered Menu item.
 /// @group menu
 $kendo-menu-item-hover-border: null !default;
@@ -82,10 +82,10 @@ $kendo-menu-item-hover-gradient: null !default;
 
 /// The background color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-bg: if($kendo-enable-color-system, k-color( base-active ), rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * color.alpha( $kendo-menu-text ) )) !default;
+$kendo-menu-item-active-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-text: unset !default;
+$kendo-menu-item-active-text: null !default;
 /// The border color of active Menu item.
 /// @group menu
 $kendo-menu-item-active-border: null !default;
@@ -95,14 +95,14 @@ $kendo-menu-item-active-gradient: null !default;
 
 /// The base shadow of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-shadow: unset !default;
+$kendo-menu-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 /// The background color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-bg: null !default;
+$kendo-menu-item-selected-bg: k-color(secondary) !default;
 /// The text color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-text: unset !default;
+$kendo-menu-item-selected-text: k-color(on-secondary) !default;
 /// The border color of selected Menu item.
 /// @group menu
 $kendo-menu-item-selected-border: null !default;
@@ -112,23 +112,23 @@ $kendo-menu-item-selected-gradient: null !default;
 
 /// The background color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-bg: $kendo-component-bg !default;
+$kendo-menu-scroll-button-bg: null !default;
 /// The text color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-text: $kendo-subtle-text !default;
+$kendo-menu-scroll-button-text: $kendo-menu-text !default;
 /// The border color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-border: transparent !default;
+$kendo-menu-scroll-button-border: null !default;
 /// The background gradient of the Menu scroll buttons.
 /// @group menu
 $kendo-menu-scroll-button-gradient: null !default;
 
 /// The background color of hovered Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-bg: null !default;
+$kendo-menu-scroll-button-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of hovered Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-text: $kendo-menu-text !default;
+$kendo-menu-scroll-button-hover-text: $kendo-menu-item-hover-text !default;
 /// The border color of hovered Menu scroll buttons.
 /// @group menu
 $kendo-menu-scroll-button-hover-border: null !default;
@@ -136,6 +136,12 @@ $kendo-menu-scroll-button-hover-border: null !default;
 /// @group menu
 $kendo-menu-scroll-button-hover-gradient: null !default;
 
+/// The horizontal padding of the Menu icon.
+/// @group menu
+$kendo-menu-icon-padding-x: k-spacing(1) !default;
+/// The vertical padding of the Menu icon.
+/// @group menu
+$kendo-menu-icon-padding-y: k-spacing(1) !default;
 
 
 // Menu Separator
@@ -148,7 +154,7 @@ $kendo-menu-separator-margin-inline: k-spacing(1) !default;
 $kendo-menu-separator-margin-block: k-spacing(1) !default;
 /// The border color of Menu separator.
 /// @group menu
-$kendo-menu-separator-border: if($kendo-enable-color-system, k-color(border), $kendo-component-border) !default;
+$kendo-menu-separator-border: k-color(border) !default;
 
 
 // Menu popup
@@ -170,14 +176,14 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 $kendo-menu-popup-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-menu-popup-sm-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-menu-popup-md-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-menu-popup-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The line heights used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-popup-line-height: 1.25 !default;
-$kendo-menu-popup-sm-line-height: 1.25 !default;
-$kendo-menu-popup-md-line-height: 1.25 !default;
-$kendo-menu-popup-lg-line-height: 1.25 !default;
+$kendo-menu-popup-line-height: $kendo-menu-line-height !default;
+$kendo-menu-popup-sm-line-height: $kendo-menu-line-height !default;
+$kendo-menu-popup-md-line-height: $kendo-menu-line-height !default;
+$kendo-menu-popup-lg-line-height: $kendo-menu-line-height !default;
 
 /// The background color of the Menu popup.
 /// @group menu
@@ -197,17 +203,17 @@ $kendo-menu-popup-gradient: null !default;
 
 /// The horizontal padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: k-spacing(4) !default;
-$kendo-menu-popup-sm-item-padding-x: k-spacing(4) !default;
-$kendo-menu-popup-md-item-padding-x: k-spacing(4) !default;
-$kendo-menu-popup-lg-item-padding-x: k-spacing(4) !default;
+$kendo-menu-popup-item-padding-x: $kendo-menu-item-padding-x !default;
+$kendo-menu-popup-sm-item-padding-x: $kendo-menu-item-padding-x !default;
+$kendo-menu-popup-md-item-padding-x: $kendo-menu-item-padding-x !default;
+$kendo-menu-popup-lg-item-padding-x: $kendo-menu-item-padding-x !default;
 
 /// The vertical padding of the Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: k-spacing(2) !default;
-$kendo-menu-popup-sm-item-padding-y: k-spacing(1.5) !default;
-$kendo-menu-popup-md-item-padding-y: k-spacing(2) !default;
-$kendo-menu-popup-lg-item-padding-y: k-spacing(2.5) !default;
+$kendo-menu-popup-item-padding-y: $kendo-menu-item-padding-y !default;
+$kendo-menu-popup-sm-item-padding-y: k-spacing(2) !default;
+$kendo-menu-popup-md-item-padding-y: $kendo-menu-item-padding-y !default;
+$kendo-menu-popup-lg-item-padding-y: k-spacing(4) !default;
 
 /// The end padding of the Menu item in popup.
 /// @group menu
@@ -247,10 +253,10 @@ $kendo-menu-popup-item-gradient: null !default;
 
 /// The background color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
+$kendo-menu-popup-item-hover-bg: $kendo-menu-item-hover-bg !default;
 /// The text color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
+$kendo-menu-popup-item-hover-text: inherit !default;
 /// The border color of hovered Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-hover-border: null !default;
@@ -260,10 +266,10 @@ $kendo-menu-popup-item-hover-gradient: null !default;
 
 /// The background color of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-active-bg: $kendo-list-item-selected-bg !default;
+$kendo-menu-popup-item-active-bg: $kendo-menu-item-active-bg !default;
 /// The text color of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-active-text: $kendo-list-item-selected-text !default;
+$kendo-menu-popup-item-active-text: inherit !default;
 /// The border color of active Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-active-border: null !default;
@@ -273,7 +279,7 @@ $kendo-menu-popup-item-active-gradient: null !default;
 
 /// The base shadow of focused Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-focus-shadow: unset !default;
+$kendo-menu-popup-item-focus-shadow: null !default;
 
 @forward "@progress/kendo-theme-core/scss/components/menu/_variables.scss" with (
     $kendo-menu-border-width: $kendo-menu-border-width,
@@ -314,6 +320,8 @@ $kendo-menu-popup-item-focus-shadow: unset !default;
     $kendo-menu-scroll-button-hover-text: $kendo-menu-scroll-button-hover-text,
     $kendo-menu-scroll-button-hover-border: $kendo-menu-scroll-button-hover-border,
     $kendo-menu-scroll-button-hover-gradient: $kendo-menu-scroll-button-hover-gradient,
+    $kendo-menu-icon-padding-x: $kendo-menu-icon-padding-x,
+    $kendo-menu-icon-padding-y: $kendo-menu-icon-padding-y,
     $kendo-menu-separator-margin-inline: $kendo-menu-separator-margin-inline,
     $kendo-menu-separator-margin-block: $kendo-menu-separator-margin-block,
     $kendo-menu-separator-border: $kendo-menu-separator-border,

package/scss/menu-button/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The horizontal padding of the button arrow in the Menu Button.
 /// @group menu-button
-$kendo-menu-button-arrow-padding-x: k-spacing(1) !default;
+$kendo-menu-button-arrow-padding-x: k-spacing(2) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/menu-button/_variables.scss" with (
     $kendo-menu-button-arrow-padding-x: $kendo-menu-button-arrow-padding-x

package/scss/messagebox/_layout.scss

@@ -1,6 +1,10 @@
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/messagebox/_layout.scss" as *;
 
-
 @mixin kendo-messagebox--layout() {
     @include kendo-messagebox--layout-base();
+
+    .k-messagebox {
+        @include border-radius( k-border-radius(md) );
+    }
 }

package/scss/messagebox/_variables.scss

@@ -3,7 +3,7 @@
 // Message box
 $kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
 $kendo-message-box-padding-x: k-spacing(4) !default;
-$kendo-message-box-padding-y: k-spacing(1) !default;
+$kendo-message-box-padding-y: k-spacing(2) !default;
 $kendo-message-box-border-width: 0 0 0 4px !default;
 
 $kendo-message-box-font-size: var( --kendo-font-size, inherit ) !default;
@@ -16,6 +16,19 @@ $kendo-message-box-border-level: -9 !default;
 $kendo-message-box-link-font-style: normal !default;
 $kendo-message-box-link-text-decoration: underline !default;
 
+$kendo-message-box-theme-colors: (
+    "primary": k-color(primary),
+     "secondary": k-color(secondary),
+     "tertiary": k-color(tertiary),
+     "info": k-color(info),
+     "success": k-color(success),
+     "warning": k-color(warning),
+     "error": k-color(error),
+     "dark": k-color(dark),
+     "light": k-color(light),
+     "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with (
     $kendo-message-box-margin: $kendo-message-box-margin,
     $kendo-message-box-padding-x: $kendo-message-box-padding-x,
@@ -27,5 +40,6 @@ $kendo-message-box-link-text-decoration: underline !default;
     $kendo-message-box-text-level: $kendo-message-box-text-level,
     $kendo-message-box-border-level: $kendo-message-box-border-level,
     $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
-    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration
+    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration,
+    $kendo-message-box-theme-colors: $kendo-message-box-theme-colors
 );

package/scss/no-data/_variables.scss

@@ -6,7 +6,7 @@ $kendo-no-data-min-height: 140px !default;
 
 /// The color of the 'No Data' text.
 /// @group no-data
-$kendo-no-data-text: $kendo-subtle-text !default;
+$kendo-no-data-text: k-color(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/no-data/_variables.scss" with (
     $kendo-no-data-min-height: $kendo-no-data-min-height,

package/scss/notification/_functions.scss

@@ -7,7 +7,7 @@
 
     @each $name, $color in $colors {
         $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )),
+            color: k-color(on-#{$name}),
             background-color: $color,
             border: $color,
         )), $_theme );

package/scss/notification/_layout.scss

@@ -1,6 +1,11 @@
 @use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *;
+@use "./variables.scss" as *;
 
 
 @mixin kendo-notification--layout() {
     @include kendo-notification--layout-base();
+
+    .k-notification-actions {
+        margin-block: calc( (#{$kendo-notification-actions-padding-y} / 2) * -1) ;
+    }
 }

package/scss/notification/_theme.scss

@@ -3,4 +3,5 @@
 
 @mixin kendo-notification--theme() {
     @include kendo-notification--theme-base();
+
 }

package/scss/notification/_variables.scss

@@ -18,10 +18,10 @@ $kendo-notification-padding-x: k-spacing(4) !default;
 $kendo-notification-padding-y: k-spacing(3.5) !default;
 /// The width of the border around the Notification.
 /// @group notification
-$kendo-notification-border-width: 0px !default;
+$kendo-notification-border-width: 1px !default;
 /// The border radius of the Notification.
 /// @group notification
-$kendo-notification-border-radius: k-spacing(1) !default;
+$kendo-notification-border-radius: k-border-radius(md) !default;
 /// The font family of the Notification.
 /// @group notification
 $kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
@@ -30,27 +30,46 @@ $kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-notification-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Notification.
 /// @group notification
-$kendo-notification-line-height: math.div( 20, 14 ) !default;
+$kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The horizontal padding of the Notification actions.
+/// @group notification
+$kendo-notification-actions-padding-x: k-spacing(1) !default;
+/// The vertical padding of the Notification actions.
+/// @group notification
+$kendo-notification-actions-padding-y: $kendo-notification-actions-padding-x !default;
+
 /// The background color of the Notification.
 /// @group notification
-$kendo-notification-bg: $kendo-component-bg !default;
+$kendo-notification-bg: k-color(base) !default;
 /// The text color of the Notification.
 /// @group notification
-$kendo-notification-text: $kendo-component-text !default;
+$kendo-notification-text: k-color(on-base) !default;
 /// The border color of the Notification.
 /// @group notification
-$kendo-notification-border: $kendo-component-border !default;
+$kendo-notification-border: k-color(base) !default;
 /// The box shadow of the Notification.
 /// @group notification
-$kendo-notification-shadow: $kendo-popup-shadow !default;
+$kendo-notification-shadow: k-elevation(3) !default;
 
 /// The horizontal spacing of the Notification icon.
 /// @group notification
-$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
+$kendo-notification-icon-spacing: k-spacing(2) !default;
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: $kendo-theme-colors !default;
+$kendo-notification-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 /// The generated theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;
@@ -64,6 +83,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
     $kendo-notification-font-family: $kendo-notification-font-family,
     $kendo-notification-font-size: $kendo-notification-font-size,
     $kendo-notification-line-height: $kendo-notification-line-height,
+    $kendo-notification-actions-padding-x: $kendo-notification-actions-padding-x,
+    $kendo-notification-actions-padding-y: $kendo-notification-actions-padding-y,
     $kendo-notification-bg: $kendo-notification-bg,
     $kendo-notification-text: $kendo-notification-text,
     $kendo-notification-border: $kendo-notification-border,

package/scss/orgchart/_variables.scss

@@ -24,13 +24,13 @@ $kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-bg: $kendo-component-bg !default;
+$kendo-orgchart-bg: k-color(app-surface) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-text: $kendo-component-text !default;
+$kendo-orgchart-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-border: $kendo-component-border !default;
+$kendo-orgchart-border: k-color(border) !default;
 
 /// The spacing of the OrgChart node.
 /// @group orgchart
@@ -56,20 +56,20 @@ $kendo-orgchart-node-group-border-width: 1px !default;
 $kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
 /// The background color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
+$kendo-orgchart-node-group-bg: k-color(surface) !default;
 /// The text color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-text: $kendo-base-text !default;
+$kendo-orgchart-node-group-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border: $kendo-base-border !default;
+$kendo-orgchart-node-group-border: k-color(border) !default;
 
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-focus-border: $kendo-orgchart-node-group-border !default;
 /// The shadow of the focused OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 )) !default;
+$kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px color-mix(in srgb, k-color(on-app-surface) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, k-color(on-app-surface) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, k-color(on-app-surface) 12%, transparent) !default;
 
 /// The font size of the OrgChart node group title.
 /// @group orgchart
@@ -102,10 +102,10 @@ $kendo-orgchart-card-padding-y: $kendo-card-padding-y !default;
 $kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-y !default;
 /// The border width of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-border-width: 1px !default;
+$kendo-orgchart-card-border-width: null !default;
 /// The shadow of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-shadow: none !default;
+$kendo-orgchart-card-shadow: null !default;
 /// The shadow of the focused OrgChart Card.
 /// @group orgchart
 $kendo-orgchart-card-focus-shadow: $kendo-orgchart-node-group-focus-shadow !default;
@@ -143,7 +143,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
 $kendo-orgchart-line-size: 1px !default;
 /// The fill color of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-fill: $kendo-base-border !default;
+$kendo-orgchart-line-fill: k-color(border) !default;
 
 /// The height of the OrgChart connecting line.
 /// @group orgchart

package/scss/overlay/_variables.scss

@@ -1,6 +1,17 @@
 @use "../core/_index.scss" as *;
 
-$kendo-overlay-theme-colors: $kendo-theme-colors !default;
+$kendo-overlay-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
 
 $kendo-overlay-bg: $kendo-color-black !default;
 $kendo-overlay-opacity: .32 !default;

package/scss/pager/_variables.scss

@@ -64,17 +64,17 @@ $kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: $kendo-component-bg !default;
+$kendo-pager-bg: k-color(surface) !default;
 /// The text color of the Pager.
 /// @group pager
-$kendo-pager-text: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) !default;
+$kendo-pager-text: k-color(subtle) !default;
 /// The border color of the Pager.
 /// @group pager
-$kendo-pager-border: $kendo-component-border !default;
+$kendo-pager-border: k-color(border) !default;
 
 /// The background color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 )) !default;
+$kendo-pager-focus-bg: k-color(surface) !default;
 /// The box shadow of the focused Pager.
 /// @group pager
 $kendo-pager-focus-shadow: unset !default;
@@ -88,7 +88,7 @@ $kendo-pager-section-spacing: $kendo-pager-padding-x !default;
 $kendo-pager-item-border-width: 0px !default;
 /// The border radius of the Pager items.
 /// @group pager
-$kendo-pager-item-border-radius: 5em !default;
+$kendo-pager-item-border-radius: k-border-radius( md ) !default;
 /// The spacing around the Pager items.
 /// @group pager
 $kendo-pager-item-spacing: k-spacing(0) !default;
@@ -113,10 +113,10 @@ $kendo-pager-item-hover-text: $kendo-pager-text !default;
 $kendo-pager-item-hover-border: null !default;
 /// The background color of the selected Pager items.
 /// @group pager
-$kendo-pager-item-selected-bg: $kendo-color-primary !default;
+$kendo-pager-item-selected-bg: k-color(primary) !default;
 /// The text color of the selected Pager items.
 /// @group pager
-$kendo-pager-item-selected-text: $kendo-color-primary-contrast !default;
+$kendo-pager-item-selected-text: k-color(primary-on-surface) !default;
 /// The border color of the selected Pager items.
 /// @group pager
 $kendo-pager-item-selected-border: null !default;
@@ -130,7 +130,7 @@ $kendo-pager-number-border-radius: $kendo-pager-item-border-radius !default;
 $kendo-pager-item-focus-opacity: .12 !default;
 /// The background color of the focused Pager items.
 /// @group pager
-$kendo-pager-item-focus-bg: rgba($kendo-list-item-hover-bg, $kendo-pager-item-focus-opacity) !default;
+$kendo-pager-item-focus-bg: transparent  !default;
 /// The box shadow of the focused Pager items.
 /// @group pager
 $kendo-pager-item-focus-shadow: unset !default;

package/scss/panel/_variables.scss

@@ -26,13 +26,13 @@ $kendo-panel-content-padding-block: k-spacing(1) !default;
 
 /// The text color of the Panel.
 /// @group panel
-$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text}) !default;
+$kendo-panel-text: k-color(on-app-surface) !default;
 /// The background color of the Panel.
 /// @group panel
-$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg}) !default;
+$kendo-panel-bg: k-color(surface) !default;
 /// The color of the border around the Panel.
 /// @group panel
-$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default;
+$kendo-panel-border: k-color(border) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with (
     $kendo-panel-border-radius: $kendo-panel-border-radius,

package/scss/panelbar/_layout.scss

@@ -1,6 +1,34 @@
 @use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *;
-
+@use "./_variables.scss" as *;
 
 @mixin kendo-panelbar--layout() {
     @include kendo-panelbar--layout-base();
+
+    .k-panelbar {
+        .k-panelbar-group > .k-panelbar-item {
+            @for $i from 1 through $kendo-panelbar-item-level-count {
+                &.k-level-#{$i} {
+                    .k-link {
+                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
+                    }
+                }
+            }
+        }
+    }
+
+    .k-rtl .k-panelbar,
+    .k-panelbar.k-rtl,
+    .k-panelbar [dir = "rtl"] {
+        .k-panelbar-group > .k-panelbar-item {
+            // Hierarchy items
+            @for $i from 1 through $kendo-panelbar-item-level-count {
+                &.k-level-#{$i} {
+                    .k-link {
+                        padding-left: $kendo-panelbar-item-padding-x;
+                        padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
+                    }
+                }
+            }
+        }
+    }
 }

package/scss/panelbar/_theme.scss

@@ -1,6 +1,5 @@
 @use "@progress/kendo-theme-core/scss/components/panelbar/_theme.scss" as *;
 
-
 @mixin kendo-panelbar--theme() {
     @include kendo-panelbar--theme-base();
 }