element-book
Version:
An [`element-vir`](https://npmjs.com/package/element-vir) drop-in element for building, testing, and demonstrating a collection of elements (or, in other words, a design system).
58 lines (57 loc) • 1.94 kB
TypeScript
import { type CSSResult } from 'element-vir';
/**
* A single background and foreground color pairing.
*
* @category Internal
*/
export type ColorPair = {
background: CSSResult;
foreground: CSSResult;
};
/**
* Color pairs for everything used by the element-book app.
*
* @category Internal
*/
export type ColorTheme = {
nav: {
hover: ColorPair;
active: ColorPair;
selected: ColorPair;
};
accent: {
icon: CSSResult;
};
page: ColorPair & {
backgroundFaint1: CSSResult;
backgroundFaint2: CSSResult;
foregroundFaint1: CSSResult;
foregroundFaint2: CSSResult;
};
};
/**
* All color theme CSS vars for the element-book app.
*
* @category Internal
*/
export declare const colorThemeCssVars: import("lit-css-vars").CssVarDefinitions<{
readonly 'element-book-nav-hover-background-color': "magenta";
readonly 'element-book-nav-hover-foreground-color': "magenta";
readonly 'element-book-nav-active-background-color': "magenta";
readonly 'element-book-nav-active-foreground-color': "magenta";
readonly 'element-book-nav-selected-background-color': "magenta";
readonly 'element-book-nav-selected-foreground-color': "magenta";
readonly 'element-book-accent-icon-color': "magenta";
readonly 'element-book-page-background-color': "magenta";
readonly 'element-book-page-background-faint-level-1-color': "magenta";
readonly 'element-book-page-background-faint-level-2-color': "magenta";
readonly 'element-book-page-foreground-color': "magenta";
readonly 'element-book-page-foreground-faint-level-1-color': "magenta";
readonly 'element-book-page-foreground-faint-level-2-color': "magenta";
}>;
/**
* Sets a new color theme's CSS vars on the given HTML element for the element-book app.
*
* @category Internal
*/
export declare function setThemeCssVars(element: HTMLElement, theme: ColorTheme): void;