@progress/kendo-theme-core 6.5.0-dev.1 → 6.5.0

package/dist/meta/variables.json

@@ -1,12 +1,4 @@
 {
-    "equilateral-index": {
-        "type": "Number",
-        "value": "1.7320508076"
-    },
-    "equilateral-height": {
-        "type": "Number",
-        "value": "0.8660254038"
-    },
     "wcag-min-contrast-ratio": {
         "type": "Number",
         "value": "7"
@@ -31,6 +23,14 @@
         "type": "Number",
         "value": "8%"
     },
+    "svg-escaped-characters": {
+        "type": "List",
+        "value": "(\"%\", \"%25\"), (\"<\", \"%3c\"), (\">\", \"%3e\"), (\"#\", \"%23\"), (\"(\", \"%28\"), (\")\", \"%29\")"
+    },
+    "kendo-palettes": {
+        "type": "Map",
+        "value": "(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), 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), 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), 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: #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), 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), 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))"
+    },
     "kendo-color-white": {
         "type": "Color",
         "value": "#ffffff"
@@ -63,9 +63,133 @@
         "type": "List",
         "value": "#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000"
     },
-    "kendo-palettes": {
+    "kendo-body-bg": {
+        "type": "Color",
+        "value": "#ffffff"
+    },
+    "kendo-body-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-160, inherit)"
+    },
+    "kendo-component-bg": {
+        "type": "Color",
+        "value": "#ffffff"
+    },
+    "kendo-component-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-160, inherit)"
+    },
+    "kendo-component-border": {
+        "type": "String",
+        "value": "var(--kendo-neutral-30, inherit)"
+    },
+    "kendo-hover-bg": {
+        "type": "String",
+        "value": "var(--kendo-neutral-20, inherit)"
+    },
+    "kendo-hover-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-190, inherit)"
+    },
+    "kendo-hover-border": {
+        "type": "String",
+        "value": "var(--kendo-neutral-20, inherit)"
+    },
+    "kendo-selected-bg": {
+        "type": "String",
+        "value": "var(--kendo-neutral-30, inherit)"
+    },
+    "kendo-selected-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-160, inherit)"
+    },
+    "kendo-selected-border": {
+        "type": "String",
+        "value": "var(--kendo-neutral-130, inherit)"
+    },
+    "kendo-selected-hover-bg": {
+        "type": "String",
+        "value": "var(--kendo-neutral-40, inherit)"
+    },
+    "kendo-selected-hover-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-190, inherit)"
+    },
+    "kendo-selected-hover-border": {
+        "type": "String",
+        "value": "var(--kendo-neutral-130, inherit)"
+    },
+    "kendo-focus-outline": {
+        "type": "String",
+        "value": "var(--kendo-neutral-130, inherit)"
+    },
+    "kendo-subtle-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-130, inherit)"
+    },
+    "kendo-box-shadow-depth-1": {
+        "type": "List",
+        "value": "0 1.6px 3.6px rgba(0, 0, 0, 0.132), 0 0.3px 0.9px rgba(0, 0, 0, 0.108)"
+    },
+    "kendo-box-shadow-depth-2": {
+        "type": "List",
+        "value": "0 3.2px 7.2px rgba(0, 0, 0, 0.132), 0 0.6px 1.8px rgba(0, 0, 0, 0.108)"
+    },
+    "kendo-box-shadow-depth-3": {
+        "type": "List",
+        "value": "0 6.4px 14.4px rgba(0, 0, 0, 0.132), 0 1.2px 3.6px rgba(0, 0, 0, 0.108)"
+    },
+    "kendo-box-shadow-depth-4": {
+        "type": "List",
+        "value": "0 25.6px 57.6px rgba(0, 0, 0, 0.22), 0 4.8px 14.4px rgba(0, 0, 0, 0.18)"
+    },
+    "kendo-link-text": {
+        "type": "String",
+        "value": "var(--kendo-primary-100, inherit)"
+    },
+    "kendo-link-hover-text": {
+        "type": "String",
+        "value": "var(--kendo-primary-120, inherit)"
+    },
+    "kendo-invalid-bg": {
+        "type": "String",
+        "value": "initial"
+    },
+    "kendo-invalid-text": {
+        "type": "String",
+        "value": "var(--kendo-error-190, inherit)"
+    },
+    "kendo-invalid-border": {
+        "type": "String",
+        "value": "var(--kendo-error-190, inherit)"
+    },
+    "kendo-invalid-shadow": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-disabled-bg": {
+        "type": "String",
+        "value": "var(--kendo-neutral-20, inherit)"
+    },
+    "kendo-disabled-text": {
+        "type": "String",
+        "value": "var(--kendo-neutral-90, inherit)"
+    },
+    "kendo-disabled-border": {
+        "type": "Color",
+        "value": "transparent"
+    },
+    "kendo-loading-bg": {
+        "type": "Color",
+        "value": "#ffffff"
+    },
+    "kendo-loading-text": {
+        "type": "String",
+        "value": "currentColor"
+    },
+    "kendo-theme-colors": {
         "type": "Map",
-        "value": "(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), 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), 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), 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: #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), 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), 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))"
+        "value": "(primary: (text: var(--kendo-primary-130, inherit), bg: var(--kendo-primary-20, inherit), border: var(--kendo-primary-20, inherit)), info: (text: var(--kendo-info-190, inherit), bg: var(--kendo-info-20, inherit), border: var(--kendo-info-20, inherit)), success: (text: var(--kendo-success-190, inherit), bg: var(--kendo-success-20, inherit), border: var(--kendo-success-20, inherit)), warning: (text: var(--kendo-neutral-160, inherit), bg: var(--kendo-warning-20, inherit), border: var(--kendo-warning-20, inherit)), error: (text: var(--kendo-error-190, inherit), bg: var(--kendo-error-20, inherit), border: var(--kendo-error-20, inherit)))"
     },
     "kendo-scrollbar-width": {
         "type": "Number",
@@ -74,5 +198,93 @@
     "kendo-components": {
         "type": "List",
         "value": "\"typography\", \"utils\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panelbar\", \"splitter\", \"tile-layout\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+    },
+    "kendo-enable-shadows": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-enable-rounded": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-enable-gradients": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-enable-transitions": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-spacing": {
+        "type": "Map",
+        "value": "(0: 0, 1px: 1px, 0.5: 0.125rem, 1: 0.25rem, 1.5: 0.375rem, 2: 0.5rem, 2.5: 0.625rem, 3: 0.75rem, 3.5: 0.875rem, 4: 1rem, 4.5: 1.125rem, 5: 1.25rem, 5.5: 1.375rem, 6: 1.5rem, 6.5: 1.625rem, 7: 1.75rem, 7.5: 1.875rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 2.75rem, 12: 3rem, 13: 3.25rem, 14: 3.5rem, 15: 3.75rem, 16: 4rem, 17: 4.25rem, 18: 4.5rem, 19: 4.75rem, 20: 5rem, 21: 5.25rem, 22: 5.5rem, 23: 5.75rem, 24: 6rem)"
+    },
+    "kendo-border-radius": {
+        "type": "Number",
+        "value": "0.125rem"
+    },
+    "kendo-border-radius-sm": {
+        "type": "Number",
+        "value": "0.0625rem"
+    },
+    "kendo-border-radius-md": {
+        "type": "Number",
+        "value": "0.125rem"
+    },
+    "kendo-border-radius-lg": {
+        "type": "Number",
+        "value": "0.25rem"
+    },
+    "kendo-border-radii": {
+        "type": "Map",
+        "value": "(DEFAULT: var(--kendo-border-radius-md, 0.125rem), 0: 0, sm: var(--kendo-border-radius-sm, 0.0625rem), md: var(--kendo-border-radius-md, 0.125rem), lg: var(--kendo-border-radius-lg, 0.25rem), none: 0, full: 9999px)"
+    },
+    "kendo-padding-x": {
+        "type": "Number",
+        "value": "0.5rem"
+    },
+    "kendo-padding-y": {
+        "type": "Number",
+        "value": "0.25rem"
+    },
+    "kendo-padding-sm-x": {
+        "type": "Number",
+        "value": "0.25rem"
+    },
+    "kendo-padding-sm-y": {
+        "type": "Number",
+        "value": "0.125rem"
+    },
+    "kendo-padding-md-x": {
+        "type": "Number",
+        "value": "0.5rem"
+    },
+    "kendo-padding-md-y": {
+        "type": "Number",
+        "value": "0.25rem"
+    },
+    "kendo-padding-lg-x": {
+        "type": "Number",
+        "value": "0.75rem"
+    },
+    "kendo-padding-lg-y": {
+        "type": "Number",
+        "value": "0.375rem"
+    },
+    "equilateral-index": {
+        "type": "Number",
+        "value": "1.7320508076"
+    },
+    "equilateral-height": {
+        "type": "Number",
+        "value": "0.8660254038"
+    },
+    "kendo-loading-opacity": {
+        "type": "Number",
+        "value": "0.3"
+    },
+    "kendo-zindex-loading": {
+        "type": "Number",
+        "value": "100"
     }
 }

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": "6.5.0-dev.1",
+  "version": "6.5.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -40,5 +40,5 @@
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for core theme'"
   },
