igniteui-theming 25.0.0-beta.5 → 25.0.1

package/README.md

@@ -152,7 +152,7 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
 
 ```json
 {
-  "mcp.servers": {
+  "servers": {
     "igniteui-theming": {
       "command": "node",
       "args": ["/absolute/path/to/igniteui-theming/dist/mcp/index.js"]
@@ -165,10 +165,10 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
 
 ```json
 {
-  "mcp.servers": {
+  "servers": {
     "igniteui-theming": {
       "command": "npx",
-      "args": ["igniteui-theming-mcp"]
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
     }
   }
 }
@@ -186,7 +186,7 @@ The MCP server works with any MCP-compatible client. Here are setup instructions
    - **Command**: `node` (for local) or `npx` (for package)
    - **Arguments**:
      - Local: `/absolute/path/to/igniteui-theming/dist/mcp/index.js`
-     - Package: `igniteui-theming-mcp`
+     - Package: `igniteui-theming igniteui-theming-mcp`
 4. Click **OK** and restart AI Assistant
 
 </details>
@@ -219,7 +219,7 @@ Add to your configuration file:
   "mcpServers": {
     "igniteui-theming": {
       "command": "npx",
-      "args": ["igniteui-theming-mcp"]
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
     }
   }
 }
@@ -252,7 +252,7 @@ Create or edit `.cursor/mcp.json` in your project:
   "mcpServers": {
     "igniteui-theming": {
       "command": "npx",
-      "args": ["igniteui-theming-mcp"]
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
     }
   }
 }

package/dist/mcp/generators/css.js

