apphouse/dist/themes/style.interface.d.ts

Component library for React that uses observable state management and theme-able components.

import { CSSProperties } from 'glamor';
import { ColorDefinition } from './utils/color.interface';
/**
 * Styles may contain values that are references to colors
 * or tokens
 */
export declare const COLOR = "color";
export declare const TOKEN = "token";
export type StyleTokenReferenceType = typeof COLOR | typeof TOKEN;
export interface StyleTokenReference {
    /**
     * The type of this reference
     */
    type: StyleTokenReferenceType;
    /**
     * Actual value for this token reference
     * ex. for spacings.small the can be a number
     * for backgroundColors.background the value can be a color definition
     */
    value: ColorDefinition | string | number;
    /**
     * The path to the actual value of this token in this system
     * ex. backgroundColors.background, spacings.xSmall
     * This value will be the token type + token key
     */
    key: string;
}
export declare const htmlTags: string[];
export declare const baseComponentTypes: string[];
export declare const SnippetCategories: string[];
export type SnippetCategoryType = (typeof SnippetCategories)[number] | string;
declare const stateTypes: string[];
export type BaseComponentTypeOption = (typeof baseComponentTypes)[number] | string;
export type BaseComponentStateTypeOption = (typeof stateTypes)[number] | string;
export type TagPreviewOption = (typeof htmlTags)[number] | string;
export type CssPropertyStyle = {
    property: string;
    value: string | number | CssPropertyStyle[];
    reference: StyleTokenReference | null;
    isSelector: boolean;
};
/**
 * A publicly stored Style object.
 * It doesn't belong to any specific project.
 * The difference between this and a ProjectStyle is that
 * the value here is just the Raw CSS instead of the
 * CssPropertyStyle[];
 */
export interface PublicStyleType {
    id: string;
    variant: string;
    baseComponent: BaseComponentTypeOption;
    value: CSSProperties;
    state?: BaseComponentStateTypeOption;
    previewWithTag?: TagPreviewOption;
}
export interface StyleType {
    id: string;
    variant: string;
    baseComponent: BaseComponentTypeOption;
    value: CssPropertyStyle[];
    state?: BaseComponentStateTypeOption;
    previewWithTag?: TagPreviewOption;
    /**
     * The theme id for which this style is for
     */
    themeId?: string;
    /**
     * When style is copied or imported from another theme it will have a
     * reference to the original theme id
     */
    referenceThemeId?: string;
}
export {};