igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
86 lines (85 loc) • 3.12 kB
JavaScript
import themes_default from "../theming/dist/json/components/themes.js";
import { COMPONENT_METADATA } from "./component-metadata.js";
import { createComponentSearcher } from "./component-search.js";
//#region src/knowledge/component-themes.ts
/**
* Component themes knowledge base - loads component theme data from JSON.
* This provides the LLM with accurate design tokens for each component.
*/
/**
* All component themes loaded from JSON.
*/
var COMPONENT_THEMES = themes_default;
/**
* List of all available component names.
*/
var COMPONENT_NAMES = Object.keys(COMPONENT_THEMES);
var componentSearcher = createComponentSearcher({
componentNames: COMPONENT_NAMES,
metadata: COMPONENT_METADATA
});
/**
* Get a component theme by name.
* @param componentName - The component name (e.g., 'button', 'avatar')
* @returns The component theme or undefined if not found
*/
function getComponentTheme(componentName) {
return resolveComponentTheme(componentName)?.theme;
}
/**
* Resolve a component theme by name, falling back to metadata alias when needed.
* @param componentName - The component name (e.g., 'button', 'avatar')
* @returns Resolution with resolved theme name or error details
*/
function resolveComponentTheme(componentName) {
const theme = COMPONENT_THEMES[componentName];
if (theme) return {
theme,
resolvedName: componentName
};
const metadata = COMPONENT_METADATA[componentName];
const alias = metadata?.theme ?? metadata?.childOf;
if (!alias) return {};
if (alias === componentName) return { error: `Theme alias target "${alias}" cannot reference itself.` };
if (!COMPONENT_METADATA[alias]) return { error: `Theme alias target "${alias}" is not a valid component metadata entry.` };
const resolvedTheme = COMPONENT_THEMES[alias];
if (!resolvedTheme) return { error: `Theme alias target "${alias}" does not have a theme definition.` };
return {
theme: resolvedTheme,
resolvedName: alias
};
}
/**
* Get the token names for a component.
* @param componentName - The component name
* @returns Array of token names or empty array if component not found
*/
function getTokenNames(componentName) {
const theme = getComponentTheme(componentName);
return theme ? theme.tokens.map((t) => t.name) : [];
}
/**
* Validate that all provided tokens exist for a component.
* @param componentName - The component name
* @param tokenNames - Array of token names to validate
* @returns Object with isValid flag and any invalid tokens
*/
function validateTokens(componentName, tokenNames) {
const validTokens = getTokenNames(componentName);
const invalidTokens = tokenNames.filter((name) => !validTokens.includes(name));
return {
isValid: invalidTokens.length === 0,
invalidTokens,
validTokens
};
}
/**
* Find components that match a search query.
* @param query - Search string to match against component names
* @returns Array of matching component names
*/
function searchComponents(query) {
return componentSearcher.search(query);
}
//#endregion
export { COMPONENT_NAMES, COMPONENT_THEMES, getComponentTheme, getTokenNames, resolveComponentTheme, searchComponents, validateTokens };