@progress/kendo-theme-fluent 5.7.0

package/scss/menu/_variables.scss

@@ -0,0 +1,255 @@
+@use "../core" as *;
+@use "../core/variables" as *;
+@use "../core/color-system" as *;
+@use "../list/_variables.scss"as *;
+@use "../popup/_variables.scss"as *;
+
+/// Width of the menu border.
+/// @group menu
+$kendo-menu-border-width: map-get( $kendo-spacing, 0 ) !default;
+// Font family of the menu.
+/// @group menu
+$kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
+// Font size of the menu.
+/// @group menu
+$kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line heights used along with $font-size.
+/// @group menu
+$kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Padding of menu root items.
+/// @group menu
+$kendo-menu-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-item-padding-y: map-get( $kendo-spacing, 3 ) !default;
+
+/// Spacing between menu root items.
+/// @group menu
+$kendo-menu-item-spacing: map-get( $kendo-spacing, 0 ) !default;
+/// Spacing between menu root items text and icons.
+/// @group menu
+$kendo-menu-item-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+/// Spacing between menu separator and items.
+/// @group menu
+$kendo-menu-separator-margin: map-get( $kendo-spacing, 1 ) !default;
+
+/// Separator width
+/// @group menu
+$kendo-menu-separator-width: map-get( $kendo-spacing, hair ) !default;
+
+/// The base outline of focused menu item.
+/// @group menu
+$kendo-menu-item-focus-outline-offset: calc(-1 * map-get( $kendo-spacing, thin )) !default;
+$kendo-menu-item-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-menu-item-focus-outline-style: solid !default;
+
+/// The text color of the menu.
+/// @group menu
+$kendo-menu-text: var( --kendo-body-text, inherit ) !default;
+/// The background color of the menu.
+/// @group menu
+$kendo-menu-bg: transparent !default;
+/// The border color of the menu.
+/// @group menu
+$kendo-menu-border: initial !default;
+/// The shadow of the menu.
+/// @group menu
+$kendo-menu-shadow: none !default;
+
+/// The text color of menu items.
+/// @group menu
+$kendo-menu-item-text: $kendo-menu-text !default;
+/// The background color of menu items.
+/// @group menu
+$kendo-menu-item-bg: transparent !default;
+
+/// The text color of hover menu items.
+/// @group menu
+$kendo-menu-item-hover-text: var( --kendo-hover-text, inherit ) !default;
+/// The background color of hover menu items.
+/// @group menu
+$kendo-menu-item-hover-bg: var( --kendo-hover-bg, initial ) !default;
+
+/// The text color of focused menu items.
+/// @group menu
+$kendo-menu-item-focus-text: $kendo-menu-item-text !default;
+/// The background color of focused menu items.
+/// @group menu
+$kendo-menu-item-focus-bg: $kendo-menu-item-bg !default;
+/// The outline of focused menu items.
+/// @group menu
+$kendo-menu-item-focus-outline: var( --kendo-focus-outline, none ) !default;
+
+/// The text color of expanded menu items.
+/// @group menu
+$kendo-menu-item-expanded-text: $kendo-menu-item-hover-text !default;
+/// The background color of expanded menu items.
+/// @group menu
+$kendo-menu-item-expanded-bg: var( --kendo-selected-bg, initial ) !default;
+
+/// The text color of disabled menu items.
+/// @group menu
+$kendo-menu-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
+/// The background color of disabled menu items.
+/// @group menu
+$kendo-menu-item-disabled-bg: $kendo-menu-item-bg !default;
+
+/// Horizontal padding of the menu popup.
+/// @group menu
+$kendo-menu-popup-padding-x: $kendo-popup-padding-x !default;
+/// Vertical padding of the menu popup.
+/// @group menu
+$kendo-menu-popup-padding-y: $kendo-popup-padding-y !default;
+
+/// Width of the border around the menu popup.
+/// @group menu
+$kendo-menu-popup-border-width: $kendo-popup-border-width !default;
+
+/// Font sizes of the menu popup.
+/// @group menu
+$kendo-menu-popup-font-size: var( --kendo-font-size-md, inherit ) !default;
+$kendo-menu-popup-font-size-sm: $kendo-menu-popup-font-size !default;
+$kendo-menu-popup-font-size-md: $kendo-menu-popup-font-size !default;
+$kendo-menu-popup-font-size-lg: $kendo-menu-popup-font-size !default;
+
+/// Line heights used along with $kendo-font-size.
+/// @group menu
+$kendo-menu-popup-line-height: var( --kendo-line-height-md, 30px ) !default;
+$kendo-menu-popup-line-height-sm: $kendo-menu-popup-line-height !default;
+$kendo-menu-popup-line-height-md: $kendo-menu-popup-line-height !default;
+$kendo-menu-popup-line-height-lg: $kendo-menu-popup-line-height !default;
+
+/// The background of the menu popup.
+/// @group menu
+$kendo-menu-popup-bg: var( --kendo-component-bg, initial ) !default;
+/// The border color of the menu popup.
+/// @group menu
+$kendo-menu-popup-border: initial !default;
+/// The shadow of the menu popup.
+/// @group menu
+$kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+
+/// Horizontal padding of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-sm: $kendo-menu-popup-item-padding-x !default;
+$kendo-menu-popup-item-padding-x-md: $kendo-menu-popup-item-padding-x !default;
+$kendo-menu-popup-item-padding-x-lg: $kendo-menu-popup-item-padding-x !default;
+/// Vertical padding of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-padding-y-sm: $kendo-list-item-padding-y-sm !default;
+$kendo-menu-popup-item-padding-y-md: $kendo-list-item-padding-y-md !default;
+$kendo-menu-popup-item-padding-y-lg: $kendo-list-item-padding-y-lg !default;
+/// The end padding of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-padding-end-sm: calc( $kendo-menu-popup-item-padding-x-sm * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-item-padding-end-md: calc( $kendo-menu-popup-item-padding-x-md * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-item-padding-end-lg: calc( $kendo-menu-popup-item-padding-x-lg * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+
+/// The start margin of the menu item expand icon.
+/// @group menu
+$kendo-menu-popup-item-icon-margin-start-sm: map-get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-item-icon-margin-start-md: map-get( $kendo-spacing, 0 ) !default;
+$kendo-menu-popup-item-icon-margin-start-lg: map-get( $kendo-spacing, 0 ) !default;
+/// The end margin of the menu item expand icon.
+/// @group menu
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (var( --kendo-icon-size, 1rem ) + $kendo-menu-popup-item-padding-x-sm) ) !default;
+$kendo-menu-popup-item-icon-margin-end-md: calc( -1 * (var( --kendo-icon-size, 1rem ) + $kendo-menu-popup-item-padding-x-md) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (var( --kendo-icon-size, 1rem ) + $kendo-menu-popup-item-padding-x-lg) ) !default;
+
+/// The base shadow of focused menu item in popup.
+/// @group menu
+$kendo-menu-popup-focus-outline-offset: $kendo-menu-item-focus-outline-offset !default;
+$kendo-menu-popup-focus-outline-width: $kendo-menu-item-focus-outline-width !default;
+$kendo-menu-popup-focus-outline-style: $kendo-menu-item-focus-outline-style !default;
+
+/// The spacing between the menu items in popup.
+/// @group menu
+$kendo-menu-popup-item-spacing: map-get( $kendo-spacing, 0 ) !default;
+
+/// Sizes map for the menu.
+/// @group menu
+$kendo-menu-sizes: (
+    sm: (
+        group-font-size: $kendo-menu-popup-font-size-sm,
+        group-line-height: $kendo-menu-popup-line-height-sm,
+        link-padding-x: $kendo-menu-popup-item-padding-x-sm,
+        link-padding-y: $kendo-menu-popup-item-padding-y-sm,
+        link-padding-inline-end: $kendo-menu-popup-item-padding-end-sm,
+        arrow-margin-inline-start: $kendo-menu-popup-item-icon-margin-start-sm,
+        arrow-margin-inline-end: $kendo-menu-popup-item-icon-margin-end-sm,
+    ),
+    md: (
+        group-font-size: $kendo-menu-popup-font-size-md,
+        group-line-height: $kendo-menu-popup-line-height-md,
+        link-padding-x: $kendo-menu-popup-item-padding-x-md,
+        link-padding-y: $kendo-menu-popup-item-padding-y-md,
+        link-padding-inline-end: $kendo-menu-popup-item-padding-end-md,
+        arrow-margin-inline-start: $kendo-menu-popup-item-icon-margin-start-md,
+        arrow-margin-inline-end: $kendo-menu-popup-item-icon-margin-end-md,
+    ),
+    lg: (
+        group-font-size: $kendo-menu-popup-font-size-lg,
+        group-line-height: $kendo-menu-popup-line-height-lg,
+        link-padding-x: $kendo-menu-popup-item-padding-x-lg,
+        link-padding-y: $kendo-menu-popup-item-padding-y-lg,
+        link-padding-inline-end: $kendo-menu-popup-item-padding-end-lg,
+        arrow-margin-inline-start: $kendo-menu-popup-item-icon-margin-start-lg,
+        arrow-margin-inline-end: $kendo-menu-popup-item-icon-margin-end-lg
+    )
+) !default;
+
+/// The text color of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-text: $kendo-list-item-text !default;
+/// The background of the menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-bg: $kendo-list-item-bg !default;
+
+/// The text color of hovered menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
+/// The background of hovered menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
+
+/// The text color of focused menu items.
+/// @group menu
+$kendo-menu-popup-item-focus-text: $kendo-menu-item-text !default;
+/// The background color of focused menu items.
+/// @group menu
+$kendo-menu-popup-item-focus-bg: $kendo-menu-item-bg !default;
+/// The outline of focused menu items.
+/// @group menu
+$kendo-menu-popup-item-focus-outline: get-theme-color-var( neutral-130 ) !default;
+
+/// The text color of expanded menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
+/// The background of expanded menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
+
+/// The text color of disabled menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-disabled-text: $kendo-list-item-disabled-text !default;
+/// The background of disabled menu item in popup.
+/// @group menu
+$kendo-menu-popup-item-disabled-bg: $kendo-list-item-disabled-bg !default;
+
+/// The background color of scroll menu buttons.
+/// @group menu
+$kendo-menu-scroll-button-bg: var( --kendo-component-bg, $kendo-component-bg ) !default;
+/// The border color of scroll menu buttons.
+/// @group menu
+$kendo-menu-scroll-button-border: var( --kendo-component-border, $kendo-component-border ) !default;
+
+/// The background color of hover scroll menu buttons.
+/// @group menu
+$kendo-menu-scroll-button-hover-bg: null !default;
+/// The border color of scroll hover menu buttons.
+/// @group menu
+$kendo-menu-scroll-button-hover-border: null !default;
+
+///The color of menu items icon.
+/// @group menu
+$kendo-menu-icon-color: get-theme-color-var( primary-100 ) !default;

