theme-vir/dist/color/color-theme.d.ts

Create an entire web theme.

import { type RequiredAndNotNull } from '@augment-vir/common';
import { type CSSResult } from 'element-vir';
import { type CssVarName, type SingleCssVarDefinition } from 'lit-css-vars';
import { type RequireAtLeastOne } from 'type-fest';
/**
 * Reference another color from this same definition inside {@link ColorInitValue}
 *
 * @category Internal
 */
export type ColorInitReference = RequireAtLeastOne<{
    refForeground: CssVarName;
    refBackground: CssVarName;
}>;
/**
 * All possible types for {@link ColorInit}.
 *
 * @category Internal
 */
export type ColorInitValue = string | number | CSSResult | ColorInitReference;
/**
 * An individual theme color init.
 *
 * @category Internal
 */
export type ColorInit = RequireAtLeastOne<{
    foreground: ColorInitValue;
    background: ColorInitValue;
}>;
/**
 * Same as {@link ColorInit} but without references.
 *
 * @category Internal
 */
export type NoRefColorInit = RequireAtLeastOne<{
    foreground: Exclude<ColorInitValue, ColorInitReference>;
    background: Exclude<ColorInitValue, ColorInitReference>;
}>;
/**
 * A defined individual color from a color theme.
 *
 * @category Internal
 */
export type ColorThemeColor<Init extends ColorInit = ColorInit, Name extends CssVarName = CssVarName> = {
    foreground: SingleCssVarDefinition;
    background: SingleCssVarDefinition;
    /**
     * The name of this theme color within the theme itself. (This is not any of the CSS variable
     * names.)
     */
    name: Name;
    init: Init;
};
/**
 * Base input type for the type parameter in {@link defineColorTheme}.
 *
 * @category Internal
 */
export type ColorThemeInit = Record<CssVarName, ColorInit>;
/**
 * A finalized color theme, output from {@link defineColorTheme}.
 *
 * @category Internal
 */
export type ColorTheme<Init extends ColorThemeInit = ColorThemeInit> = {
    colors: AllColorThemeColors<Init>;
    inverse: AllColorThemeColors<Init>;
    /** The original init object for this theme. */
    init: {
        colors: Init;
        default: RequiredAndNotNull<NoRefColorInit>;
    };
};
/**
 * All colors within a {@link ColorTheme}.
 *
 * @category Internal
 */
export type AllColorThemeColors<Init extends ColorThemeInit = ColorThemeInit> = {
    [ColorName in keyof Init as ColorName extends CssVarName ? ColorName : never]: ColorName extends CssVarName ? Init[ColorName] extends ColorInit ? ColorThemeColor<Init[ColorName], ColorName> : never : never;
} & {
    [themeDefaultKey]: ColorThemeColor<RequiredAndNotNull<NoRefColorInit>, typeof themeDefaultKey>;
};
/**
 * Handles a color init value.
 *
 * @category Internal
 */
export declare function createColorCssVarDefault(fromName: string, init: ColorInitValue, defaultInit: RequiredAndNotNull<NoRefColorInit>, colorsInit: ColorThemeInit): Exclude<ColorInitValue, ColorInitReference>;
/**
 * Default foreground/background color theme used in {@link ColorTheme}. Do not define a theme color
 * with this name!
 *
 * @category Internal
 */
export declare const themeDefaultKey = "theme-default";
/**
 * Define a color theme.
 *
 * @category Color Theme
 */
export declare function defineColorTheme<const Init extends ColorThemeInit>(defaultInit: RequiredAndNotNull<NoRefColorInit>, allColorsInit: Init): ColorTheme<Init>;