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

package/scss/no-data/_theme.scss

@@ -1,9 +1,6 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/no-data/_theme.scss" as *;
 
 @mixin kendo-no-data--theme() {
-
-    .k-no-data {
-        color: var( --kendo-no-data-text, #{$kendo-no-data-text} );
-    }
+    @include kendo-no-data--theme-base();
 
 }

package/scss/no-data/_variables.scss

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

package/scss/notification/_functions.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
+@function notification-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: map.merge(( $name: (
+            color: k-color(on-#{$name}),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
+
+    @return $_theme;
+}

package/scss/notification/_layout.scss

@@ -1,74 +1,8 @@
 @use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *;
 
 @mixin kendo-notification--layout() {
-
-    // Base
-    .k-notification-group {
-        max-height: 100%;
-        display: inline-flex;
-        flex-flow: column-reverse wrap;
-        position: fixed;
-        z-index: 1000;
-        gap: var( --kendo-notificaiton-group-gap, #{$kendo-notification-group-gap} ) 0;
-    }
-
-    // Needed due to the specifics in the implementation of animations in Angular
-    .k-notification-container-animating {
-        overflow: hidden;
-    }
-
-    .k-notification {
-        @include border-radius( var( --kendo-notification-border-radius, #{$kendo-notification-border-radius} ) );
-        padding-inline: var( --kendo-notification-padding-x, #{$kendo-notification-padding-x} );
-        padding-block: var( --kendo-notification-padding-y, #{$kendo-notification-padding-y} );
-        border-width: var( --kendo-notification-border-width, #{$kendo-notification-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-notification-font-family, #{$kendo-notification-font-family} );
-        font-size: var( --kendo-notification-font-size, #{$kendo-notification-font-size} );
-        line-height: var( --kendo-notification-line-height, #{$kendo-notification-line-height} );
-        cursor: default;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: var( --kendo-notification-icon-spacing, #{$kendo-notification-icon-spacing} );
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        > .k-notification-content {
-            flex: 1 1 auto;
-        }
-
-        > .k-notification-status {
-            flex-shrink: 0;
-        }
-    }
-
-    .k-notification-actions {
-        padding-inline: var( --kendo-notification-actions-padding-x, #{$kendo-notification-actions-padding-x} );
-        padding-block: var( --kendo-notification-actions-padding-y, #{$kendo-notification-actions-padding-y} );
-        flex: none;
-        display: flex;
-        gap: var( --kendo-notification-icon-spacing, #{$kendo-notification-icon-spacing} );
-        flex-flow: row nowrap;
-        align-items: center;
-        cursor: pointer;
-    }
-    .k-notification-action {
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-    }
+    @include kendo-notification--layout-base();
 
 }

package/scss/notification/_theme.scss

@@ -1,37 +1,13 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/notification/_theme.scss" as *;
 
 @mixin kendo-notification--theme() {
+    @include kendo-notification--theme-base();
 
-    // Theme
-    .k-notification {
-        color: var( --kendo-notification-text, #{$kendo-notification-text} );
-        background-color: var( --kendo-notification-bg, #{$kendo-notification-bg} );
-        border-color: var( --kendo-notification-border, #{$kendo-notification-border} );
-        box-shadow: var( --kendo-notification-box-shadow, #{$kendo-notification-box-shadow} );
-    }
-
-    @each $theme-color, $color-props in $kendo-notification-theme-colors {
-        $_text: inherit;
-        $_bg: map.get( $color-props, bg );
-        $_border: map.get( $color-props, border );
-        $_icon: map.get( $color-props, text );
-
-        .k-notification-#{$theme-color} {
-            --kendo-notification-text: var( --kendo-notification-#{$theme-color}-text, #{$_text} );
-            --kendo-notification-bg: var( --kendo-notification-#{$theme-color}-bg, #{$_bg} );
-            --kendo-notification-border: var( --kendo-notification-#{$theme-color}-border, #{$_border} );
-
-            .k-notification-wrap > .k-icon {
-                --kendo-notification-icon-text: var( --kendo-notification-#{$theme-color}-icon-text, #{$_icon} );
-            }
-        }
-    }
-
-    // Fix for dark notification text color
-    .k-notification-dark {
-        --kendo-notification-text: white;
+    .k-notification:not(.k-notification-inverse, .k-notification-dark) {
+        color: inherit;
     }
 
 }

package/scss/notification/_variables.scss

@@ -1,103 +1,62 @@
 @use "sass:map";
+@use "./_functions.scss" as *;
 @use "../core/_index.scss" as *;
 
 /// The row-gap between the elements in the Notification group.
 /// @group notification
-$kendo-notification-group-gap: k-spacing(2) !default;
+$kendo-notification-group-gap: var( --kendo-notification-group-gap, #{k-spacing(2)} ) !default;
 
-/// The horizontal padding of the Notification.
-/// @group notification
-$kendo-notification-padding-x: k-spacing(3) !default;
-/// The vertical padding of the Notification.
-/// @group notification
-$kendo-notification-padding-y: k-spacing(2) !default;
-// The width of the border around the Notification.
-/// @group notification
-$kendo-notification-border-width: 1px !default;
-/// The border radius of the Notification.
-/// @group notification
-$kendo-notification-border-radius: k-spacing(0.5) !default;
-/// The font family of the Notification.
-/// @group notification
-$kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
-/// The font size of the Notification.
-/// @group notification
-$kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// The line height of the Notification.
-/// @group notification
-$kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
-/// The horizontal padding of the Notification actions.
-/// @group notification
-$kendo-notification-actions-padding-x: null !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: k-color(surface-alt) !default;
-/// The text color of the Notification.
-/// @group notification
-$kendo-notification-text: k-color(on-app-surface) !default;
-/// The border color of the Notification.
-/// @group notification
-$kendo-notification-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
-/// The box shadow of the Notification.
-/// @group notification
-$kendo-notification-box-shadow: none !default;
+$kendo-notification-padding-x: var( --kendo-notification-padding-x, #{k-spacing(3)} ) !default;
+$kendo-notification-padding-y: var( --kendo-notification-padding-y, #{k-spacing(2)} ) !default;
+$kendo-notification-border-width: var( --kendo-notification-border-width, 1px ) !default;
+$kendo-notification-border-radius: var( --kendo-notification-border-radius, #{k-spacing(0.5)} ) !default;
+$kendo-notification-font-family: var( --kendo-notification-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-notification-font-size: var( --kendo-notification-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-notification-line-height: var( --kendo-notification-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-notification-actions-padding-x: var( --kendo-notification-actions-padding-x, null ) !default;
+$kendo-notification-actions-padding-y: var( --kendo-notification-actions-padding-y, #{$kendo-notification-actions-padding-x} ) !default;
 
-/// The horizontal spacing of the Notification icon.
-/// @group notification
-$kendo-notification-icon-spacing: k-spacing(2) !default;
+$kendo-notification-bg: var( --kendo-notification-bg, #{k-color(surface-alt)} ) !default;
+$kendo-notification-text: var( --kendo-notification-text, #{k-color(on-app-surface)} ) !default;
+$kendo-notification-border: var( --kendo-notification-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-notification-box-shadow: var( --kendo-notification-box-shadow, none ) !default;
 
-/// The theme variations for the Notification.
-/// @group notification
-$kendo-notification-brand-colors: (
-    primary: primary,
-    error: error,
-    warning: warning,
-    success: success,
-    info: info,
-    secondary: secondary,
-    tertiary: tertiary,
-) !default;
-
-// Matrix with notification theme colors in the order: bg, color, border
-$_tc-notification-matrix: (
-    (normal: (color-subtle, color-on-subtle, color-subtle)),
-) !default;
-
-$_tc-notification-dark-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-notification-light-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
+$kendo-notification-icon-spacing: var( --kendo-notification-icon-spacing, #{k-spacing(2)} ) !default;
 
 /// The theme colors map for the Notification variations.
 /// @group notification
-$kendo-notification-theme-colors: () !default;
-
-@each $ui-states in $_tc-notification-matrix {
-    @each $brand-color, $palette in $kendo-notification-brand-colors {
-        $kendo-notification-theme-colors: map.deep-merge(
-            $kendo-notification-theme-colors,
-            k-generate-theme-variation( $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $ui-states in $_tc-notification-dark-matrix {
-    $kendo-notification-theme-colors: map.deep-merge(
-        $kendo-notification-theme-colors,
-        k-generate-theme-variation( dark, dark, $ui-states )
-    );
-}
+$kendo-notification-theme-colors: (
+    "primary": k-color(primary-subtle),
+    "secondary": k-color(secondary-subtle),
+    "tertiary": k-color(tertiary-subtle),
+    "info": k-color(info-subtle),
+    "success": k-color(success-subtle),
+    "warning": k-color(warning-subtle),
+    "error": k-color(error-subtle),
+    "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-notification-light-matrix {
-    $kendo-notification-theme-colors: map.deep-merge(
-        $kendo-notification-theme-colors,
-        k-generate-theme-variation( light, light, $ui-states )
-    );
-}
+/// The generated theme colors map for the Notification.
+/// @group notification
+$kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/notification/_variables.scss" with (
+    $kendo-notification-group-gap: $kendo-notification-group-gap,
+    $kendo-notification-padding-x: $kendo-notification-padding-x,
+    $kendo-notification-padding-y: $kendo-notification-padding-y,
+    $kendo-notification-border-width: $kendo-notification-border-width,
+    $kendo-notification-border-radius: $kendo-notification-border-radius,
+    $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,
+    $kendo-notification-icon-spacing: $kendo-notification-icon-spacing,
+    $kendo-notification-theme-colors: $kendo-notification-theme-colors,
+    $kendo-notification-theme: $kendo-notification-theme
+);

package/scss/numerictextbox/_layout.scss

@@ -1,10 +1,6 @@
-@mixin kendo-numeric-textbox--layout() {
-
-    // Numeric textbox
-    .k-numeric-textbox {}
+@use "@progress/kendo-theme-core/scss/components/numerictextbox/_layout.scss" as *;
 
 
-    // Alias
-    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
-
+@mixin kendo-numeric-textbox--layout() {
+    @include kendo-numeric-textbox--layout-base();
 }

package/scss/numerictextbox/_theme.scss

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

package/scss/orgchart/_layout.scss

@@ -1,123 +1,32 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/orgchart/_layout.scss" as *;
 
 @mixin kendo-orgchart--layout() {
+    @include kendo-orgchart--layout-base();
 
-    .k-orgchart {
-        width: 100%;
-        padding-inline: var( --kendo-orgchart-padding-x, #{$kendo-orgchart-padding-x} );
-        padding-block: var( --kendo-orgchart-padding-y, #{$kendo-orgchart-padding-y} );
-        box-sizing: border-box;
-        font-family: var( --kendo-orgchart-font-family, #{$kendo-orgchart-font-family} );
-        font-size: var( --kendo-orgchart-font-size, #{$kendo-orgchart-font-size} );
-        line-height: var( --kendo-orgchart-line-height, #{$kendo-orgchart-line-height} );
-        overflow: auto;
 
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-orgchart-container {
-        margin-block: 0;
-        margin-inline: auto;
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-
-    // Nodes
     .k-orgchart-group {
-        gap: var( --kendo-orgchart-group-spacing, #{$kendo-orgchart-group-spacing} );
-    }
-
-    .k-orgchart-group.k-vstack > .k-orgchart-node-container {
-        gap: 0;
+        gap: $kendo-orgchart-group-spacing;
     }
 
     .k-orgchart-node-container {
-        gap: var( --kendo-orgchart-node-spacing, #{$kendo-orgchart-node-spacing} );
-    }
-
-    .k-orgchart-node-group-container {
-        border-radius: var( --kendo-orgchart-node-group-border-radius, #{$kendo-orgchart-node-group-border-radius} );
-        padding-inline: var( --kendo-orgchart-node-group-padding-x, #{$kendo-orgchart-node-group-padding-x} );
-        padding-block: var( --kendo-orgchart-node-group-padding-y, #{$kendo-orgchart-node-group-padding-y} );
-        border-width: var( --kendo-orgchart-node-group-border-width, #{$kendo-orgchart-node-group-border-width} );
-        border-style: solid;
-        outline: 0;
-    }
-
-    .k-orgchart-node-group-title {
-        margin-inline: 0;
-        margin-block-start: 0;
-        margin-block-end: var( --kendo-orgchart-node-group-title-margin-y, #{$kendo-orgchart-node-group-title-margin-y} );
-        font-size: var( --kendo-orgchart-node-group-title-font-size, #{$kendo-orgchart-node-group-title-font-size} );
-        line-height: var( --kendo-orgchart-node-group-title-line-height, #{$kendo-orgchart-node-group-title-line-height} );
-    }
-
-    .k-orgchart-node-group-subtitle {
-        margin-inline: 0;
-        margin-block-start: 0;
-        margin-block-end: var( --kendo-orgchart-node-group-subtitle-margin-y, #{$kendo-orgchart-node-group-subtitle-margin-y} );
-        font-size: var( --kendo-orgchart-node-group-subtitle-font-size, #{$kendo-orgchart-node-group-subtitle-font-size} );
+        gap: $kendo-orgchart-node-spacing;
     }
 
-    // Card
     .k-orgchart-card {
-        width: var( --kendo-orgchart-card-width, #{$kendo-orgchart-card-width} );
-        border-width: var( --kendo-orgchart-card-border-width, #{$kendo-orgchart-card-border-width} );
 
         .k-card-title {
-            margin-block-end: var( --kendo-orgchart-card-title-margin-y, #{$kendo-orgchart-card-title-margin-y} );
-            font-size: var( --kendo-orgchart-card-title-font-size, #{$kendo-orgchart-card-title-font-size} );
-            line-height: var( --kendo-orgchart-card-title-line-height, #{$kendo-orgchart-card-title-line-height} );
+            line-height: $kendo-orgchart-card-title-line-height;
         }
-
         .k-card-subtitle {
-            margin-block-end: var( --kendo-orgchart-card-subtitle-margin-y, #{$kendo-orgchart-card-subtitle-margin-y} );
-            font-size: var( --kendo-orgchart-card-subtitle-font-size, #{$kendo-orgchart-card-subtitle-font-size} );
-            line-height: var( --kendo-orgchart-card-subtitle-line-height, #{$kendo-orgchart-card-subtitle-line-height} );
+            line-height: $kendo-orgchart-card-subtitle-line-height;
         }
-
         .k-card-body {
-            padding-inline: var( --kendo-orgchart-card-body-padding-x, #{$kendo-orgchart-card-body-padding-x} );
-            padding-block: var( --kendo-orgchart-card-body-padding-y, #{$kendo-orgchart-card-body-padding-y} );
-            border-width: var( --kendo-orgchart-card-body-border-width, #{$kendo-orgchart-card-body-border-width} );
-            border-style: solid;
-            flex-grow: 0;
+            padding-inline: $kendo-orgchart-card-body-padding-x;
+            padding-block: $kendo-orgchart-card-body-padding-y;
         }
-        .k-card-body .k-card-title-wrap {
-            margin-inline-end: var( --kendo-orgchart-card-body-vbox-margin-x, #{$kendo-orgchart-card-body-vbox-margin-x} );
-            min-width: 0;
-            min-height: var( --kendo-orgchart-card-body-vbox-min-height, #{$kendo-orgchart-card-body-vbox-min-height} );
-        }
-
         .k-card-title-wrap .k-card-title + .k-spacer {
             flex: 0;
         }
     }
-
-    // Lines
-    .k-orgchart-line {
-        background-color: currentColor;
-    }
-
-    .k-orgchart-line-h {
-        height: var( --kendo-orgchart-line-size, #{$kendo-orgchart-line-size} );
-    }
-
-    .k-orgchart-line-v {
-        margin-block: 0;
-        margin-inline: auto;
-        width: var( --kendo-orgchart-line-size, #{$kendo-orgchart-line-size} );
-        height: var( --kendo-orgchart-line-v-height, #{$kendo-orgchart-line-v-height} );
-    }
-
-    // Buttons
-    .k-orgchart-button {
-        z-index: 1;
-    }
-
 }

package/scss/orgchart/_theme.scss

@@ -1,60 +1,19 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/orgchart/_theme.scss" as *;
 
 @mixin kendo-orgchart--theme() {
+    @include kendo-orgchart--theme-base();
 
-    .k-orgchart {
-        @include fill (
-            var( --kendo-orgchart-text, #{$kendo-orgchart-text} ),
-            var( --kendo-orgchart-bg, #{$kendo-orgchart-bg} ),
-            var( --kendo-orgchart-border, #{$kendo-orgchart-border} )
-        );
-    }
-
-    // Card
     .k-orgchart-card {
-        @include box-shadow( var( --kendo-orgchart-card-shadow, #{$kendo-orgchart-card-shadow} ) );
-
-        .k-card-body {
-            @include fill(
-                $border: var( --kendo-orgchart-card-body-border-color, #{$kendo-orgchart-card-body-border-color} )
-            );
-        }
-
         &:focus,
         &.k-focus {
-            @include box-shadow( var( --kendo-orgchart-card-focus-shadow, #{$kendo-orgchart-card-focus-shadow} ) );
+            @include box-shadow( $kendo-orgchart-card-focus-shadow );
         }
     }
 
-    // Group
-    .k-orgchart-node-group-container {
-        @include fill (
-            var( --kendo-orgchart-node-group-text, #{$kendo-orgchart-node-group-text} ),
-            var( --kendo-orgchart-node-group-bg, #{$kendo-orgchart-node-group-bg} ),
-            var( --kendo-orgchart-node-group-border, #{$kendo-orgchart-node-group-border} )
-        );
-    }
     .k-orgchart-node-group-container:focus,
     .k-orgchart-node-group-container.k-focus {
-        @include box-shadow( var( --kendo-orgchart-node-group-focus-shadow, #{$kendo-orgchart-node-group-focus-shadow} ) );
-        @include fill (
-            $border: var( --kendo-orgchart-node-group-focus-border, #{$kendo-orgchart-node-group-focus-border} )
-        );
+        @include box-shadow( $kendo-orgchart-node-group-focus-shadow );
     }
-
-    .k-orgchart-node-group-subtitle {
-        @include fill(
-            $color: var( --kendo-orgchart-node-group-subtitle-text, #{$kendo-orgchart-node-group-subtitle-text} )
-        );
-    }
-
-    // Lines
-    .k-orgchart-line-h,
-    .k-orgchart-line-v {
-        @include fill(
-            $color: var( --kendo-orgchart-line-text, #{$kendo-orgchart-line-text} )
-        );
-    }
-
 }