@progress/kendo-theme-classic 6.5.0-dev.1 → 6.5.0

package/dist/all.scss

@@ -5,18 +5,10 @@
 // #region @import "./core/_index.scss"; -> scss/core/_index.scss
 $wcag-min-contrast-ratio: 4.5 !default;
 
-// Functions
-// #region @import "./functions/index.import.scss"; -> scss/core/functions/index.import.scss
+// Variables
+// #region @import "../_variables.scss"; -> scss/_variables.scss
+// #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
 // #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
-// #region @import "../_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/_variables.scss
-// Equilateral triangle variables
-// stylelint-disable number-max-precision
-$equilateral-index: 1.7320508076 !default;
-$equilateral-height: .8660254038 !default;
-// stylelint-enable number-max-precision
-
-// #endregion
-
 // #region @import "./_color.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
 /// Returns the alpha channel of a color.
 /// @param {Color} $color - The color to get the alpha channel for.
@@ -1242,6 +1234,36 @@ $_kendo-escape-class-name: (
     @return $map;
 }
 
+/// Returns a deep-map with the keys and values from `$map` and `$args`.
+/// @param {Map} $maps - The maps to deep-merge.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
+@function k-map-deep-merge($maps...) {
+    $merged: ();
+  
+    @each $map in $maps {
+      @each $key, $val in $map {
+        @if (k-meta-type-of($val) == 'map') {
+          $current: k-map-get($merged, $key);
+          @if (k-meta-type-of($current) == 'map') {
+            $val: k-map-deep-merge($current, $val);
+            $map: k-map-merge(
+              $map,
+              (
+                $key: $val
+              )
+            );
+          }
+        }
+      }
+      $merged: k-map-merge($merged, $map);
+    }
+  
+    @return $merged;
+  }
+
 /// Returns a map with the keys and values from `$map` except for `$keys`.
 /// @param {Map} $map - The map to remove keys from.
 /// @param {Any} $keys - The keys to remove from `$map`.
