@patreon/studio/module/utilities/color-mod/index.d.ts

Patreon Studio Design System

import type { HexString } from '~/types/color';
type ValueOrTransform<T> = T | ((prevValue: T) => T);
interface ColorModInterface {
    alpha(valueOrTransform: ValueOrTransform<number | undefined>): this;
    hue(valueOrTransform: ValueOrTransform<number>): this;
    chroma(valueOrTransform: ValueOrTransform<number>): this;
    tone(valueOrTransform: ValueOrTransform<number>): this;
}
/**
 * A class that represents a color modification pipeline.
 *
 * We provide a fluent API for modifying a color using the
 * HCT color space using the following methods:
 *
 * - `alpha` - Modify the alpha value.
 * - `hue` - Modify the hue value.
 * - `chroma` - Modify the chroma value.
 * - `tone` - Modify the tone value.
 *
 * We provide this interface to provide a standardized way
 * to modify colors. we want to abstract away the complexity
 * of the HCT color space from engineers and still allow them
 * to modify colors in a way that is easy to understand.
 *
 * @param color - The hex string to modify.
 * @returns A new color modification pipeline.
 */
declare class ColorMod implements ColorModInterface {
    private alphaValue;
    private hueValue;
    private chromaValue;
    private toneValue;
    constructor(color: HexString);
    hue(valueOrTransform: ValueOrTransform<number>): this;
    chroma(valueOrTransform: ValueOrTransform<number>): this;
    tone(valueOrTransform: ValueOrTransform<number>): this;
    alpha(valueOrTransform: ValueOrTransform<number | undefined>): this;
    value(): import("~/types/color").HexString6 | import("~/types/color").HexString8;
}
/**
 * Takes a hex string and a transform pipeline and returns a new hex string.
 * Don't worry about the limits of the values, we'll handle them for you.
 * Hue is 0-360, chroma is 0-100, tone is 0-100, alpha is 0-1.
 *
 * Using static values:
 * ```ts
 * colorMod('#000000', (c) => c.alpha(0.5).hue(10).chroma(10).tone(10));
 *```
 *
 * Computing values using a function:
 * ```ts
 * colorMod('#000000', (color) => (
 *   color
 *    .alpha(a => a * 0.5)
 *    .hue(h => h + 10)
 *    .chroma(c => c + 10)
 *    .tone(t => t + 10)
 * ));
 * ```
 *
 * @param color - The hex string to modify.
 * @param transform - The transform pipeline to apply to the color.
 * @returns A new hex string.
 */
export declare function colorMod(color: HexString, transform: (instance: ColorMod) => ColorMod): import("~/types/color").HexString6 | import("~/types/color").HexString8;
export {};