igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
107 lines (106 loc) • 4.57 kB
TypeScript
import { DesignSystem, ThemeVariant } from '../../utils/types.js';
export declare const ANGULAR_PLATFORM: {
readonly id: "angular";
readonly name: "Ignite UI for Angular";
readonly packageName: "igniteui-angular";
/**
* The Sass module to import for theming
*/
readonly themingModule: "igniteui-angular/theming";
/**
* Detection patterns in package.json dependencies
*/
readonly detectionPatterns: readonly ["igniteui-angular", "@infragistics/igniteui-angular"];
/**
* Required CSS class on root element for typography
*/
readonly rootClass: "ig-typography";
};
/**
* Core mixin configuration for Angular
*
* The `core` mixin must be included before `theme` mixin.
* It provides base definitions needed for theming to work correctly.
*/
export interface CoreMixinOptions {
/**
* Include/exclude styles for printing
* @default true
*/
printLayout?: boolean;
/**
* Switches component colors to more accessible values
* (suitable for color blind users)
* @default false
*/
enhancedAccessibility?: boolean;
}
/**
* Theme mixin configuration for Angular
*
* The `theme` mixin generates styles for all components.
*/
export interface ThemeMixinOptions {
/**
* The palette map to be used by default themes of all components
*/
palette?: string;
/**
* The schema used as basis for styling components
* @default '$light-material-schema'
*/
schema?: string;
/**
* List of component themes to exclude from global theme
*/
exclude?: string[];
/**
* Global roundness factor (0 to 1)
*/
roundness?: number;
/**
* Enable/disable elevations for all components
* @default true
*/
elevation?: boolean;
/**
* The elevation map to use
* @default '$material-elevations'
*/
elevations?: string;
}
/**
* Template for generating a complete Angular theme
*/
export interface AngularThemeTemplate {
designSystem: DesignSystem;
variant: ThemeVariant;
primaryColor?: string;
secondaryColor?: string;
surfaceColor?: string;
grayColor?: string;
customPaletteName?: string;
fontFamily?: string;
includeTypography?: boolean;
coreOptions?: CoreMixinOptions;
themeOptions?: Partial<ThemeMixinOptions>;
}
/**
* Generate Sass code for an Angular theme
*
* Uses shared code generation helpers from utils/sass.ts for:
* - @use statement (generateUseStatement)
* - Palette code (generatePaletteCode)
* - Typography code (generateTypographyCode)
*/
export declare function generateAngularThemeSass(template: AngularThemeTemplate): string;
/**
* Example usage documentation
*/
export declare const ANGULAR_USAGE_EXAMPLES: {
readonly basic: "\n// Basic Material Light Theme\n@use \"igniteui-angular/theming\" as *;\n\n@include core();\n@include typography(\n $font-family: $material-typeface,\n $type-scale: $material-type-scale\n);\n@include theme(\n $palette: $light-material-palette,\n $schema: $light-material-schema\n);\n";
readonly customPalette: "\n// Custom Palette Theme\n@use \"igniteui-angular/theming\" as *;\n\n$my-palette: palette(\n $primary: #2ab759,\n $secondary: #f96a88,\n $surface: #ffffff\n);\n\n@include core();\n@include typography(\n $font-family: $material-typeface,\n $type-scale: $material-type-scale\n);\n@include theme(\n $palette: $my-palette,\n $schema: $light-material-schema\n);\n";
readonly darkTheme: "\n// Dark Indigo Theme\n@use \"igniteui-angular/theming\" as *;\n\n@include core();\n@include typography(\n $font-family: $indigo-typeface,\n $type-scale: $indigo-type-scale\n);\n@include theme(\n $palette: $dark-indigo-palette,\n $schema: $dark-indigo-schema\n);\n";
readonly excludeComponents: "\n// Theme with excluded components\n@use \"igniteui-angular/theming\" as *;\n\n$excluded-components: (igx-avatar, igx-badge);\n\n@include core();\n@include typography(\n $font-family: $material-typeface,\n $type-scale: $material-type-scale\n);\n@include theme(\n $palette: $light-material-palette,\n $schema: $light-material-schema,\n $exclude: $excluded-components\n);\n";
readonly enhancedAccessibility: "\n// Theme with enhanced accessibility\n@use \"igniteui-angular/theming\" as *;\n\n@include core($enhanced-accessibility: true);\n@include typography(\n $font-family: $material-typeface,\n $type-scale: $material-type-scale\n);\n@include theme(\n $palette: $light-material-palette,\n $schema: $light-material-schema\n);\n";
};