@progress/kendo-theme-fluent 5.7.0

package/scss/notification/_variables.scss

@@ -0,0 +1,102 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Vertical padding of the notification container.
+/// @group notification
+$kendo-notification-container-padding-y: $kendo-padding-y-sm !default;
+
+/// Horizontal padding of the notification.
+/// @group notification
+$kendo-notification-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the notification.
+/// @group notification
+$kendo-notification-padding-y: map-get( $kendo-spacing, 2 ) !default;
+// Width of the border around the notification.
+/// @group notification
+$kendo-notification-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Border radius of the notification.
+/// @group notification
+$kendo-notification-border-radius: map-get( $kendo-spacing, thin ) !default;
+/// Font family of the notification.
+/// @group notification
+$kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the notification.
+/// @group notification
+$kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the notification.
+/// @group notification
+$kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
+/// Background color of the notification.
+/// @group notification
+$kendo-notification-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the notification.
+/// @group notification
+$kendo-notification-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the notification.
+/// @group notification
+$kendo-notification-border: var( --kendo-component-border, inherit ) !default;
+/// Box shadow of the notification.
+/// @group notification
+$kendo-notification-box-shadow: none !default;
+
+/// Horizontal spacing of the notification icon.
+/// @group notification
+$kendo-notification-icon-spacing: map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal spacing of the notification close icon.
+/// @group notification
+$kendo-notification-close-icon-spacing: map-get( $kendo-spacing, 4 ) !default;
+/// Color of the notification icon.
+/// @group notification
+$kendo-notification-icon-text: var( --kendo-component-text, inherit ) !default;
+
+/// Theme variations for the notification.
+$kendo-notification-brand-colors: (
+    primary: primary,
+    error: error,
+    warning: warning,
+    success: success,
+    info: info,
+    secondary: neutral,
+    tertiary: tertiary,
+);
+
+// Matrix with notification theme colors in the order: bg, color, border
+$_tc-notification-matrix: (
+    (normal: (20, 190, 20)),
+);
+
+$_tc-notification-dark-matrix: (
+    (normal: (160, $white, 160)),
+);
+
+$_tc-notification-light-matrix: (
+    (normal: (50, 160, 50)),
+);
+
+/// Theme colors map for the notification variations.
+$kendo-notification-theme-colors: ();
+
+@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,
+            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,
+        generate-theme-variation( dark, neutral, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-notification-light-matrix {
+    $kendo-notification-theme-colors: map.deep-merge(
+        $kendo-notification-theme-colors,
+        generate-theme-variation( light, neutral, $ui-states )
+    );
+}
+

package/scss/notification/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "notification",
+    dependencies: (
+        "icon",
+        "popup"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "notification" ) {
+        @include kendo-notification--layout();
+        @include kendo-notification--theme();
+    }
+}

package/scss/numerictextbox/_layout.scss

@@ -0,0 +1,10 @@
+@mixin kendo-numerictextbox--layout() {
+
+    // Numeric textbox
+    .k-numeric-textbox {}
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
+
+}

package/scss/numerictextbox/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-numerictextbox--theme() {
+
+    // Numeric textbox
+    .k-numeric-textbox {}
+
+}

package/scss/numerictextbox/_variables.scss

@@ -0,0 +1 @@
+// Numeric Textbox

package/scss/numerictextbox/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "numerictextbox",
+    dependencies: (
+        "button",
+        "input",
+        "floating-label",
+        "icon"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "numerictextbox" ) {
+        @include kendo-numerictextbox--layout();
+        @include kendo-numerictextbox--theme();
+    }
+}

package/scss/orgchart/_layout.scss

@@ -0,0 +1,121 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-orgchart--layout() {
+
+    .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: 0 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;
+    }
+
+    .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} );
+    }
+
+    // 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} );
+        }
+
+        .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} );
+        }
+
+        .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;
+        }
+        .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: 0 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

@@ -0,0 +1,60 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-orgchart--theme() {
+
+    .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} ) );
+        }
+    }
+
+    // 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} )
+        );
+    }
+
+    .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} )
+        );
+    }
+
+}

package/scss/orgchart/_variables.scss

