@progress/kendo-theme-bootstrap 9.1.1-dev.2 → 10.0.0-dev.1

package/scss/dropdowntree/_index.scss

@@ -1,48 +1,30 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dropdown-tree",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input",
-        "popup",
-        "treeview"
-    )
-);
-
-
 // Dependencies
-@import "../floating-label/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../multiselect/_index.scss";
-@import "../treeview/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../multiselect/_index.scss" as *;
+@use "../treeview/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-dropdown-tree--styles() {
-    @include module-render( "dropdown-tree" ) {
+    @include import-once( "dropdown-tree" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-multiselect--styles();
+        @include kendo-treeview--styles();
         @include kendo-dropdown-tree--layout();
         @include kendo-dropdown-tree--theme();
         @include kendo-utils--typography--text-align();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dropdown-tree--styles();
-}

package/scss/dropdowntree/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/dropdowntree/_layout.scss";
+@use "@progress/kendo-theme-default/scss/dropdowntree/_layout.scss" as *;
 
 
 @mixin kendo-dropdown-tree--layout() {

package/scss/dropdowntree/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/dropdowntree/_theme.scss";
+@use "@progress/kendo-theme-default/scss/dropdowntree/_theme.scss" as *;
 
 
 @mixin kendo-dropdown-tree--theme() {

package/scss/dropdowntree/_variables.scss

@@ -1,3 +1,4 @@
+@use "../core/_index.scss" as *;
 // Dropdowntree
 
 /// The horizontal padding of the DropdownTree popup
@@ -6,3 +7,9 @@ $kendo-dropdowntree-popup-padding-x: k-spacing(2) !default;
 /// The vertical padding of the DropdownTree popup
 /// @group dropdowntree
 $kendo-dropdowntree-popup-padding-y: k-spacing(2) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/dropdowntree/_variables.scss" with (
+    $kendo-dropdowntree-popup-padding-x: $kendo-dropdowntree-popup-padding-x,
+    $kendo-dropdowntree-popup-padding-y: $kendo-dropdowntree-popup-padding-y
+);

package/scss/dropzone/_index.scss

@@ -1,35 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "dropzone",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@use "../core/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-dropzone--styles() {
-    @include module-render( "dropzone" ) {
+    @include import-once( "dropzone" ) {
+        @include core-styles();
         @include kendo-dropzone--layout();
         @include kendo-dropzone--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-dropzone--styles();
-}

package/scss/dropzone/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/dropzone/_layout.scss";
+@use "@progress/kendo-theme-default/scss/dropzone/_layout.scss" as *;
 
 
 @mixin kendo-dropzone--layout() {

package/scss/dropzone/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/dropzone/_theme.scss";
+@use "@progress/kendo-theme-default/scss/dropzone/_theme.scss" as *;
 
 
 @mixin kendo-dropzone--theme() {

package/scss/dropzone/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // DropZone
 
 /// The horizontal padding of the DropZone.
@@ -25,7 +29,7 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )) !default;
+$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $kendo-color-light, $kendo-color-dark )) !default;
 /// The text color of the DropZone.
 /// @group dropzone
 $kendo-dropzone-text: $kendo-component-text !default;
@@ -61,4 +65,27 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-xs, inherit ) !default;
 $kendo-dropzone-note-spacing: null !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: $kendo-subtle-text !default;
+$kendo-dropzone-note-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/dropzone/_variables.scss" with (
+    $kendo-dropzone-padding-x: $kendo-dropzone-padding-x,
+    $kendo-dropzone-padding-y: $kendo-dropzone-padding-y,
+    $kendo-dropzone-border-width: $kendo-dropzone-border-width,
+    $kendo-dropzone-min-height: $kendo-dropzone-min-height,
+    $kendo-dropzone-font-family: $kendo-dropzone-font-family,
+    $kendo-dropzone-font-size: $kendo-dropzone-font-size,
+    $kendo-dropzone-line-height: $kendo-dropzone-line-height,
+    $kendo-dropzone-bg: $kendo-dropzone-bg,
+    $kendo-dropzone-text: $kendo-dropzone-text,
+    $kendo-dropzone-border: $kendo-dropzone-border,
+    $kendo-dropzone-icon-spacing: $kendo-dropzone-icon-spacing,
+    $kendo-dropzone-icon-text: $kendo-dropzone-icon-text,
+    $kendo-dropzone-icon-hover-text: $kendo-dropzone-icon-hover-text,
+    $kendo-dropzone-hint-font-size: $kendo-dropzone-hint-font-size,
+    $kendo-dropzone-hint-spacing: $kendo-dropzone-hint-spacing,
+    $kendo-dropzone-hint-text: $kendo-dropzone-hint-text,
+    $kendo-dropzone-note-font-size: $kendo-dropzone-note-font-size,
+    $kendo-dropzone-note-spacing: $kendo-dropzone-note-spacing,
+    $kendo-dropzone-note-text: $kendo-dropzone-note-text
+);

