@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/messagebox/_variables.scss

@@ -0,0 +1,64 @@
+@use "../core/_index.scss" as *;
+
+// Message box
+
+/// The default theme color of the MessageBox.
+/// @group messagebox
+/// @role default
+$kendo-message-box-default-theme-color: null !default;
+
+/// The margin of the MessageBox.
+/// @group messagebox
+$kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
+/// The horizontal padding of the MessageBox.
+/// @group messagebox
+$kendo-message-box-padding-x: k-spacing(2) !default;
+/// The vertical padding of the MessageBox.
+/// @group messagebox
+$kendo-message-box-padding-y: k-spacing(2) !default;
+/// The width of the border around the MessageBox.
+/// @group messagebox
+$kendo-message-box-border-width: 0 0 0 4px !default;
+/// The border radius of the MessageBox.
+/// @group messagebox
+$kendo-message-box-border-radius: k-border-radius(md) !default;
+
+/// The font size of the MessageBox.
+/// @group messagebox
+$kendo-message-box-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the MessageBox.
+/// @group messagebox
+$kendo-message-box-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color level of the MessageBox.
+/// @group messagebox
+$kendo-message-box-bg-level: -10 !default;
+/// The text color level of the MessageBox.
+/// @group messagebox
+$kendo-message-box-text-level: 6 !default;
+/// The border color level of the MessageBox.
+/// @group messagebox
+$kendo-message-box-border-level: -9 !default;
+
+/// The font style of the MessageBox link.
+/// @group messagebox
+$kendo-message-box-link-font-style: italic !default;
+/// The text decoration of the MessageBox link.
+/// @group messagebox
+$kendo-message-box-link-text-decoration: underline !default;
+
+@forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with (
+    $kendo-message-box-default-theme-color: $kendo-message-box-default-theme-color,
+    $kendo-message-box-margin: $kendo-message-box-margin,
+    $kendo-message-box-padding-x: $kendo-message-box-padding-x,
+    $kendo-message-box-padding-y: $kendo-message-box-padding-y,
+    $kendo-message-box-border-width: $kendo-message-box-border-width,
+    $kendo-message-box-border-radius: $kendo-message-box-border-radius,
+    $kendo-message-box-font-size: $kendo-message-box-font-size,
+    $kendo-message-box-line-height: $kendo-message-box-line-height,
+    $kendo-message-box-bg-level: $kendo-message-box-bg-level,
+    $kendo-message-box-text-level: $kendo-message-box-text-level,
+    $kendo-message-box-border-level: $kendo-message-box-border-level,
+    $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
+    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration
+);

package/scss/multiselect/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../chip/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-multiselect--styles() {
+    @include import-once( "multiselect" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-chip--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-multiselect--layout();
+        @include kendo-multiselect--theme();
+    }
+}

package/scss/multiselect/_layout.scss

@@ -0,0 +1,29 @@
+@use "@progress/kendo-theme-core/scss/components/multiselect/_layout.scss" as *;
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "../input/_variables.scss" as *;
+
+@mixin kendo-multiselect--layout() {
+    @include kendo-multiselect--layout-base();
+
+    .k-multiselect {
+        // Roundness
+        @each $roundness in $kendo-input-roundness {
+            #{k-when-default($kendo-input-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+
+                @each $size, $size-props in $kendo-input-sizes {
+                    $_padding-y: map.get( $size-props, padding-y );
+
+                    #{k-when-default($kendo-input-default-size, $size)}
+                    &.k-input-#{$size} {
+                        @include concentric-radius(k-border-radius($roundness), calc( #{$_padding-y} /2 ), ".k-chip");
+                    }
+                }
+            }
+        }
+
+    }
+
+}

package/scss/multiselect/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/multiselect/_theme.scss" as *;
+
+
+@mixin kendo-multiselect--theme() {
+    @include kendo-multiselect--theme-base();
+}

package/scss/multiselect/_variables.scss

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

package/scss/no-data/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-no-data--styles() {
+    @include import-once( "no-data" ) {
+        @include core-styles();
+        @include kendo-no-data--layout();
+        @include kendo-no-data--theme();
+    }
+}

package/scss/no-data/_layout.scss

@@ -0,0 +1,5 @@
+@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

@@ -0,0 +1,5 @@
+@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

