igniteui-theming
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
npm · fingerprint c0efb128d7140b0fe2144f84 · repository · RSS
15tools
2recorded versions
57dtracked
changed since 2 Sep
What changed
Changed between 2 September 2026 and 28 October 2026 (first seen 2026-10-28 13:15 UTC)
4 descriptions rewritten, 1 tool added.
--- pinned/create_custom_palette +++ observed/create_custom_palette { - "description": "Generate a custom color palette with fine-grained control over individual shade values.\n\n⚠️ CRITICAL RULES - READ BEFORE GENERATING SHADES:\n1. MONOCHROMATIC: Each color (primary, secondary, etc.) must use ONE HUE only.\n All 14 shades are lighter/darker versions of the SAME color.\n Example: primary blue → all shades must be blue (#E3F2FD light → #0D47A1 dark).\n WRONG: mixing blue, green, purple in one color's shades.\n2. NEVER INVERT: Chromatic colors always go 50=lightest → 900=darkest.\n This applies to BOTH light and dark themes. Only gray inverts for dark themes.\n\n<use_case>\n Use this tool when:\n - The standard palette() function produces suboptimal shade distribution\n - You have brand guidelines specifying exact color values for each shade\n - Base colors are too light (luminance > 0.45) or too dark (< 0.05)\n - You have specific accessibility audit requirements with exact contrast color values (rare - auto-generated contrast is usually sufficient)\n - You want to mix auto-generated and manually specified color groups\n</use_case>\n\n<output_formats>\n - \"sass\" (default): Generates Sass code with palette map structure. Requires Sass compilation.\n - \"css\": Generates CSS custom properties (variables) directly. Ready to use in any CSS file.\n\n Use \"css\" output when:\n - Working with vanilla CSS projects without Sass\n - You want immediately usable CSS variables\n - Building prototypes or quick demos\n - Using CSS-in-JS or other non-Sass styling approaches\n</output_formats>\n\n<workflow>\n 1. For each color group, choose a mode:\n - mode:\"shades\" → Auto-generate all shades from baseColor using shades() function\n - mode:\"explicit\" → Manually specify every shade value\n 2. Validates all explicit shades for:\n - Completeness: All required shades present\n - Color format: Valid CSS color values\n - Luminance progression: 50 lightest → 900 darkest (chromatic colors)\n - Hue consistency: All shades within ±30° hue tolerance (monochromatic)\n 3. Generates Sass code with color() map structure\n 4. Returns any validation warnings\n</workflow>\n\n<important_notes>\n CRITICAL - SHADE PROGRESSION RULES:\n - CHROMATIC colors (primary, secondary, surface, info, success, warn, error):\n Shade 50 = ALWAYS lightest, shade 900 = ALWAYS darkest.\n This is TRUE FOR BOTH light AND dark themes. NEVER invert chromatic colors.\n - GRAY color ONLY: Inverts for dark themes (50=darkest, 900=lightest).\n - DO NOT confuse these rules. Only gray inverts, never primary/secondary/etc.\n\n ⚠️ CRITICAL - MONOCHROMATIC REQUIREMENT:\n Each color group (primary, secondary, etc.) must contain shades of ONE COLOR ONLY.\n Shades are lighter/darker variations of the SAME hue - NOT different colors!\n\n CORRECT example for primary blue:\n 50: \"#E3F2FD\" (very light blue)\n 500: \"#2196F3\" (medium blue)\n 900: \"#0D47A1\" (dark blue)\n → All shades are BLUE, just different lightness levels\n\n WRONG example (DO NOT DO THIS):\n 50: \"#E3F2FD\" (light blue)\n 500: \"#4CAF50\" (green) ← WRONG! Different hue\n 900: \"#9C27B0\" (purple) ← WRONG! Different hue\n → This creates a rainbow, not a shade palette\n\n Rule: Keep hue constant (±30° tolerance), vary only lightness and saturation.\n\n CHROMATIC COLORS (primary, secondary, surface, info, success, warn, error):\n - Explicit mode requires 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\n - Shade 50 = lightest, shade 900 = darkest (SAME for light AND dark themes)\n - ALL shades must be the SAME HUE (monochromatic) - see requirement above\n - A100-A700 are accent shades (same hue, typically more saturated)\n\n GRAY COLOR (the ONLY color that inverts):\n - Explicit mode requires 10 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900\n - LIGHT themes: 50 = lightest (near white), 900 = darkest (near black)\n - DARK themes: 50 = darkest, 900 = lightest (INVERTED progression)\n - Gray inverts because text/UI elements need to contrast against the surface\n\n CONTRAST COLORS (AUTO-GENERATED - DO NOT PROVIDE):\n - DO NOT include contrastOverrides in your input - OMIT THIS FIELD ENTIRELY\n - The system AUTOMATICALLY generates contrast colors using adaptive-contrast()\n - For each shade, the generated Sass output will include:\n '500': #4CAF50,\n '500-contrast': adaptive-contrast(#4CAF50), ← AUTO-GENERATED\n '500-raw': #4CAF50,\n - The adaptive-contrast() function auto-selects black or white for readability\n - Only provide contrastOverrides if you have a specific accessibility audit\n requiring exact contrast color values (this is extremely rare)\n\n MIXING MODES:\n - You can use \"shades\" mode for some colors and \"explicit\" for others\n - Example: explicit primary, shades-based secondary and surface\n\n SASS FILE PLACEMENT:\n - When combining Sass output from multiple tools into one file, all @use rules\n must appear at the top before any other statements. Deduplicate @use lines\n that share the same module path.\n</important_notes>\n\n<output>\n Returns:\n - Generated Sass code with color() map definitions, OR\n - Generated CSS with custom properties (:root { --ig-primary-50: ...; })\n - Summary of which colors use shades() vs explicit values\n - Variable name created (e.g., $custom-light-palette) (Sass only)\n - Validation warnings (if any)\n</output>\n\n<error_handling>\n Validation FAILS (returns error, no code generated) if:\n - Missing required shades in explicit mode\n - Invalid CSS color format in any shade\n\n Validation WARNS (generates code with warnings) if:\n - Luminance progression incorrect (50 darker than 900)\n - Hue inconsistency detected (shades not monochromatic)\n - Gray progression doesn't match variant (light vs dark)\n</error_handling>\n\n<example>\n Brand green with exact shades (NOTE: ALL shades are GREEN - same hue, different lightness):\n\n INPUT (what you provide - NO contrastOverrides needed):\n {\n \"variant\": \"light\",\n \"primary\": {\n \"mode\": \"explicit\",\n \"shades\": {\n \"50\": \"#E8F5E9\",\n \"100\": \"#C8E6C9\",\n \"200\": \"#A5D6A7\",\n \"300\": \"#81C784\",\n \"400\": \"#66BB6A\",\n \"500\": \"#4CAF50\",\n \"600\": \"#43A047\",\n \"700\": \"#388E3C\",\n \"800\": \"#2E7D32\",\n \"900\": \"#1B5E20\",\n \"A100\": \"#B9F6CA\",\n \"A200\": \"#69F0AE\",\n \"A400\": \"#00E676\",\n \"A700\": \"#00C853\"\n }\n // ↑ Only provide shades - contrast colors are AUTO-GENERATED\n },\n \"secondary\": { \"mode\": \"shades\", \"baseColor\": \"#FF9800\" },\n \"surface\": { \"mode\": \"shades\", \"baseColor\": \"#FAFAFA\" }\n }\n\n GENERATED OUTPUT (contrast colors added automatically):\n 'primary': (\n '500': #4CAF50,\n '500-contrast': adaptive-contrast(#4CAF50), // ← AUTO-GENERATED\n '500-raw': #4CAF50, // ← AUTO-GENERATED\n // ... same pattern for all 14 shades\n )\n</example>\n\n<related_tools>\n - detect_platform: Run first to get correct platform value\n - create_palette: Use for simpler cases with mid-range luminance colors\n - create_theme: Does not support custom palettes; use this tool + manual theme assembly\n</related_tools>\n\n<anti_example>\n ❌ WRONG - DO NOT create shades like this (different hues = broken palette):\n {\n \"primary\": {\n \"mode\": \"explicit\",\n \"shades\": {\n \"50\": \"#E3F2FD\", // blue\n \"100\": \"#DCEDC8\", // green ← WRONG HUE\n \"200\": \"#FFF9C4\", // yellow ← WRONG HUE\n \"500\": \"#9C27B0\", // purple ← WRONG HUE\n \"900\": \"#BF360C\" // red-brown ← WRONG HUE\n }\n }\n }\n This creates a rainbow, not a shade palette. Components will look broken.\n</anti_example>\n\n<related_resources>\n Call read_resource to load reference data:\n - \"theming://presets/palettes\" — preset palette colors for reference\n - \"theming://guidance/colors/usage\" — which shades to use for different purposes\n - \"theming://guidance/colors/roles\" — semantic meaning of each color family\n</related_resources>", + "description": "Generate a custom color palette with fine-grained control over individual shade values.\n\n⚠️ CRITICAL RULES - READ BEFORE GENERATING SHADES:\n1. MONOCHROMATIC: Each color (primary, secondary, etc.) must use ONE HUE only.\n All 14 shades are lighter/darker versions of the SAME color.\n Example: primary blue → all shades must be blue (#E3F2FD light → #0D47A1 dark).\n WRONG: mixing blue, green, purple in one color's shades.\n2. NEVER INVERT: Chromatic colors always go 50=lightest → 900=darkest.\n This applies to BOTH light and dark themes. Only gray inverts for dark themes.\n\n<use_case>\n PREFER create_palette. It derives every shade from a seed by solving for a contrast\n target, so it handles any brand color - light, dark, muted or neon - on its own.\n Every shade is solved for a contrast target, so a seed supplies HUE and SATURATION, not lightness - a very light or very dark brand color yields the same ramp as a mid-tone one. Pass the brand color as-is. The one caveat: a seed with very little chroma (a tinted gray such #6c757d) keeps that tint rather than being saturated, so it produces a tinted-gray ramp; a seed with no measurable hue produces a pure gray one.\n\n Reach for this tool only when:\n - A brand spec mandates exact values for specific shades, and those values must be\n reproduced rather than generated\n - An accessibility audit requires exact contrast color values (rare - the generated\n adaptive-contrast() is normally what you want)\n\n Mixing is supported and is the usual shape: pin the one group the brand specifies and\n leave every other group in \"shades\" mode.\n</use_case>\n\n<output_formats>\n - \"sass\" (default): Generates Sass code with palette map structure. Requires Sass compilation.\n - \"css\": Generates CSS custom properties (variables) directly. Ready to use in any CSS file.\n\n Use \"css\" output when:\n - Working with vanilla CSS projects without Sass\n - You want immediately usable CSS variables\n - Building prototypes or quick demos\n - Using CSS-in-JS or other non-Sass styling approaches\n</output_formats>\n\n<workflow>\n 1. For each color group, choose a mode:\n - mode:\"shades\" → Auto-generate from baseColor (the default choice)\n - mode:\"explicit\" → Reproduce mandated values shade by shade\n 2. Validates explicit shades for completeness, color format, lightness order and hue\n consistency\n 3. Generates Sass code with color() map structure\n 4. Returns any validation warnings\n</workflow>\n\n<important_notes>\n CHROMATIC COLORS (primary, secondary, info, success, warn, error):\n - \"shades\" mode needs only a baseColor - prefer it\n - \"explicit\" mode requires 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\n - In explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you.\n - Chromatic shades are NEVER inverted: 50 is lightest and 900 darkest in BOTH light\n and dark themes\n\n GRAY (the only family that inverts):\n - \"explicit\" mode requires 10 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900\n - LIGHT themes: 50 = lightest, 900 = darkest. DARK themes: inverted\n - Gray inverts because text and UI elements contrast against the surface\n\n SURFACE (not a ramp):\n - A background plus the layers on it, keyed by 6 layers required: base, sunken, raised, overlay, container, seed\n - \"base\" is the page; \"sunken\"/\"raised\"/\"overlay\" step away from it; \"container\" is a\n translucent tint; \"seed\" is the input color\n - There is no hue ramp to keep monochromatic. Palettes still emit numeric surface shades\n for compatibility, but they are deprecated: read and override the roles\n\n CONTRAST COLORS - OMIT contrastOverrides entirely. Each shade automatically gets\n '<shade>-contrast': adaptive-contrast(<color>), which picks black or white for\n readability. Only supply overrides for an audit demanding exact values.\n\n SASS FILE PLACEMENT:\n - When combining Sass output from multiple tools into one file, all @use rules\n must appear at the top before any other statements. Deduplicate @use lines\n that share the same module path.\n</important_notes>\n\n<output>\n Returns:\n - Generated Sass code with color() map definitions, OR\n - Generated CSS with custom properties (:root { --ig-primary-50: ...; })\n - Summary of which colors use shades() vs explicit values\n - Variable name created (e.g., $custom-light-palette) (Sass only)\n - Validation warnings (if any)\n</output>\n\n<error_handling>\n Validation FAILS (returns error, no code generated) if:\n - Missing required shades in explicit mode\n - Invalid CSS color format in any shade\n\n Validation WARNS (generates code with warnings) if:\n - Luminance progression incorrect (50 darker than 900)\n - Hue inconsistency detected (shades not monochromatic)\n - Gray progression doesn't match variant (light vs dark)\n</error_handling>\n\n<example>\n The usual case - every group from a seed:\n {\n \"variant\": \"light\",\n \"primary\": { \"mode\": \"shades\", \"baseColor\": \"#4CAF50\" },\n \"secondary\": { \"mode\": \"shades\", \"baseColor\": \"#FF9800\" },\n \"surface\": { \"mode\": \"shades\", \"baseColor\": \"#FAFAFA\" }\n }\n\n A brand spec pins primary; everything else is still generated:\n {\n \"variant\": \"light\",\n \"primary\": {\n \"mode\": \"explicit\",\n \"shades\": {\n \"50\": \"#E8F5E9\", \"100\": \"#C8E6C9\", \"200\": \"#A5D6A7\", \"300\": \"#81C784\",\n \"400\": \"#66BB6A\", \"500\": \"#4CAF50\", \"600\": \"#43A047\", \"700\": \"#388E3C\",\n \"800\": \"#2E7D32\", \"900\": \"#1B5E20\",\n \"A100\": \"#B9F6CA\", \"A200\": \"#69F0AE\", \"A400\": \"#00E676\", \"A700\": \"#00C853\"\n }\n },\n \"secondary\": { \"mode\": \"shades\", \"baseColor\": \"#FF9800\" },\n \"surface\": { \"mode\": \"shades\", \"baseColor\": \"#FAFAFA\" }\n }\n\n Note: no contrastOverrides in either input. The generated Sass adds\n '500-contrast': adaptive-contrast(#4CAF50) for every shade automatically.\n</example>\n\n<related_tools>\n - detect_platform: Run first to get correct platform value\n - create_palette: Prefer this - it handles any seed color without hand-written shades\n - create_theme: Does not support custom palettes; use this tool + manual theme assembly\n</related_tools>\n\n<anti_example>\n ❌ WRONG - DO NOT create shades like this (different hues = broken palette):\n {\n \"primary\": {\n \"mode\": \"explicit\",\n \"shades\": {\n \"50\": \"#E3F2FD\", // blue\n \"100\": \"#DCEDC8\", // green ← WRONG HUE\n \"200\": \"#FFF9C4\", // yellow ← WRONG HUE\n \"500\": \"#9C27B0\", // purple ← WRONG HUE\n \"900\": \"#BF360C\" // red-brown ← WRONG HUE\n }\n }\n }\n This creates a rainbow, not a shade palette. Components will look broken.\n</anti_example>\n\n<related_resources>\n Call read_resource to load reference data:\n - \"theming://presets/palettes\" — preset palette colors for reference\n - \"theming://guidance/colors/usage\" — which shades to use for different purposes\n - \"theming://guidance/colors/roles\" — semantic meaning of each color family\n</related_resources>", "execution": { "taskSupport": "forbidden" }, - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color - prefer this\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIn explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you." }, "gray": { "anyOf": [ - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color - prefer this\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIn explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you." }, "licensed": { "description": "Use licensed @infragistics package (Angular only). Set to true if using @infragistics/igniteui-angular from private ProGet registry. Defaults to false (uses open-source igniteui-angular from npm). Note: igniteui-theming is always free/OSS for all other platforms.", - "description": "Base color for automatic shade generation using shades() function. Choose a mid-luminance color (0.1-0.4) for best results. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").", + "description": "Base color for automatic shade generation using shades() function. Pass the brand color as-is; its lightness does not need adjusting. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").", "pattern": "^(#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgba?\\(.+\\)|hsla?\\(.+\\)|hwb\\(.+\\)|lab\\(.+\\)|lch\\(.+\\)|oklab\\(.+\\)|oklch\\(.+\\)|color\\(.+\\)|[a-z]+)$", "type": "string" }, - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color - prefer this\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIn explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you." }, "secondary": { "anyOf": [ - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color - prefer this\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIn explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you." }, "success": { "$ref": "#/properties/info", - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color - prefer this\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIn explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you." }, "surface": { "anyOf": [ - "$ref": "#/properties/primary/anyOf/1" + "additionalProperties": false, + "properties": { + "contrastOverrides": { + "additionalProperties": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + }, + "description": "USUALLY OMIT THIS FIELD. Contrast colors are auto-generated using adaptive-contrast(). Only provide this if you have specific accessibility requirements with exact contrast values (rare). When omitted (recommended), the generated Sass code automatically includes adaptive-contrast(#shadeColor) for each shade, which auto-selects black or white for optimal readability.", + "propertyNames": { + "enum": [ + "base", + "sunken", + "raised", + "overlay", + "container", + "seed" + ] + }, + "type": "object" + }, + "mode": { + "const": "explicit", + "type": "string" + }, + "shades": { + "additionalProperties": false, + "description": "Object with all surface layer values. 6 layers required: base, sunken, raised, overlay, container, seed. \"base\" is the page background; \"sunken\" is darker, \"raised\" and \"overlay\" lighter (inverted for dark themes); \"container\" is a translucent black/white tint; \"seed\" is the original input color.", + "properties": { + "base": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + }, + "container": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + }, + "overlay": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + }, + "raised": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + }, + "seed": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + }, + "sunken": { + "$ref": "#/properties/primary/anyOf/1/properties/shades/properties/50" + } + }, + "required": [ + "base", + "sunken", + "raised", + "overlay", + "container", + "seed" + ], + "type": "object" + } + }, + "required": [ + "mode", + "shades" + ], + "type": "object" } ], - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Surface definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates the background and its layers from one color\n• mode: \"explicit\" + shades: Manually specify all 6 layers required: base, sunken, raised, overlay, container, seed\nIMPORTANT: A surface is a background plus the layers that sit on it, so it is addressed by ROLE, not by shade number. \"base\" is the page background; \"sunken\", \"raised\" and \"overlay\" step away from it; \"container\" is a translucent tint. A role with no room in its direction resolves back onto \"base\"." }, "variant": { "description": "Theme variant: \"light\" (light backgrounds, dark text) or \"dark\" (dark backgrounds, light text). Defaults to \"light\".", - "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIMPORTANT: All shades must be MONOCHROMATIC (same hue). Shades are lighter/darker versions of ONE color, not different colors." + "description": "Color definition object with mode selection:\n• mode: \"shades\" + baseColor: Auto-generates all shades from one color - prefer this\n• mode: \"explicit\" + shades: Manually specify all 14 shades required: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700\nIn explicit mode, all shades in a group must be the SAME HUE (±30°) and run 50 lightest to 900 darkest - they are lightness steps of one color, not different colors. Shades mode enforces this for you." } }, "required": [
--- pinned/create_palette +++ observed/create_palette { - "description": "Generate a color palette for Ignite UI themes using the palette() Sass function.\n\n<use_case>\n Use this tool when you have base colors and want to auto-generate a complete palette\n with all shade variations (50-900, A100-A700). Best for colors with mid-range luminance\n that will produce good automatic shade distribution.\n</use_case>\n\n<output_formats>\n - \"sass\" (default): Generates Sass code using the palette() function. Requires Sass compilation.\n - \"css\": Generates CSS custom properties (variables) directly. Ready to use in any CSS file.\n\n Use \"css\" output when:\n - Working with vanilla CSS projects without Sass\n - You want immediately usable CSS variables\n - Using CSS-in-JS or other non-Sass styling approaches\n</output_formats>\n\n<workflow>\n 1. Validates input colors against the theme variant\n 2. Analyzes color luminance for shade generation suitability\n 3. Generates Sass code OR compiles to CSS based on output parameter\n 4. Adds warning comments to code if issues detected\n 5. Returns validation warnings and tips in response\n</workflow>\n\n<important_notes>\n - Requires primary, secondary, and surface colors (matches Sass palette() API)\n - Gray, info, success, warn, error are optional (use design system defaults)\n - Surface color should match variant: light colors for \"light\", dark for \"dark\"\n - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation.\n\n SHADE PROGRESSION (important):\n - Primary, secondary, and all chromatic colors: shades are NEVER inverted.\n The palette() function always generates 50=lightest to 900=darkest.\n - Only gray shades behave differently based on variant (for text contrast).\n - DO NOT manually invert primary/secondary colors for dark themes.\n\n SASS FILE PLACEMENT:\n - When combining Sass output from multiple tools into one file, all @use rules\n must appear at the top before any other statements. Deduplicate @use lines\n that share the same module path.\n</important_notes>\n\n<output>\n Returns:\n - Generated Sass code with palette() function call, OR\n - Generated CSS with custom properties (:root { --ig-primary-50: ...; })\n - Platform-specific module imports (Sass only)\n - Validation warnings (if any colors have issues)\n - Variable name created (e.g., $my-palette) (Sass only)\n</output>\n\n<error_handling>\n - Invalid color format: Returns error with format examples\n - Variant mismatch: Warns if surface color doesn't match theme variant\n - Luminance issues: Warns with recommendation to use create_custom_palette\n</error_handling>\n\n<example>\n Blue brand with orange accent on light theme (Sass output):\n {\n \"primary\": \"#1976D2\",\n \"secondary\": \"#FF9800\",\n \"surface\": \"#FAFAFA\",\n \"variant\": \"light\"\n }\n\n Same palette as CSS variables:\n {\n \"primary\": \"#1976D2\",\n \"secondary\": \"#FF9800\",\n \"surface\": \"#FAFAFA\",\n \"variant\": \"light\",\n \"output\": \"css\"\n }\n</example>\n\n<related_tools>\n - detect_platform: Run first to get correct platform value\n - create_custom_palette: Use if this tool warns about luminance issues\n - create_theme: Use instead if you want palette + typography + elevations together\n</related_tools>\n\n<related_resources>\n Call read_resource to load reference data:\n - \"theming://presets/palettes\" — preset palette colors\n - \"theming://guidance/colors\" — color guidance overview\n - \"theming://guidance/colors/rules\" — light/dark theme color rules\n</related_resources>", + "description": "Generate a color palette for Ignite UI themes using the palette() Sass function.\n\n<use_case>\n Use this tool when you have base colors and want to auto-generate a complete palette\n with all shade variations (50-900, A100-A700). This is the right tool for almost every\n palette - pass the brand colors and let the generator do the rest.\n</use_case>\n\n<output_formats>\n - \"sass\" (default): Generates Sass code using the palette() function. Requires Sass compilation.\n - \"css\": Generates CSS custom properties (variables) directly. Ready to use in any CSS file.\n\n Use \"css\" output when:\n - Working with vanilla CSS projects without Sass\n - You want immediately usable CSS variables\n - Using CSS-in-JS or other non-Sass styling approaches\n</output_formats>\n\n<workflow>\n 1. Validates input colors against the theme variant\n 2. Generates Sass code OR compiles to CSS based on output parameter\n 3. Adds warning comments to code if issues detected\n 4. Returns validation warnings and tips in response\n</workflow>\n\n<important_notes>\n - Requires primary, secondary, and surface colors (matches Sass palette() API)\n - Gray, info, success, warn, error are optional (use design system defaults)\n - Surface color should match variant: light colors for \"light\", dark for \"dark\"\n - Every shade is solved for a contrast target, so a seed supplies HUE and SATURATION, not lightness - a very light or very dark brand color yields the same ramp as a mid-tone one. Pass the brand color as-is. The one caveat: a seed with very little chroma (a tinted gray such #6c757d) keeps that tint rather than being saturated, so it produces a tinted-gray ramp; a seed with no measurable hue produces a pure gray one.\n\n SHADE PROGRESSION (important):\n - Primary, secondary, and all chromatic colors: shades are NEVER inverted.\n The palette() function always generates 50=lightest to 900=darkest.\n - Only gray shades behave differently based on variant (for text contrast).\n - DO NOT manually invert primary/secondary colors for dark themes.\n\n SASS FILE PLACEMENT:\n - When combining Sass output from multiple tools into one file, all @use rules\n must appear at the top before any other statements. Deduplicate @use lines\n that share the same module path.\n</important_notes>\n\n<output>\n Returns:\n - Generated Sass code with palette() function call, OR\n - Generated CSS with custom properties (:root { --ig-primary-50: ...; })\n - Platform-specific module imports (Sass only)\n - Validation warnings (if any colors have issues)\n - Variable name created (e.g., $my-palette) (Sass only)\n</output>\n\n<error_handling>\n - Invalid color format: Returns error with format examples\n - Variant mismatch: Warns if surface color doesn't match theme variant\n</error_handling>\n\n<example>\n Blue brand with orange accent on light theme (Sass output):\n {\n \"primary\": \"#1976D2\",\n \"secondary\": \"#FF9800\",\n \"surface\": \"#FAFAFA\",\n \"variant\": \"light\"\n }\n\n Same palette as CSS variables:\n {\n \"primary\": \"#1976D2\",\n \"secondary\": \"#FF9800\",\n \"surface\": \"#FAFAFA\",\n \"variant\": \"light\",\n \"output\": \"css\"\n }\n</example>\n\n<related_tools>\n - detect_platform: Run first to get correct platform value\n - create_custom_palette: Only when exact per-shade values are mandated by a brand spec\n - create_theme: Use instead if you want palette + typography + elevations together\n</related_tools>\n\n<related_resources>\n Call read_resource to load reference data:\n - \"theming://presets/palettes\" — preset palette colors\n - \"theming://guidance/colors\" — color guidance overview\n - \"theming://guidance/colors/rules\" — light/dark theme color rules\n</related_resources>", "execution": { "taskSupport": "forbidden" }, + "generator": { + "description": "OPTIONAL - omit it. \"legacy\" reproduces the original multiplier-based ramps and exists only to keep an existing theme byte-identical while migrating.", + "enum": [ + "fitted", + "legacy" + ], + "type": "string" + }, "gray": { "description": "Gray/neutral base color for text, borders, disabled states. Optional - defaults from design system preset. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").", "pattern": "^(#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgba?\\(.+\\)|hsla?\\(.+\\)|hwb\\(.+\\)|lab\\(.+\\)|lch\\(.+\\)|oklab\\(.+\\)|oklch\\(.+\\)|color\\(.+\\)|[a-z]+)$", + "scales": { + "anyOf": [ + { + "anyOf": [ + { + "type": "string" + }, + { + "additionalProperties": false, + "properties": { + "anchor": { + "enum": [ + "surface", + "white" + ], + "type": "string" + }, + "curve": { + "items": { + "type": "number" + }, + "maxItems": 4, + "minItems": 4, + "type": "array" + }, + "range": { + "items": { + "type": "number" + }, + "maxItems": 2, + "minItems": 2, + "type": "array" + } + }, + "type": "object" + } + ] + }, + { + "additionalProperties": { + "$ref": "#/properties/scales/anyOf/0" + }, + "type": "object" + } + ], + "description": "OPTIONAL - omit unless asked to match another system's rhythm. Preset name (\"even\" | \"material\" | \"tailwind\" | \"carbon\"), or a map keyed by family: {\"gray\": \"carbon\"}. To match a ladder you have seen, call fit_color_scale and pass back its spec - never hand-write a curve." + }, "secondary": { "description": "Secondary/accent color - used for FABs, selection controls, highlights. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").", "pattern": "^(#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgba?\\(.+\\)|hsla?\\(.+\\)|hwb\\(.+\\)|lab\\(.+\\)|lch\\(.+\\)|oklab\\(.+\\)|oklch\\(.+\\)|color\\(.+\\)|[a-z]+)$",
--- pinned/create_theme +++ observed/create_theme { - "description": "Generate a complete, production-ready Ignite UI theme with palette, typography, and elevations.\n\n<use_case>\n Use this tool as the starting point for new projects. It generates everything needed\n for a working theme in a single operation: color palette, typography setup, elevation\n shadows, and the theme application mixin.\n</use_case>\n\n<workflow>\n 1. Analyzes input colors for palette shade generation suitability\n 2. Creates color palette using palette() function\n 3. Sets up typography with specified font family (if includeTypography: true)\n 4. Configures elevations based on design system (if includeElevations: true)\n 5. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true)\n 6. Applies the theme using the theme() mixin\n 7. Returns luminance warnings if any colors may produce poor shades\n</workflow>\n\n<important_notes>\n REQUIRED COLORS:\n - primaryColor: Main brand color\n - secondaryColor: Accent/highlight color\n - surfaceColor: Background color (should match variant)\n\n SHADE PROGRESSION (important):\n - Primary and secondary colors are NEVER inverted between light/dark themes.\n - The palette() function generates shades 50=lightest to 900=darkest for ALL\n chromatic colors regardless of theme variant.\n - Only gray shades behave differently (for text contrast against surface).\n - DO NOT provide inverted primary/secondary colors for dark themes.\n\n LUMINANCE ANALYSIS:\n - Colors with extreme luminance (< 0.05 or > 0.45) may produce suboptimal automatic shade generation.\n - If warnings appear, consider using create_custom_palette for those colors\n\n PLATFORM DIFFERENCES:\n - Angular: Uses igniteui-angular/theming with core() and theme() mixins\n - Web Components: Uses igniteui-theming directly with palette(), typography(), elevations() mixins\n - React: Uses igniteui-theming directly (same as Web Components), common with Vite/Next.js\n - Blazor: Uses igniteui-theming for Sass compilation, theme CSS referenced in Blazor components\n\n SASS FILE PLACEMENT:\n - When combining Sass output from multiple tools into one file, all @use rules\n must appear at the top before any other statements. Deduplicate @use lines\n that share the same module path.\n</important_notes>\n\n<output>\n Returns:\n - Complete Sass code with all theme components\n - Luminance analysis warnings (if applicable)\n - List of variables created/used\n - Platform-specific guidance\n</output>\n\n<error_handling>\n - Invalid color format: Returns error with format examples\n - Luminance issues: Warns but still generates code (may produce suboptimal shades)\n - Variant mismatch: Warns if surface color doesn't match theme variant\n</error_handling>\n\n<example>\n Complete Material Design blue theme:\n {\n \"platform\": \"angular\",\n \"designSystem\": \"material\",\n \"primaryColor\": \"#1976D2\",\n \"secondaryColor\": \"#FF9800\",\n \"surfaceColor\": \"#FAFAFA\",\n \"variant\": \"light\",\n \"fontFamily\": \"'Roboto', sans-serif\",\n \"includeTypography\": true,\n \"includeElevations\": true\n }\n</example>\n\n<next_steps>\n After generating a theme:\n 1. Review any luminance warnings in the output\n 2. If warnings suggest shade generation issues:\n - Use create_custom_palette for problematic colors\n - Manually assemble theme with custom palette\n 3. Import the generated Sass file in your application's main styles\n 4. Customize individual component themes as needed using component schema overrides\n</next_steps>\n\n<related_tools>\n - detect_platform: Run first to auto-detect platform from package.json\n - create_custom_palette: Use for colors that produce luminance warnings\n - create_palette: Use if you only need a palette without full theme\n - create_typography: Use if you only need typography setup\n - create_elevations: Use if you only need elevation shadows\n</related_tools>\n\n <related_resources>\n Call read_resource to load reference data:\n - \"theming://presets/palettes\" — preset palette colors\n - \"theming://guidance/colors\" — color guidance overview\n - \"theming://guidance/colors/rules\" — light/dark theme color rules\n - \"theming://platforms/angular\" — Angular platform configuration\n - \"theming://platforms/webcomponents\" — Web Components platform configuration\n - \"theming://platforms/react\" — React platform configuration\n - \"theming://platforms/blazor\" — Blazor platform configuration\n </related_resources>", + "description": "Generate a complete, production-ready Ignite UI theme with palette, typography, and elevations.\n\n<use_case>\n Use this tool as the starting point for new projects. It generates everything needed\n for a working theme in a single operation: color palette, typography setup, elevation\n shadows, and the theme application mixin.\n</use_case>\n\n<workflow>\n 1. Creates color palette using palette() function\n 2. Sets up typography with specified font family (if includeTypography: true)\n 3. Configures elevations based on design system (if includeElevations: true)\n 4. Configures spacing utilities for Web Components, React, and Blazor (if includeSpacing: true)\n 5. Applies the theme using the theme() mixin\n</workflow>\n\n<important_notes>\n REQUIRED COLORS:\n - primaryColor: Main brand color\n - secondaryColor: Accent/highlight color\n - surfaceColor: Background color (should match variant)\n\n SHADE PROGRESSION (important):\n - Primary and secondary colors are NEVER inverted between light/dark themes.\n - The palette() function generates shades 50=lightest to 900=darkest for ALL\n chromatic colors regardless of theme variant.\n - Only gray shades behave differently (for text contrast against surface).\n - DO NOT provide inverted primary/secondary colors for dark themes.\n\n SEED COLORS:\n - Every shade is solved for a contrast target, so a seed supplies HUE and SATURATION, not lightness - a very light or very dark brand color yields the same ramp as a mid-tone one. Pass the brand color as-is. The one caveat: a seed with very little chroma (a tinted gray such #6c757d) keeps that tint rather than being saturated, so it produces a tinted-gray ramp; a seed with no measurable hue produces a pure gray one.\n\n PLATFORM DIFFERENCES:\n - Angular: Uses igniteui-angular/theming with core() and theme() mixins\n - Web Components: Uses igniteui-theming directly with palette(), typography(), elevations() mixins\n - React: Uses igniteui-theming directly (same as Web Components), common with Vite/Next.js\n - Blazor: Uses igniteui-theming for Sass compilation, theme CSS referenced in Blazor components\n\n SASS FILE PLACEMENT:\n - When combining Sass output from multiple tools into one file, all @use rules\n must appear at the top before any other statements. Deduplicate @use lines\n that share the same module path.\n</important_notes>\n\n<output>\n Returns:\n - Complete Sass code with all theme components\n - List of variables created/used\n - Platform-specific guidance\n</output>\n\n<error_handling>\n - Invalid color format: Returns error with format examples\n - Variant mismatch: Warns if surface color doesn't match theme variant\n</error_handling>\n\n<example>\n Complete Material Design blue theme:\n {\n \"platform\": \"angular\",\n \"designSystem\": \"material\",\n \"primaryColor\": \"#1976D2\",\n \"secondaryColor\": \"#FF9800\",\n \"surfaceColor\": \"#FAFAFA\",\n \"variant\": \"light\",\n \"fontFamily\": \"'Roboto', sans-serif\",\n \"includeTypography\": true,\n \"includeElevations\": true\n }\n</example>\n\n<next_steps>\n After generating a theme:\n 1. Import the generated Sass file in your application's main styles\n 2. Customize individual component themes as needed using component schema overrides\n</next_steps>\n\n<related_tools>\n - detect_platform: Run first to auto-detect platform from package.json\n - create_custom_palette: Only when exact per-shade values are mandated by a brand spec\n - create_palette: Use if you only need a palette without full theme\n - create_typography: Use if you only need typography setup\n - create_elevations: Use if you only need elevation shadows\n</related_tools>\n\n <related_resources>\n Call read_resource to load reference data:\n - \"theming://presets/palettes\" — preset palette colors\n - \"theming://guidance/colors\" — color guidance overview\n - \"theming://guidance/colors/rules\" — light/dark theme color rules\n - \"theming://platforms/angular\" — Angular platform configuration\n - \"theming://platforms/webcomponents\" — Web Components platform configuration\n - \"theming://platforms/react\" — React platform configuration\n - \"theming://platforms/blazor\" — Blazor platform configuration\n </related_resources>", "execution": { "taskSupport": "forbidden" }, + "generator": { + "description": "OPTIONAL - omit it. \"legacy\" reproduces the original multiplier-based ramps and exists only to keep an existing theme byte-identical while migrating.", + "enum": [ + "fitted", + "legacy" + ], + "type": "string" + }, "includeElevations": { "default": true, "description": "Include elevation shadows in the generated theme. Set to false if you want to configure elevations separately. Defaults to true.", + "scales": { + "anyOf": [ + { + "anyOf": [ + { + "type": "string" + }, + { + "additionalProperties": false, + "properties": { + "anchor": { + "enum": [ + "surface", + "white" + ], + "type": "string" + }, + "curve": { + "items": { + "type": "number" + }, + "maxItems": 4, + "minItems": 4, + "type": "array" + }, + "range": { + "items": { + "type": "number" + }, + "maxItems": 2, + "minItems": 2, + "type": "array" + } + }, + "type": "object" + } + ] + }, + { + "additionalProperties": { + "$ref": "#/properties/scales/anyOf/0" + }, + "type": "object" + } + ], + "description": "OPTIONAL - omit unless asked to match another system's rhythm. Preset name (\"even\" | \"material\" | \"tailwind\" | \"carbon\"), or a map keyed by family: {\"gray\": \"carbon\"}. To match a ladder you have seen, call fit_color_scale and pass back its spec - never hand-write a curve." + }, "secondaryColor": { "description": "Secondary/accent color for the theme - used for highlights and selection. Valid CSS color formats: hex (\"#3F51B5\", \"#3F51B5AA\"), rgb/rgba (\"rgb(63, 81, 181)\", \"rgb(63 81 181 / 0.5)\"), hsl/hsla (\"hsl(231, 48%, 48%)\", \"hsl(231 48% 48% / 0.5)\"), hwb (\"hwb(231 20% 30%)\"), lab/lch (\"lab(50% 40 59)\", \"lch(50% 80 30)\"), oklab/oklch (\"oklab(59% 0.1 0.1)\", \"oklch(60% 0.15 50)\"), color() for wide-gamut (\"color(display-p3 1 0.5 0)\"), or CSS named colors (\"indigo\", \"rebeccapurple\").", "pattern": "^(#[0-9a-fA-F]{3,4}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgba?\\(.+\\)|hsla?\\(.+\\)|hwb\\(.+\\)|lab\\(.+\\)|lch\\(.+\\)|oklab\\(.+\\)|oklch\\(.+\\)|color\\(.+\\)|[a-z]+)$",
+ tool added: fit_color_scale
--- pinned/read_resource +++ observed/read_resource { - "description": "Read a theming resource by URI. Returns reference data such as platform configurations, color palette presets, typography presets, color guidance, and layout documentation.\n\n<use_case>\n Use this tool to load reference data before or during theme generation. Other tools\n reference these resources in their related_resources sections — call this tool with\n the listed URI to retrieve the data.\n\n Common scenarios:\n - Load palette presets to see available colors before creating a palette\n - Read color guidance to understand shade usage and semantic roles\n - Check platform configuration for usage examples and supported features\n - Read layout documentation for spacing, sizing, and roundness details\n</use_case>\n\n<workflow>\n 1. Identify the resource URI from the available_resources list or from a related_resources hint in another tool\n 2. Call this tool with the URI\n 3. Use the returned data to inform your next action\n</workflow>\n\n<output>\n Returns the resource content as text. Format depends on the resource:\n - application/json resources return JSON data\n - text/markdown resources return Markdown documentation\n</output>\n\n<error_handling>\n If the URI is not found, returns the list of all available resource URIs.\n</error_handling>\n\n<available_resources>\n Platforms:\n - \"theming://platforms\" — Supported Platforms\n - \"theming://platforms/angular\" — Angular Platform Config\n - \"theming://platforms/webcomponents\" — Web Components Platform Config\n - \"theming://platforms/react\" — React Platform Config\n - \"theming://platforms/blazor\" — Blazor Platform Config\n - \"theming://platforms/generic\" — Generic Platform Config\n Presets:\n - \"theming://presets/palettes\" — Color Palettes - All Presets\n - \"theming://presets/palettes/light\" — Color Palettes - Light\n - \"theming://presets/palettes/dark\" — Color Palettes - Dark\n - \"theming://presets/typography\" — Typography Presets\n - \"theming://presets/elevations\" — Elevation Presets\n - \"theming://presets/chart-brushes\" — Chart Series Brush Palettes\n Guidance:\n - \"theming://guidance/platform-setup\" — Platform Setup Guide\n - \"theming://guidance/colors\" — Color Guidance Overview\n - \"theming://guidance/colors/rules\" — Color Rules - Light and Dark Themes\n - \"theming://guidance/colors/usage\" — Color Shade Reference\n - \"theming://guidance/colors/roles\" — Color Semantic Roles\n - \"theming://guidance/colors/states\" — Color Interaction States\n - \"theming://guidance/colors/themes\" — Color Design System Patterns\n - \"theming://guidance/colors/charts\" — Chart Series Colors Guidance\n Layout Docs:\n - \"theming://docs/spacing-and-sizing\" — Spacing and Sizing Overview\n - \"theming://docs/functions/pad\" — Pad Spacing Function\n - \"theming://docs/functions/sizable\" — Sizable Value Function\n - \"theming://docs/functions/border-radius\" — Border Radius Function\n - \"theming://docs/mixins/spacing\" — Spacing Mixin\n - \"theming://docs/mixins/sizing\" — Sizing Mixin\n - \"theming://docs/mixins/sizable\" — Sizable Mixin\n</available_resources>", + "description": "Read a theming resource by URI. Returns reference data such as platform configurations, color palette presets, typography presets, color guidance, and layout documentation.\n\n<use_case>\n Use this tool to load reference data before or during theme generation. Other tools\n reference these resources in their related_resources sections — call this tool with\n the listed URI to retrieve the data.\n\n Common scenarios:\n - Load palette presets to see available colors before creating a palette\n - Read color guidance to understand shade usage and semantic roles\n - Check platform configuration for usage examples and supported features\n - Read layout documentation for spacing, sizing, and roundness details\n</use_case>\n\n<workflow>\n 1. Identify the resource URI from the available_resources list or from a related_resources hint in another tool\n 2. Call this tool with the URI\n 3. Use the returned data to inform your next action\n</workflow>\n\n<output>\n Returns the resource content as text. Format depends on the resource:\n - application/json resources return JSON data\n - text/markdown resources return Markdown documentation\n</output>\n\n<error_handling>\n If the URI is not found, returns the list of all available resource URIs.\n</error_handling>\n\n<available_resources>\n Platforms:\n - \"theming://platforms\" — Supported Platforms\n - \"theming://platforms/angular\" — Angular Platform Config\n - \"theming://platforms/webcomponents\" — Web Components Platform Config\n - \"theming://platforms/react\" — React Platform Config\n - \"theming://platforms/blazor\" — Blazor Platform Config\n - \"theming://platforms/generic\" — Generic Platform Config\n Presets:\n - \"theming://presets/palettes\" — Color Palettes - All Presets\n - \"theming://presets/palettes/light\" — Color Palettes - Light\n - \"theming://presets/palettes/dark\" — Color Palettes - Dark\n - \"theming://presets/typography\" — Typography Presets\n - \"theming://presets/elevations\" — Elevation Presets\n - \"theming://presets/chart-brushes\" — Chart Series Brush Palettes\n Guidance:\n - \"theming://guidance/platform-setup\" — Platform Setup Guide\n - \"theming://guidance/colors\" — Color Guidance Overview\n - \"theming://guidance/colors/rules\" — Color Rules - Light and Dark Themes\n - \"theming://guidance/colors/usage\" — Color Shade Reference\n - \"theming://guidance/colors/roles\" — Color Semantic Roles\n - \"theming://guidance/colors/states\" — Color Interaction States\n - \"theming://guidance/colors/themes\" — Color Design System Patterns\n - \"theming://guidance/colors/charts\" — Chart Series Colors Guidance\n - \"theming://guidance/colors/scales\" — Shade Scales\n Layout Docs:\n - \"theming://docs/spacing-and-sizing\" — Spacing and Sizing Overview\n - \"theming://docs/functions/pad\" — Pad Spacing Function\n - \"theming://docs/functions/sizable\" — Sizable Value Function\n - \"theming://docs/functions/border-radius\" — Border Radius Function\n - \"theming://docs/mixins/spacing\" — Spacing Mixin\n - \"theming://docs/mixins/sizing\" — Sizing Mixin\n - \"theming://docs/mixins/sizable\" — Sizable Mixin\n</available_resources>", "execution": { "taskSupport": "forbidden" },
Current tools
Show all 15 tool fingerprints
create_component_theme
create_custom_palette
create_elevations
create_palette
create_theme
create_typography
detect_platform
fit_color_scale
get_chart_series_colors
get_color
get_component_design_tokens
read_resource
set_roundness
set_size
set_spacing
Watch this server yourself
If you run this server, put the proxy in front of it. It pins these exact fingerprints on first connect and stops the session if they move.
npx -y mcp-pin@0.2.3 -- <your igniteui-theming command>
Or subscribe to this page's RSS feed to be told when it changes.
Badge
The badge states one fact about time and nothing else. It never claims a server is safe.
[](https://mcp-pin.gautamkhosla.com/servers/d35105fac6c863c6.html)