package/scss/editor/_index.scss

@@ -1,54 +1,32 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "editor",
-    dependencies: (
-        "button",
-        "checkbox",
-        "color-picker",
-        "combobox",
-        "dropdown-list",
-        "file-manager",
-        "icon",
-        "toolbar",
-        "upload",
-        "window"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../checkbox/_index.scss";
-@import "../colorpicker/_index.scss";
-@import "../combobox/_index.scss";
-@import "../dropdownlist/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../upload/_index.scss";
-@import "../window/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../colorpicker/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../window/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-editor--styles() {
-    @include module-render( "editor" ) {
+    @include import-once( "editor" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-color-picker--styles();
+        @include kendo-combobox--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-upload--styles();
+        @include kendo-window--styles();
         @include kendo-editor--layout();
         @include kendo-editor--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-editor--styles();
-}

package/scss/editor/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/editor/_layout.scss";
+@use "@progress/kendo-theme-default/scss/editor/_layout.scss" as *;
 
 
 @mixin kendo-editor--layout() {

package/scss/editor/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/editor/_theme.scss";
+@use "@progress/kendo-theme-default/scss/editor/_theme.scss" as *;
 
 
 @mixin kendo-editor--theme() {

package/scss/editor/_variables.scss

@@ -1,3 +1,8 @@
+// @use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../input/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Editor
 
 /// The width of the border around the Еditor.
@@ -54,3 +59,45 @@ $kendo-editor-selectednode-outline-width: 2px !default;
 /// The outline color of the Editor's selected node.
 /// @group editor
 $kendo-editor-selectednode-outline-color: #88ccff !default;
+
+/// The horizontal padding of the inline Editor.
+/// @group editor
+$kendo-editor-inline-padding-x: k-spacing(2) !default;
+/// The vertical padding of the inline Editor.
+/// @group editor
+$kendo-editor-inline-padding-y: k-spacing(1) !default;
+
+/// The horizontal padding of the Editor file browser tiles.
+/// @group editor
+$kendo-editor-filebrowser-tiles-padding-x: k-spacing(4) !default;
+/// The vertical padding of the Editor file browser tiles.
+/// @group editor
+$kendo-editor-filebrowser-tiles-padding-y: k-spacing(2) !default;
+
+/// The padding of the Editor content.
+/// @group editor
+$kendo-editor-content-padding: k-spacing(4) !default;
+
+@forward "@progress/kendo-theme-default/scss/editor/_variables.scss" with (
+    $kendo-editor-border-width: $kendo-editor-border-width,
+    $kendo-editor-font-family: $kendo-editor-font-family,
+    $kendo-editor-font-size: $kendo-editor-font-size,
+    $kendo-editor-line-height: $kendo-editor-line-height,
+    $kendo-editor-placeholder-text: $kendo-editor-placeholder-text,
+    $kendo-editor-placeholder-opacity: $kendo-editor-placeholder-opacity,
+    $kendo-editor-selected-text: $kendo-editor-selected-text,
+    $kendo-editor-selected-bg: $kendo-editor-selected-bg,
+    $kendo-editor-highlighted-bg: $kendo-editor-highlighted-bg,
+    $kendo-editor-export-tool-icon-margin-x: $kendo-editor-export-tool-icon-margin-x,
+    $kendo-editor-resize-handle-size: $kendo-editor-resize-handle-size,
+    $kendo-editor-resize-handle-border-width: $kendo-editor-resize-handle-border-width,
+    $kendo-editor-resize-handle-border: $kendo-editor-resize-handle-border,
+    $kendo-editor-resize-handle-bg: $kendo-editor-resize-handle-bg,
+    $kendo-editor-selectednode-outline-width: $kendo-editor-selectednode-outline-width,
+    $kendo-editor-selectednode-outline-color: $kendo-editor-selectednode-outline-color,
+    $kendo-editor-inline-padding-x: $kendo-editor-inline-padding-x,
+    $kendo-editor-inline-padding-y: $kendo-editor-inline-padding-y,
+    $kendo-editor-filebrowser-tiles-padding-x: $kendo-editor-filebrowser-tiles-padding-x,
+    $kendo-editor-filebrowser-tiles-padding-y: $kendo-editor-filebrowser-tiles-padding-y,
+    $kendo-editor-content-padding: $kendo-editor-content-padding
+);

package/scss/expansion-panel/_index.scss

@@ -1,42 +1,22 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "expander",
-    dependencies: (
-        "icon",
-        "list"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../list/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-expander--styles() {
-    @include module-render( "expander" ) {
+    @include import-once( "expander" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
         @include kendo-expander--layout();
         @include kendo-expander--theme();
         @include kendo-utils--layout--display();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-expander--styles();
-}

package/scss/expansion-panel/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/expansion-panel/_layout.scss";
+@use "@progress/kendo-theme-default/scss/expansion-panel/_layout.scss" as *;
 
 
 @mixin kendo-expander--layout() {

package/scss/expansion-panel/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/expansion-panel/_theme.scss";
+@use "@progress/kendo-theme-default/scss/expansion-panel/_theme.scss" as *;
 
 
 @mixin kendo-expander--theme() {

package/scss/expansion-panel/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+
 // ExpansionPanel
 
 /// The vertical spacing of the ExpansionPanel.
@@ -63,7 +66,7 @@ $kendo-expander-title-text: $kendo-color-primary !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: $kendo-subtle-text !default;
+$kendo-expander-header-sub-title-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander
@@ -75,3 +78,29 @@ $kendo-expander-content-padding-x: k-spacing(6) !default;
 /// The vertical padding of the ExpansionPanel content.
 /// @group expander
 $kendo-expander-content-padding-y: k-spacing(6) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/expansion-panel/_variables.scss" with (
+    $kendo-expander-spacing-y: $kendo-expander-spacing-y,
+    $kendo-expander-border-width: $kendo-expander-border-width,
+    $kendo-expander-font-family: $kendo-expander-font-family,
+    $kendo-expander-font-size: $kendo-expander-font-size,
+    $kendo-expander-line-height: $kendo-expander-line-height,
+    $kendo-expander-text: $kendo-expander-text,
+    $kendo-expander-bg: $kendo-expander-bg,
+    $kendo-expander-border: $kendo-expander-border,
+    $kendo-expander-focus-shadow: $kendo-expander-focus-shadow,
+    $kendo-expander-header-padding-x: $kendo-expander-header-padding-x,
+    $kendo-expander-header-padding-y: $kendo-expander-header-padding-y,
+    $kendo-expander-header-text: $kendo-expander-header-text,
+    $kendo-expander-header-bg: $kendo-expander-header-bg,
+    $kendo-expander-header-border: $kendo-expander-header-border,
+    $kendo-expander-header-hover-bg: $kendo-expander-header-hover-bg,
+    $kendo-expander-header-focus-bg: $kendo-expander-header-focus-bg,
+    $kendo-expander-header-focus-shadow: $kendo-expander-header-focus-shadow,
+    $kendo-expander-title-text: $kendo-expander-title-text,
+    $kendo-expander-header-sub-title-text: $kendo-expander-header-sub-title-text,
+    $kendo-expander-indicator-margin-x: $kendo-expander-indicator-margin-x,
+    $kendo-expander-content-padding-x: $kendo-expander-content-padding-x,
+    $kendo-expander-content-padding-y: $kendo-expander-content-padding-y
+);

package/scss/fab/_index.scss

@@ -1,39 +1,22 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "fab",
-    dependencies: (
-        "badge",
-        "button",
-        "icon",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../button/_index.scss";
-@import "../badge/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../badge/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-fab--styles() {
-    @include module-render( "fab" ) {
+    @include import-once( "fab" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-badge--styles();
         @include kendo-fab--layout();
         @include kendo-fab--theme();
         @include kendo-utils--layout--position();
@@ -41,7 +24,3 @@ $_kendo-module-meta: (
         @include kendo-utils--layout--overflow();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-fab--styles();
-}

package/scss/fab/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/fab/_layout.scss";
+@use "@progress/kendo-theme-default/scss/fab/_layout.scss" as *;
 
 
 @mixin kendo-fab--layout() {

package/scss/fab/_theme.scss

@@ -1,4 +1,7 @@
-@import "@progress/kendo-theme-default/scss/fab/_theme.scss";
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-default/scss/fab/_theme.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 
 @mixin kendo-fab--theme() {
@@ -10,7 +13,7 @@
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color ));
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -20,7 +23,7 @@
         .k-fab-solid-#{$name}:hover,
         .k-fab-solid-#{$name}.k-hover {
             border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 10% ));
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( k-color-darken( $color, 7.5% ) ));
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-color-darken( $color, 7.5% ) ));
             background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 7.5% ));
         }
     }
@@ -40,7 +43,7 @@
         .k-fab-solid-#{$name}.k-selected {
             @include box-shadow( $kendo-fab-active-shadow );
             border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 12.5% ));
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( k-color-darken( $color, 10% ) ));
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-color-darken( $color, 10% ) ));
             background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 10% ));
         }
     }
