@progress/kendo-theme-default 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/multiselect/_layout.scss

@@ -1,9 +1,4 @@
-@mixin kendo-multiselect--layout-base() {
-
-    // Multiselect
-    .k-multiselect {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/multiselect/_layout.scss" as *;
 
 
 @mixin kendo-multiselect--layout() {

package/scss/multiselect/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-multiselect--theme-base() {
-
-    // Multiselect
-    .k-multiselect {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/multiselect/_theme.scss" as *;
 
 
 @mixin kendo-multiselect--theme() {

package/scss/no-data/_layout.scss

@@ -1,25 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-no-data--layout-base() {
-
-        .k-no-data {
-            min-height: $kendo-no-data-min-height;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: lighter;
-            text-align: center;
-            white-space: normal;
-        }
-
-
-        // Alias
-        .k-nodata {
-            @extend .k-no-data !optional;
-        }
-
-
-}
+@use "@progress/kendo-theme-core/scss/components/no-data/_layout.scss" as *;
 
 @mixin kendo-no-data--layout() {
     @include kendo-no-data--layout-base();

package/scss/no-data/_theme.scss

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

package/scss/no-data/_variables.scss

@@ -7,3 +7,8 @@ $kendo-no-data-min-height: 140px !default;
 /// The color of the 'No Data' text.
 /// @group no-data
 $kendo-no-data-text: $kendo-subtle-text !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: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
+
+    @return $_theme;
+}

package/scss/notification/_layout.scss

@@ -1,76 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-notification--layout-base() {
-
-    // Base
-    .k-notification-group {
-        max-height: 100%;
-        display: inline-flex;
-        flex-flow: column-reverse wrap;
-        position: fixed;
-        z-index: 1000;
-        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( $kendo-notification-border-radius );
-        padding-block: $kendo-notification-padding-y;
-        padding-inline: $kendo-notification-padding-x;
-        border-width: $kendo-notification-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-notification-font-family;
-        font-size: $kendo-notification-font-size;
-        line-height: $kendo-notification-line-height;
-        cursor: default;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: $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 {
-        flex: none;
-        display: flex;
-        gap: $kendo-notification-icon-spacing;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-        cursor: pointer;
-    }
-    .k-notification-action {
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *;
 
 
 @mixin kendo-notification--layout() {

package/scss/notification/_theme.scss

@@ -1,30 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-notification--theme-base() {
-
-    // Theme
-    .k-notification {
-        @include fill(
-            $kendo-notification-text,
-            $kendo-notification-bg,
-            $kendo-notification-border
-        );
-        @include box-shadow( $kendo-notification-shadow );
-    }
-
-    @each $name, $props in $kendo-notification-theme {
-        .k-notification-#{$name} {
-            @include fill(
-                map.get( $props, color ),
-                map.get( $props, background-color ),
-                map.get( $props, border )
-            );
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/notification/_theme.scss" as *;
 
 
 @mixin kendo-notification--theme() {

package/scss/notification/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "./_functions.scss" as *;
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
 @use "../popup/_variables.scss" as *;
@@ -48,23 +49,27 @@ $kendo-notification-shadow: $kendo-popup-shadow !default;
 /// @group notification
 $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
-@function notification-theme( $colors ) {
-    $_theme: ();
-
-    @each $name, $color in $colors {
-        $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
-            background-color: $color,
-            border: $color,
-        )), $_theme );
-    }
-
-    @return $_theme;
-}
-
 /// The theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme-colors: $kendo-theme-colors !default;
 /// 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-bg: $kendo-notification-bg,
+    $kendo-notification-text: $kendo-notification-text,
+    $kendo-notification-border: $kendo-notification-border,
+    $kendo-notification-shadow: $kendo-notification-shadow,
+    $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,13 +1,4 @@
-@mixin kendo-numeric-textbox--layout-base() {
-
-    // Numeric textbox
-    .k-numeric-textbox {}
-
-
-    // Alias
-    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
-
-}
+@use "@progress/kendo-theme-core/scss/components/numerictextbox/_layout.scss" as *;
 
 
 @mixin kendo-numeric-textbox--layout() {

package/scss/numerictextbox/_theme.scss

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

package/scss/orgchart/_layout.scss

@@ -1,115 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-orgchart--layout-base() {
-
-    // OrgChart
-    .k-orgchart {
-        width: 100%;
-        padding-block: $kendo-orgchart-padding-x;
-        padding-inline: $kendo-orgchart-padding-y;
-        box-sizing: border-box;
-        font-size: $kendo-orgchart-font-size;
-        font-family: $kendo-orgchart-font-family;
-        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: $kendo-orgchart-group-gap;
-    }
-
-    .k-orgchart-group.k-vstack > .k-orgchart-node-container {
-        gap: 0;
-    }
-
-    .k-orgchart-node-container {
-        gap: $kendo-orgchart-node-gap;
-    }
-
-    .k-orgchart-node-group-container {
-        @include border-radius( $kendo-orgchart-node-group-border-radius );
-        padding-block: $kendo-orgchart-node-group-padding-y;
-        padding-inline: $kendo-orgchart-node-group-padding-x;
-        border-width: $kendo-orgchart-node-group-border-width;
-        border-style: solid;
-        outline: 0;
-    }
-
-    .k-orgchart-node-group-title {
-        margin: 0 0 $kendo-orgchart-node-group-title-margin-bottom;
-        font-size: $kendo-orgchart-node-group-title-font-size;
-        line-height: $kendo-orgchart-node-group-title-line-height;
-    }
-
-    .k-orgchart-node-group-subtitle {
-        margin: 0 0 $kendo-orgchart-node-group-subtitle-margin-bottom;
-        font-size: $kendo-orgchart-node-group-subtitle-font-size;
-    }
-
-    // Card
-    .k-orgchart-card {
-        width: $kendo-orgchart-card-width;
-        border-width: $kendo-orgchart-card-border-width;
-
-        .k-card-title {
-            margin: 0 0 $kendo-orgchart-card-title-margin-bottom;
-            font-size: $kendo-orgchart-card-title-font-size;
-        }
-
-        .k-card-subtitle {
-            margin: 0 0 $kendo-orgchart-card-subtitle-margin-bottom;
-            font-size: $kendo-orgchart-card-subtitle-font-size;
-        }
-
-        .k-card-body {
-            border-width: $kendo-orgchart-card-body-border-width;
-            border-style: solid;
-            flex-grow: 0;
-        }
-        .k-card-body .k-card-title-wrap {
-            margin: 0 $kendo-orgchart-card-body-vbox-margin-right 0 0;
-            min-width: 0;
-            min-height: $kendo-orgchart-card-body-vbox-min-height;
-        }
-    }
-
-    // Lines
-    .k-orgchart-line {
-        background-color: currentColor;
-    }
-
-    .k-orgchart-line-h {
-        height: $kendo-orgchart-line-size;
-    }
-
-    .k-orgchart-line-v {
-        margin-block: 0;
-        margin-inline: auto;
-        width: $kendo-orgchart-line-size;
-        height: $kendo-orgchart-line-v-height;
-    }
-
-    // Buttons
-    .k-orgchart-button {
-        z-index: 1;
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/orgchart/_layout.scss" as *;
 
 
 @mixin kendo-orgchart--layout() {

package/scss/orgchart/_theme.scss

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

package/scss/orgchart/_variables.scss

@@ -148,3 +148,50 @@ $kendo-orgchart-line-fill: $kendo-base-border !default;
 /// The height of the OrgChart connecting line.
 /// @group orgchart
 $kendo-orgchart-line-v-height: k-spacing(6) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/orgchart/_variables.scss" with (
+    $kendo-orgchart-spacer: $kendo-orgchart-spacer,
+    $kendo-orgchart-padding-y: $kendo-orgchart-padding-y,
+    $kendo-orgchart-padding-x: $kendo-orgchart-padding-x,
+    $kendo-orgchart-font-family: $kendo-orgchart-font-family,
+    $kendo-orgchart-font-size: $kendo-orgchart-font-size,
+    $kendo-orgchart-line-height: $kendo-orgchart-line-height,
+    $kendo-orgchart-bg: $kendo-orgchart-bg,
+    $kendo-orgchart-text: $kendo-orgchart-text,
+    $kendo-orgchart-border: $kendo-orgchart-border,
+    $kendo-orgchart-node-gap: $kendo-orgchart-node-gap,
+    $kendo-orgchart-group-gap: $kendo-orgchart-group-gap,
+    $kendo-orgchart-node-container-gap: $kendo-orgchart-node-container-gap,
+    $kendo-orgchart-node-group-padding-y: $kendo-orgchart-node-group-padding-y,
+    $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-x,
+    $kendo-orgchart-node-group-border-width: $kendo-orgchart-node-group-border-width,
+    $kendo-orgchart-node-group-border-radius: $kendo-orgchart-node-group-border-radius,
+    $kendo-orgchart-node-group-bg: $kendo-orgchart-node-group-bg,
+    $kendo-orgchart-node-group-text: $kendo-orgchart-node-group-text,
+    $kendo-orgchart-node-group-border: $kendo-orgchart-node-group-border,
+    $kendo-orgchart-node-group-focus-border: $kendo-orgchart-node-group-focus-border,
+    $kendo-orgchart-node-group-focus-shadow: $kendo-orgchart-node-group-focus-shadow,
+    $kendo-orgchart-node-group-title-font-size: $kendo-orgchart-node-group-title-font-size,
+    $kendo-orgchart-node-group-title-margin-bottom: $kendo-orgchart-node-group-title-margin-bottom,
+    $kendo-orgchart-node-group-title-line-height: $kendo-orgchart-node-group-title-line-height,
+    $kendo-orgchart-node-group-subtitle-font-size: $kendo-orgchart-node-group-subtitle-font-size,
+    $kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-node-group-subtitle-margin-bottom,
+    $kendo-orgchart-node-group-subtitle-text: $kendo-orgchart-node-group-subtitle-text,
+    $kendo-orgchart-card-width: $kendo-orgchart-card-width,
+    $kendo-orgchart-card-padding-y: $kendo-orgchart-card-padding-y,
+    $kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-x,
+    $kendo-orgchart-card-border-width: $kendo-orgchart-card-border-width,
+    $kendo-orgchart-card-shadow: $kendo-orgchart-card-shadow,
+    $kendo-orgchart-card-focus-shadow: $kendo-orgchart-card-focus-shadow,
+    $kendo-orgchart-card-title-margin-bottom: $kendo-orgchart-card-title-margin-bottom,
+    $kendo-orgchart-card-title-font-size: $kendo-orgchart-card-title-font-size,
+    $kendo-orgchart-card-subtitle-margin-bottom: $kendo-orgchart-card-subtitle-margin-bottom,
+    $kendo-orgchart-card-subtitle-font-size: $kendo-orgchart-card-subtitle-font-size,
+    $kendo-orgchart-card-body-border-width: $kendo-orgchart-card-body-border-width,
+    $kendo-orgchart-card-body-border-color: $kendo-orgchart-card-body-border-color,
+    $kendo-orgchart-card-body-vbox-margin-right: $kendo-orgchart-card-body-vbox-margin-right,
+    $kendo-orgchart-card-body-vbox-min-height: $kendo-orgchart-card-body-vbox-min-height,
+    $kendo-orgchart-line-size: $kendo-orgchart-line-size,
+    $kendo-orgchart-line-fill: $kendo-orgchart-line-fill,
+    $kendo-orgchart-line-v-height: $kendo-orgchart-line-v-height
+);

package/scss/otp/_layout.scss

@@ -1,40 +1,4 @@
-@use "sass:map";
-@use "./_variables.scss" as *;
-@use "../core/_index.scss" as *;
-@use "../input/_variables.scss" as *;
-
-@mixin kendo-otp--layout-base() {
-    // OTP
-    .k-otp {
-        display: flex;
-        width: min-content;
-        align-items: center;
-        flex-direction: row;
-
-        .k-otp-input > .k-input-inner {
-            text-align: center;
-            padding-inline: 0;
-        }
-    }
-
-    @each $size, $size-props in $kendo-otp-sizes {
-        $_gap: map.get($size-props, gap);
-        $_separator-padding-x: map.get($size-props, separator-padding-x);
-        $_input-width: map.get($size-props, input-width);
-
-        .k-otp-#{$size} {
-            gap: $_gap;
-
-            .k-otp-input {
-                min-width: $_input-width;
-            }
-
-            .k-otp-separator:not(:empty) {
-                padding-inline: $_separator-padding-x;
-            }
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/otp/_layout.scss" as *;
 
 @mixin kendo-otp--layout() {
     @include kendo-otp--layout-base();

package/scss/otp/_theme.scss

@@ -1,11 +1,4 @@
-@use "sass:map";
-
-@mixin kendo-otp--theme-base() {
-
-    // OTP
-    .k-otp {};
-
-}
+@use "@progress/kendo-theme-core/scss/components/otp/_theme.scss" as *;
 
 @mixin kendo-otp--theme() {
     @include kendo-otp--theme-base();

package/scss/otp/_variables.scss

@@ -59,3 +59,19 @@ $kendo-otp-sizes: (
         input-width: $kendo-otp-lg-input-width
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with (
+    $kendo-otp-gap: $kendo-otp-gap,
+    $kendo-otp-sm-gap: $kendo-otp-sm-gap,
+    $kendo-otp-md-gap: $kendo-otp-md-gap,
+    $kendo-otp-lg-gap: $kendo-otp-lg-gap,
+    $kendo-otp-separator-padding-x: $kendo-otp-separator-padding-x,
+    $kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x,
+    $kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x,
+    $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
+    $kendo-otp-input-width: $kendo-otp-input-width,
+    $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
+    $kendo-otp-md-input-width: $kendo-otp-md-input-width,
+    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
+    $kendo-otp-sizes: $kendo-otp-sizes
+);

package/scss/overlay/_layout.scss

@@ -1,19 +1,4 @@
-@use "./_variables.scss" as *;
-
-@mixin kendo-overlay--layout-base() {
-
-    // Overlay
-    .k-overlay {
-        width: 100%;
-        height: 100%;
-        opacity: $kendo-overlay-opacity;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 10001;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/overlay/_layout.scss" as *;
 
 
 @mixin kendo-overlay--layout() {

package/scss/overlay/_theme.scss

@@ -1,20 +1,4 @@
-@use "./_variables.scss" as *;
-
-@mixin kendo-overlay--theme-base() {
-
-    // Overlay
-    .k-overlay {
-        background-color: $kendo-overlay-bg;
-    }
-
-
-    @each $name, $color in $kendo-overlay-theme-colors {
-        .k-overlay-#{$name} {
-            background-color: $color;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/overlay/_theme.scss" as *;
 
 
 @mixin kendo-overlay--theme() {

package/scss/overlay/_variables.scss

@@ -4,3 +4,9 @@ $kendo-overlay-theme-colors: $kendo-theme-colors !default;
 
 $kendo-overlay-bg: $kendo-color-black !default;
 $kendo-overlay-opacity: .5 !default;
+
+@forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
+    $kendo-overlay-theme-colors: $kendo-overlay-theme-colors,
+    $kendo-overlay-bg: $kendo-overlay-bg,
+    $kendo-overlay-opacity: $kendo-overlay-opacity
+);