-  "gitHead": "6669ee878325bbdc367a4efc94ce2315e2b680e5"
+  "gitHead": "c80605b2f31712cef967727baf59d1d2661cca79"
 }

package/scss/_variables.scss

@@ -1,5 +1,80 @@
+@import "./functions/index.import.scss";
+
+// Options
+$kendo-enable-shadows: true !default;
+$kendo-enable-rounded: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
+
+$kendo-spacing: (
+    0: 0,
+    1px: 1px,
+    0.5: 0.125rem,
+    1: 0.25rem,
+    1.5: 0.375rem,
+    2: 0.5rem,
+    2.5: 0.625rem,
+    3: 0.75rem,
+    3.5: 0.875rem,
+    4: 1rem,
+    4.5: 1.125rem,
+    5: 1.25rem,
+    5.5: 1.375rem,
+    6: 1.5rem,
+    6.5: 1.625rem,
+    7: 1.75rem,
+    7.5: 1.875rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
+) !default;
+
+/// Border radius for all components.
+$kendo-border-radius: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: k-math-div($kendo-border-radius, 2) !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: ($kendo-border-radius * 2) !default;
+
+$kendo-border-radii: (
+    DEFAULT: var(--kendo-border-radius-md, $kendo-border-radius-md),
+    0: 0,
+    sm: var(--kendo-border-radius-sm, $kendo-border-radius-sm),
+    md: var(--kendo-border-radius-md, $kendo-border-radius-md),
+    lg: var(--kendo-border-radius-lg, $kendo-border-radius-lg),
+    none: 0,
+    full: 9999px,
+) !default;
+
+// Metrics
+$kendo-padding-x: k-map-get($kendo-spacing, 2) !default;
+$kendo-padding-y: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-sm-x: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-sm-y: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-padding-md-x: k-map-get($kendo-spacing, 2) !default;
+$kendo-padding-md-y: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-lg-x: k-map-get($kendo-spacing, 3) !default;
+$kendo-padding-lg-y: k-map-get($kendo-spacing, 1.5) !default;
+
 // Equilateral triangle variables
 // stylelint-disable number-max-precision
 $equilateral-index: 1.7320508076 !default;