@@ -0,0 +1,14 @@
+@use "../core/_index.scss" as *;
+
+/// The minimum height of the 'No Data' text container.
+/// @group no-data
+$kendo-no-data-min-height: 140px !default;
+
+/// The color of the 'No Data' text.
+/// @group no-data
+$kendo-no-data-text: k-color(subtle) !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 *;
+
+
+@function notification-theme( $colors ) {
+    $_theme: ();
+
+    @each $name in $colors {
+        $_theme: map.merge(( $name: (
+            color: k-color(on-#{$name}),
+            background-color: k-color(#{$name}),
+            border: k-color(#{$name}),
+        )), $_theme );
+    }
+
+    @return $_theme;
+}

package/scss/notification/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-notification--styles() {
+    @include import-once( "notification" ) {
+        @include core-styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
+        @include kendo-notification--layout();
+        @include kendo-notification--theme();
+    }
+}

package/scss/notification/_layout.scss

@@ -0,0 +1,4 @@
+@use "@progress/kendo-theme-core/scss/components/notification/_layout.scss" as *;
+
+@mixin kendo-notification--layout() {
+    @include kendo-notification--layout-base();}

package/scss/notification/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/notification/_theme.scss" as *;
+
+
+@mixin kendo-notification--theme() {
+    @include kendo-notification--theme-base();
+}

package/scss/notification/_variables.scss

@@ -0,0 +1,88 @@
+@use "sass:map";
+@use "./_functions.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../popup/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+// Notification
+
+/// The default theme color of the Notification.
+/// @group notification
+/// @role default
+$kendo-notification-default-theme-color: null !default;
+
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-spacing(2) !default;
+
+/// The horizontal padding of the Notification.
+/// @group notification
+$kendo-notification-padding-x: k-spacing(2.5) !default;
+/// The vertical padding of the Notification.
+/// @group notification
+$kendo-notification-padding-y: k-spacing(2.5) !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-border-radius(md) !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-elevation-bg(2, 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: k-color(border) !default;
+/// The box shadow of the Notification.
+/// @group notification
+$kendo-notification-shadow: k-elevation(2) !default;
+
+/// The horizontal spacing of the Notification icon.
+/// @group notification
+$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
+
+/// The theme colors map for the Notification.
+/// @group notification
+$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !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-default-theme-color: $kendo-notification-default-theme-color,
+    $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-shadow: $kendo-notification-shadow,
+    $kendo-notification-icon-spacing: $kendo-notification-icon-spacing,
+    $kendo-notification-theme: $kendo-notification-theme
+);

package/scss/numerictextbox/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-numeric-textbox--styles() {
+    @include import-once( "numeric-textbox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-icon--styles();
+        @include kendo-numeric-textbox--layout();
+        @include kendo-numeric-textbox--theme();
+    }
+}

package/scss/numerictextbox/_layout.scss

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

package/scss/numerictextbox/_theme.scss

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

package/scss/numerictextbox/_variables.scss

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

package/scss/orgchart/_index.scss

@@ -0,0 +1,37 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../window/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-orgchart--styles() {
+    @include import-once( "orgchart" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-form--styles();
+        @include kendo-textbox--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-upload--styles();
+        @include kendo-menu--styles();
+        @include kendo-card--styles();
+        @include kendo-window--styles();
+        @include kendo-orgchart--layout();
+        @include kendo-orgchart--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+    }
+}

package/scss/orgchart/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/orgchart/_layout.scss" as *;
+
+
+@mixin kendo-orgchart--layout() {
+    @include kendo-orgchart--layout-base();
+}

package/scss/orgchart/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/orgchart/_theme.scss" as *;
+
+
+@mixin kendo-orgchart--theme() {
+    @include kendo-orgchart--theme-base();
+}

package/scss/orgchart/_variables.scss

@@ -0,0 +1,185 @@
+@use "sass:list";
+@use "../core/_index.scss" as *;
+@use "../card/_variables.scss" as *;
+
+// Orgchart
+
+/// The spacing index of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-spacer: k-spacing(6) !default;
+/// The vertical padding of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
+/// The horizontal padding of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-padding-x: $kendo-orgchart-padding-y !default;
+/// The font family of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
+/// The background color of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-bg: k-color(surface-alt) !default;
+/// The text color of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-text: k-color(on-app-surface) !default;
+/// The border color of the OrgChart.
+/// @group orgchart
+$kendo-orgchart-border: k-color(border) !default;
+
+/// The spacing of the OrgChart node.
+/// @group orgchart
+$kendo-orgchart-node-gap: $kendo-orgchart-spacer !default;
+/// The spacing of the OrgChart group.
+/// @group orgchart
+$kendo-orgchart-group-gap: $kendo-orgchart-spacer !default;
+
+/// The vertical padding of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-padding-y: $kendo-orgchart-spacer !default;
+/// The horizontal padding of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !default;
+/// The border width of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-border-width: 1px !default;
+/// The border radius of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-border-radius: k-border-radius(xxl) !default;
+/// The background color of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-bg: k-color(surface) !default;
+/// The text color of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-text: k-color(on-app-surface) !default;
+/// The border color of the OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-border: k-color(border) !default;
+
+/// The border color of the focused OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
+/// The shadow of the focused OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-shadow: k-elevation(1) !default;
+
+/// The font size of the OrgChart node group title.
+/// @group orgchart
+$kendo-orgchart-node-group-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
+/// The bottom margin of the OrgChart node group title.
+/// @group orgchart
+$kendo-orgchart-node-group-title-margin-bottom: k-spacing(1.5) !default;
+/// The line height of the OrgChart node group title.
+/// @group orgchart
+$kendo-orgchart-node-group-title-line-height: var( --kendo-line-height-sm, normal ) !default;
+
+/// The font size of the OrgChart node group subtitle.
+/// @group orgchart
+$kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
+/// The bottom margin of the OrgChart node group subtitle.
+/// @group orgchart
+$kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-spacer !default;
+/// The line height of the OrgChart node group subtitle.
+/// @group orgchart
+$kendo-orgchart-node-group-subtitle-text: k-color(subtle) !default;
+
+/// The width of the OrgChart Card.
+/// @group orgchart
+$kendo-orgchart-card-width: 300px !default;
+/// The border width of the OrgChart Card.
+/// @group orgchart
+$kendo-orgchart-card-border-width: $kendo-card-border-width !default;
+/// The shadow of the OrgChart Card.
+/// @group orgchart
+$kendo-orgchart-card-shadow: k-elevation(2) !default;
+/// The shadow of the focused OrgChart Card.
+/// @group orgchart
+$kendo-orgchart-card-focus-shadow: k-elevation(1) !default;
+
+/// The bottom margin of the OrgChart Card title.
+/// @group orgchart
+$kendo-orgchart-card-title-margin-bottom: k-spacing(0) !default;
+/// The font size of the OrgChart Card title.
+/// @group orgchart
+$kendo-orgchart-card-title-font-size: var( --kendo-h6-font-size ) !default;
+
+/// The bottom margin of the OrgChart Card subtitle.
+/// @group orgchart
+$kendo-orgchart-card-subtitle-margin-bottom: k-spacing(0) !default;
+/// The font size of the OrgChart Card subtitle.
+/// @group orgchart
+$kendo-orgchart-card-subtitle-font-size: null !default;
+
+/// The border width of the OrgChart Card body.
+/// @group orgchart
+$kendo-orgchart-card-body-border-width: 2px 0 0 !default;
+/// The border color of the OrgChart Card body.
+/// @group orgchart
+$kendo-orgchart-card-body-border-color: transparent !default;
+
+/// The right margin of the OrgChart Card body title wrap.
+/// @group orgchart
+$kendo-orgchart-card-body-vbox-margin-right: list.slash( $kendo-orgchart-spacer, 2 ) !default;
+/// The min height of the OrgChart Card body title wrap.
+/// @group orgchart
+$kendo-orgchart-card-body-vbox-min-height: k-spacing(11) !default;
+
+/// The size of the OrgChart connecting line.
+/// @group orgchart
+$kendo-orgchart-line-size: 1px !default;
+/// The fill color of the OrgChart connecting line.
+/// @group orgchart
+$kendo-orgchart-line-fill: k-color(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-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-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/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-otp--styles() {
+    @include import-once( "otp" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-otp--layout();
+        @include kendo-otp--theme();
+    }
+}

package/scss/otp/_layout.scss

@@ -0,0 +1,5 @@
+@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

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-core/scss/components/otp/_theme.scss" as *;
+
+@mixin kendo-otp--theme() {
+    @include kendo-otp--theme-base();
+}