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

package/README.md

@@ -0,0 +1 @@
+# Kendo UI Theme Core

package/dist/all.scss

@@ -0,0 +1,6 @@
+// This file is auto-generated. Do not edit!
+// baka:source packages/core/scss/all.scss
+
+// #region @import "./index.import.scss"; -> packages/core/scss/index.import.scss
+
+// #endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "5.9.1-dev.0",
+  "version": "5.9.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -31,11 +31,13 @@
   "scripts": {
     "build": "sass-build",
     "sass": "sass-build",
+    "nuget-pack": "jq '.version' package.json | xargs nuget pack package.nuspec -Version",
+    "nuget-push": "nuget push *.nupkg -ApiKey $NUGET_API_KEY -Source $NUGET_FEED -SkipDuplicate",
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for core theme'"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "5142573d2cab52d118015f12686449f974b66732"
+  "gitHead": "b6b186f9fb09b89d7b2468e2786165e1c5c62ec2"
 }

package/scss/all.scss

@@ -0,0 +1 @@
+@import "./index.import.scss";

package/scss/color-system/_functions.import.scss

@@ -0,0 +1,91 @@
+@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 );
+                }
+
+                $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} );
+}

package/scss/color-system/_palettes.scss

@@ -0,0 +1,915 @@
+$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;

package/scss/color-system/_variables.scss

@@ -0,0 +1,18 @@
+// Color constants
+$white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+$black: #000000; // stylelint-disable-line scss/dollar-variable-default
+
+$rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+$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
+
+$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+
+
+/// Set a specific jump point for requesting color jumps
+/// @group color-system
+/// @access private
+$kendo-color-level-step: 8% !default;

package/scss/color-system/index.import.scss

@@ -0,0 +1,4 @@
+@import "./_functions.import.scss";
+@import "./_mixins.import.scss";
+@import "./_variables.scss";
+@import "./_palettes.scss";

package/scss/functions/_custom-properties.import.scss

@@ -0,0 +1,37 @@
+@function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
+    $_prefix: $prefix;
+    $_var: $var;
+    $_fallback: $fallback;
+
+    @if ( k-string-index( $prefix, "--" ) == 1 ) {
+        $_prefix: "";
+        $_var: k-string-slice( $prefix, 3 );
+        $_fallback: $var;
+    }
+
+    @if not $_var {
+        @return null;
+    }
+
+    @if $_prefix == null {
+        $_prefix: "";
+    }
+
+    @if ($_fallback != null and $_fallback != "") {
+        @return var( --#{$_prefix}#{$_var}, #{$_fallback} );
+    }
+
+    @return var( --#{$_prefix}#{$_var} );
+}
+
+@function k-vars( $prefix: kendo-, $vars... ) {
+    $vars: k-list-reverse( $vars );
+    $result: null;
+
+    // @debug $prefix;
+    @each $var in $vars {
+        $result: k-var( $prefix, $var, $result );
+    }
+
+    @return $result;
+}

package/scss/functions/_list.import.scss

@@ -22,6 +22,24 @@
     @return nth( $list, $n );
 }
 
+@function k-list-reverse( $list: null ) {
+    $result: ();
+
+    @if ($list) {
+        $len: k-list-length( $list );
+
+        @for $i from $len through 1 {
+            $result: k-list-append( $result, k-list-nth( $list, $i ) );
+        }
+
+        @return $result;
+    }
+
+    // sass-lint:disable-block no-warn
+    @warn "No list passed.";
+    @return $result;
+}
+
 @function k-list-separator( $list ) {
     @return list-separator( $list );
 }

package/scss/functions/index.import.scss

@@ -1,6 +1,7 @@
 @import "_color.import.scss";
 @import "_color-contrast.import.scss";
 @import "_color-manipulation.import.scss";
+@import "_custom-properties.import.scss";
 @import "_list.import.scss";
 @import "_math.import.scss";
 @import "_map.import.scss";