@progress/kendo-theme-core 6.1.1-dev.8 → 6.2.1-dev.0

package/dist/meta/variables.json

@@ -0,0 +1,78 @@
+{
+    "equilateral-index": {
+        "type": "Number",
+        "value": "1.7320508076"
+    },
+    "equilateral-height": {
+        "type": "Number",
+        "value": "0.8660254038"
+    },
+    "wcag-min-contrast-ratio": {
+        "type": "Number",
+        "value": "7"
+    },
+    "wcag-dark": {
+        "type": "Color",
+        "value": "black"
+    },
+    "wcag-light": {
+        "type": "Color",
+        "value": "white"
+    },
+    "kendo-light-color-level-step": {
+        "type": "Number",
+        "value": "8%"
+    },
+    "kendo-dark-color-level-step": {
+        "type": "Number",
+        "value": "16%"
+    },
+    "kendo-color-level-step": {
+        "type": "Number",
+        "value": "8%"
+    },
+    "kendo-color-white": {
+        "type": "Color",
+        "value": "#ffffff"
+    },
+    "kendo-color-black": {
+        "type": "Color",
+        "value": "#000000"
+    },
+    "kendo-color-rgba-transparent": {
+        "type": "Color",
+        "value": "rgba(0, 0, 0, 0)"
+    },
+    "kendo-gradient-transparent-to-black": {
+        "type": "List",
+        "value": "rgba(0, 0, 0, 0), black"
+    },
+    "kendo-gradient-transparent-to-white": {
+        "type": "List",
+        "value": "rgba(255, 255, 255, 0), white"
+    },
+    "kendo-gradient-black-to-transparent": {
+        "type": "List",
+        "value": "black, rgba(0, 0, 0, 0)"
+    },
+    "kendo-gradient-white-to-transparent": {
+        "type": "List",
+        "value": "white, rgba(255, 255, 255, 0)"
+    },
+    "kendo-gradient-rainbow": {
+        "type": "List",
+        "value": "#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000"
+    },
+    "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-scrollbar-width": {
+        "type": "Number",
+        "value": "17px"
+    },
+    "kendo-components": {
+        "type": "List",
+        "value": "\"typography\", \"utils\", \"cursor\", \"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\", \"scroll-view\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+    }
+}

package/dist/meta/variables.scss

@@ -0,0 +1,10 @@
+@use "sass:meta";
+@use "../all.scss";
+
+$_vars: meta.module-variables("all");
+
+body {
+    @each $key, $val in $_vars {
+        var: k-resolve-var( unquote($key), meta.type-of( $val ), $val );
+    }
+}

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.1.1-dev.8+237a5fdca",
+  "version": "6.2.1-dev.0+7a0fad806",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -39,5 +39,5 @@
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for core theme'"
   },
-  "gitHead": "237a5fdca51516273f563421c40d03335734d230"
+  "gitHead": "7a0fad8063cd9fe27e17a9898e289cca17895c32"
 }

package/scss/color-system/_palettes.scss