@@ -0,0 +1,152 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../card/_variables.scss" as *;
+
+/// Spacing index of the orgchart.
+/// @group orgchart
+$kendo-orgchart-spacer: map-get( $kendo-spacing, 6) !default;
+/// Vertical padding of the orgchart.
+/// @group orgchart
+$kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
+/// Horizontal padding of the orgchart.
+/// @group orgchart
+$kendo-orgchart-padding-x: $kendo-orgchart-padding-y !default;
+/// Font family of the orgchart.
+/// @group orgchart
+$kendo-orgchart-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the orgchart.
+/// @group orgchart
+$kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the orgchart.
+/// @group orgchart
+$kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
+/// Background color of the orgchart.
+/// @group orgchart
+$kendo-orgchart-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the orgchart.
+/// @group orgchart
+$kendo-orgchart-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the orgchart.
+/// @group orgchart
+$kendo-orgchart-border: var( --kendo-component-border, initial ) !default;
+
+/// Spacing of the orgchart node.
+/// @group orgchart
+$kendo-orgchart-node-spacing: $kendo-orgchart-spacer !default;
+/// Spacing of the orgchart group.
+/// @group orgchart
+$kendo-orgchart-group-spacing: $kendo-orgchart-spacer !default;
+/// Spacing of the orgchart node container.
+/// @group orgchart
+$kendo-orgchart-node-container-spacing: $kendo-orgchart-spacer !default;
+
+/// Vertical padding of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-padding-y: $kendo-orgchart-spacer !default;
+/// Horizontal padding of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !default;
+/// Border width of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-border-width: 1px !default;
+/// Border radius of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Background color of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-text: get-theme-color-var( neutral-190 ) !default;
+/// Border color of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-border: get-theme-color-var( neutral-30 ) !default;
+/// Focus border color of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
+/// Focus shadow of the orgchart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-shadow: $kendo-card-focus-shadow !default;
+
+/// Vertical margin of the orgchart node group title.
+/// @group orgchart
+$kendo-orgchart-node-group-title-margin-y: 0px !default;
+/// Font size of the orgchart node group title.
+/// @group orgchart
+$kendo-orgchart-node-group-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
+/// Line height of the orgchart node group title.
+/// @group orgchart
+$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height-md, normal ) !default;
+
+/// Vertical margin of the orgchart node group subtitle.
+/// @group orgchart
+$kendo-orgchart-node-group-subtitle-margin-y: $kendo-orgchart-spacer - map-get( $kendo-spacing, 1 ) !default;
+/// Font size of the orgchart node group subtitle.
+/// @group orgchart
+$kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the orgchart node group subtitle.
+/// @group orgchart
+$kendo-orgchart-node-group-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
+
+/// Width of the orgchart card.
+/// @group orgchart
+$kendo-orgchart-card-width: 300px !default;
+/// Border width of the orgchart card.
+/// @group orgchart
+$kendo-orgchart-card-border-width: $kendo-card-border-width !default;
+/// Shadow of the orgchart card.
+/// @group orgchart
+$kendo-orgchart-card-shadow: $kendo-card-shadow !default;
+/// Focus shadow of the orgchart card.
+/// @group orgchart
+$kendo-orgchart-card-focus-shadow: $kendo-card-focus-shadow !default;
+
+/// Vertical margin of the orgchart card title.
+/// @group orgchart
+$kendo-orgchart-card-title-margin-y: 0px !default;
+/// Font size of the orgchart card title.
+/// @group orgchart
+$kendo-orgchart-card-title-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the orgchart card title.
+/// @group orgchart
+$kendo-orgchart-card-title-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Vertical margin of the orgchart card subtitle.
+/// @group orgchart
+$kendo-orgchart-card-subtitle-margin-y: 0px !default;
+/// Font size of the orgchart card subtitle.
+/// @group orgchart
+$kendo-orgchart-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the orgchart card subtitle.
+/// @group orgchart
+$kendo-orgchart-card-subtitle-line-height: var( --kendo-line-height-md, inherit ) !default;
+
+/// Vertical padding of the orgchart card body.
+/// @group orgchart
+$kendo-orgchart-card-body-padding-y: $kendo-orgchart-spacer - map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal padding of the orgchart card body.
+/// @group orgchart
+$kendo-orgchart-card-body-padding-x: $kendo-orgchart-card-body-padding-y !default;
+/// Top border width of the orgchart card body.
+/// @group orgchart
+$kendo-orgchart-card-body-border-width: 2px 0 0 !default;
+/// Border color of the orgchart card body.
+/// @group orgchart
+$kendo-orgchart-card-body-border-color: transparent !default;
+
+/// Horizontal margin of the orgchart card body title wrap.
+/// @group orgchart
+$kendo-orgchart-card-body-vbox-margin-x: $kendo-orgchart-spacer - map-get( $kendo-spacing, 2 ) !default;
+/// Min height of the orgchart card body title wrap.
+/// @group orgchart
+$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
+
+/// Size of the orgchart connecting line.
+/// @group orgchart
+$kendo-orgchart-line-size: 1px !default;
+/// Fill color of the orgchart connecting line.
+/// @group orgchart
+$kendo-orgchart-line-text: get-theme-color-var( neutral-30 ) !default;
+/// Height of the orgchart connecting line.
+/// @group orgchart
+$kendo-orgchart-line-v-height: 25px !default;

package/scss/orgchart/index.scss

@@ -0,0 +1,34 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "orgchart",
+    dependencies: (
+        "icon",
+        "avatar",
+        "button",
+        "forms",
+        "textbox",
+        "dropdownlist",
+        "upload",
+        "menu",
+        "card",
+        "window"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "orgchart" ) {
+        @include kendo-orgchart--layout();
+        @include kendo-orgchart--theme();
+    }
+}

package/scss/overlay/_layout.scss

@@ -0,0 +1,15 @@
+@use "_variables.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;
+    }
+
+}

package/scss/overlay/_theme.scss

@@ -0,0 +1,14 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-overlay--theme() {
+
+    .k-overlay,
+    .k-overlay-dark {
+        background-color: var( --kendo-overlay-dark, #{$kendo-overlay-dark} );
+    }
+
+    .k-overlay-light {
+        background-color: var( --kendo-overlay-light, #{$kendo-overlay-light} );
+    }
+
+}

package/scss/overlay/_variables.scss

@@ -0,0 +1,12 @@
+@use "../core/color-system" as *;
+
+/// Opacity of the overlay.
+/// @group overlay
+$kendo-overlay-opacity: .4 !default;
+
+/// Background color of the dark overlay.
+/// @group overlay
+$kendo-overlay-dark: $black !default;
+/// Background color of the light overlay.
+/// @group overlay
+$kendo-overlay-light: $white !default;

package/scss/overlay/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "overlay",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "overlay" ) {
+        @include kendo-overlay--layout();
+        @include kendo-overlay--theme();
+    }
+}