@progress/kendo-theme-material 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
+// Color system
+// #region @import "./color-system/index.import.scss"; -> scss/core/color-system/index.import.scss
+// #region @import "./_color-system-material.scss"; -> scss/core/color-system/_color-system-material.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,113 +1697,37 @@ $_kendo-escape-class-name: (
     @return unquote( $string );
 }
 
-// #endregion
-
-// #endregion
-
-// #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: ();
-
-    @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"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
 
 // #endregion
-// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
-// Color constants
 
 /// The color white.
 /// Note: you cannot change this value.
@@ -1786,349 +1741,22 @@ $kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-defa
 /// @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 "./_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
-/// @type Record<String, ColorMap>
-/// @prop {ColorMap} neutral - The neutral palette
-/// @prop {ColorMap} marsala - The marsala palette
-/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
-/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
-/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
-/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
-/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
-/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
-/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
-/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
-/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
-/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
-/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
-/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
-/// @prop {ColorMap} materialGray - The Material gray palette
-/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
-/// @prop {ColorMap} materialRed - The Material red palette
-/// @prop {ColorMap} materialPink - The Material pink palette
-/// @prop {ColorMap} materialPurple - The Material purple palette
-/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
-/// @prop {ColorMap} materialIndigo - The Material indigo palette
-/// @prop {ColorMap} materialBlue - The Material blue palette
-/// @prop {ColorMap} materialLightBlue - The Material light blue palette
-/// @prop {ColorMap} materialCyan - The Material cyan palette
-/// @prop {ColorMap} materialTeal - The Material teal palette
-/// @prop {ColorMap} materialGreen - The Material green palette
-/// @prop {ColorMap} materialLightGreen - The Material light green palette
-/// @prop {ColorMap} materialLime - The Material lime palette
-/// @prop {ColorMap} materialYellow - The Material yellow palette
-/// @prop {ColorMap} materialAmber - The Material amber palette
-/// @prop {ColorMap} materialOrange - The Material orange palette
-/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
-/// @prop {ColorMap} materialBrown - The Material brown palette
-/// @prop {ColorMap} primerGray - The Primer gray palette
-/// @prop {ColorMap} primerBlue - The Primer blue palette
-/// @prop {ColorMap} primerGreen - The Primer green palette
-/// @prop {ColorMap} primerYellow - The Primer yellow palette
-/// @prop {ColorMap} primerOrange - The Primer orange palette
-/// @prop {ColorMap} primerRed - The Primer red palette
-/// @prop {ColorMap} primerPurple - The Primer purple palette
-/// @prop {ColorMap} primerPink - The Primer pink palette
-/// @prop {ColorMap} primerCoral - The Primer coral palette
-/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
-/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
-/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
-/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
-/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
-/// @prop {ColorMap} tailwindRed - The Tailwind red palette
-/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
-/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
-/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
-/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
-/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
-/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
-/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
-/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
-/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
-/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
-/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
-/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
-/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
-/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
-/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
-/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
-///
-/// @group color-system
-$kendo-palettes: (
-
-    // Kendo
-    neutral: (
-        0: #ffffff,
-        50: #f8f8f8,
-        100: #ededed,
-        200: #d6d6d6,
-        300: #b7b7b7,
-        400: #949494,
-        500: #767676,
-        600: #5f5f5f,
-        700: #494949,
-        800: #373737,
-        900: #282828,
-        1000: #000000
-    ),
-    marsala: (
-        0: #ffffff,
-        50: #faf0f2,
-        100: #f3dde0,
-        200: #e197a3,
-        300: #c54e69,
-        400: #8b3548,
-        500: #622331,
-        600: #551d2a,
-        700: #441620,
-        800: #340f17,
-        900: #23080e,
-        1000: #000000
-    ),
-
-
-    // Bootstrap
-    bootstrapGray: (
-        0: #ffffff,
-        100: #f8f9fa,
-        200: #e9ecef,
-        300: #dee2e6,
-        400: #ced4da,
-        500: #adb5bd,
-        600: #6c757d,
-        700: #495057,
-        800: #343a40,
-        900: #212529,
-        1000: #000000
-    ),
-    bootstrapBlue: (
-        0: #ffffff,
-        100: #cfe2ff,
-        200: #9ec5fe,
-        300: #6ea8fe,
-        400: #3d8bfd,
-        500: #0d6efd,
-        600: #0a58ca,
-        700: #084298,
-        800: #052c65,
-        900: #031633,
-        1000: #000000
-    ),
-    bootstrapIndigo: (
-        0: #ffffff,
-        100: #e0cffc,
-        200: #c29ffa,
-        300: #a370f7,
-        400: #8540f5,
-        500: #6610f2,
-        600: #520dc2,
-        700: #3d0a91,
-        800: #290661,
-        900: #140330,
-        1000: #000000
-    ),
-    bootstrapPurple: (
-        0: #ffffff,
-        100: #e2d9f3,
-        200: #c5b3e6,
-        300: #a98eda,
-        400: #8c68cd,
-        500: #6f42c1,
-        600: #59359a,
-        700: #432874,
-        800: #2c1a4d,
-        900: #160d27,
-        1000: #000000
-    ),
-    bootstrapPink: (
-        0: #ffffff,
-        100: #f7d6e6,
-        200: #efadce,
-        300: #e685b5,
-        400: #de5c9d,
-        500: #d63384,
-        600: #ab296a,
-        700: #801f4f,
-        800: #561435,
-        900: #2b0a1a,
-        1000: #000000
-    ),
-    bootstrapRed: (
-        0: #ffffff,
-        100: #f8d7da,
-        200: #f1aeb5,
-        300: #ea868f,
-        400: #e35d6a,
-        500: #dc3545,
-        600: #b02a37,
-        700: #842029,
-        800: #58151c,
-        900: #2c0b0e,
-        1000: #000000
-    ),
-    bootstrapOrange: (
-        0: #ffffff,
-        100: #ffe5d0,
-        200: #fecba1,
-        300: #feb272,
-        400: #fd9843,
-        500: #fd7e14,
-        600: #ca6510,
-        700: #984c0c,
-        800: #653208,
-        900: #331904,
-        1000: #000000
-    ),
-    bootstrapYellow: (
-        0: #ffffff,
-        100: #fff3cd,
-        200: #ffe69c,
-        300: #ffda6a,
-        400: #ffcd39,
-        500: #ffc107,
-        600: #cc9a06,
-        700: #997404,
-        800: #664d03,
-        900: #332701,
-        1000: #000000
-    ),
-    bootstrapGreen: (
-        0: #ffffff,
-        100: #d1e7dd,
-        200: #a3cfbb,
-        300: #75b798,
-        400: #479f76,
-        500: #198754,
-        600: #146c43,
-        700: #0f5132,
-        800: #0a3622,
-        900: #051b11,
-        1000: #000000
-    ),
-    bootstrapTeal: (
-        0: #ffffff,
-        100: #d2f4ea,
-        200: #a6e9d5,
-        300: #79dfc1,
-        400: #4dd4ac,
-        500: #20c997,
-        600: #1aa179,
-        700: #13795b,
-        800: #0d503c,
-        900: #06281e,
-        1000: #000000
-    ),
-    bootstrapCyan: (
-        0: #ffffff,
-        100: #cff4fc,
-        200: #9eeaf9,
-        300: #6edff6,
-        400: #3dd5f3,
-        500: #0dcaf0,
-        600: #0aa2c0,
-        700: #087990,
-        800: #055160,
-        900: #032830,
-        1000: #000000
-    ),
-
+// Adapted from https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
+// Adapted from https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss
 
-    // Fluent
-    fluentNeutral: (
-        0: #ffffff,
-        50: #faf9f8,
-        100: #edebe9,
-        150: #e1dfdd,
-        200: #d2d0ce,
-        250: #c8c6c4,
-        300: #bdbbb8,
-        350: #b3b0ad,
-        400: #a19f9d,
-        450: #8a8886,
-        500: #797775,
-        550: #605e5c,
-        600: #484644,
-        650: #3b3a39,
-        700: #323130,
-        750: #292827,
-        800: #201f1e,
-        850: #1b1a19,
-        900: #161514,
-        950: #11100f,
-        1000: #000000
-    ),
+$dark-primary-text: rgba( black, .87 ) !default;
+$dark-secondary-text: rgba( black, .54 ) !default;
+$dark-disabled-text: rgba( black, .38 ) !default;
+$dark-dividers: rgba( black, .12 ) !default;
+$light-primary-text: $kendo-color-white !default;
+$light-secondary-text: rgba( white, .7 ) !default;
+$light-disabled-text: rgba( white, .5 ) !default;
+$light-dividers: rgba( white, .12 ) !default;
 
+$palettes: (
 
-    // Material
-    materialGray: (
-        0: #ffffff,
-        50: #fafafa,
-        100: #f5f5f5,
-        200: #eeeeee,
-        300: #e0e0e0,
-        400: #bdbdbd,
-        500: #9e9e9e,
-        600: #757575,
-        700: #616161,
-        800: #424242,
-        900: #212121,
-        1000: #000000
-    ),
-    materialBlueGray: (
-        0: #ffffff,
-        50: #eceff1,
-        100: #cfd8dc,
-        200: #b0bec5,
-        300: #90a4ae,
-        400: #78909c,
-        500: #607d8b,
-        600: #546e7a,
-        700: #455a64,
-        800: #37474f,
-        900: #263238,
-        1000: #000000
-    ),
-    materialRed: (
-        0: #ffffff,
+    // Red
+    red: (
         50: #ffebee,
         100: #ffcdd2,
         200: #ef9a9a,
@@ -2139,26 +1767,1540 @@ $kendo-palettes: (
         700: #d32f2f,
         800: #c62828,
         900: #b71c1c,
-        1000: #000000
+        A100: #ff8a80,
+        A200: #ff5252,
+        A400: #ff1744,
+        A700: #d50000,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $light-primary-text
+        )
     ),
-    materialPink: (
-        0: #ffffff,
+
+    // Pink
+    pink: (
         50: #fce4ec,
         100: #f8bbd0,
         200: #f48fb1,
         300: #f06292,
         400: #ec407a,
-        // 500 was #e91e63, but changed for better contrast against white
-        500: #e51a5f,
+        500: #e51a5f, // originally it was #e91e63, but changed for better contrast against white
         600: #d81b60,
         700: #c2185b,
         800: #ad1457,
         900: #880e4f,
-        1000: #000000
-    ),
-    materialPurple: (
-        0: #ffffff,
-        50: #f3e5f5,
+        A100: #ff80ab,
+        A200: #ff4081,
+        A400: #f50057,
+        A700: #c51162,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $light-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Purple
+    purple: (
+        50: #f3e5f5,
+        100: #e1bee7,
+        200: #ce93d8,
+        300: #ba68c8,
+        400: #ab47bc,
+        500: #9c27b0,
+        600: #8e24aa,
+        700: #7b1fa2,
+        800: #6a1b9a,
+        900: #4a148c,
+        A100: #ea80fc,
+        A200: #e040fb,
+        A400: #d500f9,
+        A700: #aa00ff,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $light-primary-text,
+            500: $light-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Deep Purple
+    deepPurple: (
+        50: #ede7f6,
+        100: #d1c4e9,
+        200: #b39ddb,
+        300: #9575cd,
+        400: #7e57c2,
+        500: #673ab7,
+        600: #5e35b1,
+        700: #512da8,
+        800: #4527a0,
+        900: #311b92,
+        A100: #b388ff,
+        A200: #7c4dff,
+        A400: #651fff,
+        A700: #6200ea,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $light-primary-text,
+            500: $light-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $light-primary-text,
+            A400: $light-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Indigo
+    indigo: (
+        50: #e8eaf6,
+        100: #c5cae9,
+        200: #9fa8da,
+        300: #7986cb,
+        400: #5c6bc0,
+        500: #3f51b5,
+        600: #3949ab,
+        700: #303f9f,
+        800: #283593,
+        900: #1a237e,
+        A100: #8c9eff,
+        A200: #536dfe,
+        A400: #3d5afe,
+        A700: #304ffe,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $light-primary-text,
+            500: $light-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $light-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Blue
+    blue: (
+        50: #e3f2fd,
+        100: #bbdefb,
+        200: #90caf9,
+        300: #64b5f6,
+        400: #42a5f5,
+        500: #2196f3,
+        600: #1e88e5,
+        700: #1976d2,
+        800: #1565c0,
+        900: #0d47a1,
+        A100: #82b1ff,
+        A200: #448aff,
+        A400: #2979ff,
+        A700: #2962ff,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Light Blue
+    lightBlue: (
+        50: #e1f5fe,
+        100: #b3e5fc,
+        200: #81d4fa,
+        300: #4fc3f7,
+        400: #29b6f6,
+        500: #03a9f4,
+        600: #039be5,
+        700: #0288d1,
+        800: #0277bd,
+        900: #01579b,
+        A100: #80d8ff,
+        A200: #40c4ff,
+        A400: #00b0ff,
+        A700: #0091ea,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Cyan
+    cyan: (
+        50: #e0f7fa,
+        100: #b2ebf2,
+        200: #80deea,
+        300: #4dd0e1,
+        400: #26c6da,
+        500: #00bcd4,
+        600: #00acc1,
+        700: #0097a7,
+        800: #00838f,
+        900: #006064,
+        A100: #84ffff,
+        A200: #18ffff,
+        A400: #00e5ff,
+        A700: #00b8d4,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Teal
+    teal: (
+        50: #e0f2f1,
+        100: #b2dfdb,
+        200: #80cbc4,
+        300: #4db6ac,
+        400: #26a69a,
+        500: #009688,
+        600: #00897b,
+        700: #00796b,
+        800: #00695c,
+        900: #004d40,
+        A100: #a7ffeb,
+        A200: #64ffda,
+        A400: #1de9b6,
+        A700: #00bfa5,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Green
+    green: (
+        50: #e8f5e9,
+        100: #c8e6c9,
+        200: #a5d6a7,
+        300: #81c784,
+        400: #66bb6a,
+        500: #4caf50,
+        600: #43a047,
+        700: #388e3c,
+        800: #2e7d32,
+        900: #1b5e20,
+        A100: #b9f6ca,
+        A200: #69f0ae,
+        A400: #00e676,
+        A700: #00c853,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Light Green
+    lightGreen: (
+        50: #f1f8e9,
+        100: #dcedc8,
+        200: #c5e1a5,
+        300: #aed581,
+        400: #9ccc65,
+        500: #8bc34a,
+        600: #7cb342,
+        700: #689f38,
+        800: #558b2f,
+        900: #33691e,
+        A100: #ccff90,
+        A200: #b2ff59,
+        A400: #76ff03,
+        A700: #64dd17,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $dark-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Lime
+    lime: (
+        50: #f9fbe7,
+        100: #f0f4c3,
+        200: #e6ee9c,
+        300: #dce775,
+        400: #d4e157,
+        500: #cddc39,
+        600: #c0ca33,
+        700: #afb42b,
+        800: #9e9d24,
+        900: #827717,
+        A100: #f4ff81,
+        A200: #eeff41,
+        A400: #c6ff00,
+        A700: #aeea00,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $dark-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Yellow
+    yellow: (
+        50: #fffde7,
+        100: #fff9c4,
+        200: #fff59d,
+        300: #fff176,
+        400: #ffee58,
+        500: #ffeb3b,
+        600: #fdd835,
+        700: #fbc02d,
+        800: #f9a825,
+        900: #f57f17,
+        A100: #ffff8d,
+        A200: #ffff00,
+        A400: #ffea00,
+        A700: #ffd600,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $dark-primary-text,
+            900: $dark-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Amber
+    amber: (
+        50: #fff8e1,
+        100: #ffecb3,
+        200: #ffe082,
+        300: #ffd54f,
+        400: #ffca28,
+        500: #ffc107,
+        600: #ffb300,
+        700: #ffa000,
+        800: #ff8f00,
+        900: #ff6f00,
+        A100: #ffe57f,
+        A200: #ffd740,
+        A400: #ffc400,
+        A700: #ffab00,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $dark-primary-text,
+            900: $dark-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Orange
+    orange: (
+        50: #fff3e0,
+        100: #ffe0b2,
+        200: #ffcc80,
+        300: #ffb74d,
+        400: #ffa726,
+        500: #ff9800,
+        600: #fb8c00,
+        700: #f57c00,
+        800: #ef6c00,
+        900: #e65100,
+        A100: #ffd180,
+        A200: #ffab40,
+        A400: #ff9100,
+        A700: #ff6d00,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $dark-primary-text,
+            900: $dark-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $dark-primary-text
+        )
+    ),
+
+    // Deep Orange
+    deepOrange: (
+        50: #fbe9e7,
+        100: #ffccbc,
+        200: #ffab91,
+        300: #ff8a65,
+        400: #ff7043,
+        500: #ff5722,
+        600: #f4511e,
+        700: #e64a19,
+        800: #d84315,
+        900: #bf360c,
+        A100: #ff9e80,
+        A200: #ff6e40,
+        A400: #ff3d00,
+        A700: #dd2c00,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $dark-primary-text,
+            700: $dark-primary-text,
+            800: $dark-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Brown
+    brown: (
+        50: #efebe9,
+        100: #d7ccc8,
+        200: #bcaaa4,
+        300: #a1887f,
+        400: #8d6e63,
+        500: #795548,
+        600: #6d4c41,
+        700: #5d4037,
+        800: #4e342e,
+        900: #3e2723,
+        A100: #d7ccc8,
+        A200: #bcaaa4,
+        A400: #8d6e63,
+        A700: #5d4037,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $light-primary-text,
+            500: $light-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $light-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Gray
+    gray: (
+        50: #fafafa,
+        100: #f5f5f5,
+        200: #eeeeee,
+        300: #e0e0e0,
+        400: #bdbdbd,
+        500: #9e9e9e,
+        600: #757575,
+        700: #616161,
+        800: #424242,
+        900: #212121,
+        A100: #ffffff,
+        A200: #eeeeee,
+        A400: #bdbdbd,
+        A700: #616161,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $dark-primary-text,
+            A700: $light-primary-text
+        )
+    ),
+
+    // Blue Gray
+    blueGray: (
+        50: #eceff1,
+        100: #cfd8dc,
+        200: #b0bec5,
+        300: #90a4ae,
+        400: #78909c,
+        500: #607d8b,
+        600: #546e7a,
+        700: #455a64,
+        800: #37474f,
+        900: #263238,
+        A100: #cfd8dc,
+        A200: #b0bec5,
+        A400: #78909c,
+        A700: #455a64,
+        contrast: (
+            50: $dark-primary-text,
+            100: $dark-primary-text,
+            200: $dark-primary-text,
+            300: $dark-primary-text,
+            400: $dark-primary-text,
+            500: $dark-primary-text,
+            600: $light-primary-text,
+            700: $light-primary-text,
+            800: $light-primary-text,
+            900: $light-primary-text,
+            A100: $dark-primary-text,
+            A200: $dark-primary-text,
+            A400: $light-primary-text,
+            A700: $light-primary-text
+        )
+    )
+
+) !default;
+
+@function get-base-palette($name) {
+    @return k-map-get( $palettes, $name );
+}
+
+@function get-base-hue($palette, $hue) {
+    @return k-map-get( get-base-palette( $palette ), $hue );
+}
+
+@function get-base-contrast($palette, $hue) {
+    @return k-map-get( k-map-get( get-base-palette($palette), contrast), $hue );
+}
+
+$material-dark-complimentary: (
+    is-dark: true,
+    body-bg: #121212,
+    body-text: $light-primary-text,
+    subtle-text: $light-secondary-text,
+    disabled-text: $light-disabled-text,
+    component-bg: #121212,
+    component-text: $light-primary-text,
+    component-border: $light-dividers,
+    base-bg: get-base-hue( gray, 900 ),
+    hover-bg: rgba( white, .08 ),
+    focus-bg: rgba( white, .24 ),
+    elevation: $kendo-color-black
+) !default;
+
+
+$material-light-complimentary: (
+    is-dark: false,
+    body-bg: $kendo-color-white,
+    body-text: get-base-contrast( gray, 50 ),
+    subtle-text: $dark-secondary-text,
+    disabled-text: $dark-disabled-text,
+    component-bg: $kendo-color-white,
+    component-text: $dark-primary-text,
+    component-border: $dark-dividers,
+    base-bg: $kendo-color-white,
+    hover-bg: rgba( black, .04 ),
+    focus-bg: rgba( black, .12 ),
+    elevation: $kendo-color-black
+) !default;
+
+
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+@function material-contrast($palette, $hue) {
+    @return k-map-get(k-map-get($palette, contrast), $hue);
+}
+
+// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
+// of the Material Design hues.
+@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700, $adjust-contrast: true) {
+
+    @if not (k-meta-type-of($base-palette) == map) {
+        $base-palette: get-base-palette($base-palette);
+    }
+
+    $main-contrast: material-contrast($base-palette, $main);
+
+    @if ( $adjust-contrast == true ) {
+        @if ($theme-type == dark) and ($main-contrast == $light-primary-text) {
+            $main: 200;
+            $lighter: 100;
+            $darker: 300;
+        }
+
+        @if ($theme-type == light) and ($main-contrast == $dark-primary-text) {
+            $main: 800;
+            $lighter: 700;
+            $darker: 900;
+        }
+    }
+
+    // stylelint-disable-next-line function-comma-newline-after
+    $result: k-map-merge($base-palette, (
+        main: k-map-get($base-palette, $main),
+        lighter: k-map-get($base-palette, $lighter),
+        darker: k-map-get($base-palette, $darker),
+        main-contrast: material-contrast($base-palette, $main),
+        lighter-contrast: material-contrast($base-palette, $lighter),
+        darker-contrast: material-contrast($base-palette, $darker)
+    ));
+
+    // For each hue in the palette, add a "-contrast" color to the map.
+    @each $hue, $color in $base-palette {
+        // stylelint-disable-next-line function-comma-newline-after
+        $result: k-map-merge($result, (
+            "#{$hue}-contrast": material-contrast($base-palette, $hue)
+        ));
+    }
+
+    @return $result;
+}
+
+
+// Gets a color from a theme palette (the output of material-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (main, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+@function material-color($palette, $hue: main, $opacity: null) {
+
+    @if not (k-meta-type-of($palette) == map) {
+        $palette: get-base-palette($palette);
+    }
+
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if k-meta-type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+        @return material-color($palette, main, $hue);
+    }
+
+    $color: k-map-get($palette, $hue);
+    $opacity: if($opacity == null, k-color-alpha($color), $opacity);
+
+    @return rgba( $color, $opacity );
+}
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function material-theme($kendo-color-primary, $kendo-color-secondary, $theme-type, $warn: material-palette(red)) {
+    $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary);
+    @return k-map-merge((
+        primary: $kendo-color-primary,
+        secondary: $kendo-color-secondary,
+        warn: $warn
+    ), $complimentary );
+}
+
+// #endregion
+
+// #endregion
+
+// 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
+// File already imported_once. Skipping output.
+// #endregion
+
+// #endregion
+
+/// 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
+
+// Options
+$kendo-enable-rounded: true !default;
+$kendo-enable-shadows: true !default;
+$kendo-enable-gradients: false !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;
+
+
+// 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;
+
+
+// Apply material theme, as early as possible
+$primary-palette-name: indigo !default;
+$secondary-palette-name: pink !default;
+$tertiary-palette-name: teal !default;
+$adjust-contrast: true !default;
+$theme-type: light !default; // light or dark
+
+$primary-palette: material-palette( $primary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
+$secondary-palette: material-palette( $secondary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
+$tertiary-palette: material-palette( $tertiary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
+
+$theme: material-theme(
+    $primary-palette,
+    $secondary-palette,
+    $theme-type
+) !default;
+
+
+// Shadows
+
+/// Color of shadows
+/// @group shadows
+$elevation: k-map-get( $theme, elevation ) !default;
+
+/// Shadow for switch.
+/// Equivalent to material elevation 1.
+/// @group shadows
+$box-shadow-depth-1: 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) !default;
+/// Shadow for resting state of button, card and other widgets.
+/// Equivalent to material elevation 2.
+/// @group shadows
+$box-shadow-depth-2: 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) !default;
+/// Shadow for menu, popups and raised state of button and card.
+/// Equivalent to material elevation 8.
+/// @group shadows
+$box-shadow-depth-3: 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) !default;
+/// Shadow for drawers and other overlaying elements.
+/// Equivalent to material elevation 16.
+/// @group shadows
+$box-shadow-depth-4: 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) !default;
+/// Shadow for window and dialog.
+/// Equivalent to material elevation 24.
+/// @group shadows
+$box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) !default;
+
+
+// Icons
+$kendo-icon-size: 16px !default;
+
+$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;
+
+$kendo-icon-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
+
+// Metrics
+$kendo-padding-x: 16px !default;
+$kendo-padding-y: 4px !default;
+$kendo-padding-sm-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-padding-md-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-padding-lg-x: k-map-get( $kendo-spacing, 6 ) !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 * 1.5 !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;
+
+
+$kendo-zindex-popup: 1 !default;
+$kendo-zindex-window: 2 !default;
+$kendo-zindex-loading: 100 !default;
+
+
+// Color settings
+$kendo-is-dark-theme: k-map-get( $theme, is-dark ) !default;
+
+
+// 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: material-color( $primary-palette, main ) !default;
+$kendo-color-primary-lighter: material-color( $primary-palette, lighter ) !default;
+$kendo-color-primary-darker: material-color( $primary-palette, darker ) !default;
+
+/// 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: material-color( $primary-palette, main-contrast ) !default;
+
+/// The secondary color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-secondary: material-color( $secondary-palette, main ) !default;
+$kendo-color-secondary-lighter: material-color( $secondary-palette, lighter ) !default;
+$kendo-color-secondary-darker: material-color( $secondary-palette, darker ) !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
+/// @type Color
+$kendo-color-secondary-contrast: material-color( $secondary-palette, main-contrast ) !default;
+
+/// The tertiary color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-tertiary: material-color($tertiary-palette, main) !default;
+$kendo-color-tertiary-lighter: material-color($tertiary-palette, lighter) !default;
+$kendo-color-tertiary-darker: material-color($tertiary-palette, darker) !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
+/// @type Color
+$kendo-color-tertiary-contrast: material-color($tertiary-palette, main-contrast) !default;
+
+/// The color for informational messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-info: #0058e9 !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
+/// @type Color
+$kendo-color-success: #37b400 !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;
+
+/// The color for warning messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-warning: #ffc000 !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;
+
+/// The color for error messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-error: #f31700 !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;
+
+/// The dark color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-dark: get-base-hue( gray, 800 ) !default;
+
+/// The light color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-light: get-base-hue( gray, 100 ) !default;
+
+/// 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;
+
+
+$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: 14px !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: Roboto, "Helvetica Neue", sans-serif !default;
+
+/// Font family across all components.
+/// @group typography
+$kendo-font-family: Roboto, "Helvetica Neue", sans-serif !default;
+
+/// Font family for monospaced text. Used for styling the code.
+/// @group typography
+$kendo-font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+/// Font family across all components.
+/// @group typography
+$kendo-font-family: Roboto, "Helvetica Neue", sans-serif !default;
+
+/// Line height used along with $kendo-font-size.
+/// @group typography
+$kendo-line-height: k-math-div( 28, 14 ) !default;
+$kendo-line-height-xs: 1 !default;
+$kendo-line-height-sm: 1.2 !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: k-map-get( $theme, body-bg ) !default;
+$kendo-body-text: k-map-get( $theme, body-text ) !default;
+
+$kendo-subtle-text: k-map-get( $theme, subtle-text ) !default;
+
+$kendo-app-bg: $kendo-body-bg !default;
+$kendo-app-text: $kendo-body-text !default;
+$kendo-app-border: k-map-get( $theme, component-border ) !default;
+
+// Link
+$kendo-link-text: $kendo-color-secondary !default;
+$kendo-link-hover-text: $kendo-color-secondary-darker !default;
+
+
+// Components
+
+// Component
+/// 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: k-map-get( $theme, component-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: k-map-get( $theme, component-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: k-map-get( $theme, component-border ) !default;
+
+
+/// The background of the components' chrome area.
+$kendo-base-bg: k-map-get( $theme, base-bg ) !default;
+/// The text color of the components' chrome area.
+$kendo-base-text: k-map-get( $theme, component-text ) !default;
+/// The border of the components' chrome area.
+$kendo-base-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+/// The gradient background of the components' chrome area.
+$kendo-base-gradient: null !default;
+
+/// The background of hovered items.
+$kendo-hover-bg: k-map-get( $theme, hover-bg ) !default;
+/// The text color of hovered items.
+$kendo-hover-text: $kendo-base-text !default;
+/// The border color of hovered items.
+$kendo-hover-border: rgba( $kendo-base-border, .15 ) !default;
+/// The gradient background of hovered items.
+$kendo-hover-gradient: null !default;
+
+/// The background of selected items.
+$kendo-selected-bg: $kendo-color-secondary !default;
+/// The text color of selected items.
+$kendo-selected-text: $kendo-color-secondary-contrast !default;
+/// The border color of selected items.
+$kendo-selected-border: rgba( $kendo-base-border, .1 ) !default;
+/// The gradient background of selected items.
+$kendo-selected-gradient: null !default;
+
+$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
+$kendo-selected-hover-text: $kendo-selected-text !default;
+$kendo-selected-hover-border: rgba( $kendo-base-border, .1 ) !default;
+$kendo-selected-hover-gradient: null !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: k-map-get( $theme, disabled-text ) !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: null !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
+/// @type Record<String, ColorMap>
+/// @prop {ColorMap} neutral - The neutral palette
+/// @prop {ColorMap} marsala - The marsala palette
+/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
+/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
+/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
+/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
+/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
+/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
+/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
+/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
+/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
+/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
+/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
+/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
+/// @prop {ColorMap} materialGray - The Material gray palette
+/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
+/// @prop {ColorMap} materialRed - The Material red palette
+/// @prop {ColorMap} materialPink - The Material pink palette
+/// @prop {ColorMap} materialPurple - The Material purple palette
+/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
+/// @prop {ColorMap} materialIndigo - The Material indigo palette
+/// @prop {ColorMap} materialBlue - The Material blue palette
+/// @prop {ColorMap} materialLightBlue - The Material light blue palette
+/// @prop {ColorMap} materialCyan - The Material cyan palette
+/// @prop {ColorMap} materialTeal - The Material teal palette
+/// @prop {ColorMap} materialGreen - The Material green palette
+/// @prop {ColorMap} materialLightGreen - The Material light green palette
+/// @prop {ColorMap} materialLime - The Material lime palette
+/// @prop {ColorMap} materialYellow - The Material yellow palette
+/// @prop {ColorMap} materialAmber - The Material amber palette
+/// @prop {ColorMap} materialOrange - The Material orange palette
+/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
+/// @prop {ColorMap} materialBrown - The Material brown palette
+/// @prop {ColorMap} primerGray - The Primer gray palette
+/// @prop {ColorMap} primerBlue - The Primer blue palette
+/// @prop {ColorMap} primerGreen - The Primer green palette
+/// @prop {ColorMap} primerYellow - The Primer yellow palette
+/// @prop {ColorMap} primerOrange - The Primer orange palette
+/// @prop {ColorMap} primerRed - The Primer red palette
+/// @prop {ColorMap} primerPurple - The Primer purple palette
+/// @prop {ColorMap} primerPink - The Primer pink palette
+/// @prop {ColorMap} primerCoral - The Primer coral palette
+/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
+/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
+/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
+/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
+/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
+/// @prop {ColorMap} tailwindRed - The Tailwind red palette
+/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
+/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
+/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
+/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
+/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
+/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
+/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
+/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
+/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
+/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
+/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
+/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
+/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
+/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
+/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
+/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
+///
+/// @group color-system
+$kendo-palettes: (
+
+    // Kendo
+    neutral: (
+        0: #ffffff,
+        50: #f8f8f8,
+        100: #ededed,
+        200: #d6d6d6,
+        300: #b7b7b7,
+        400: #949494,
+        500: #767676,
+        600: #5f5f5f,
+        700: #494949,
+        800: #373737,
+        900: #282828,
+        1000: #000000
+    ),
+    marsala: (
+        0: #ffffff,
+        50: #faf0f2,
+        100: #f3dde0,
+        200: #e197a3,
+        300: #c54e69,
+        400: #8b3548,
+        500: #622331,
+        600: #551d2a,
+        700: #441620,
+        800: #340f17,
+        900: #23080e,
+        1000: #000000
+    ),
+
+
+    // Bootstrap
+    bootstrapGray: (
+        0: #ffffff,
+        100: #f8f9fa,
+        200: #e9ecef,
+        300: #dee2e6,
+        400: #ced4da,
+        500: #adb5bd,
+        600: #6c757d,
+        700: #495057,
+        800: #343a40,
+        900: #212529,
+        1000: #000000
+    ),
+    bootstrapBlue: (
+        0: #ffffff,
+        100: #cfe2ff,
+        200: #9ec5fe,
+        300: #6ea8fe,
+        400: #3d8bfd,
+        500: #0d6efd,
+        600: #0a58ca,
+        700: #084298,
+        800: #052c65,
+        900: #031633,
+        1000: #000000
+    ),
+    bootstrapIndigo: (
+        0: #ffffff,
+        100: #e0cffc,
+        200: #c29ffa,
+        300: #a370f7,
+        400: #8540f5,
+        500: #6610f2,
+        600: #520dc2,
+        700: #3d0a91,
+        800: #290661,
+        900: #140330,
+        1000: #000000
+    ),
+    bootstrapPurple: (
+        0: #ffffff,
+        100: #e2d9f3,
+        200: #c5b3e6,
+        300: #a98eda,
+        400: #8c68cd,
+        500: #6f42c1,
+        600: #59359a,
+        700: #432874,
+        800: #2c1a4d,
+        900: #160d27,
+        1000: #000000
+    ),
+    bootstrapPink: (
+        0: #ffffff,
+        100: #f7d6e6,
+        200: #efadce,
+        300: #e685b5,
+        400: #de5c9d,
+        500: #d63384,
+        600: #ab296a,
+        700: #801f4f,
+        800: #561435,
+        900: #2b0a1a,
+        1000: #000000
+    ),
+    bootstrapRed: (
+        0: #ffffff,
+        100: #f8d7da,
+        200: #f1aeb5,
+        300: #ea868f,
+        400: #e35d6a,
+        500: #dc3545,
+        600: #b02a37,
+        700: #842029,
+        800: #58151c,
+        900: #2c0b0e,
+        1000: #000000
+    ),
+    bootstrapOrange: (
+        0: #ffffff,
+        100: #ffe5d0,
+        200: #fecba1,
+        300: #feb272,
+        400: #fd9843,
+        500: #fd7e14,
+        600: #ca6510,
+        700: #984c0c,
+        800: #653208,
+        900: #331904,
+        1000: #000000
+    ),
+    bootstrapYellow: (
+        0: #ffffff,
+        100: #fff3cd,
+        200: #ffe69c,
+        300: #ffda6a,
+        400: #ffcd39,
+        500: #ffc107,
+        600: #cc9a06,
+        700: #997404,
+        800: #664d03,
+        900: #332701,
+        1000: #000000
+    ),
+    bootstrapGreen: (
+        0: #ffffff,
+        100: #d1e7dd,
+        200: #a3cfbb,
+        300: #75b798,
+        400: #479f76,
+        500: #198754,
+        600: #146c43,
+        700: #0f5132,
+        800: #0a3622,
+        900: #051b11,
+        1000: #000000
+    ),
+    bootstrapTeal: (
+        0: #ffffff,
+        100: #d2f4ea,
+        200: #a6e9d5,
+        300: #79dfc1,
+        400: #4dd4ac,
+        500: #20c997,
+        600: #1aa179,
+        700: #13795b,
+        800: #0d503c,
+        900: #06281e,
+        1000: #000000
+    ),
+    bootstrapCyan: (
+        0: #ffffff,
+        100: #cff4fc,
+        200: #9eeaf9,
+        300: #6edff6,
+        400: #3dd5f3,
+        500: #0dcaf0,
+        600: #0aa2c0,
+        700: #087990,
+        800: #055160,
+        900: #032830,
+        1000: #000000
+    ),
+
+
+    // Fluent
+    fluentNeutral: (
+        0: #ffffff,
+        50: #faf9f8,
+        100: #edebe9,
+        150: #e1dfdd,
+        200: #d2d0ce,
+        250: #c8c6c4,
+        300: #bdbbb8,
+        350: #b3b0ad,
+        400: #a19f9d,
+        450: #8a8886,
+        500: #797775,
+        550: #605e5c,
+        600: #484644,
+        650: #3b3a39,
+        700: #323130,
+        750: #292827,
+        800: #201f1e,
+        850: #1b1a19,
+        900: #161514,
+        950: #11100f,
+        1000: #000000
+    ),
+
+
+    // Material
+    materialGray: (
+        0: #ffffff,
+        50: #fafafa,
+        100: #f5f5f5,
+        200: #eeeeee,
+        300: #e0e0e0,
+        400: #bdbdbd,
+        500: #9e9e9e,
+        600: #757575,
+        700: #616161,
+        800: #424242,
+        900: #212121,
+        1000: #000000
+    ),
+    materialBlueGray: (
+        0: #ffffff,
+        50: #eceff1,
+        100: #cfd8dc,
+        200: #b0bec5,
+        300: #90a4ae,
+        400: #78909c,
+        500: #607d8b,
+        600: #546e7a,
+        700: #455a64,
+        800: #37474f,
+        900: #263238,
+        1000: #000000
+    ),
+    materialRed: (
+        0: #ffffff,
+        50: #ffebee,
+        100: #ffcdd2,
+        200: #ef9a9a,
+        300: #e57373,
+        400: #ef5350,
+        500: #f44336,
+        600: #e53935,
+        700: #d32f2f,
+        800: #c62828,
+        900: #b71c1c,
+        1000: #000000
+    ),
+    materialPink: (
+        0: #ffffff,
+        50: #fce4ec,
+        100: #f8bbd0,
+        200: #f48fb1,
+        300: #f06292,
+        400: #ec407a,
+        // 500 was #e91e63, but changed for better contrast against white
+        500: #e51a5f,
+        600: #d81b60,
+        700: #c2185b,
+        800: #ad1457,
+        900: #880e4f,
+        1000: #000000
+    ),
+    materialPurple: (
+        0: #ffffff,
+        50: #f3e5f5,
         100: #e1bee7,
         200: #ce93d8,
         300: #ba68c8,
@@ -2811,803 +3953,380 @@ $kendo-palettes: (
 
 // #endregion
 
-// #endregion
-// #region @import "./_color-system-material.scss"; -> scss/core/color-system/_color-system-material.scss
-// Adapted from https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
-// Adapted from https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss
-
-$dark-primary-text: rgba( black, .87 ) !default;
-$dark-secondary-text: rgba( black, .54 ) !default;
-$dark-disabled-text: rgba( black, .38 ) !default;
-$dark-dividers: rgba( black, .12 ) !default;
-$light-primary-text: $kendo-color-white !default;
-$light-secondary-text: rgba( white, .7 ) !default;
-$light-disabled-text: rgba( white, .5 ) !default;
-$light-dividers: rgba( white, .12 ) !default;
-
-$palettes: (
-
-    // Red
-    red: (
-        50: #ffebee,
-        100: #ffcdd2,
-        200: #ef9a9a,
-        300: #e57373,
-        400: #ef5350,
-        500: #f44336,
-        600: #e53935,
-        700: #d32f2f,
-        800: #c62828,
-        900: #b71c1c,
-        A100: #ff8a80,
-        A200: #ff5252,
-        A400: #ff1744,
-        A700: #d50000,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $light-primary-text
-        )
-    ),
-
-    // Pink
-    pink: (
-        50: #fce4ec,
-        100: #f8bbd0,
-        200: #f48fb1,
-        300: #f06292,
-        400: #ec407a,
-        500: #e51a5f, // originally it was #e91e63, but changed for better contrast against white
-        600: #d81b60,
-        700: #c2185b,
-        800: #ad1457,
-        900: #880e4f,
-        A100: #ff80ab,
-        A200: #ff4081,
-        A400: #f50057,
-        A700: #c51162,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $light-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $light-primary-text
-        )
-    ),
-
-    // Purple
-    purple: (
-        50: #f3e5f5,
-        100: #e1bee7,
-        200: #ce93d8,
-        300: #ba68c8,
-        400: #ab47bc,
-        500: #9c27b0,
-        600: #8e24aa,
-        700: #7b1fa2,
-        800: #6a1b9a,
-        900: #4a148c,
-        A100: #ea80fc,
-        A200: #e040fb,
-        A400: #d500f9,
-        A700: #aa00ff,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $light-primary-text,
-            500: $light-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $light-primary-text
-        )
-    ),
-
-    // Deep Purple
-    deepPurple: (
-        50: #ede7f6,
-        100: #d1c4e9,
-        200: #b39ddb,
-        300: #9575cd,
-        400: #7e57c2,
-        500: #673ab7,
-        600: #5e35b1,
-        700: #512da8,
-        800: #4527a0,
-        900: #311b92,
-        A100: #b388ff,
-        A200: #7c4dff,
-        A400: #651fff,
-        A700: #6200ea,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $light-primary-text,
-            500: $light-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $light-primary-text,
-            A400: $light-primary-text,
-            A700: $light-primary-text
-        )
-    ),
-
-    // Indigo
-    indigo: (
-        50: #e8eaf6,
-        100: #c5cae9,
-        200: #9fa8da,
-        300: #7986cb,
-        400: #5c6bc0,
-        500: #3f51b5,
-        600: #3949ab,
-        700: #303f9f,
-        800: #283593,
-        900: #1a237e,
-        A100: #8c9eff,
-        A200: #536dfe,
-        A400: #3d5afe,
-        A700: #304ffe,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $light-primary-text,
-            500: $light-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $light-primary-text,
-            A700: $light-primary-text
-        )
-    ),
-
-    // Blue
-    blue: (
-        50: #e3f2fd,
-        100: #bbdefb,
-        200: #90caf9,
-        300: #64b5f6,
-        400: #42a5f5,
-        500: #2196f3,
-        600: #1e88e5,
-        700: #1976d2,
-        800: #1565c0,
-        900: #0d47a1,
-        A100: #82b1ff,
-        A200: #448aff,
-        A400: #2979ff,
-        A700: #2962ff,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $light-primary-text
-        )
-    ),
-
-    // Light Blue
-    lightBlue: (
-        50: #e1f5fe,
-        100: #b3e5fc,
-        200: #81d4fa,
-        300: #4fc3f7,
-        400: #29b6f6,
-        500: #03a9f4,
-        600: #039be5,
-        700: #0288d1,
-        800: #0277bd,
-        900: #01579b,
-        A100: #80d8ff,
-        A200: #40c4ff,
-        A400: #00b0ff,
-        A700: #0091ea,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
-
-    // Cyan
-    cyan: (
-        50: #e0f7fa,
-        100: #b2ebf2,
-        200: #80deea,
-        300: #4dd0e1,
-        400: #26c6da,
-        500: #00bcd4,
-        600: #00acc1,
-        700: #0097a7,
-        800: #00838f,
-        900: #006064,
-        A100: #84ffff,
-        A200: #18ffff,
-        A400: #00e5ff,
-        A700: #00b8d4,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
-
-    // Teal
-    teal: (
-        50: #e0f2f1,
-        100: #b2dfdb,
-        200: #80cbc4,
-        300: #4db6ac,
-        400: #26a69a,
-        500: #009688,
-        600: #00897b,
-        700: #00796b,
-        800: #00695c,
-        900: #004d40,
-        A100: #a7ffeb,
-        A200: #64ffda,
-        A400: #1de9b6,
-        A700: #00bfa5,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
-
-    // Green
-    green: (
-        50: #e8f5e9,
-        100: #c8e6c9,
-        200: #a5d6a7,
-        300: #81c784,
-        400: #66bb6a,
-        500: #4caf50,
-        600: #43a047,
-        700: #388e3c,
-        800: #2e7d32,
-        900: #1b5e20,
-        A100: #b9f6ca,
-        A200: #69f0ae,
-        A400: #00e676,
-        A700: #00c853,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
+@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
+    $result: ();
 
-    // Light Green
-    lightGreen: (
-        50: #f1f8e9,
-        100: #dcedc8,
-        200: #c5e1a5,
-        300: #aed581,
-        400: #9ccc65,
-        500: #8bc34a,
-        600: #7cb342,
-        700: #689f38,
-        800: #558b2f,
-        900: #33691e,
-        A100: #ccff90,
-        A200: #b2ff59,
-        A400: #76ff03,
-        A700: #64dd17,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $dark-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
+    @each $ui-state, $indices in $matrix {
+        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
+        $indices-count: k-list-length( $indices );
 
-    // Lime
-    lime: (
-        50: #f9fbe7,
-        100: #f0f4c3,
-        200: #e6ee9c,
-        300: #dce775,
-        400: #d4e157,
-        500: #cddc39,
-        600: #c0ca33,
-        700: #afb42b,
-        800: #9e9d24,
-        900: #827717,
-        A100: #f4ff81,
-        A200: #eeff41,
-        A400: #c6ff00,
-        A700: #aeea00,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $dark-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
+        $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 );
 
-    // Yellow
-    yellow: (
-        50: #fffde7,
-        100: #fff9c4,
-        200: #fff59d,
-        300: #fff176,
-        400: #ffee58,
-        500: #ffeb3b,
-        600: #fdd835,
-        700: #fbc02d,
-        800: #f9a825,
-        900: #f57f17,
-        A100: #ffff8d,
-        A200: #ffff00,
-        A400: #ffea00,
-        A700: #ffd600,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $dark-primary-text,
-            900: $dark-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
+        // 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;
 
-    // Amber
-    amber: (
-        50: #fff8e1,
-        100: #ffecb3,
-        200: #ffe082,
-        300: #ffd54f,
-        400: #ffca28,
-        500: #ffc107,
-        600: #ffb300,
-        700: #ffa000,
-        800: #ff8f00,
-        900: #ff6f00,
-        A100: #ffe57f,
-        A200: #ffd740,
-        A400: #ffc400,
-        A700: #ffab00,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $dark-primary-text,
-            900: $dark-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
+        $result: k-map-merge($result, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border,
+            #{$prefix}gradient: $gradient,
+            #{$prefix}shadow: $shadow,
+            #{$prefix}outline: $outline
+        ));
+    }
 
-    // Orange
-    orange: (
-        50: #fff3e0,
-        100: #ffe0b2,
-        200: #ffcc80,
-        300: #ffb74d,
-        400: #ffa726,
-        500: #ff9800,
-        600: #fb8c00,
-        700: #f57c00,
-        800: #ef6c00,
-        900: #e65100,
-        A100: #ffd180,
-        A200: #ffab40,
-        A400: #ff9100,
-        A700: #ff6d00,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $dark-primary-text,
-            900: $dark-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $dark-primary-text
-        )
-    ),
+    $result: (
+        #{$variant}: $result
+    );
 
-    // Deep Orange
-    deepOrange: (
-        50: #fbe9e7,
-        100: #ffccbc,
-        200: #ffab91,
-        300: #ff8a65,
-        400: #ff7043,
-        500: #ff5722,
-        600: #f4511e,
-        700: #e64a19,
-        800: #d84315,
-        900: #bf360c,
-        A100: #ff9e80,
-        A200: #ff6e40,
-        A400: #ff3d00,
-        A700: #dd2c00,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $dark-primary-text,
-            700: $dark-primary-text,
-            800: $dark-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $light-primary-text
-        )
-    ),
+    @return $result;
 
-    // Brown
-    brown: (
-        50: #efebe9,
-        100: #d7ccc8,
-        200: #bcaaa4,
-        300: #a1887f,
-        400: #8d6e63,
-        500: #795548,
-        600: #6d4c41,
-        700: #5d4037,
-        800: #4e342e,
-        900: #3e2723,
-        A100: #d7ccc8,
-        A200: #bcaaa4,
-        A400: #8d6e63,
-        A700: #5d4037,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $light-primary-text,
-            500: $light-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $light-primary-text,
-            A700: $light-primary-text
-        )
-    ),
+};
 
-    // Gray
-    gray: (
-        50: #fafafa,
-        100: #f5f5f5,
-        200: #eeeeee,
-        300: #e0e0e0,
-        400: #bdbdbd,
-        500: #9e9e9e,
-        600: #757575,
-        700: #616161,
-        800: #424242,
-        900: #212121,
-        A100: #ffffff,
-        A200: #eeeeee,
-        A400: #bdbdbd,
-        A700: #616161,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $dark-primary-text,
-            A700: $light-primary-text
-        )
-    ),
 
-    // Blue Gray
-    blueGray: (
-        50: #eceff1,
-        100: #cfd8dc,
-        200: #b0bec5,
-        300: #90a4ae,
-        400: #78909c,
-        500: #607d8b,
-        600: #546e7a,
-        700: #455a64,
-        800: #37474f,
-        900: #263238,
-        A100: #cfd8dc,
-        A200: #b0bec5,
-        A400: #78909c,
-        A700: #455a64,
-        contrast: (
-            50: $dark-primary-text,
-            100: $dark-primary-text,
-            200: $dark-primary-text,
-            300: $dark-primary-text,
-            400: $dark-primary-text,
-            500: $dark-primary-text,
-            600: $light-primary-text,
-            700: $light-primary-text,
-            800: $light-primary-text,
-            900: $light-primary-text,
-            A100: $dark-primary-text,
-            A200: $dark-primary-text,
-            A400: $light-primary-text,
-            A700: $light-primary-text
-        )
-    )
+@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
+    $result: ();
 
-) !default;
+    // @debug $theme-matrix;
+    // @debug $palette-matrix;
 
-@function get-base-palette($name) {
-    @return k-map-get( $palettes, $name );
-}
+    @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 );
 
-@function get-base-hue($palette, $hue) {
-    @return k-map-get( get-base-palette( $palette ), $hue );
-}
+        @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 + "");
 
-@function get-base-contrast($palette, $hue) {
-    @return k-map-get( k-map-get( get-base-palette($palette), contrast), $hue );
+                @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;
 }
 
-$material-dark-complimentary: (
-    is-dark: true,
-    body-bg: #121212,
-    body-text: $light-primary-text,
-    subtle-text: $light-secondary-text,
-    disabled-text: $light-disabled-text,
-    component-bg: #121212,
-    component-text: $light-primary-text,
-    component-border: $light-dividers,
-    base-bg: get-base-hue( gray, 900 ),
-    hover-bg: rgba( white, .08 ),
-    focus-bg: rgba( white, .24 ),
-    elevation: $kendo-color-black
-) !default;
 
+@function k-get-theme-palette( $name ) {
+    @return k-map-get( $kendo-palettes, $name );
+}
 
-$material-light-complimentary: (
-    is-dark: false,
-    body-bg: $kendo-color-white,
-    body-text: get-base-contrast( gray, 50 ),
-    subtle-text: $dark-secondary-text,
-    disabled-text: $dark-disabled-text,
-    component-bg: $kendo-color-white,
-    component-text: $dark-primary-text,
-    component-border: $dark-dividers,
-    base-bg: $kendo-color-white,
-    hover-bg: rgba( black, .04 ),
-    focus-bg: rgba( black, .12 ),
-    elevation: $kendo-color-black
-) !default;
+@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 );
+}
 
-// For a given hue in a palette, return the contrast color from the map of contrast palettes.
-@function material-contrast($palette, $hue) {
-    @return k-map-get(k-map-get($palette, contrast), $hue);
+@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
+    @return var( --#{$prefix}#{$name}, #{$fallback} );
 }
 
-// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
-// of the Material Design hues.
-@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700, $adjust-contrast: true) {
+@function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
+    $temp: ( );
 
-    @if not (k-meta-type-of($base-palette) == map) {
-        $base-palette: get-base-palette($base-palette);
-    }
+    @each $ui-state, $indices in $mapping {
+        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
 
-    $main-contrast: material-contrast($base-palette, $main);
+        $bg-prop: k-list-nth($indices, 1);
+        $text-prop: k-list-nth($indices, 2);
+        $border-prop: k-list-nth($indices, 3);
 
-    @if ( $adjust-contrast == true ) {
-        @if ($theme-type == dark) and ($main-contrast == $light-primary-text) {
-            $main: 200;
-            $lighter: 100;
-            $darker: 300;
-        }
+        // 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 );
 
-        @if ($theme-type == light) and ($main-contrast == $dark-primary-text) {
-            $main: 800;
-            $lighter: 700;
-            $darker: 900;
+
+        $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
+            ));
         }
     }
 
-    // stylelint-disable-next-line function-comma-newline-after
-    $result: k-map-merge($base-palette, (
-        main: k-map-get($base-palette, $main),
-        lighter: k-map-get($base-palette, $lighter),
-        darker: k-map-get($base-palette, $darker),
-        main-contrast: material-contrast($base-palette, $main),
-        lighter-contrast: material-contrast($base-palette, $lighter),
-        darker-contrast: material-contrast($base-palette, $darker)
-    ));
+    $map: (
+        #{$theme-color}: $temp
+    );
 
-    // For each hue in the palette, add a "-contrast" color to the map.
-    @each $hue, $color in $base-palette {
-        // stylelint-disable-next-line function-comma-newline-after
-        $result: k-map-merge($result, (
-            "#{$hue}-contrast": material-contrast($base-palette, $hue)
-        ));
-    }
+    @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};
+        }
+    }
+}
 