@@ -1547,6 +1569,15 @@ $_kendo-escape-class-name: (
 
 // #endregion
 // #region @import "./_string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
+$svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
 /// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
 /// @param {String} $string - The string to process.
 /// @param {String} $substring - The substring to look for.
@@ -1666,163 +1697,413 @@ $_kendo-escape-class-name: (
     @return unquote( $string );
 }
 
-// #endregion
 
-// #endregion
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function str-replace($string, $search, $replace: "") {
+    $index: k-string-index($string, $search);
+
+    @if $index {
+        @return k-string-slice($string, 1, $index - 1) + $replace + str-replace(k-string-slice($string, $index + k-string-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function escape-svg($string) {
+    @if k-string-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $svg-escaped-characters {
+            // Do not escape the url brackets
+            @if k-string-index($string, "url(") == 1 {
+                $string: url("#{str-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: str-replace($string, $char, $encoded);
+            }
+        }
+    }
+
+    @return $string;
+}
 
 // #endregion
 
-// Color system
-// #region @import "./color-system/index.import.scss"; -> scss/core/color-system/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/color-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
-// #region @import "./_functions.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
-@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
-    $result: ();
+// #endregion
 
-    @each $ui-state, $indices in $matrix {
-        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
-        $indices-count: k-list-length( $indices );
+// #endregion
 
-        $bg-prop: k-list-nth( $indices, 1 );
-        $text-prop: k-list-nth( $indices, 2 );
-        $border-prop: k-list-nth( $indices, 3 );
-        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
-        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
-        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );
+/// The color white.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
 
-        // Take value from the palette only if it is a number
-        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
-        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
-        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
-        $gradient: $gradient-prop;
-        $shadow: $shadow-prop;
-        $outline: $outline-prop;
+/// The color black.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
 
-        $result: k-map-merge($result, (
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border,
-            #{$prefix}gradient: $gradient,
-            #{$prefix}shadow: $shadow,
-            #{$prefix}outline: $outline
-        ));
-    }
+// Options
+$kendo-enable-rounded: true !default;
+$kendo-enable-shadows: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
+$kendo-enable-focus-contrast: false !default;
+$kendo-enable-typography: false !default;
 
-    $result: (
-        #{$variant}: $result
-    );
+$kendo-use-input-button-width: false !default;
+$kendo-use-input-spinner-width: false !default;
+$kendo-use-input-spinner-icon-offset: false !default;
 
-    @return $result;
+$kendo-auto-bootstrap: true !default;
 
-};
 
+// Spacing
+$kendo-spacing: (
+    0: 0,
+    1px: 1px,
+    0.5: 2px,
+    1: 4px,
+    1.5: 6px,
+    2: 8px,
+    2.5: 10px,
+    3: 12px,
+    3.5: 14px,
+    4: 16px,
+    4.5: 18px,
+    5: 20px,
+    5.5: 22px,
+    6: 24px,
+    6.5: 26px,
+    7: 28px,
+    7.5: 30px,
+    8: 32px,
+    9: 36px,
+    10: 40px,
+    11: 44px,
+    12: 48px,
+    13: 52px,
+    14: 56px,
+    15: 60px,
+    16: 64px,
+    17: 68px,
+    18: 72px,
+    19: 76px,
+    20: 80px,
+    21: 84px,
+    22: 88px,
+    23: 92px,
+    24: 96px
+) !default;
 
-@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
-    $result: ();
 
-    // @debug $theme-matrix;
-    // @debug $palette-matrix;
+// Icons
+$kendo-icon-size: 16px !default;
 
-    @each $variant, $definition in $theme-matrix {
-        $tc-index: k-string-index( $variant, "THEME_COLOR" );
-        $src-palette-name: k-map-get( $definition, PALETTE );
-        $matrix: k-map-remove( $definition, PALETTE );
+$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+$kendo-icon-size-md: $kendo-icon-size !default;
+$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-        @if ($tc-index == null ) { // stylelint-disable-line
-            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
-            $result: k-map-merge( $result, $tmp-result);
-        } @else {
-            @each $color, $palette in $palette-matrix {
-                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
-                $palette-name: k-string-unquote($src-palette-name + "");
+$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
-                @if ($palette-name == THEME_COLOR) {
-                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
-                    $palette-name: k-map-get( $palette-matrix, $palette-name );
-                }
 
-                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
-                $result: k-map-merge( $result, $tmp-result );
-            }
-        }
-    }
+// Metrics
+$kendo-padding-x: 8px !default;
+$kendo-padding-y: 4px !default;
+$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
-    @return $result;
-}
+/// Border radius for all components.
+$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: $kendo-border-radius * 2 !default;
 
+$kendo-border-radii: (
+    DEFAULT: $kendo-border-radius-md,
+    0: 0,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    full: 9999px
+) !default;
 
-@function k-get-theme-palette( $name ) {
-    @return k-map-get( $kendo-palettes, $name );
-}
 
-@function k-get-theme-color( $palette, $hue ) {
-    @if ( k-meta-type-of( $palette ) == "map" ) {
-        @return k-map-get( $palette, $hue );
-    }
+$kendo-zindex-popup: 1 !default;
+$kendo-zindex-window: 2 !default;
+$kendo-zindex-loading: 100 !default;
 
-    @return k-map-get( k-get-theme-palette( $palette ), $hue );
-}
 
-@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
-    @return var( --#{$prefix}#{$name}, #{$fallback} );
-}
+// Color settings
+$kendo-is-dark-theme: false !default;
 
-// #endregion
-// #region @import "./_mixins.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
+// Theme colors
+/// The color that focuses the user attention.
+/// Used for primary buttons and for elements of primary importance across the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-primary: #f35800 !default;
+$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default;
+$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default;
 
-// #endregion
-// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
-// Color constants
+/// The color used along with the primary color denoted by $kendo-color-primary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
+/// @type Color
+$kendo-color-primary-contrast: k-contrast-legacy( $kendo-color-primary ) !default;
 
-/// The color white.
-/// Note: you cannot change this value.
+/// The secondary color of the theme.
+/// @group color-system
 /// @type Color
+$kendo-color-secondary: #e9e9e9 !default;
+$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default;
+$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default;
+
+/// The color used along with the secondary color denoted by $kendo-color-secondary.
+/// Used to provide contrast between the background and foreground colors.
 /// @group color-system
-$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-secondary-contrast: k-contrast-color( $kendo-color-secondary ) !default;
 
-/// The color black.
-/// Note: you cannot change this value.
+/// The tertiary color of the theme.
+/// @group color-system
 /// @type Color
+$kendo-color-tertiary: #03a9f4 !default;
+$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default;
+$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default;
+
+/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
+/// Used to provide contrast between the background and foreground colors.
 /// @group color-system
-$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-tertiary-contrast: k-contrast-color( $kendo-color-tertiary ) !default;
 
-/// The color transparent.
-/// Note: you cannot change this value.
+/// The color for informational messages and states.
+/// @group color-system
 /// @type Color
+$kendo-color-info: #2498bc !default;
+$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default;
+$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default;
+
+/// The color for success messages and states.
 /// @group color-system
-$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-success: #3ea44e !default;
+$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default;
+$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default;
 
-/// A gradient that goes from transparent to black.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The color for warning messages and states.
 /// @group color-system
-$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-warning: #ff9800 !default;
+$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default;
+$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default;
 
-/// A gradient that goes from transparent to white.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The color for error messages and states.
 /// @group color-system
-$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-error: #d92800 !default;
+$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default;
+$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default;
 
-/// A gradient that goes from black to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The dark color of the theme.
 /// @group color-system
-$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-dark: #404040 !default;
 
-/// A gradient that goes from white to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The light color of the theme.
 /// @group color-system
-$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-light: #ebebeb !default;
 
-/// A gradient that cycles through the colors of the rainbow.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
-$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+
+
+$kendo-theme-colors: (
+    "primary": $kendo-color-primary,
+    "secondary": $kendo-color-secondary,
+    "tertiary": $kendo-color-tertiary,
+    "info": $kendo-color-info,
+    "success": $kendo-color-success,
+    "warning": $kendo-color-warning,
+    "error": $kendo-color-error,
+    "dark": $kendo-color-dark,
+    "light": $kendo-color-light,
+    "inverse": $kendo-color-inverse
+) !default;
+
+
+// Typography
+
+/// Base font size across all components.
+/// @group typography
+$kendo-font-size: 14px !default;
+$kendo-font-size-xs: 10px !default;
+$kendo-font-size-sm: 12px !default;
+$kendo-font-size-md: $kendo-font-size !default;
+$kendo-font-size-lg: 16px !default;
+$kendo-font-size-xl: 20px !default;
+
+$kendo-font-sizes: (
+    xs: $kendo-font-size-xs,
+    sm: $kendo-font-size-sm,
+    md: $kendo-font-size-md,
+    lg: $kendo-font-size-lg,
+    xl: $kendo-font-size-xl
+) !default;
+
+/// Font family for text.
+/// @group typography
+$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+/// Font family for monospaced text. Used for styling the code.
+/// @group typography
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
 
+/// Font family across all components.
+/// @group typography
+$kendo-font-family: inherit !default;
+
+/// Line height used along with $kendo-font-size.
+/// @group typography
+$kendo-line-height: k-math-div( 20, 14 ) !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: 1.25 !default;
+$kendo-line-height-md: $kendo-line-height !default;
+$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
+
+// Font weight
+$kendo-font-weight-light: 300 !default;
+$kendo-font-weight-normal: 400 !default;
+$kendo-font-weight-medium: 500 !default;
+$kendo-font-weight-semibold: 600 !default;
+$kendo-font-weight-bold: 700 !default;
+
+// Letter Spacing
+$kendo-letter-spacing: null !default;
+
+
+// Generic styles
+
+// Root styles
+$kendo-body-bg: $kendo-color-white !default;
+$kendo-body-text: #272727 !default;
+
+$kendo-subtle-text: #646464 !default;
+
+$kendo-app-bg: $kendo-body-bg !default;
+$kendo-app-text: $kendo-body-text !default;
+$kendo-app-border: k-try-shade( $kendo-app-bg, 2 ) !default;
+
+// Link
+$kendo-link-text: $kendo-color-primary !default;
+$kendo-link-hover-text: $kendo-color-primary-darker !default;
+
+
+// Components
+
+/// The background of the components' chrome area.
+$kendo-base-bg: #f0f0f0 !default;
+/// The text color of the components' chrome area.
+$kendo-base-text: $kendo-body-text !default;
+/// The border color of the components' chrome area.
+$kendo-base-border: k-try-shade( $kendo-base-bg, 2 ) !default;
+/// The gradient background of the components' chrome area.
+$kendo-base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
+
+/// Background color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+/// @group component
+$kendo-component-bg: $kendo-body-bg !default;
+/// Text color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+/// @group component
+$kendo-component-text: $kendo-body-text !default;
+/// Border color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+/// @group component
+$kendo-component-border: $kendo-base-border !default;
+
+/// The background of hovered items.
+$kendo-hover-bg: k-try-shade( $kendo-base-bg, 1 ) !default;
+/// The text color of hovered items.
+$kendo-hover-text: $kendo-base-text !default;
+/// The border color of hovered items.
+$kendo-hover-border: k-try-shade( $kendo-hover-bg, 2 ) !default;
+/// The gradient background of hovered items.
+$kendo-hover-gradient: $kendo-base-gradient !default;
+
+/// The background of selected items.
+$kendo-selected-bg: $kendo-color-primary !default;
+/// The text color of selected items.
+$kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
+/// The border color of selected items.
+$kendo-selected-border: k-try-shade( $kendo-selected-bg, 2 ) !default;
+/// The gradient background of selected items.
+$kendo-selected-gradient: $kendo-base-gradient !default;
+
+$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
+$kendo-selected-hover-text: k-contrast-legacy( $kendo-selected-hover-bg ) !default;
+$kendo-selected-hover-border: $kendo-selected-border !default;
+$kendo-selected-hover-gradient: $kendo-selected-gradient !default;
+
+$kendo-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+
+$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
+
+
+// Disabled mixin variables
+$kendo-disabled-text: #8d8d8d !default;
+$kendo-disabled-filter: grayscale(.1) !default;
+$kendo-disabled-opacity: .6 !default;
+
+$kendo-disabled-styling: (
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter
+) !default;
+
+
+// Generic styles
+
+// TODO: refactor once we extract drag drop as separate module
+
+
+// Header
+$kendo-component-header-bg: $kendo-base-bg !default;
+$kendo-component-header-text: $kendo-base-text !default;
+$kendo-component-header-border: $kendo-base-border !default;
+$kendo-component-header-gradient: $kendo-base-gradient !default;
+
+
+// Validator
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: $kendo-color-error !default;
+$kendo-invalid-border: $kendo-color-error !default;
+$kendo-invalid-shadow: null !default;
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
 // #endregion
+
+// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/index.import.scss
+// #region @import "./functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "./color-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
+// #region @import "./_functions.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
 // #region @import "./_palettes.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_palettes.scss
 /// Color palettes to be used in the Kendo UI themes.
 /// @access private
@@ -2811,13 +3092,380 @@ $kendo-palettes: (
 
 // #endregion
 
+@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
+    $result: ();
+
+    @each $ui-state, $indices in $matrix {
+        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
+        $indices-count: k-list-length( $indices );
+
+        $bg-prop: k-list-nth( $indices, 1 );
+        $text-prop: k-list-nth( $indices, 2 );
+        $border-prop: k-list-nth( $indices, 3 );
+        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
+        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
+        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );
+
+        // Take value from the palette only if it is a number
+        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
+        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
+        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
+        $gradient: $gradient-prop;
+        $shadow: $shadow-prop;
+        $outline: $outline-prop;
+
+        $result: k-map-merge($result, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border,
+            #{$prefix}gradient: $gradient,
+            #{$prefix}shadow: $shadow,
+            #{$prefix}outline: $outline
+        ));
+    }
+
+    $result: (
+        #{$variant}: $result
+    );
+
+    @return $result;
+
+};
+
+
+@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
+    $result: ();
+
+    // @debug $theme-matrix;
+    // @debug $palette-matrix;
+
+    @each $variant, $definition in $theme-matrix {
+        $tc-index: k-string-index( $variant, "THEME_COLOR" );
+        $src-palette-name: k-map-get( $definition, PALETTE );
+        $matrix: k-map-remove( $definition, PALETTE );
+
+        @if ($tc-index == null ) { // stylelint-disable-line
+            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
+            $result: k-map-merge( $result, $tmp-result);
+        } @else {
+            @each $color, $palette in $palette-matrix {
+                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
+                $palette-name: k-string-unquote($src-palette-name + "");
+
+                @if ($palette-name == THEME_COLOR) {
+                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
+                    $palette-name: k-map-get( $palette-matrix, $palette-name );
+                }
+
+                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
+                $result: k-map-merge( $result, $tmp-result );
+            }
+        }
+    }
+
+    @return $result;
+}
+
+
+@function k-get-theme-palette( $name ) {
+    @return k-map-get( $kendo-palettes, $name );
+}
+
+@function k-get-theme-color( $palette, $hue ) {
+    @if ( k-meta-type-of( $palette ) == "map" ) {
+        @return k-map-get( $palette, $hue );
+    }
+
+    @return k-map-get( k-get-theme-palette( $palette ), $hue );
+}
+
+@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
+    @return var( --#{$prefix}#{$name}, #{$fallback} );
+}
+
+@function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
+    $temp: ( );
+
+    @each $ui-state, $indices in $mapping {
+        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
+
+        $bg-prop: k-list-nth($indices, 1);
+        $text-prop: k-list-nth($indices, 2);
+        $border-prop: k-list-nth($indices, 3);
+
+        // Take value from the palette only if it is a number
+        $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
+        $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
+        $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+
+
+        $temp: k-map-deep-merge( $temp, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border
+        ));
+
+        // Add outline if provided in the map
+        @if ( k-list-length($indices) > 3 ) {
+            $outline-prop: k-list-nth($indices, 4);
+            $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+
+            $temp: k-map-deep-merge( $temp, (
+                #{$prefix}outline: $outline
+            ));
+        }
+    }
+
+    $map: (
+        #{$theme-color}: $temp
+    );
+
+    @return $map;
+
+};
+
+@function k-generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
+
+    $map: k-generate-theme-variation( $theme-color, $source-palette-name, $mapping );
+
+    $result: (
+       #{$fill-mode}: $map
+    );
+
+    @return $result;
+}
+
 // #endregion
