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

package/dist/all.scss

@@ -2,1079 +2,83 @@
 // baka:source packages/core/scss/all.scss
 
 // #region @import "./index.import.scss"; -> packages/core/scss/index.import.scss
-// #region @import "./color-system/index.import.scss"; -> packages/core/scss/color-system/index.import.scss
-// #region @import "./_functions.import.scss"; -> packages/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;
-
-        $result: k-map-merge($result, (
-            // sass-lint:disable-block indentation
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border,
-            #{$prefix}gradient: $gradient,
-            #{$prefix}shadow: $shadow,
-            #{$prefix}outline: $outline
-        ));
-    }
-
-    $result: (
-        #{$variant}: $result
-    );
-
-    @return $result;
-
-};
-
-
-@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
-    $result: ();
-
-    // @debug $theme-matrix;
-    // @debug $palette-matrix;
+// #region @import "./functions/index.import.scss"; -> packages/core/scss/functions/index.import.scss
+// #region @import "../_variables.scss"; -> packages/core/scss/_variables.scss
+// Equilateral triangle variables
+$equilateral-index: 1.7320508076 !default;
+$equilateral-height: .8660254038 !default;
 
-    @each $variant, $definition in $theme-matrix {
-        $tc-index: k-string-index( $variant, "THEME_COLOR" );
-        $src-palette-name: k-map-get( $definition, PALETTE );
-        $matrix: k-map-remove( $definition, PALETTE );
+// #endregion
 
-        @if ($tc-index == null ) {
-            $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 + "");
+// #region @import "./_color.import.scss"; -> packages/core/scss/functions/_color.import.scss
+@function k-color-alpha( $color ) {
+    @return alpha( $color );
+}
 
-                @if ($palette-name == THEME_COLOR) {
-                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
-                    $palette-name: k-map-get( $palette-matrix, $palette-name );
-                }
+@function k-color-red( $color ) {
+    @return red( $color );
+}
 
-                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
-                $result: k-map-merge( $result, $tmp-result );
-            }
-        }
-    }
+@function k-color-green( $color ) {
+    @return green( $color );
+}
 
-    @return $result;
+@function k-color-blue( $color ) {
+    @return blue( $color );
 }
 
+@function k-color-hue( $color ) {
+    @return hue( $color );
+}
 