-// Gets a color from a theme palette (the output of material-palette).
-// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
-// hues (main, lighter, darker), or any of the aforementioned prefixed with "-contrast".
-@function material-color($palette, $hue: main, $opacity: null) {
+// #endregion
+// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
+// Color constants
 
-    @if not (k-meta-type-of($palette) == map) {
-        $palette: get-base-palette($palette);
-    }
+/// 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
 
-    // If hueKey is a number between zero and one, then it actually contains an
-    // opacity value, so recall this function with the default hue and that given opacity.
-    @if k-meta-type-of($hue) == number and $hue >= 0 and $hue <= 1 {
-        @return material-color($palette, main, $hue);
+/// 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};
     }
 
-    $color: k-map-get($palette, $hue);
-    $opacity: if($opacity == null, k-color-alpha($color), $opacity);
+    // Text colors
+    @each $theme-color, $color-props in $kendo-theme-colors {
+        $_color: k-map-get( $color-props, text );
 
-    @return rgba( $color, $opacity );
-}
+        .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
+        }
 
-// Creates a container object for a light theme to be given to individual component theme mixins.
-@function material-theme($kendo-color-primary, $kendo-color-secondary, $theme-type, $warn: material-palette(red)) {
-    $complimentary: if($theme-type == dark, $material-dark-complimentary, $material-light-complimentary);
-    @return k-map-merge((
-        primary: $kendo-color-primary,
-        secondary: $kendo-color-secondary,
-        warn: $warn
-    ), $complimentary );
+        .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
-
-// 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
+// #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 ) {
@@ -3707,6 +4426,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" ) {
@@ -3759,7 +4519,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} );
@@ -3776,6 +4536,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.
@@ -3805,13 +4577,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});
@@ -3819,12 +4584,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
@@ -4503,12 +5263,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() {
 
@@ -4539,6 +5294,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 {
@@ -4639,441 +5408,400 @@ $_imported: () !default;
 @mixin kendo-core--styles--normalize() {
 
     // Hidden attribute
-    [hidden] {
-        display: none !important; // stylelint-disable-line declaration-no-important
-    }
-
-
-    // Hide script tags
-    // see https://github.com/telerik/kendo-themes/issues/2360
-    script {
-        display: none !important; // stylelint-disable-line declaration-no-important
-    }
-
-}
-
-// #endregion
-
-
-@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
-// #region @import "./core/color-system/index.import.scss"; -> scss/core/color-system/index.import.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Options
-$kendo-enable-rounded: true !default;
-$kendo-enable-shadows: true !default;
-$kendo-enable-gradients: false !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;
-
-
-// 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;
-
-
-// Apply material theme, as early as possible
-$primary-palette-name: indigo !default;
-$secondary-palette-name: pink !default;
-$tertiary-palette-name: teal !default;
-$adjust-contrast: true !default;
-$theme-type: light !default; // light or dark
-
-$primary-palette: material-palette( $primary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
-$secondary-palette: material-palette( $secondary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
-$tertiary-palette: material-palette( $tertiary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
-
-$theme: material-theme(
-    $primary-palette,
-    $secondary-palette,
-    $theme-type
-) !default;
-
-
-// Shadows
-
-/// Color of shadows
-/// @group shadows
-$elevation: k-map-get( $theme, elevation ) !default;
-/// Shadow for switch.
-/// Equivalent to material elevation 1.
-/// @group shadows
-$box-shadow-depth-1: 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) !default;
-/// Shadow for resting state of button, card and other widgets.
-/// Equivalent to material elevation 2.
-/// @group shadows
-$box-shadow-depth-2: 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) !default;
-/// Shadow for menu, popups and raised state of button and card.
-/// Equivalent to material elevation 8.
-/// @group shadows
-$box-shadow-depth-3: 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) !default;
-/// Shadow for drawers and other overlaying elements.
-/// Equivalent to material elevation 16.
-/// @group shadows
-$box-shadow-depth-4: 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) !default;
-/// Shadow for window and dialog.
-/// Equivalent to material elevation 24.
-/// @group shadows
-$box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) !default;
-
-
-// Icons
-$kendo-icon-size: 16px !default;
-
-$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;
-
-$kendo-icon-spacing: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
-
-// Metrics
-$kendo-padding-x: 16px !default;
-$kendo-padding-y: 4px !default;
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 6 ) !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 * 1.5 !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;
-
-
-$kendo-zindex-popup: 1 !default;
-$kendo-zindex-window: 2 !default;
-$kendo-zindex-loading: 100 !default;
-
-
-// Color settings
-$kendo-is-dark-theme: k-map-get( $theme, is-dark ) !default;
-
-
-// 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: material-color( $primary-palette, main ) !default;
-$kendo-color-primary-lighter: material-color( $primary-palette, lighter ) !default;
-$kendo-color-primary-darker: material-color( $primary-palette, darker ) !default;
-
-/// 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: material-color( $primary-palette, main-contrast ) !default;
-
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary: material-color( $secondary-palette, main ) !default;
-$kendo-color-secondary-lighter: material-color( $secondary-palette, lighter ) !default;
-$kendo-color-secondary-darker: material-color( $secondary-palette, darker ) !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
-/// @type Color
-$kendo-color-secondary-contrast: material-color( $secondary-palette, main-contrast ) !default;
-
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary: material-color($tertiary-palette, main) !default;
-$kendo-color-tertiary-lighter: material-color($tertiary-palette, lighter) !default;
-$kendo-color-tertiary-darker: material-color($tertiary-palette, darker) !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
-/// @type Color
-$kendo-color-tertiary-contrast: material-color($tertiary-palette, main-contrast) !default;
-
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-info: #0058e9 !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
-/// @type Color
-$kendo-color-success: #37b400 !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;
-
-/// The color for warning messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-warning: #ffc000 !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;
-
-/// The color for error messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-error: #f31700 !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;
+    [hidden] {
+        display: none !important; // stylelint-disable-line declaration-no-important
+    }
 