-$equilateral-height: .8660254038 !default;
+$equilateral-height: 0.8660254038 !default;
 // stylelint-enable number-max-precision
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;

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

@@ -1,3 +1,5 @@
+@import "./_palettes.scss";
+
 @function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
     $result: ();
 
@@ -88,3 +90,55 @@
 @function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
     @return var( --#{$prefix}#{$name}, #{$fallback} );
 }
+
+@function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
+    $temp: ( );
+
+    @each $ui-state, $indices in $mapping {
+        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
+
+        $bg-prop: k-list-nth($indices, 1);
+        $text-prop: k-list-nth($indices, 2);
+        $border-prop: k-list-nth($indices, 3);
+
+        // Take value from the palette only if it is a number
+        $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
+        $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
+        $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+
+
+        $temp: k-map-deep-merge( $temp, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border
+        ));
+
+        // Add outline if provided in the map
+        @if ( k-list-length($indices) > 3 ) {
+            $outline-prop: k-list-nth($indices, 4);
+            $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+
+            $temp: k-map-deep-merge( $temp, (
+                #{$prefix}outline: $outline
+            ));
+        }
+    }
+
+    $map: (
+        #{$theme-color}: $temp
+    );
+
+    @return $map;
+
+};
+
+@function k-generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
+
+    $map: k-generate-theme-variation( $theme-color, $source-palette-name, $mapping );
+
+    $result: (
+       #{$fill-mode}: $map
+    );
+
+    @return $result;
+}

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

@@ -0,0 +1,7 @@
+@mixin k-css-vars($map) {
+    @each $group, $values in $map {
+        @each $key, $value in $values {
+            --kendo-#{k-meta-inspect($group)}-#{$key}: #{$value};
+        }
+    }
+}

package/scss/color-system/_variables.scss

@@ -47,3 +47,167 @@ $kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disa
 /// @type Gradient
 /// @group color-system
 $kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+