-@function k-get-theme-palette( $name ) {
-    @return k-map-get( $kendo-palettes, $name );
+@function k-color-saturation( $color ) {
+    @return saturation( $color );
 }
 
-@function k-get-theme-color( $palette, $hue ) {
-    @if ( k-meta-type-of( $palette ) == "map" ) {
-        @return k-map-get( $palette, $hue );
-    }
+@function k-color-lightness( $color ) {
+    @return lightness( $color );
+}
 
-    @return k-map-get( k-get-theme-palette( $palette ), $hue );
+@function k-color-mix( $color1, $color2, $weight: 50% ) {
+    @return mix( $color1, $color2, $weight );
 }
 
-@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
-    @return var( --#{$prefix}#{$name}, #{$fallback} );
+@function k-color-darken( $color, $amount) {
+    @return darken( $color, $amount );
 }
 
-// #endregion
-// #region @import "./_mixins.import.scss"; -> packages/core/scss/color-system/_mixins.import.scss
+@function k-color-lighten( $color, $amount) {
+    @return lighten( $color, $amount );
+}
 
-// #endregion
-// #region @import "./_variables.scss"; -> packages/core/scss/color-system/_variables.scss
-// Color constants
-$white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-$black: #000000; // stylelint-disable-line scss/dollar-variable-default
+@function k-color-adjust-hue( $color, $degrees ) {
+    @return adjust-hue( $color, $degrees );
+}
 
-$rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+@function k-color-saturate( $color, $amount ) {
+    @return saturate( $color, $amount );
+}
 
-$gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
-$gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
-$gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
-$gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+@function k-color-desaturate( $color, $amount ) {
+    @return desaturate( $color, $amount );
+}
 
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+@function k-color-grayscale( $color ) {
+    @return grayscale( $color );
+}
 
+@function k-color-complement( $color ) {
+    @return complement( $color );
+}
 
-/// Set a specific jump point for requesting color jumps
-/// @group color-system
-/// @access private
-$kendo-color-level-step: 8% !default;
+@function k-color-invert( $color ) {
+    @return invert( $color );
+}
 
 // #endregion
-// #region @import "./_palettes.scss"; -> packages/core/scss/color-system/_palettes.scss
-$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,
-        400: #ab47bc,
-        500: #9c27b0,
-        600: #8e24aa,
-        700: #7b1fa2,
-        800: #6a1b9a,
-        900: #4a148c,
-        1000: #000000
-    ),
-    materialDeepPurple: (
-        0: #ffffff,
-        50: #ede7f6,
-        100: #d1c4e9,
-        200: #b39ddb,
-        300: #9575cd,
-        400: #7e57c2,
-        500: #673ab7,
-        600: #5e35b1,
-        700: #512da8,
-        800: #4527a0,
-        900: #311b92,
-        1000: #000000
-    ),
-    materialIndigo: (
-        0: #ffffff,
-        50: #e8eaf6,
-        100: #c5cae9,
-        200: #9fa8da,
-        300: #7986cb,
-        400: #5c6bc0,
-        500: #3f51b5,
-        600: #3949ab,
-        700: #303f9f,
-        800: #283593,
-        900: #1a237e,
-        1000: #000000
-    ),
-    materialBlue: (
-        0: #ffffff,
-        50: #e3f2fd,
-        100: #bbdefb,
-        200: #90caf9,
-        300: #64b5f6,
-        400: #42a5f5,
-        500: #2196f3,
-        600: #1e88e5,
-        700: #1976d2,
-        800: #1565c0,
-        900: #0d47a1,
-        1000: #000000
-    ),
-    materialLightBlue: (
-        0: #ffffff,
-        50: #e1f5fe,
-        100: #b3e5fc,
-        200: #81d4fa,
-        300: #4fc3f7,
-        400: #29b6f6,
-        500: #03a9f4,
-        600: #039be5,
-        700: #0288d1,
-        800: #0277bd,
-        900: #01579b,
-        1000: #000000
-    ),
-    materialCyan: (
-        0: #ffffff,
-        50: #e0f7fa,
-        100: #b2ebf2,
-        200: #80deea,
-        300: #4dd0e1,
-        400: #26c6da,
-        500: #00bcd4,
-        600: #00acc1,
-        700: #0097a7,
-        800: #00838f,
-        900: #006064,
-        1000: #000000
-    ),
-    materialTeal: (
-        0: #ffffff,
-        50: #e0f2f1,
-        100: #b2dfdb,
-        200: #80cbc4,
-        300: #4db6ac,
-        400: #26a69a,
-        500: #009688,
-        600: #00897b,
-        700: #00796b,
-        800: #00695c,
-        900: #004d40,
-        1000: #000000
-    ),
-    materialGreen: (
-        0: #ffffff,
-        50: #e8f5e9,
-        100: #c8e6c9,
-        200: #a5d6a7,
-        300: #81c784,
-        400: #66bb6a,
-        500: #4caf50,
-        600: #43a047,
-        700: #388e3c,
-        800: #2e7d32,
-        900: #1b5e20,
-        1000: #000000
-    ),
-    materialLightGreen: (
-        0: #ffffff,
-        50: #f1f8e9,
-        100: #dcedc8,
-        200: #c5e1a5,
-        300: #aed581,
-        400: #9ccc65,
-        500: #8bc34a,
-        600: #7cb342,
-        700: #689f38,
-        800: #558b2f,
-        900: #33691e,
-        1000: #000000
-    ),
-    materialLime: (
-        0: #ffffff,
-        50: #f9fbe7,
-        100: #f0f4c3,
-        200: #e6ee9c,
-        300: #dce775,
-        400: #d4e157,
-        500: #cddc39,
-        600: #c0ca33,
-        700: #afb42b,
-        800: #9e9d24,
-        900: #827717,
-        1000: #000000
-    ),
-    materialYellow: (
-        0: #ffffff,
-        50: #fffde7,
-        100: #fff9c4,
-        200: #fff59d,
-        300: #fff176,
-        400: #ffee58,
-        500: #ffeb3b,
-        600: #fdd835,
-        700: #fbc02d,
-        800: #f9a825,
-        900: #f57f17,
-        1000: #000000
-    ),
-    materialAmber: (
-        0: #ffffff,
-        50: #fff8e1,
-        100: #ffecb3,
-        200: #ffe082,
-        300: #ffd54f,
-        400: #ffca28,
-        500: #ffc107,
-        600: #ffb300,
-        700: #ffa000,
-        800: #ff8f00,
-        900: #ff6f00,
-        1000: #000000
-    ),
-    materialOrange: (
-        0: #ffffff,
-        50: #fff3e0,
-        100: #ffe0b2,
-        200: #ffcc80,
-        300: #ffb74d,
-        400: #ffa726,
-        500: #ff9800,
-        600: #fb8c00,
-        700: #f57c00,
-        800: #ef6c00,
-        900: #e65100,
-        1000: #000000
-    ),
-    materialDeepOrange: (
-        0: #ffffff,
-        50: #fbe9e7,
-        100: #ffccbc,
-        200: #ffab91,
-        300: #ff8a65,
-        400: #ff7043,
-        500: #ff5722,
-        600: #f4511e,
-        700: #e64a19,
-        800: #d84315,
-        900: #bf360c,
-        1000: #000000
-    ),
-    materialBrown: (
-        0: #ffffff,
-        50: #efebe9,
-        100: #d7ccc8,
-        200: #bcaaa4,
-        300: #a1887f,
-        400: #8d6e63,
-        500: #795548,
-        600: #6d4c41,
-        700: #5d4037,
-        800: #4e342e,
-        900: #3e2723,
-        1000: #000000
-    ),
-
-
-    // Primer
-    primerGray: (
-        0: #ffffff,
-        50: #f6f8fa,
-        100: #eaeef2,
-        200: #d0d7de,
-        300: #afb8c1,
-        400: #8c959f,
-        500: #6e7781,
-        600: #57606a,
-        700: #424a53,
-        800: #32383f,
-        900: #24292f,
-        1000: #000000
-    ),
-    primerBlue: (
-        0: #ffffff,
-        50: #ddf4ff,
-        100: #b6e3ff,
-        200: #80ccff,
-        300: #54aeff,
-        400: #218bff,
-        500: #0969da,
-        600: #0550ae,
-        700: #033d8b,
-        800: #0a3069,
-        900: #002155,
-        1000: #000000
-    ),
-    primerGreen: (
-        0: #ffffff,
-        50: #dafbe1,
-        100: #aceebb,
-        200: #6fdd8b,
-        300: #4ac26b,
-        400: #2da44e,
-        500: #1a7f37,
-        600: #116329,
-        700: #044f1e,
-        800: #003d16,
-        900: #002d11,
-        1000: #000000
-    ),
-    primerYellow: (
-        0: #ffffff,
-        50: #fff8c5,
-        100: #fae17d,
-        200: #eac54f,
-        300: #d4a72c,
-        400: #bf8700,
-        500: #9a6700,
-        600: #7d4e00,
-        700: #633c01,
-        800: #4d2d00,
-        900: #3b2300,
-        1000: #000000
-    ),
-    primerOrange: (
-        0: #ffffff,
-        50: #fff1e5,
-        100: #ffd8b5,
-        200: #ffb77c,
-        300: #fb8f44,
-        400: #e16f24,
-        500: #bc4c00,
-        600: #953800,
-        700: #762c00,
-        800: #5c2200,
-        900: #471700,
-        1000: #000000
-    ),
-    primerRed: (
-        0: #ffffff,
-        50: #ffebe9,
-        100: #ffcecb,
-        200: #ffaba8,
-        300: #ff8182,
-        400: #fa4549,
-        500: #cf222e,
-        600: #a40e26,
-        700: #82071e,
-        800: #660018,
-        900: #4c0014,
-        1000: #000000
-    ),
-    primerPurple: (
-        0: #ffffff,
-        50: #fbefff,
-        100: #ecd8ff,
-        200: #d8b9ff,
-        300: #c297ff,
-        400: #a475f9,
-        500: #8250df,
-        600: #6639ba,
-        700: #512a97,
-        800: #3e1f79,
-        900: #2e1461,
-        1000: #000000
-    ),
-    primerPink: (
-        0: #ffffff,
-        50: #ffeff7,
-        100: #ffd3eb,
-        200: #ffadda,
-        300: #ff80c8,
-        400: #e85aad,
-        500: #bf3989,
-        600: #99286e,
-        700: #772057,
-        800: #611347,
-        900: #4d0336,
-        1000: #000000
-    ),
-    primerCoral: (
-        0: #ffffff,
-        50: #fff0eb,
-        100: #ffd6cc,
-        200: #ffb4a1,
-        300: #fd8c73,
-        400: #ec6547,
-        500: #c4432b,
-        600: #9e2f1c,
-        700: #801f0f,
-        800: #691105,
-        900: #510901,
-        1000: #000000
-    ),
-
-
-    // Tailwind
-    tailwindNeutral: (
-        0: #ffffff,
-        50: #fafafa,
-        100: #f5f5f5,
-        200: #e5e5e5,
-        300: #d4d4d4,
-        400: #a3a3a3,
-        500: #737373,
-        600: #525252,
-        700: #404040,
-        800: #262626,
-        900: #171717,
-        1000: #000000
-    ),
-    tailwindSlate: (
-        0: #ffffff,
-        50: #f8fafc,
-        100: #f1f5f9,
-        200: #e2e8f0,
-        300: #cbd5e1,
-        400: #94a3b8,
-        500: #64748b,
-        600: #475569,
-        700: #334155,
-        800: #1e293b,
-        900: #0f172a,
-        1000: #000000
-    ),
-    tailwindGray: (
-        0: #ffffff,
-        50: #f9fafb,
-        100: #f3f4f6,
-        200: #e5e7eb,
-        300: #d1d5db,
-        400: #9ca3af,
-        500: #6b7280,
-        600: #4b5563,
-        700: #374151,
-        800: #1f2937,
-        900: #111827,
-        1000: #000000
-    ),
-    tailwindZinc: (
-        0: #ffffff,
-        50: #fafafa,
-        100: #f4f4f5,
-        200: #e4e4e7,
-        300: #d4d4d8,
-        400: #a1a1aa,
-        500: #71717a,
-        600: #52525b,
-        700: #3f3f46,
-        800: #27272a,
-        900: #18181b,
-        1000: #000000
-    ),
-    tailwindStone: (
-        0: #ffffff,
-        50: #fafaf9,
-        100: #f5f5f4,
-        200: #e7e5e4,
-        300: #d6d3d1,
-        400: #a8a29e,
-        500: #78716c,
-        600: #57534e,
-        700: #44403c,
-        800: #292524,
-        900: #1c1917,
-        1000: #000000
-    ),
-    tailwindRed: (
-        0: #ffffff,
-        50: #fef2f2,
-        100: #fee2e2,
-        200: #fecaca,
-        300: #fca5a5,
-        400: #f87171,
-        500: #ef4444,
-        600: #dc2626,
-        700: #b91c1c,
-        800: #991b1b,
-        900: #7f1d1d,
-        1000: #000000
-    ),
-    tailwindOrange: (
-        0: #ffffff,
-        50: #fff7ed,
-        100: #ffedd5,
-        200: #fed7aa,
-        300: #fdba74,
-        400: #fb923c,
-        500: #f97316,
-        600: #ea580c,
-        700: #c2410c,
-        800: #9a3412,
-        900: #7c2d12,
-        1000: #000000
-    ),
-    tailwindAmber: (
-        0: #ffffff,
-        50: #fffbeb,
-        100: #fef3c7,
-        200: #fde68a,
-        300: #fcd34d,
-        400: #fbbf24,
-        500: #f59e0b,
-        600: #d97706,
-        700: #b45309,
-        800: #92400e,
-        900: #78350f,
-        1000: #000000
-    ),
-    tailwindYellow: (
-        0: #ffffff,
-        50: #fefce8,
-        100: #fef9c3,
-        200: #fef08a,
-        300: #fde047,
-        400: #facc15,
-        500: #eab308,
-        600: #ca8a04,
-        700: #a16207,
-        800: #854d0e,
-        900: #713f12,
-        1000: #000000
-    ),
-    tailwindLime: (
-        0: #ffffff,
-        50: #f7fee7,
-        100: #ecfccb,
-        200: #d9f99d,
-        300: #bef264,
-        400: #a3e635,
-        500: #84cc16,
-        600: #65a30d,
-        700: #4d7c0f,
-        800: #3f6212,
-        900: #365314,
-        1000: #000000
-    ),
-    tailwindGreen: (
-        0: #ffffff,
-        50: #f0fdf4,
-        100: #dcfce7,
-        200: #bbf7d0,
-        300: #86efac,
-        400: #4ade80,
-        500: #22c55e,
-        600: #16a34a,
-        700: #15803d,
-        800: #166534,
-        900: #14532d,
-        1000: #000000
-    ),
-    tailwindEmerald: (
-        0: #ffffff,
-        50: #ecfdf5,
-        100: #d1fae5,
-        200: #a7f3d0,
-        300: #6ee7b7,
-        400: #34d399,
-        500: #10b981,
-        600: #059669,
-        700: #047857,
-        800: #065f46,
-        900: #064e3b,
-        1000: #000000
-    ),
-    tailwindTeal: (
-        0: #ffffff,
-        50: #f0fdfa,
-        100: #ccfbf1,
-        200: #99f6e4,
-        300: #5eead4,
-        400: #2dd4bf,
-        500: #14b8a6,
-        600: #0d9488,
-        700: #0f766e,
-        800: #115e59,
-        900: #134e4a,
-        1000: #000000
-    ),
-    tailwindCyan: (
-        0: #ffffff,
-        50: #ecfeff,
-        100: #cffafe,
-        200: #a5f3fc,
-        300: #67e8f9,
-        400: #22d3ee,
-        500: #06b6d4,
-        600: #0891b2,
-        700: #0e7490,
-        800: #155e75,
-        900: #164e63,
-        1000: #000000
-    ),
-    tailwindSky: (
-        0: #ffffff,
-        50: #f0f9ff,
-        100: #e0f2fe,
-        200: #bae6fd,
-        300: #7dd3fc,
-        400: #38bdf8,
-        500: #0ea5e9,
-        600: #0284c7,
-        700: #0369a1,
-        800: #075985,
-        900: #0c4a6e,
-        1000: #000000
-    ),
-    tailwindBlue: (
-        0: #ffffff,
-        50: #eff6ff,
-        100: #dbeafe,
-        200: #bfdbfe,
-        300: #93c5fd,
-        400: #60a5fa,
-        500: #3b82f6,
-        600: #2563eb,
-        700: #1d4ed8,
-        800: #1e40af,
-        900: #1e3a8a,
-        1000: #000000
-    ),
-    tailwindIndigo: (
-        0: #ffffff,
-        50: #eef2ff,
-        100: #e0e7ff,
-        200: #c7d2fe,
-        300: #a5b4fc,
-        400: #818cf8,
-        500: #6366f1,
-        600: #4f46e5,
-        700: #4338ca,
-        800: #3730a3,
-        900: #312e81,
-        1000: #000000
-    ),
-    tailwindViolet: (
-        0: #ffffff,
-        50: #f5f3ff,
-        100: #ede9fe,
-        200: #ddd6fe,
-        300: #c4b5fd,
-        400: #a78bfa,
-        500: #8b5cf6,
-        600: #7c3aed,
-        700: #6d28d9,
-        800: #5b21b6,
-        900: #4c1d95,
-        1000: #000000
-    ),
-    tailwindPurple: (
-        0: #ffffff,
-        50: #faf5ff,
-        100: #f3e8ff,
-        200: #e9d5ff,
-        300: #d8b4fe,
-        400: #c084fc,
-        500: #a855f7,
-        600: #9333ea,
-        700: #7e22ce,
-        800: #6b21a8,
-        900: #581c87,
-        1000: #000000
-    ),
-    tailwindFuchsia: (
-        0: #ffffff,
-        50: #fdf4ff,
-        100: #fae8ff,
-        200: #f5d0fe,
-        300: #f0abfc,
-        400: #e879f9,
-        500: #d946ef,
-        600: #c026d3,
-        700: #a21caf,
-        800: #86198f,
-        900: #701a75,
-        1000: #000000
-    ),
-    tailwindPink: (
-        0: #ffffff,
-        50: #fdf2f8,
-        100: #fce7f3,
-        200: #fbcfe8,
-        300: #f9a8d4,
-        400: #f472b6,
-        500: #ec4899,
-        600: #db2777,
-        700: #be185d,
-        800: #9d174d,
-        900: #831843,
-        1000: #000000
-    ),
-    tailwindRose: (
-        0: #ffffff,
-        50: #fff1f2,
-        100: #ffe4e6,
-        200: #fecdd3,
-        300: #fda4af,
-        400: #fb7185,
-        500: #f43f5e,
-        600: #e11d48,
-        700: #be123c,
-        800: #9f1239,
-        900: #881337,
-        1000: #000000
-    )
-
-) !default;
-
-// #endregion
-
-// #endregion
-// #region @import "./functions/index.import.scss"; -> packages/core/scss/functions/index.import.scss
-// #region @import "_color.import.scss"; -> packages/core/scss/functions/_color.import.scss
-@function k-color-alpha( $color ) {
-    @return alpha( $color );
-}
-
-@function k-color-red( $color ) {
-    @return red( $color );
-}
-
-@function k-color-green( $color ) {
-    @return green( $color );
-}
-
-@function k-color-blue( $color ) {
-    @return blue( $color );
-}
-
-@function k-color-mix( $color1, $color2, $weight: 50% ) {
-    @return mix( $color1, $color2, $weight );
-}
-
-@function k-color-darken( $color, $amount) {
-    @return darken( $color, $amount );
-}
-
-@function k-color-lighten( $color, $amount) {
-    @return lighten( $color, $amount );
-}
-
-// #endregion
-// #region @import "_color-contrast.import.scss"; -> packages/core/scss/functions/_color-contrast.import.scss
-// Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
-// Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
+// #region @import "./_color-contrast.import.scss"; -> packages/core/scss/functions/_color-contrast.import.scss
+// Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
+// Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
 
 //  Precomputed linear color channel values, for use in contrast calculations.
 //  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@@ -1407,8 +411,32 @@ $wcag-light: white !default;
     @return $max-ratio-color;
 }
 