@@ -1,3 +1,72 @@
+/// Color palettes to be used in the Kendo UI themes.
+/// @access private
+/// @type Record<String, ColorMap>
+/// @prop {ColorMap} neutral - The neutral palette
+/// @prop {ColorMap} marsala - The marsala palette
+/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
+/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
+/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
+/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
+/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
+/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
+/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
+/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
+/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
+/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
+/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
+/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
+/// @prop {ColorMap} materialGray - The Material gray palette
+/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
+/// @prop {ColorMap} materialRed - The Material red palette
+/// @prop {ColorMap} materialPink - The Material pink palette
+/// @prop {ColorMap} materialPurple - The Material purple palette
+/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
+/// @prop {ColorMap} materialIndigo - The Material indigo palette
+/// @prop {ColorMap} materialBlue - The Material blue palette
+/// @prop {ColorMap} materialLightBlue - The Material light blue palette
+/// @prop {ColorMap} materialCyan - The Material cyan palette
+/// @prop {ColorMap} materialTeal - The Material teal palette
+/// @prop {ColorMap} materialGreen - The Material green palette
+/// @prop {ColorMap} materialLightGreen - The Material light green palette
+/// @prop {ColorMap} materialLime - The Material lime palette
+/// @prop {ColorMap} materialYellow - The Material yellow palette
+/// @prop {ColorMap} materialAmber - The Material amber palette
+/// @prop {ColorMap} materialOrange - The Material orange palette
+/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
+/// @prop {ColorMap} materialBrown - The Material brown palette
+/// @prop {ColorMap} primerGray - The Primer gray palette
+/// @prop {ColorMap} primerBlue - The Primer blue palette
+/// @prop {ColorMap} primerGreen - The Primer green palette
+/// @prop {ColorMap} primerYellow - The Primer yellow palette
+/// @prop {ColorMap} primerOrange - The Primer orange palette
+/// @prop {ColorMap} primerRed - The Primer red palette
+/// @prop {ColorMap} primerPurple - The Primer purple palette
+/// @prop {ColorMap} primerPink - The Primer pink palette
+/// @prop {ColorMap} primerCoral - The Primer coral palette
+/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
+/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
+/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
+/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
+/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
+/// @prop {ColorMap} tailwindRed - The Tailwind red palette
+/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
+/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
+/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
+/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
+/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
+/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
+/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
+/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
+/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
+/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
+/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
+/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
+/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
+/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
+/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
+/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
+///
+/// @group color-system
 $kendo-palettes: (
 
     // Kendo

package/scss/color-system/_variables.scss

@@ -1,12 +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/functions/_color-contrast.import.scss

@@ -271,17 +271,31 @@ $_linear-channel-values: (
     1
 );
 
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
-// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+/// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+/// @type Number
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 $wcag-min-contrast-ratio: 7 !default;
+/// Default dark color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
 $wcag-dark: black !default;
+/// Default light color for WCAG 2.0.
+/// @type Color
+/// @group accessibility
 $wcag-light: white !default;
 
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// Calculate the relative luminance for a color.
+/// @param {Color} $color - The color to calculate the relative luminance for.
+/// @return {Number} - The relative luminance for the color.
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function k-color-luminance( $color ) {
     $red: k-list-nth( $_linear-channel-values, k-color-red( $color ) + 1 );
     $green: k-list-nth( $_linear-channel-values, k-color-green( $color ) + 1 );
@@ -290,9 +304,15 @@ $wcag-light: white !default;
     @return .2126 * $red + .7152 * $green + .0722 * $blue;
 }
 
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// Calculates contrast ratio between two colors
+/// @param {Color} $background - The background color
+/// @param {Color} $foreground - The foreground color
+/// @return {Number} - The contrast ratio between the two colors
+///
+/// @group accessibility
+///
+/// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function k-color-contrast-ratio( $background, $foreground ) {
     // sass-lint:disable-block variable-name-format
     $backLum: k-color-luminance( $background ) + .05;
@@ -301,15 +321,34 @@ $wcag-light: white !default;
     @return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
 }
 
+/// Checks if a color is dark
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is dark, false otherwise
+///
+/// @group accessibility
 @function k-is-dark( $color ) {
     @return if( k-color-luminance( $color ) < .5, true, false );
 }
+
+/// Checks if a color is light
+/// @param {Color} $color - The color to check
+/// @return {Boolean} - True if the color is light, false otherwise
+///
+/// @group accessibility
 @function k-is-light( $color ) {
     @return if( k-color-luminance( $color ) < .5, false, true );
 }
 
 
-// Contrast functions
+/// Calculates the contrast ratio between a background color and a foreground color.
+/// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
+/// @param {Color} $background - The background color
+/// @param {Color} $dark - The dark color to use as a fallback
+/// @param {Color} $light - The light color to use as a fallback
+/// @param {Number} $min-ratio - The minimum contrast ratio to reach
+/// @return {Color} - The color with the highest contrast ratio
+///
+/// @group accessibility
 @function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
     $foregrounds: $light, $dark, #ffffff, #000000;
     $max-ratio: 0;

package/scss/functions/_color-manipulation.import.scss

@@ -1,9 +1,14 @@
+$kendo-light-color-level-step: 8% !default;
+$kendo-dark-color-level-step: 16% !default;
+
 /// Set a specific jump point for requesting color jumps
 /// @group color-system
 /// @access private
 $kendo-color-level-step: 8% !default;
 
 @function k-color-level( $color, $level: 0 ) {
+    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
+    $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
 
     @if ( $level == 0 ) or ( $level == 0% ) {
         @return $color;
@@ -17,16 +22,41 @@ $kendo-color-level-step: 8% !default;
         @return k-color-mix( $base, $color, $level );
     }
 
-    @return k-color-mix( $base, $color, $level * $kendo-color-level-step );
+    @return k-color-mix( $base, $color, k-math-clamp( $level * $_color-level-step, 0%, 100% ) );
 }
 
+/// Makes a color lighter by mixing it with white
+/// @param {Color} $color - The color to lighten
+/// @param {Number} $level - The amount to lighten the color
+/// @return {Color} - The lightened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-tint( #f00, 1 ); // => #ff1a1a
 @function k-color-tint( $color, $level: 1 ) {
     @return k-color-level( $color, -$level );
 }
