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

package/scss/loader/_variables.scss

@@ -4,37 +4,37 @@
 
 /// The border radius of the Loader segment.
 /// @group loader
-$kendo-loader-segment-border-radius: 50% !default;
+$kendo-loader-segment-border-radius: var( --kendo-loader-segment-border-radius, 50% ) !default;
 
 /// The size of the small Loader segment.
 /// @group loader
-$kendo-loader-sm-segment-size: k-spacing(1) !default;
+$kendo-loader-sm-segment-size: var( --kendo-loader-sm-segment-size, #{k-spacing(1)} ) !default;
 /// The size of the medium Loader segment.
 /// @group loader
-$kendo-loader-md-segment-size: k-spacing(2) !default;
+$kendo-loader-md-segment-size: var( --kendo-loader-md-segment-size, #{k-spacing(2)} ) !default;
 /// The size of the large Loader segment.
 /// @group loader
-$kendo-loader-lg-segment-size: k-spacing(4) !default;
+$kendo-loader-lg-segment-size: var( --kendo-loader-lg-segment-size, #{k-spacing(4)} ) !default;
 
 /// The horizontal padding of the small Loader.
 /// @group loader
-$kendo-loader-sm-padding-x: calc( #{$kendo-loader-sm-segment-size} / 2 ) !default;
+$kendo-loader-sm-padding-x: var( --kendo-loader-sm-padding-x, calc( #{$kendo-loader-sm-segment-size} / 2 ) ) !default;
 /// The horizontal padding of the medium Loader.
 /// @group loader
-$kendo-loader-md-padding-x: calc( #{$kendo-loader-md-segment-size} / 2 ) !default;
+$kendo-loader-md-padding-x: var( --kendo-loader-md-padding-x, calc( #{$kendo-loader-md-segment-size} / 2 ) ) !default;
 /// The horizontal padding of the large Loader.
 /// @group loader
-$kendo-loader-lg-padding-x: calc( #{$kendo-loader-lg-segment-size} / 2 ) !default;
+$kendo-loader-lg-padding-x: var( --kendo-loader-lg-padding-x, calc( #{$kendo-loader-lg-segment-size} / 2 ) ) !default;
 
 /// The vertical padding of the small Loader.
 /// @group loader
-$kendo-loader-sm-padding-y: calc( #{$kendo-loader-sm-segment-size} / 2 ) !default;
+$kendo-loader-sm-padding-y: var( --kendo-loader-sm-padding-y, calc( #{$kendo-loader-sm-segment-size} / 2 ) ) !default;
 /// The vertical padding of the medium Loader.
 /// @group loader
-$kendo-loader-md-padding-y: calc( #{$kendo-loader-md-segment-size} / 2 ) !default;
+$kendo-loader-md-padding-y: var( --kendo-loader-md-padding-y, calc( #{$kendo-loader-md-segment-size} / 2 ) ) !default;
 /// The vertical padding of the large Loader.
 /// @group loader
-$kendo-loader-lg-padding-y: calc( #{$kendo-loader-lg-segment-size} /2 ) !default;
+$kendo-loader-lg-padding-y: var( --kendo-loader-lg-padding-y, calc( #{$kendo-loader-lg-segment-size} /2 ) ) !default;
 
 /// The equilateral height of the Loader.
 /// @group loader
@@ -42,162 +42,160 @@ $kendo-loader-equilateral-height: .8660 !default;
 
 /// The width of the small spinner-3 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-3-width: calc( #{$kendo-loader-sm-segment-size} * 4 ) !default;
+$kendo-loader-sm-spinner-3-width: var( --kendo-loader-sm-spinner-3-width, calc( #{$kendo-loader-sm-segment-size} * 4 ) ) !default;
 /// The width of the medium spinner-3 Loader.
 /// @group loader
-$kendo-loader-md-spinner-3-width: calc( #{$kendo-loader-md-segment-size} * 4 ) !default;
+$kendo-loader-md-spinner-3-width: var( --kendo-loader-md-spinner-3-width, calc( #{$kendo-loader-md-segment-size} * 4 ) ) !default;
 /// The width of the large spinner-3 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-3-width: calc( #{$kendo-loader-lg-segment-size} * 4 ) !default;
+$kendo-loader-lg-spinner-3-width: var( --kendo-loader-lg-spinner-3-width, calc( #{$kendo-loader-lg-segment-size} * 4 ) ) !default;
 
 /// The height of the small spinner-3 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-3-height: calc( #{$kendo-loader-sm-spinner-3-width} * #{$kendo-loader-equilateral-height} ) !default;
+$kendo-loader-sm-spinner-3-height: var( --kendo-loader-sm-spinner-3-height, calc( #{$kendo-loader-sm-spinner-3-width} * #{$kendo-loader-equilateral-height} ) ) !default;
 /// The height of the medium spinner-3 Loader.
 /// @group loader
-$kendo-loader-md-spinner-3-height: calc( #{$kendo-loader-md-spinner-3-width} * #{$kendo-loader-equilateral-height} ) !default;
+$kendo-loader-md-spinner-3-height: var( --kendo-loader-md-spinner-3-height, calc( #{$kendo-loader-md-spinner-3-width} * #{$kendo-loader-equilateral-height} ) ) !default;
 /// The height of the large spinner-3 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-3-height: calc( #{$kendo-loader-lg-spinner-3-width} * #{$kendo-loader-equilateral-height} ) !default;
+$kendo-loader-lg-spinner-3-height: var( --kendo-loader-lg-spinner-3-height, calc( #{$kendo-loader-lg-spinner-3-width} * #{$kendo-loader-equilateral-height} ) ) !default;
 
 /// The width of the small spinner-4 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-4-width: calc( #{$kendo-loader-sm-segment-size} * 4 ) !default;
+$kendo-loader-sm-spinner-4-width: var( --kendo-loader-sm-spinner-4-width, calc( #{$kendo-loader-sm-segment-size} * 4 ) ) !default;
 /// The width of the medium spinner-4 Loader.
 /// @group loader
-$kendo-loader-md-spinner-4-width: calc( #{$kendo-loader-md-segment-size} * 4 ) !default;
+$kendo-loader-md-spinner-4-width: var( --kendo-loader-md-spinner-4-width, calc( #{$kendo-loader-md-segment-size} * 4 ) ) !default;
 /// The width of the large spinner-4 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-4-width: calc( #{$kendo-loader-lg-segment-size} * 4 ) !default;
+$kendo-loader-lg-spinner-4-width: var( --kendo-loader-lg-spinner-4-width, calc( #{$kendo-loader-lg-segment-size} * 4 ) ) !default;
 
 /// The height of the small spinner-4 Loader.
 /// @group loader
-$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+$kendo-loader-sm-spinner-4-height: var( --kendo-loader-sm-spinner-4-height, #{$kendo-loader-sm-spinner-4-width} ) !default;
 /// The height of the medium spinner-4 Loader.
 /// @group loader
-$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+$kendo-loader-md-spinner-4-height: var( --kendo-loader-md-spinner-4-height, #{$kendo-loader-md-spinner-4-width} ) !default;
 /// The height of the large spinner-4 Loader.
 /// @group loader
-$kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-width !default;
+$kendo-loader-lg-spinner-4-height: var( --kendo-loader-lg-spinner-4-height, #{$kendo-loader-lg-spinner-4-width} ) !default;
 
 /// The border width of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-width: 1px !default;
+$kendo-loader-container-panel-border-width: var( --kendo-loader-container-panel-border-width, 1px ) !default;
 /// The border style of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-style: solid !default;
+$kendo-loader-container-panel-border-style: var( --kendo-loader-container-panel-border-style, solid ) !default;
 /// The border color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-loader-container-panel-border-color: var( --kendo-loader-container-panel-border-color, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The border radius of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
+$kendo-loader-container-panel-border-radius: var( --kendo-loader-container-panel-border-radius, #{k-border-radius(md)} ) !default;
 /// The background color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-bg: k-color(app-surface) !default;
+$kendo-loader-container-panel-bg: var( --kendo-loader-container-panel-bg, #{k-color(app-surface)} ) !default;
 
 /// The horizontal padding of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-padding-x: k-spacing(4) !default;
+$kendo-loader-sm-container-padding-x: var( --kendo-loader-sm-container-padding-x, #{k-spacing(4)} ) !default;
 /// The horizontal padding of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-padding-x: k-spacing(5) !default;
+$kendo-loader-md-container-padding-x: var( --kendo-loader-md-container-padding-x, #{k-spacing(5)} ) !default;
 /// The horizontal padding of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-padding-x: k-spacing(6) !default;
+$kendo-loader-lg-container-padding-x: var( --kendo-loader-lg-container-padding-x, #{k-spacing(6)} ) !default;
 
 /// The vertical padding of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-padding-y: k-spacing(4) !default;
+$kendo-loader-sm-container-padding-y: var( --kendo-loader-sm-container-padding-y, #{k-spacing(4)} ) !default;
 /// The vertical padding of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-padding-y: k-spacing(5) !default;
+$kendo-loader-md-container-padding-y: var( --kendo-loader-md-container-padding-y, #{k-spacing(5)} ) !default;
 /// The vertical padding of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-padding-y: k-spacing(6) !default;
+$kendo-loader-lg-container-padding-y: var( --kendo-loader-lg-container-padding-y, #{k-spacing(6)} ) !default;
 
 /// The gap of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-gap: k-spacing(1) !default;
+$kendo-loader-sm-container-gap: var( --kendo-loader-sm-container-gap, #{k-spacing(1)} ) !default;
 /// The gap of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-gap: k-spacing(2) !default;
+$kendo-loader-md-container-gap: var( --kendo-loader-md-container-gap, #{k-spacing(2)} ) !default;
 /// The gap of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-gap: k-spacing(3) !default;
+$kendo-loader-lg-container-gap: var( --kendo-loader-lg-container-gap, #{k-spacing(3)} ) !default;
 
 /// The font size of the small Loader container.
 /// @group loader
-$kendo-loader-sm-container-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-loader-sm-container-font-size: var( --kendo-loader-sm-container-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The font size of the medium Loader container.
 /// @group loader
-$kendo-loader-md-container-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-loader-md-container-font-size: var( --kendo-loader-md-container-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The font size of the large Loader container.
 /// @group loader
-$kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !default;
-
-/// The theme variations for the Loader.
-/// @group loader
-$kendo-loader-brand-colors: (
-    primary: primary,
-    secondary: secondary,
-    tertiary: tertiary,
-    error: error,
-    success: success,
-    warning: warning,
-    info: info
- ) !default;
-
- // Matrix with loader theme colors in the order: bg, color, border
-$_tc-loader-matrix: (
-    (normal: (color, null, null)),
-) !default;
-
-$_tc-loader-dark-matrix: (
-    (normal: (color, null, null)),
-) !default;
-
-$_tc-loader-light-matrix: (
-    (normal: (color, null, null)),
-) !default;
+$kendo-loader-lg-container-font-size: var( --kendo-loader-lg-container-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
 
 /// The theme colors map for the Loader variations.
 /// @group loader
-$kendo-loader-theme-colors: () !default;
-
-@each $ui-states in $_tc-loader-matrix {
-    @each $brand-color, $palette in $kendo-loader-brand-colors {
-        $kendo-loader-theme-colors: map.deep-merge(
-            $kendo-loader-theme-colors,
-            k-generate-theme-variation( $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $ui-states in $_tc-loader-dark-matrix {
-    $kendo-loader-theme-colors: map.deep-merge(
-        $kendo-loader-theme-colors,
-        k-generate-theme-variation( dark, dark, $ui-states )
-    );
-}
-
-@each $ui-states in $_tc-loader-light-matrix {
-    $kendo-loader-theme-colors: map.deep-merge(
-        $kendo-loader-theme-colors,
-        k-generate-theme-variation( light, light, $ui-states )
-    );
-}
+$kendo-loader-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;
 
 // Loading indicator
 /// The background color of the Loading indicator.
 /// @group loading
-$kendo-loading-bg: k-color(surface-alt) !default;
+$kendo-loading-bg: var( --kendo-loading-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the Loading indicator.
 /// @group loading
-$kendo-loading-text: currentColor !default;
+$kendo-loading-text: var( --kendo-loading-text, currentColor ) !default;
 /// The opacity of the Loading indicator.
 /// @group loading
-$kendo-loading-opacity: .3 !default;
+$kendo-loading-opacity: var( --kendo-loading-opacity, .3 ) !default;
 /// The z-index of the Loading indicator.
 /// @group loading
-$kendo-zindex-loading: 100 !default;
+$kendo-zindex-loading: var( --kendo-zindex-loading, 100 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with (
+    $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius,
+    $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size,
+    $kendo-loader-md-segment-size: $kendo-loader-md-segment-size,
+    $kendo-loader-lg-segment-size: $kendo-loader-lg-segment-size,
+    $kendo-loader-sm-spinner-3-width: $kendo-loader-sm-spinner-3-width,
+    $kendo-loader-md-spinner-3-width: $kendo-loader-md-spinner-3-width,
+    $kendo-loader-lg-spinner-3-width: $kendo-loader-lg-spinner-3-width,
+    $kendo-loader-sm-spinner-3-height: $kendo-loader-sm-spinner-3-height,
+    $kendo-loader-md-spinner-3-height: $kendo-loader-md-spinner-3-height,
+    $kendo-loader-lg-spinner-3-height: $kendo-loader-lg-spinner-3-height,
+    $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-spinner-4-width,
+    $kendo-loader-md-spinner-4-width: $kendo-loader-md-spinner-4-width,
+    $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-spinner-4-width,
+    $kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-height,
+    $kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-height,
+    $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-height,
+    $kendo-loader-container-panel-border-width: $kendo-loader-container-panel-border-width,
+    $kendo-loader-container-panel-border-style: $kendo-loader-container-panel-border-style,
+    $kendo-loader-container-panel-border-color: $kendo-loader-container-panel-border-color,
+    $kendo-loader-container-panel-border-radius: $kendo-loader-container-panel-border-radius,
+    $kendo-loader-container-panel-bg: $kendo-loader-container-panel-bg,
+    $kendo-loader-sm-container-gap: $kendo-loader-sm-container-gap,
+    $kendo-loader-md-container-gap: $kendo-loader-md-container-gap,
+    $kendo-loader-lg-container-gap: $kendo-loader-lg-container-gap,
+    $kendo-loader-sm-container-font-size: $kendo-loader-sm-container-font-size,
+    $kendo-loader-md-container-font-size: $kendo-loader-md-container-font-size,
+    $kendo-loader-lg-container-font-size: $kendo-loader-lg-container-font-size,
+    $kendo-loading-bg: $kendo-loading-bg,
+    $kendo-loading-text: $kendo-loading-text,
+    $kendo-loading-opacity: $kendo-loading-opacity,
+    $kendo-zindex-loading: $kendo-zindex-loading,
+    $kendo-loader-theme-colors: $kendo-loader-theme-colors
+);

package/scss/map/_layout.scss

@@ -1,135 +1,21 @@
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/map/_layout.scss" as *;
 
 @mixin kendo-map--layout() {
+    @include kendo-map--layout-base();
 
-    // Layout
     .k-map {
-        height: var( --kendo-map-height, #{$kendo-map-height} );
-        box-sizing: border-box;
-        border-width: var( --kendo-map-border-width, #{$kendo-map-border-width} );
-        border-style: solid;
-        font-size: var( --kendo-map-font-size, #{$kendo-map-font-size} );
-        line-height: var( --kendo-map-line-height, #{$kendo-map-line-height} );
-        font-family: var( --kendo-map-font-family, #{$kendo-map-font-family} );
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Scroll
-        .km-scroll-wrapper {
-            width: 100%;
-            height: 100%;
-            user-select: none;
-            position: absolute;
-        }
-        .km-scroll-container { height: 100%; }
-        .k-touch-scrollbar { display: none; }
-
-        // Layers
-        .k-layer {
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        // Marker
-        .k-marker {
-            transform: translate(-50%, -100%);
-            cursor: pointer;
-            position: absolute;
-            overflow: visible;
-        }
-
-
-        // Attribution
-        .k-attribution {
-            padding-inline: var( --kendo-map-attribution-padding-x, #{$kendo-map-attribution-padding-x} );
-            padding-block: var( --kendo-map-attribution-padding-y, #{$kendo-map-attribution-padding-y} );
-            border-width: 0;
-            font-size: var( --kendo-map-attribution-font-size, #{$kendo-map-attribution-font-size} );
-            z-index: 1000;
-        }
-    }
-
-
-    // Controls
-    .k-map-controls {
-        position: absolute;
-        display: flex;
-        align-items: center;
+        height: $kendo-map-height;
     }
 
-
-    // Navigator
     .k-navigator {
-        margin-inline: var( --kendo-map-navigator-margin-x, #{$kendo-map-navigator-margin-x} );
-        margin-block: var( --kendo-map-navigator-margin-y, #{$kendo-map-navigator-margin-y} );
-        width: var( --kendo-map-navigator-width, #{$kendo-map-navigator-width} );
-        height: var( --kendo-map-navigator-width, #{$kendo-map-navigator-width} );
-        border-width: var( --kendo-map-navigator-border-width, #{$kendo-map-navigator-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        border-radius: 50%;
-        position: relative;
-
-        // Buttons
-        .k-button {
-            padding: 0;
-            width: auto;
-            height: auto;
-            line-height: 1;
-            box-shadow: none;
-            position: absolute;
-
-            .k-icon {
-                min-width: 0;
-                min-height: 0;
-            }
-        }
-        .k-navigator-n,
-        .k-navigator-up {
-            transform: translateX(-50%);
-            top: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
-            left: 50%;
-        }
-        .k-navigator-e,
-        .k-navigator-right {
-            transform: translateY(-50%);
-            right: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
-            top: 50%;
-        }
-        .k-navigator-s,
-        .k-navigator-down {
-            transform: translateX(-50%);
-            bottom: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
-            left: 50%;
-        }
-        .k-navigator-w,
-        .k-navigator-left {
-            transform: translateY(-50%);
-            left: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
-            top: 50%;
-        }
+        margin-inline: $kendo-map-navigator-margin-x;
+        margin-block: $kendo-map-navigator-margin-y;
     }
 
-
-    // Zoom control
     .k-zoom-control {
-        margin-inline-start: var( --kendo-map-zoom-control-margin, #{$kendo-map-zoom-control-margin} );
-        border: 0;
-        background: none;
-        display: flex;
-    }
-
-    .k-pdf-export {
-        .k-navigator,
-        .k-zoom-control {
-            display: none;
-        }
+        margin-inline-start: $kendo-map-zoom-control-margin;
     }
 
 }

package/scss/map/_theme.scss

@@ -1,32 +1,20 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/map/_theme.scss" as *;
 
 @mixin kendo-map--theme() {
+    @include kendo-map--theme-base();
 
     .k-map {
-        @include fill(
-            var( --kendo-map-text, #{$kendo-map-text} ),
-            var( --kendo-map-bg, #{$kendo-map-bg} ),
-            var( --kendo-map-border, #{$kendo-map-border} )
-        );
-
         .k-navigator,
         .k-zoom-control {
-            background-color: var( --kendo-map-navigator-bg, #{$kendo-map-navigator-bg} );
-            border-color: var( --kendo-map-navigator-border, #{$kendo-map-navigator-border} );
+            background-color: $kendo-map-navigator-bg;
+            border-color: $kendo-map-navigator-border;
 
             .k-button {
-                color: var( --kendo-map-navigator-text, #{$kendo-map-navigator-text} );
+                color: $kendo-map-navigator-text;
             }
         }
-
-        .k-marker {
-            color: var( --kendo-map-marker-fill, #{$kendo-map-marker-fill} );
-        }
-
-        .k-attribution {
-            background-color: var( --kendo-map-attribution-bg, #{$kendo-map-attribution-bg} );
-        }
     }
 
 }

package/scss/map/_variables.scss

@@ -5,73 +5,91 @@
 
 /// The font size of the Map.
 /// @group map
-$kendo-map-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-map-font-size: var( --kendo-map-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Map.
 /// @group map
-$kendo-map-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-map-line-height: var( --kendo-map-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The font family of the Map.
 /// @group map
-$kendo-map-font-family: var( --kendo-font-family, normal ) !default;
+$kendo-map-font-family: var( --kendo-map-font-family, var( --kendo-font-family, normal ) ) !default;
 
 /// The background color of the Map.
 /// @group map
-$kendo-map-bg: k-color(surface-alt) !default;
+$kendo-map-bg: var( --kendo-map-bg, k-color(surface-alt) ) !default;
 /// The text color of the Map.
 /// @group map
-$kendo-map-text: k-color(on-app-surface) !default;
+$kendo-map-text: var( --kendo-map-text, k-color(on-app-surface) ) !default;
 /// The border color of the Map.
 /// @group map
-$kendo-map-border: k-color(border) !default;
+$kendo-map-border: var( --kendo-map-border, k-color(border) ) !default;
 
 /// The border width of the Map.
 /// @group map
-$kendo-map-border-width: 0px !default;
+$kendo-map-border-width: var( --kendo-map-border-width, 0px ) !default;
 /// The height of the Map.
 /// @group map
-$kendo-map-height: 600px !default;
+$kendo-map-height: var( --kendo-map-height, 600px ) !default;
 
 /// The horizontal margin of the Map navigator.
 /// @group map
-$kendo-map-navigator-margin-x: k-spacing(4) !default;
+$kendo-map-navigator-margin-x: var( --kendo-map-navigator-margin-x, k-spacing(4) ) !default;
 /// The vertical margin of the Map navigator.
 /// @group map
-$kendo-map-navigator-margin-y: k-spacing(4) !default;
+$kendo-map-navigator-margin-y: var( --kendo-map-navigator-margin-y, k-spacing(4) ) !default;
 /// The padding of the Map navigator.
 /// @group map
-$kendo-map-navigator-padding: k-spacing(0.5) !default;
+$kendo-map-navigator-padding: var( --kendo-map-navigator-padding, k-spacing(0.5) ) !default;
 /// The width of the Map navigator.
 /// @group map
-$kendo-map-navigator-width: calc( var( --kendo-icon-size, 1rem) * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) !default;
+$kendo-map-navigator-width: var( --kendo-map-navigator-width, calc( var( --kendo-icon-size, 1rem) * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) ) !default;
 /// The border width of the Map navigator.
 /// @group map
-$kendo-map-navigator-border-width: 1px !default;
+$kendo-map-navigator-border-width: var( --kendo-map-navigator-border-width, 1px ) !default;
 /// The background color of the Map navigator.
 /// @group map
-$kendo-map-navigator-bg: k-color(app-surface) !default;
+$kendo-map-navigator-bg: var( --kendo-map-navigator-bg, k-color(app-surface) ) !default;
 /// The text color of the Map navigator.
 /// @group map
-$kendo-map-navigator-text: k-color(on-app-surface) !default;
+$kendo-map-navigator-text: var( --kendo-map-navigator-text, k-color(on-app-surface) ) !default;
 /// The border color of the Map navigator.
 /// @group map
-$kendo-map-navigator-border: k-color(border) !default;
+$kendo-map-navigator-border: var( --kendo-map-navigator-border, k-color(border) ) !default;
 
 /// The margin of the Map zoom control.
 /// @group map
-$kendo-map-zoom-control-margin: k-spacing(4) !default;
+$kendo-map-zoom-control-margin: var( --kendo-map-zoom-control-margin, k-spacing(4) ) !default;
 
 /// The horizontal padding of the Map attribution.
 /// @group map
-$kendo-map-attribution-padding-x: k-spacing(1) !default;
+$kendo-map-attribution-padding-x: var( --kendo-map-attribution-padding-x, k-spacing(1) ) !default;
 /// The vertical padding of the Map attribution.
 /// @group map
-$kendo-map-attribution-padding-y: k-spacing(0.5) !default;
+$kendo-map-attribution-padding-y: var( --kendo-map-attribution-padding-y, k-spacing(0.5) ) !default;
 /// The font size of the Map attribution.
 /// @group map
-$kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
+$kendo-map-attribution-font-size: var( --kendo-map-attribution-font-size, calc( #{$kendo-map-font-size} * .75 ) ) !default;
 /// The background color of the Map attribution.
 /// @group map
-$kendo-map-attribution-bg: k-color(app-surface) !default;
+$kendo-map-attribution-bg: var( --kendo-map-attribution-bg, k-color(app-surface) ) !default;
 
 /// The fill color of the Map marker.
 /// @group map
-$kendo-map-marker-fill: k-color(primary) !default;
+$kendo-map-marker-fill: var( --kendo-map-marker-fill, k-color(primary) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/map/_variables.scss" with (
+    $kendo-map-border-width: $kendo-map-border-width,
+    $kendo-map-font-size: $kendo-map-font-size,
+    $kendo-map-line-height: $kendo-map-line-height,
+    $kendo-map-font-family: $kendo-map-font-family,
+    $kendo-map-bg: $kendo-map-bg,
+    $kendo-map-text: $kendo-map-text,
+    $kendo-map-border: $kendo-map-border,
+    $kendo-map-navigator-padding: $kendo-map-navigator-padding,
+    $kendo-map-navigator-width: $kendo-map-navigator-width,
+    $kendo-map-navigator-border-width: $kendo-map-navigator-border-width,
+    $kendo-map-attribution-padding-x: $kendo-map-attribution-padding-x,
+    $kendo-map-attribution-padding-y: $kendo-map-attribution-padding-y,
+    $kendo-map-attribution-font-size: $kendo-map-attribution-font-size,
+    $kendo-map-attribution-bg: $kendo-map-attribution-bg,
+    $kendo-map-marker-fill: $kendo-map-marker-fill
+);

package/scss/maskedtextbox/_layout.scss

@@ -1,6 +1,6 @@
-@mixin kendo-masked-textbox--layout() {
+@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_layout.scss" as *;
 
-    // Masked textbox
-    .k-maskedtextbox {}
+@mixin kendo-masked-textbox--layout() {
+    @include kendo-masked-textbox--layout-base();
 
 }

package/scss/maskedtextbox/_theme.scss

@@ -1,6 +1,6 @@
-@mixin kendo-masked-textbox--theme() {
+@use "@progress/kendo-theme-core/scss/components/maskedtextbox/_theme.scss" as *;
 
-    // Masked textbox
-    .k-maskedtextbox {}
+@mixin kendo-masked-textbox--theme() {
+    @include kendo-masked-textbox--theme-base();
 
 }