+
+// Legacy functions
+@function k-yiq-luma-information($color) {
+    $r: k-color-red($color);
+    $g: k-color-green($color);
+    $b: k-color-blue($color);
+
+    $yiq: k-math-div( (($r * 299) + ($g * 587) + ($b * 114)), 1000 );
+
+    @return $yiq;
+}
+@function k-contrast-yiq($color, $dark: $yiq-dark, $light: $yiq-light) {
+    $yiq: k-yiq-luma-information($color);
+    $out: if($yiq >= $yiq-threshold, $dark, $light);
+    // @debug yiq;
+    @return $out;
+}
+@function k-contrast-legacy($color, $dark: $wcag-dark, $light: $wcag-light) {
+    $luma: k-color-luminance($color);
+    $out: if($luma < .5, $light, $dark);
+    // @debug $luma;
+    @return $out;
+}
+
 // #endregion
-// #region @import "_color-manipulation.import.scss"; -> packages/core/scss/functions/_color-manipulation.import.scss
+// #region @import "./_color-manipulation.import.scss"; -> packages/core/scss/functions/_color-manipulation.import.scss
 /// Set a specific jump point for requesting color jumps
 /// @group color-system
 /// @access private
@@ -1439,18 +467,18 @@ $kendo-color-level-step: 8% !default;
 }
 
 @function k-try-shade( $color, $level: 1 ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-tint( $color, $level );
     }
 
     @return k-color-shade( $color, $level );
 }
 @function k-try-tint( $color, $level: 1 ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-shade( $color, $level );
     }
 