+
+// Root styles
+$kendo-body-bg: $kendo-color-white !default;
+$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
+
+// Component styles
+$kendo-component-bg: $kendo-body-bg !default;
+$kendo-component-text: $kendo-body-text !default;
+$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
+
+// States styles
+$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
+
+$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
+$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
+
+// Shadows
+
+/// Shadow for cards and grid item thumbnails.
+/// Equivalent to fluent depth 4.
+$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $kendo-color-black, 0.132 ), 0 0.3px 0.9px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for command bars and dropdowns.
+/// Equivalent to fluent depth 8.
+$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $kendo-color-black, 0.132 ), 0 0.6px 1.8px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for teaching callouts and hover cards / tooltips.
+/// Equivalent to fluent depth 16.
+$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $kendo-color-black, 0.132 ), 0 1.2px 3.6px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for panels and pop up dialogs.
+/// Equivalent to fluent depth 64.
+$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $kendo-color-black, 0.22 ), 0 4.8px 14.4px rgba( $kendo-color-black, 0.18 ) !default;
+
+// Link
+$kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
+
+// Validator
+$kendo-invalid-bg: initial !default;
+$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-shadow: null !default;
+
+// Disabled Styling
+$kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-disabled-border: transparent !default;
+
+// Loading
+$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-text: currentColor !default;
+
+
+// Theme colors
+$kendo-theme-colors: (
+    primary: (
+        text: k-get-theme-color-var( primary-130 ),
+        bg: k-get-theme-color-var( primary-20 ),
+        border: k-get-theme-color-var( primary-20 )
+    ),
+    info: (
+        text: k-get-theme-color-var( info-190 ),
+        bg: k-get-theme-color-var( info-20 ),
+        border: k-get-theme-color-var( info-20 )
+    ),
+    success: (
+        text: k-get-theme-color-var( success-190 ),
+        bg: k-get-theme-color-var( success-20 ),
+        border: k-get-theme-color-var( success-20 )
+    ),
+    warning: (
+        text: k-get-theme-color-var( neutral-160 ),
+        bg: k-get-theme-color-var( warning-20 ),
+        border: k-get-theme-color-var( warning-20 )
+    ),
+    error: (
+        text: k-get-theme-color-var( error-190 ),
+        bg: k-get-theme-color-var( error-20 ),
+        border: k-get-theme-color-var( error-20 )
+    )
+) !default;
+
+
+@mixin color-system-styles() {
+    :root {
+        @include k-css-vars( $kendo-palettes );
+        @include k-css-vars( $kendo-theme-colors );
+
+        --kendo-body-bg: #{$kendo-body-bg};
+        --kendo-body-text: #{$kendo-body-text};
+
+        --kendo-component-bg: #{$kendo-component-bg};
+        --kendo-component-text: #{$kendo-component-text};
+        --kendo-component-border: #{$kendo-component-border};
+
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+
+        --kendo-link-text: #{$kendo-link-text};
+        --kendo-link-hover-text: #{$kendo-link-hover-text};
+
+        --kendo-disabled-bg: #{$kendo-disabled-bg};
+        --kendo-disabled-text: #{$kendo-disabled-text};
+        --kendo-disabled-border: #{$kendo-disabled-border};
+
+        --kendo-hover-bg: #{$kendo-hover-bg};
+        --kendo-hover-text: #{$kendo-hover-text};
+        --kendo-hover-border: #{$kendo-hover-border};
+
+        --kendo-selected-bg: #{$kendo-selected-bg};
+        --kendo-selected-text: #{$kendo-selected-text};
+        --kendo-selected-border: #{$kendo-selected-border};
+
+        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
+        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
+        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
+
+        --kendo-focus-outline: #{$kendo-focus-outline};
+
+        --kendo-subtle-text: #{$kendo-subtle-text};
+
+        --kendo-invalid-bg: #{$kendo-invalid-bg};
+        --kendo-invalid-text: #{$kendo-invalid-text};
+        --kendo-invalid-border: #{$kendo-invalid-border};
+        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+
+        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
+        --kendo-border-radius-md: #{$kendo-border-radius-md};
+        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
+    }
+
+    // Text colors
+    @each $theme-color, $color-props in $kendo-theme-colors {
+        $_color: k-map-get( $color-props, text );
+
+        .k-text-#{$theme-color},
+        .k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} );
+        }
+        .\!k-text-#{$theme-color},
+        .\!k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+        }
+
+        .k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
+        }
+        .\!k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+        }
+    };
+}

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

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