igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
65 lines (64 loc) • 2.84 kB
TypeScript
import { default as COLOR_GUIDANCE_MARKDOWN } from './docs/colors/guidance.md?raw';
/**
* Color variant rules for surface and gray colors.
*/
export declare const COLOR_VARIANT_RULES: {
readonly light: {
readonly description: "Light theme variant with light backgrounds and dark text";
readonly surface: {
readonly requirement: "light";
readonly luminanceRule: "luminance > 0.5";
readonly explanation: "Light themes use bright backgrounds (white, off-white, light gray)";
readonly examples: readonly ["white", "#ffffff", "#f8f9fa", "#fafafa", "#f5f5f5"];
};
readonly gray: {
readonly requirement: "dark";
readonly luminanceRule: "luminance <= 0.5";
readonly explanation: "Gray base should be dark so the generated gray shades contrast well against light surfaces";
readonly examples: readonly ["black", "#000000", "#333333", "#212121", "#424242"];
};
};
readonly dark: {
readonly description: "Dark theme variant with dark backgrounds and light text";
readonly surface: {
readonly requirement: "dark";
readonly luminanceRule: "luminance <= 0.5";
readonly explanation: "Dark themes use dark backgrounds (near-black, dark gray)";
readonly examples: readonly ["#222222", "#1a1a1a", "#121212", "#181818", "#2d2d2d"];
};
readonly gray: {
readonly requirement: "light";
readonly luminanceRule: "luminance > 0.5";
readonly explanation: "Gray base should be light so the generated gray shades contrast well against dark surfaces";
readonly examples: readonly ["white", "#ffffff", "#e5e5e5", "#f5f5f5", "#eeeeee"];
};
};
};
export { COLOR_GUIDANCE_MARKDOWN };
/**
* Compact rules for quick reference.
*/
export declare const COLOR_RULES_SUMMARY: {
readonly luminanceThreshold: 0.5;
readonly minimumContrastRatio: 3;
readonly rules: {
readonly light: {
readonly surface: "luminance > 0.5 (light color)";
readonly gray: "luminance <= 0.5 (dark color)";
};
readonly dark: {
readonly surface: "luminance <= 0.5 (dark color)";
readonly gray: "luminance > 0.5 (light color)";
};
};
readonly suggestedColors: {
readonly light: {
readonly surface: readonly ["white", "#ffffff", "#f8f9fa", "#fafafa", "#f5f5f5"];
readonly gray: readonly ["black", "#000000", "#333333", "#212121", "#424242"];
};
readonly dark: {
readonly surface: readonly ["#222222", "#1a1a1a", "#121212", "#181818", "#2d2d2d"];
readonly gray: readonly ["white", "#ffffff", "#e5e5e5", "#f5f5f5", "#eeeeee"];
};
};
};