igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
90 lines (89 loc) • 3.23 kB
TypeScript
/**
* Component themes knowledge base - loads component theme data from JSON.
* This provides the LLM with accurate design tokens for each component.
*/
/**
* Represents a design token (themeable property) for a component.
*/
export interface ComponentToken {
/** Token name (e.g., 'background', 'border-color') */
name: string;
/** Sass type (e.g., 'Color', 'Number', 'List', 'box-shadow') */
type: string;
/** Description of what this token controls */
description: string;
}
/**
* Represents a primary token entry extracted from SassDoc descriptions.
*/
export interface PrimaryToken {
/** Token name without $ prefix (e.g., 'background', 'header-background') */
name: string;
/** Brief description of what this token controls and what it derives */
description: string;
}
/**
* Represents a component theme definition.
*/
export interface ComponentTheme {
/** Component name (e.g., 'button', 'avatar') */
name: string;
/** The Sass function name (e.g., 'button-theme', 'avatar-theme') */
themeFunctionName: string;
/** Title/description of the theme (e.g., 'Calendar Theme') */
description: string;
/** Structured primary tokens extracted from SassDoc */
primaryTokens?: PrimaryToken[];
/** Optional summary prose about token behavior */
primaryTokensSummary?: string;
/** Available design tokens */
tokens: ComponentToken[];
}
export interface ComponentThemeResolution {
theme?: ComponentTheme;
resolvedName?: string;
error?: string;
}
/**
* All component themes loaded from JSON.
*/
export declare const COMPONENT_THEMES: Record<string, ComponentTheme>;
/**
* List of all available component names.
*/
export declare const COMPONENT_NAMES: string[];
/**
* Get a component theme by name.
* @param componentName - The component name (e.g., 'button', 'avatar')
* @returns The component theme or undefined if not found
*/
export declare function getComponentTheme(componentName: string): ComponentTheme | undefined;
/**
* 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
*/
export declare function resolveComponentTheme(componentName: string): ComponentThemeResolution | undefined;
/**
* Get the token names for a component.
* @param componentName - The component name
* @returns Array of token names or empty array if component not found
*/
export declare function getTokenNames(componentName: string): string[];
/**
* 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
*/
export declare function validateTokens(componentName: string, tokenNames: string[]): {
isValid: boolean;
invalidTokens: string[];
validTokens: string[];
};
/**
* Find components that match a search query.
* @param query - Search string to match against component names
* @returns Array of matching component names
*/
export declare function searchComponents(query: string): string[];