+
+/// Makes a color darker by mixing it with black
+/// @param {Color} $color - The color to darken
+/// @param {Number} $level - The amount to darken the color
+/// @return {Color} - The darkened color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-color-shade( #f00, 1 ); // => #e60000
 @function k-color-shade( $color, $level: 1 ) {
     @return k-color-level( $color, $level );
 }
 
+/// Shades the color in light themes and tints it in dark themes
+/// @param {Color} $color - The color to shade or tint
+/// @param {Number} $level - The amount to shade or tint the color
+/// @return {Color} - The shaded or tinted color
+///
+/// @group color-system
 @function k-try-shade( $color, $level: 1 ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -36,6 +66,13 @@ $kendo-color-level-step: 8% !default;
 
     @return k-color-shade( $color, $level );
 }
+
+/// Tints the color in light themes and shades it in dark themes
+/// @param {Color} $color - The color to tint or shade
+/// @param {Number} $level - The amount to tint or shade the color
+/// @return {Color} - The tinted or shaded color
+///
+/// @group color-system
 @function k-try-tint( $color, $level: 1 ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -46,7 +83,12 @@ $kendo-color-level-step: 8% !default;
     @return k-color-tint( $color, $level );
 }
 
-
+/// Darkens the color in light themes and lightens it in dark themes
+/// @param {Color} $color - The color to darken or lighten
+/// @param {Number} $level - The amount to darken or lighten the color
+/// @return {Color} - The darkened or lightened color
+///
+/// @group color-system
 @function k-try-darken( $color, $amount ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -56,6 +98,12 @@ $kendo-color-level-step: 8% !default;
     @return k-color-darken( $color, $amount );
 }
 
+/// Lightens the color in light themes and darkens it in dark themes
+/// @param {Color} $color - The color to lighten or darken
+/// @param {Number} $level - The amount to lighten or darken the color
+/// @return {Color} - The lightened or darkened color
+///
+/// @group color-system
 @function k-try-lighten( $color, $amount ) {
     $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
 
@@ -65,6 +113,15 @@ $kendo-color-level-step: 8% !default;
     @return k-color-lighten( $color, $amount );
 }
 
