material-chalk
Version:
Generate beautiful colors from namespaces based on color theory
82 lines (81 loc) • 3.06 kB
TypeScript
import { type DynamicScheme, Hct } from "@material/material-color-utilities";
import type { SchemeConstructor } from "./scheme-override.js";
export declare const TONE_RANGE: {
Min: number;
Max: number;
};
/**
* Generates a color deterministically based on the seed provided
*/
export declare function colorFromSeed(seed: number): Hct;
type HexColor = `#${string}`;
/**
* Generic function to format a namespace into a resulting type
*/
export type FormatType<T> = (namespace: Hct) => T;
/**
* Static type representing all the different formatters supported by material-chalk
*/
export declare const Format: {
/**
* Format as a HCT <Hue, Chroma, Tone> tuple used by Material Design
*/
Hct: (namespace: Hct) => Hct;
/**
* Format as a color hex code (ex. #ff0000 for red). Output is always lowercase
*/
Hex: (namespace: Hct) => HexColor;
/**
* Decorates a given `chalk` object with the color of this material
*/
Chalk: (chalk: typeof import("chalk").default) => (namespace: Hct) => typeof import("chalk").default;
/**
* Use the material as the source color for a Material Design scheme
*/
Scheme: <Args extends any[], Result extends DynamicScheme>(scheme: SchemeConstructor<Args, Result>) => (...args: Args) => (namespace: Hct) => Result;
/**
* Custom formatter if none of the existing ones satisfy a use-case
*/
Custom: <T>(fn: (namespace: Hct) => T) => (namespace: Hct) => T;
};
/**
* Utility functions to working with a namespace
*/
export type NamespaceResult = {
formatAs: <T>(format: FormatType<T>) => T;
subMaterial: (namespace: string) => NamespaceResult;
};
/**
* Force a specific color to be used for a namespace.
* This is useful if you need to force a brand color for a namespace
*
* This will cause the specified color to be used even deep inside `createMaterial` calls
*
* Careful: this is change is global, so if you use this in a library,
* only use it for namespaces that are unlikely to be used by downstream users
* @param namespace - the namespace to override
* @param color - the color to use (see `matchColor` on how to generate this color easily)
*/
export declare function registerBrand(namespace: string, color: Hct): void;
/**
* Options used when generating a material for a namespace
*/
export type MaterialOptions = {
/**
* Cache the HCT color generated for a given namespace
*/
cache?: boolean;
};
/**
* Creates a material for the given namespaces
*
* @param namespace a single namespace, or a hierarchy of namespaces (ex: `["parent", "child"]`)
* @param options options used to construct the material
* @returns a new material
*/
export declare function createMaterial(namespace: string | string[] | [Hct, string], options?: MaterialOptions): NamespaceResult;
/**
* Wrap a color with some utility functions to make it easier to work with. See `NamespaceResult`
*/
export declare function colorToNamespace(color: Hct, options?: MaterialOptions): NamespaceResult;
export {};