UNPKG

material-chalk

Version:

Generate beautiful colors from namespaces based on color theory

82 lines (81 loc) 3.06 kB
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 {};