@@ -1459,18 +487,18 @@ $kendo-color-level-step: 8% !default;
 
 
 @function k-try-darken( $color, $amount ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-lighten( $color, $amount );
     }
     @return k-color-darken( $color, $amount );
 }
 
 @function k-try-lighten( $color, $amount ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-darken( $color, $amount );
     }
     @return k-color-lighten( $color, $amount );
@@ -1488,7 +516,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "_custom-properties.import.scss"; -> packages/core/scss/functions/_custom-properties.import.scss
+// #region @import "./_custom-properties.import.scss"; -> packages/core/scss/functions/_custom-properties.import.scss
 @function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
     $_prefix: $prefix;
     $_var: $var;
@@ -1528,13 +556,57 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "_lang.import.scss"; -> packages/core/scss/functions/_lang.import.scss
+// #region @import "./_escape-string.import.scss"; -> packages/core/scss/functions/_escape-string.import.scss
+$_kendo-svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function k-escape-svg($string) {
+    @if k-string-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $_kendo-svg-escaped-characters {
+            // Do not escape the url brackets
+            @if k-string-index($string, "url(") == 1 {
+                $string: url("#{k-string-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: k-string-replace($string, $char, $encoded);
+            }
+        }
+    }
+
+    @return $string;
+}
+
+
+
+$_kendo-escape-class-name: (
+    ".": "\\.",
+    "/": "\\/"
+);
+
+@function k-escape-class-name( $text ) {
+    $_text: $text;
+
+    @each $char, $rep in $_kendo-escape-class-name {
+        $_text: k-string-replace( $_text, k-string-unquote( $char ), k-string-unquote( $rep ) );
+    }
+
+    @return $_text;
+}
+
+// #endregion
+// #region @import "./_lang.import.scss"; -> packages/core/scss/functions/_lang.import.scss
 @function k-if-var( $var, $fallback ) {
     @return if( $var != null, $var, $fallback );
 }
 
 // #endregion
-// #region @import "_list.import.scss"; -> packages/core/scss/functions/_list.import.scss
+// #region @import "./_list.import.scss"; -> packages/core/scss/functions/_list.import.scss
 @function k-list-append( $list, $val, $separator: auto ) {
     @return append( $list, $val, $separator );
 }
@@ -1594,7 +666,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "_math.import.scss"; -> packages/core/scss/functions/_math.import.scss
+// #region @import "./_math.import.scss"; -> packages/core/scss/functions/_math.import.scss
 @function k-math-abs( $number ) {
     @return abs( $number );
 }
@@ -1660,6 +732,10 @@ $kendo-color-level-step: 8% !default;
 
 }
 
