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

package/scss/appbar/_layout.scss

@@ -1,119 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *;
 
 @mixin kendo-appbar--layout() {
-
-    // Appbar
-    .k-appbar {
-        margin-inline: var( --kendo-appbar-margin-x, #{$kendo-appbar-margin-x} );
-        margin-block: var( --kendo-appbar-margin-y, #{$kendo-appbar-margin-y} );
-        padding-inline: var( --kendo-appbar-padding-x, #{$kendo-appbar-padding-x} );
-        padding-block: var( --kendo-appbar-padding-y, #{$kendo-appbar-padding-y} );
-        border-width: var( --kendo-appbar-border-width, #{$kendo-appbar-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-appbar-font-family, #{$kendo-appbar-font-family} );
-        font-size: var( --kendo-appbar-font-size, #{$kendo-appbar-font-size} );
-        line-height: var( --kendo-appbar-line-height, #{$kendo-appbar-line-height} );
-        list-style: none;
-        display: flex;
-        gap: var( --kendo-appbar-spacing, #{$kendo-appbar-spacing} );
-        flex-flow: row wrap;
-        align-items: center;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        >* {
-            flex-shrink: 0;
-        }
-
-        // Appbar section
-        .k-appbar-section {
-            display: inline-flex;
-            flex-wrap: nowrap;
-            align-items: center;
-        }
-
-
-        // Appbar Spacer
-        .k-appbar-spacer {
-            flex: 1 0 auto;
-        }
-
-
-        .k-appbar-spacer-sized {
-            flex-grow: 0;
-        }
-
-
-        // Separator
-        .k-appbar-separator {
-            margin: 0;
-            width: 0;
-            min-height: 1em;
-            border-style: solid;
-            border-width: 0 0 0 1px;
-            display: inline-block;
-        }
-
-
-        // Input
-        .k-input,
-        .k-picker {
-            width: 10em;
-        }
-
-        .k-color-picker {
-            width: min-content;
-        }
-
-    }
-
-
-    // Static appbar
-    .k-appbar-static {
-        position: static;
-    }
-
-
-    // Sticky appbar
-    .k-appbar-sticky {
-        width: 100%;
-        position: sticky;
-        top: 0;
-        z-index: var( --kendo-appbar-zindex, #{$kendo-appbar-zindex} );
-    }
-
-
-    // Fixed appbar
-    .k-appbar-fixed {
-        width: 100%;
-        position: fixed;
-        z-index: 1;
-    }
-
-
-    // Appbar position
-    .k-appbar-top {
-        top: 0;
-        bottom: auto;
-    }
-
-    .k-appbar-bottom {
-        top: auto;
-        bottom: 0;
-
-        &.k-appbar-fixed {
-            bottom: 0;
-        }
-    }
-
+    @include kendo-appbar--layout-base();
 }

package/scss/appbar/_theme.scss

@@ -1,13 +1,16 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *;
 
 @mixin kendo-appbar--theme() {
 
-    .k-appbar {
-        color: var( --kendo-appbar-text, #{$kendo-appbar-text} );
-        background-color: var( --kendo-appbar-bg, #{$kendo-appbar-bg} );
-        border-color: var( --kendo-appbar-border, #{$kendo-appbar-border} );
+    @include kendo-appbar--theme-base();
+
+    .k-appbar-base {
+        color: $kendo-appbar-text;
+        background-color: $kendo-appbar-bg;
+        border-color: $kendo-appbar-border;
     }
 
     .k-appbar-inherit {
@@ -16,22 +19,8 @@
         border-color: inherit;
     }
 
-    // AppBar theme colors
-    @each $theme-color, $color-props in $kendo-appbar-theme-colors {
-
-        $_text: map.get( $color-props, text );
-        $_bg: map.get( $color-props, bg );
-        $_border: map.get( $color-props, border );
-
-        .k-appbar-#{$theme-color} {
-            --kendo-appbar-text: var( --kendo-appbar-#{$theme-color}-text, #{$_text} );
-            --kendo-appbar-bg: var( --kendo-appbar-#{$theme-color}-bg, #{$_bg} );
-            --kendo-appbar-border: var( --kendo-appbar-#{$theme-color}-border, #{$_border} );
-
-            .k-appbar-subtitle {
-                color: inherit;
-            }
-        }
+    .k-appbar-subtitle {
+        color: inherit;
     }
 
 }

package/scss/appbar/_variables.scss

@@ -3,104 +3,71 @@
 
 /// The horizontal margin of the AppBar.
 /// @group appbar
-$kendo-appbar-margin-x: k-spacing(0) !default;
+$kendo-appbar-margin-x: var( --kendo-appbar-margin-x, k-spacing(0) ) !default;
 /// The vertical margin of the AppBar.
 /// @group appbar
-$kendo-appbar-margin-y: k-spacing(0) !default;
+$kendo-appbar-margin-y: var( --kendo-appbar-margin-y, k-spacing(0) ) !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: k-spacing(2) !default;
+$kendo-appbar-padding-x: var( --kendo-appbar-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-y: k-spacing(2) !default;
+$kendo-appbar-padding-y: var( --kendo-appbar-padding-y, k-spacing(2) ) !default;
 /// The width of the border around the AppBar.
 /// @group appbar
-$kendo-appbar-border-width: 0px !default;
+$kendo-appbar-border-width: var( --kendo-appbar-border-width, 0px ) !default;
 /// The z-index of the AppBar.
 /// @group appbar
-$kendo-appbar-zindex: 1000 !default;
+$kendo-appbar-zindex: var( --kendo-appbar-zindex, 1000 ) !default;
 /// The font family of the AppBar.
 /// @group appbar
-$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-appbar-font-family: var( --kendo-appbar-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the AppBar.
 /// @group appbar
-$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-appbar-font-size: var( --kendo-appbar-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the AppBar.
 /// @group appbar
-$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-appbar-line-height: var( --kendo-appbar-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The spacing between the AppBar sections.
 /// @group appbar
-$kendo-appbar-spacing: k-spacing(2) !default;
+$kendo-appbar-spacing: var( --kendo-appbar-spacing, k-spacing(2) ) !default;
 
 /// The text color of the AppBar.
 /// @group appbar
-$kendo-appbar-text: k-color(on-app-surface) !default;
+$kendo-appbar-text: var( --kendo-appbar-text, k-color(on-app-surface) ) !default;
 /// The background color of the AppBar.
 /// @group appbar
-$kendo-appbar-bg: k-color(surface) !default;
+$kendo-appbar-bg: var( --kendo-appbar-bg, k-color(surface) ) !default;
 /// The border color of the AppBar.
 /// @group appbar
-$kendo-appbar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
-
-/// The theme variations for the AppBar.
-/// @group appbar
-$kendo-appbar-brand-colors: (
-    primary: primary,
-    error: error,
-    success: success,
-    info: info,
-    secondary: secondary,
-    tertiary: tertiary,
- ) !default;
-
-// Matrix with appbar theme colors in the order: bg, color, border
-$_tc-appbar-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-appbar-warning-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-appbar-dark-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-appbar-light-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
+$kendo-appbar-border: var( --kendo-appbar-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The theme colors map for the AppBar variations.
 /// @group appbar
-$kendo-appbar-theme-colors: () !default;
-
-@each $ui-states in $_tc-appbar-matrix {
-    @each $brand-color, $palette in $kendo-appbar-brand-colors {
-        $kendo-appbar-theme-colors: map.deep-merge(
-            $kendo-appbar-theme-colors,
-            k-generate-theme-variation( $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $ui-states in $_tc-appbar-warning-matrix {
-    $kendo-appbar-theme-colors: map.deep-merge(
-        $kendo-appbar-theme-colors,
-        k-generate-theme-variation( warning, warning, $ui-states )
-    );
-}
-
-@each $ui-states in $_tc-appbar-dark-matrix {
-    $kendo-appbar-theme-colors: map.deep-merge(
-        $kendo-appbar-theme-colors,
-        k-generate-theme-variation( dark, dark, $ui-states )
-    );
-}
+$kendo-appbar-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;
 
-@each $ui-states in $_tc-appbar-light-matrix {
-    $kendo-appbar-theme-colors: map.deep-merge(
-        $kendo-appbar-theme-colors,
-        k-generate-theme-variation( light, light, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with (
+    $kendo-appbar-margin-x: $kendo-appbar-margin-x,
+    $kendo-appbar-margin-y: $kendo-appbar-margin-y,
+    $kendo-appbar-padding-x: $kendo-appbar-padding-x,
+    $kendo-appbar-padding-y: $kendo-appbar-padding-y,
+    $kendo-appbar-border-width: $kendo-appbar-border-width,
+    $kendo-appbar-zindex: $kendo-appbar-zindex,
+    $kendo-appbar-font-family: $kendo-appbar-font-family,
+    $kendo-appbar-font-size: $kendo-appbar-font-size,
+    $kendo-appbar-line-height: $kendo-appbar-line-height,
+    $kendo-appbar-gap: $kendo-appbar-spacing,
+    $kendo-appbar-theme-colors: $kendo-appbar-theme-colors
+);

package/scss/avatar/_layout.scss

@@ -1,77 +1,6 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *;
 
 @mixin kendo-avatar--layout() {
-
-    // Avatar
-    .k-avatar {
-        border-width: 0;
-        border-style: solid;
-        box-sizing: border-box;
-        vertical-align: middle;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        overflow: hidden;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Avatar text
-    .k-avatar-text,
-    .k-avatar-initials {
-        font-size: var( --kendo-avatar-font-size, #{$kendo-avatar-font-size} );
-        font-family: var( --kendo-avatar-font-family, #{$kendo-avatar-font-family} );
-        line-height: var( --kendo-avatar-line-height, #{$kendo-avatar-line-height} );
-    }
-
-
-    // Avatar icon
-    .k-avatar-icon {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-    }
-
-
-    // Avatar image
-    .k-avatar-image {
-        width: 100%;
-        height: 100%;
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-
-        > img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            vertical-align: top;
-        }
-    }
-
-
-    // Sizes
-    @each $name, $size in $kendo-avatar-sizes {
-        .k-avatar-#{$name} {
-            width: var( --kendo-avatar-#{$name}-size, #{$size} );
-            height: var( --kendo-avatar-#{$name}-size, #{$size} );
-            flex-basis: var( --kendo-avatar-#{$name}-size, #{$size} );
-        }
-    }
-
-    // Shapes
-    .k-avatar-square {}
-
-    // Bordered
-    .k-avatar-bordered {
-        border-width: var( --kendo-avatar-border-width, #{$kendo-avatar-border-width} );
-    }
-
+    @include kendo-avatar--layout-base();
 }

package/scss/avatar/_theme.scss

@@ -1,21 +1,7 @@
 @use "sass:map";
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *;
 
 @mixin kendo-avatar--theme() {
-
-    @each $fill-mode, $theme-colors in $kendo-avatar-theme-colors {
-        @each $theme-color, $color-props in $theme-colors {
-
-            $_text-color: map.get( $color-props, text );
-            $_bg: map.get( $color-props, bg );
-            $_border-color: map.get( $color-props, border );
-
-            .k-avatar-#{$fill-mode}-#{$theme-color} {
-                color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
-                background-color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
-                border-color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
-            }
-        }
-
-    }
+    @include kendo-avatar--theme-base();
 }

package/scss/avatar/_variables.scss

@@ -3,17 +3,17 @@
 
 /// The border width of the Avatar.
 /// @group avatar
-$kendo-avatar-border-width: 1px !default;
+$kendo-avatar-border-width: var( --kendo-avatar-border-width, 1px ) !default;
 
 /// The font family of the Avatar.
 /// @group avatar
-$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-avatar-font-family: var( --kendo-avatar-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Avatar.
 /// @group avatar
-$kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-avatar-font-size: var( --kendo-avatar-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Avatar.
 /// @group avatar
-$kendo-avatar-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-avatar-line-height: var( --kendo-avatar-line-height, var( --kendo-line-height, inherit ) ) !default;
 
 /// The sizes map of the Avatar.
 /// @group avatar
@@ -23,84 +23,26 @@ $kendo-avatar-sizes: (
     lg: k-spacing(16)
 ) !default;
 
-/// The theme variations for the Avatar.
-/// @group avatar
-$kendo-avatar-brand-colors: (
-    primary: primary,
-    error: error,
-    success: success,
-    info: info,
-    secondary: secondary,
-    tertiary: tertiary,
- ) !default;
-
-// Matrices with Avatar theme colors in the order: bg, color, border
-$_tc-avatar-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (on-color, color, color)
-    )
-) !default;
-
-$_tc-avatar-warning-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (app-surface, color, color)
-    )
-) !default;
-
-$_tc-avatar-dark-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (on-color, color, color)
-    )
-) !default;
-
-$_tc-avatar-light-matrix: (
-    solid: (
-        normal: (color, on-color, color)
-    ),
-    outline: (
-        normal: (app-surface, color, color)
-    )
-) !default;
-
 /// The theme colors map for the Avatar variations.
 /// @group avatar
-$kendo-avatar-theme-colors: () !default;
-
-@each $fill-mode, $ui-states in $_tc-avatar-matrix {
-    @each $brand-color, $palette in $kendo-avatar-brand-colors {
-        $kendo-avatar-theme-colors: map.deep-merge(
-            $kendo-avatar-theme-colors,
-            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $fill-mode, $ui-states in $_tc-avatar-warning-matrix {
-    $kendo-avatar-theme-colors: map.deep-merge(
-        $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
-    );
-}
-
-@each $fill-mode, $ui-states in $_tc-avatar-dark-matrix {
-    $kendo-avatar-theme-colors: map.deep-merge(
-        $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, dark, $ui-states )
-    );
-}
+$kendo-avatar-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;
 
-@each $fill-mode, $ui-states in $_tc-avatar-light-matrix {
-    $kendo-avatar-theme-colors: map.deep-merge(
-        $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, light, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with (
+    $kendo-avatar-border-width: $kendo-avatar-border-width,
+    $kendo-avatar-font-family: $kendo-avatar-font-family,
+    $kendo-avatar-font-size: $kendo-avatar-font-size,
+    $kendo-avatar-line-height: $kendo-avatar-line-height,
+    $kendo-avatar-sizes: $kendo-avatar-sizes,
+    $kendo-avatar-theme-colors: $kendo-avatar-theme-colors
+);