package/scss/menu/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "menu",
+    dependencies: (
+        "icon",
+        "popup",
+        "button",
+        "list"
+    )
+);
+
+// Core module
+
+// 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( "menu" ) {
+        @include kendo-menu--layout();
+        @include kendo-menu--theme();
+    }
+}

package/scss/menu-button/_layout.scss

@@ -0,0 +1,20 @@
+@use './variables' as *;
+@use "../button/_variables.scss" as *;
+
+@mixin kendo-menu-button--layout() {
+
+    // Menu button
+    .k-menu-button,
+    .k-dropdown-button {
+        aspect-ratio: auto;
+        flex-flow: row nowrap;
+
+        > .k-button-arrow {
+            flex: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+}

package/scss/menu-button/_theme.scss

@@ -0,0 +1 @@
+@mixin kendo-menu-button--theme() { }

package/scss/menu-button/_variables.scss

@@ -0,0 +1 @@
+// Menu button variables.

package/scss/menu-button/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "menu-button",
+    dependencies: (
+        "button",
+        "menu"
+    )
+);
+
+
+// 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( "menu-button" ) {
+        @include kendo-menu-button--layout();
+        @include kendo-menu-button--theme();
+    }
+}

package/scss/messagebox/_layout.scss

@@ -0,0 +1,22 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-messagebox--layout() {
+
+    .k-messagebox {
+        margin: var( --kendo-message-box-margin, #{$kendo-message-box-margin} );
+        padding-inline: var( --kendo-message-box-padding-x, #{$kendo-message-box-padding-x} );
+        padding-block: var( --kendo-message-box-padding-y, #{$kendo-message-box-padding-y} );
+        border-width: var( --kendo-message-box-border-width, #{$kendo-message-box-border-width} );
+        border-style: var( --kendo-message-box-border-style, #{$kendo-message-box-border-style} );
+        box-sizing: border-box;
+        font-family: var( --kendo-message-box-font-family, #{$kendo-message-box-font-family} );
+        font-size: var( --kendo-message-box-font-size, #{$kendo-message-box-font-size} );
+        line-height: var( --kendo-message-box-line-height, #{$kendo-message-box-line-height} );
+
+        a {
+            font-style: var( --kendo-message-box-link-font-style, #{$kendo-message-box-link-font-style} );
+            text-decoration: var( --kendo-message-box-link-decoration, #{$kendo-message-box-link-decoration} );
+        }
+    }
+
+}

package/scss/messagebox/_theme.scss

@@ -0,0 +1,44 @@
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-messagebox--theme() {
+
+    .k-messagebox {
+        --INTERNAL--kendo-messagebox-text: var( --kendo-messagebox-text );
+        --INTERNAL--kendo-messagebox-bg: var( --kendo-messagebox-bg );
+        --INTERNAL--kendo-messagebox-border: var( --kendo-messagebox-border );
+
+        color: var( --INTERNAL--kendo-messagebox-text, initial );
+        background-color: var( --INTERNAL--kendo-messagebox-bg, initial );
+        border-color: var( --INTERNAL--kendo-messagebox-border, initial );
+
+        a {
+            @include fill(
+                $color: var( --kendo-message-box-link-text, #{$kendo-message-box-link-text} ),
+            );
+
+            &:hover {
+                @include fill(
+                    $color: var( --kendo-message-box-link-hover-text, #{$kendo-message-box-link-hover-text} ),
+                );
+            }
+        }
+        
+    }
+
+    @each $theme-color, $color-props in $kendo-theme-colors {
+
+        $_text: currentColor;
+        $_bg: map-get( $color-props, bg );
+        $_border: map-get( $color-props, border );
+
+        .k-messagebox-#{$theme-color} {
+            --kendo-messagebox-text: var( --kendo-messagebox-#{$theme-color}-text, #{$_text} );
+            --kendo-messagebox-bg: var( --kendo-messagebox-#{$theme-color}-bg, #{$_bg} );
+            --kendo-messagebox-border: var( --kendo-messagebox-#{$theme-color}-border, #{$_border} );
+        }
+
+    }
+
+}

package/scss/messagebox/_variables.scss

@@ -0,0 +1,40 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Margin around the message box.
+/// @group messagebox
+$kendo-message-box-margin: 0 0 map-get( $kendo-spacing, 3 ) 0 !default;
+/// Horizontal padding of the message box.
+/// @group messagebox
+$kendo-message-box-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the message box.
+/// @group messagebox
+$kendo-message-box-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the message box.
+/// @group messagebox
+$kendo-message-box-border-width: 0 !default;
+/// Border style of the message box.
+/// @group messagebox
+$kendo-message-box-border-style: solid !default;
+/// Font family of the message box.
+/// @group messagebox
+$kendo-message-box-font-family: var(--kendo-font-family, inherit ) !default;
+/// Font size of the message box.
+/// @group messagebox
+$kendo-message-box-font-size: var(--kendo-font-size-sm, inherit ) !default;
+/// Line height of the message box.
+/// @group messagebox
+$kendo-message-box-line-height: var(--kendo-line-height-sm, normal ) !default;
+
+/// Font style of the message box links.
+/// @group messagebox
+$kendo-message-box-link-font-style: normal !default;
+/// Text decoration of the message box links.
+/// @group messagebox
+$kendo-message-box-link-decoration: underline !default;
+/// Text color of the message box links.
+/// @group messagebox
+$kendo-message-box-link-text: var(--kendo-link-text, initial ) !default;
+/// Hover text color of the message box links.
+/// @group messagebox
+$kendo-message-box-link-hover-text: var(--kendo-link-hover-text, initial ) !default;

package/scss/messagebox/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "messagebox",
+    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( "messagebox" ) {
+        @include kendo-messagebox--layout();
+        @include kendo-messagebox--theme();
+    }
+}

package/scss/multiselect/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-multiselect--layout() {
+
+    // Multiselect
+    .k-multiselect {}
+
+}

package/scss/multiselect/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-multiselect--theme() {
+
+    // Multiselect
+    .k-multiselect {}
+
+}

package/scss/multiselect/_variables.scss

@@ -0,0 +1 @@
+// Multiselect

package/scss/multiselect/index.scss

@@ -0,0 +1,31 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "multiselect",
+    dependencies: (
+        "forms",
+        "button",
+        "input",
+        "chip",
+        "floating-label",
+        "popup",
+        "list",
+        "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( "multiselect" ) {
+        @include kendo-multiselect--layout();
+        @include kendo-multiselect--theme();
+    }
+}

package/scss/notification/_layout.scss

@@ -0,0 +1,73 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-notification--layout() {
+
+    // Base
+    .k-notification-group {
+        max-height: 100%;
+        display: inline-flex;
+        flex-flow: column-reverse wrap;
+        position: fixed;
+    }
+
+    .k-notification-container {
+        margin-block: var( --kendo-notification-container-padding-y, #{$kendo-notification-container-padding-y} );
+        margin-inline: 0;
+        display: inline-flex;
+        vertical-align: top;
+
+        &-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: block;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-notification-wrap {
+        display: flex;
+        flex-flow: row nowrap;
+
+        >.k-icon {
+            margin-inline-end: var( --kendo-notification-icon-spacing, #{$kendo-notification-icon-spacing} );
+            align-self: center;
+            flex: none;
+        }
+
+        >.k-i-close,
+        >.k-i-x {
+            margin-inline-end: 0;
+            margin-inline-start: var( --kendo-notification-close-icon-spacing, #{$kendo-notification-close-icon-spacing} );
+            flex: none;
+            cursor: pointer;
+        }
+
+        >.k-notification-content {
+            flex: 1 1 auto;
+        }
+    }
+
+}

package/scss/notification/_theme.scss

@@ -0,0 +1,55 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-notification--theme() {
+
+    // Theme
+    .k-notification {
+        --INTERNAL--kendo-notification-text: var( --kendo-notification-text, #{$kendo-notification-text} );
+        --INTERNAL--kendo-notification-bg: var( --kendo-notification-bg, #{$kendo-notification-bg} );
+        --INTERNAL--kendo-notification-border: var( --kendo-notification-border, #{$kendo-notification-border} );
+        --INTERNAL--kendo-notification-box-shadow: var( --kendo-notification-box-shadow, #{$kendo-notification-box-shadow} );
+
+        color: var( --INTERNAL--kendo-notification-text, initial );
+        background-color: var( --INTERNAL--kendo-notification-bg, initial );
+        border-color: var( --INTERNAL--kendo-notification-border, initial );
+        box-shadow: var( --INTERNAL--kendo-notification-box-shadow, none );
+    }
+
+    .k-notification-wrap {
+        >.k-icon {
+            --INTERNAL--kendo-notification-icon-text: var( --kendo-notification-icon-text, #{$kendo-notification-icon-text} );
+
+            color: var( --INTERNAL--kendo-notification-icon-text, initial );
+        }
+
+        >.k-i-close,
+        >.k-i-x {
+            color: inherit;
+        }
+    }
+
+    @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;
+    }
+
+}
+