igniteui-theming 25.0.2 → 25.0.3

package/dist/mcp/index.js

@@ -21,7 +21,7 @@ import { SHADE_LEVELS, ACCENT_SHADE_LEVELS, PALETTE_COLOR_GROUPS } from "./utils
 function createServer() {
   const server = new McpServer({
     name: "igniteui-theming",
-    version: "v25.0.2",
+    version: "v25.0.3",
     description: "Generate Sass theming code for Ignite UI components - create palettes, typography, elevations, and complete themes"
   });
   registerTools(server);

package/dist/mcp/json/components/themes.json.js

@@ -6,7 +6,7 @@ const calendar = /* @__PURE__ */ JSON.parse('{"name":"calendar","themeFunctionNa
 const card = { "name": "card", "themeFunctionName": "card-theme", "description": "Card Theme", "primaryTokens": [{ "name": "background", "description": "The card background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The card background color. PRIMARY - derives all text colors." }, { "name": "outline-color", "type": "Color", "description": "The color of the outline for outlined type cards." }, { "name": "header-text-color", "type": "Color", "description": "The text color of the card title. Auto-derived from background." }, { "name": "subtitle-text-color", "type": "Color", "description": "The text color of the card subtitle. Auto-derived from background (muted)." }, { "name": "content-text-color", "type": "Color", "description": "The text color of the card content. Auto-derived from background (muted)." }, { "name": "actions-text-color", "type": "Color", "description": "The text color of the card buttons. Auto-derived from background." }, { "name": "resting-shadow", "type": "List", "description": "The shadow of the card in its resting state." }, { "name": "hover-shadow", "type": "List", "description": "The shadow of the card in its hover state." }, { "name": "border-radius", "type": "List", "description": "The border radius used for card component.\n" }] };
 const carousel = { "name": "carousel", "themeFunctionName": "carousel-theme", "description": "Carousel Theme", "primaryTokens": [{ "name": "button-background", "description": "The nav button background." }, { "name": "indicator-background", "description": "The indicator container background." }], "primaryTokensSummary": "Button colors cascade from button-background through hover and disabled states.", "tokens": [{ "name": "slide-background", "type": "Color", "description": "The slide background color." }, { "name": "button-background", "type": "Color", "description": "The previous/next buttons idle background color. PRIMARY - derives arrow, hover, disabled, focus colors." }, { "name": "button-hover-background", "type": "Color", "description": "The previous/next buttons hover background color. Auto-derived from button-background." }, { "name": "button-disabled-background", "type": "Color", "description": "The previous/next buttons disabled background color. Auto-derived from button-background." }, { "name": "button-arrow-color", "type": "Color", "description": "The previous/next buttons idle arrow color. Auto-derived from button-background." }, { "name": "button-hover-arrow-color", "type": "Color", "description": "The previous/next buttons hover arrow color. Auto-derived from button-hover-background." }, { "name": "button-disabled-arrow-color", "type": "Color", "description": "The previous/next buttons disabled arrow color. Auto-derived from button-disabled-background." }, { "name": "button-border-color", "type": "Color", "description": "The previous/next buttons idle border color. Auto-derived from button-background (indigo)." }, { "name": "button-hover-border-color", "type": "Color", "description": "The previous/next buttons hover border color. Auto-derived from button-border-color." }, { "name": "button-focus-border-color", "type": "Color", "description": "The navigation buttons border color on focus. Auto-derived from button-focus-arrow-color or button-background." }, { "name": "button-disabled-border-color", "type": "Color", "description": "The previous/next buttons disabled border color." }, { "name": "indicator-background", "type": "Color", "description": "The indicators container background color. PRIMARY - derives dot, border, active, focus colors." }, { "name": "label-indicator-background", "type": "Color", "description": "The label indicator container background color." }, { "name": "indicator-dot-color", "type": "Color", "description": "The idle indicator dot color. Auto-derived from indicator-background." }, { "name": "indicator-hover-dot-color", "type": "Color", "description": "The hover indicator dot color. Auto-derived from indicator-dot-color." }, { "name": "indicator-focus-color", "type": "Color", "description": "The indicators border and dot color on focus. Auto-derived from indicator-background or button-background." }, { "name": "indicator-border-color", "type": "Color", "description": "The idle indicator border color. Auto-derived from indicator-background or indicator-dot-color." }, { "name": "indicator-active-dot-color", "type": "Color", "description": "The active indicator dot color. Auto-derived from indicator-background or button-background." }, { "name": "indicator-active-border-color", "type": "Color", "description": "The active indicator border color. Auto-derived from indicator-active-dot-color." }, { "name": "indicator-active-hover-dot-color", "type": "Color", "description": "The active indicator dot color on hover. Auto-derived from indicator-active-dot-color." }, { "name": "button-shadow", "type": "List", "description": "Shadow underneath the previous/next buttons." }, { "name": "border-radius", "type": "List", "description": "The border radius used for carousel component.\n" }] };
 const chat = { "name": "chat", "themeFunctionName": "chat-theme", "description": "Chat Theme", "primaryTokens": [{ "name": "header-background", "description": "The background color of the chat header." }, { "name": "message-background", "description": "The background color of message bubbles." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the chat component." }, { "name": "header-background", "type": "Color", "description": "The background color of the chat header. PRIMARY - derives header-color." }, { "name": "header-color", "type": "Color", "description": "The text color of the chat header. Auto-derived from header-background." }, { "name": "header-border", "type": "Color", "description": "The color used for the chat header border." }, { "name": "message-background", "type": "Color", "description": "The background color of the sent message bubble. PRIMARY - derives message-color, message-actions-color." }, { "name": "message-color", "type": "Color", "description": "The text color of the chat messages. Auto-derived from message-background." }, { "name": "message-actions-color", "type": "Color", "description": "The icon color of the chat message actions. Auto-derived from message-color." }, { "name": "file-background", "type": "Color", "description": "The background color of the image message container." }, { "name": "file-icon-color", "type": "Color", "description": "The color of the attached file icon." }, { "name": "file-icon-accent-color", "type": "Color", "description": "The accent color of the attached file icon." }, { "name": "image-background", "type": "Color", "description": "The background color of the image message container." }, { "name": "image-border", "type": "Color", "description": "The border color of the image message container." }, { "name": "image-attachment-icon", "type": "Color", "description": "The color of the message attachment icon." }, { "name": "chat-input-border", "type": "Color", "description": "The border color of the chat input area." }, { "name": "progress-indicator-color", "type": "Color", "description": "The color of the progress indicator in the chat component." }, { "name": "code-background", "type": "Color", "description": "The background color of the code snippets in the chat component." }, { "name": "code-border", "type": "Color", "description": "The border color of the code snippets in the chat component." }] };
-const checkbox = { "name": "checkbox", "themeFunctionName": "checkbox-theme", "description": "Checkbox Theme", "primaryTokens": [{ "name": "fill-color", "description": "The checked state border and fill color." }, { "name": "empty-color", "description": "The unchecked border color." }, { "name": "error-color", "description": "The invalid state color." }], "primaryTokensSummary": "Setting just `$fill-color` will theme all checked states consistently.", "tokens": [{ "name": "label-color", "type": "Color", "description": "The text color used for the label text." }, { "name": "label-color-hover", "type": "Color", "description": "The text color used for the label text on hover. Auto-derived from label-color." }, { "name": "empty-color", "type": "Color", "description": "The unchecked border color. PRIMARY for unchecked states." }, { "name": "empty-color-hover", "type": "Color", "description": "The unchecked border color on hover. Auto-derived from empty-color." }, { "name": "empty-fill-color", "type": "Color", "description": "The unchecked fill color." }, { "name": "fill-color", "type": "Color", "description": "The checked border and fill colors. PRIMARY - derives tick-color, focus colors." }, { "name": "fill-color-hover", "type": "Color", "description": "The checked border and fill colors on hover. Auto-derived from fill-color." }, { "name": "tick-color", "type": "Color", "description": "The checked mark color. Auto-derived from fill-color (contrast)." }, { "name": "tick-color-hover", "type": "Color", "description": "The checked mark color on hover." }, { "name": "tick-width", "type": "Number", "description": "The checked mark width." }, { "name": "disabled-color", "type": "Color", "description": "The disabled border and fill colors." }, { "name": "disabled-tick-color", "type": "Color", "description": "The checked mark color in disabled state." }, { "name": "disabled-indeterminate-color", "type": "Color", "description": "The disabled border and fill colors in indeterminate state. Auto-derived from fill-color." }, { "name": "disabled-color-label", "type": "Color", "description": "The disabled label color." }, { "name": "border-radius", "type": "List", "description": "The border radius used for checkbox component." }, { "name": "border-radius-ripple", "type": "List", "description": "The border radius used for checkbox ripple." }, { "name": "focus-outline-color", "type": "Color", "description": "The focus outlined color. Auto-derived from empty-color (indigo) or fill-color (bootstrap)." }, { "name": "focus-outline-color-focused", "type": "Color", "description": "The focus outlined color for focused state. Auto-derived from fill-color (indigo)." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color. Auto-derived from fill-color." }, { "name": "error-color", "type": "Color", "description": "The border and fill colors in invalid state. PRIMARY for error states." }, { "name": "error-color-hover", "type": "Color", "description": "The border and fill colors in invalid state on hover. Auto-derived from error-color." }, { "name": "focus-outline-color-error", "type": "Color", "description": "The focus outline error color. Auto-derived from error-color.\nSet to light when the surrounding area is dark.\n" }] };
+const checkbox = { "name": "checkbox", "themeFunctionName": "checkbox-theme", "description": "Checkbox Theme", "primaryTokens": [{ "name": "fill-color", "description": "The checked state border and fill color." }, { "name": "empty-color", "description": "The unchecked border color." }, { "name": "error-color", "description": "The invalid state color." }], "primaryTokensSummary": "Setting just `$fill-color` will theme all checked states consistently.", "tokens": [{ "name": "label-color", "type": "Color", "description": "The text color used for the label text." }, { "name": "label-color-hover", "type": "Color", "description": "The text color used for the label text on hover. Auto-derived from label-color." }, { "name": "empty-color", "type": "Color", "description": "The unchecked border color. PRIMARY for unchecked states." }, { "name": "empty-color-hover", "type": "Color", "description": "The unchecked border color on hover. Auto-derived from empty-color." }, { "name": "empty-fill-color", "type": "Color", "description": "The unchecked fill color." }, { "name": "fill-color", "type": "Color", "description": "The checked border and fill colors. PRIMARY - derives tick-color, focus colors." }, { "name": "fill-color-hover", "type": "Color", "description": "The checked border and fill colors on hover. Auto-derived from fill-color." }, { "name": "tick-color", "type": "Color", "description": "The checked mark color. Auto-derived from fill-color (contrast)." }, { "name": "tick-color-hover", "type": "Color", "description": "The checked mark color on hover." }, { "name": "tick-width", "type": "Number", "description": "The checked mark width." }, { "name": "disabled-color", "type": "Color", "description": "The disabled border and fill colors." }, { "name": "disabled-fill-color", "type": "Color", "description": "The disabled border and fill colors in checked state. Auto-derived from disabled-color (material/fluent) or disabled-indeterminate-color (bootstrap/indigo)." }, { "name": "disabled-tick-color", "type": "Color", "description": "The checked mark color in disabled state." }, { "name": "disabled-indeterminate-color", "type": "Color", "description": "The disabled border and fill colors in indeterminate state. Auto-derived from fill-color." }, { "name": "disabled-color-label", "type": "Color", "description": "The disabled label color." }, { "name": "border-radius", "type": "List", "description": "The border radius used for checkbox component." }, { "name": "border-radius-ripple", "type": "List", "description": "The border radius used for checkbox ripple." }, { "name": "focus-outline-color", "type": "Color", "description": "The focus outlined color. Auto-derived from empty-color (indigo) or fill-color (bootstrap)." }, { "name": "focus-outline-color-focused", "type": "Color", "description": "The focus outlined color for focused state. Auto-derived from fill-color (indigo)." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color. Auto-derived from fill-color." }, { "name": "error-color", "type": "Color", "description": "The border and fill colors in invalid state. PRIMARY for error states." }, { "name": "error-color-hover", "type": "Color", "description": "The border and fill colors in invalid state on hover. Auto-derived from error-color." }, { "name": "focus-outline-color-error", "type": "Color", "description": "The focus outline error color. Auto-derived from error-color.\nSet to light when the surrounding area is dark.\n" }] };
 const chip = { "name": "chip", "themeFunctionName": "chip-theme", "description": "Chip Theme", "primaryTokens": [{ "name": "background", "description": "The main chip background." }, { "name": "selected-background", "description": "Selected state background." }], "primaryTokensSummary": "Setting just `$background` will create a complete chip theme with all states properly derived.", "tokens": [{ "name": "border-radius", "type": "List", "description": "The chip border-radius.\n" }, { "name": "text-color", "type": "Color", "description": "The chip text color. Auto-derived from background." }, { "name": "background", "type": "Color", "description": "The chip background color. PRIMARY - derives text-color, border-color, hover/focus states." }, { "name": "border-color", "type": "Color", "description": "The chip border color. Auto-derived from background.\n" }, { "name": "disabled-text-color", "type": "Color", "description": "The disabled chip text color." }, { "name": "disabled-background", "type": "Color", "description": "The disabled chip background color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled chip border color.\n" }, { "name": "ghost-background", "type": "Color", "description": "The chip ghost background color." }, { "name": "ghost-text-color", "type": "Color", "description": "The chip ghost text color." }, { "name": "ghost-shadow", "type": "List", "description": "The chip ghost shadow.\n" }, { "name": "hover-text-color", "type": "Color", "description": "The chip text hover color. Auto-derived from hover-background." }, { "name": "hover-background", "type": "Color", "description": "The chip hover background color. Auto-derived from background." }, { "name": "hover-border-color", "type": "Color", "description": "The chip hover border color. Auto-derived from hover-background.\n" }, { "name": "focus-text-color", "type": "Color", "description": "The chip text focus color. Auto-derived from focus-background." }, { "name": "focus-background", "type": "Color", "description": "The chip focus background color. Auto-derived from background." }, { "name": "focus-border-color", "type": "color", "description": "The chip focus border color. Auto-derived from focus-background.\n" }, { "name": "selected-text-color", "type": "color", "description": "The selected chip text color. Auto-derived from selected-background." }, { "name": "selected-background", "type": "color", "description": "The selected chip background color. Auto-derived from background." }, { "name": "selected-border-color", "type": "color", "description": "The selected chip border color. Auto-derived from selected-background.\n" }, { "name": "hover-selected-text-color", "type": "color", "description": "The selected chip hover text color. Auto-derived from hover-selected-background." }, { "name": "hover-selected-background", "type": "color", "description": "The selected chip hover background color. Auto-derived from selected-background." }, { "name": "hover-selected-border-color", "type": "color", "description": "The selected chip hover border color. Auto-derived from hover-selected-background.\n" }, { "name": "focus-selected-text-color", "type": "color", "description": "The selected chip text focus color. Auto-derived from focus-selected-background." }, { "name": "focus-selected-background", "type": "color", "description": "The selected chip focus background color. Auto-derived from selected-background." }, { "name": "focus-selected-border-color", "type": "color", "description": "The selected chip focus border color. Auto-derived from focus-selected-background.\n" }, { "name": "remove-icon-color", "type": "color", "description": "The remove icon color for the chip." }, { "name": "remove-icon-color-focus", "type": "color", "description": "The remove icon color on focus for the chip.\n" }] };
 const combo = { "name": "combo", "themeFunctionName": "combo-theme", "description": "Combo Theme", "primaryTokens": [{ "name": "toggle-button-background", "description": "The toggle button background." }, { "name": "empty-list-background", "description": "The empty list background." }, { "name": "clear-button-background-focus", "description": "The clear button focus background." }], "primaryTokensSummary": "Toggle button colors cascade from toggle-button-background through focus and disabled states.", "tokens": [{ "name": "search-separator-border-color", "type": "Color", "description": "The combo search box separator color." }, { "name": "empty-list-placeholder-color", "type": "Color", "description": "The combo placeholder text color. Auto-derived from empty-list-background." }, { "name": "empty-list-background", "type": "Color", "description": "The combo list background color. PRIMARY - derives empty-list-placeholder-color." }, { "name": "toggle-button-background", "type": "Color", "description": "The combo toggle button background color. PRIMARY - derives all toggle button colors." }, { "name": "toggle-button-background-focus", "type": "Color", "description": "The combo toggle button background color when the combo is focused in material box variant. Auto-derived from toggle-button-background." }, { "name": "toggle-button-background-focus--border", "type": "Color", "description": "The combo toggle button background color when the combo is focused in material border variant. Auto-derived from toggle-button-background." }, { "name": "toggle-button-background-disabled", "type": "Color", "description": "The combo toggle button background color when the combo is disabled. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground", "type": "Color", "description": "The combo toggle button foreground color. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground-focus", "type": "Color", "description": "The combo toggle button foreground color when the combo is focused. Auto-derived from toggle-button-background-focus." }, { "name": "toggle-button-foreground-disabled", "type": "Color", "description": "The combo toggle button foreground color when the combo is disabled. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground-filled", "type": "Color", "description": "The combo toggle button foreground color when the combo is filled. Auto-derived from toggle-button-background." }, { "name": "clear-button-background", "type": "Color", "description": "The combo clear button background color." }, { "name": "clear-button-background-focus", "type": "Color", "description": "The combo clear button background color when the combo is focused. PRIMARY for clear button focus." }, { "name": "clear-button-foreground", "type": "Color", "description": "The combo clear button foreground color." }, { "name": "clear-button-foreground-focus", "type": "Color", "description": "The combo clear button foreground color when the combo is focused. Auto-derived from clear-button-background-focus." }] };
 const dialog = { "name": "dialog", "themeFunctionName": "dialog-theme", "description": "Dialog Theme", "primaryTokens": [{ "name": "background", "description": "The dialog background color." }], "primaryTokensSummary": "Setting just `$background` will create a complete dialog theme with proper text contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The dialog background color. PRIMARY - derives title-color, message-color, border-color." }, { "name": "title-color", "type": "Color", "description": "The dialog title text color. Auto-derived from background." }, { "name": "message-color", "type": "Color", "description": "The dialog message text color. Auto-derived from background (slightly transparent)." }, { "name": "shadow", "type": "List", "description": "The shadow used for the dialog." }, { "name": "border-radius", "type": "List", "description": "The border radius used for dialog component." }, { "name": "border-color", "type": "Color", "description": "The border color used for dialog component. Auto-derived from background." }] };