+// #region @import "./_mixins.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
+@mixin k-css-vars($map) {
+    @each $group, $values in $map {
+        @each $key, $value in $values {
+            --kendo-#{k-meta-inspect($group)}-#{$key}: #{$value};
+        }
+    }
+}
 
 // #endregion
+// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
+// Color constants
 
-// Mixins
-// #region @import "./mixins/index.import.scss"; -> scss/core/mixins/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/mixins/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/index.import.scss
+/// The color white.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color black.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color transparent.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to black.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to white.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from black to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from white to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that cycles through the colors of the rainbow.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+
+
+// Root styles
+$kendo-body-bg: $kendo-color-white !default;
+$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
+
+// Component styles
+$kendo-component-bg: $kendo-body-bg !default;
+$kendo-component-text: $kendo-body-text !default;
+$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
+
+// States styles
+$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
+
+$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
+$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
+
+// Shadows
+
+/// Shadow for cards and grid item thumbnails.
+/// Equivalent to fluent depth 4.
+$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $kendo-color-black, 0.132 ), 0 0.3px 0.9px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for command bars and dropdowns.
+/// Equivalent to fluent depth 8.
+$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $kendo-color-black, 0.132 ), 0 0.6px 1.8px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for teaching callouts and hover cards / tooltips.
+/// Equivalent to fluent depth 16.
+$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $kendo-color-black, 0.132 ), 0 1.2px 3.6px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for panels and pop up dialogs.
+/// Equivalent to fluent depth 64.
+$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $kendo-color-black, 0.22 ), 0 4.8px 14.4px rgba( $kendo-color-black, 0.18 ) !default;
+
+// Link
+$kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
+
+// Validator
+$kendo-invalid-bg: initial !default;
+$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-shadow: null !default;
+
+// Disabled Styling
+$kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-disabled-border: transparent !default;
+
+// Loading
+$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-text: currentColor !default;
+
+
+// Theme colors
+$kendo-theme-colors: (
+    primary: (
+        text: k-get-theme-color-var( primary-130 ),
+        bg: k-get-theme-color-var( primary-20 ),
+        border: k-get-theme-color-var( primary-20 )
+    ),
+    info: (
+        text: k-get-theme-color-var( info-190 ),
+        bg: k-get-theme-color-var( info-20 ),
+        border: k-get-theme-color-var( info-20 )
+    ),
+    success: (
+        text: k-get-theme-color-var( success-190 ),
+        bg: k-get-theme-color-var( success-20 ),
+        border: k-get-theme-color-var( success-20 )
+    ),
+    warning: (
+        text: k-get-theme-color-var( neutral-160 ),
+        bg: k-get-theme-color-var( warning-20 ),
+        border: k-get-theme-color-var( warning-20 )
+    ),
+    error: (
+        text: k-get-theme-color-var( error-190 ),
+        bg: k-get-theme-color-var( error-20 ),
+        border: k-get-theme-color-var( error-20 )
+    )
+) !default;
+
+
+@mixin color-system-styles() {
+    :root {
+        @include k-css-vars( $kendo-palettes );
+        @include k-css-vars( $kendo-theme-colors );
+
+        --kendo-body-bg: #{$kendo-body-bg};
+        --kendo-body-text: #{$kendo-body-text};
+
+        --kendo-component-bg: #{$kendo-component-bg};
+        --kendo-component-text: #{$kendo-component-text};
+        --kendo-component-border: #{$kendo-component-border};
+
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+
+        --kendo-link-text: #{$kendo-link-text};
+        --kendo-link-hover-text: #{$kendo-link-hover-text};
+
+        --kendo-disabled-bg: #{$kendo-disabled-bg};
+        --kendo-disabled-text: #{$kendo-disabled-text};
+        --kendo-disabled-border: #{$kendo-disabled-border};
+
+        --kendo-hover-bg: #{$kendo-hover-bg};
+        --kendo-hover-text: #{$kendo-hover-text};
+        --kendo-hover-border: #{$kendo-hover-border};
+
+        --kendo-selected-bg: #{$kendo-selected-bg};
+        --kendo-selected-text: #{$kendo-selected-text};
+        --kendo-selected-border: #{$kendo-selected-border};
+
+        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
+        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
+        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
+
+        --kendo-focus-outline: #{$kendo-focus-outline};
+
+        --kendo-subtle-text: #{$kendo-subtle-text};
+
+        --kendo-invalid-bg: #{$kendo-invalid-bg};
+        --kendo-invalid-text: #{$kendo-invalid-text};
+        --kendo-invalid-border: #{$kendo-invalid-border};
+        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+
+        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
+        --kendo-border-radius-md: #{$kendo-border-radius-md};
+        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
+    }
+
+    // Text colors
+    @each $theme-color, $color-props in $kendo-theme-colors {
+        $_color: k-map-get( $color-props, text );
+
+        .k-text-#{$theme-color},
+        .k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} );
+        }
+        .\!k-text-#{$theme-color},
+        .\!k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+        }
+
+        .k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
+        }
+        .\!k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+        }
+    };
+}
+
+// #endregion
+// @import "./_palettes.scss";
+
+// #endregion
+// #region @import "./mixins/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/index.import.scss
 // #region @import "./_border-radius.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_border-radius.scss
 // Border radius
 @mixin border-radius( $radius: null ) {
@@ -2917,6 +3565,47 @@ $_kendo-data-uris: () !default;
     box-shadow: none;
 }
 