+/// Converts a color with alpha to solid color mixed with a background color
+/// @param {Color} $color - The color to convert
+/// @param {Color} $bg - The background color
+/// @return {Color} - The converted color
+///
+/// @group color-system
+///
+/// @example scss - Usage
+///   @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
 @function k-rgba-to-mix( $color, $bg ) {
     $percent: k-color-alpha( $color ) * 100%;
 

package/scss/functions/_color.import.scss

@@ -1,63 +1,168 @@
+/// Returns the alpha channel of a color.
+/// @param {Color} $color - The color to get the alpha channel for.
+/// @return {Number} - The alpha channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
+///   @debug k-color-alpha( #000 ); // => 1
 @function k-color-alpha( $color ) {
     @return alpha( $color );
 }
 
+/// Returns the red channel of a color.
+/// @param {Color} $color - The color to get the red channel for.
+/// @return {Number} - The red channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-red( #ff0000 ); // => 255
 @function k-color-red( $color ) {
     @return red( $color );
 }
 
+/// Returns the green channel of a color.
+/// @param {Color} $color - The color to get the green channel for.
+/// @return {Number} - The green channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-green( #00ff00 ); // => 255
 @function k-color-green( $color ) {
     @return green( $color );
 }
 
+/// Returns the blue channel of a color.
+/// @param {Color} $color - The color to get the blue channel for.
+/// @return {Number} - The blue channel of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-blue( #0000ff ); // => 255
 @function k-color-blue( $color ) {
     @return blue( $color );
 }
 
+/// Returns the hue of a color.
+/// @param {Color} $color - The color to get the hue for.
+/// @return {Number} - The hue of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-hue( #e1d7d2 ); // => 20deg
 @function k-color-hue( $color ) {
     @return hue( $color );
 }
 
+/// Returns the saturation of a color.
+/// @param {Color} $color - The color to get the saturation for.
+/// @return {Number} - The saturation of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-saturation( #e1d7d2 ); // => 20%
 @function k-color-saturation( $color ) {
     @return saturation( $color );
 }
 
+/// Returns the lightness of a color.
+/// @param {Color} $color - The color to get the lightness for.
+/// @return {Number} - The lightness of the color.
+///
+/// @example scss - Usage
+///   @debug k-color-lightness( #e1d7d2 ); // => 80%
 @function k-color-lightness( $color ) {
     @return lightness( $color );
 }
 
+/// Returns a color that is a mix of two colors.
+/// @param {Color} $color1 - The first color.
+/// @param {Color} $color2 - The second color.
+/// @param {Number} $weight - The weight of the first color in the mix.
+/// @return {Color} - The mixed color.
+///
+/// @example scss - Usage
+///   @debug k-color-mix( #f00, #00f ); // => #800080
 @function k-color-mix( $color1, $color2, $weight: 50% ) {
     @return mix( $color1, $color2, $weight );
 }
 
+/// Makes a color darker by decreasing its lightness.
+/// @param {Color} $color - The color to darken.
+/// @param {Number} $amount - The amount to darken the color.
+/// @return {Color} - The darkened color.
+///
+/// @example scss - Usage
+///   @debug k-color-darken( #f00, 10% ); // => #e60000
 @function k-color-darken( $color, $amount) {
     @return darken( $color, $amount );
 }
 
+/// Makes a color lighter by increasing its lightness.
+/// @param {Color} $color - The color to lighten.
+/// @param {Number} $amount - The amount to lighten the color.
+/// @return {Color} - The lightened color.
+///
+/// @example scss - Usage
+///   @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
 @function k-color-lighten( $color, $amount) {
     @return lighten( $color, $amount );
 }
 
+/// Increases or decreases the hue of a color.
+/// @param {Color} $color - The color to adjust the hue for.
+/// @param {Number} $degrees - The amount to adjust the hue.
+/// @return {Color} - The adjusted color.
+///
+/// @example scss - Usage
+///   @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
 @function k-color-adjust-hue( $color, $degrees ) {
     @return adjust-hue( $color, $degrees );
 }
 
+/// Increases the saturation of a color.
+/// @param {Color} $color - The color to saturate.
+/// @param {Number} $amount - The amount to saturate the color.
+/// @return {Color} - The saturated color.
+///
+/// @example scss - Usage
+///   @debug k-color-saturate( #f00, 10% ); // => #ff3333
 @function k-color-saturate( $color, $amount ) {
     @return saturate( $color, $amount );
 }
 
+/// Decreases the saturation of a color.
+/// @param {Color} $color - The color to desaturate.
+/// @param {Number} $amount - The amount to desaturate the color.
+/// @return {Color} - The desaturated color.
+///
+/// @example scss - Usage
+///   @debug k-color-desaturate( #f00, 10% ); // => #e60000
 @function k-color-desaturate( $color, $amount ) {
     @return desaturate( $color, $amount );
 }
 
+/// Returns a gray color with the same lightness as the input color.
+/// @param {Color} $color - The color to convert to grayscale.
+/// @return {Color} - The grayscale color.
+///
+/// @example scss - Usage
+///   @debug k-color-grayscale( #f00 ); // => #808080
 @function k-color-grayscale( $color ) {
     @return grayscale( $color );
 }
 
+/// Returns the RGB complement of a color. This identical to adjusting the hue
+/// by 180 degrees.
+/// @param {Color} $color - The color to get the complement for.
+/// @return {Color} - The complement color.
+///
+/// @example scss - Usage
+///   @debug k-color-complement( #f00 ); // => #00ffff
 @function k-color-complement( $color ) {
     @return complement( $color );
 }
 
+/// Returns the inverse of a color.
+/// @param {Color} $color - The color to invert.
+/// @return {Color} - The inverted color.
+///
+/// @example scss - Usage
+///   @debug k-color-invert( #f00 ); // => #00ffff
 @function k-color-invert( $color ) {
     @return invert( $color );
 }

package/scss/functions/_escape-string.import.scss

@@ -7,7 +7,11 @@ $_kendo-svg-escaped-characters: (
     (")", "%29")
 ) !default;
 
-// See https://codepen.io/kevinweber/pen/dXWoRw
+/// Escapes SVG characters in a string
+/// @param {String} $string - The string to escape
+/// @return {String} - The escaped string
+///
+/// @link https://codepen.io/kevinweber/pen/dXWoRw
 @function k-escape-svg($string) {
     @if k-string-index($string, "data:image/svg+xml") {
         @each $char, $encoded in $_kendo-svg-escaped-characters {
@@ -30,6 +34,9 @@ $_kendo-escape-class-name: (
     "/": "\\/"
 );
 
+/// Escapes special characters in a class name
+/// @param {String} $text - The string to escape
+/// @return {String} - The escaped string
 @function k-escape-class-name( $text ) {
     $_text: $text;