-/// The dark color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-dark: get-base-hue( gray, 800 ) !default;
 
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-light: get-base-hue( gray, 100 ) !default;
+    // Hide script tags
+    // see https://github.com/telerik/kendo-themes/issues/2360
+    script {
+        display: none !important; // stylelint-disable-line declaration-no-important
+    }
 
-/// 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;
+}
 
+// #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 )
+        );
 
-$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;
+        .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;
+    }
 
-// Typography
+    // Horizontal rule
+    .k-d-flex-row > .k-hr {
+        margin: 0;
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+        flex: 0 0 auto;
+    }
 
-/// 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: 14px !default;
-$kendo-font-size-lg: 16px !default;
-$kendo-font-size-xl: 20px !default;
+    // Vertical rule
+    .k-d-flex-col > .k-hr {
+        margin: 0;
+        flex: 0 0 auto;
+    }
 
-$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;
+    .k-sprite {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+    }
 
-/// Font family for text.
-/// @group typography
-$kendo-font-family-sans-serif: Roboto, "Helvetica Neue", sans-serif !default;
+    .k-image {
+        display: inline-block;
+    }
 
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: Roboto, "Helvetica Neue", sans-serif !default;
+    // Layout
+    .k-reset {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        text-decoration: none;
+        font: inherit;
+        list-style: none;
+    }
 
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+    kendo-sortable {
+        display: block;
+    }
 
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: Roboto, "Helvetica Neue", sans-serif !default;
 
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: k-math-div( 28, 14 ) !default;
-$kendo-line-height-xs: 1 !default;
-$kendo-line-height-sm: 1.2 !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;
+    // Links
+    .k-link,
+    .k-link:hover {
+        color: inherit;
+        text-decoration: none;
+        outline: 0;
+        cursor: pointer;
+    }
 
