igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
119 lines (118 loc) • 3.85 kB
TypeScript
import { FileImporter } from 'sass-embedded';
import { ColorDefinition, GrayDefinition, PLATFORMS, ThemeVariant } from '../utils/types.js';
/**
* Result from generating CSS palette variables.
*/
export interface CssPaletteResult {
css: string;
description: string;
}
/**
* Result from generating component theme CSS.
*/
export interface CssComponentThemeResult {
css: string;
description: string;
}
/**
* Options for generating standard palette CSS variables.
*/
export interface PaletteCssOptions {
primary: string;
secondary: string;
surface: string;
gray?: string;
info?: string;
success?: string;
warn?: string;
error?: string;
variant?: ThemeVariant;
/** Internal testing parameter for Sass importers */
_importers?: FileImporter[];
}
/**
* Generate CSS custom properties for a standard palette.
*
* This function compiles Sass code that uses the palette() function and
* @include palette() mixin, then returns the compiled CSS output.
*
* @example
* const result = await generatePaletteCss({
* primary: '#1976d2',
* secondary: '#ff9800',
* surface: '#fafafa',
* variant: 'light'
* });
* // result.css contains :root { --ig-primary-50: ...; --ig-primary-100: ...; ... }
*/
export declare function generatePaletteCss(options: PaletteCssOptions): Promise<CssPaletteResult>;
/**
* Options for generating custom palette CSS variables.
*/
export interface CustomPaletteCssOptions {
variant?: ThemeVariant;
surfaceColor?: string;
colors: {
primary: ColorDefinition;
secondary: ColorDefinition;
surface: ColorDefinition;
gray: GrayDefinition;
info: ColorDefinition;
success: ColorDefinition;
warn: ColorDefinition;
error: ColorDefinition;
};
/** Internal testing parameter for Sass importers */
_importers?: FileImporter[];
}
/**
* Generate CSS custom properties for a custom palette.
*
* This function generates Sass code for the custom palette structure
* (using either shades() function or explicit values), compiles it,
* and returns the CSS output.
*/
export declare function generateCustomPaletteCss(options: CustomPaletteCssOptions): Promise<CssPaletteResult>;
/**
* Format CSS output for display.
* Adds a header comment and ensures consistent formatting.
*/
export declare function formatCssOutput(css: string, description: string): string;
/**
* Options for generating component theme CSS variables.
*/
export interface ComponentThemeCssOptions {
platform: (typeof PLATFORMS)[number];
/** Design system (defaults to 'material') */
designSystem?: string;
/** Theme variant - light or dark (defaults to 'light') */
variant?: string;
/** Component name (e.g., "button", "avatar") */
component: string;
/** Token name-value pairs */
tokens: Record<string, string | number>;
/** CSS selector to scope the theme (optional) */
selector?: string;
/** Custom variable name (optional) */
name?: string;
/** Internal testing parameter for Sass importers */
_importers?: FileImporter[];
}
/**
* Generate CSS custom properties for a component theme.
*
* This function compiles Sass code that uses the component theme function
* and @include tokens() mixin, then returns the compiled CSS output.
*
* @example
* const result = await generateComponentThemeCss({
* platform: 'webcomponents',
* designSystem: 'bootstrap',
* variant: 'light',
* component: 'button',
* tokens: { background: '#1976d2', 'text-color': 'white' },
* selector: 'igc-button'
* });
* // result.css contains: igc-button { --ig-button-background: var(--ig-button-background, #1976d2); ... }
*/
export declare function generateComponentThemeCss(options: ComponentThemeCssOptions): Promise<CssComponentThemeResult>;