apphouse
Version:
Component library for React that uses observable state management and theme-able components.
112 lines (111 loc) • 4.96 kB
TypeScript
import { Color } from './Color';
import { Palette } from './Palette';
import { Style } from './Style';
import { Token } from './Token';
import { ApphouseTheme, ThemeFull } from '../styles/defaults/themes.interface';
import { BaseThemeSettings } from './defaults.tokens';
import { ThemeUpdatesTracker } from './ThemeUpdatesTracker';
import { ColorDefinition } from './utils/color.interface';
import { BaseComponentTypeOption, CssPropertyStyle, StyleType, TagPreviewOption } from './style.interface';
import { TokenType, TokenTypeOption } from './token.interface';
import { PaletteType, ThemeModeType } from './palette.interface';
type LookupTable = {
[id: string]: string;
};
declare const presentationModeOptions: string[];
export type PresentationModeOption = (typeof presentationModeOptions)[number] | string;
export declare class Theme {
title: string;
id: string;
palette: Record<string, Palette>;
tokens: Record<string, Token>;
styles: Record<string, Style>;
sync: ThemeUpdatesTracker;
presentationMode?: PresentationModeOption;
constructor(prop: ThemeFull);
get paletteColorsIds(): string[];
/**
* If the theme has any palette with mode === "theme", the theme will have
* themed styles. hasThemedStyles is helpful for determining how to extract
* the values from the styles when importing / exporting. If the theme
* has themed styles, the user will probably have to select a palette id
* to extract the raw values from.
*/
get hasThemedStyles(): boolean;
get lookup(): LookupTable;
get hasPaletteDefined(): boolean;
get hasTokensDefined(): boolean;
get hasStylesDefined(): boolean;
get stylesGroupedByBaseComponentType(): {
[baseComponent: string]: Style[];
};
get tokensByType(): Record<string, Token[]>;
get basePalette(): Palette | undefined;
get tokensLookupTable(): LookupTable;
get reverseTokensLookupTable(): {
[id: string]: string;
};
static autoGenId: (title: string) => string;
get colors(): Color[];
get colorsByPalette(): Record<string, Color[]>;
get colorsByMode(): Record<string, Color[]>;
get modeColorsLength(): number;
get swatchColors(): ColorDefinition[];
setNewUniqueId: () => string;
/**
* Clone this theme
* @returns a new theme with a copy of this one, but with a new id
*/
clone: () => this;
getThemeObject: (withColorsFromPaletteId: string) => ApphouseTheme | undefined;
getColorsFromPalettesFromColorId: (colorId?: string) => {
palette: string;
rgba: string;
color: Color;
}[];
setPresentationMode: (value: PresentationModeOption | undefined) => void;
setTitle: (value: string) => void;
setId: (value: string) => void;
styleStyles: (styles: Record<string, Style>) => void;
setStyle: (style: Style) => void;
addTokenList: (tokens: Token[]) => void;
addStyles: (styles: StyleType[]) => void;
setToken: (token: Token) => void;
setTokens: (tokens: Record<string, TokenType>) => void;
importPalette: (objPalette: PaletteType) => void;
importPalettes: (objPalettes: PaletteType[]) => void;
resetStyles: () => void;
resetTokens: () => void;
setTokensTokens: (tokens: Record<string, Token>) => void;
addToken: (key: string, value: string, type: TokenTypeOption) => void;
addPalette: (key: string, value: PaletteType) => void;
addPalettes: (palettes: {
[paletteId: string]: Palette;
}) => void;
setPalette: (palette: Palette) => void;
addStyle: (id: string, value: CssPropertyStyle[], baseComponent: BaseComponentTypeOption, variant: string, state: string, previewWithTag: TagPreviewOption) => void;
appendStyles: (styles: {
[selector: string]: Style;
}) => void;
removePalette: (key: string) => void;
removePaletteColor: (paletteId: string, colorId: string) => boolean;
removeToken: (key: string) => void;
removeStyle: (key: string) => boolean;
deleteAllStylesWithKey: (keyInStyle: 'id' | 'variant' | 'baseComponent' | 'value' | 'state' | 'previewWithTag', value: string) => void;
deleteAllTokenTypes: (type: string) => void;
getColorKey: (colorDefinition: ColorDefinition) => string | undefined;
getPalette: (mode: ThemeModeType, id: string) => Palette | undefined;
getColorFromColorId: (colorId: string) => Color | undefined;
getFlattenTokensByType: (flattenByType?: string) => Record<string, any>;
static toCamelCase: (str: string) => string;
reset: () => void;
}
export declare const generateDefaultThemeFromThemeSettings: (themeSettings: BaseThemeSettings) => Theme;
export declare const getLookupTableForThisAppColors: () => {
[x: string]: string;
};
export declare const getLookupTableForThisApp: () => {
[x: string]: string;
};
export declare const getLookupTableForCurrentThemePalettes: (palettes: Record<string, Palette>) => {};
export {};