@@ -51,7 +54,7 @@
         .k-fab-solid-#{$name}.k-disabled {
             @include box-shadow( $kendo-fab-disabled-shadow );
             background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 65%, transparent), k-try-tint( $color, 4.5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-try-tint( k-contrast-color( $color ), 5 ));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -83,7 +86,7 @@
         outline: $kendo-fab-border-width $kendo-fab-item-outline-style if($kendo-enable-color-system, k-color( base-hover ), k-try-darken( $kendo-fab-item-icon-border, 10% ));
         outline-offset: -$kendo-fab-border-width;
         border-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-border, 10% ));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) ));
+        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) ));
         background-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-bg, 7.5% ));
     }
 
@@ -102,7 +105,7 @@
         outline: $kendo-fab-border-width solid if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
         outline-offset: -$kendo-fab-border-width;
         border-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 10% ) ));
+        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( k-color-darken( $kendo-fab-item-icon-bg, 10% ) ));
         background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-bg, 10% ));
     }
 

package/scss/fab/_variables.scss

@@ -1,3 +1,8 @@
+// @use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Floating Action Button
 
 /// The width of the border around the FAB.
@@ -166,3 +171,54 @@ $kendo-fab-item-outline-width: 3px !default;
 /// The outline color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-outline-color: $kendo-button-bg !default;