+@mixin disabled-color( $color: null, $bg: null, $border: null ) {
+    outline: none;
+    cursor: default;
+    background-color: $bg;
+    color: $color;
+    border-color: $border;
+    pointer-events: none;
+    box-shadow: none;
+}
+
+// #endregion
+// #region @import "./_decoration.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_decoration.scss
+@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
+    @if $border {
+        border-color: $border;
+    }
+    @if $color {
+        color: $color;
+    }
+    @if $bg {
+        background-color: $bg;
+    }
+    @if $gradient {
+        @include linear-gradient( $gradient );
+    }
+}
+
+@mixin linear-gradient( $gradient: null ) {
+    @if $gradient and $kendo-enable-gradients {
+        @if $gradient == none {
+            background-image: none;
+        } @else {
+            background-image: linear-gradient( $gradient );
+        }
+    }
+}
+
+@mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
+    background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
+}
+
 // #endregion
 // #region @import "./_focus-indicator.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_focus-indicator.scss
 @mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
@@ -2969,7 +3658,7 @@ $_kendo-data-uris: () !default;
 // #region @import "./_hide-scrollbar.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_hide-scrollbar.scss
 $kendo-scrollbar-width: 17px !default;
 
-@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px ) {
+@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
     $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
@@ -2986,6 +3675,18 @@ $kendo-scrollbar-width: 17px !default;
     }
 }
 
