@progress/kendo-theme-core 7.1.0-dev.7 → 7.1.0-dev.9

package/dist/meta/variables.json

@@ -31,6 +31,14 @@
         "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-enable-color-system": {
+        "type": "Bool",
+        "value": "false"
+    },
+    "kendo-colors": {
+        "type": "Map",
+        "value": "(app-surface: null, on-app-surface: null, subtle: null, surface: null, surface-alt: null, border: null, border-alt: null, 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-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-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-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-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-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-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-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-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-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-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: null, series-a-bold: null, series-a-bolder: null, series-a-subtle: null, series-a-subtler: null, series-b: null, series-b-bold: null, series-b-bolder: null, series-b-subtle: null, series-b-subtler: null, series-c: null, series-c-bold: null, series-c-bolder: null, series-c-subtle: null, series-c-subtler: null, series-d: null, series-d-bold: null, series-d-bolder: null, series-d-subtle: null, series-d-subtler: null, series-e: null, series-e-bold: null, series-e-bolder: null, series-e-subtle: null, series-e-subtler: null, series-f: null, series-f-bold: null, series-f-bolder: null, series-f-subtle: null, series-f-subtler: null)"
+    },
     "kendo-color-white": {
         "type": "Color",
         "value": "#ffffff"
@@ -63,133 +71,121 @@
         "type": "List",
         "value": "#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000"
     },
+    "kendo-is-dark-theme": {
+        "type": "Bool",
+        "value": "false"
+    },
     "kendo-body-bg": {
-        "type": "Color",
-        "value": "#ffffff"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-body-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-160, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-component-bg": {
-        "type": "Color",
-        "value": "#ffffff"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-component-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-160, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-component-border": {
-        "type": "String",
-        "value": "var(--kendo-neutral-30, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-hover-bg": {
-        "type": "String",
-        "value": "var(--kendo-neutral-20, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-hover-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-190, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-hover-border": {
-        "type": "String",
-        "value": "var(--kendo-neutral-20, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-selected-bg": {
-        "type": "String",
-        "value": "var(--kendo-neutral-30, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-selected-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-160, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-selected-border": {
-        "type": "String",
-        "value": "var(--kendo-neutral-130, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-selected-hover-bg": {
-        "type": "String",
-        "value": "var(--kendo-neutral-40, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-selected-hover-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-190, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-selected-hover-border": {
-        "type": "String",
-        "value": "var(--kendo-neutral-130, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-focus-outline": {
-        "type": "String",
-        "value": "var(--kendo-neutral-130, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-subtle-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-130, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-link-text": {
-        "type": "String",
-        "value": "var(--kendo-primary-100, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-link-hover-text": {
-        "type": "String",
-        "value": "var(--kendo-primary-120, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-invalid-bg": {
-        "type": "String",
-        "value": "initial"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-invalid-text": {
-        "type": "String",
-        "value": "var(--kendo-error-190, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-invalid-border": {
-        "type": "String",
-        "value": "var(--kendo-error-190, inherit)"
-    },
-    "kendo-invalid-shadow": {
         "type": "Null",
         "value": "null"
     },
-    "kendo-valid-bg": {
-        "type": "String",
-        "value": "initial"
-    },
-    "kendo-valid-text": {
-        "type": "String",
-        "value": "var(--kendo-success-190, inherit)"
-    },
-    "kendo-valid-border": {
-        "type": "String",
-        "value": "var(--kendo-success-190, inherit)"
-    },
-    "kendo-valid-shadow": {
+    "kendo-invalid-shadow": {
         "type": "Null",
         "value": "null"
     },
     "kendo-disabled-bg": {
-        "type": "String",
-        "value": "var(--kendo-neutral-20, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-disabled-text": {
-        "type": "String",
-        "value": "var(--kendo-neutral-90, inherit)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-disabled-border": {
-        "type": "Color",
-        "value": "transparent"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-loading-bg": {
-        "type": "Color",
-        "value": "#ffffff"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-loading-text": {
-        "type": "String",
-        "value": "currentColor"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-theme-colors": {
-        "type": "Map",
-        "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)))"
+        "type": "List",
+        "value": "()"
     },
     "kendo-scrollbar-width": {
         "type": "Number",

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": "7.1.0-dev.7",
+  "version": "7.1.0-dev.9",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -44,5 +44,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "4bacca4f18a86fbe5bd6cf1cbf192e82c5504709"
+  "gitHead": "4a6a0cb7085a4b032405585e25da25fd4383d7d7"
 }

package/scss/color-system/_constants.scss

@@ -0,0 +1,49 @@
+// 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

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

@@ -91,6 +91,31 @@
     @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: rgba( k-color( on-#{$color}, true ), .46)
+    );
+
+    @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: ( );
 
@@ -102,9 +127,9 @@
         $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 );
+        $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, (
@@ -116,7 +141,7 @@
         // 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 );
+            $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
@@ -142,3 +167,15 @@
 
     @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;
+    }
+}

package/scss/color-system/_swatch-legacy.scss

@@ -0,0 +1,77 @@
+$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
+            }
+        }
+    }
+}

package/scss/color-system/_swatch.scss

@@ -0,0 +1,203 @@
+@import "./_functions.import.scss";
+
+// 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, $rgb: false) {
+    $_color: k-map-get($kendo-colors, $key);
+
+    @if ($_color) {
+        @if ($rgb) {
+            @return var(--kendo-color-#{$key}-rgb, k-hex-to-rgb($_color));
+        } @else {
+            @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};
+                --kendo-color-#{$key}-rgb: #{k-hex-to-rgb($value)};
+            }
+        }
+    }
+}

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

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