+
+
+@forward "@progress/kendo-theme-default/scss/fab/_variables.scss" with (
+    $kendo-fab-border-width: $kendo-fab-border-width,
+    $kendo-fab-border-radius: $kendo-fab-border-radius,
+    $kendo-fab-font-family: $kendo-fab-font-family,
+    $kendo-fab-font-size: $kendo-fab-font-size,
+    $kendo-fab-line-height: $kendo-fab-line-height,
+    $kendo-fab-padding-x: $kendo-fab-padding-x,
+    $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x,
+    $kendo-fab-md-padding-x: $kendo-fab-md-padding-x,
+    $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x,
+    $kendo-fab-padding-y: $kendo-fab-padding-y,
+    $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y,
+    $kendo-fab-md-padding-y: $kendo-fab-md-padding-y,
+    $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y,
+    $kendo-fab-icon-padding-x: $kendo-fab-icon-padding-x,
+    $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-y,
+    $kendo-fab-icon-spacing: $kendo-fab-icon-spacing,
+    $kendo-fab-items-padding-x: $kendo-fab-items-padding-x,
+    $kendo-fab-items-padding-y: $kendo-fab-items-padding-y,
+    $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x,
+    $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y,
+    $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width,
+    $kendo-fab-item-text-border-radius: $kendo-fab-item-text-border-radius,
+    $kendo-fab-item-text-font-size: $kendo-fab-item-text-font-size,
+    $kendo-fab-item-text-line-height: $kendo-fab-item-text-line-height,
+    $kendo-fab-item-icon-padding-x: $kendo-fab-item-icon-padding-x,
+    $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
+    $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
+    $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
+    $kendo-fab-theme-colors: $kendo-fab-theme-colors,
+    $kendo-fab-sizes: $kendo-fab-sizes,
+    $kendo-fab-shadow: $kendo-fab-shadow,
+    $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow,
+    $kendo-fab-active-shadow: $kendo-fab-active-shadow,
+    $kendo-fab-outline-style: $kendo-fab-outline-style,
+    $kendo-fab-outline-width: $kendo-fab-outline-width,
+    $kendo-fab-item-text: $kendo-fab-item-text,
+    $kendo-fab-item-bg: $kendo-fab-item-bg,
+    $kendo-fab-item-border: $kendo-fab-item-border,
+    $kendo-fab-item-icon-text: $kendo-fab-item-icon-text,
+    $kendo-fab-item-icon-bg: $kendo-fab-item-icon-bg,
+    $kendo-fab-item-icon-border: $kendo-fab-item-icon-border,
+    $kendo-fab-item-shadow: $kendo-fab-item-shadow,
+    $kendo-fab-item-disabled-shadow: $kendo-fab-item-disabled-shadow,
+    $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow,
+    $kendo-fab-item-outline-style: $kendo-fab-item-outline-style,
+    $kendo-fab-item-outline-width: $kendo-fab-item-outline-width,
+    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color
+);