xobuilder-extractor/dist/domains/entities/style.entity.d.ts

> **A sophisticated web application that converts HTML and CSS to JSON layout through an intelligent multi-step flow process with AI validation.**

import { ColorGradientValue, ShadowValue, TransformValue, UnitValue, UnitValueOriented, ValueWithDevice } from './general.entity';
export declare namespace StyleEntity {
    type StyleRawData = Record<string, StyleFieldData> | StyleFieldData;
    type StyleFieldData = TypographyRawData | SpacingRawData | BorderRawData | BackgroundRawData | DimensionRawData | EffectRawData | AdvancedRawData;
    type StyleFieldFull = {
        typography?: TypographyRawData;
        spacing?: SpacingRawData;
        border?: BorderRawData;
        background?: BackgroundRawData;
        dimension?: DimensionRawData;
        effect?: EffectRawData;
        advanced?: AdvancedRawData;
    };
    type StyleFieldSetData = Record<string, StyleFieldFull>;
    type TypographyRawData = {
        "font-size"?: ValueWithDevice<string>;
        color?: ValueWithDevice<string>;
        "font-weight"?: ValueWithDevice<string | number>;
        "line-height"?: ValueWithDevice<string | number>;
        "letter-spacing"?: ValueWithDevice<string>;
        "text-transform"?: ValueWithDevice<string>;
        "text-decoration"?: ValueWithDevice<string>;
        "text-align"?: ValueWithDevice<string>;
        "font-family"?: ValueWithDevice<string>;
    };
    type SpacingRawData = {
        padding?: ValueWithDevice<string>;
        margin?: ValueWithDevice<string>;
    };
    type BorderRawData = {
        border?: ValueWithDevice<string>;
        "border-radius"?: ValueWithDevice<string>;
        "border-color"?: ValueWithDevice<string>;
        "border-width"?: ValueWithDevice<string>;
        "border-style"?: ValueWithDevice<string>;
    };
    type BackgroundRawData = {
        "background-type"?: "color" | "image";
        "background-color"?: ValueWithDevice<string>;
        "background-image"?: ValueWithDevice<string>;
        "background-overlay"?: ValueWithDevice<string>;
        "background-gradient"?: ValueWithDevice<string>;
        "background-position"?: ValueWithDevice<{
            x: number;
            y: number;
        }>;
        "background-repeat"?: ValueWithDevice<string>;
        "background-size"?: ValueWithDevice<string>;
    };
    type DimensionRawData = {
        width?: ValueWithDevice<string>;
        height?: ValueWithDevice<string>;
    };
    type EffectRawData = {
        "box-shadow"?: ValueWithDevice<string>;
        opacity?: ValueWithDevice<string>;
        blur?: ValueWithDevice<string>;
        overflow?: ValueWithDevice<string>;
    };
    type AdvancedRawData = {
        transition?: ValueWithDevice<string>;
        transform?: ValueWithDevice<string>;
    };
    type StyleFull = {
        typography?: TypographyData;
        spacing?: SpacingData;
        border?: BorderData;
        background?: BackgroundData;
        dimension?: DimensionData;
        effect?: EffectData;
        advanced?: AdvancedData;
    };
    type TypographyData = {
        "font-size"?: ValueWithDevice<UnitValue>;
        color?: ValueWithDevice<string>;
        "font-weight"?: ValueWithDevice<string>;
        "line-height"?: ValueWithDevice<UnitValue>;
        "letter-spacing"?: ValueWithDevice<UnitValue>;
        "text-transform"?: ValueWithDevice<string>;
        "text-align"?: ValueWithDevice<string>;
        "text-decoration"?: ValueWithDevice<string>;
        "font-style"?: ValueWithDevice<string>;
        "text-shadow"?: ValueWithDevice<ShadowValue[]>;
        "font-family"?: ValueWithDevice<string>;
    };
    type SpacingData = {
        padding?: ValueWithDevice<UnitValueOriented>;
        margin?: ValueWithDevice<UnitValueOriented>;
    };
    type BorderData = {
        "border-radius"?: ValueWithDevice<string>;
        "border-color"?: ValueWithDevice<string>;
        "border-width"?: ValueWithDevice<string>;
        "border-style"?: ValueWithDevice<string>;
    };
    type BackgroundData = {
        "background-type"?: "color" | "image";
        "background-color"?: ValueWithDevice<string>;
        "background-image"?: ValueWithDevice<string | ColorGradientValue>;
        "background-overlay"?: ValueWithDevice<string>;
        "background-gradient"?: ValueWithDevice<string>;
        "background-position"?: ValueWithDevice<{
            x: number;
            y: number;
        }>;
        "background-repeat"?: ValueWithDevice<string>;
        "background-size"?: ValueWithDevice<string>;
    };
    type DimensionData = {
        width?: ValueWithDevice<string>;
        height?: ValueWithDevice<string>;
    };
    type EffectData = {
        "box-shadow"?: ValueWithDevice<ShadowValue[]>;
        opacity?: ValueWithDevice<UnitValue>;
        blur?: ValueWithDevice<UnitValue>;
        transition?: UnitValue;
        overflow?: string;
    };
    type AdvancedData = {
        transform?: ValueWithDevice<TransformValue>;
    };
}
export interface StylesResult {
    css: string;
    properties?: StyleProperties;
    accumulateNumber: number;
}
export interface StyleProperties {
    "background-image": string | null;
    "background-video": string | null;
    "background-overlay": string | null;
    icon?: string;
}
export interface ResultStyles {
    /**
     * Current css của field
     */
    css: string;
    css_code: string;
    /**
     * Style đã parsed
     */
    styles: {
        normal: Record<string, DeviceValue>;
        hover: Record<string, DeviceValue>;
    };
    /**
     * Các properties của field
     */
    properties: Record<string, string | Record<string, string> | any>;
    /**
     * Các css kế thừa cho các element con
     * String là áp dụng cho tất cả các con, Array là áp dụng cho từng con theo thứ tự index
     */
    inheritCss: string | string[];
}
export interface CollectedStyles {
    normal: Record<string, DeviceValue>;
    hover: Record<string, DeviceValue>;
}
export interface DeviceValue {
    desktop?: string;
    tablet?: string;
    mobile?: string;
}