-// 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;
+    // Outline
+    .k-content {
+        outline: 0;
+    }
 
-// Letter Spacing
-$kendo-letter-spacing: null !default;
+    // Centering
+    .k-centered {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 
+    // Disable mouse events
+    .k-no-click {
+        pointer-events: none;
+    }
 
-// Generic styles
+    // Off-screen container used during PDF export
+    .k-pdf-export-shadow {
+        position: absolute;
+        overflow: hidden;
+        left: -15000px;
+        width: 14400px;
+    }
 
-// Root styles
-$kendo-body-bg: k-map-get( $theme, body-bg ) !default;
-$kendo-body-text: k-map-get( $theme, body-text ) !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
+    }
 
-$kendo-subtle-text: k-map-get( $theme, subtle-text ) !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;
 
-$kendo-app-bg: $kendo-body-bg !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: k-map-get( $theme, component-border ) !default;
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
 
-// Link
-$kendo-link-text: $kendo-color-secondary !default;
-$kendo-link-hover-text: $kendo-color-secondary-darker !default;
+    .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;
 
-// Components
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
 
-// Component
-/// 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: k-map-get( $theme, component-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: k-map-get( $theme, component-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: k-map-get( $theme, component-border ) !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;
+    }
 
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
 
-/// The background of the components' chrome area.
-$kendo-base-bg: k-map-get( $theme, base-bg ) !default;
-/// The text color of the components' chrome area.
-$kendo-base-text: k-map-get( $theme, component-text ) !default;
-/// The border of the components' chrome area.
-$kendo-base-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-/// The gradient background of the components' chrome area.
-$kendo-base-gradient: null !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 background of hovered items.
-$kendo-hover-bg: k-map-get( $theme, hover-bg ) !default;
-/// The text color of hovered items.
-$kendo-hover-text: $kendo-base-text !default;
-/// The border color of hovered items.
-$kendo-hover-border: rgba( $kendo-base-border, .15 ) !default;
-/// The gradient background of hovered items.
-$kendo-hover-gradient: null !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 background of selected items.
-$kendo-selected-bg: $kendo-color-secondary !default;
-/// The text color of selected items.
-$kendo-selected-text: $kendo-color-secondary-contrast !default;
-/// The border color of selected items.
-$kendo-selected-border: rgba( $kendo-base-border, .1 ) !default;
-/// The gradient background of selected items.
-$kendo-selected-gradient: null !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;
+    }
 