+@function k-math-percentage( $number ) {
+    @return percentage( $number );
+}
+
 @function k-math-random( $limit: null ) {
     @if ( $limit == null ) {
         @return random();
@@ -1692,7 +768,7 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "_map.import.scss"; -> packages/core/scss/functions/_map.import.scss
+// #region @import "./_map.import.scss"; -> packages/core/scss/functions/_map.import.scss
 @function k-map-get( $map, $keys... ) {
     @each $key in $keys {
         $map: map-get( $map, $key );
@@ -1728,109 +804,1170 @@ $kendo-color-level-step: 8% !default;
 }
 
 // #endregion
-// #region @import "_meta.import.scss"; -> packages/core/scss/functions/_meta.import.scss
+// #region @import "./_meta.import.scss"; -> packages/core/scss/functions/_meta.import.scss
 // Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
 
-@function k-meta-type-of( $value ) {
-    @return type-of( $value );
-}
+@function k-meta-call( $function, $args... ) {
+    @return call( $function, $args... );
+}
+
+@function k-meta-function-exists( $name ) {
+    @return function-exists( $name );
+}
+
+@function k-meta-get-function( $name, $args... ) {
+    @return get-function( $name, $args... );
+}
+
+@function k-meta-inspect( $value ) {
+    @return inspect( $value );
+}
+
+@function k-meta-keywords( $args ) {
+    @return keywords( $args );
+}
+
+@function k-meta-type-of( $value ) {
+    @return type-of( $value );
+}
+
+@function k-meta-variable-exists( $name ) {
+    @return variable-exists( $name );
+}
+
+@function k-meta-is-number( $value ) {
+    @return k-meta-type-of( $value ) == "number";
+}
+
+@function k-meta-is-integer( $value ) {
+    @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
+}
+
+@function k-meta-is-time( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-duration( $value ) {
+    @return k-meta-is-time( $value );
+}
+
+@function k-meta-is-angle( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-frequency( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-relative-length( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-absolute-length( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-percentage( $value ) {
+    @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
+}
+
+@function k-meta-is-length( $value ) {
+    @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
+}
+
+@function k-meta-is-resolution( $value ) {
+    @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
+}
+
+@function k-meta-is-position( $value ) {
+    @return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
+}
+
+// #endregion
+// #region @import "./_string.import.scss"; -> packages/core/scss/functions/_string.import.scss
+@function k-string-index( $string, $substring ) {
+    @return str-index( $string, $substring );
+}
+
+@function k-string-insert( $string, $insert, $index ) {
+    @return str-insert( $string, $insert, $index );
+}
+
+@function k-string-length( $string ) {
+    @return str-length( $string );
+}
+
+@function k-string-quote( $string ) {
+    @return quote( $string );
+}
+
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function k-string-replace( $string, $search, $replace: "" ) {
+    @if k-meta-type-of( $string ) == number {
+        $string: $string + "";
+    }
+
+    $index: k-string-index( $string, $search );
+
+    @if $index {
+        @return k-string-slice( $string, 1, $index - 1 ) + $replace + k-string-replace( k-string-slice( $string, $index + k-string-length( $search ) ), $search, $replace );
+    }
+
+    @return $string;
+}
+
+@function k-string-slice( $string, $start-at, $end-at: -1 ) {
+    @return str-slice( $string, $start-at, $end-at );
+}
+
+@function k-string-to-lower-case( $string ) {
+    @return to-lower-case( $string );
+}
+
+@function k-string-to-upper-case( $string ) {
+    @return to-upper-case( $string );
+}
+
+@function k-string-unique-id() {
+    @return unique-id();
+}
+
+@function k-string-unquote( $string ) {
+    @return unquote( $string );
+}
+
+// #endregion
+
+// #endregion
+// #region @import "./color-system/index.import.scss"; -> packages/core/scss/color-system/index.import.scss
+// #region @import "./_functions.import.scss"; -> packages/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;
+
+        $result: k-map-merge($result, (
+            // sass-lint:disable-block indentation
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border,
+            #{$prefix}gradient: $gradient,
+            #{$prefix}shadow: $shadow,
+            #{$prefix}outline: $outline
+        ));
+    }
+
+    $result: (
+        #{$variant}: $result
+    );
+
+    @return $result;
+
+};
+
+
+@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
+    $result: ();
+
+    // @debug $theme-matrix;
+    // @debug $palette-matrix;
+
+    @each $variant, $definition in $theme-matrix {
+        $tc-index: k-string-index( $variant, "THEME_COLOR" );
+        $src-palette-name: k-map-get( $definition, PALETTE );
+        $matrix: k-map-remove( $definition, PALETTE );
+
+        @if ($tc-index == null ) {
+            $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 );
+                }
 
-@function k-meta-is-number( $value ) {
-    @return k-meta-type-of( $value ) == "number";
-}
+                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
+                $result: k-map-merge( $result, $tmp-result );
+            }
+        }
+    }
 
-@function k-meta-is-integer( $value ) {
-    @return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
+    @return $result;
 }
 
-@function k-meta-is-time( $value ) {
-    @return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
-}
 
-@function k-meta-is-duration( $value ) {
-    @return k-meta-is-time( $value );
+@function k-get-theme-palette( $name ) {
+    @return k-map-get( $kendo-palettes, $name );
 }
 
-@function k-meta-is-angle( $value ) {
-    @return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
-}
+@function k-get-theme-color( $palette, $hue ) {
+    @if ( k-meta-type-of( $palette ) == "map" ) {
+        @return k-map-get( $palette, $hue );
+    }
 
-@function k-meta-is-frequency( $value ) {
-    @return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
+    @return k-map-get( k-get-theme-palette( $palette ), $hue );
 }
 
-@function k-meta-is-relative-length( $value ) {
-    @return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
+@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
+    @return var( --#{$prefix}#{$name}, #{$fallback} );
 }
 
-@function k-meta-is-absolute-length( $value ) {
-    @return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
-}
+// #endregion
+// #region @import "./_mixins.import.scss"; -> packages/core/scss/color-system/_mixins.import.scss
 
-@function k-meta-is-percentage( $value ) {
-    @return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
-}
+// #endregion
+// #region @import "./_variables.scss"; -> packages/core/scss/color-system/_variables.scss
+// Color constants
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
 
-@function k-meta-is-length( $value ) {
-    @return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
-}
+$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
-@function k-meta-is-resolution( $value ) {
-    @return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
-}
+$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
-@function k-meta-is-position( $value ) {
-    @return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
-}
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
 
 // #endregion
-// #region @import "_string.import.scss"; -> packages/core/scss/functions/_string.import.scss
-@function k-string-index( $string, $substring ) {
-    @return str-index( $string, $substring );
-}
+// #region @import "./_palettes.scss"; -> packages/core/scss/color-system/_palettes.scss
+$kendo-palettes: (
 
-@function k-string-insert( $string, $insert, $index ) {
-    @return str-insert( $string, $insert, $index );
-}
+    // 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
+    ),
 
-@function k-string-length( $string ) {
-    @return str-length( $string );
-}
 
-@function k-string-quote( $string ) {
-    @return quote( $string );
-}
+    // 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
+    ),
 
-// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
-@function k-string-replace( $string, $search, $replace: "" ) {
-    $index: k-string-index( $string, $search );
 
-    @if $index {
-        @return k-string-slice( $string, 1, $index - 1 ) + $replace + k-string-replace( k-string-slice( $string, $index + k-string-length( $search ) ), $search, $replace );
-    }
+    // 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
+    ),
+
 
-    @return $string;
-}
+    // 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,
+        400: #ab47bc,
+        500: #9c27b0,
+        600: #8e24aa,
+        700: #7b1fa2,
+        800: #6a1b9a,
+        900: #4a148c,
+        1000: #000000
+    ),
+    materialDeepPurple: (
+        0: #ffffff,
+        50: #ede7f6,
+        100: #d1c4e9,
+        200: #b39ddb,
+        300: #9575cd,
+        400: #7e57c2,
+        500: #673ab7,
+        600: #5e35b1,
+        700: #512da8,
+        800: #4527a0,
+        900: #311b92,
+        1000: #000000
+    ),
+    materialIndigo: (
+        0: #ffffff,
+        50: #e8eaf6,
+        100: #c5cae9,
+        200: #9fa8da,
+        300: #7986cb,
+        400: #5c6bc0,
+        500: #3f51b5,
+        600: #3949ab,
+        700: #303f9f,
+        800: #283593,
+        900: #1a237e,
+        1000: #000000
+    ),
+    materialBlue: (
+        0: #ffffff,
+        50: #e3f2fd,
+        100: #bbdefb,
+        200: #90caf9,
+        300: #64b5f6,
+        400: #42a5f5,
+        500: #2196f3,
+        600: #1e88e5,
+        700: #1976d2,
+        800: #1565c0,
+        900: #0d47a1,
+        1000: #000000
+    ),
+    materialLightBlue: (
+        0: #ffffff,
+        50: #e1f5fe,
+        100: #b3e5fc,
+        200: #81d4fa,
+        300: #4fc3f7,
+        400: #29b6f6,
+        500: #03a9f4,
+        600: #039be5,
+        700: #0288d1,
+        800: #0277bd,
+        900: #01579b,
+        1000: #000000
+    ),
+    materialCyan: (
+        0: #ffffff,
+        50: #e0f7fa,
+        100: #b2ebf2,
+        200: #80deea,
+        300: #4dd0e1,
+        400: #26c6da,
+        500: #00bcd4,
+        600: #00acc1,
+        700: #0097a7,
+        800: #00838f,
+        900: #006064,
+        1000: #000000
+    ),
+    materialTeal: (
+        0: #ffffff,
+        50: #e0f2f1,
+        100: #b2dfdb,
+        200: #80cbc4,
+        300: #4db6ac,
+        400: #26a69a,
+        500: #009688,
+        600: #00897b,
+        700: #00796b,
+        800: #00695c,
+        900: #004d40,
+        1000: #000000
+    ),
+    materialGreen: (
+        0: #ffffff,
+        50: #e8f5e9,
+        100: #c8e6c9,
+        200: #a5d6a7,
+        300: #81c784,
+        400: #66bb6a,
+        500: #4caf50,
+        600: #43a047,
+        700: #388e3c,
+        800: #2e7d32,
+        900: #1b5e20,
+        1000: #000000
+    ),
+    materialLightGreen: (
+        0: #ffffff,
+        50: #f1f8e9,
+        100: #dcedc8,
+        200: #c5e1a5,
+        300: #aed581,
+        400: #9ccc65,
+        500: #8bc34a,
+        600: #7cb342,
+        700: #689f38,
+        800: #558b2f,
+        900: #33691e,
+        1000: #000000
+    ),
+    materialLime: (
+        0: #ffffff,
+        50: #f9fbe7,
+        100: #f0f4c3,
+        200: #e6ee9c,
+        300: #dce775,
+        400: #d4e157,
+        500: #cddc39,
+        600: #c0ca33,
+        700: #afb42b,
+        800: #9e9d24,
+        900: #827717,
+        1000: #000000
+    ),
+    materialYellow: (
+        0: #ffffff,
+        50: #fffde7,
+        100: #fff9c4,
+        200: #fff59d,
+        300: #fff176,
+        400: #ffee58,
+        500: #ffeb3b,
+        600: #fdd835,
+        700: #fbc02d,
+        800: #f9a825,
+        900: #f57f17,
+        1000: #000000
+    ),
+    materialAmber: (
+        0: #ffffff,
+        50: #fff8e1,
+        100: #ffecb3,
+        200: #ffe082,
+        300: #ffd54f,
+        400: #ffca28,
+        500: #ffc107,
+        600: #ffb300,
+        700: #ffa000,
+        800: #ff8f00,
+        900: #ff6f00,
+        1000: #000000
+    ),
+    materialOrange: (
+        0: #ffffff,
+        50: #fff3e0,
+        100: #ffe0b2,
+        200: #ffcc80,
+        300: #ffb74d,
+        400: #ffa726,
+        500: #ff9800,
+        600: #fb8c00,
+        700: #f57c00,
+        800: #ef6c00,
+        900: #e65100,
+        1000: #000000
+    ),
+    materialDeepOrange: (
+        0: #ffffff,
+        50: #fbe9e7,
+        100: #ffccbc,
+        200: #ffab91,
+        300: #ff8a65,
+        400: #ff7043,
+        500: #ff5722,
+        600: #f4511e,
+        700: #e64a19,
+        800: #d84315,
+        900: #bf360c,
+        1000: #000000
+    ),
+    materialBrown: (
+        0: #ffffff,
+        50: #efebe9,
+        100: #d7ccc8,
+        200: #bcaaa4,
+        300: #a1887f,
+        400: #8d6e63,
+        500: #795548,
+        600: #6d4c41,
+        700: #5d4037,
+        800: #4e342e,
+        900: #3e2723,
+        1000: #000000
+    ),
 
-@function k-string-slice( $string, $start-at, $end-at: -1 ) {
-    @return str-slice( $string, $start-at, $end-at );
-}
 
-@function k-string-to-lower-case( $string ) {
-    @return to-lower-case( $string );
-}
+    // Primer
+    primerGray: (
+        0: #ffffff,
+        50: #f6f8fa,
+        100: #eaeef2,
+        200: #d0d7de,
+        300: #afb8c1,
+        400: #8c959f,
+        500: #6e7781,
+        600: #57606a,
+        700: #424a53,
+        800: #32383f,
+        900: #24292f,
+        1000: #000000
+    ),
+    primerBlue: (
+        0: #ffffff,
+        50: #ddf4ff,
+        100: #b6e3ff,
+        200: #80ccff,
+        300: #54aeff,
+        400: #218bff,
+        500: #0969da,
+        600: #0550ae,
+        700: #033d8b,
+        800: #0a3069,
+        900: #002155,
+        1000: #000000
+    ),
+    primerGreen: (
+        0: #ffffff,
+        50: #dafbe1,
+        100: #aceebb,
+        200: #6fdd8b,
+        300: #4ac26b,
+        400: #2da44e,
+        500: #1a7f37,
+        600: #116329,
+        700: #044f1e,
+        800: #003d16,
+        900: #002d11,
+        1000: #000000
+    ),
+    primerYellow: (
+        0: #ffffff,
+        50: #fff8c5,
+        100: #fae17d,
+        200: #eac54f,
+        300: #d4a72c,
+        400: #bf8700,
+        500: #9a6700,
+        600: #7d4e00,
+        700: #633c01,
+        800: #4d2d00,
+        900: #3b2300,
+        1000: #000000
+    ),
+    primerOrange: (
+        0: #ffffff,
+        50: #fff1e5,
+        100: #ffd8b5,
+        200: #ffb77c,
+        300: #fb8f44,
+        400: #e16f24,
+        500: #bc4c00,
+        600: #953800,
+        700: #762c00,
+        800: #5c2200,
+        900: #471700,
+        1000: #000000
+    ),
+    primerRed: (
+        0: #ffffff,
+        50: #ffebe9,
+        100: #ffcecb,
+        200: #ffaba8,
+        300: #ff8182,
+        400: #fa4549,
+        500: #cf222e,
+        600: #a40e26,
+        700: #82071e,
+        800: #660018,
+        900: #4c0014,
+        1000: #000000
+    ),
+    primerPurple: (
+        0: #ffffff,
+        50: #fbefff,
+        100: #ecd8ff,
+        200: #d8b9ff,
+        300: #c297ff,
+        400: #a475f9,
+        500: #8250df,
+        600: #6639ba,
+        700: #512a97,
+        800: #3e1f79,
+        900: #2e1461,
+        1000: #000000
+    ),
+    primerPink: (
+        0: #ffffff,
+        50: #ffeff7,
+        100: #ffd3eb,
+        200: #ffadda,
+        300: #ff80c8,
+        400: #e85aad,
+        500: #bf3989,
+        600: #99286e,
+        700: #772057,
+        800: #611347,
+        900: #4d0336,
+        1000: #000000
+    ),
+    primerCoral: (
+        0: #ffffff,
+        50: #fff0eb,
+        100: #ffd6cc,
+        200: #ffb4a1,
+        300: #fd8c73,
+        400: #ec6547,
+        500: #c4432b,
+        600: #9e2f1c,
+        700: #801f0f,
+        800: #691105,
+        900: #510901,
+        1000: #000000
+    ),
 
-@function k-string-to-upper-case( $string ) {
-    @return to-upper-case( $string );
-}
 
-@function k-string-unique-id() {
-    @return unique-id();
-}
+    // Tailwind
+    tailwindNeutral: (
+        0: #ffffff,
+        50: #fafafa,
+        100: #f5f5f5,
+        200: #e5e5e5,
+        300: #d4d4d4,
+        400: #a3a3a3,
+        500: #737373,
+        600: #525252,
+        700: #404040,
+        800: #262626,
+        900: #171717,
+        1000: #000000
+    ),
+    tailwindSlate: (
+        0: #ffffff,
+        50: #f8fafc,
+        100: #f1f5f9,
+        200: #e2e8f0,
+        300: #cbd5e1,
+        400: #94a3b8,
+        500: #64748b,
+        600: #475569,
+        700: #334155,
+        800: #1e293b,
+        900: #0f172a,
+        1000: #000000
+    ),
+    tailwindGray: (
+        0: #ffffff,
+        50: #f9fafb,
+        100: #f3f4f6,
+        200: #e5e7eb,
+        300: #d1d5db,
+        400: #9ca3af,
+        500: #6b7280,
+        600: #4b5563,
+        700: #374151,
+        800: #1f2937,
+        900: #111827,
+        1000: #000000
+    ),
+    tailwindZinc: (
+        0: #ffffff,
+        50: #fafafa,
+        100: #f4f4f5,
+        200: #e4e4e7,
+        300: #d4d4d8,
+        400: #a1a1aa,
+        500: #71717a,
+        600: #52525b,
+        700: #3f3f46,
+        800: #27272a,
+        900: #18181b,
+        1000: #000000
+    ),
+    tailwindStone: (
+        0: #ffffff,
+        50: #fafaf9,
+        100: #f5f5f4,
+        200: #e7e5e4,
+        300: #d6d3d1,
+        400: #a8a29e,
+        500: #78716c,
+        600: #57534e,
+        700: #44403c,
+        800: #292524,
+        900: #1c1917,
+        1000: #000000
+    ),
+    tailwindRed: (
+        0: #ffffff,
+        50: #fef2f2,
+        100: #fee2e2,
+        200: #fecaca,
+        300: #fca5a5,
+        400: #f87171,
+        500: #ef4444,
+        600: #dc2626,
+        700: #b91c1c,
+        800: #991b1b,
+        900: #7f1d1d,
+        1000: #000000
+    ),
+    tailwindOrange: (
+        0: #ffffff,
+        50: #fff7ed,
+        100: #ffedd5,
+        200: #fed7aa,
+        300: #fdba74,
+        400: #fb923c,
+        500: #f97316,
+        600: #ea580c,
+        700: #c2410c,
+        800: #9a3412,
+        900: #7c2d12,
+        1000: #000000
+    ),
+    tailwindAmber: (
+        0: #ffffff,
+        50: #fffbeb,
+        100: #fef3c7,
+        200: #fde68a,
+        300: #fcd34d,
+        400: #fbbf24,
+        500: #f59e0b,
+        600: #d97706,
+        700: #b45309,
+        800: #92400e,
+        900: #78350f,
+        1000: #000000
+    ),
+    tailwindYellow: (
+        0: #ffffff,
+        50: #fefce8,
+        100: #fef9c3,
+        200: #fef08a,
+        300: #fde047,
+        400: #facc15,
+        500: #eab308,
+        600: #ca8a04,
+        700: #a16207,
+        800: #854d0e,
+        900: #713f12,
+        1000: #000000
+    ),
+    tailwindLime: (
+        0: #ffffff,
+        50: #f7fee7,
+        100: #ecfccb,
+        200: #d9f99d,
+        300: #bef264,
+        400: #a3e635,
+        500: #84cc16,
+        600: #65a30d,
+        700: #4d7c0f,
+        800: #3f6212,
+        900: #365314,
+        1000: #000000
+    ),
+    tailwindGreen: (
+        0: #ffffff,
+        50: #f0fdf4,
+        100: #dcfce7,
+        200: #bbf7d0,
+        300: #86efac,
+        400: #4ade80,
+        500: #22c55e,
+        600: #16a34a,
+        700: #15803d,
+        800: #166534,
+        900: #14532d,
+        1000: #000000
+    ),
+    tailwindEmerald: (
+        0: #ffffff,
+        50: #ecfdf5,
+        100: #d1fae5,
+        200: #a7f3d0,
+        300: #6ee7b7,
+        400: #34d399,
+        500: #10b981,
+        600: #059669,
+        700: #047857,
+        800: #065f46,
+        900: #064e3b,
+        1000: #000000
+    ),
+    tailwindTeal: (
+        0: #ffffff,
+        50: #f0fdfa,
+        100: #ccfbf1,
+        200: #99f6e4,
+        300: #5eead4,
+        400: #2dd4bf,
+        500: #14b8a6,
+        600: #0d9488,
+        700: #0f766e,
+        800: #115e59,
+        900: #134e4a,
+        1000: #000000
+    ),
+    tailwindCyan: (
+        0: #ffffff,
+        50: #ecfeff,
+        100: #cffafe,
+        200: #a5f3fc,
+        300: #67e8f9,
+        400: #22d3ee,
+        500: #06b6d4,
+        600: #0891b2,
+        700: #0e7490,
+        800: #155e75,
+        900: #164e63,
+        1000: #000000
+    ),
+    tailwindSky: (
+        0: #ffffff,
+        50: #f0f9ff,
+        100: #e0f2fe,
+        200: #bae6fd,
+        300: #7dd3fc,
+        400: #38bdf8,
+        500: #0ea5e9,
+        600: #0284c7,
+        700: #0369a1,
+        800: #075985,
+        900: #0c4a6e,
+        1000: #000000
+    ),
+    tailwindBlue: (
+        0: #ffffff,
+        50: #eff6ff,
+        100: #dbeafe,
+        200: #bfdbfe,
+        300: #93c5fd,
+        400: #60a5fa,
+        500: #3b82f6,
+        600: #2563eb,
+        700: #1d4ed8,
+        800: #1e40af,
+        900: #1e3a8a,
+        1000: #000000
+    ),
+    tailwindIndigo: (
+        0: #ffffff,
+        50: #eef2ff,
+        100: #e0e7ff,
+        200: #c7d2fe,
+        300: #a5b4fc,
+        400: #818cf8,
+        500: #6366f1,
+        600: #4f46e5,
+        700: #4338ca,
+        800: #3730a3,
+        900: #312e81,
+        1000: #000000
+    ),
+    tailwindViolet: (
+        0: #ffffff,
+        50: #f5f3ff,
+        100: #ede9fe,
+        200: #ddd6fe,
+        300: #c4b5fd,
+        400: #a78bfa,
+        500: #8b5cf6,
+        600: #7c3aed,
+        700: #6d28d9,
+        800: #5b21b6,
+        900: #4c1d95,
+        1000: #000000
+    ),
+    tailwindPurple: (
+        0: #ffffff,
+        50: #faf5ff,
+        100: #f3e8ff,
+        200: #e9d5ff,
+        300: #d8b4fe,
+        400: #c084fc,
+        500: #a855f7,
+        600: #9333ea,
+        700: #7e22ce,
+        800: #6b21a8,
+        900: #581c87,
+        1000: #000000
+    ),
+    tailwindFuchsia: (
+        0: #ffffff,
+        50: #fdf4ff,
+        100: #fae8ff,
+        200: #f5d0fe,
+        300: #f0abfc,
+        400: #e879f9,
+        500: #d946ef,
+        600: #c026d3,
+        700: #a21caf,
+        800: #86198f,
+        900: #701a75,
+        1000: #000000
+    ),
+    tailwindPink: (
+        0: #ffffff,
+        50: #fdf2f8,
+        100: #fce7f3,
+        200: #fbcfe8,
+        300: #f9a8d4,
+        400: #f472b6,
+        500: #ec4899,
+        600: #db2777,
+        700: #be185d,
+        800: #9d174d,
+        900: #831843,
+        1000: #000000
+    ),
+    tailwindRose: (
+        0: #ffffff,
+        50: #fff1f2,
+        100: #ffe4e6,
+        200: #fecdd3,
+        300: #fda4af,
+        400: #fb7185,
+        500: #f43f5e,
+        600: #e11d48,
+        700: #be123c,
+        800: #9f1239,
+        900: #881337,
+        1000: #000000
+    )
 
-@function k-string-unquote( $string ) {
-    @return unquote( $string );
-}
+) !default;
 
 // #endregion
 
@@ -1839,59 +1976,59 @@ $kendo-color-level-step: 8% !default;
 // #region @import "./_border-radius.scss"; -> packages/core/scss/mixins/_border-radius.scss
 // Border radius
 @mixin border-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius;
     }
 }
 
 @mixin border-top-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-left-radius: $radius;
         border-top-right-radius: $radius;
     }
 }
 
 @mixin border-right-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-right-radius: $radius;
         border-bottom-right-radius: $radius;
     }
 }
 
 @mixin border-bottom-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-bottom-right-radius: $radius;
         border-bottom-left-radius: $radius;
     }
 }
 
 @mixin border-left-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-left-radius: $radius;
         border-bottom-left-radius: $radius;
     }
 }
 
 @mixin border-top-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius $radius 0 0;
     }
 }
 
 @mixin border-right-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: 0 $radius $radius 0;
     }
 }
 
 @mixin border-bottom-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: 0 0 $radius $radius;
     }
 }
 
 @mixin border-left-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius 0 0 $radius;
     }
 }