+@mixin hide-scrollbar-dir-agnostic($max-scrollbar: 100px) {
+    // anything larger than the scrollbar width will do
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
+    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
+
+    padding-inline-end: $max-scrollbar;
+    padding-inline-start: $max-scrollbar;
+
+    margin-inline-start: -$max-scrollbar;
+    margin-inline-end: $margin;
+}
+
 // #endregion
 // #region @import "./_import-once.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_import-once.scss
 /// A list of exported modules.
@@ -3015,13 +3716,6 @@ $_kendo-imported-modules: () !default;
 
 // #endregion
 
-@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
-    border-color: $border;
-    color: $color;
-    background-color: $bg;
-    @include linear-gradient( $gradient );
-}
-
 @mixin background-image( $background-image: null ) {
     @if $background-image {
         background-image: url(#{$background-image});
@@ -3029,12 +3723,7 @@ $_kendo-imported-modules: () !default;
 }
 
 // #endregion
-
-// #endregion
-
-// Module system
-// #region @import "./module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/module-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
+// #region @import "./module-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
 // #region @import "./_components.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/_components.scss
 $kendo-components: (
     // Typography and utils
@@ -3713,12 +4402,7 @@ $_imported: () !default;
 // stylelint-enable scss/at-if-no-null
 
 // #endregion
-
-// #endregion
-
-// Common styles
-// #region @import "./styles/index.import.scss"; -> scss/core/styles/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/styles/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/index.import.scss
+// #region @import "./styles/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/index.import.scss
 // #region @import "./_accessibility.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_accessibility.scss
 @mixin kendo-core--styles--accessibility() {
 
@@ -3749,6 +4433,20 @@ $_imported: () !default;
 // #endregion
 // #region @import "./_layout.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_layout.scss
 @mixin kendo-core--styles--layout() {
+    .k-body {
+        @include typography(
+            var( --kendo-font-size, inherit ),
+            var( --kendo-font-family, inherit ),
+            var( --kendo-line-height, normal ),
+            var( --kendo-font-weight, normal ),
+            var( --kendo-letter-spacing, normal ),
+        );
+        @include fill(
+            var( --kendo-body-text, initial ),
+            var( --kendo-body-bg, initial )
+        );
+        margin: 0;
+    }
 
     // Basic layout
     .k-hstack {
@@ -3863,375 +4561,386 @@ $_imported: () !default;
 }
 
 // #endregion
+// #region @import "./_base.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_base.scss
+@mixin kendo-core--styles--base() {
+    // Disabled state
+    .k-disabled,
+    .k-widget[disabled],
+    .k-disabled {
+        @include disabled-color(
+            $color: var( --kendo-disabled-text, inherit ),
+            $border: var( --kendo-disabled-border, inherit )
+        );
 
+        .k-link {
+            cursor: default;
+            outline: 0;
+        }
+    }
 
-@mixin kendo-core--styles() {
-    @include kendo-core--styles--accessibility();
-    @include kendo-core--styles--asp-fallback();
-    @include kendo-core--styles--layout();
-    @include kendo-core--styles--normalize();
-}
-
-// #endregion
-
-// #endregion
-
-// Variables
-// #region @import "../_variables.scss"; -> scss/_variables.scss
-// #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Options
-$kendo-enable-rounded: true !default;
-$kendo-enable-shadows: true !default;
-$kendo-enable-gradients: true !default;
-$kendo-enable-transitions: true !default;
-$kendo-enable-focus-contrast: false !default;
-$kendo-enable-typography: false !default;
-
-$kendo-use-input-button-width: false !default;
-$kendo-use-input-spinner-width: false !default;
-$kendo-use-input-spinner-icon-offset: false !default;
-
-$kendo-auto-bootstrap: true !default;
-
+    // Horizontal line
+    .k-hr {
+        margin-block: k-map-get( $kendo-spacing, 4 );
+        padding: 0;
+        height: 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: var( --kendo-component-border, inherit );
+        display: block;
+        float: none;
+        clear: both;
+    }
 
-// Spacing
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: 2px,
-    1: 4px,
-    1.5: 6px,
-    2: 8px,
-    2.5: 10px,
-    3: 12px,
-    3.5: 14px,
-    4: 16px,
-    4.5: 18px,
-    5: 20px,
-    5.5: 22px,
-    6: 24px,
-    6.5: 26px,
-    7: 28px,
-    7.5: 30px,
-    8: 32px,
-    9: 36px,
-    10: 40px,
-    11: 44px,
-    12: 48px,
-    13: 52px,
-    14: 56px,
-    15: 60px,
-    16: 64px,
-    17: 68px,
-    18: 72px,
-    19: 76px,
-    20: 80px,
-    21: 84px,
-    22: 88px,
-    23: 92px,
-    24: 96px
-) !default;
+    // Horizontal rule
+    .k-d-flex-row > .k-hr {
+        margin: 0;
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+        flex: 0 0 auto;
+    }
 
+    // Vertical rule
+    .k-d-flex-col > .k-hr {
+        margin: 0;
+        flex: 0 0 auto;
+    }
 
-// Icons
-$kendo-icon-size: 16px !default;
+    .k-sprite {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+    }
 
-$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
-$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
-$kendo-icon-size-md: $kendo-icon-size !default;
-$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
-$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
-$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
-$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
+    .k-image {
+        display: inline-block;
+    }
 
-$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
+    // Layout
+    .k-reset {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        text-decoration: none;
+        font: inherit;
+        list-style: none;
+    }
 
+    kendo-sortable {
+        display: block;
+    }
 
-// Metrics
-$kendo-padding-x: 8px !default;
-$kendo-padding-y: 4px !default;
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
-/// Border radius for all components.
-$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
-$kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: $kendo-border-radius * 2 !default;
+    // Links
+    .k-link,
+    .k-link:hover {
+        color: inherit;
+        text-decoration: none;
+        outline: 0;
+        cursor: pointer;
+    }
 
-$kendo-border-radii: (
-    DEFAULT: $kendo-border-radius-md,
-    0: 0,
-    sm: $kendo-border-radius-sm,
-    md: $kendo-border-radius-md,
-    lg: $kendo-border-radius-lg,
-    full: 9999px
-) !default;
+    // Outline
+    .k-content {
+        outline: 0;
+    }
 
+    // Centering
+    .k-centered {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 
-$kendo-zindex-popup: 1 !default;
-$kendo-zindex-window: 2 !default;
-$kendo-zindex-loading: 100 !default;
+    // Disable mouse events
+    .k-no-click {
+        pointer-events: none;
+    }
 
+    // Off-screen container used during PDF export
+    .k-pdf-export-shadow {
+        position: absolute;
+        overflow: hidden;
+        left: -15000px;
+        width: 14400px;
+    }
 
-// Color settings
-$kendo-is-dark-theme: false !default;
+    // PDF export icons fix
+    .kendo-pdf-hide-pseudo-elements::before,
+    .kendo-pdf-hide-pseudo-elements::after {
+        display: none !important; // stylelint-disable-line declaration-no-important
+    }
 
-// Theme colors
-/// The color that focuses the user attention.
-/// Used for primary buttons and for elements of primary importance across the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-primary: #f35800 !default;
-$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default;
-$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default;
+    // Dirty indicator
+    .k-dirty {
+        margin: 0;
+        padding: 0;
+        width: 0;
+        height: 0;
+        border-width: 3px;
+        border-style: solid;
+        border-block-start-color: currentColor;
+        border-block-end-color: transparent;
+        border-inline-start-color: transparent;
+        border-inline-end-color: currentColor;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+    }
+}
+// #endregion
+// #region @import "./_loading.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_loading.scss
+@mixin kendo-core--styles--loading() {
+    // Loading mask
+    .k-loading-mask,
+    .k-loading-image,
+    .k-loading-color {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
 
-/// The color used along with the primary color denoted by $kendo-color-primary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-primary-contrast: k-contrast-legacy( $kendo-color-primary ) !default;
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
 
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary: #e9e9e9 !default;
-$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default;
-$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default;
+    .k-loading-mask {
+        z-index: $kendo-zindex-loading;
 
-/// The color used along with the secondary color denoted by $kendo-color-secondary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary-contrast: k-contrast-color( $kendo-color-secondary ) !default;
+        &.k-opaque {
+            .k-loading-color {
+                opacity: 1;
+            }
+        }
+    }
+    .k-loading-text {
+        text-indent: -4000px;
+        text-align: center;
+        position: absolute;
+        color: $kendo-loading-text;
+    }
+    .k-loading-image {
+        z-index: 2;
+        color: $kendo-loading-text;
+    }
+    .k-loading-color {
+        background-color: $kendo-loading-bg;
+        opacity: $kendo-loading-opacity;
+    }
 
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary: #03a9f4 !default;
-$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default;
-$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default;
+    // Loading indicator
+    .k-i-loading {
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: $kendo-loading-text;
 
-/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary-contrast: k-contrast-color( $kendo-color-tertiary ) !default;
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
 
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-info: #2498bc !default;
-$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default;
-$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default;
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        content: "";
+        box-sizing: inherit;
+        border-radius: 50%;
+        border-width: .05em;
+        border-style: solid;
+        border-color: currentColor;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+        background-color: transparent;
+    }
 
-/// The color for success messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-success: #3ea44e !default;
-$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default;
-$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default;
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
 
-/// The color for warning messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-warning: #ff9800 !default;
-$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default;
-$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default;
+    .k-i-loading::before,
+    .k-loading-image::before {
+        margin-top: -.5em;
+        margin-left: -.5em;
+        width: 1em;
+        height: 1em;
+        animation: k-loading-animation .7s linear infinite;
+    }
 
-/// The color for error messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-error: #d92800 !default;
-$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default;
-$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default;
+    .k-i-loading::after,
+    .k-loading-image::after {
+        margin-top: -.25em;
+        margin-left: -.25em;
+        width: .5em;
+        height: .5em;
+        animation: k-loading-animation reverse 1.4s linear infinite;
+    }
 
-/// The dark color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-dark: #404040 !default;
+    .k-loading-image::before,
+    .k-loading-image::after {
+        content: "";
+        // See https://github.com/telerik/kendo-themes/issues/1925
+        border-width: 1px; // TODO: Remove once we drop IE support
+        border-width: clamp( .015em, 1px, 1px );
+        font-size: 4em;
+    }
 
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-light: #ebebeb !default;
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
+// #endregion
+// #region @import "./_selection.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_selection.scss
+@mixin kendo-core--styles--selection() {
+    .k-marquee {
+        position: absolute;
+        z-index: 100000;
+    }
 
-/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-/// @group color-system
-$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+    .k-marquee-color,
+    .k-marquee-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 
+    .k-marquee-color {
+        color: $kendo-selected-text;
+        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
+        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
+        opacity: .6;
+    }
+    .k-marquee-text {
+        color: $kendo-selected-text;
+    }
+}
+// #endregion
 
-$kendo-theme-colors: (
-    "primary": $kendo-color-primary,
-    "secondary": $kendo-color-secondary,
-    "tertiary": $kendo-color-tertiary,
-    "info": $kendo-color-info,
-    "success": $kendo-color-success,
-    "warning": $kendo-color-warning,
-    "error": $kendo-color-error,
-    "dark": $kendo-color-dark,
-    "light": $kendo-color-light,
-    "inverse": $kendo-color-inverse
-) !default;
 
+@mixin kendo-core--styles() {
+    @include kendo-core--styles--accessibility();
+    @include kendo-core--styles--asp-fallback();
+    @include kendo-core--styles--layout();
+    @include kendo-core--styles--normalize();
+    @include kendo-core--styles--base();
+    @include kendo-core--styles--loading();
+    @include kendo-core--styles--selection();
+}
 
-// Typography
+// #endregion
+// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/_variables.scss
+// #region @import "./functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-/// Base font size across all components.
-/// @group typography
-$kendo-font-size: 14px !default;
-$kendo-font-size-xs: 10px !default;
-$kendo-font-size-sm: 12px !default;
-$kendo-font-size-md: $kendo-font-size !default;
-$kendo-font-size-lg: 16px !default;
-$kendo-font-size-xl: 20px !default;
+// Options
+$kendo-enable-shadows: true !default;
+$kendo-enable-rounded: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
 
-$kendo-font-sizes: (
-    xs: $kendo-font-size-xs,
-    sm: $kendo-font-size-sm,
-    md: $kendo-font-size-md,
-    lg: $kendo-font-size-lg,
-    xl: $kendo-font-size-xl
+$kendo-spacing: (
+    0: 0,
+    1px: 1px,
+    0.5: 0.125rem,
+    1: 0.25rem,
+    1.5: 0.375rem,
+    2: 0.5rem,
+    2.5: 0.625rem,
+    3: 0.75rem,
+    3.5: 0.875rem,
+    4: 1rem,
+    4.5: 1.125rem,
+    5: 1.25rem,
+    5.5: 1.375rem,
+    6: 1.5rem,
+    6.5: 1.625rem,
+    7: 1.75rem,
+    7.5: 1.875rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
 ) !default;
 
-/// Font family for text.
-/// @group typography
-$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: inherit !default;
-
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: k-math-div( 20, 14 ) !default;
-$kendo-line-height-xs: 1 !default;
-$kendo-line-height-sm: 1.25 !default;
-$kendo-line-height-md: $kendo-line-height !default;
-$kendo-line-height-lg: 1.5 !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
-
-// Font weight
-$kendo-font-weight-light: 300 !default;
-$kendo-font-weight-normal: 400 !default;
-$kendo-font-weight-medium: 500 !default;
-$kendo-font-weight-semibold: 600 !default;
-$kendo-font-weight-bold: 700 !default;
-
-// Letter Spacing
-$kendo-letter-spacing: null !default;
-
-
-// Generic styles
-
-// Root styles
-$kendo-body-bg: $kendo-color-white !default;
-$kendo-body-text: #272727 !default;
-
-$kendo-subtle-text: #646464 !default;
-
-$kendo-app-bg: $kendo-body-bg !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: k-try-shade( $kendo-app-bg, 2 ) !default;
-
-// Link
-$kendo-link-text: $kendo-color-primary !default;
-$kendo-link-hover-text: $kendo-color-primary-darker !default;
-
-
-// Components
-
-/// The background of the components' chrome area.
-$kendo-base-bg: #f0f0f0 !default;
-/// The text color of the components' chrome area.
-$kendo-base-text: $kendo-body-text !default;
-/// The border color of the components' chrome area.
-$kendo-base-border: k-try-shade( $kendo-base-bg, 2 ) !default;
-/// The gradient background of the components' chrome area.
-$kendo-base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
-
-/// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
-/// @group component
-$kendo-component-bg: $kendo-body-bg !default;
-/// Text color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
-/// @group component
-$kendo-component-text: $kendo-body-text !default;
-/// Border color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
-/// @group component
-$kendo-component-border: $kendo-base-border !default;
-
-/// The background of hovered items.
-$kendo-hover-bg: k-try-shade( $kendo-base-bg, 1 ) !default;
-/// The text color of hovered items.
-$kendo-hover-text: $kendo-base-text !default;
-/// The border color of hovered items.
-$kendo-hover-border: k-try-shade( $kendo-hover-bg, 2 ) !default;
-/// The gradient background of hovered items.
-$kendo-hover-gradient: $kendo-base-gradient !default;
-
-/// The background of selected items.
-$kendo-selected-bg: $kendo-color-primary !default;
-/// The text color of selected items.
-$kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
-/// The border color of selected items.
-$kendo-selected-border: k-try-shade( $kendo-selected-bg, 2 ) !default;
-/// The gradient background of selected items.
-$kendo-selected-gradient: $kendo-base-gradient !default;
-
-$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, 1 ) !default;
-$kendo-selected-hover-text: k-contrast-legacy( $kendo-selected-hover-bg ) !default;
-$kendo-selected-hover-border: $kendo-selected-border !default;
-$kendo-selected-hover-gradient: $kendo-selected-gradient !default;
-
-$kendo-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
-
-$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
-
-
-// Disabled mixin variables
-$kendo-disabled-text: #8d8d8d !default;
-$kendo-disabled-filter: grayscale(.1) !default;
-$kendo-disabled-opacity: .6 !default;
+/// Border radius for all components.
+$kendo-border-radius: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: k-math-div($kendo-border-radius, 2) !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: ($kendo-border-radius * 2) !default;
 
-$kendo-disabled-styling: (
-    opacity: $kendo-disabled-opacity,
-    filter: $kendo-disabled-filter
+$kendo-border-radii: (
+    DEFAULT: var(--kendo-border-radius-md, $kendo-border-radius-md),
+    0: 0,
+    sm: var(--kendo-border-radius-sm, $kendo-border-radius-sm),
+    md: var(--kendo-border-radius-md, $kendo-border-radius-md),
+    lg: var(--kendo-border-radius-lg, $kendo-border-radius-lg),
+    none: 0,
+    full: 9999px,
 ) !default;
 
+// Metrics
+$kendo-padding-x: k-map-get($kendo-spacing, 2) !default;
+$kendo-padding-y: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-sm-x: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-sm-y: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-padding-md-x: k-map-get($kendo-spacing, 2) !default;
+$kendo-padding-md-y: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-lg-x: k-map-get($kendo-spacing, 3) !default;
+$kendo-padding-lg-y: k-map-get($kendo-spacing, 1.5) !default;
 
-// Generic styles
-
-// TODO: refactor once we extract drag drop as separate module
-
-
-// Header
-$kendo-component-header-bg: $kendo-base-bg !default;
-$kendo-component-header-text: $kendo-base-text !default;
-$kendo-component-header-border: $kendo-base-border !default;
-$kendo-component-header-gradient: $kendo-base-gradient !default;
-
+// Equilateral triangle variables
+// stylelint-disable number-max-precision
+$equilateral-index: 1.7320508076 !default;
+$equilateral-height: 0.8660254038 !default;
+// stylelint-enable number-max-precision
 
-// Validator
-$kendo-invalid-bg: null !default;
-$kendo-invalid-text: $kendo-color-error !default;
-$kendo-invalid-border: $kendo-color-error !default;
-$kendo-invalid-shadow: null !default;
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
+// #endregion
 
 // #endregion
 
@@ -5326,39 +6035,6 @@ $kendo-invalid-shadow: null !default;
 
 // #endregion
 
-// #endregion
-// #region @import "./_selection.scss"; -> scss/common/_selection.scss
-// #region @import "@progress/kendo-theme-default/scss/common/_selection.scss"; -> node_modules/@progress/kendo-theme-default/scss/common/_selection.scss
-@include exports( "common/selection/marquee" ) {
-
-    .k-marquee {
-        position: absolute;
-        z-index: 100000;
-    }
-
-    .k-marquee-color,
-    .k-marquee-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .k-marquee-color {
-        color: $kendo-selected-text;
-        background-color: $kendo-selected-bg;
-        border-color: $kendo-selected-border;
-        opacity: .6;
-    }
-    .k-marquee-text {
-        color: $kendo-selected-text;
-    }
-
-}
-
-// #endregion
-
 // #endregion
 
 // #endregion
@@ -13253,7 +13929,10 @@ $kendo-utils: (
 
 // Register
 // #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
+// #region @import "@progress/kendo-theme-core/scss/module-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
 // File already imported_once. Skipping output.
+// #endregion
+
 // #endregion
 @include module-register( $_kendo-module-meta... );
 
@@ -21622,7 +22301,7 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 $kendo-menu-popup-font-size: $kendo-font-size-md !default;
 $kendo-menu-popup-sm-font-size: $kendo-font-size-md !default;
 $kendo-menu-popup-md-font-size: $kendo-font-size-md !default;
-$kendo-menu-popup-lg-font-size: $kendo-font-size-md !default;
+$kendo-menu-popup-lg-font-size: $kendo-font-size-lg !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu
@@ -35879,6 +36558,7 @@ $kendo-actionsheet-item-disabled-shadow: null !default;
 
 
 // Adaptive Actionsheet
+$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
 $kendo-adaptive-actionsheet-titlebar-border-width: 1px !default;
 $kendo-adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
@@ -36125,6 +36805,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     .k-adaptive-actionsheet {
         max-width: 100%;
         width: 100%;
+        font-size: $kendo-adaptive-actionsheet-font-size;
 
         // TMP: this should be moved to action sheet
         display: flex;
@@ -36164,6 +36845,12 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
             padding-inline: 0;
         }
 
+        .k-menu-group {
+            height: 100%;
+            overflow: auto;
+            position: static;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;
@@ -39030,234 +39717,63 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/breadcrumb/_variables.scss
 // Breadcrumb
 
-/// The width of the border around the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
-
-/// The horizontal margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
-/// The vertical margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
-
-/// The horizontal padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
-/// The vertical padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
 
-/// The font family of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
-
-/// The font size of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
-/// The font size of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
-/// The font size of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
-/// The font size of the large Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
-
-/// The line-height of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-/// The line-height of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
-/// The line-height of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
-/// The line-height of the height Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
-
-/// The base background of the Breadcrumb.
-/// @group breadcrumb
+
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
-/// The base text color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
-/// The base border color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
-/// The box shadow of the focused Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
-
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The border-radius of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-/// The vertical padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
-
-/// The horizontal padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
-
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-link-initial-text: inherit !default;
-/// The spacing of the Breadcrumb link icon.
-/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
+
+$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
 $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The background color of the Breadcrumb link.
-/// @group breadcrumb
+$kendo-breadcrumb-link-initial-text: inherit !default;
+
 $kendo-breadcrumb-link-bg: null !default;
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-link-text !default;
-/// The border color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
-/// The text color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
-/// The border color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
-/// The border color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
-/// The background color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
-/// The text color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
-/// The border color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
-/// The text color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
-/// The border color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
 
-/// The background color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
-/// The text color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
-/// The border color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    sm: (
-        link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
-        link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
-        icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
-        icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
-        font-size: $kendo-breadcrumb-sm-font-size,
-        line-height: $kendo-breadcrumb-sm-line-height
-    ),
-    md: (
-        link-padding-x: $kendo-breadcrumb-md-link-padding-x,
-        link-padding-y: $kendo-breadcrumb-md-link-padding-y,
-        icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
-        icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
-        font-size: $kendo-breadcrumb-md-font-size,
-        line-height: $kendo-breadcrumb-md-line-height
-    ),
-    lg: (
-        link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
-        link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
-        icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
-        icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
-        font-size: $kendo-breadcrumb-lg-font-size,
-        line-height: $kendo-breadcrumb-lg-line-height
-    )
-) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/breadcrumb/_layout.scss
@@ -39275,6 +39791,8 @@ $kendo-breadcrumb-sizes: (
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-breadcrumb-font-family;
+        font-size: $kendo-breadcrumb-font-size;
+        line-height: $kendo-breadcrumb-line-height;
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -39326,6 +39844,8 @@ $kendo-breadcrumb-sizes: (
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
+        padding-block: $kendo-breadcrumb-link-padding-y;
+        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -39339,12 +39859,21 @@ $kendo-breadcrumb-sizes: (
         transition: $kendo-transition;
     }
 
+    .k-breadcrumb-root-link {
+        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
+    }
+
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
         margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
+    .k-breadcrumb-icon-link {
+        padding-block: $kendo-breadcrumb-icon-link-padding-y;
+        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
+    }
+
 
     // Breadcrumb delimiter
     .k-breadcrumb-delimiter,
@@ -39363,34 +39892,6 @@ $kendo-breadcrumb-sizes: (
         }
     }
 
-
-    // Sizes
-    @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: k-map-get( $size-props, link-padding-x );
-        $_link-padding-y: k-map-get( $size-props, link-padding-y );
-        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
-
-        .k-breadcrumb-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                padding-block: $_link-padding-y;
-                padding-inline: $_link-padding-x;
-            }
-
-            .k-breadcrumb-icon-link {
-                padding-block: $_icon-link-padding-y;
-                padding-inline: $_icon-link-padding-x;
-            }
-        }
-    }
-
 }
 
 
@@ -48984,6 +49485,7 @@ $kendo-treelist-footer-row-border-width: 1px !default;
     .k-treelist-toggle {
         margin-block: -$kendo-icon-padding;
         padding: $kendo-icon-padding;
+        box-sizing: content-box;
         cursor: pointer;
     }