-$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
-$kendo-selected-hover-text: $kendo-selected-text !default;
-$kendo-selected-hover-border: rgba( $kendo-base-border, .1 ) !default;
-$kendo-selected-hover-gradient: null !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;
+    }
 
-$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;
+    .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
 
-// Disabled mixin variables
-$kendo-disabled-text: k-map-get( $theme, disabled-text ) !default;
-$kendo-disabled-filter: grayscale(.1) !default;
-$kendo-disabled-opacity: .6 !default;
 
-$kendo-disabled-styling: (
-    opacity: $kendo-disabled-opacity,
-    filter: $kendo-disabled-filter
-) !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();
+}
 
+// #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
 
-// Generic styles
+// Options
+$kendo-enable-shadows: true !default;
+$kendo-enable-rounded: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
 
-// TODO: refactor once we extract drag drop as separate module
+$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;
 
-// 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: null !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;
 
-// 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;
+// 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
 
@@ -6168,39 +6896,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
@@ -14095,7 +14790,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... );
 
@@ -37905,6 +38603,7 @@ $kendo-actionsheet-item-disabled-opacity: .42 !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;
@@ -38151,6 +38850,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;
@@ -38190,6 +38890,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;
@@ -41094,236 +41800,63 @@ $_kendo-module-meta: (
 // Component
 // #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-md !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-md !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( black, .06 ) !default;
-
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !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.5 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 0.5 ) !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, 1.5 ) !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.5 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !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 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 text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
 
-/// The background color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-color-primary !default;
-/// The border color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-hover-bg !default;
-/// The text color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: null !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: k-map-get( $theme, focus-bg ) !default;
-/// The text color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: null !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: null !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-hover-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: k-map-get( $theme, focus-bg ) !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: null !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
@@ -41341,6 +41874,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;
@@ -41392,6 +41927,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;
@@ -41405,12 +41942,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,
@@ -41429,34 +41975,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;
-            }
-        }
-    }
-
 }
 
 
@@ -51770,6 +52288,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;
     }