@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/orgchart/_variables.scss

@@ -4,146 +4,188 @@
 
 /// The spacing index of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-spacer: k-spacing(6) !default;
+$kendo-orgchart-spacer: var( --kendo-orgchart-spacer, #{k-spacing(6)} ) !default;
 /// The vertical padding of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
+$kendo-orgchart-padding-y: var( --kendo-orgchart-padding-y, #{$kendo-orgchart-spacer} ) !default;
 /// The horizontal padding of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-padding-x: $kendo-orgchart-padding-y !default;
+$kendo-orgchart-padding-x: var( --kendo-orgchart-padding-x, #{$kendo-orgchart-padding-y} ) !default;
 /// The font family of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-orgchart-font-family: var( --kendo-orgchart-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-orgchart-font-size: var( --kendo-orgchart-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-orgchart-line-height: var( --kendo-orgchart-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The background color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-bg: k-color(surface-alt) !default;
+$kendo-orgchart-bg: var( --kendo-orgchart-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-text: k-color(on-app-surface) !default;
+$kendo-orgchart-text: var( --kendo-orgchart-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-orgchart-border: var( --kendo-orgchart-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The spacing of the OrgChart node.
 /// @group orgchart
-$kendo-orgchart-node-spacing: $kendo-orgchart-spacer !default;
+$kendo-orgchart-node-spacing: var( --kendo-orgchart-node-spacing, #{$kendo-orgchart-spacer} ) !default;
 /// The spacing of the OrgChart group.
 /// @group orgchart
-$kendo-orgchart-group-spacing: $kendo-orgchart-spacer !default;
+$kendo-orgchart-group-spacing: var( --kendo-orgchart-group-spacing, #{$kendo-orgchart-spacer} ) !default;
 
 /// The vertical padding of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-padding-y: $kendo-orgchart-spacer !default;
+$kendo-orgchart-node-group-padding-y: var( --kendo-orgchart-node-group-padding-y, #{$kendo-orgchart-spacer} ) !default;
 /// The horizontal padding of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !default;
+$kendo-orgchart-node-group-padding-x: var( --kendo-orgchart-node-group-padding-x, #{$kendo-orgchart-node-group-padding-y} ) !default;
 /// The border width of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border-width: 1px !default;
+$kendo-orgchart-node-group-border-width: var( --kendo-orgchart-node-group-border-width, 1px ) !default;
 /// The border radius of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
+$kendo-orgchart-node-group-border-radius: var( --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: k-color(surface) !default;
+$kendo-orgchart-node-group-bg: var( --kendo-orgchart-node-group-bg, #{k-color(surface)} ) !default;
 /// The text color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-text: k-color(on-app-surface) !default;
+$kendo-orgchart-node-group-text: var( --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: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-orgchart-node-group-border: var( --kendo-orgchart-node-group-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
+$kendo-orgchart-node-group-focus-border: var( --kendo-orgchart-node-group-focus-border, #{$kendo-card-focus-border} ) !default;
 /// The shadow of the focused OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-orgchart-node-group-focus-shadow: var( --kendo-orgchart-node-group-focus-shadow, #{$kendo-card-focus-shadow} ) !default;
 
 /// The vertical margin of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-margin-y: k-spacing(0) !default;
+$kendo-orgchart-node-group-title-margin-y: var( --kendo-orgchart-node-group-title-margin-y, #{k-spacing(0)} ) !default;
 /// The font size of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
+$kendo-orgchart-node-group-title-font-size: var( --kendo-orgchart-node-group-title-font-size, var( --kendo-font-size-xl, inherit ) ) !default;
 /// The line height of the OrgChart node group title.
 /// @group orgchart
-$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-orgchart-node-group-title-line-height: var( --kendo-orgchart-node-group-title-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The vertical margin of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-margin-y: calc( $kendo-orgchart-spacer - k-spacing(1) ) !default;
+$kendo-orgchart-node-group-subtitle-margin-y: var( --kendo-orgchart-node-group-subtitle-margin-y, calc( #{$kendo-orgchart-spacer} - #{k-spacing(1)} ) ) !default;
 /// The font size of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-orgchart-node-group-subtitle-font-size: var( --kendo-orgchart-node-group-subtitle-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-text: k-color(subtle) !default;
+$kendo-orgchart-node-group-subtitle-text: var( --kendo-orgchart-node-group-subtitle-text, #{k-color(subtle)} ) !default;
 
 /// The width of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-width: 300px !default;
+$kendo-orgchart-card-width: var( --kendo-orgchart-card-width, 300px ) !default;
 /// The border width of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-border-width: $kendo-card-border-width !default;
+$kendo-orgchart-card-border-width: var( --kendo-orgchart-card-border-width, #{$kendo-card-border-width} ) !default;
 /// The shadow of the OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-shadow: $kendo-card-shadow !default;
+$kendo-orgchart-card-shadow: var( --kendo-orgchart-card-shadow, #{$kendo-card-shadow} ) !default;
 /// The shadow of the focused OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-orgchart-card-focus-shadow: var( --kendo-orgchart-card-focus-shadow, #{$kendo-card-focus-shadow} ) !default;
 
 /// The vertical margin of the OrgChart Card title.
 /// @group orgchart
-$kendo-orgchart-card-title-margin-y: k-spacing(0) !default;
+$kendo-orgchart-card-title-margin-y: var( --kendo-orgchart-card-title-margin-y, #{k-spacing(0)} ) !default;
 /// The font size of the OrgChart Card title.
 /// @group orgchart
-$kendo-orgchart-card-title-font-size: $kendo-card-title-font-size !default;
+$kendo-orgchart-card-title-font-size: var( --kendo-orgchart-card-title-font-size, #{$kendo-card-title-font-size} ) !default;
 /// The line height of the OrgChart Card title.
 /// @group orgchart
-$kendo-orgchart-card-title-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-orgchart-card-title-line-height: var( --kendo-orgchart-card-title-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The vertical margin of the OrgChart Card subtitle.
 /// @group orgchart
-$kendo-orgchart-card-subtitle-margin-y: k-spacing(0) !default;
+$kendo-orgchart-card-subtitle-margin-y: var( --kendo-orgchart-card-subtitle-margin-y, #{k-spacing(0)} ) !default;
 /// The font size of the OrgChart Card subtitle.
 /// @group orgchart
-$kendo-orgchart-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-orgchart-card-subtitle-font-size: var( --kendo-orgchart-card-subtitle-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the OrgChart Card subtitle.
 /// @group orgchart
-$kendo-orgchart-card-subtitle-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-orgchart-card-subtitle-line-height: var( --kendo-orgchart-card-subtitle-line-height, var( --kendo-line-height, inherit ) ) !default;
 
 /// The vertical padding of the OrgChart Card body.
 /// @group orgchart
-$kendo-orgchart-card-body-padding-y: calc( #{$kendo-orgchart-spacer} - k-spacing(2) ) !default;
+$kendo-orgchart-card-body-padding-y: var( --kendo-orgchart-card-body-padding-y, calc( #{$kendo-orgchart-spacer} - #{k-spacing(2)} ) ) !default;
 /// The horizontal padding of the OrgChart Card body.
 /// @group orgchart
-$kendo-orgchart-card-body-padding-x: $kendo-orgchart-card-body-padding-y !default;
+$kendo-orgchart-card-body-padding-x: var( --kendo-orgchart-card-body-padding-x, #{$kendo-orgchart-card-body-padding-y} ) !default;
 /// The top border width of the OrgChart Card body.
 /// @group orgchart
-$kendo-orgchart-card-body-border-width: 2px 0 0 !default;
+$kendo-orgchart-card-body-border-width: var( --kendo-orgchart-card-body-border-width, 2px 0 0 ) !default;
 /// The border color of the OrgChart Card body.
 /// @group orgchart
-$kendo-orgchart-card-body-border-color: transparent !default;
+$kendo-orgchart-card-body-border-color: var( --kendo-orgchart-card-body-border-color, transparent ) !default;
 
 /// The horizontal margin of the OrgChart Card body title wrap.
 /// @group orgchart
-$kendo-orgchart-card-body-vbox-margin-x: calc( #{$kendo-orgchart-spacer} - k-spacing(2) ) !default;
+$kendo-orgchart-card-body-vbox-margin-x: var( --kendo-orgchart-card-body-vbox-margin-x, calc( #{$kendo-orgchart-spacer} - #{k-spacing(2)} ) ) !default;
 /// The min height of the OrgChart Card body title wrap.
 /// @group orgchart
-$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
+$kendo-orgchart-card-body-vbox-min-height: var( --kendo-orgchart-card-body-vbox-min-height, #{$kendo-card-avatar-size} ) !default;
 
 /// The size of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-size: 1px !default;
+$kendo-orgchart-line-size: var( --kendo-orgchart-line-size, 1px ) !default;
 /// The fill color of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-text: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-orgchart-line-text: var( --kendo-orgchart-line-text, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The height of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-v-height: k-spacing(6) !default;
+$kendo-orgchart-line-v-height: var( --kendo-orgchart-line-v-height, #{k-spacing(6)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/orgchart/_variables.scss" with (
+    $kendo-orgchart-spacer: $kendo-orgchart-spacer,
+    $kendo-orgchart-padding-y: $kendo-orgchart-padding-y,
+    $kendo-orgchart-padding-x: $kendo-orgchart-padding-x,
+    $kendo-orgchart-font-family: $kendo-orgchart-font-family,
+    $kendo-orgchart-font-size: $kendo-orgchart-font-size,
+    $kendo-orgchart-line-height: $kendo-orgchart-line-height,
+    $kendo-orgchart-bg: $kendo-orgchart-bg,
+    $kendo-orgchart-text: $kendo-orgchart-text,
+    $kendo-orgchart-border: $kendo-orgchart-border,
+    $kendo-orgchart-node-group-padding-y: $kendo-orgchart-node-group-padding-y,
+    $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-x,
+    $kendo-orgchart-node-group-border-width: $kendo-orgchart-node-group-border-width,
+    $kendo-orgchart-node-group-border-radius: $kendo-orgchart-node-group-border-radius,
+    $kendo-orgchart-node-group-bg: $kendo-orgchart-node-group-bg,
+    $kendo-orgchart-node-group-text: $kendo-orgchart-node-group-text,
+    $kendo-orgchart-node-group-border: $kendo-orgchart-node-group-border,
+    $kendo-orgchart-node-group-focus-border: $kendo-orgchart-node-group-focus-border,
+    $kendo-orgchart-node-group-focus-shadow: $kendo-orgchart-node-group-focus-shadow,
+    $kendo-orgchart-node-group-title-font-size: $kendo-orgchart-node-group-title-font-size,
+    $kendo-orgchart-node-group-title-line-height: $kendo-orgchart-node-group-title-line-height,
+    $kendo-orgchart-node-group-title-margin-bottom: $kendo-orgchart-node-group-title-margin-y,
+    $kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-node-group-subtitle-margin-y,
+    $kendo-orgchart-node-group-subtitle-font-size: $kendo-orgchart-node-group-subtitle-font-size,
+    $kendo-orgchart-node-group-subtitle-text: $kendo-orgchart-node-group-subtitle-text,
+    $kendo-orgchart-card-title-margin-bottom: $kendo-orgchart-card-title-margin-y,
+    $kendo-orgchart-card-width: $kendo-orgchart-card-width,
+    $kendo-orgchart-card-border-width: $kendo-orgchart-card-border-width,
+    $kendo-orgchart-card-shadow: $kendo-orgchart-card-shadow,
+    $kendo-orgchart-card-focus-shadow: $kendo-orgchart-card-focus-shadow,
+    $kendo-orgchart-card-title-font-size: $kendo-orgchart-card-title-font-size,
+    $kendo-orgchart-card-subtitle-margin-bottom: $kendo-orgchart-card-subtitle-margin-y,
+    $kendo-orgchart-card-subtitle-font-size: $kendo-orgchart-card-subtitle-font-size,
+    $kendo-orgchart-card-body-vbox-margin-right: $kendo-orgchart-card-body-vbox-margin-x,
+    $kendo-orgchart-card-body-vbox-min-height: $kendo-orgchart-card-body-vbox-min-height,
+    $kendo-orgchart-card-body-border-width: $kendo-orgchart-card-body-border-width,
+    $kendo-orgchart-card-body-border-color: $kendo-orgchart-card-body-border-color,
+    $kendo-orgchart-line-size: $kendo-orgchart-line-size,
+    $kendo-orgchart-line-v-height: $kendo-orgchart-line-v-height,
+    $kendo-orgchart-line-fill: $kendo-orgchart-line-text
+);

package/scss/otp/_layout.scss

@@ -2,40 +2,7 @@
 @use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
 @use "../input/_variables.scss" as *;
-
-@mixin kendo-otp--layout-base() {
-    // OTP
-    .k-otp {
-        display: flex;
-        width: min-content;
-        align-items: center;
-        flex-direction: row;
-        gap: var(--kendo-otp-gap, 0 );
-
-        .k-otp-input > .k-input-inner {
-            text-align: center;
-            padding-inline: 0;
-        }
-    }
-
-    @each $size, $size-props in $kendo-otp-sizes {
-        $_gap: map.get($size-props, gap);
-        $_separator-padding-x: map.get($size-props, separator-padding-x);
-        $_input-width: map.get($size-props, input-width);
-
-        .k-otp-#{$size} {
-            --kendo-otp-gap: var( --kendo-otp-#{$size}-gap, #{$_gap} );
-
-            .k-otp-input {
-                min-width: $_input-width;
-            }
-
-            .k-otp-separator:not(:empty) {
-                padding-inline: $_separator-padding-x;
-            }
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/otp/_layout.scss" as *;
 
 @mixin kendo-otp--layout() {
     @include kendo-otp--layout-base();

package/scss/otp/_theme.scss

@@ -1,11 +1,5 @@
 @use "sass:map";
-
-@mixin kendo-otp--theme-base() {
-
-    // OTP
-    .k-otp {};
-
-}
+@use "@progress/kendo-theme-core/scss/components/otp/_theme.scss" as *;
 
 @mixin kendo-otp--theme() {
     @include kendo-otp--theme-base();

package/scss/otp/_variables.scss

@@ -5,42 +5,42 @@
 
 /// The gap between the items in the OTP.
 /// @group one-time-password
-$kendo-otp-gap: k-spacing(1.5) !default;
+$kendo-otp-gap: var( --kendo-otp-gap, #{k-spacing(1.5)} ) !default;
 /// The gap between the items in the small OTP.
 /// @group one-time-password
-$kendo-otp-sm-gap: k-spacing(1) !default;
+$kendo-otp-sm-gap: var( --kendo-otp-sm-gap, #{k-spacing(1)} ) !default;
 /// The gap between the items in the medium OTP.
 /// @group one-time-password
-$kendo-otp-md-gap: $kendo-otp-gap !default;
+$kendo-otp-md-gap: var( --kendo-otp-md-gap, #{$kendo-otp-gap} ) !default;
 /// The gap between the items in the large OTP.
 /// @group one-time-password
-$kendo-otp-lg-gap: k-spacing(2) !default;
+$kendo-otp-lg-gap: var( --kendo-otp-lg-gap, #{k-spacing(2)} ) !default;
 
 /// The horizontal padding of the OTP separator.
 /// @group one-time-password
-$kendo-otp-separator-padding-x: $kendo-otp-gap !default;
+$kendo-otp-separator-padding-x: var( --kendo-otp-separator-padding-x, #{$kendo-otp-gap} ) !default;
 /// The horizontal padding of the small OTP separator.
 /// @group one-time-password
-$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
+$kendo-otp-sm-separator-padding-x: var( --kendo-otp-sm-separator-padding-x, #{$kendo-otp-sm-gap} ) !default;
 /// The horizontal padding of the medium OTP separator.
 /// @group one-time-password
-$kendo-otp-md-separator-padding-x: $kendo-otp-separator-padding-x !default;
+$kendo-otp-md-separator-padding-x: var( --kendo-otp-md-separator-padding-x, #{$kendo-otp-separator-padding-x} ) !default;
 /// The horizontal padding of the large OTP separator.
 /// @group one-time-password
-$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;
+$kendo-otp-lg-separator-padding-x: var( --kendo-otp-lg-separator-padding-x, #{$kendo-otp-lg-gap} ) !default;
 
 /// The horizontal padding of the OTP separator.
 /// @group one-time-password
-$kendo-otp-input-width: $kendo-input-calc-size !default;
+$kendo-otp-input-width: var( --kendo-otp-input-width, #{$kendo-input-calc-size} ) !default;
 /// The horizontal padding of the small OTP separator.
 /// @group one-time-password
-$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
+$kendo-otp-sm-input-width: var( --kendo-otp-sm-input-width, #{$kendo-input-sm-calc-size} ) !default;
 /// The horizontal padding of the medium OTP separator.
 /// @group one-time-password
-$kendo-otp-md-input-width: $kendo-otp-input-width !default;
+$kendo-otp-md-input-width: var( --kendo-otp-md-input-width, #{$kendo-otp-input-width} ) !default;
 /// The horizontal padding of the large OTP separator.
 /// @group one-time-password
-$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
+$kendo-otp-lg-input-width: var( --kendo-otp-lg-input-width, #{$kendo-input-lg-calc-size} ) !default;
 
 $kendo-otp-sizes: (
     sm: (
@@ -59,3 +59,16 @@ $kendo-otp-sizes: (
         input-width: $kendo-otp-lg-input-width
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with (
+    $kendo-otp-sm-gap: $kendo-otp-sm-gap,
+    $kendo-otp-md-gap: $kendo-otp-md-gap,
+    $kendo-otp-lg-gap: $kendo-otp-lg-gap,
+    $kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x,
+    $kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x,
+    $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
+    $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
+    $kendo-otp-md-input-width: $kendo-otp-md-input-width,
+    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
+    $kendo-otp-sizes: $kendo-otp-sizes
+);

package/scss/overlay/_layout.scss

@@ -1,15 +1,6 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/overlay/_layout.scss" as *;
 
 @mixin kendo-overlay--layout() {
-
-    .k-overlay {
-        width: 100%;
-        height: 100%;
-        opacity: var( --kendo-overlay-opacity, #{$kendo-overlay-opacity} );
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 10001;
-    }
-
+    @include kendo-overlay--layout-base();
 }

package/scss/overlay/_theme.scss

@@ -1,14 +1,15 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/overlay/_theme.scss" as *;
 
 @mixin kendo-overlay--theme() {
+    @include kendo-overlay--theme-base();
 
     .k-overlay,
     .k-overlay-dark {
-        background-color: var( --kendo-overlay-dark, #{$kendo-overlay-dark} );
+        background-color: $kendo-overlay-dark;
     }
 
     .k-overlay-light {
-        background-color: var( --kendo-overlay-light, #{$kendo-overlay-light} );
+        background-color: $kendo-overlay-light;
     }
-
 }

package/scss/overlay/_variables.scss

@@ -2,11 +2,15 @@
 
 /// Opacity of the overlay.
 /// @group overlay
-$kendo-overlay-opacity: .4 !default;
+$kendo-overlay-opacity: var( --kendo-overlay-opacity, .4 ) !default;
 
 /// Background color of the dark overlay.
 /// @group overlay
-$kendo-overlay-dark: $kendo-color-black !default;
+$kendo-overlay-dark: var( --kendo-overlay-dark, #{$kendo-color-black} ) !default;
 /// Background color of the light overlay.
 /// @group overlay
-$kendo-overlay-light: $kendo-color-white !default;
+$kendo-overlay-light: var( --kendo-overlay-light, #{$kendo-color-white} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
+    $kendo-overlay-opacity: $kendo-overlay-opacity
+);

package/scss/pager/_layout.scss

@@ -2,177 +2,43 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/pager/_layout.scss" as *;
 
 @mixin kendo-pager--layout() {
+    @include kendo-pager--layout-base();
 
-    .k-pager {
-        padding-inline: var( --kendo-pager-padding-x, 0 );
-        padding-block: var( --kendo-pager-padding-y, 0 );
-        border-width: var( --kendo-pager-border-width, #{$kendo-pager-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-pager-font-family, #{$kendo-pager-font-family} );
-        font-size: var( --kendo-pager-font-size, #{$kendo-pager-font-size} );
-        line-height: var( --kendo-pager-line-height, #{$kendo-pager-line-height} );
-        white-space: nowrap;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var( --kendo-pager-spacing, 0 );
-        position: relative;
-        overflow: hidden;
-        cursor: default;
-        flex: 0 0 auto;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-    }
-
-    .k-pager-responsive {
-        flex-wrap: nowrap;
-    }
-
-    // Base pager section
-    %base-pager-section {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-
-    // Base pager item
-    %base-pager-item {
-        color: inherit;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-
-        &:hover {
-            z-index: 2;
-        }
-    }
-
-
-    // Pager items
     .k-pager-nav {
-        @extend %base-pager-item !optional;
-        @include border-radius( var( --kendo-pager-item-border-radius, #{$kendo-pager-item-border-radius} ) );
+        @include border-radius( $kendo-pager-item-border-radius );
     }
 
-
-    // Pager numbers
     .k-pager-numbers-wrap {
-        display: flex;
-        flex-direction: row;
-        position: relative;
 
         select.k-dropdown-list {
-            width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
+            width: $kendo-pager-dropdown-width;
         }
     }
-    .k-pager-numbers {
-        display: flex;
-        flex-direction: row;
-
-        // Selected state
-        .k-selected {
-            cursor: inherit;
-            z-index: 2;
-        }
 
+    .k-pager-numbers {
         .k-button {
-            padding-inline: var( --kendo-button-padding-y );
-
             .k-button-text {
                 min-width: calc( var( --kendo-line-height ) * 1em );
             }
         }
     }
 
+    // Sizes
+    @each $size, $size-props in $kendo-button-sizes {
+        $_padding-y: map.get( $size-props, padding-y );
 
-    // Spacing between items
-    .k-pager-nav + .k-pager-nav,
-    .k-pager-nav + .k-pager-numbers-wrap,
-    .k-pager-numbers-wrap + .k-pager-nav {
-        @if ($kendo-pager-item-spacing) {
-            margin-inline-start: var( --kendo-pager-item-spacing, #{$kendo-pager-item-spacing} );
+        .k-pager-numbers .k-button-#{$size} {
+            padding-inline: $_padding-y;
         }
     }
 
-
-    // Pager input
-    .k-pager-input {
-        @extend %base-pager-section !optional;
-        gap: 1ex;
-
-        .k-textbox,
-        .k-numerictextbox {
-            margin-block: 0;
-            width: var( --kendo-pager-input-width, #{$kendo-pager-input-width} );
-        }
-    }
-
-
-    // Pager sizes
     .k-pager-sizes {
-        @extend %base-pager-section !optional;
-        gap: 1ex;
-
         .k-dropdown-list,
         > select {
-            width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
+            width: $kendo-pager-dropdown-width;
         }
-
-        .k-input-inner,
-        .k-input-value-text {
-            text-overflow: clip;
-        }
-    }
-
-
-    // Pager info
-    .k-pager-info {
-        @extend %base-pager-section !optional;
-        text-align: end;
-        justify-content: flex-end;
-        flex: 1 1 0%;
-        order: 9;
     }
-
-
-    // Pager refresh
-    .k-pager-refresh {
-        margin-inline-start: auto;
-        color: inherit;
-        order: 10;
-    }
-
-    // Pager sizes
-    @each $size, $size-props in $kendo-pager-sizes {
-        $_padding-x: map.get($size-props, padding-x);
-        $_padding-y: map.get($size-props, padding-y);
-        $_item-group-spacing: map.get($size-props, item-group-spacing);
-
-        .k-pager-#{$size} {
-            --kendo-pager-padding-x: var( --kendo-pager-#{$size}-padding-x, #{$_padding-x} );
-            --kendo-pager-padding-y: var( --kendo-pager-#{$size}-padding-y, #{$_padding-y} );
-            --kendo-pager-spacing: var( --kendo-pager-#{$size}-spacing, #{$_item-group-spacing} );
-
-            .k-pager-input,
-            select.k-dropdown-list {
-                margin-inline-start: var( --kendo-pager-input-margin-start, #{$_item-group-spacing} );
-                margin-inline-end: var( --kendo-pager-input-margin-end, #{$_item-group-spacing} );
-            }
-        }
-    }
-
 }

package/scss/pager/_theme.scss

@@ -1,32 +1,24 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/pager/_theme.scss" as *;
 
 @mixin kendo-pager--theme() {
+    @include kendo-pager--theme-base();
 
     .k-pager {
-        @include fill(
-            var( --kendo-pager-text, #{$kendo-pager-text} ),
-            var( --kendo-pager-bg, #{$kendo-pager-bg} ),
-            var( --kendo-pager-border, #{$kendo-pager-border} )
-        );
-
         &:focus,
         &.k-focus {
-            --kendo-pager-text: var( --kendo-pager-focus-text, #{$kendo-pager-focus-text} );
-            --kendo-pager-bg: var( --kendo-pager-focus-bg, #{$kendo-pager-focus-bg} );
-            --kendo-pager-border: var( --kendo-pager-focus-border, #{$kendo-pager-focus-border} );
+            color: $kendo-pager-focus-text;
+            background-color: $kendo-pager-focus-bg;
+            border-color: $kendo-pager-focus-border;
         }
     }
 
-    // Pager sizes
     .k-pager-sizes {
-        color: var( --kendo-pager-sizes-label-text, #{$kendo-pager-sizes-label-text} );
+        color: $kendo-pager-sizes-label-text;
     }
 
-
-    // Pager info
     .k-pager-info {
-        color: var( --kendo-pager-info-label-text, #{$kendo-pager-info-label-text} );
+        color: $kendo-pager-info-label-text;
     }
-
 }