@progress/kendo-theme-utils 7.2.2-dev.0 → 7.3.0-dev.1

package/dist/all.scss

@@ -707,27 +707,129 @@ $kendo-color-level-step: 8% !default;
     @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
 }
 
+// #endregion
+// #region @import "./_color-variations.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color-variations.import.scss
 /// Generates all color variations of a given main color
 /// @param {String} $name - The name of the main color
-/// @param {Color} $level - The color value to be assigned to the main color
+/// @param {Color} $color - The color value to be assigned to the main color
+/// @param {String} $theme - The theme the colors will be generated for
 /// @return {Map} - A map with the generated keys and values
 ///
 /// @group color-system
-@function k-generate-colors( $name, $color ) {
-    $_variations: (
-        #{$name}-subtle: k-try-tint( $color, 80% ),
-        #{$name}-subtle-hover: k-try-tint( $color, 65% ),
-        #{$name}-subtle-active: k-try-tint( $color, 50% ),
-        #{$name}: $color,
-        #{$name}-hover: k-try-shade( $color, 0.5 ),
-        #{$name}-active: k-try-shade( $color, 1.5 ),
-        #{$name}-emphasis: k-try-tint( $color, 4.5 ),
-        #{$name}-on-subtle: k-try-shade( $color, 8 ),
-        on-#{$name}: k-contrast-legacy( $color ),
-        #{$name}-on-surface: $color,
-    );
-    
-    @return $_variations;
+@function k-generate-color-variations( $name, $color, $theme: null ) {
+    $result: ();
+
+    // DataViz
+    @if ( 
+            $name == 'series-a' or
+            $name == 'series-b' or
+            $name == 'series-c' or
+            $name == 'series-d' or
+            $name == 'series-e' or
+            $name == 'series-f'
+        ) {
+        $_variations: (
+            #{$name}: $color,
+            #{$name}-bold: k-color-mix(black, $color, 25%),
+            #{$name}-bolder: k-color-mix(black, $color, 50%),
+            #{$name}-subtle: k-color-mix(white, $color, 25%),
+            #{$name}-subtler: k-color-mix(white, $color, 50%),
+        );
+
+        $result: k-map-merge($result, $_variations);
+    } @else {
+        // Default
+        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 0.5 ),
+                #{$name}-active: k-try-shade( $color, 1.5 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Bootstrap
+        @if ( $theme == 'bootstrap' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-color-darken( $color, 7.5% ),
+                #{$name}-active: k-color-darken( $color, 10% ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-color( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Material
+        @if ( $theme == 'material' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 0.5 ),
+                #{$name}-active: k-try-shade( $color, 1.5 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Fluent
+        @if ( $theme == 'fluent' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 0.5 ),
+                #{$name}-active: k-try-shade( $color, 1.5 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Classic
+        @if ( $theme == 'classic' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 1 ),
+                #{$name}-active: k-try-shade( $color, 2 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+    }
+
+    @return $result;
 }
 // #endregion
 // #region @import "./_custom-properties.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
@@ -1748,13 +1850,1573 @@ $svg-escaped-characters: (
 
 // #endregion
 // #region @import "./_variables.scss"; -> scss/_variables.scss
+// #region @import "@progress/kendo-theme-core/scss/color-system/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
+// #region @import "./_functions.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
+// #region @import "./_palettes.scss"; -> /home/runner/work/kendo-themes/kendo-themes/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,
+        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
+
+@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
+    $result: ();
+
+    @each $ui-state, $indices in $matrix {
+        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
+        $indices-count: k-list-length( $indices );
+
+        $bg-prop: k-list-nth( $indices, 1 );
+        $text-prop: k-list-nth( $indices, 2 );
+        $border-prop: k-list-nth( $indices, 3 );
+        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
+        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
+        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );
+
+        // Take value from the palette only if it is a number
+        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
+        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
+        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
+        $gradient: $gradient-prop;
+        $shadow: $shadow-prop;
+        $outline: $outline-prop;
+
+        $result: k-map-merge($result, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border,
+            #{$prefix}gradient: $gradient,
+            #{$prefix}shadow: $shadow,
+            #{$prefix}outline: $outline
+        ));
+    }
+
+    $result: (
+        #{$variant}: $result
+    );
+
+    @return $result;
+
+};
+
+
+@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
+    $result: ();
+
+    // @debug $theme-matrix;
+    // @debug $palette-matrix;
+
+    @each $variant, $definition in $theme-matrix {
+        $tc-index: k-string-index( $variant, "THEME_COLOR" );
+        $src-palette-name: k-map-get( $definition, PALETTE );
+        $matrix: k-map-remove( $definition, PALETTE );
+
+        @if ($tc-index == null ) { // stylelint-disable-line
+            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
+            $result: k-map-merge( $result, $tmp-result);
+        } @else {
+            @each $color, $palette in $palette-matrix {
+                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
+                $palette-name: k-string-unquote($src-palette-name + "");
+
+                @if ($palette-name == THEME_COLOR) {
+                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
+                    $palette-name: k-map-get( $palette-matrix, $palette-name );
+                }
+
+                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
+                $result: k-map-merge( $result, $tmp-result );
+            }
+        }
+    }
+
+    @return $result;
+}
+
+
+@function k-get-theme-palette( $name ) {
+    @return k-map-get( $kendo-palettes, $name );
+}
+
+@function k-get-theme-color( $palette, $hue ) {
+    @if ( k-meta-type-of( $palette ) == "map" ) {
+        @return k-map-get( $palette, $hue );
+    }
+
+    @return k-map-get( k-get-theme-palette( $palette ), $hue );
+}
+
+@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
+    @return var( --#{$prefix}#{$name}, #{$fallback} );
+}
+
+@function k-get-swatch-color( $name, $color ) {
+    $map: (
+        app-surface: k-color( app-surface ),
+        on-app-surface: k-color( on-app-surface ),
+        subtle: k-color( subtle ),
+        surface: k-color( surface ),
+        surface-alt: k-color( surface-alt ),
+        border: k-color( border ),
+        border-alt: k-color( border-alt ),
+        color-subtle: k-color( #{$color}-subtle ),
+        color-subtle-hover: k-color( #{$color}-subtle-hover ),
+        color-subtle-active: k-color( #{$color}-subtle-active ),
+        color: k-color( #{$color} ),
+        color-hover: k-color( #{$color}-hover ),
+        color-active: k-color( #{$color}-active ),
+        color-emphasis: k-color( #{$color}-emphasis ),
+        color-on-subtle: k-color( #{$color}-on-subtle ),
+        on-color: k-color( on-#{$color} ),
+        color-on-surface: k-color( #{$color}-on-surface ),
+        on-color-disabled: color-mix(in srgb, k-color( on-#{$color} ) 46%, transparent)
+    );
+
+    @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
+};
+
+@function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
+    $temp: ( );
+
+    @each $ui-state, $indices in $mapping {
+        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
+
+        $bg-prop: k-list-nth($indices, 1);
+        $text-prop: k-list-nth($indices, 2);
+        $border-prop: k-list-nth($indices, 3);
+
+        // Take value from the palette only if it is a number
+        $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop ));
+        $text: if($kendo-enable-color-system, k-get-swatch-color( $text-prop, $source-palette-name ), if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop ));
+        $border: if($kendo-enable-color-system, k-get-swatch-color( $border-prop, $source-palette-name ), if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));
+
+
+        $temp: k-map-deep-merge( $temp, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border
+        ));
+
+        // Add outline if provided in the map
+        @if ( k-list-length($indices) > 3 ) {
+            $outline-prop: k-list-nth($indices, 4);
+            $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop ));
+
+            $temp: k-map-deep-merge( $temp, (
+                #{$prefix}outline: $outline
+            ));
+        }
+    }
+
+    $map: (
+        #{$theme-color}: $temp
+    );
+
+    @return $map;
+
+};
+
+@function k-generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
+
+    $map: k-generate-theme-variation( $theme-color, $source-palette-name, $mapping );
+
+    $result: (
+       #{$fill-mode}: $map
+    );
+
+    @return $result;
+}
+
+@function k-hex-to-rgb( $color ) {
+    @if($color) {
+        $r: k-color-red($color);
+        $g: k-color-green($color);
+        $b: k-color-blue($color);
+
+        @return $r, $g, $b;
+    } @else {
+        @return null;
+    }
+}
+
+// #endregion
+// #region @import "./_mixins.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
+@mixin k-css-vars($map) {
+    @each $group, $values in $map {
+        @each $key, $value in $values {
+            --kendo-#{k-meta-inspect($group)}-#{$key}: #{$value};
+        }
+    }
+}
+
+// #endregion
+// #region @import "./_swatch.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch.scss
+// #region @import "./_functions.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+// Config
+$kendo-enable-color-system: false !default;
+
+// Colors
+$_default-colors: (
+    // Misc
+    app-surface: null,
+    on-app-surface: null,
+    subtle: null,
+    surface: null,
+    surface-alt: null,
+    border: null,
+    border-alt: null,
+    // Base
+    base-subtle: null,
+    base-subtle-hover: null,
+    base-subtle-active: null,
+    base: null,
+    base-hover: null,
+    base-active: null,
+    base-emphasis: null,
+    base-on-subtle: null,
+    on-base: null,
+    base-on-surface: null,
+    // Primary
+    primary-subtle: null,
+    primary-subtle-hover: null,
+    primary-subtle-active: null,
+    primary: null,
+    primary-hover: null,
+    primary-active: null,
+    primary-emphasis: null,
+    primary-on-subtle: null,
+    on-primary: null,
+    primary-on-surface: null,
+    // Secondary
+    secondary-subtle: null,
+    secondary-subtle-hover: null,
+    secondary-subtle-active: null,
+    secondary: null,
+    secondary-hover: null,
+    secondary-active: null,
+    secondary-emphasis: null,
+    secondary-on-subtle: null,
+    on-secondary: null,
+    secondary-on-surface: null,
+    // Tertiary
+    tertiary-subtle: null,
+    tertiary-subtle-hover: null,
+    tertiary-subtle-active: null,
+    tertiary: null,
+    tertiary-hover: null,
+    tertiary-active: null,
+    tertiary-emphasis: null,
+    tertiary-on-subtle: null,
+    on-tertiary: null,
+    tertiary-on-surface: null,
+    // Info
+    info-subtle: null,
+    info-subtle-hover: null,
+    info-subtle-active: null,
+    info: null,
+    info-hover: null,
+    info-active: null,
+    info-emphasis: null,
+    info-on-subtle: null,
+    on-info: null,
+    info-on-surface: null,
+    // Success
+    success-subtle: null,
+    success-subtle-hover: null,
+    success-subtle-active: null,
+    success: null,
+    success-hover: null,
+    success-active: null,
+    success-emphasis: null,
+    success-on-subtle: null,
+    on-success: null,
+    success-on-surface: null,
+    // Warning
+    warning-subtle: null,
+    warning-subtle-hover: null,
+    warning-subtle-active: null,
+    warning: null,
+    warning-hover: null,
+    warning-active: null,
+    warning-emphasis: null,
+    warning-on-subtle: null,
+    on-warning: null,
+    warning-on-surface: null,
+    // Error
+    error-subtle: null,
+    error-subtle-hover: null,
+    error-subtle-active: null,
+    error: null,
+    error-hover: null,
+    error-active: null,
+    error-emphasis: null,
+    error-on-subtle: null,
+    on-error: null,
+    error-on-surface: null,
+    // Light
+    light-subtle: null,
+    light-subtle-hover: null,
+    light-subtle-active: null,
+    light: null,
+    light-hover: null,
+    light-active: null,
+    light-emphasis: null,
+    light-on-subtle: null,
+    on-light: null,
+    light-on-surface: null,
+    // Dark
+    dark-subtle: null,
+    dark-subtle-hover: null,
+    dark-subtle-active: null,
+    dark: null,
+    dark-hover: null,
+    dark-active: null,
+    dark-emphasis: null,
+    dark-on-subtle: null,
+    on-dark: null,
+    dark-on-surface: null,
+    // Inverse
+    inverse-subtle: null,
+    inverse-subtle-hover: null,
+    inverse-subtle-active: null,
+    inverse: null,
+    inverse-hover: null,
+    inverse-active: null,
+    inverse-emphasis: null,
+    inverse-on-subtle: null,
+    on-inverse: null,
+    inverse-on-surface: null,
+    // Series A
+    series-a: null,
+    series-a-bold: null,
+    series-a-bolder: null,
+    series-a-subtle: null,
+    series-a-subtler: null,
+    // Series B
+    series-b: null,
+    series-b-bold: null,
+    series-b-bolder: null,
+    series-b-subtle: null,
+    series-b-subtler: null,
+    // Series C
+    series-c: null,
+    series-c-bold: null,
+    series-c-bolder: null,
+    series-c-subtle: null,
+    series-c-subtler: null,
+    // Series D
+    series-d: null,
+    series-d-bold: null,
+    series-d-bolder: null,
+    series-d-subtle: null,
+    series-d-subtler: null,
+    // Series Е
+    series-e: null,
+    series-e-bold: null,
+    series-e-bolder: null,
+    series-e-subtle: null,
+    series-e-subtler: null,
+    // Series F
+    series-f: null,
+    series-f-bold: null,
+    series-f-bolder: null,
+    series-f-subtle: null,
+    series-f-subtler: null,
+) !default;
+
+/// The global default Colors map.
+/// @group color-system
+$kendo-colors: $_default-colors !default;
+$kendo-colors: k-map-merge($_default-colors, $kendo-colors);
+
+@function k-color($key) {
+    $_color: k-map-get($kendo-colors, $key);
+
+    @if ($_color) {
+        @return var(--kendo-color-#{$key}, $_color);
+    } @else {
+        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
+    }
+}
+
+@mixin color-system--styles() {
+    :root {
+        @each $key, $value in $kendo-colors {
+            @if($value) {
+                --kendo-color-#{$key}: #{$value};
+            }
+        }
+    }
+}
+
+// #endregion
+// #region @import "./_constants.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_constants.scss
+// Color constants
+
+/// The color white.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color black.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color transparent.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-rgba-transparent: rgba(0, 0, 0, 0); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to black.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-black: rgba(black, 0), black; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to white.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-white: rgba(white, 0), white; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from black to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-black-to-transparent: black, rgba(black, 0); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from white to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-white-to-transparent: white, rgba(white, 0); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that cycles through the colors of the rainbow.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+
+// #endregion
+// #region @import "./_swatch-legacy.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss
+$kendo-is-dark-theme: false !default;
+
+// Root styles
+$kendo-body-bg: null !default;
+$kendo-body-text: null !default;
+
+// Component styles
+$kendo-component-bg: null !default;
+$kendo-component-text: null !default;
+$kendo-component-border: null !default;
+
+// States styles
+$kendo-hover-bg: null !default;
+$kendo-hover-text: null !default;
+$kendo-hover-border: null !default;
+
+$kendo-selected-bg: null !default;
+$kendo-selected-text: null !default;
+$kendo-selected-border: null !default;
+
+$kendo-selected-hover-bg: null !default;
+$kendo-selected-hover-text: null !default;
+$kendo-selected-hover-border: null !default;
+
+$kendo-focus-outline: null !default;
+
+$kendo-subtle-text: null !default;
+
+// Link
+$kendo-link-text: null !default;
+$kendo-link-hover-text: null !default;
+
+// Validator
+$kendo-invalid-bg: null !default;
+$kendo-invalid-text: null !default;
+$kendo-invalid-border: null !default;
+$kendo-invalid-shadow: null !default;
+
+// Disabled Styling
+$kendo-disabled-bg: null !default;
+$kendo-disabled-text: null !default;
+$kendo-disabled-border: null !default;
+
+// Loading
+$kendo-loading-bg: null !default;
+$kendo-loading-text: null !default;
+
+$kendo-palettes: () !default;
+$kendo-theme-colors: () !default;
+
+@mixin color-system-styles() {
+    :root {
+        @include k-css-vars($kendo-palettes);
+        @include k-css-vars($kendo-theme-colors);
+
+        // Text colors
+        @each $theme-color, $color-props in $kendo-theme-colors {
+            $_color: k-map-get($color-props, text);
+
+            .k-text-#{$theme-color},
+            .k-color-#{$theme-color} {
+                color: var(--kendo-text-#{$theme-color}, #{$_color});
+            }
+            .\!k-text-#{$theme-color},
+            .\!k-color-#{$theme-color} {
+                color: var(--kendo-text-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
+            }
+
+            .k-bg-#{$theme-color} {
+                background-color: var(--kendo-bg-#{$theme-color}, #{$_color});
+            }
+            .\!k-bg-#{$theme-color} {
+                background-color: var(--kendo-bg-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
+            }
+        }
+    }
+}
+
+// #endregion
+// @import "./_palettes.scss";
+
+// #endregion
+
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
+$kendo-enable-color-system: false !default;
 
 $kendo-theme-colors: () !default;
 
 $kendo-font-sizes: () !default;
 
+$kendo-util-colors-list: (
+    primary-subtle,
+    primary,
+    primary-emphasis,
+    secondary-subtle,
+    secondary,
+    secondary-emphasis,
+    tertiary-subtle,
+    tertiary,
+    tertiary-emphasis,
+    info-subtle,
+    info,
+    info-emphasis,
+    success-subtle,
+    success,
+    success-emphasis,
+    warning-subtle,
+    warning,
+    warning-emphasis,
+    error-subtle,
+    error,
+    error-emphasis,
+    light-subtle,
+    light,
+    light-emphasis,
+    dark-subtle,
+    dark,
+    dark-emphasis,
+) !default;
+
+$kendo-util-colors: () !default;
+@each $name, $color in $kendo-colors {
+    @each $util-color in $kendo-util-colors-list {
+        @if ( $name == $util-color ) {
+            $kendo-util-colors: k-map-merge( $kendo-util-colors, ( $name: $color) );
+        }
+    }
+}
+
 $kendo-spacing: (
     0: 0,
     1px: 1px,
@@ -2442,7 +4104,7 @@ $kendo-utils: (
         start,
         end
     ),
-    "text-color": k-map-merge( $kendo-theme-colors, (
+    "text-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -2497,7 +4159,7 @@ $kendo-utils: (
         content: content-box,
         text: text
     ),
-    "background-color": k-map-merge( $kendo-theme-colors, (
+    "background-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "transparent": transparent,
         "black": black,
@@ -2540,7 +4202,7 @@ $kendo-utils: (
         hidden,
         none
     ),
-    "border-color": k-map-merge( $kendo-theme-colors, (
+    "border-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -2566,7 +4228,7 @@ $kendo-utils: (
         outset,
         none
     ),
-    "outline-color": k-map-merge( $kendo-theme-colors, (
+    "outline-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -2785,7 +4447,7 @@ $kendo-utils: (
 
 // #endregion
 // #region @import "./_mixins.scss"; -> scss/_mixins.scss
-@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
+@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important, $css-var: null ) {
     @if $values {
         $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
         $_fn: if( k-meta-function-exists( $function ), k-meta-get-function( $function ), null );
@@ -2795,25 +4457,33 @@ $kendo-utils: (
             $_val: if( k-meta-type-of($values) == list, $key, $val );
             $_name: k-escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
+            $_custom-prop: if( $_key == DEFAULT, var( --kendo-#{$css-var}, #{$_val} ), var( --kendo-#{$css-var}-#{$_key}, #{$_val} ) );
 
             @if $important != only {
                 .#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
+                        @if $css-var {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $_custom-prop), $_custom-prop );
+                        } @else {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
+                        }
                     }
                 }
             }
             @if $important {
                 .\!#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
+                        @if $css-var {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $-custom-prop), $-custom-prop ) !important; // stylelint-disable-line declaration-no-important
+                        } @else {
+                            #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
+                        }
                     }
                 }
             }
         }
     }
 }
-
 // #endregion
 
 // #region @import "./accessibility/index.import.scss"; -> scss/accessibility/index.import.scss
@@ -6867,11 +8537,11 @@ $kendo-utils: (
 
     // Text color utility classes
     $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
-    @include generate-utils( text, color, $kendo-utils-text-color );
+    @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );
 
 
     // Legacy aliases
-    @include generate-utils( color, color, $kendo-utils-text-color );
+    @include generate-utils( color, color, $kendo-utils-text-color, $css-var: 'color' );
 
 }
 
@@ -7169,7 +8839,7 @@ $kendo-utils: (
 
     // Background color utility classes
     $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
-    @include generate-utils( bg, background-color, $kendo-utils-background-color );
+    @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );
 
 }
 
@@ -7313,13 +8983,7 @@ $kendo-utils: (
 
     // Border color utility classes
     $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
-    @include generate-utils( border, border-color, $kendo-utils-border-color );
-    @include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
-    @include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
-    @include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
-    @include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
-    @include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
-    @include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
+    @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );
 
 }
 
@@ -8199,7 +9863,7 @@ $kendo-utils: (
 
     // Outline color utility classes
     $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
-    @include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+    @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );
 
 }
 
@@ -9658,7 +11322,7 @@ $kendo-elevation: k-map-merge($_default-elevation, $kendo-elevation);
 // #endregion
 
 @mixin kendo-utils--elevation {
-    @include generate-utils(elevation, box-shadow, $kendo-elevation);
+    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: 'elevation');
 }
 
 // #endregion