igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
106 lines (105 loc) • 4.49 kB
TypeScript
import { default as COLOR_USAGE_MARKDOWN } from './docs/colors/usage.md?raw';
import { ShadeLevel } from './multipliers.js';
/**
* Shade range description.
*/
export interface ShadeRange {
/** Shade levels included in this range */
shades: ShadeLevel[];
/** Description of what this range is used for */
purpose: string;
/** Example use cases */
examples: string[];
}
/**
* Color family semantic role definition.
*/
export interface ColorSemanticRole {
/** Brief role description */
role: string;
/** Detailed description of the color's purpose */
description: string;
/** General usage patterns */
usage: string[];
/** Components that commonly use this color */
components: string[];
/** Shade-specific guidance */
shadeGuidance: ShadeRange[];
}
/**
* Semantic roles for each color family.
* Derived from analysis of component schemas across Material, Fluent, Bootstrap, and Indigo themes.
*/
export declare const COLOR_SEMANTIC_ROLES: Record<string, ColorSemanticRole>;
/**
* Common opacity values and their purposes.
*/
export declare const OPACITY_USAGE: {
readonly "0.05-0.1": "Very subtle hover overlays, light backgrounds";
readonly "0.12-0.15": "Subtle active states, disabled backgrounds";
readonly "0.2": "Disabled text/elements";
readonly "0.3": "Selected backgrounds (Indigo theme), medium overlays";
readonly "0.38": "Material Design disabled opacity (standard)";
readonly "0.5": "Focus outlines, semi-transparent overlays";
readonly "0.6": "Border colors, secondary elements";
readonly "0.8": "Strong overlays, near-opaque states";
readonly "0.9": "Tooltip backgrounds, near-solid overlays";
};
/**
* State progression patterns showing how colors change across interaction states.
*/
export declare const STATE_PATTERNS: {
readonly button: {
readonly description: "Button state progression";
readonly states: {
readonly idle: "primary-500 background";
readonly hover: "primary-600 or primary-500 with overlay";
readonly focus: "primary-500 with focus ring (primary-200 or 300)";
readonly active: "primary-700 or darker";
readonly disabled: "gray-300 background, gray-500 text";
};
};
readonly listItem: {
readonly description: "List item state progression";
readonly states: {
readonly idle: "surface background, gray-800 text";
readonly hover: "gray-100 or 200 background";
readonly focus: "gray-100 background with focus outline";
readonly selected: "primary-100 or 200 background (or primary-300 with opacity)";
readonly disabled: "gray-400 text, no interaction";
};
};
readonly input: {
readonly description: "Input field state progression";
readonly states: {
readonly idle: "surface background, gray-300 or 400 border";
readonly hover: "gray-400 or 500 border";
readonly focus: "primary-500 border, focus ring";
readonly filled: "gray-800 text";
readonly error: "error-500 border and text";
readonly disabled: "gray-100 background, gray-400 text";
};
};
};
/**
* Design system specific patterns.
*/
export declare const THEME_PATTERNS: {
readonly material: {
readonly name: "Material Design";
readonly characteristics: readonly ["Uses secondary color prominently for accents", "Ripple effects on interaction", "Shade 500 as baseline", "Elevation through shadows", "A100-A700 accent shades for selection"];
};
readonly fluent: {
readonly name: "Fluent Design";
readonly characteristics: readonly ["More gray-based, subtle interactions", "Hover states use 100-200 shades", "Border-focused component styling", "Less saturated colors overall"];
};
readonly bootstrap: {
readonly name: "Bootstrap";
readonly characteristics: readonly ["Uses primary color for most accents", "Shade 600 commonly used for hover", "Strong border patterns", "More traditional web styling"];
};
readonly indigo: {
readonly name: "Indigo Design";
readonly characteristics: readonly ["Transparent backgrounds with opacity", "Primary 300 with 0.3 opacity for selections", "Strong emphasis on gray scale", "Clean, modern aesthetic", "Subtle interactive states"];
};
};
export { COLOR_USAGE_MARKDOWN };