@progress/kendo-theme-core 6.5.0-dev.0 → 6.5.0-dev.2

package/dist/all.scss

@@ -3,15 +3,6 @@
 
 // #region @import "./index.import.scss"; -> scss/index.import.scss
 // #region @import "./functions/index.import.scss"; -> scss/functions/index.import.scss
-// #region @import "../_variables.scss"; -> 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"; -> scss/functions/_color.import.scss
 /// Returns the alpha channel of a color.
 /// @param {Color} $color - The color to get the alpha channel for.
@@ -1237,6 +1228,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`.
@@ -1318,6 +1339,10 @@ $_kendo-escape-class-name: (
 /// @example scss - Usage
 ///   @debug k-meta-function-exists( "k-string-replace" ); // => true
 @function k-meta-function-exists( $name ) {
+    @if $name == "" {
+        @return false;
+    }
+
     @return function-exists( $name );
 }
 
@@ -1538,6 +1563,15 @@ $_kendo-escape-class-name: (
 
 // #endregion
 // #region @import "./_string.import.scss"; -> 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.
@@ -1657,158 +1691,39 @@ $_kendo-escape-class-name: (
     @return unquote( $string );
 }
 
-// #endregion
-
-// #endregion
-// #region @import "./color-system/index.import.scss"; -> scss/color-system/index.import.scss
-// #region @import "./_functions.import.scss"; -> scss/color-system/_functions.import.scss
-@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;
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function str-replace($string, $search, $replace: "") {
+    $index: k-string-index($string, $search);
 
-        $result: k-map-merge($result, (
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border,
-            #{$prefix}gradient: $gradient,
-            #{$prefix}shadow: $shadow,
-            #{$prefix}outline: $outline
-        ));
+    @if $index {
+        @return k-string-slice($string, 1, $index - 1) + $replace + str-replace(k-string-slice($string, $index + k-string-length($search)), $search, $replace);
     }
 
-    $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 );
-                }
+    @return $string;
+}
 
-                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
-                $result: k-map-merge( $result, $tmp-result );
+// 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 $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} );
+    @return $string;
 }
 
 // #endregion
-// #region @import "./_mixins.import.scss"; -> scss/color-system/_mixins.import.scss
-
-// #endregion
-// #region @import "./_variables.scss"; -> scss/color-system/_variables.scss
-// Color constants
-
-/// 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
 
 // #endregion
+// #region @import "./color-system/index.import.scss"; -> scss/color-system/index.import.scss
+// #region @import "./_functions.import.scss"; -> scss/color-system/_functions.import.scss
 // #region @import "./_palettes.scss"; -> scss/color-system/_palettes.scss
 /// Color palettes to be used in the Kendo UI themes.
 /// @access private
@@ -2797,70 +2712,442 @@ $kendo-palettes: (
 
 // #endregion
 
-// #endregion
-// #region @import "./mixins/index.import.scss"; -> scss/mixins/index.import.scss
-// #region @import "./_border-radius.scss"; -> scss/mixins/_border-radius.scss
-// Border radius
-@mixin border-radius( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-radius: $radius;
-    }
-}
+@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
+    $result: ();
 
-@mixin border-top-radius( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-top-left-radius: $radius;
-        border-top-right-radius: $radius;
-    }
-}
+    @each $ui-state, $indices in $matrix {
+        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
+        $indices-count: k-list-length( $indices );
 
-@mixin border-right-radius( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-top-right-radius: $radius;
-        border-bottom-right-radius: $radius;
-    }
-}
+        $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 );
 
-@mixin border-bottom-radius( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-bottom-right-radius: $radius;
-        border-bottom-left-radius: $radius;
-    }
-}
+        // 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;
 
-@mixin border-left-radius( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-top-left-radius: $radius;
-        border-bottom-left-radius: $radius;
+        $result: k-map-merge($result, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border,
+            #{$prefix}gradient: $gradient,
+            #{$prefix}shadow: $shadow,
+            #{$prefix}outline: $outline
+        ));
     }
-}
 
-@mixin border-top-radius-only( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-radius: $radius $radius 0 0;
-    }
-}
+    $result: (
+        #{$variant}: $result
+    );
 
-@mixin border-right-radius-only( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-radius: 0 $radius $radius 0;
-    }
-}
+    @return $result;
 
-@mixin border-bottom-radius-only( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-radius: 0 0 $radius $radius;
-    }
-}
+};
 
-@mixin border-left-radius-only( $radius: null ) {
-    @if $kendo-enable-rounded {
-        border-radius: $radius 0 0 $radius;
-    }
-}
 
-// #endregion
-// #region @import "./_box-shadow.scss"; -> scss/mixins/_box-shadow.scss
+@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"; -> 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"; -> scss/color-system/_variables.scss
+// Color constants
+
+/// 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"; -> scss/mixins/index.import.scss
+// #region @import "./_border-radius.scss"; -> scss/mixins/_border-radius.scss
+// Border radius
+@mixin border-radius( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-radius: $radius;
+    }
+}
+
+@mixin border-top-radius( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+    }
+}
+
+@mixin border-right-radius( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-top-right-radius: $radius;
+        border-bottom-right-radius: $radius;
+    }
+}
+
+@mixin border-bottom-radius( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-bottom-right-radius: $radius;
+        border-bottom-left-radius: $radius;
+    }
+}
+
+@mixin border-left-radius( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-top-left-radius: $radius;
+        border-bottom-left-radius: $radius;
+    }
+}
+
+@mixin border-top-radius-only( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-radius: $radius $radius 0 0;
+    }
+}
+
+@mixin border-right-radius-only( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-radius: 0 $radius $radius 0;
+    }
+}
+
+@mixin border-bottom-radius-only( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-radius: 0 0 $radius $radius;
+    }
+}
+
+@mixin border-left-radius-only( $radius: null ) {
+    @if $kendo-enable-rounded {
+        border-radius: $radius 0 0 $radius;
+    }
+}
+
+// #endregion
+// #region @import "./_box-shadow.scss"; -> scss/mixins/_box-shadow.scss
 @mixin box-shadow( $shadow... ) {
     @if $kendo-enable-shadows and k-list-nth($shadow, 1) {
         box-shadow: $shadow;
@@ -2898,6 +3185,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"; -> 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"; -> scss/mixins/_focus-indicator.scss
 @mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
@@ -2950,7 +3278,7 @@ $_kendo-data-uris: () !default;
 // #region @import "./_hide-scrollbar.scss"; -> 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} );
@@ -2967,6 +3295,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"; -> scss/mixins/_import-once.scss
 /// A list of exported modules.
@@ -2996,13 +3336,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});
@@ -3720,6 +4053,20 @@ $_imported: () !default;
 // #endregion
 // #region @import "./_layout.scss"; -> 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 {
@@ -3834,6 +4181,289 @@ $_imported: () !default;
 }
 
 // #endregion
+// #region @import "./_base.scss"; -> 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;
+        }
+    }
+
+    // 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;
+    }
+
+    // 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;
+    }
+
+    .k-sprite {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+    }
+
+    .k-image {
+        display: inline-block;
+    }
+
+    // Layout
+    .k-reset {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        text-decoration: none;
+        font: inherit;
+        list-style: none;
+    }
+
+    kendo-sortable {
+        display: block;
+    }
+
+
+    // Links
+    .k-link,
+    .k-link:hover {
+        color: inherit;
+        text-decoration: none;
+        outline: 0;
+        cursor: pointer;
+    }
+
+    // Outline
+    .k-content {
+        outline: 0;
+    }
+
+    // Centering
+    .k-centered {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    // 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;
+    }
+
+    // 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
+    }
+
+    // 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"; -> 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;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-loading-mask {
+        z-index: $kendo-zindex-loading;
+
+        &.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;
+    }
+
+    // Loading indicator
+    .k-i-loading {
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: $kendo-loading-text;
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .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;
+    }
+
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
+// #endregion
+// #region @import "./_selection.scss"; -> scss/styles/_selection.scss
+@mixin kendo-core--styles--selection() {
+    .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: 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
 
 
 @mixin kendo-core--styles() {
@@ -3841,13 +4471,97 @@ $_imported: () !default;
     @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();
 }
 
 // #endregion
 // #region @import "./_variables.scss"; -> scss/_variables.scss
+// #region @import "./functions/index.import.scss"; -> scss/functions/index.import.scss
 // File already imported_once. Skipping output.
 // #endregion
 
+// Options
+$kendo-enable-shadows: true !default;
+$kendo-enable-rounded: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
+
+$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;
+
+/// 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-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;
+
+// Equilateral triangle variables
+// stylelint-disable number-max-precision
+$equilateral-index: 1.7320508076 !default;
+$equilateral-height: 0.8660254038 !default;
+// stylelint-enable number-max-precision
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
+// #endregion
+
 // #endregion
 
 @include kendo-core--styles();