neu-ts-css-theming/dist/index.d.ts

Lightweight CSS-variables theming with TS helpers for Angular or any web app.

type AppThemeNames = ('primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' | 'accent' | 'custom');
declare const AppThemeNamesList: string[];
type DisplayDataType = ('block' | 'grid' | 'flex' | '-webkit-box' | 'contents');
declare const DisplayDataTypeList: string[];
type OverflowDataType = ('visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | 'initial' | 'inherit');
declare const OverflowDataTypeList: string[];
type AlignContentDataType = ('flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'baseline' | 'normal' | 'stretch' | 'inherit' | 'initial' | 'unset');
declare const AlignContentDataTypeList: string[];
type PositionDataType = ('static' | 'relative' | 'fixed' | 'absolute' | 'sticky');
declare const PositionDataTypeList: string[];
type FlexDirectionDataType = ('column' | 'row');
declare const FlexDirectionDataTypeList: string[];
type FlexWrapDataType = ('nowrap' | 'wrap' | 'wrap-reverse' | 'initial' | 'inherit');
declare const FlexWrapDataTypeList: string[];
type JustifyContentDataType = ('flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'initial' | 'inherit');
declare const JustifyContentDataTypeList: string[];
type JustifyItemsDataType = ('legacy' | 'normal' | 'stretch' | 'start' | 'left' | 'center' | 'end' | 'right' | 'safe' | 'unsafe' | 'baseline' | 'initial' | 'inherit');
declare const JustifyItemsDataTypeList: string[];
type FlexAlignItemsDataType = ('normal' | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'initial' | 'inherit');
declare const FlexAlignItemsDataTypeList: string[];
type GridAlignItemsDataType = ('normal' | 'stretch' | 'center' | 'start' | 'end' | 'baseline' | 'initial' | 'inherit');
declare const GridAlignItemsDataTypeList: string[];
type TextAlignDataType = ('left' | 'center' | 'right');
declare const TextAlignDataTypeList: string[];
type TextWeightDataType = ('light' | 'lighter' | 'normal' | 'bold' | 'bolder');
declare const TextWeightDataTypeList: string[];
type TextWhiteSpaceDataType = ('normal' | 'nowrap' | 'break-spaces' | 'pre' | 'pre-line' | 'pre-wrap');
declare const TextWhiteSpaceDataTypeList: string[];
type TextOverflowDataType = ('ellipsis' | 'clip' | 'visible' | 'hidden');
declare const TextOverflowDataTypeList: string[];
type TextBoxOrientDataType = ('horizontal' | 'vertical' | 'inline-axis' | 'block-axis');
declare const TextBoxOrientDataTypeList: string[];
type TextDecorationDataType = ('none' | 'underline' | 'overline' | 'line-through' | 'blink' | 'inherit' | 'initial' | 'unset');
declare const TextDecorationDataTypeList: string[];
type BorderStyleDataType = ('solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'none' | 'hidden');
declare const BorderStyleDataTypeList: string[];
type IconTypeDataType = ('mat' | 'span');
declare const IconTypeDataTypeList: string[];
type OutlineStyleDataType = ('none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit');
declare const OutlineStyleDataTypeList: string[];
type VisibilityDataType = ('visible' | 'hidden' | 'collapse' | 'initial' | 'inherit');
declare const VisibilityDataTypeList: string[];
type CursorDataType = ('alias' | 'all-scroll' | 'auto' | 'cell' | 'col-resize' | 'context-menu' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'no-drop' | 'none' | 'not-allowed' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'vertical-text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out' | 'initial' | 'inherit');
declare const CursorDataTypeList: string[];

/** MODEL: AppThemeModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/AppTheme.model.md)
 * ************************************************** */
declare class AppThemeModel {
    themeName?: AppThemeNames;
    colors?: AppThemeColorsModel;
    constructor(config?: Partial<AppThemeModel>, populateDefaultVariablesForAllFields?: boolean);
    static configAppTheme(config?: AppThemeNames | AppThemeModel): AppThemeModel;
}
/** MODEL: AppThemeColorsModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/AppThemeColors.model.md)
 * ************************************************** */
declare class AppThemeColorsModel {
    backgroundColor?: string;
    textColor?: string;
    iconColor?: string;
    borderColor?: string;
    rippleColor?: string;
    boxShadowColor?: string;
    constructor(config?: Partial<AppThemeColorsModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: AppStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/AppStyle.model.md).
 * ************************************************** */
declare class AppStyleModel {
    theme?: AppThemeNames | AppThemeModel;
    reveal?: boolean;
    order?: string;
    cursor?: CursorDataType;
    visibility?: VisibilityDataType;
    transition?: string;
    transform?: string;
    display?: DisplayDataType;
    overflow?: OverflowDataType;
    overflowX?: OverflowDataType;
    overflowY?: OverflowDataType;
    opacity?: string;
    zIndex?: string;
    position?: PositionDataType;
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
    gap?: string;
    margin?: MarginStyleModel;
    padding?: PaddingStyleModel;
    backgroundColor?: string;
    rippleColor?: string;
    alignContent?: AlignContentDataType;
    flex?: FlexStyleModel;
    grid?: GridStyleModel;
    border?: BorderStyleModel;
    boxShadow?: BoxShadowsStyleModel;
    text?: TextStyleModel;
    size?: SizeStyleModel;
    outline?: OutlineStyleModel;
    constructor(config?: Partial<AppStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: MarginStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/MarginStyle.model.md).
 * ************************************************** */
declare class MarginStyleModel {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
    constructor(config?: Partial<MarginStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: PaddingStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/PaddingStyle.model.md).
 * ************************************************** */
declare class PaddingStyleModel {
    top?: string;
    right?: string;
    bottom?: string;
    left?: string;
    constructor(config?: Partial<PaddingStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: FlexStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/FlexStyle.model.md).
 * ************************************************** */
declare class FlexStyleModel {
    flexDirection?: FlexDirectionDataType;
    flexWrap?: FlexWrapDataType;
    justifyContent?: JustifyContentDataType;
    alignItems?: FlexAlignItemsDataType;
    constructor(config?: Partial<FlexStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: GridStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/GridStyle.model.md).
 * ************************************************** */
declare class GridStyleModel {
    gridTemplateColumns?: string;
    gridTemplateRows?: string;
    gridArea?: string;
    gridColumn?: string;
    gridRow?: string;
    justifyItems?: JustifyItemsDataType;
    alignItems?: GridAlignItemsDataType;
    constructor(config?: Partial<GridStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: BorderStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/BorderStyle.model.md).
 * ************************************************** */
declare class BorderStyleModel {
    theme?: AppThemeNames | AppThemeModel;
    color?: string;
    style?: BorderStyleDataType;
    width?: string;
    radius?: string;
    constructor(config?: Partial<BorderStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: BoxShadowsStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/BoxShadowsStyle.model.md).
 * ************************************************** */
declare class BoxShadowsStyleModel {
    theme?: AppThemeNames | AppThemeModel;
    general?: BoxShadowStyleModel;
    hover?: BoxShadowStyleModel;
    active?: BoxShadowStyleModel;
    constructor(config?: Partial<BoxShadowsStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: BoxShadowStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/BoxShadowStyle.model.md).
 * ************************************************** */
declare class BoxShadowStyleModel {
    theme?: AppThemeNames | AppThemeModel;
    hOffset?: string;
    vOffset?: string;
    blur?: string;
    spread?: string;
    color?: string;
    constructor(config?: Partial<BoxShadowStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: TextStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/TextStyle.model.md)
 * ************************************************** */
declare class TextStyleModel {
    theme?: AppThemeNames | AppThemeModel;
    reveal?: boolean;
    caption?: string;
    align?: TextAlignDataType;
    color?: string;
    whiteSpace?: TextWhiteSpaceDataType;
    overflow?: TextOverflowDataType;
    lineClamp?: string;
    boxOrient?: TextBoxOrientDataType;
    textDecoration?: TextDecorationDataType;
    letterSpacing?: string | number;
    lineHeight?: string | number;
    font?: FontStyleModel;
    constructor(config?: Partial<TextStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: IconStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/IconStyle.model.md)
 * ************************************************** */
declare class IconStyleModel extends TextStyleModel {
    type?: IconTypeDataType;
    name?: {
        text?: string;
        reveal?: boolean;
    };
    width?: string;
    height?: string;
    constructor(config?: Partial<IconStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: SizeStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/SizeStyle.model.md)
 * ************************************************** */
declare class SizeStyleModel {
    width?: string;
    height?: string;
    minWidth?: string;
    minHeight?: string;
    maxWidth?: string;
    maxHeight?: string;
    constructor(config?: Partial<SizeStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** FUNCTION: CONFIG > configDynamicSize
 * **************************************************
 * This function is used to configure the dynamic
 * size of an element based on the provided value.
 * ************************************************** */
declare const configDynamicSize: (value?: string) => {
    width: string;
    height: string;
} | undefined;
/** MODEL: FontStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/AppStyleTextFont.model.md)
 * ************************************************** */
declare class FontStyleModel {
    family?: string;
    size?: string;
    weight?: TextWeightDataType;
    lineHeight?: string;
    constructor(config?: Partial<FontStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}
/** MODEL: OutlineStyleModel
 * **************************************************
 * [Documentation, click here](../../lib/docs/models/app-style/OutlineStyle.model.md).
 * ************************************************** */
declare class OutlineStyleModel {
    theme?: AppThemeNames | AppThemeModel;
    color?: string;
    style?: OutlineStyleDataType;
    width?: string;
    constructor(config?: Partial<OutlineStyleModel>, populateDefaultVariablesForAllFields?: boolean);
}

declare const DEFAULT_CSS_VAR_PREFIX = "--app-theme-";
declare const THEME_ATTR = "data-theme";
type CSSVars = Record<string, string>;
interface ThemeApplierOptions {
    /** Prefix for CSS custom properties, e.g. '--app-theme-' (include trailing dash) */
    cssVarPrefix?: string;
    /** Target element to apply vars on (defaults to document.documentElement) */
    target?: HTMLElement;
}
/** Apply CSS variables to <html> (or a provided element). */
declare function applyCssVars(vars: CSSVars, opts?: ThemeApplierOptions): void;
interface SetThemeOptions {
    /** Attribute used to store theme; defaults to "data-theme". */
    attr?: string;
    /** Target element to annotate; defaults to <html>. */
    target?: HTMLElement;
}
/** Sets data-theme on :root to drive CSS theme rules. */
declare function setTheme(theme: AppThemeNames, opts?: SetThemeOptions): void;
/** Reads theme from :root[data-theme] (or a custom attr). */
declare function getTheme(opts?: {
    attr?: string;
    target?: HTMLElement;
}): AppThemeNames | undefined;

export { type AlignContentDataType, AlignContentDataTypeList, AppStyleModel, AppThemeColorsModel, AppThemeModel, type AppThemeNames, AppThemeNamesList, type BorderStyleDataType, BorderStyleDataTypeList, BorderStyleModel, BoxShadowStyleModel, BoxShadowsStyleModel, type CSSVars, type CursorDataType, CursorDataTypeList, DEFAULT_CSS_VAR_PREFIX, type DisplayDataType, DisplayDataTypeList, type FlexAlignItemsDataType, FlexAlignItemsDataTypeList, type FlexDirectionDataType, FlexDirectionDataTypeList, FlexStyleModel, type FlexWrapDataType, FlexWrapDataTypeList, FontStyleModel, type GridAlignItemsDataType, GridAlignItemsDataTypeList, GridStyleModel, IconStyleModel, type IconTypeDataType, IconTypeDataTypeList, type JustifyContentDataType, JustifyContentDataTypeList, type JustifyItemsDataType, JustifyItemsDataTypeList, MarginStyleModel, type OutlineStyleDataType, OutlineStyleDataTypeList, OutlineStyleModel, type OverflowDataType, OverflowDataTypeList, PaddingStyleModel, type PositionDataType, PositionDataTypeList, type SetThemeOptions, SizeStyleModel, THEME_ATTR, type TextAlignDataType, TextAlignDataTypeList, type TextBoxOrientDataType, TextBoxOrientDataTypeList, type TextDecorationDataType, TextDecorationDataTypeList, type TextOverflowDataType, TextOverflowDataTypeList, TextStyleModel, type TextWeightDataType, TextWeightDataTypeList, type TextWhiteSpaceDataType, TextWhiteSpaceDataTypeList, type ThemeApplierOptions, type VisibilityDataType, VisibilityDataTypeList, applyCssVars, configDynamicSize, getTheme, setTheme };