@pastel-palette/colors
Version:
Core color definitions package for the UI Color System, featuring OKLCH color space support, TypeScript types, and a kawaii aesthetic.
172 lines (155 loc) • 7.21 kB
text/typescript
interface ColorValue {
oklch: string;
srgb: string;
p3?: string;
}
/**
* Input type for creating colors - can be OKLCH or sRGB string
*/
type ColorInput = string;
interface ColorVariants {
light: ColorValue;
dark: ColorValue;
}
type DepthLevel = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
interface SemanticColor {
primary?: ColorVariants;
secondary?: ColorVariants;
tertiary?: ColorVariants;
quaternary?: ColorVariants;
quinary?: ColorVariants;
}
type MaterialOpacity = 'ultraThick' | 'thick' | 'medium' | 'thin' | 'ultraThin' | 'opaque';
interface MaterialColor {
light: ColorValue;
dark: ColorValue;
}
type DarkModeStrategy = 'media-query' | 'class' | 'data-attribute';
interface DarkModeConfig {
strategy: DarkModeStrategy;
selector?: string;
}
type RegularColorName = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'orange' | 'pink' | 'brown' | 'gray' | 'black' | 'white' | 'sky' | 'neutral' | 'teal' | 'cyan' | 'indigo' | 'violet' | 'lime' | 'emerald' | 'amber' | 'rose' | 'slate' | 'zinc';
type GrayScaleColorName = 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9' | 'gray10';
type ElementColorName = 'border' | 'separator' | 'link' | 'text' | 'placeholderText' | 'disabledControl' | 'disabledText';
type ApplicationColorName = 'accent' | 'primary' | 'secondary';
type ThemeName = 'regular' | 'kawaii' | 'high-contrast';
interface ThemeColorSystem {
colors: Record<RegularColorName, ColorVariants>;
grayScale: Record<GrayScaleColorName, ColorVariants>;
element: Record<ElementColorName, SemanticColor>;
background: SemanticColor;
fill: SemanticColor;
material: Record<MaterialOpacity, MaterialColor>;
application: Record<ApplicationColorName, ColorVariants>;
}
interface ColorSystem {
regular: ThemeColorSystem;
kawaii: ThemeColorSystem;
'high-contrast': ThemeColorSystem;
}
interface ColorPalette {
colors: ColorSystem;
meta?: {
name: string;
description: string;
theme: ThemeName;
};
}
interface HighContrastColorVariants extends ColorVariants {
}
interface KawaiiColorVariants extends ColorVariants {
}
declare const regularColorSystem: ThemeColorSystem;
declare const kawaiiColorSystem: ThemeColorSystem;
declare const highContrastColorSystem: ThemeColorSystem;
declare const colorSystem: ColorSystem;
declare const colorPalette: ColorPalette;
declare const highContrastApplicationColors: Record<ApplicationColorName, ColorVariants>;
declare const highContrastColors: Record<RegularColorName, ColorVariants>;
declare const highContrastGrayScale: Record<GrayScaleColorName, ColorVariants>;
declare const highContrastElementColors: Record<ElementColorName, SemanticColor>;
declare const highContrastBackgroundColors: SemanticColor;
declare const highContrastFillColors: SemanticColor;
declare const highContrastMaterialColors: Record<MaterialOpacity, MaterialColor>;
declare const kawaiiApplicationColors: Record<ApplicationColorName, ColorVariants>;
declare const kawaiiColors: Record<RegularColorName, ColorVariants>;
declare const kawaiiGrayScale: Record<GrayScaleColorName, ColorVariants>;
declare const kawaiiElementColors: Record<ElementColorName, SemanticColor>;
declare const kawaiiBackgroundColors: SemanticColor;
declare const kawaiiFillColors: SemanticColor;
declare const kawaiiMaterialColors: Record<MaterialOpacity, MaterialColor>;
declare const regularApplicationColors: Record<ApplicationColorName, ColorVariants>;
declare const regularColors: Record<RegularColorName, ColorVariants>;
declare const regularGrayScale: Record<GrayScaleColorName, ColorVariants>;
declare const regularElementColors: Record<ElementColorName, SemanticColor>;
declare const regularBackgroundColors: SemanticColor;
declare const regularFillColors: SemanticColor;
declare const regularMaterialColors: Record<MaterialOpacity, MaterialColor>;
interface OKLCH {
l: number;
c: number;
h: number;
a?: number;
}
interface RGB {
r: number;
g: number;
b: number;
a?: number;
}
interface ColorValidationResult {
valid: boolean;
errors: string[];
warnings: string[];
}
interface ContrastRatio {
ratio: number;
passes: {
aa: boolean;
aaa: boolean;
largeTextAa: boolean;
largeTextAaa: boolean;
};
}
type ColorFormat = 'oklch' | 'srgb' | 'p3' | 'hex';
interface ColorConversionOptions {
format: ColorFormat;
fallback?: boolean;
precision?: number;
}
interface GeneratorConfig {
colors: ColorSystem;
darkMode?: DarkModeConfig;
prefix?: string;
formatOptions?: {
colorSpace?: ColorFormat;
includeP3?: boolean;
includeFallbacks?: boolean;
precision?: number;
};
}
declare function mapHexToRGBString(hex: string): string;
declare function addAlphaToHex(hex: string, alpha: number): string;
declare function parseOKLCH(oklchString: string): OKLCH | null;
declare function formatOKLCH(oklch: OKLCH): string;
declare function parseRGB(rgbString: string): RGB | null;
declare function formatRGB(rgb: RGB): string;
declare function validateColor(colorValue: string): ColorValidationResult;
declare function calculateRelativeLuminance(rgb: RGB): number;
declare function calculateContrastRatio(rgb1: RGB, rgb2: RGB): ContrastRatio;
declare function clamp(value: number, min: number, max: number): number;
declare function toFixed(value: number, precision?: number): number;
/**
* Generate color formats from OKLCH string
*/
declare function createColorFromOKLCH(oklchString: string): ColorValue;
/**
* Generate color formats from sRGB string
*/
declare function createColorFromSRGB(srgbString: string): ColorValue;
/**
* Create color from either OKLCH or sRGB input
*/
declare function createColor(input: string): ColorValue;
export { type ApplicationColorName, type ColorConversionOptions, type ColorFormat, type ColorInput, type ColorPalette, type ColorSystem, type ColorValidationResult, type ColorValue, type ColorVariants, type ContrastRatio, type DarkModeConfig, type DarkModeStrategy, type DepthLevel, type ElementColorName, type GeneratorConfig, type GrayScaleColorName, type HighContrastColorVariants, type KawaiiColorVariants, type MaterialColor, type MaterialOpacity, type OKLCH, type RGB, type RegularColorName, type SemanticColor, type ThemeColorSystem, type ThemeName, addAlphaToHex, calculateContrastRatio, calculateRelativeLuminance, clamp, colorPalette, colorSystem, createColor, createColorFromOKLCH, createColorFromSRGB, formatOKLCH, formatRGB, highContrastApplicationColors, highContrastBackgroundColors, highContrastColorSystem, highContrastColors, highContrastElementColors, highContrastFillColors, highContrastGrayScale, highContrastMaterialColors, kawaiiApplicationColors, kawaiiBackgroundColors, kawaiiColorSystem, kawaiiColors, kawaiiElementColors, kawaiiFillColors, kawaiiGrayScale, kawaiiMaterialColors, mapHexToRGBString, parseOKLCH, parseRGB, regularApplicationColors, regularBackgroundColors, regularColorSystem, regularColors, regularElementColors, regularFillColors, regularGrayScale, regularMaterialColors, toFixed, validateColor };