@@ -1899,7 +2036,7 @@ $kendo-color-level-step: 8% !default;
 // #endregion
 // #region @import "./_box-shadow.scss"; -> packages/core/scss/mixins/_box-shadow.scss
 @mixin box-shadow( $shadow... ) {
-    @if $enable-shadows and nth($shadow, 1) {
+    @if $kendo-enable-shadows and k-list-nth($shadow, 1) {
         box-shadow: $shadow;
     }
 }
@@ -1926,29 +2063,30 @@ $data-uris: () !default;
 
 // #endregion
 // #region @import "./_disabled.scss"; -> packages/core/scss/mixins/_disabled.scss
-$disabled-styling: () !default;
-
 // Disabled
-@mixin disabled( $disabled-styling ) {
+@mixin disabled( $kendo-disabled-styling ) {
     outline: none;
     cursor: default;
-    opacity: k-map-get($disabled-styling, opacity);
-    filter: k-map-get($disabled-styling, filter);
+    opacity: k-map-get($kendo-disabled-styling, opacity);
+    filter: k-map-get($kendo-disabled-styling, filter);
     pointer-events: none;
     box-shadow: none;
 }
 
-@mixin disabled-legacy-ie( $disabled-styling ) {
-    outline: none;
-    cursor: default;
-    opacity: k-map-get($disabled-styling, opacity);
-    box-shadow: none;
+// #endregion
+// #region @import "./_focus-indicator.scss"; -> packages/core/scss/mixins/_focus-indicator.scss
+@mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
+    @if $kendo-enable-focus-contrast and k-list-nth($indicator, 1) {
+        @include box-shadow( if( $inset, inset, null ) 0 0 0 2px if( $themeable, currentColor, rgb( 0, 0, 0 ) ) );
+    } @else {
+        @include box-shadow( $indicator... );
+    }
 }
 
 // #endregion
 // #region @import "./_gradient.scss"; -> packages/core/scss/mixins/_gradient.scss
 @mixin linear-gradient( $gradient: null ) {
-    @if $gradient and $enable-gradients {
+    @if $gradient and $kendo-enable-gradients {
         @if $gradient == none {
             background-image: none;
         } @else {
@@ -2712,7 +2850,7 @@ $_imported: ();
 
 @mixin verify-dependencies() {
     @each $component in $kendo-components {
-        @if (k-map-has-key( $_kendo-dependencies, $component) == false) {
+        @if (k-map-has-key( $_kendo-dependencies, $component ) == false) {
             // sass-lint:disable-block no-warn
             @error "Module '#{$component}' is not defined.";
         }
@@ -2723,8 +2861,8 @@ $_imported: ();
 // #endregion
 // #region @import "./styles/index.import.scss"; -> packages/core/scss/styles/index.import.scss
 // #region @import "./_accessibility.scss"; -> packages/core/scss/styles/_accessibility.scss
-/// @name k-sr-only
-/// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// @name .k-sr-only
 /// @group accessibility
 .k-sr-only {
     position: absolute;
@@ -2752,9 +2890,37 @@ $_imported: ();
     display: flex;
     flex-flow: column nowrap;
 }
+
+// Spacer
 .k-spacer {
+    flex: 1 1 auto;
+}
+.k-spacer-sized {
     flex: none;
-    flex-grow: 1;
+}
+
+
+// Float wrap
+.k-float-wrap::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+
+// Stack layout
+.k-stack-layout {}
+
+
+// Flex layout
+.k-flex-layout {
+    display: flex;
+}
+
+
+// Grid layout
+.k-grid-layout {
+    display: grid;
 }
 
 
@@ -2800,6 +2966,13 @@ hr.k-separator {
     direction: rtl;
 }
 
+
+// Legacy aliases
+.k-hbox { @extend .k-hstack !optional; }
+.k-vbox { @extend .k-vstack !optional; }
+.k-floatwrap { @extend .k-float-wrap !optional; }
+.k-flex { @extend .k-spacer !optional; }
+
 // #endregion
 // #region @import "./_normalize.scss"; -> packages/core/scss/styles/_normalize.scss
 // Hidden attribute
@@ -2816,6 +2989,9 @@ script {
 
 // #endregion
 
+// #endregion
+// #region @import "./_variables.scss"; -> packages/core/scss/_variables.scss
+// File already imported_once. Skipping output.
 // #endregion
 
 // #endregion