@@ -78,12 +78,7 @@ function formatCssOutput(css, description) {
   return header + css;
 }
 async function generateComponentThemeCss(options) {
-  const {
-    getComponentTheme,
-    getComponentSelector,
-    getVariablePrefix,
-    SCHEMA_PRESETS
-  } = await import("../knowledge/index.js");
+  const { getComponentTheme, getComponentSelector, SCHEMA_PRESETS } = await import("../knowledge/index.js");
   const { toVariableName } = await import("../utils/sass.js");
   const theme = getComponentTheme(options.component);
   if (!theme) {
@@ -104,8 +99,6 @@ async function generateComponentThemeCss(options) {
     options.platform
   );
   const selector = options.selector || (defaultSelectors.length > 0 ? defaultSelectors[0] : options.component);
-  const prefix = getVariablePrefix(options.platform);
-  `${prefix}-${options.component}`;
   const sassCode = `
 @use 'sass/themes' as *;
 @use 'sass/themes/schemas' as *;

package/dist/mcp/generators/sass.d.ts

@@ -1,6 +1,6 @@
 import { CreateElevationsInput, CreatePaletteInput, CreateThemeInput, CreateTypographyInput, DesignSystem, GeneratedCode, Platform, ThemeVariant } from '../utils/types.js';
 export type { ElevationsCodeOptions, PaletteCodeOptions, PaletteCodeResult, TypographyCodeOptions, } from '../utils/sass.js';
-export { generateElevationsCode, generateHeader, generatePaletteCode, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
+export { generateElevationsCode, generateHeader, generatePaletteCode, generatePresetImports, generateTypographyCode, generateUseStatement, quoteFontFamily, toVariableName, } from '../utils/sass.js';
 /**
  * Generate a palette definition.
  */

package/dist/mcp/generators/sass.js

@@ -4,7 +4,7 @@ import { generateAngularThemeSass } from "../knowledge/platforms/angular.js";
 import { SCHEMAS } from "../knowledge/platforms/common.js";
 import { generateWebComponentsThemeSass } from "../knowledge/platforms/webcomponents.js";
 import { TYPOGRAPHY_PRESETS } from "../knowledge/typography.js";
-import { toVariableName, generateHeader, generateUseStatement, quoteFontFamily } from "../utils/sass.js";
+import { generateUseStatement, toVariableName, generatePresetImports, generateHeader, quoteFontFamily } from "../utils/sass.js";
 import { generateElevationsCode, generatePaletteCode, generateTypographyCode } from "../utils/sass.js";
 function generatePalette(input) {
   const variant = input.variant ?? "light";
@@ -42,8 +42,16 @@ function generateTypography(input) {
   const typeScaleVar = `$${designSystem}-type-scale`;
   const preset = TYPOGRAPHY_PRESETS[designSystem];
   const typeface = input.fontFamily || preset.typeface;
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeTypography: true
+  });
+  const imports = [
+    generateUseStatement(input.platform, input.licensed),
+    ...presetImports
+  ].join("\n");
   const code = `${generateHeader(`Typography setup using ${designSystem} type scale`)}
-${generateUseStatement(input.platform, input.licensed)}
+${imports}
 
 // Typography setup with ${designSystem} type scale
 @include typography(
@@ -60,8 +68,16 @@ ${generateUseStatement(input.platform, input.licensed)}
 function generateElevations(input) {
   const preset = input.designSystem ?? "material";
   const elevationsVar = `$${preset}-elevations`;
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeElevations: true
+  });
+  const imports = [
+    generateUseStatement(input.platform, input.licensed),
+    ...presetImports
+  ].join("\n");
   const code = `${generateHeader(`Elevations setup using ${preset} preset`)}
-${generateUseStatement(input.platform, input.licensed)}
+${imports}
 
 // Elevations setup with ${preset} shadows
 @include elevations(${elevationsVar});
@@ -165,12 +181,18 @@ function generateGenericTheme(input, designSystem, variant) {
   } else {
     paletteArgs.push(`$surface: ${variant === "dark" ? "#222222" : "white"}`);
   }
+  const presetImports = generatePresetImports({
+    platform: input.platform,
+    includeTypography,
+    includeElevations
+  });
   const sections = [
     generateHeader(
       `Complete ${variant} theme based on ${designSystem} design system`
     ),
     '// NOTE: Specify platform ("angular" or "webcomponents") for optimized output',
     generateUseStatement(input.platform, input.licensed),
+    ...presetImports,
     "",
     `// ${themeName} palette`,
     `${paletteVar}: palette(`,
@@ -263,6 +285,7 @@ export {
   generateHeader,
   generatePalette,
   generatePaletteCode,
+  generatePresetImports,
   generateTheme,
   generateTypography,
   generateTypographyCode,

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.0-beta.5",
+    version: "v25.0.1",
     description: "Generate Sass theming code for Ignite UI components - create palettes, typography, elevations, and complete themes"
   });
   registerTools(server);
@@ -276,7 +276,7 @@ function buildReadResourceDescription() {
   const groups = {
     Platforms: [],
     Presets: [],
-    "Color Guidance": [],
+    Guidance: [],
     "Layout Docs": []
   };
   for (const r of RESOURCE_DEFINITIONS) {
@@ -285,7 +285,7 @@ function buildReadResourceDescription() {
     } else if (r.uri.includes("://presets/")) {
       groups.Presets.push(r);
     } else if (r.uri.includes("://guidance/")) {
-      groups["Color Guidance"].push(r);
+      groups.Guidance.push(r);
     } else if (r.uri.includes("://docs/")) {
       groups["Layout Docs"].push(r);
     }

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

@@ -28,7 +28,7 @@ const scrollbar = { "name": "scrollbar", "themeFunctionName": "scrollbar-theme",
 const select = { "name": "select", "themeFunctionName": "select-theme", "description": "Select Theme", "primaryTokens": [{ "name": "toggle-button-background", "description": "The toggle button background." }], "primaryTokensSummary": "Toggle button colors cascade from toggle-button-background through focus states.", "tokens": [{ "name": "toggle-button-background", "type": "Color", "description": "The select toggle button background color. PRIMARY - derives all toggle button colors." }, { "name": "toggle-button-background-focus", "type": "Color", "description": "The select toggle button background color when the select is focused. Auto-derived from toggle-button-background (variant-dependent)." }, { "name": "toggle-button-background-disabled", "type": "Color", "description": "The select toggle button background color when the select is disabled." }, { "name": "toggle-button-foreground", "type": "Color", "description": "The select toggle button foreground color. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground-focus", "type": "Color", "description": "The select toggle button foreground color when the select is focused. Auto-derived from toggle-button-background-focus (variant-dependent)." }, { "name": "toggle-button-foreground-disabled", "type": "Color", "description": "The select toggle button foreground color when the select is disabled." }, { "name": "toggle-button-foreground-filled", "type": "Color", "description": "The select toggle button foreground color when the select is filled. Auto-derived from toggle-button-background." }, { "name": "toggle-button-background-focus--border", "type": "Color", "description": "The select toggle button background color when the select is focused in material border variant. Auto-derived from toggle-button-background (bootstrap/indigo)." }] };
 const slider = { "name": "slider", "themeFunctionName": "slider-theme", "description": "Slider Theme", "primaryTokens": [{ "name": "track-color", "description": "The filled track color." }, { "name": "base-track-color", "description": "The unfilled track background." }, { "name": "thumb-color", "description": "The thumb color (material)." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "track-color", "type": "Color", "description": "The color of the track. PRIMARY - derives hover, label, and thumb colors." }, { "name": "track-step-color", "type": "Color", "description": "The color of the track steps. Auto-derived from base-track-color." }, { "name": "track-step-size", "type": "Number", "description": "The size of the track steps." }, { "name": "track-hover-color", "type": "Color", "description": "The color of the track on hover. Auto-derived from track-color." }, { "name": "thumb-color", "type": "Color", "description": "The color of the thumb. Auto-derived from track-color (material) or set independently." }, { "name": "thumb-focus-color", "type": "Color", "description": "The focus color of the thumb. Auto-derived from thumb-border-color or thumb-color." }, { "name": "thumb-border-color", "type": "Color", "description": "The thumb border color. Auto-derived from track-color (fluent/indigo) or thumb-color (bootstrap)." }, { "name": "thumb-border-hover-color", "type": "Color", "description": "The thumb border color when hovered. Auto-derived from thumb-border-color." }, { "name": "thumb-border-focus-color", "type": "Color", "description": "The thumb border color when focused." }, { "name": "thumb-disabled-border-color", "type": "Color", "description": "The thumb border color when it's disabled. Auto-derived from thumb-border-color." }, { "name": "disabled-thumb-color", "type": "Color", "description": "The thumb color when its disabled. Auto-derived from thumb-color." }, { "name": "label-background-color", "type": "Color", "description": "The background color of the bubble label. Auto-derived from track-color or thumb-color." }, { "name": "label-text-color", "type": "Color", "description": "The text color of the bubble label. Auto-derived from label-background-color." }, { "name": "base-track-color", "type": "Color", "description": "The base background color of the track. PRIMARY for unfilled track. Auto-derived from track-color (material)." }, { "name": "base-track-hover-color", "type": "Color", "description": "The base background color of the track on hover. Auto-derived from base-track-color." }, { "name": "disabled-base-track-color", "type": "Color", "description": "The base background color of the track when is disabled. Auto-derived from base-track-color." }, { "name": "disabled-fill-track-color", "type": "Color", "description": "The base background color of the fill track when is disabled. Auto-derived from track-color." }, { "name": "tick-label-color", "type": "Color", "description": "The color of the tick label." }, { "name": "tick-color", "type": "Color", "description": "The background-color of the tick." }] };
 const snackbar = { "name": "snackbar", "themeFunctionName": "snackbar-theme", "description": "Snackbar Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used in the snackbar. PRIMARY - derives text-color, button-color." }, { "name": "text-color", "type": "Color", "description": "The text color used in the snackbar. Auto-derived from background." }, { "name": "button-color", "type": "Color", "description": "The button color used in the snackbar. Auto-derived from background." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the snackbar." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the snackbar component." }] };
-const splitter = { "name": "splitter", "themeFunctionName": "splitter-theme", "description": "Splitter Theme", "primaryTokens": [{ "name": "bar-color", "description": "The bar background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "bar-color", "type": "Color", "description": "The background color of the bar. PRIMARY - derives handle, expander, focus colors." }, { "name": "handle-color", "type": "Color", "description": "The color for the bar drag handle. Auto-derived from bar-color." }, { "name": "expander-color", "type": "Color", "description": "The color for the arrow expander's. Auto-derived from bar-color." }, { "name": "border-radius", "type": "List", "description": "the border radios of the splitter bar drag handle" }, { "name": "focus-color", "type": "Color", "description": "The color used for focused splitter bar. Auto-derived from bar-color (variant-dependent)." }, { "name": "size", "type": "Number", "description": "The size of the splitter, its width for vertical and height for horizontal splitter." }] };
+const splitter = { "name": "splitter", "themeFunctionName": "splitter-theme", "description": "Splitter Theme", "primaryTokens": [{ "name": "bar-color", "description": "The bar background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "bar-color", "type": "Color", "description": "The background color of the bar. PRIMARY - derives handle, expander, focus colors." }, { "name": "handle-color", "type": "Color", "description": "The color for the bar drag handle. Auto-derived from bar-color." }, { "name": "expander-color", "type": "Color", "description": "The color for the arrow expander's. Auto-derived from bar-color." }, { "name": "border-radius", "type": "List", "description": "the border radios of the splitter bar drag handle" }, { "name": "focus-color", "type": "Color", "description": "The color used for focused splitter bar. Auto-derived from bar-color (variant-dependent)." }, { "name": "bar-color-active", "type": "Color", "description": "The background color of the bar when pressed." }, { "name": "handle-color-active", "type": "Color", "description": "The color for the bar drag handle when pressed." }, { "name": "expander-color-active", "type": "Color", "description": "The color for the arrow expander's when pressed." }, { "name": "size", "type": "Number", "description": "The size of the splitter, its width for vertical and height for horizontal splitter." }] };
 const stepper = { "name": "stepper", "themeFunctionName": "stepper-theme", "description": "Stepper Theme", "primaryTokens": [{ "name": "step-background", "description": "The base step background." }, { "name": "indicator-background", "description": "The step indicator background." }, { "name": "invalid-indicator-background", "description": "The invalid step indicator." }, { "name": "current-indicator-background", "description": "The current step indicator." }, { "name": "complete-indicator-background", "description": "The completed step indicator." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "content-foreground", "type": "Color", "description": "The foreground of the step content." }, { "name": "step-background", "type": "Color", "description": "The background of the step header. PRIMARY - derives all step states." }, { "name": "step-hover-background", "type": "Color", "description": "The background of the step header on hover. Auto-derived from step-background." }, { "name": "step-focus-background", "type": "Color", "description": "The background of the step header on focus. Auto-derived from step-background." }, { "name": "title-color", "type": "Color", "description": "The color of the step title. Auto-derived from step-background." }, { "name": "title-hover-color", "type": "Color", "description": "The color of the step title on hover. Auto-derived from step-hover-background." }, { "name": "title-focus-color", "type": "Color", "description": "The color of the step title on focus. Auto-derived from step-focus-background." }, { "name": "subtitle-color", "type": "Color", "description": "The color of the step subtitle. Auto-derived from step-background." }, { "name": "subtitle-hover-color", "type": "Color", "description": "The color of the step subtitle on hover. Auto-derived from step-hover-background." }, { "name": "subtitle-focus-color", "type": "Color", "description": "The color of the step subtitle on focus. Auto-derived from step-focus-background." }, { "name": "indicator-color", "type": "Color", "description": "The text color of the step indicator. Auto-derived from indicator-background." }, { "name": "indicator-background", "type": "Color", "description": "The background color of the step indicator. PRIMARY for indicator - derives indicator-color, indicator-outline. Auto-derived from step-background." }, { "name": "indicator-outline", "type": "Color", "description": "The outline color of the step indicator. Auto-derived from indicator-background.\n" }, { "name": "invalid-step-background", "type": "Color", "description": "The background of the invalid step header. Auto-derived from step-background." }, { "name": "invalid-step-hover-background", "type": "Color", "description": "The background of the invalid step header on hover. Auto-derived from invalid-step-background." }, { "name": "invalid-step-focus-background", "type": "Color", "description": "The background of the invalid step header on focus. Auto-derived from invalid-step-background." }, { "name": "invalid-title-color", "type": "Color", "description": "The color of the invalid step title. Auto-derived from invalid-indicator-background." }, { "name": "invalid-title-hover-color", "type": "Color", "description": "The color of the invalid step title on hover. Auto-derived from invalid-indicator-background." }, { "name": "invalid-title-focus-color", "type": "Color", "description": "The color of the invalid step title on focus. Auto-derived from invalid-indicator-background." }, { "name": "invalid-subtitle-color", "type": "Color", "description": "The color of the invalid step subtitle. Auto-derived from invalid-indicator-background." }, { "name": "invalid-subtitle-hover-color", "type": "Color", "description": "The color of the invalid step subtitle on hover. Auto-derived from invalid-indicator-background." }, { "name": "invalid-subtitle-focus-color", "type": "Color", "description": "The color of the invalid step subtitle on focus. Auto-derived from invalid-indicator-background." }, { "name": "invalid-indicator-color", "type": "Color", "description": "The color of the invalid step indicator. Auto-derived from invalid-indicator-background." }, { "name": "invalid-indicator-background", "type": "Color", "description": "The background color of the invalid step indicator. PRIMARY for invalid state." }, { "name": "invalid-indicator-outline", "type": "Color", "description": "The outline color of the invalid step indicator. Auto-derived from invalid-indicator-background.\n" }, { "name": "current-step-background", "type": "Color", "description": "The background of the current step header. Auto-derived from step-background." }, { "name": "current-step-hover-background", "type": "Color", "description": "The background of the current step header on hover. Auto-derived from current-step-background." }, { "name": "current-step-focus-background", "type": "Color", "description": "The background of the current step header on focus. Auto-derived from current-step-background." }, { "name": "current-title-color", "type": "Color", "description": "The color of the current step title. Auto-derived from current-step-background." }, { "name": "current-title-hover-color", "type": "Color", "description": "The color of the current step title on hover. Auto-derived from current-step-hover-background." }, { "name": "current-title-focus-color", "type": "Color", "description": "The color of the current step title on focus. Auto-derived from current-step-focus-background." }, { "name": "current-subtitle-color", "type": "Color", "description": "The color of the current step subtitle. Auto-derived from current-step-background." }, { "name": "current-subtitle-hover-color", "type": "Color", "description": "The color of the current step subtitle on hover. Auto-derived from current-step-hover-background." }, { "name": "current-subtitle-focus-color", "type": "Color", "description": "The color of the current step subtitle on focus. Auto-derived from current-step-focus-background." }, { "name": "current-indicator-color", "type": "Color", "description": "The color of the current step indicator. Auto-derived from current-indicator-background." }, { "name": "current-indicator-background", "type": "Color", "description": "The background color of the current step indicator. PRIMARY for current state. Auto-derived from current-step-background." }, { "name": "current-indicator-outline", "type": "Color", "description": "The outline color of the current step indicator. Auto-derived from current-indicator-background.\n" }, { "name": "complete-step-background", "type": "Color", "description": "The background of the complete step header. Auto-derived from step-background." }, { "name": "complete-step-hover-background", "type": "Color", "description": "The background of the complete step header on hover. Auto-derived from complete-step-background." }, { "name": "complete-step-focus-background", "type": "Color", "description": "The background of the complete step header on focus. Auto-derived from complete-step-background." }, { "name": "complete-title-color", "type": "Color", "description": "The color of the complete step title. Auto-derived from complete-step-background." }, { "name": "complete-title-hover-color", "type": "Color", "description": "The color of the complete step title on hover. Auto-derived from complete-step-hover-background." }, { "name": "complete-title-focus-color", "type": "Color", "description": "The color of the complete step title on focus. Auto-derived from complete-step-focus-background." }, { "name": "complete-subtitle-color", "type": "Color", "description": "The color of the complete step subtitle. Auto-derived from complete-step-background." }, { "name": "complete-subtitle-hover-color", "type": "Color", "description": "The color of the complete step subtitle on hover. Auto-derived from complete-step-hover-background." }, { "name": "complete-subtitle-focus-color", "type": "Color", "description": "The color of the complete step subtitle on focus. Auto-derived from complete-step-focus-background." }, { "name": "complete-indicator-color", "type": "Color", "description": "The color of the completed step indicator. Auto-derived from complete-indicator-background." }, { "name": "complete-indicator-background", "type": "Color", "description": "The background color of the completed step indicator. PRIMARY for complete state. Auto-derived from complete-step-background." }, { "name": "complete-indicator-outline", "type": "Color", "description": "The outline color of the completed step indicator.\n" }, { "name": "disabled-title-color", "type": "Color", "description": "The title color of the disabled step. Auto-derived from step-background." }, { "name": "disabled-subtitle-color", "type": "Color", "description": "The subtitle color of the disabled step. Auto-derived from step-background." }, { "name": "disabled-indicator-color", "type": "Color", "description": "The indicator color of the disabled step. Auto-derived from disabled-indicator-background." }, { "name": "disabled-indicator-background", "type": "Color", "description": "The indicator background of the disabled step. Auto-derived from step-background." }, { "name": "disabled-indicator-outline", "type": "Color", "description": "The indicator outline color of the disabled step. Auto-derived from disabled-indicator-background.\n" }, { "name": "step-separator-color", "type": "Color", "description": "The separator border-color of between the steps. Auto-derived from step-background or indicator-background." }, { "name": "complete-step-separator-color", "type": "Color", "description": "The separator border-color between the completed steps.\n" }, { "name": "step-separator-style", "type": "Color", "description": "The separator border-style of between the steps." }, { "name": "complete-step-separator-style", "type": "Color", "description": "The separator border-style between the completed steps.\n" }, { "name": "border-radius-indicator", "type": "List", "description": "The border-radius of the step indicator." }, { "name": "border-radius-step-header", "type": "List", "description": "The border-radius of the step header.\n" }] };
 const tabs = { "name": "tabs", "themeFunctionName": "tabs-theme", "description": "Tabs Theme", "primaryTokens": [{ "name": "item-background", "description": "The tabs header background." }, { "name": "item-active-color", "description": "The active tab text color." }], "primaryTokensSummary": "Setting just `$item-background` will theme all tab states consistently.", "tokens": [{ "name": "item-text-color", "type": "Color", "description": "The color used for the tab text color. Auto-derived from item-background or synced with item-icon-color." }, { "name": "item-background", "type": "Color", "description": "The background color used for the tabs header. PRIMARY - derives most colors." }, { "name": "item-hover-background", "type": "Color", "description": "The background used for the tabs on hover. Auto-derived from item-background." }, { "name": "item-hover-color", "type": "Color", "description": "The text color used for the tabs on hover. Auto-derived from item-text-color or item-hover-background." }, { "name": "item-icon-color", "type": "Color", "description": "The color used for the tab icon. Auto-derived from item-background or synced with item-text-color." }, { "name": "item-active-icon-color", "type": "Color", "description": "The color used for the active tab icon. Auto-derived from item-active-color or item-active-background." }, { "name": "item-active-hover-icon-color", "type": "Color", "description": "The color used for the active tab icon on hover and focus. Auto-derived from item-active-icon-color." }, { "name": "item-hover-icon-color", "type": "Color", "description": "The color used for the tab icon on hover. Auto-derived from item-icon-color or item-hover-background." }, { "name": "item-disabled-icon-color", "type": "Color", "description": "The color used for the disabled tab icon." }, { "name": "item-active-color", "type": "Color", "description": "The color used for the active tabs text. PRIMARY for active/indicator - derives indicator-color." }, { "name": "item-active-hover-color", "type": "Color", "description": "The color used for the active tabs text on hover and focus. Auto-derived from item-active-color." }, { "name": "item-active-background", "type": "Color", "description": "The color used for the active tab background. Auto-derived from item-background." }, { "name": "item-active-hover-background", "type": "Color", "description": "The color used for the active tab background on hover and focus. Auto-derived from item-active-background." }, { "name": "item-disabled-color", "type": "Color", "description": "The color used for the disabled tabs text." }, { "name": "indicator-color", "type": "Color", "description": "The color used for the active tab indicator. Auto-derived from item-active-color." }, { "name": "button-color", "type": "Color", "description": "The color used for the button icon/text color. Auto-derived from button-background or item-text-color." }, { "name": "button-hover-color", "type": "Color", "description": "The color used for the button icon/text color on hover. Auto-derived from button-color or button-hover-background." }, { "name": "button-disabled-color", "type": "Color", "description": "The color used for the disabled button icon/text. Auto-derived from button-color." }, { "name": "button-background", "type": "Color", "description": "The color used for the button background. Auto-derived from item-background." }, { "name": "button-hover-background", "type": "Color", "description": "The color used for the button background on hover. Auto-derived from item-background or button-background." }, { "name": "border-radius", "type": "List", "description": "The border radius for the tabs." }, { "name": "border-color", "type": "Color", "description": "The border color of the tabs. Auto-derived from item-background (bootstrap)." }, { "name": "border-color--hover", "type": "Color", "description": "The border color of the tabs on hover. Auto-derived from border-color." }, { "name": "tab-ripple-color", "type": "Color", "description": "The color used for the tab ripple effect. Auto-derived from item-active-background or item-background." }, { "name": "button-ripple-color", "type": "Color", "description": "The color used for the button ripple effect. Auto-derived from button-color." }] };
 const toast = { "name": "toast", "themeFunctionName": "toast-theme", "description": "Toast Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used for the toast. PRIMARY - derives text-color, border-color." }, { "name": "text-color", "type": "Color", "description": "The text-color used for the toast. Auto-derived from background." }, { "name": "border-color", "type": "Color", "description": "The border-color used for the toast. Auto-derived from text-color." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the toast component." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the toast." }] };
@@ -48,7 +48,6 @@ const themesData = {
   "flat-button": { "name": "flat-button", "themeFunctionName": "flat-button-theme", "description": "Flat Button Theme", "primaryTokens": [{ "name": "foreground", "description": "The text color of the button." }, { "name": "hover-background", "description": "The hover background color." }, { "name": "focus-background", "description": "The focus background color." }, { "name": "active-background", "description": "The active background color." }], "primaryTokensSummary": "For flat buttons, the foreground color is the primary token.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the button." }, { "name": "foreground", "type": "Color", "description": "The text color of the button. PRIMARY - derives hover/focus/active backgrounds and foregrounds." }, { "name": "icon-color", "type": "Color", "description": "The icon color in the button." }, { "name": "icon-color-hover", "type": "Color", "description": "The icon color in the button on hover. Auto-derived from hover-foreground." }, { "name": "hover-background", "type": "Color", "description": "The hover background color of the button. PRIMARY - derives hover-foreground. Auto-derived from foreground." }, { "name": "hover-foreground", "type": "Color", "description": "The hover text color of the button. Auto-derived from hover-background." }, { "name": "focus-background", "type": "Color", "description": "The focus background color of the button. PRIMARY - derives focus-foreground. Auto-derived from foreground." }, { "name": "focus-foreground", "type": "Color", "description": "The focus text color of the button. Auto-derived from focus-background." }, { "name": "focus-hover-background", "type": "Color", "description": "The background color on focus hovered state. Auto-derived from foreground." }, { "name": "focus-hover-foreground", "type": "Color", "description": "The text color on focus hovered state. Auto-derived from focus-hover-background." }, { "name": "focus-visible-background", "type": "Color", "description": "The focus-visible background color. Auto-derived from focus-background or foreground." }, { "name": "focus-visible-foreground", "type": "Color", "description": "The focus-visible text color. Auto-derived from focus-visible-background." }, { "name": "active-background", "type": "Color", "description": "The active background of the button. Auto-derived from foreground." }, { "name": "active-foreground", "type": "Color", "description": "The active text color of the button. Auto-derived from active-background." }, { "name": "border-radius", "type": "List", "description": "The border radius of the button." }, { "name": "border-color", "type": "Color", "description": "The border color of the button." }, { "name": "hover-border-color", "type": "Color", "description": "The hover border color of the button." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color of the button." }, { "name": "focus-visible-border-color", "type": "Color", "description": "The focus-visible border color. Auto-derived from focus-border-color or focus-visible-foreground." }, { "name": "active-border-color", "type": "Color", "description": "The active border color of the button." }, { "name": "shadow-color", "type": "Color", "description": "The shadow color of the button. Auto-derived from focus-visible-foreground." }, { "name": "disabled-background", "type": "Color", "description": "The disabled background color of the button." }, { "name": "disabled-foreground", "type": "Color", "description": "The disabled text color of the button. Auto-derived from foreground (bootstrap/indigo)." }, { "name": "disabled-icon-color", "type": "Color", "description": "The disabled icon color of the button. Auto-derived from disabled-foreground." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color of the button.\n" }] },
   "outlined-button": { "name": "outlined-button", "themeFunctionName": "outlined-button-theme", "description": "Outlined Button Theme", "primaryTokens": [{ "name": "foreground", "description": "The text color of the button." }, { "name": "hover-background", "description": "The hover background color." }, { "name": "focus-background", "description": "The focus background color." }, { "name": "active-background", "description": "The active background color." }], "primaryTokensSummary": "For outlined buttons, the foreground color is the primary token.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the button." }, { "name": "foreground", "type": "Color", "description": "The text color of the button. PRIMARY - derives hover/focus/active backgrounds, foregrounds, and borders." }, { "name": "icon-color", "type": "Color", "description": "The icon color in the button." }, { "name": "icon-color-hover", "type": "Color", "description": "The icon color in the button on hover. Auto-derived from hover-foreground." }, { "name": "hover-background", "type": "Color", "description": "The hover background color. PRIMARY - derives hover-foreground. Auto-derived from foreground." }, { "name": "hover-foreground", "type": "Color", "description": "The hover text color. Auto-derived from hover-background." }, { "name": "focus-background", "type": "Color", "description": "The focus background color. PRIMARY - derives focus-foreground. Auto-derived from foreground." }, { "name": "focus-foreground", "type": "Color", "description": "The focus text color. Auto-derived from focus-background." }, { "name": "focus-hover-background", "type": "Color", "description": "The background color on focus hovered state. Auto-derived from foreground or hover-background." }, { "name": "focus-hover-foreground", "type": "Color", "description": "The text color on focus hovered state. Auto-derived from focus-hover-background." }, { "name": "focus-visible-background", "type": "Color", "description": "The focus-visible background color. Auto-derived from focus-background or hover-background." }, { "name": "focus-visible-foreground", "type": "Color", "description": "The focus-visible text color. Auto-derived from focus-visible-background or foreground." }, { "name": "active-background", "type": "Color", "description": "The active background of the button. Auto-derived from foreground." }, { "name": "active-foreground", "type": "Color", "description": "The active text color. Auto-derived from active-background." }, { "name": "border-radius", "type": "List", "description": "The border radius of the button." }, { "name": "border-color", "type": "Color", "description": "The border color of the button. Auto-derived from foreground." }, { "name": "hover-border-color", "type": "Color", "description": "The hover border color. Auto-derived from hover-foreground or hover-background." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color. Auto-derived from focus-foreground or focus-background." }, { "name": "focus-visible-border-color", "type": "Color", "description": "The focus-visible border color. Auto-derived from focus-border-color or focus-visible-background." }, { "name": "active-border-color", "type": "Color", "description": "The active border color. Auto-derived from active-foreground or active-background." }, { "name": "shadow-color", "type": "Color", "description": "The shadow color of the button. Auto-derived from focus-visible-foreground or focus-visible-background." }, { "name": "disabled-background", "type": "Color", "description": "The disabled background color of the button." }, { "name": "disabled-foreground", "type": "Color", "description": "The disabled text color. Auto-derived from foreground (bootstrap)." }, { "name": "disabled-icon-color", "type": "Color", "description": "The disabled icon color. Auto-derived from disabled-foreground." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color. Auto-derived from disabled-foreground (bootstrap).\n" }] },
   calendar,
-  "date-picker": { "name": "date-picker", "themeFunctionName": "date-picker-theme", "description": "Date Picker Theme", "primaryTokens": [{ "name": "header-background", "description": "The main accent color." }, { "name": "content-background", "description": "The calendar body background." }], "primaryTokensSummary": "Text and icon colors are auto-calculated for contrast.", "tokens": [] },
   card,
   carousel,
   chat,
@@ -76,8 +75,6 @@ const themesData = {
   "file-input": { "name": "file-input", "themeFunctionName": "file-input-theme", "description": "File Input Theme", "primaryTokens": [{ "name": "file-names-background", "description": "The file names container background color." }, { "name": "file-selector-button-background", "description": "The file input selector button background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "file-names-background", "type": "Color", "description": "The file names container background color. PRIMARY - derives all file-names foreground colors." }, { "name": "file-names-background--focused", "type": "Color", "description": "The file names container background color when focused. Auto-derived from file-names-background." }, { "name": "file-names-background--filled", "type": "Color", "description": "The file names container background color when filled. Auto-derived from file-names-background." }, { "name": "file-names-background--disabled", "type": "Color", "description": "The file names container background color when disabled. Auto-derived from file-names-background." }, { "name": "file-names-foreground", "type": "Color", "description": "The file names color. Auto-derived from file-names-background." }, { "name": "file-names-foreground--focused", "type": "Color", "description": "The file names color when focused. Auto-derived from file-names-background--focused." }, { "name": "file-names-foreground--filled", "type": "Color", "description": "The file names color when filled. Auto-derived from file-names-background--filled." }, { "name": "file-names-foreground--disabled", "type": "Color", "description": "The file names color when disabled. Auto-derived from file-names-background--disabled." }, { "name": "file-selector-button-background", "type": "Color", "description": "The selector button background color. PRIMARY - derives all selector button foreground colors." }, { "name": "file-selector-button-background--focused", "type": "Color", "description": "The selector button background color when focused. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-background--filled", "type": "Color", "description": "The selector button background color when filled. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-background--disabled", "type": "Color", "description": "The selector button background color when disabled. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-foreground", "type": "Color", "description": "The selector button foreground color. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-foreground--focused", "type": "Color", "description": "The selector button foreground color when focused. Auto-derived from file-selector-button-background--focused." }, { "name": "file-selector-button-foreground--filled", "type": "Color", "description": "The selector button foreground color when filled. Auto-derived from file-selector-button-background--filled." }, { "name": "file-selector-button-foreground--disabled", "type": "Color", "description": "The selector button foreground color when disabled. Auto-derived from file-selector-button-background--disabled." }] },
   "input-group": { "name": "input-group", "themeFunctionName": "input-group-theme", "description": "Input Group Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "] - The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
   "date-time-input": { "name": "date-time-input", "themeFunctionName": "date-time-input-theme", "description": "Date Time Input Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "] - The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
-  "date-range-start": { "name": "date-range-start", "themeFunctionName": "date-range-start-theme", "description": "Date Range Start Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "] - The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
-  "date-range-end": { "name": "date-range-end", "themeFunctionName": "date-range-end-theme", "description": "Date Range End Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "] - The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
   label,
   list,
   navbar,

package/dist/mcp/knowledge/component-metadata.d.ts

@@ -53,6 +53,8 @@ export interface CompoundInfo {
 export interface ComponentMetadata {
     /** Platform-specific CSS selectors */
     selectors: ComponentSelectors;
+    /** Optional theme alias for components that reuse another component theme */
+    theme?: string;
     /** Present only for components with variant-specific themes (e.g., button) */
     variants?: string[];
     /** Present only for compound components */