UNPKG

2.67 kBTypeScriptView Raw
1declare const isLight: (color: string) => boolean;
2declare const getLightVariant: (color: string) => string;
3declare const getDarkVariant: (color: string) => string;
4/**
5 * Finds the closest [accessible color](https://contrast-ratio.com/).
6 *
7 * @param color - in [#-hexadecimal notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) (like `#RRGGBB` or `#RGB`)
8 * @returns contrast color in [#-hexadecimal notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
9 */
10declare const getContrastVariant: (color: string) => string;
11/**
12 * Changes the lightness of `color` by the given `amount`.
13 *
14 * @param color - to shade in [#-hexadecimal notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) (like `#RRGGBB` or `#RGB`)
15 * @param amount - value between `0` and `1`
16 * @returns shaded color in [#-hexadecimal notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
17 */
18declare const shade: (color: string, amount: number) => string;
19/**
20 * Creates a {@link shade} color using `ifLight` if `color` [is light]{@link isLight}
21 * otherwise `ifDark`.
22 *
23 * @param color - to shade in [#-hexadecimal notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) (like `#RRGGBB` or `#RGB`)
24 * @param ifLight - amount between `0` and `1` if `color` [is light]{@link isLight}
25 * @param ifDark - amount between `0` and `1` if `color` is dark (eg [not light]{@link isLight})
26 * @returns shaded color in [#-hexadecimal notation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
27 */
28declare const getShadeVariant: (color: string, ifLight: number, ifDark?: number) => string;
29
30declare type ThemeColors = Record<string, undefined | string>;
31interface Shades extends Record<string, undefined | number | [darker: number, lighter: number]> {
32 hover?: number | [darker: number, lighter: number];
33 active?: number | [darker: number, lighter: number];
34 disabled?: number | [darker: number, lighter: number];
35 selected?: number | [darker: number, lighter: number];
36}
37declare const createOnColor: (colors: ThemeColors, key: string, color?: string | undefined) => ThemeColors;
38declare const generateOnColors: (base: ThemeColors) => ThemeColors;
39declare const createShadeVariants: (colors: ThemeColors, key: string, shades?: Shades, color?: string | undefined) => ThemeColors;
40declare const generateColors: (base: ThemeColors, shades?: Shades | undefined) => ThemeColors;
41
42export { Shades, ThemeColors, createOnColor, createShadeVariants, generateColors, generateOnColors, getContrastVariant, getDarkVariant, getLightVariant, getShadeVariant, isLight, shade };
43//# sourceMappingURL=colors.d.ts.map